diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 919b12415..0ed8f3d11 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -67,6 +67,9 @@ jobs:
       - name: Check Electron Access Guard
         run: bash scripts/check-electron-access.sh
 
+      - name: Design tokens (engine + no hard-coded colors in UI)
+        run: npm run check:design-tokens
+
   pytest:
     name: Run Python Tests
     runs-on: ubuntu-latest
diff --git a/.gitignore b/.gitignore
index 371f89626..a77e24f08 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ node-compile-cache
 
 node_modules
 dist
+dist-web
 !package/**/dist
 dist-ssr
 dist-electron
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
index 3f024a1db..a9efd3733 100644
--- a/.lintstagedrc.json
+++ b/.lintstagedrc.json
@@ -1,6 +1,7 @@
 {
   "*.{ts,tsx}": [
     "eslint --fix --no-warn-ignored",
+    "node scripts/check-design-token-usage.mjs",
     "prettier --write",
     "node licenses/update_license.js"
   ],
diff --git a/backend/app/__init__.py b/backend/app/__init__.py
index 0265148c8..66abb74a7 100644
--- a/backend/app/__init__.py
+++ b/backend/app/__init__.py
@@ -52,7 +52,11 @@ async def dispatch(self, request, call_next):
         response = await call_next(request)
         response.headers["X-Content-Type-Options"] = "nosniff"
         response.headers["Referrer-Policy"] = "strict-origin-when-cross-origin"
-        if request.url.path.startswith("/files/preview/"):
+        path = request.url.path
+        is_file_preview = path.startswith(
+            "/files/preview/"
+        ) or path.startswith("/api/v1/files/preview/")
+        if is_file_preview:
             if "X-Frame-Options" in response.headers:
                 del response.headers["X-Frame-Options"]
             response.headers["Content-Security-Policy"] = (
diff --git a/backend/app/agent/factory/browser.py b/backend/app/agent/factory/browser.py
index 6f4bb401e..c6cb0e02e 100644
--- a/backend/app/agent/factory/browser.py
+++ b/backend/app/agent/factory/browser.py
@@ -37,12 +37,32 @@
 from app.hands.interface import IHands
 from app.model.chat import Chat
 from app.service.task import Agents
+from app.utils.browser_launcher import normalize_cdp_url
 from app.utils.file_utils import get_working_directory
 
 
 def _get_browser_port(browser: dict) -> int:
     """Extract port from a browser config dict, with fallback to env default."""
-    return int(browser.get("port", env("browser_port", "9222")))
+    raw_port = browser.get("port")
+    if raw_port is not None:
+        return int(raw_port)
+
+    raw_endpoint = browser.get("endpoint") or browser.get("cdp_url")
+    if raw_endpoint:
+        _, _, port = normalize_cdp_url(str(raw_endpoint))
+        return port
+
+    return int(env("browser_port", "9222"))
+
+
+def _get_browser_endpoint(browser: dict) -> str:
+    """Extract a normalized CDP endpoint from a browser config dict."""
+    raw_endpoint = browser.get("endpoint") or browser.get("cdp_url")
+    if raw_endpoint:
+        endpoint, _, _ = normalize_cdp_url(str(raw_endpoint))
+        return endpoint
+
+    return f"http://localhost:{_get_browser_port(browser)}"
 
 
 class CdpBrowserPoolManager:
@@ -181,6 +201,7 @@ def browser_agent(
         )
         if selected_browser:
             selected_port = _get_browser_port(selected_browser)
+            cdp_url = _get_browser_endpoint(selected_browser)
             selected_is_external = selected_browser.get("isExternal", False)
             logger.info(
                 f"Acquired CDP browser from pool (initial): "
@@ -188,15 +209,14 @@ def browser_agent(
                 f"session_id={toolkit_session_id}"
             )
         else:
-            selected_port = _get_browser_port(options.cdp_browsers[0])
-            selected_is_external = options.cdp_browsers[0].get(
-                "isExternal", False
-            )
+            fallback_browser = options.cdp_browsers[0]
+            selected_port = _get_browser_port(fallback_browser)
+            cdp_url = _get_browser_endpoint(fallback_browser)
+            selected_is_external = fallback_browser.get("isExternal", False)
             logger.warning(
                 f"No available browsers in pool (initial), using first: "
                 f"port={selected_port}, session_id={toolkit_session_id}"
             )
-        cdp_url = f"http://localhost:{selected_port}"
     elif use_browser:
         existing_cdp_url = env("EIGENT_CDP_URL", "").strip()
         selected_port = env("browser_port", "9222")
diff --git a/backend/app/agent/listen_chat_agent.py b/backend/app/agent/listen_chat_agent.py
index 3ff3aeb91..b272952b4 100644
--- a/backend/app/agent/listen_chat_agent.py
+++ b/backend/app/agent/listen_chat_agent.py
@@ -700,6 +700,7 @@ def clone(self, with_memory: bool = False) -> ChatAgent:
         # If this agent has CDP acquire callback, acquire CDP BEFORE cloning
         # tools so that HybridBrowserToolkit clones with the correct CDP port
         new_cdp_port = None
+        new_cdp_url = None
         new_cdp_session = None
         has_cdp = hasattr(self, "_cdp_acquire_callback") and callable(
             getattr(self, "_cdp_acquire_callback", None)
@@ -721,12 +722,18 @@ def clone(self, with_memory: bool = False) -> ChatAgent:
                     new_cdp_session,
                     getattr(self, "_cdp_task_id", None),
                 )
-                from app.agent.factory.browser import _get_browser_port
+                from app.agent.factory.browser import (
+                    _get_browser_endpoint,
+                    _get_browser_port,
+                )
 
                 if selected:
                     new_cdp_port = _get_browser_port(selected)
+                    new_cdp_url = _get_browser_endpoint(selected)
                 else:
-                    new_cdp_port = _get_browser_port(cdp_browsers[0])
+                    fallback_browser = cdp_browsers[0]
+                    new_cdp_port = _get_browser_port(fallback_browser)
+                    new_cdp_url = _get_browser_endpoint(fallback_browser)
 
         if need_cdp_clone:
             # Temporarily override the browser toolkit's CDP URL.
@@ -738,7 +745,7 @@ def clone(self, with_memory: bool = False) -> ChatAgent:
                     toolkit.config_loader.get_browser_config().cdp_url
                 )
                 toolkit.config_loader.get_browser_config().cdp_url = (
-                    f"http://localhost:{new_cdp_port}"
+                    new_cdp_url
                 )
                 try:
                     cloned_tools, toolkits_to_register = self._clone_tools()
@@ -803,10 +810,13 @@ def clone(self, with_memory: bool = False) -> ChatAgent:
             # Set CDP info on cloned agent
             if new_cdp_port is not None and new_cdp_session is not None:
                 new_agent._cdp_port = new_cdp_port
+                new_agent._cdp_url = new_cdp_url
                 new_agent._cdp_session_id = new_cdp_session
             else:
                 if hasattr(self, "_cdp_port"):
                     new_agent._cdp_port = self._cdp_port
+                if hasattr(self, "_cdp_url"):
+                    new_agent._cdp_url = self._cdp_url
                 if hasattr(self, "_cdp_session_id"):
                     new_agent._cdp_session_id = self._cdp_session_id
 
diff --git a/backend/app/controller/chat_controller.py b/backend/app/controller/chat_controller.py
index ba681233a..678ec49c3 100644
--- a/backend/app/controller/chat_controller.py
+++ b/backend/app/controller/chat_controller.py
@@ -55,8 +55,9 @@
     task_locks,
 )
 from app.utils.browser_launcher import (
-    ensure_cdp_browser_available,
+    ensure_cdp_browser_endpoint,
     is_cdp_url_available,
+    normalize_cdp_url,
 )
 
 router = APIRouter()
@@ -98,6 +99,11 @@ async def _prepare_browser_for_request(
             is_cdp_url_available, existing_cdp_url
         )
         if is_available:
+            normalized_endpoint, _, selected_port = normalize_cdp_url(
+                existing_cdp_url
+            )
+            os.environ["EIGENT_CDP_URL"] = normalized_endpoint
+            os.environ["browser_port"] = str(selected_port)
             if request is not None:
                 request.state.browser_available = True
             return True
@@ -109,7 +115,7 @@ async def _prepare_browser_for_request(
         return True
 
     try:
-        launched = await asyncio.to_thread(ensure_cdp_browser_available, port)
+        endpoint = await asyncio.to_thread(ensure_cdp_browser_endpoint, port)
     except Exception as e:
         os.environ.pop("EIGENT_CDP_URL", None)
         chat_logger.warning(
@@ -120,8 +126,10 @@ async def _prepare_browser_for_request(
             request.state.browser_available = False
         return False
 
-    if launched:
-        os.environ["EIGENT_CDP_URL"] = f"http://127.0.0.1:{port}"
+    if endpoint:
+        os.environ["EIGENT_CDP_URL"] = endpoint
+        _, _, selected_port = normalize_cdp_url(endpoint)
+        os.environ["browser_port"] = str(selected_port)
         if request is not None:
             request.state.browser_available = True
         return True
diff --git a/backend/app/controller/health_controller.py b/backend/app/controller/health_controller.py
index 5d0cb7ffa..f2bcada9c 100644
--- a/backend/app/controller/health_controller.py
+++ b/backend/app/controller/health_controller.py
@@ -19,7 +19,7 @@
 from pydantic import BaseModel
 
 from app.router_layer.hands_resolver import get_environment_hands
-from app.utils.browser_launcher import _is_cdp_available
+from app.utils.browser_launcher import _is_cdp_available, is_cdp_url_available
 
 logger = logging.getLogger("health_controller")
 
@@ -41,11 +41,16 @@ async def health_check(detail: bool = Query(False)):
     if detail:
         hands = get_environment_hands()
         capabilities = hands.get_capability_manifest()
-        try:
-            browser_port = int(os.environ.get("browser_port", "9222"))
-        except ValueError:
-            browser_port = 9222
-        capabilities["browser_cdp_reachable"] = _is_cdp_available(browser_port)
+        cdp_url = os.environ.get("EIGENT_CDP_URL", "").strip()
+        if cdp_url:
+            cdp_reachable = is_cdp_url_available(cdp_url)
+        else:
+            try:
+                browser_port = int(os.environ.get("browser_port", "9222"))
+            except ValueError:
+                browser_port = 9222
+            cdp_reachable = _is_cdp_available(browser_port)
+        capabilities["browser_cdp_reachable"] = cdp_reachable
         response.capabilities = capabilities
     logger.debug(
         "Health check completed",
diff --git a/backend/app/controller/tool_controller.py b/backend/app/controller/tool_controller.py
index 76a217883..61d792c59 100644
--- a/backend/app/controller/tool_controller.py
+++ b/backend/app/controller/tool_controller.py
@@ -13,6 +13,7 @@
 # ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
 import asyncio
+import inspect
 import logging
 import os
 import shutil
@@ -30,7 +31,8 @@
     DEFAULT_CDP_PORT,
     _is_cdp_available,
     _is_port_in_use,
-    ensure_cdp_browser_available,
+    ensure_cdp_browser_endpoint,
+    is_cdp_url_available,
     is_local_cdp_host,
     normalize_cdp_url,
 )
@@ -50,6 +52,7 @@ class LinkedInTokenRequest(BaseModel):
 logger = logging.getLogger("tool_controller")
 router = APIRouter()
 _web_cdp_browser_meta: dict | None = None
+DEFAULT_LOGIN_BROWSER_CDP_PORT = 9323
 
 
 class CdpBrowserConnectRequest(BaseModel):
@@ -114,6 +117,37 @@ def _get_connected_cdp_port() -> int | None:
         return None
 
 
+def _get_login_browser_cdp_port() -> int:
+    """Dedicated CDP port for the user-login cookie browser.
+
+    Keep this outside the Browser Agent fallback range (9223-9299), otherwise
+    Cookie Management can mistake a managed task browser for the login window.
+    """
+    raw_port = os.environ.get("EIGENT_LOGIN_BROWSER_CDP_PORT")
+    if not raw_port:
+        return DEFAULT_LOGIN_BROWSER_CDP_PORT
+
+    try:
+        port = int(raw_port)
+    except ValueError:
+        logger.warning(
+            "Invalid EIGENT_LOGIN_BROWSER_CDP_PORT=%s; using default %s",
+            raw_port,
+            DEFAULT_LOGIN_BROWSER_CDP_PORT,
+        )
+        return DEFAULT_LOGIN_BROWSER_CDP_PORT
+
+    if port <= 0 or port > 65535:
+        logger.warning(
+            "Out-of-range EIGENT_LOGIN_BROWSER_CDP_PORT=%s; using default %s",
+            raw_port,
+            DEFAULT_LOGIN_BROWSER_CDP_PORT,
+        )
+        return DEFAULT_LOGIN_BROWSER_CDP_PORT
+
+    return port
+
+
 def _set_connected_cdp_browser(
     endpoint: str,
     *,
@@ -123,8 +157,9 @@ def _set_connected_cdp_browser(
     managed_by: str = "local",
 ) -> dict:
     global _web_cdp_browser_meta
-    normalized_endpoint, _, _ = normalize_cdp_url(endpoint)
+    normalized_endpoint, _, port = normalize_cdp_url(endpoint)
     os.environ["EIGENT_CDP_URL"] = normalized_endpoint
+    os.environ["browser_port"] = str(port)
     _web_cdp_browser_meta = _build_web_cdp_browser(
         normalized_endpoint,
         is_external=is_external,
@@ -163,29 +198,29 @@ def _list_connected_cdp_browsers() -> list[dict]:
 
 
 def _is_cdp_endpoint_available(endpoint: str) -> bool:
-    normalized_endpoint, host, port = normalize_cdp_url(endpoint)
+    _, host, port = normalize_cdp_url(endpoint)
     if is_local_cdp_host(host):
         return _is_cdp_available(port)
 
-    try:
-        import httpx
-
-        response = httpx.get(
-            f"{normalized_endpoint}/json/version",
-            timeout=2.0,
-        )
-        return response.status_code == 200
-    except Exception:
-        return False
+    return is_cdp_url_available(endpoint)
 
 
 def _is_remote_browser_hands(hands) -> bool:
     if hands is None:
         return False
+    get_manifest = getattr(hands, "get_capability_manifest", None)
+    if get_manifest is None or inspect.iscoroutinefunction(get_manifest):
+        return False
     try:
-        manifest = hands.get_capability_manifest()
+        manifest = get_manifest()
     except Exception:
         return False
+    if inspect.isawaitable(manifest):
+        if hasattr(manifest, "close"):
+            manifest.close()
+        return False
+    if not isinstance(manifest, dict):
+        return False
     return manifest.get("deployment") == "remote_cluster"
 
 
@@ -271,13 +306,12 @@ async def launch_cdp_browser(request: Request):
             "endpoint": browser.get("endpoint"),
         }
 
-    port = DEFAULT_CDP_PORT
-    launched = ensure_cdp_browser_available(port)
-    if not launched:
-        if _is_port_in_use(port):
+    endpoint = ensure_cdp_browser_endpoint(DEFAULT_CDP_PORT)
+    if not endpoint:
+        if _is_port_in_use(DEFAULT_CDP_PORT):
             return {
                 "success": False,
-                "error": f"Port {port} is already in use and is not exposing CDP.",
+                "error": f"Port {DEFAULT_CDP_PORT} is already in use and is not exposing a compatible CDP browser.",
             }
         return {
             "success": False,
@@ -285,7 +319,7 @@ async def launch_cdp_browser(request: Request):
         }
 
     browser = _set_connected_cdp_browser(
-        f"http://127.0.0.1:{port}",
+        endpoint,
         is_external=False,
     )
     return {
@@ -970,12 +1004,11 @@ async def open_browser_login():
         Browser session information
     """
     try:
-        import socket
         import subprocess
 
         # Use fixed profile name for persistent logins (no port suffix)
         session_id = "user_login"
-        cdp_port = 9223
+        cdp_port = _get_login_browser_cdp_port()
 
         # IMPORTANT: Use dedicated profile for tool_controller browser
         # This is the SOURCE OF TRUTH for login data
@@ -996,12 +1029,7 @@ async def open_browser_login():
             f" at: {user_data_dir}"
         )
 
-        # Check if browser is already running on this port
-        def is_port_in_use(port):
-            with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
-                return s.connect_ex(("localhost", port)) == 0
-
-        if is_port_in_use(cdp_port):
+        if _is_port_in_use(cdp_port):
             logger.info(f"Browser already running on port {cdp_port}")
             return {
                 "success": True,
@@ -1135,15 +1163,8 @@ def log_electron_output():
 @router.get("/browser/status", name="browser status")
 async def browser_status():
     """Check if the login browser is currently open."""
-    import socket
-
-    cdp_port = 9223
-
-    def is_port_in_use(port):
-        with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
-            return s.connect_ex(("localhost", port)) == 0
-
-    return {"is_open": is_port_in_use(cdp_port)}
+    cdp_port = _get_login_browser_cdp_port()
+    return {"is_open": _is_port_in_use(cdp_port), "cdp_port": cdp_port}
 
 
 @router.get("/browser/cookies", name="list cookie domains")
diff --git a/backend/app/utils/browser_launcher.py b/backend/app/utils/browser_launcher.py
index ec16a26b6..be0127068 100644
--- a/backend/app/utils/browser_launcher.py
+++ b/backend/app/utils/browser_launcher.py
@@ -20,6 +20,7 @@
 In web mode, Brain launches Chrome/Chromium directly.
 """
 
+import json
 import logging
 import os
 import platform
@@ -32,6 +33,8 @@
 
 # Default CDP port (must match browser_port in Chat model)
 DEFAULT_CDP_PORT = 9222
+FALLBACK_CDP_PORT_START = 9223
+FALLBACK_CDP_PORT_END = 9299
 LOCAL_CDP_HOSTS = frozenset({"127.0.0.1", "localhost", "::1"})
 
 
@@ -49,7 +52,12 @@ def normalize_cdp_url(
     default_port: int = DEFAULT_CDP_PORT,
 ) -> tuple[str, str, int]:
     """Normalize a CDP endpoint into ``scheme://host:port`` form."""
-    parsed = urlparse(cdp_url)
+    raw_url = cdp_url.strip()
+    if raw_url.isdigit():
+        port = int(raw_url)
+        return f"http://{default_host}:{port}", default_host, port
+
+    parsed = urlparse(raw_url if "://" in raw_url else f"http://{raw_url}")
     scheme = parsed.scheme or "http"
     host = parsed.hostname or default_host
     port = parsed.port or default_port
@@ -66,7 +74,9 @@ def is_cdp_url_available(cdp_url: str) -> bool:
         import httpx
 
         r = httpx.get(f"{normalized}/json/version", timeout=2.0)
-        return r.status_code == 200
+        if r.status_code != 200:
+            return False
+        return _is_supported_cdp_version(r.json(), normalized)
     except Exception:
         return False
 
@@ -78,16 +88,101 @@ def _is_port_in_use(port: int) -> bool:
 
 
 def _is_cdp_available(port: int) -> bool:
-    """Check if a CDP-capable browser is listening on the port."""
+    """Check if a Playwright-compatible CDP browser is listening."""
     try:
         import httpx
 
         r = httpx.get(f"http://127.0.0.1:{port}/json/version", timeout=2.0)
-        return r.status_code == 200
+        if r.status_code != 200:
+            return False
+        return _is_supported_cdp_version(r.json(), f"http://127.0.0.1:{port}")
     except Exception:
         return False
 
 
+def _is_supported_cdp_version(data: dict, endpoint: str) -> bool:
+    """Reject CDP endpoints that Playwright cannot manage."""
+    browser = str(data.get("Browser") or "")
+    user_agent = str(data.get("User-Agent") or "")
+    websocket_url = data.get("webSocketDebuggerUrl")
+    combined = f"{browser} {user_agent}"
+
+    if not websocket_url:
+        logger.debug(
+            "[BROWSER LAUNCHER] CDP endpoint has no browser websocket"
+        )
+        return False
+
+    if "Electron" in combined:
+        logger.warning(
+            "[BROWSER LAUNCHER] Ignoring Electron DevTools endpoint at %s; "
+            "Browser Agent requires a managed Chrome/Chromium CDP browser.",
+            endpoint,
+        )
+        return False
+
+    if not any(
+        token in combined
+        for token in ("Chrome/", "Chromium", "HeadlessChrome/")
+    ):
+        logger.warning(
+            "[BROWSER LAUNCHER] Ignoring unsupported CDP endpoint at %s: %s",
+            endpoint,
+            browser or user_agent or "unknown browser",
+        )
+        return False
+
+    if not _supports_browser_context_management(str(websocket_url), endpoint):
+        return False
+
+    return True
+
+
+def _supports_browser_context_management(
+    websocket_url: str,
+    endpoint: str,
+) -> bool:
+    """Probe the browser-level CDP socket for Playwright compatibility."""
+    try:
+        from websockets.sync.client import connect
+
+        command = {
+            "id": 1,
+            "method": "Browser.setDownloadBehavior",
+            "params": {"behavior": "default"},
+        }
+        with connect(websocket_url, open_timeout=2, close_timeout=1) as ws:
+            ws.send(json.dumps(command))
+            response = json.loads(ws.recv(timeout=2))
+    except Exception as exc:
+        logger.warning(
+            "[BROWSER LAUNCHER] Could not validate CDP capabilities at %s: %s",
+            endpoint,
+            exc,
+        )
+        return False
+
+    error = response.get("error")
+    if error:
+        message = error.get("message") if isinstance(error, dict) else error
+        logger.warning(
+            "[BROWSER LAUNCHER] Ignoring CDP endpoint at %s; "
+            "it does not support browser context management: %s",
+            endpoint,
+            message,
+        )
+        return False
+
+    return True
+
+
+def _candidate_ports(preferred_port: int):
+    yield preferred_port
+    for port in range(FALLBACK_CDP_PORT_START, FALLBACK_CDP_PORT_END + 1):
+        if port != preferred_port:
+            yield port
+
+
 def _find_chrome_executable() -> str | None:
     """Find Chrome or Chromium executable for launching with CDP."""
     system = platform.system()
@@ -252,3 +347,36 @@ def ensure_cdp_browser_available(port: int = DEFAULT_CDP_PORT) -> bool:
         "[BROWSER LAUNCHER] Browser launched but CDP not ready after 10s"
     )
     return False
+
+
+def ensure_cdp_browser_endpoint(
+    preferred_port: int = DEFAULT_CDP_PORT,
+) -> str | None:
+    """
+    Ensure a managed CDP browser exists and return its endpoint.
+
+    If the preferred port is occupied by Electron's own DevTools endpoint, use
+    the next available local port instead of handing that endpoint to
+    Playwright.
+    """
+    for port in _candidate_ports(preferred_port):
+        if _is_cdp_available(port):
+            return f"http://127.0.0.1:{port}"
+
+        if _is_port_in_use(port):
+            logger.warning(
+                "[BROWSER LAUNCHER] Port %s is occupied by a non-managed "
+                "or unsupported CDP endpoint; trying another port.",
+                port,
+            )
+            continue
+
+        if ensure_cdp_browser_available(port):
+            return f"http://127.0.0.1:{port}"
+
+    logger.error(
+        "[BROWSER LAUNCHER] No available CDP browser port in %s-%s",
+        preferred_port,
+        FALLBACK_CDP_PORT_END,
+    )
+    return None
diff --git a/backend/tests/app/agent/factory/test_browser.py b/backend/tests/app/agent/factory/test_browser.py
index 0c26a90c5..6182600ad 100644
--- a/backend/tests/app/agent/factory/test_browser.py
+++ b/backend/tests/app/agent/factory/test_browser.py
@@ -144,3 +144,65 @@ def test_browser_agent_prefers_preconnected_cdp_url(sample_chat_data):
         assert mock_browser_toolkit.call_args.kwargs["cdp_url"] == (
             "http://worker-17:9222"
         )
+
+
+def test_browser_agent_uses_cdp_browser_endpoint(sample_chat_data):
+    """Browser pool entries may point at remote Hands endpoints."""
+    sample_chat_data["cdp_browsers"] = [
+        {
+            "id": "remote-browser",
+            "port": 9222,
+            "endpoint": "http://worker-17:9222",
+            "isExternal": False,
+            "name": "Remote Browser",
+        }
+    ]
+    options = Chat(**sample_chat_data)
+
+    from app.agent.factory import browser as browser_factory
+    from app.service.task import task_locks
+
+    mock_task_lock = MagicMock()
+    task_locks[options.task_id] = mock_task_lock
+
+    _mod = "app.agent.factory.browser"
+    try:
+        with (
+            patch(f"{_mod}.agent_model") as mock_agent_model,
+            patch(
+                f"{_mod}.get_working_directory",
+                return_value="/tmp/test_workdir",
+            ),
+            patch("asyncio.create_task"),
+            patch(f"{_mod}.HumanToolkit") as mock_human_toolkit,
+            patch(f"{_mod}.HybridBrowserToolkit") as mock_browser_toolkit,
+            patch(f"{_mod}.TerminalToolkit") as mock_terminal_toolkit,
+            patch(f"{_mod}.NoteTakingToolkit") as mock_note_toolkit,
+            patch(f"{_mod}.ScreenshotToolkit") as mock_screenshot_toolkit,
+            patch(f"{_mod}.SearchToolkit") as mock_search_toolkit,
+            patch(f"{_mod}.ToolkitMessageIntegration"),
+            patch("uuid.uuid4") as mock_uuid,
+        ):
+            mock_human_toolkit.get_can_use_tools.return_value = []
+            mock_browser_toolkit.return_value.get_tools.return_value = []
+            mock_terminal_instance = MagicMock()
+            mock_terminal_instance.shell_exec = MagicMock()
+            mock_terminal_toolkit.return_value = mock_terminal_instance
+            mock_note_toolkit.return_value.get_tools.return_value = []
+            mock_screenshot_toolkit.return_value.get_tools.return_value = []
+            mock_search_toolkit.return_value = MagicMock()
+            mock_uuid.return_value.__getitem__ = (
+                lambda self, key: "test_session"
+            )
+
+            mock_agent = MagicMock()
+            mock_agent_model.return_value = mock_agent
+
+            browser_agent(options)
+
+            assert mock_browser_toolkit.call_args.kwargs["cdp_url"] == (
+                "http://worker-17:9222"
+            )
+    finally:
+        browser_factory._cdp_pool_manager.release_by_task(options.task_id)
+        task_locks.pop(options.task_id, None)
diff --git a/backend/tests/app/controller/test_chat_controller.py b/backend/tests/app/controller/test_chat_controller.py
index 2356fa7d8..79efd560f 100644
--- a/backend/tests/app/controller/test_chat_controller.py
+++ b/backend/tests/app/controller/test_chat_controller.py
@@ -91,6 +91,10 @@ async def test_post_chat_sets_environment_variables(
             ) as mock_step_solve,
             patch("app.controller.chat_controller.load_dotenv"),
             patch("app.controller.chat_controller.set_current_task_id"),
+            patch(
+                "app.controller.chat_controller._prepare_browser_for_request",
+                return_value=True,
+            ),
             patch("pathlib.Path.mkdir"),
             patch("pathlib.Path.home", return_value=MagicMock()),
             patch.dict(os.environ, {}, clear=True),
@@ -133,8 +137,8 @@ async def test_post_chat_sets_cdp_url_when_browser_ready(
                 return_value=False,
             ),
             patch(
-                "app.controller.chat_controller.ensure_cdp_browser_available",
-                return_value=True,
+                "app.controller.chat_controller.ensure_cdp_browser_endpoint",
+                return_value="http://127.0.0.1:8080",
             ),
             patch("app.controller.chat_controller.load_dotenv"),
             patch("app.controller.chat_controller.set_current_task_id"),
@@ -151,6 +155,7 @@ async def mock_generator():
             await post(chat_data, mock_request)
 
             assert os.environ.get("EIGENT_CDP_URL") == "http://127.0.0.1:8080"
+            assert os.environ.get("browser_port") == "8080"
             assert mock_request.state.browser_available is True
 
     @pytest.mark.asyncio
@@ -174,8 +179,8 @@ async def test_post_chat_clears_cdp_url_when_browser_unavailable(
                 return_value=False,
             ),
             patch(
-                "app.controller.chat_controller.ensure_cdp_browser_available",
-                return_value=False,
+                "app.controller.chat_controller.ensure_cdp_browser_endpoint",
+                return_value=None,
             ),
             patch("app.controller.chat_controller.load_dotenv"),
             patch("app.controller.chat_controller.set_current_task_id"),
@@ -218,7 +223,7 @@ async def test_post_chat_preserves_existing_cdp_url(
                 return_value=True,
             ),
             patch(
-                "app.controller.chat_controller.ensure_cdp_browser_available",
+                "app.controller.chat_controller.ensure_cdp_browser_endpoint",
             ) as mock_ensure_browser,
             patch("app.controller.chat_controller.load_dotenv"),
             patch("app.controller.chat_controller.set_current_task_id"),
@@ -239,6 +244,7 @@ async def mock_generator():
             await post(chat_data, mock_request)
 
             assert os.environ.get("EIGENT_CDP_URL") == "http://worker-17:9222"
+            assert os.environ.get("browser_port") == "9222"
             assert mock_request.state.browser_available is True
             mock_ensure_browser.assert_not_called()
 
diff --git a/backend/tests/app/controller/test_health_controller.py b/backend/tests/app/controller/test_health_controller.py
new file mode 100644
index 000000000..514b597f6
--- /dev/null
+++ b/backend/tests/app/controller/test_health_controller.py
@@ -0,0 +1,51 @@
+# ========= 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. =========
+
+from unittest.mock import patch
+
+import pytest
+
+from app.controller import health_controller
+
+pytestmark = pytest.mark.unit
+
+
+class _FakeHands:
+    def get_capability_manifest(self):
+        return {"deployment": "remote_cluster"}
+
+
+@pytest.mark.asyncio
+async def test_health_detail_prefers_configured_cdp_url(monkeypatch):
+    monkeypatch.setenv("EIGENT_CDP_URL", "http://worker-17:9222")
+    monkeypatch.setenv("browser_port", "9222")
+
+    with (
+        patch(
+            "app.controller.health_controller.get_environment_hands",
+            return_value=_FakeHands(),
+        ),
+        patch(
+            "app.controller.health_controller.is_cdp_url_available",
+            return_value=True,
+        ) as is_cdp_url_available,
+        patch(
+            "app.controller.health_controller._is_cdp_available"
+        ) as is_cdp_available,
+    ):
+        response = await health_controller.health_check(detail=True)
+
+    assert response.capabilities["browser_cdp_reachable"] is True
+    is_cdp_url_available.assert_called_once_with("http://worker-17:9222")
+    is_cdp_available.assert_not_called()
diff --git a/backend/tests/app/controller/test_tool_controller.py b/backend/tests/app/controller/test_tool_controller.py
index c6652c4aa..f814870a9 100644
--- a/backend/tests/app/controller/test_tool_controller.py
+++ b/backend/tests/app/controller/test_tool_controller.py
@@ -169,9 +169,61 @@ def acquire_resource(
         assert response["browser"]["managedBy"] == "remote"
         assert response["browser"]["host"] == "worker-17"
         assert os.environ["EIGENT_CDP_URL"] == "http://worker-17:9222"
+        assert os.environ["browser_port"] == "9222"
 
         tool_controller._clear_connected_cdp_browser()
 
+    @pytest.mark.asyncio
+    async def test_open_browser_login_uses_dedicated_cookie_port_when_existing(
+        self, monkeypatch: pytest.MonkeyPatch
+    ):
+        monkeypatch.delenv("EIGENT_LOGIN_BROWSER_CDP_PORT", raising=False)
+
+        with patch(
+            "app.controller.tool_controller._is_port_in_use",
+            return_value=True,
+        ):
+            response = await tool_controller.open_browser_login()
+
+        assert response["success"] is True
+        assert response["cdp_port"] == 9323
+        assert response["session_id"] == "user_login"
+
+    @pytest.mark.asyncio
+    async def test_browser_status_uses_dedicated_cookie_port(
+        self, monkeypatch: pytest.MonkeyPatch
+    ):
+        monkeypatch.delenv("EIGENT_LOGIN_BROWSER_CDP_PORT", raising=False)
+
+        with patch(
+            "app.controller.tool_controller._is_port_in_use",
+            return_value=True,
+        ) as is_port_in_use:
+            response = await tool_controller.browser_status()
+
+        assert response == {"is_open": True, "cdp_port": 9323}
+        is_port_in_use.assert_called_once_with(9323)
+
+    def test_remote_browser_hands_rejects_async_manifest(self):
+        class _AsyncManifestHands:
+            async def get_capability_manifest(self):
+                return {"deployment": "remote_cluster"}
+
+        assert not tool_controller._is_remote_browser_hands(
+            _AsyncManifestHands()
+        )
+
+    def test_remote_cdp_endpoint_uses_shared_validation(self):
+        with patch(
+            "app.controller.tool_controller.is_cdp_url_available",
+            return_value=True,
+        ) as is_cdp_url_available:
+            assert tool_controller._is_cdp_endpoint_available(
+                "http://worker-17:9222"
+            )
+
+        is_cdp_url_available.assert_called_once_with("http://worker-17:9222")
+
 
 @pytest.mark.integration
 class TestToolControllerIntegration:
@@ -238,8 +290,8 @@ def test_launch_cdp_browser_endpoint_integration(
         tool_controller._web_cdp_browser_meta = None
 
         with patch(
-            "app.controller.tool_controller.ensure_cdp_browser_available",
-            return_value=True,
+            "app.controller.tool_controller.ensure_cdp_browser_endpoint",
+            return_value="http://127.0.0.1:9222",
         ):
             response = client.post("/browser/cdp/launch")
 
diff --git a/backend/tests/app/utils/test_browser_launcher.py b/backend/tests/app/utils/test_browser_launcher.py
new file mode 100644
index 000000000..732bd74e4
--- /dev/null
+++ b/backend/tests/app/utils/test_browser_launcher.py
@@ -0,0 +1,108 @@
+# ========= 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 json
+
+import pytest
+
+from app.utils.browser_launcher import (
+    _is_supported_cdp_version,
+    normalize_cdp_url,
+)
+
+
+class _FakeWebSocket:
+    def __init__(self, response: dict):
+        self.response = response
+        self.sent: dict | None = None
+
+    def __enter__(self):
+        return self
+
+    def __exit__(self, *args):
+        return None
+
+    def send(self, message: str):
+        self.sent = json.loads(message)
+
+    def recv(self, timeout: int):
+        assert timeout == 2
+        return json.dumps(self.response)
+
+
+@pytest.mark.unit
+def test_normalize_cdp_url_accepts_host_port_without_scheme():
+    assert normalize_cdp_url("worker-17:9333") == (
+        "http://worker-17:9333",
+        "worker-17",
+        9333,
+    )
+
+
+@pytest.mark.unit
+def test_normalize_cdp_url_accepts_bare_port():
+    assert normalize_cdp_url("9333") == (
+        "http://127.0.0.1:9333",
+        "127.0.0.1",
+        9333,
+    )
+
+
+@pytest.mark.unit
+def test_supported_cdp_version_requires_context_management(monkeypatch):
+    fake_ws = _FakeWebSocket({"id": 1, "result": {}})
+    monkeypatch.setattr(
+        "websockets.sync.client.connect",
+        lambda *args, **kwargs: fake_ws,
+    )
+
+    assert _is_supported_cdp_version(
+        {
+            "Browser": "Chrome/147.0.7727.102",
+            "User-Agent": "Chrome/147.0.7727.102",
+            "webSocketDebuggerUrl": "ws://127.0.0.1:9223/devtools/browser/id",
+        },
+        "http://127.0.0.1:9223",
+    )
+    assert fake_ws.sent == {
+        "id": 1,
+        "method": "Browser.setDownloadBehavior",
+        "params": {"behavior": "default"},
+    }
+
+
+@pytest.mark.unit
+def test_supported_cdp_version_rejects_context_management_error(monkeypatch):
+    fake_ws = _FakeWebSocket(
+        {
+            "id": 1,
+            "error": {
+                "code": -32000,
+                "message": "Browser context management is not supported.",
+            },
+        }
+    )
+    monkeypatch.setattr(
+        "websockets.sync.client.connect",
+        lambda *args, **kwargs: fake_ws,
+    )
+
+    assert not _is_supported_cdp_version(
+        {
+            "Browser": "Chrome/147.0.7727.102",
+            "User-Agent": "Chrome/147.0.7727.102",
+            "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/browser/id",
+        },
+        "http://127.0.0.1:9222",
+    )
diff --git a/docs/troubleshooting/bug.md b/docs/troubleshooting/bug.md
index 17cac16e6..8a190eac7 100644
--- a/docs/troubleshooting/bug.md
+++ b/docs/troubleshooting/bug.md
@@ -10,23 +10,23 @@ width="100%"
 height="auto"
 />
 
-### Step 1: Access the Bug Report Feature
+### Step 1: Open Report a bug
 
-1. Locate the **Bug Report** button in the top section of the desktop interface, positioned to the right of your project name
-1. Click the **Bug Report** button to initiate the reporting process
+1. In the top bar, click the **Support** (help) icon
+1. Choose **Report a bug**
 
-### Step 2: Download Log Files
+### Step 2: Describe the issue and save diagnostics
 
-- Upon clicking the Bug Report button, log files will be automatically downloaded to your device
-- These log files contain technical information that helps our development team diagnose issues more effectively
+1. Enter what went wrong. Optionally add **steps to reproduce**
+1. Click **Save diagnostics and open email**
+1. Choose where to save the **diagnostics ZIP** (it includes app logs and a `bug_report.txt` file)
 
-### Step 3: Complete the Bug Report Form
+Your default email app opens addressed to **info@eigent.ai** with a pre-filled message.
 
-- A bug report web form will automatically open in your default browser
-- Please provide the following information:
-  - **Bug Description**: Write a clear description of the issue you encountered
-  - **Screenshot Upload**: Attach relevant screenshots that demonstrate the problem
-  - **Log File Upload**: Upload the log files that were downloaded in Step 2
+### Step 3: Send the email
+
+1. **Attach the ZIP** you just saved to the message (the mail app cannot add this automatically)
+1. Add screenshots or other files if they help, then send
 
 ### Step 4: Join Our Community for Real-time Support
 
@@ -47,9 +47,11 @@ Developers and technical users are welcome to report issues directly through our
 - **Repository URL**: https://github.com/eigent-ai/eigent
 - Submit detailed issues with reproduction steps
 
+**Optional:** In the same **Report a bug** dialog, use **Download logs** to save a single log file (without the full diagnostics ZIP).
+
 ## Important Notes
 
-- Always include log files when reporting bugs for faster resolution
+- Always include the diagnostics ZIP (or log export) when reporting bugs for faster resolution
 - Provide as much detail as possible in your bug description
 - Screenshots help our team understand visual issues more quickly
 - Our community channels provide the fastest response times for urgent issues
diff --git a/electron/main/index.ts b/electron/main/index.ts
index 1eec43fc8..a1c4dc336 100644
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -36,7 +36,6 @@ import os, { homedir } from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import kill from 'tree-kill';
-import * as unzipper from 'unzipper';
 import { copyBrowserData } from './copy';
 import { FileReader } from './fileReader';
 import {
@@ -60,7 +59,7 @@ import {
   removeEnvKey,
   updateEnvBlock,
 } from './utils/envUtil';
-import { zipFolder } from './utils/log';
+import { createDiagnosticsZip, zipFolder } from './utils/log';
 import { addMcp, readMcpConfig, removeMcp, updateMcp } from './utils/mcpConfig';
 import {
   checkVenvExistsForPreCheck,
@@ -413,13 +412,8 @@ protocol.registerSchemesAsPrivileged([
 process.env.APP_ROOT = MAIN_DIST;
 process.env.VITE_PUBLIC = VITE_PUBLIC;
 
-// Respect system theme on Windows, keep light theme on macOS for consistency
-const isWindows = process.platform === 'win32';
-if (isWindows) {
-  nativeTheme.themeSource = 'system'; // Respect Windows dark/light mode
-} else {
-  nativeTheme.themeSource = 'light'; // Keep existing behavior for macOS
-}
+// Always follow OS appearance so renderer `prefers-color-scheme` stays accurate.
+nativeTheme.themeSource = 'system';
 
 // Set log level
 log.transports.console.level = 'info';
@@ -1117,6 +1111,100 @@ function registerIpcHandlers() {
     }
   });
 
+  ipcMain.handle('get-diagnostics-info', async () => {
+    return {
+      version: app.getVersion(),
+      platform: process.platform,
+      arch: process.arch,
+    };
+  });
+
+  ipcMain.handle(
+    'export-diagnostics-zip',
+    async (
+      _event,
+      payload: { description: string; steps?: string } | undefined
+    ) => {
+      try {
+        const description =
+          typeof payload?.description === 'string'
+            ? payload.description.trim()
+            : '';
+        if (!description) {
+          return { success: false, error: 'Description is required' };
+        }
+        const steps =
+          typeof payload?.steps === 'string' ? payload.steps.trim() : '';
+
+        const logFiles: { src: string; destName: string }[] = [];
+        if (fs.existsSync(logPath)) {
+          logFiles.push({ src: logPath, destName: 'electron-main.log' });
+        }
+        const backupResolved = getBackupLogPath();
+        if (
+          fs.existsSync(backupResolved) &&
+          path.resolve(backupResolved) !== path.resolve(logPath)
+        ) {
+          logFiles.push({
+            src: backupResolved,
+            destName: 'electron-userdata-logs.log',
+          });
+        }
+        if (logFiles.length === 0) {
+          return { success: false, error: 'no log file' };
+        }
+
+        const appVersion = app.getVersion();
+        const platform = process.platform;
+        const arch = process.arch;
+        const bugReportText = [
+          'Eigent bug report',
+          '=================',
+          '',
+          `App version: ${appVersion}`,
+          `OS: ${platform} (${arch})`,
+          '',
+          'Description',
+          '-----------',
+          description,
+          '',
+          ...(steps
+            ? ['Steps to reproduce', '-------------------', steps, '']
+            : []),
+        ].join('\n');
+
+        const defaultFileName = `eigent-diagnostics-${appVersion}-${Date.now()}.zip`;
+        const { canceled, filePath } = await dialog.showSaveDialog({
+          title: 'Save diagnostics',
+          defaultPath: defaultFileName,
+          filters: [{ name: 'ZIP archive', extensions: ['zip'] }],
+        });
+
+        if (canceled || !filePath) {
+          return { success: false, error: '' };
+        }
+
+        await createDiagnosticsZip(filePath, bugReportText, logFiles);
+        return { success: true, savedPath: filePath };
+      } catch (error: any) {
+        log.error('export-diagnostics-zip failed:', error);
+        return { success: false, error: error.message };
+      }
+    }
+  );
+
+  ipcMain.handle('open-mailto', async (_event, url: string) => {
+    try {
+      if (typeof url !== 'string' || !url.startsWith('mailto:')) {
+        return { success: false, error: 'Invalid mailto URL' };
+      }
+      await shell.openExternal(url);
+      return { success: true };
+    } catch (error: any) {
+      return { success: false, error: error.message };
+    }
+  });
+
   ipcMain.handle(
     'upload-log',
     async (
@@ -2067,239 +2155,6 @@ async function seedDefaultSkillsIfEmpty(): Promise<void> {
   }
 }
 
-/** Truncate a single path component to fit within the 255-byte filesystem limit. */
-function safePathComponent(name: string, maxBytes = 200): string {
-  // 200 leaves headroom for suffixes the OS or future logic may add
-  if (Buffer.byteLength(name, 'utf-8') <= maxBytes) return name;
-  // Trim from the end, character by character, until it fits
-  let trimmed = name;
-  while (Buffer.byteLength(trimmed, 'utf-8') > maxBytes) {
-    trimmed = trimmed.slice(0, -1);
-  }
-  return trimmed.replace(/-+$/, '') || 'skill';
-}
-
-// Simple mutex to prevent concurrent skill imports
-let _importLock: Promise<void> = Promise.resolve();
-function withImportLock<T>(fn: () => Promise<T>): Promise<T> {
-  let release: () => void;
-  const next = new Promise<void>((resolve) => {
-    release = resolve;
-  });
-  const prev = _importLock;
-  _importLock = next;
-  return prev.then(fn).finally(() => release!());
-}
-
-async function importSkillsFromZip(
-  zipPath: string,
-  replacements?: Set<string>
-): Promise<{
-  success: boolean;
-  error?: string;
-  conflicts?: Array<{ folderName: string; skillName: string }>;
-}> {
-  // Extract to a temp directory, then find SKILL.md files and copy their
-  // parent skill directories into SKILLS_ROOT.  This handles any zip
-  // structure: wrapping directories, SKILL.md at root, or multiple skills.
-  const tempDir = path.join(os.tmpdir(), `eigent-skill-extract-${Date.now()}`);
-  try {
-    if (!existsSync(zipPath)) {
-      return { success: false, error: 'Zip file does not exist' };
-    }
-    const ext = path.extname(zipPath).toLowerCase();
-    if (ext !== '.zip') {
-      return { success: false, error: 'Only .zip files are supported' };
-    }
-    if (!existsSync(SKILLS_ROOT)) {
-      await fsp.mkdir(SKILLS_ROOT, { recursive: true });
-    }
-
-    // Step 1: Extract zip into temp directory
-    await fsp.mkdir(tempDir, { recursive: true });
-    const directory = await unzipper.Open.file(zipPath);
-    const resolvedTempDir = path.resolve(tempDir);
-    const comparePath = (value: string) =>
-      process.platform === 'win32' ? value.toLowerCase() : value;
-    const resolvedTempDirCmp = comparePath(resolvedTempDir);
-    const resolvedTempDirWithSep = resolvedTempDirCmp.endsWith(path.sep)
-      ? resolvedTempDirCmp
-      : `${resolvedTempDirCmp}${path.sep}`;
-    for (const file of directory.files as any[]) {
-      if (file.type === 'Directory') continue;
-      const normalizedArchivePath = path
-        .normalize(String(file.path))
-        .replace(/^([/\\])+/, '');
-      const destPath = path.join(tempDir, normalizedArchivePath);
-      const resolvedDestPathCmp = comparePath(path.resolve(destPath));
-      // Protect against zip-slip (e.g. entries containing ../)
-      if (
-        !normalizedArchivePath ||
-        (resolvedDestPathCmp !== resolvedTempDirCmp &&
-          !resolvedDestPathCmp.startsWith(resolvedTempDirWithSep))
-      ) {
-        return { success: false, error: 'Zip archive contains unsafe paths' };
-      }
-      const destDir = path.dirname(destPath);
-      await fsp.mkdir(destDir, { recursive: true });
-      const content = await file.buffer();
-      await fsp.writeFile(destPath, content);
-    }
-
-    // Step 2: Recursively find all SKILL.md files
-    const skillFiles: string[] = [];
-    async function findSkillMdFiles(dir: string) {
-      const entries = await fsp.readdir(dir, { withFileTypes: true });
-      for (const entry of entries) {
-        if (entry.name.startsWith('.')) continue;
-        const fullPath = path.join(dir, entry.name);
-        if (entry.isDirectory()) {
-          await findSkillMdFiles(fullPath);
-        } else if (entry.name === SKILL_FILE) {
-          skillFiles.push(fullPath);
-        }
-      }
-    }
-    await findSkillMdFiles(tempDir);
-
-    if (skillFiles.length === 0) {
-      return {
-        success: false,
-        error: 'No SKILL.md files found in zip archive',
-      };
-    }
-
-    // Step 3: Copy each skill directory into SKILLS_ROOT
-
-    // Helper function to extract skill name from SKILL.md
-    async function getSkillName(skillFilePath: string): Promise<string> {
-      try {
-        const raw = await fsp.readFile(skillFilePath, 'utf-8');
-        const nameMatch = raw.match(/^\s*name\s*:\s*(.+)$/m);
-        const parsed = nameMatch?.[1]?.trim()?.replace(/^['"]|['"]$/g, '');
-        return parsed || path.basename(path.dirname(skillFilePath));
-      } catch {
-        return path.basename(path.dirname(skillFilePath));
-      }
-    }
-
-    // Helper: derive a safe folder name from a skill display name
-    function folderNameFromSkillName(
-      skillName: string,
-      fallback: string
-    ): string {
-      return safePathComponent(
-        skillName
-          .replace(/[\\/*?:"<>|\s]+/g, '-')
-          .replace(/-+/g, '-')
-          .replace(/^-|-$/g, '') || fallback
-      );
-    }
-
-    // Step 3a: Scan existing skills to build a name→folderName map for
-    //          name-based duplicate detection (case-insensitive).
-    const existingSkillNames = new Map<string, string>(); // lower-case name → folder name on disk
-    if (existsSync(SKILLS_ROOT)) {
-      const rootEntries = await fsp.readdir(SKILLS_ROOT, {
-        withFileTypes: true,
-      });
-      for (const entry of rootEntries) {
-        if (!entry.isDirectory() || entry.name.startsWith('.')) continue;
-        const existingSkillFile = path.join(
-          SKILLS_ROOT,
-          entry.name,
-          SKILL_FILE
-        );
-        if (!existsSync(existingSkillFile)) continue;
-        try {
-          const raw = await fsp.readFile(existingSkillFile, 'utf-8');
-          const nameMatch = raw.match(/^\s*name\s*:\s*(.+)$/m);
-          const name = nameMatch?.[1]?.trim()?.replace(/^['"]|['"]$/g, '');
-          if (name) existingSkillNames.set(name.toLowerCase(), entry.name);
-        } catch {
-          // skip unreadable skill
-        }
-      }
-    }
-
-    // Collect conflicts if replacements not provided
-    const conflicts: Array<{ folderName: string; skillName: string }> = [];
-    const replacementsSet = replacements || new Set<string>();
-
-    for (const skillFilePath of skillFiles) {
-      const skillDir = path.dirname(skillFilePath);
-
-      // Read the incoming skill's display name from SKILL.md frontmatter.
-      const incomingName = await getSkillName(skillFilePath);
-      const incomingNameLower = incomingName.toLowerCase();
-
-      // Determine where this skill will be written on disk.
-      // Both root-level and nested skills use the skill name to derive the
-      // folder, so that detection and storage are consistent.
-      const fallbackFolderName =
-        skillDir === tempDir
-          ? path.basename(zipPath, path.extname(zipPath))
-          : path.basename(skillDir);
-      const destFolderName = folderNameFromSkillName(
-        incomingName,
-        fallbackFolderName
-      );
-      const dest = path.join(SKILLS_ROOT, destFolderName);
-
-      // Name-based duplicate detection: check if any existing skill already
-      // has this display name, regardless of what folder it lives in.
-      const existingFolder = existingSkillNames.get(incomingNameLower);
-      if (existingFolder) {
-        if (!replacements) {
-          // First pass — report conflict using the existing skill's folder as
-          // the key so the frontend can confirm the right replacement.
-          conflicts.push({
-            folderName: existingFolder,
-            skillName: incomingName,
-          });
-          continue;
-        }
-        if (replacementsSet.has(existingFolder)) {
-          // User confirmed — remove the existing skill folder before importing.
-          await fsp.rm(path.join(SKILLS_ROOT, existingFolder), {
-            recursive: true,
-            force: true,
-          });
-        } else {
-          // User cancelled for this skill — skip it.
-          continue;
-        }
-      }
-
-      // Import the skill (no conflict, or conflict was resolved).
-      await fsp.mkdir(dest, { recursive: true });
-      if (skillDir === tempDir) {
-        // SKILL.md at zip root — copy all root-level entries.
-        await copyDirRecursive(tempDir, dest);
-      } else {
-        // SKILL.md inside a subdirectory — copy that directory.
-        await copyDirRecursive(skillDir, dest);
-      }
-    }
-
-    // Return conflicts if any were found and replacements not provided
-    if (conflicts.length > 0 && !replacements) {
-      return { success: false, conflicts };
-    }
-
-    log.info(
-      `Imported ${skillFiles.length} skill(s) from zip into ~/.eigent/skills:`,
-      zipPath
-    );
-    return { success: true };
-  } catch (error: any) {
-    log.error('importSkillsFromZip failed', error);
-    return { success: false, error: error?.message || String(error) };
-  } finally {
-    await fsp.rm(tempDir, { recursive: true, force: true }).catch(() => {});
-  }
-}
-
 // ==================== Shared backend startup logic ====================
 // Starts backend after installation completes
 // Used by both initial startup and retry flows
@@ -2322,6 +2177,7 @@ let installationLock: Promise<PromiseReturnType> = Promise.resolve({
 // ==================== window create ====================
 async function createWindow() {
   const isMac = process.platform === 'darwin';
+  const isWindows = process.platform === 'win32';
 
   // Ensure .eigent directories exist before anything else
   ensureEigentDirectories();
@@ -2348,10 +2204,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: 1280,
+    height: 960,
+    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/electron/main/init.ts b/electron/main/init.ts
index 20ed53bc0..90d0ec5a7 100644
--- a/electron/main/init.ts
+++ b/electron/main/init.ts
@@ -288,8 +288,7 @@ export async function startBackend(
   }
 
   // In dev mode, also check .env.development for SERVER_URL
-  if (!resolvedServerUrl && devServerUrl) {
-    const devEnvPath = path.join(app.getAppPath(), '.env.development');
+  if (!resolvedServerUrl && fs.existsSync(devEnvPath)) {
     const devFileServerUrl = readEnvValue(devEnvPath, 'SERVER_URL');
     if (devFileServerUrl) {
       resolvedServerUrl = devFileServerUrl;
diff --git a/electron/main/utils/log.ts b/electron/main/utils/log.ts
index bf7007874..495576cb4 100644
--- a/electron/main/utils/log.ts
+++ b/electron/main/utils/log.ts
@@ -12,7 +12,11 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
+import { randomBytes } from 'node:crypto';
 import fs from 'node:fs';
+import fsp from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
 // @ts-ignore
 import archiver from 'archiver';
 import log from 'electron-log';
@@ -37,3 +41,42 @@ export function zipFolder(
     archive.finalize();
   });
 }
+
+export type DiagnosticsLogFile = { src: string; destName: string };
+
+/**
+ * Stages log files and bug_report.txt into a temp directory, zips to outputZipPath, then removes the staging dir.
+ */
+export async function createDiagnosticsZip(
+  outputZipPath: string,
+  bugReportText: string,
+  logFiles: DiagnosticsLogFile[]
+): Promise<void> {
+  if (logFiles.length === 0) {
+    throw new Error('no log files to include');
+  }
+  const id = randomBytes(8).toString('hex');
+  const staging = path.join(os.tmpdir(), `eigent-diagnostics-${id}`);
+  await fsp.mkdir(staging, { recursive: true });
+  try {
+    for (const f of logFiles) {
+      if (!fs.existsSync(f.src)) {
+        log.warn(`[diagnostics] skip missing log: ${f.src}`);
+        continue;
+      }
+      await fsp.copyFile(f.src, path.join(staging, f.destName));
+    }
+    await fsp.writeFile(
+      path.join(staging, 'bug_report.txt'),
+      bugReportText,
+      'utf-8'
+    );
+    const entries = await fsp.readdir(staging);
+    if (entries.length === 0) {
+      throw new Error('no log files to include');
+    }
+    await zipFolder(staging, outputZipPath);
+  } finally {
+    await fsp.rm(staging, { recursive: true, force: true });
+  }
+}
diff --git a/electron/main/webview.ts b/electron/main/webview.ts
index fda3bde0e..1575cf0bb 100644
--- a/electron/main/webview.ts
+++ b/electron/main/webview.ts
@@ -37,6 +37,20 @@ export class WebViewManager {
   private maxInactiveWebviews = 5;
   private lastCleanupTime = Date.now();
 
+  private getHiddenBounds(id: string, width = 100, height = 100) {
+    const numericId = Number(id);
+    const idOffset = Number.isFinite(numericId) ? (numericId % 20) * 20 : 0;
+    const safeWidth = Math.max(width, 100);
+    const safeHeight = Math.max(height, 100);
+
+    return {
+      x: -10000 - safeWidth - idOffset,
+      y: -10000 - safeHeight - idOffset,
+      width: safeWidth,
+      height: safeHeight,
+    };
+  }
+
   constructor(window: BrowserWindow) {
     this.win = window;
   }
@@ -245,13 +259,7 @@ export class WebViewManager {
 
       // Set to muted state when created
       view.webContents.audioMuted = true;
-      let newId = Number(id);
-      view.setBounds({
-        x: -9999 + newId * 100,
-        y: -9999 + newId * 100,
-        width: 100,
-        height: 100,
-      });
+      view.setBounds(this.getHiddenBounds(id));
       view.setBorderRadius(16);
 
       await view.webContents.loadURL(url);
@@ -298,12 +306,7 @@ export class WebViewManager {
           this.win?.webContents.send('url-updated', navigationUrl);
           return;
         }
-        webViewInfo.view.setBounds({
-          x: -1919,
-          y: -1079,
-          width: 1920,
-          height: 1080,
-        });
+        webViewInfo.view.setBounds(this.getHiddenBounds(id, 1920, 1080));
         const activeSize = this.getActiveWebview().length;
         const allSize = Array.from(this.webViews.values()).length;
         const inactiveSize = allSize - activeSize;
@@ -374,13 +377,7 @@ export class WebViewManager {
           height: Math.max(height, 100),
         });
       } else {
-        let newId = Number(id);
-        webViewInfo.view.setBounds({
-          x: -9999 + newId * 100,
-          y: -9999 + newId * 100,
-          width: Math.max(width, 100),
-          height: Math.max(height, 100),
-        });
+        webViewInfo.view.setBounds(this.getHiddenBounds(id, width, height));
       }
 
       return { success: true };
@@ -395,13 +392,7 @@ export class WebViewManager {
     if (!webViewInfo) {
       return { success: false, error: `Webview with id ${id} not found` };
     }
-    let newId = Number(id);
-    webViewInfo.view.setBounds({
-      x: -9999 + newId * 100,
-      y: -9999 + newId * 100,
-      width: 100,
-      height: 100,
-    });
+    webViewInfo.view.setBounds(this.getHiddenBounds(id));
     webViewInfo.isShow = false;
 
     if (
@@ -415,13 +406,7 @@ export class WebViewManager {
   }
   public hideAllWebview() {
     this.webViews.forEach((webview) => {
-      let newId = Number(webview.id);
-      webview.view.setBounds({
-        x: -9999 + newId * 100,
-        y: -9999 + newId * 100,
-        width: 100,
-        height: 100,
-      });
+      webview.view.setBounds(this.getHiddenBounds(webview.id));
       webview.isShow = false;
 
       if (webview.view.webContents && !webview.view.webContents.isDestroyed()) {
diff --git a/electron/preload/index.ts b/electron/preload/index.ts
index 2071116cd..2547c038a 100644
--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@@ -76,6 +76,10 @@ contextBridge.exposeInMainWorld('electronAPI', {
   webviewDestroy: (webviewId: string) =>
     ipcRenderer.invoke('webview-destroy', webviewId),
   exportLog: () => ipcRenderer.invoke('export-log'),
+  getDiagnosticsInfo: () => ipcRenderer.invoke('get-diagnostics-info'),
+  exportDiagnosticsZip: (payload: { description: string; steps?: string }) =>
+    ipcRenderer.invoke('export-diagnostics-zip', payload),
+  openMailto: (url: string) => ipcRenderer.invoke('open-mailto', url),
   uploadLog: (email: string, taskId: string, baseUrl: string, token: string) =>
     ipcRenderer.invoke('upload-log', email, taskId, baseUrl, token),
   // mcp
diff --git a/package.json b/package.json
index 75dc35552..53d0c2863 100644
--- a/package.json
+++ b/package.json
@@ -43,8 +43,12 @@
     "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",
+    "check:design-token-usage": "node scripts/check-design-token-usage.mjs",
+    "check:design-tokens": "npm run verify:theme && npm run check:design-token-usage",
+    "verify:theme": "vite-node scripts/verify-theme-tokens.ts",
     "type-check": "tsc -p tsconfig.build.json --noEmit",
-    "lint": "eslint . --no-warn-ignored",
+    "lint": "eslint . --no-warn-ignored && npm run check:design-token-usage",
     "lint:fix": "eslint . --fix --no-warn-ignored",
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
     "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
@@ -53,6 +57,7 @@
   },
   "dependencies": {
     "@electron/notarize": "^2.5.0",
+    "@emotion/is-prop-valid": "^1.3.1",
     "@fontsource/inter": "^5.2.5",
     "@gsap/react": "^2.1.2",
     "@microsoft/fetch-event-source": "^2.0.1",
@@ -90,7 +95,6 @@
     "dompurify": "^3.2.7",
     "electron-log": "^5.4.0",
     "electron-updater": "^6.3.9",
-    "@emotion/is-prop-valid": "^1.3.1",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.17.0",
@@ -99,12 +103,12 @@
     "koffi": "^2.14.1",
     "lodash-es": "^4.17.21",
     "lottie-web": "^5.13.0",
-    "lucide-react": "^0.509.0",
+    "lucide-react": "^0.548.0",
     "mammoth": "^1.9.1",
     "marked": "^17.0.1",
     "mime": "^4.1.0",
     "monaco-editor": "^0.52.2",
-    "motion": "^12.23.24",
+    "motion": "^12.38.0",
     "next-themes": "^0.4.6",
     "papaparse": "^5.5.3",
     "postprocessing": "^6.37.8",
diff --git a/scripts/check-design-token-usage.mjs b/scripts/check-design-token-usage.mjs
new file mode 100644
index 000000000..26ae1260d
--- /dev/null
+++ b/scripts/check-design-token-usage.mjs
@@ -0,0 +1,196 @@
+// ========= 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. =========
+
+/**
+ * Fails if UI source contains hard-coded colors instead of design tokens
+ * (CSS variables such as var(--ds-...), var(--colors-...), component vars, or
+ * Tailwind classes that map to those vars — not raw #hex / rgb() / hsl()).
+ *
+ * Usage:
+ *   node scripts/check-design-token-usage.mjs
+ *   node scripts/check-design-token-usage.mjs src/a.tsx   # lint-staged (one or more files)
+ *
+ * Exemptions:
+ *   - End-of-line comment: // ds:allow-hardcoded-color
+ *   - scripts/design-token-usage.allowlist — repo-relative paths, one per line (# comments ok)
+ */
+
+import { readFileSync, existsSync, readdirSync, statSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = resolve(__dirname, '..');
+
+const EXT = new Set(['.ts', '.tsx', '.js', '.jsx']);
+
+const SKIP_PREFIXES = ['src/lib/themeTokens/'];
+
+const SKIP_FILE_RE =
+  /\.(test|spec)\.(ts|tsx|js|jsx)$|vite-env\.d\.ts$|\.stories\.(ts|tsx)$/;
+
+const HEX_RE = /#([0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b/g;
+
+const RGB_NUM_RE = /\brgba?\(\s*[\d.]/;
+const HSL_NUM_RE = /\bhsla?\(\s*[\d.]/;
+
+const ARBITRARY_HEX_RE =
+  /\[[^\]]*#([0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3})\b[^\]]*\]/;
+const ARBITRARY_RGB_RE = /\[[^\]]*rgba?\([^\]]*\]/;
+
+function loadAllowlist() {
+  const path = join(REPO_ROOT, 'scripts/design-token-usage.allowlist');
+  const set = new Set();
+  if (!existsSync(path)) return set;
+  const raw = readFileSync(path, 'utf8');
+  for (const line of raw.split('\n')) {
+    const t = line.trim();
+    if (!t || t.startsWith('#')) continue;
+    set.add(t.replaceAll('\\', '/'));
+  }
+  return set;
+}
+
+function shouldSkipPath(relPosix, allowlist) {
+  const norm = relPosix.replaceAll('\\', '/');
+  if (allowlist.has(norm)) return true;
+  for (const prefix of SKIP_PREFIXES) {
+    if (norm.startsWith(prefix)) return true;
+  }
+  if (SKIP_FILE_RE.test(norm)) return true;
+  return false;
+}
+
+function* walkSrcFiles(dir) {
+  const entries = readdirSync(dir, { withFileTypes: true });
+  for (const e of entries) {
+    const p = join(dir, e.name);
+    if (e.isDirectory()) {
+      if (e.name === 'node_modules' || e.name === 'dist') continue;
+      yield* walkSrcFiles(p);
+    } else {
+      const ext = e.name.slice(e.name.lastIndexOf('.'));
+      if (EXT.has(ext)) yield p;
+    }
+  }
+}
+
+function stripTrailingLineComment(line) {
+  const idx = line.indexOf('//');
+  if (idx === -1) return line;
+  return line.slice(0, idx);
+}
+
+function lineHasExemption(line) {
+  return line.includes('//') && line.includes('ds:allow-hardcoded-color');
+}
+
+function checkLine(rawLine, lineNum, fileRel, out) {
+  if (lineHasExemption(rawLine)) return;
+  const line = stripTrailingLineComment(rawLine);
+
+  if (RGB_NUM_RE.test(line) || HSL_NUM_RE.test(line)) {
+    out.push({
+      file: fileRel,
+      line: lineNum,
+      message:
+        'Use design tokens (e.g. var(--ds-...), Tailwind semantic colors) instead of raw rgb/hsl.',
+      snippet: rawLine.trim(),
+    });
+    return;
+  }
+
+  HEX_RE.lastIndex = 0;
+  let m;
+  while ((m = HEX_RE.exec(line)) !== null) {
+    const start = m.index;
+    const before = line.slice(Math.max(0, start - 4), start);
+    if (/url\s*\(\s*$/i.test(before)) continue;
+    out.push({
+      file: fileRel,
+      line: lineNum,
+      message: `Hard-coded hex "${m[0]}" — use a design token or Tailwind color that maps to var(--...).`,
+      snippet: rawLine.trim(),
+    });
+    return;
+  }
+
+  if (ARBITRARY_HEX_RE.test(line) || ARBITRARY_RGB_RE.test(line)) {
+    out.push({
+      file: fileRel,
+      line: lineNum,
+      message:
+        'Tailwind arbitrary color value ([#...] / [rgb(...)]) — use ds-* or semantic utilities.',
+      snippet: rawLine.trim(),
+    });
+  }
+}
+
+function checkFile(absPath, allowlist) {
+  const rel = relative(REPO_ROOT, absPath);
+  const relPosix = rel.replaceAll('\\', '/');
+  if (shouldSkipPath(relPosix, allowlist)) return [];
+
+  const text = readFileSync(absPath, 'utf8');
+  const lines = text.split(/\r?\n/);
+  const out = [];
+  lines.forEach((ln, i) => checkLine(ln, i + 1, relPosix, out));
+  return out;
+}
+
+function resolveCliFiles(argv) {
+  const files = [];
+  for (const a of argv) {
+    if (a.startsWith('-')) continue;
+    const abs = resolve(REPO_ROOT, a);
+    if (existsSync(abs) && statSync(abs).isFile()) files.push(abs);
+  }
+  return files;
+}
+
+function main() {
+  const allowlist = loadAllowlist();
+  const argv = process.argv.slice(2).filter((a) => a !== '--');
+  const explicit = resolveCliFiles(argv);
+
+  const targets =
+    explicit.length > 0
+      ? explicit
+      : [...walkSrcFiles(join(REPO_ROOT, 'src'))];
+
+  const violations = [];
+  for (const abs of targets) {
+    violations.push(...checkFile(abs, allowlist));
+  }
+
+  if (violations.length === 0) {
+    console.log('check-design-token-usage: OK (no hard-coded colors found).');
+    process.exit(0);
+  }
+
+  console.error('check-design-token-usage: hard-coded colors detected:\n');
+  for (const v of violations) {
+    console.error(`  ${v.file}:${v.line}`);
+    console.error(`    ${v.message}`);
+    console.error(
+      `    ${v.snippet.slice(0, 200)}${v.snippet.length > 200 ? '…' : ''}\n`
+    );
+  }
+  console.error(
+    `Total: ${violations.length} finding(s). Fix or add // ds:allow-hardcoded-color on the line, or list the file in scripts/design-token-usage.allowlist (one path per line).`
+  );
+  process.exit(1);
+}
+
+main();
diff --git a/scripts/check-electron-access.sh b/scripts/check-electron-access.sh
index 9736265e0..9c061ba20 100644
--- a/scripts/check-electron-access.sh
+++ b/scripts/check-electron-access.sh
@@ -6,8 +6,9 @@ set -euo pipefail
 # only src/host/createHost.ts may read window.electronAPI/window.ipcRenderer.
 violations="$(
   rg -n \
-    -e 'window\.electronAPI' \
-    -e 'window\.ipcRenderer' \
+    -e 'window\s*(\?\.)?\s*\.\s*(electronAPI|ipcRenderer)' \
+    -e '\(window\s+as\s+any\)\s*\.\s*(electronAPI|ipcRenderer)' \
+    -e 'window\s*\[\s*["'\''](electronAPI|ipcRenderer)["'\'']\s*\]' \
     --glob '*.{ts,tsx,js,jsx}' \
     --glob '!src/host/createHost.ts' \
     src || true
diff --git a/scripts/check-i18n-locale-parity.js b/scripts/check-i18n-locale-parity.js
new file mode 100644
index 000000000..b0e85e8b4
--- /dev/null
+++ b/scripts/check-i18n-locale-parity.js
@@ -0,0 +1,122 @@
+#!/usr/bin/env node
+// ========= 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. =========
+
+/* global console, process */
+
+/**
+ * Ensures every locale has the same JSON keys as `en-us` for every namespace JSON under `src/i18n/locales/<locale>/`.
+ * Run from repo root: `node scripts/check-i18n-locale-parity.js`
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const projectRoot = path.resolve(__dirname, '..');
+const localesDir = path.join(projectRoot, 'src', 'i18n', 'locales');
+const referenceLocale = 'en-us';
+
+function collectJsonFiles(dir) {
+  const out = [];
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const e of entries) {
+    const full = path.join(dir, e.name);
+    if (e.isDirectory()) {
+      out.push(...collectJsonFiles(full));
+    } else if (e.isFile() && e.name.endsWith('.json')) {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+function flattenKeys(obj, prefix = '') {
+  const keys = [];
+  for (const [k, v] of Object.entries(obj)) {
+    const p = prefix ? `${prefix}.${k}` : k;
+    if (v !== null && typeof v === 'object' && !Array.isArray(v)) {
+      keys.push(...flattenKeys(v, p));
+    } else {
+      keys.push(p);
+    }
+  }
+  return keys;
+}
+
+function main() {
+  const refPath = path.join(localesDir, referenceLocale);
+  if (!fs.existsSync(refPath)) {
+    console.error(`Reference locale not found: ${refPath}`);
+    process.exit(1);
+  }
+
+  const refFiles = collectJsonFiles(refPath);
+  const refRelative = refFiles.map((f) => path.relative(refPath, f));
+
+  const localeDirs = fs
+    .readdirSync(localesDir, { withFileTypes: true })
+    .filter((d) => d.isDirectory())
+    .map((d) => d.name)
+    .filter((name) => name !== referenceLocale);
+
+  let failed = false;
+
+  for (const locale of localeDirs) {
+    const locPath = path.join(localesDir, locale);
+    for (const rel of refRelative) {
+      const refFile = path.join(refPath, rel);
+      const targetFile = path.join(locPath, rel);
+      if (!fs.existsSync(targetFile)) {
+        console.error(`Missing file [${locale}]: ${rel}`);
+        failed = true;
+        continue;
+      }
+      let refJson;
+      let tgtJson;
+      try {
+        refJson = JSON.parse(fs.readFileSync(refFile, 'utf8'));
+        tgtJson = JSON.parse(fs.readFileSync(targetFile, 'utf8'));
+      } catch (e) {
+        console.error(`Invalid JSON (${locale}/${rel}):`, e.message);
+        failed = true;
+        continue;
+      }
+      const refKeys = new Set(flattenKeys(refJson));
+      const tgtKeys = new Set(flattenKeys(tgtJson));
+      for (const k of refKeys) {
+        if (!tgtKeys.has(k)) {
+          console.error(`Missing key [${locale}] ${rel}: ${k}`);
+          failed = true;
+        }
+      }
+      for (const k of tgtKeys) {
+        if (!refKeys.has(k)) {
+          console.error(`Extra key [${locale}] ${rel}: ${k}`);
+          failed = true;
+        }
+      }
+    }
+  }
+
+  if (failed) {
+    console.error('\ncheck-i18n-locale-parity: FAILED');
+    process.exit(1);
+  }
+  console.log('check-i18n-locale-parity: OK');
+}
+
+main();
diff --git a/scripts/design-token-usage.allowlist b/scripts/design-token-usage.allowlist
new file mode 100644
index 000000000..fa84573ba
--- /dev/null
+++ b/scripts/design-token-usage.allowlist
@@ -0,0 +1,15 @@
+# Whole-file skips for scripts/check-design-token-usage.mjs (run: npm run check:design-token-usage).
+# Prefer design tokens or a line-level // ds:allow-hardcoded-color comment.
+# List a path only when the file must contain raw colors by design (whole module is the exception).
+#
+# WordCarousel — default marketing gradient uses fixed brand hex; pass `gradient` for token-based styling.
+src/components/ui/WordCarousel/WordCarousel.tsx
+#
+# Terminal — @xterm/xterm ITheme requires hex strings for theme colors.
+src/components/Terminal/index.tsx
+#
+# Install progress bar (src/components/ui/progress-install.tsx) and similar: use CSS vars only — no entry needed.
+#
+# Electron shell surfaces use fixed native colors in preload HTML and BrowserWindow options.
+electron/main/index.ts
+electron/preload/index.ts
diff --git a/scripts/verify-theme-tokens.ts b/scripts/verify-theme-tokens.ts
new file mode 100644
index 000000000..da70a1255
--- /dev/null
+++ b/scripts/verify-theme-tokens.ts
@@ -0,0 +1,195 @@
+// ========= 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. =========
+
+// Standalone V2 design-token verification CLI.
+//
+// Runs the verifier over every registered theme/mode/contrast variant and
+// prints a human-readable report. Exits with a non-zero code if any `error`
+// findings are produced. Auxiliary contrast warnings do not fail the run
+// unless `--strict` is passed.
+//
+// Usage:
+//   npm run verify:theme
+//   npm run verify:theme -- --strict           # auxiliary warnings fail too
+//   npm run verify:theme -- --json             # machine-readable output
+//   npm run verify:theme -- --contrast 0,50,100
+
+import {
+  getDefaultContrastGrid,
+  listRegisteredThemes,
+  verifyThemeEngine,
+  type VerifyFinding,
+} from '../src/lib/themeTokens/verifier';
+
+type CliFlags = {
+  strict: boolean;
+  json: boolean;
+  contrastGrid: number[];
+};
+
+function parseArgs(argv: string[]): CliFlags {
+  const flags: CliFlags = {
+    strict: false,
+    json: false,
+    contrastGrid: getDefaultContrastGrid(),
+  };
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg === '--strict') flags.strict = true;
+    else if (arg === '--json') flags.json = true;
+    else if (arg === '--contrast') {
+      const raw = argv[++i];
+      if (raw) {
+        flags.contrastGrid = raw
+          .split(',')
+          .map((s) => Number(s.trim()))
+          .filter((n) => Number.isFinite(n));
+      }
+    } else if (arg === '--help' || arg === '-h') {
+      process.stdout.write(
+        [
+          'Usage: verify-theme-tokens [options]',
+          '',
+          'Options:',
+          '  --strict           Treat auxiliary contrast warnings as errors',
+          '  --json             Emit JSON report on stdout',
+          '  --contrast a,b,c   Override contrast grid (default: 0,25,43,75,100)',
+          '  -h, --help         Show this help',
+          '',
+        ].join('\n')
+      );
+      process.exit(0);
+    }
+  }
+  return flags;
+}
+
+const COLORS = {
+  reset: '\x1b[0m',
+  red: '\x1b[31m',
+  yellow: '\x1b[33m',
+  green: '\x1b[32m',
+  dim: '\x1b[2m',
+  bold: '\x1b[1m',
+  cyan: '\x1b[36m',
+};
+
+function colorize(text: string, code: string): string {
+  if (!process.stdout.isTTY) return text;
+  return `${code}${text}${COLORS.reset}`;
+}
+
+function groupFindings(
+  findings: VerifyFinding[]
+): Map<string, VerifyFinding[]> {
+  const groups = new Map<string, VerifyFinding[]>();
+  for (const f of findings) {
+    const key = `${f.mode} / ${f.themeId} / contrast=${f.contrast}`;
+    const bucket = groups.get(key);
+    if (bucket) bucket.push(f);
+    else groups.set(key, [f]);
+  }
+  return groups;
+}
+
+function printHumanReport(
+  themes: Array<{ mode: string; id: string }>,
+  flags: CliFlags,
+  report: ReturnType<typeof verifyThemeEngine>
+): void {
+  const { summary, findings } = report;
+
+  process.stdout.write(
+    `\n${colorize('Design Token Engine Verification (V2)', COLORS.bold)}\n`
+  );
+  process.stdout.write(
+    colorize(
+      `  Registered themes: ${themes.map((t) => `${t.mode}/${t.id}`).join(', ')}\n`,
+      COLORS.dim
+    )
+  );
+  process.stdout.write(
+    colorize(
+      `  Contrast grid:     ${flags.contrastGrid.join(', ')}\n`,
+      COLORS.dim
+    )
+  );
+  process.stdout.write(
+    colorize(`  Variants checked:  ${summary.variantsChecked}\n\n`, COLORS.dim)
+  );
+
+  if (findings.length === 0) {
+    process.stdout.write(
+      `${colorize('PASS', COLORS.green)}  No findings — engine is clean.\n\n`
+    );
+    return;
+  }
+
+  const groups = groupFindings(findings);
+  for (const [variant, bucket] of groups) {
+    process.stdout.write(`${colorize(variant, COLORS.cyan)}\n`);
+    for (const f of bucket) {
+      const badge =
+        f.severity === 'error'
+          ? colorize('ERROR', COLORS.red)
+          : colorize('WARN ', COLORS.yellow);
+      const ratioSuffix =
+        f.ratio !== undefined && f.threshold !== undefined
+          ? colorize(
+              `  (ratio ${f.ratio.toFixed(2)} / threshold ${f.threshold})`,
+              COLORS.dim
+            )
+          : '';
+      process.stdout.write(
+        `  ${badge}  [${f.code}] ${f.message}${ratioSuffix}\n`
+      );
+      if (f.tokenKey && f.value) {
+        process.stdout.write(
+          colorize(`         ↳ ${f.tokenKey} = ${f.value}\n`, COLORS.dim)
+        );
+      }
+    }
+    process.stdout.write('\n');
+  }
+
+  const errBadge =
+    summary.errors === 0
+      ? colorize(`${summary.errors} errors`, COLORS.green)
+      : colorize(`${summary.errors} errors`, COLORS.red);
+  const warnBadge =
+    summary.warnings === 0
+      ? colorize(`${summary.warnings} warnings`, COLORS.green)
+      : colorize(`${summary.warnings} warnings`, COLORS.yellow);
+  process.stdout.write(`Summary: ${errBadge}, ${warnBadge}\n\n`);
+}
+
+function main() {
+  const flags = parseArgs(process.argv.slice(2));
+  const themes = listRegisteredThemes();
+  const report = verifyThemeEngine({
+    contrastGrid: flags.contrastGrid,
+    strictAuxContrast: flags.strict,
+  });
+
+  if (flags.json) {
+    process.stdout.write(JSON.stringify({ themes, ...report }, null, 2) + '\n');
+  } else {
+    printHumanReport(themes, flags, report);
+  }
+
+  const failed = report.summary.errors > 0;
+  process.exit(failed ? 1 : 0);
+}
+
+main();
diff --git a/server/app/domains/chat/api/share_controller.py b/server/app/domains/chat/api/share_controller.py
index 674c72226..6877dde3f 100644
--- a/server/app/domains/chat/api/share_controller.py
+++ b/server/app/domains/chat/api/share_controller.py
@@ -70,6 +70,7 @@ async def event_generator():
                 "task_id": s.task_id,
                 "step": s.step,
                 "data": s.data,
+                "timestamp": s.timestamp,
                 "created_at": s.created_at.isoformat() if s.created_at else None,
             }
             yield f"data: {json.dumps(step_data)}\n\n"
diff --git a/server/app/domains/chat/api/step_controller.py b/server/app/domains/chat/api/step_controller.py
index d14c84ad0..e8f58fbe7 100644
--- a/server/app/domains/chat/api/step_controller.py
+++ b/server/app/domains/chat/api/step_controller.py
@@ -83,6 +83,7 @@ async def event_generator():
                 "task_id": s.task_id,
                 "step": s.step,
                 "data": s.data,
+                "timestamp": s.timestamp,
                 "created_at": s.created_at.isoformat() if s.created_at else None,
             }
             yield f"data: {json.dumps(step_data)}\n\n"
diff --git a/src/api/http.ts b/src/api/http.ts
index da84ed9f8..0c523df6e 100644
--- a/src/api/http.ts
+++ b/src/api/http.ts
@@ -15,6 +15,7 @@
 import { showCreditsToast } from '@/components/Toast/creditsToast';
 import { showStorageToast } from '@/components/Toast/storageToast';
 import { showTrafficToast } from '@/components/Toast/trafficToast';
+import { createHost } from '@/host/createHost';
 import { getAuthStore } from '@/store/authStore';
 import {
   getConnectionConfig,
@@ -87,7 +88,7 @@ export async function getBaseURL() {
     return cfg.brainEndpoint.replace(/\/$/, '');
   }
   // Electron: get port from IPC
-  const port = await (window as any).ipcRenderer?.invoke('get-backend-port');
+  const port = await createHost().ipcRenderer?.invoke('get-backend-port');
   if (port && port > 0) {
     const resolved = `http://localhost:${port}`;
     setConnectionConfig({ brainEndpoint: resolved });
diff --git a/src/assets/dark.png b/src/assets/dark.png
deleted file mode 100644
index d46a6a756..000000000
Binary files a/src/assets/dark.png and /dev/null differ
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/github.svg b/src/assets/icon/github.svg
new file mode 100644
index 000000000..bd1fe3b66
--- /dev/null
+++ b/src/assets/icon/github.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.523 2 22 6.58992 22 12.2529C22 16.7819 19.138 20.6239 15.167 21.9809C14.66 22.0819 14.48 21.7617 14.48 21.4887C14.48 21.1507 14.492 20.0468 14.492 18.6748C14.492 17.7188 14.172 17.0948 13.813 16.7768C16.04 16.5228 18.38 15.6558 18.38 11.7178C18.38 10.5978 17.992 9.68381 17.35 8.96581C17.454 8.70681 17.797 7.66395 17.252 6.25195C17.252 6.25195 16.414 5.97722 14.505 7.30322C13.706 7.07622 12.85 6.962 12 6.958C11.15 6.962 10.295 7.07622 9.497 7.30322C7.586 5.97722 6.746 6.25195 6.746 6.25195C6.203 7.66395 6.546 8.70681 6.649 8.96581C6.01 9.68381 5.619 10.5978 5.619 11.7178C5.619 15.6458 7.954 16.5261 10.175 16.7851C9.889 17.0411 9.63 17.4927 9.54 18.1557C8.97 18.4177 7.522 18.8712 6.63 17.3042C6.63 17.3042 6.101 16.3191 5.097 16.2471C5.097 16.2471 4.122 16.2341 5.029 16.8701C5.029 16.8701 5.684 17.1851 6.139 18.3701C6.139 18.3701 6.726 20.2001 9.508 19.5801C9.513 20.4371 9.522 21.2447 9.522 21.4887C9.522 21.7597 9.338 22.0769 8.839 21.9819C4.865 20.6269 2 16.7829 2 12.2529C2 6.58992 6.478 2 12 2Z" fill="black"/>
+</svg>
diff --git a/src/assets/icon/google_calendar.svg b/src/assets/icon/google_calendar.svg
new file mode 100644
index 000000000..920991de6
--- /dev/null
+++ b/src/assets/icon/google_calendar.svg
@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 9.40003C3 7.15979 3 6.03969 3.43597 5.18404C3.81947 4.43139 4.43139 3.81947 5.18404 3.43597C6.03969 3 7.15979 3 9.40003 3H14.6C16.8402 3 17.9603 3 18.816 3.43597C19.5686 3.81947 20.1805 4.43139 20.564 5.18404C21 6.03969 21 7.15979 21 9.40003V14.6C21 16.8402 21 17.9603 20.564 18.816C20.1805 19.5686 19.5686 20.1805 18.816 20.564C17.9603 21 16.8402 21 14.6 21H9.40003C7.15979 21 6.03969 21 5.18404 20.564C4.43139 20.1805 3.81947 19.5686 3.43597 18.816C3 17.9603 3 16.8402 3 14.6V9.40003Z" fill="white"/>
+<path d="M17.4612 5.57147H15.3711V8.6001H18.4295V6.42548C18.4295 6.42548 18.2784 5.65407 17.4612 5.57147Z" fill="#1967D2"/>
+<path d="M15.3711 18.4145V18.4218V18.4285L18.4295 15.3998H18.402L15.3711 18.4145Z" fill="#1967D2"/>
+<path d="M18.4263 15.4003V15.3725L18.3984 15.4003H18.4263Z" fill="#FBBC05"/>
+<path d="M18.4295 8.60016H15.3711V15.3727H18.4295V8.60016Z" fill="#FBBC05"/>
+<path d="M18.402 15.3998H15.3711V18.4145L18.402 15.3998Z" fill="#EA4335"/>
+<path d="M15.3711 15.3996H18.402L18.4295 15.3725H15.3711V15.3996Z" fill="#EA4335"/>
+<path d="M15.3594 18.4231H15.368V18.4145L15.3594 18.4231Z" fill="#34A853"/>
+<path d="M8.55859 15.3725V18.4218H15.3604L15.3679 15.3725H8.55859Z" fill="#34A853"/>
+<path d="M15.3668 15.3998V15.3725L15.3594 18.4218L15.3668 18.4144V15.3998Z" fill="#34A853"/>
+<path d="M5.57422 15.3725V17.4926C5.60162 18.1806 6.34566 18.4218 6.34566 18.4218H8.5637V15.3725H5.57422Z" fill="#188038"/>
+<path d="M8.5637 8.6001H15.373V5.57147H6.43203C6.43203 5.57147 5.62902 5.65407 5.57422 6.50724V15.3727H8.5637V8.6001Z" fill="#4285F4"/>
+<path d="M10.785 14.0019C10.6292 14.0019 10.479 13.9815 10.3343 13.941C10.1934 13.9004 10.0636 13.8395 9.9449 13.7583C9.82617 13.6735 9.72048 13.5684 9.62772 13.443C9.53875 13.3175 9.47009 13.1718 9.42188 13.0057L10.1062 12.7347C10.1544 12.9191 10.2361 13.0593 10.351 13.1552C10.466 13.2474 10.6106 13.2936 10.785 13.2936C10.8629 13.2936 10.9371 13.2824 11.0075 13.2603C11.078 13.2345 11.1392 13.1994 11.1911 13.1552C11.2431 13.1109 11.2838 13.0593 11.3135 13.0002C11.3469 12.9375 11.3636 12.8674 11.3636 12.7899C11.3636 12.6276 11.3024 12.5004 11.18 12.4081C11.0614 12.3159 10.8963 12.2698 10.6848 12.2698H10.3566V11.6113H10.6571C10.7312 11.6113 10.8036 11.6021 10.874 11.5836C10.9445 11.5652 11.0057 11.5375 11.0576 11.5006C11.1132 11.4601 11.1559 11.4102 11.1856 11.3512C11.219 11.2885 11.2356 11.2165 11.2356 11.1354C11.2356 11.0099 11.1911 10.9085 11.1021 10.831C11.0131 10.7499 10.8925 10.7093 10.7405 10.7093C10.5773 10.7093 10.4512 10.7536 10.3622 10.8421C10.2768 10.9269 10.2175 11.0229 10.1841 11.1299L9.51644 10.8587C9.54987 10.7665 9.59995 10.6724 9.66668 10.5765C9.73347 10.4769 9.81691 10.3884 9.91707 10.3109C10.0209 10.2297 10.1415 10.1652 10.2787 10.1172C10.4159 10.0656 10.5736 10.0397 10.7516 10.0397C10.9334 10.0397 11.0984 10.0656 11.2468 10.1172C11.3989 10.1688 11.5286 10.2408 11.6363 10.333C11.7438 10.4215 11.8273 10.5286 11.8866 10.654C11.9459 10.7757 11.9756 10.9085 11.9756 11.0524C11.9756 11.1631 11.9608 11.2626 11.9311 11.3512C11.9052 11.4397 11.8699 11.5191 11.8254 11.5891C11.7809 11.6592 11.729 11.7201 11.6696 11.7718C11.614 11.8197 11.5565 11.8584 11.4971 11.8879V11.9322C11.6752 12.0023 11.8217 12.1149 11.9367 12.2698C12.0554 12.4247 12.1147 12.6203 12.1147 12.8563C12.1147 13.0224 12.0832 13.1755 12.0201 13.3157C11.9571 13.4521 11.8662 13.572 11.7475 13.6753C11.6325 13.7787 11.4934 13.858 11.3303 13.9133C11.167 13.9723 10.9853 14.0019 10.785 14.0019Z" fill="#4285F4"/>
+<path d="M13.4441 13.9133V10.9804L12.771 11.2626L12.5039 10.6484L13.6222 10.1282H14.173V13.9133H13.4441Z" fill="#4285F4"/>
+</svg>
diff --git a/src/assets/icon/google_gmail.svg b/src/assets/icon/google_gmail.svg
new file mode 100644
index 000000000..fadeff8f6
--- /dev/null
+++ b/src/assets/icon/google_gmail.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.09127 18.5046V11.5495L4.93423 9.57609L3 8.48102V17.2772C3 17.9564 3.55028 18.5046 4.22738 18.5046H7.09127Z" fill="#4285F4"/>
+<path d="M16.9102 18.5046H19.774C20.4532 18.5046 21.0014 17.9544 21.0014 17.2772V8.48102L18.8106 9.73538L16.9102 11.5495V18.5046Z" fill="#34A853"/>
+<path d="M7.09039 11.5495L6.79688 8.83193L7.09039 6.2309L11.9999 9.91304L16.9094 6.2309L17.2378 8.69148L16.9094 11.5495L11.9999 15.2317L7.09039 11.5495Z" fill="#EA4335"/>
+<path d="M16.9102 6.23086V11.5495L21.0014 8.48106V6.84455C21.0014 5.32669 19.2688 4.46139 18.0557 5.3717L16.9102 6.23086Z" fill="#FBBC04"/>
+<path d="M3 8.48106L4.88164 9.8923L7.09127 11.5495V6.23086L5.94571 5.3717C4.73061 4.46139 3 5.32669 3 6.84455V8.48106Z" fill="#C5221F"/>
+</svg>
diff --git a/src/assets/icon/linkedin.svg b/src/assets/icon/linkedin.svg
new file mode 100644
index 000000000..2cf6f301a
--- /dev/null
+++ b/src/assets/icon/linkedin.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6963 3H4.35686C3.62314 3 3 3.58029 3 4.29514V19.704C3 20.4197 3.40886 21 4.14257 21H19.482C20.2166 21 21 20.4197 21 19.704V4.29514C21 3.58029 20.4309 3 19.6963 3ZM9.85714 9.85714H12.2803V11.0923H12.3069C12.6763 10.4263 13.7674 9.75 15.1166 9.75C17.706 9.75 18.4286 11.1249 18.4286 13.6714V18.4286H15.8571V14.1403C15.8571 13.0003 15.402 12 14.3374 12C13.0449 12 12.4286 12.8751 12.4286 14.3117V18.4286H9.85714V9.85714ZM5.57143 18.4286H8.14286V9.85714H5.57143V18.4286ZM8.46429 6.85714C8.46429 7.74514 7.74514 8.46429 6.85714 8.46429C5.96914 8.46429 5.25 7.74514 5.25 6.85714C5.25 5.96914 5.96914 5.25 6.85714 5.25C7.74514 5.25 8.46429 5.96914 8.46429 6.85714Z" fill="#0A66C2"/>
+<path d="M8.46429 6.85714C8.46429 7.74514 7.74514 8.46429 6.85714 8.46429C5.96914 8.46429 5.25 7.74514 5.25 6.85714C5.25 5.96914 5.96914 5.25 6.85714 5.25C7.74514 5.25 8.46429 5.96914 8.46429 6.85714Z" fill="white"/>
+<path d="M5.57143 18.4286H8.14286V9.85714H5.57143V18.4286Z" fill="white"/>
+<path d="M9.85714 9.85714H12.2803V11.0923H12.3069C12.6763 10.4263 13.7674 9.75 15.1166 9.75C17.706 9.75 18.4286 11.1249 18.4286 13.6714V18.4286H15.8571V14.1403C15.8571 13.0003 15.402 12 14.3374 12C13.0449 12 12.4286 12.8751 12.4286 14.3117V18.4286H9.85714V9.85714Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon/notion.svg b/src/assets/icon/notion.svg
new file mode 100644
index 000000000..070bcd78a
--- /dev/null
+++ b/src/assets/icon/notion.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3626 16.0908H9.54439V9.95446L13.8138 16.3586C14.1974 16.934 14.9014 17.2062 15.5723 17.0384L15.78 16.9865C15.9621 16.9409 16.0898 16.7773 16.0898 16.5896V7.909C16.0898 7.909 16.908 7.909 16.908 7.09082H14.4535C13.6353 7.09082 13.6353 7.909 13.6353 7.909H14.4535V12.8181L10.485 7.26213C10.4081 7.15462 10.2842 7.09082 10.1521 7.09082H7.90803C7.08984 7.09082 7.08984 7.909 7.08984 7.909H7.90803V16.0908C7.90803 16.0908 7.08984 16.0908 7.08984 16.909H9.54439C10.3626 16.909 10.3626 16.0908 10.3626 16.0908Z" fill="#0F0F0F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 5.45455C3 4.09894 4.09894 3 5.45455 3H18.5455C19.9011 3 21 4.09894 21 5.45455V18.5455C21 19.9011 19.9011 21 18.5455 21H5.45455C4.09894 21 3 19.9011 3 18.5455V5.45455ZM5.45455 4.63636H18.5455C18.9973 4.63636 19.3636 5.00268 19.3636 5.45455V18.5455C19.3636 18.9973 18.9973 19.3636 18.5455 19.3636H5.45455C5.00268 19.3636 4.63636 18.9973 4.63636 18.5455V5.45455C4.63636 5.00268 5.00268 4.63636 5.45455 4.63636Z" fill="#0F0F0F"/>
+</svg>
diff --git a/src/assets/icon/rag.svg b/src/assets/icon/rag.svg
new file mode 100644
index 000000000..bee2d0fa1
--- /dev/null
+++ b/src/assets/icon/rag.svg
@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.74977 10.9185V5.71689C9.74977 5.36764 9.88851 5.03269 10.1355 4.78573C10.3824 4.53877 10.7174 4.40002 11.0666 4.40002H20.2847C20.634 4.40002 20.9689 4.53877 21.2159 4.78573C21.4628 5.03269 21.6016 5.36764 21.6016 5.71689V16.2518L18.9678 13.6181H15.2016" stroke="#1D1D1D" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.7227 5.71667H12.1811C12.2915 5.71667 12.3811 5.80622 12.3811 5.91667V8.35041" stroke="#1D1D1D" stroke-width="0.4" stroke-linecap="round"/>
+<path d="M16.332 5.71667H16.7905C16.9009 5.71667 16.9905 5.80622 16.9905 5.91667V8.35041" stroke="#1D1D1D" stroke-width="0.4" stroke-linecap="round"/>
+<path d="M14.3594 9.6673H14.8178C14.9283 9.6673 15.0178 9.75684 15.0178 9.8673V10.9842V12.301" stroke="#1D1D1D" stroke-width="0.4" stroke-linecap="round"/>
+<path d="M18.9648 9.6673H19.4233C19.5337 9.6673 19.6233 9.75684 19.6233 9.8673V12.301" stroke="#1D1D1D" stroke-width="0.4" stroke-linecap="round"/>
+<path d="M13.6992 7.69197V6.37511C13.6992 6.01147 13.994 5.71667 14.3577 5.71667C14.7213 5.71667 15.0161 6.01146 15.0161 6.37511V7.69197C15.0161 8.05562 14.7213 8.35041 14.3577 8.35041C13.994 8.35041 13.6992 8.05562 13.6992 7.69197Z" stroke="#1D1D1D" stroke-width="0.4"/>
+<path d="M13.0395 10.9842V10.3257C13.0395 9.96209 12.7447 9.6673 12.3811 9.6673C12.0174 9.6673 11.7227 9.96209 11.7227 10.3257V10.9842" stroke="#1D1D1D" stroke-width="0.4" stroke-linecap="round"/>
+<path d="M18.3086 7.69197V6.37511C18.3086 6.01147 18.6034 5.71667 18.967 5.71667C19.3307 5.71667 19.6255 6.01146 19.6255 6.37511V7.69197C19.6255 8.05562 19.3307 8.35041 18.967 8.35041C18.6034 8.35041 18.3086 8.05562 18.3086 7.69197Z" stroke="#1D1D1D" stroke-width="0.4"/>
+<path d="M16.332 11.6426V10.3257C16.332 9.96209 16.6268 9.6673 16.9905 9.6673C17.3541 9.6673 17.6489 9.96209 17.6489 10.3257V11.6426C17.6489 12.0062 17.3541 12.301 16.9905 12.301C16.6268 12.301 16.332 12.0062 16.332 11.6426Z" stroke="#1D1D1D" stroke-width="0.4"/>
+<path d="M13.8645 16.551C14.1115 16.304 14.2502 15.9691 14.2502 15.6198V13.0651C14.2502 12.7158 14.1115 12.3809 13.8645 12.1339C13.6176 11.887 13.2826 11.7482 12.9334 11.7482H3.7153C3.36605 11.7482 3.0311 11.887 2.78414 12.1339C2.53718 12.3809 2.39844 12.7158 2.39844 13.0651V19.5704L5.03217 16.9367H12.9334C13.2826 16.9367 13.6176 16.7979 13.8645 16.551Z" stroke="#1D1D1D" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.90234 13.1705H7.36078C7.47123 13.1705 7.56078 13.2601 7.56078 13.3705V15.8043" stroke="#1D1D1D" stroke-width="0.4" stroke-linecap="round"/>
+<path d="M9.03906 13.1705H9.4975C9.60795 13.1705 9.6975 13.2601 9.6975 13.3705V15.8043" stroke="#1D1D1D" stroke-width="0.4" stroke-linecap="round"/>
+<path d="M4.29688 15.1458V13.829C4.29688 13.4653 4.59167 13.1705 4.95531 13.1705C5.31895 13.1705 5.61374 13.4653 5.61374 13.829V15.1458C5.61374 15.5095 5.31895 15.8043 4.95531 15.8043C4.59167 15.8043 4.29688 15.5095 4.29688 15.1458Z" stroke="#1D1D1D" stroke-width="0.4"/>
+<path d="M10.9609 15.0401V13.7233C10.9609 13.3596 11.2557 13.0648 11.6194 13.0648C11.983 13.0648 12.2778 13.3596 12.2778 13.7233V15.0401C12.2778 15.4038 11.983 15.6986 11.6194 15.6986C11.2557 15.6986 10.9609 15.4038 10.9609 15.0401Z" stroke="#1D1D1D" stroke-width="0.4"/>
+</svg>
diff --git a/src/assets/icon/reddit.svg b/src/assets/icon/reddit.svg
new file mode 100644
index 000000000..4e427bc7e
--- /dev/null
+++ b/src/assets/icon/reddit.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 12.2689C20 11.2988 19.2127 10.5114 18.2425 10.5114C17.7645 10.5114 17.3427 10.6942 17.0334 11.0035C15.8383 10.1459 14.1793 9.58348 12.3515 9.51318L13.1529 5.75923L15.754 6.30756C15.7821 6.96837 16.3304 7.50264 17.0053 7.50264C17.6942 7.50264 18.2566 6.94025 18.2566 6.25132C18.2566 5.56239 17.6942 5 17.0053 5C16.5132 5 16.0914 5.2812 15.8946 5.70299L12.9842 5.08436C12.8998 5.0703 12.8155 5.08436 12.7452 5.12654C12.6749 5.16872 12.6327 5.23902 12.6046 5.32337L11.7188 9.51318C9.84886 9.56942 8.17575 10.1178 6.96661 11.0035C6.65729 10.7083 6.22144 10.5114 5.75747 10.5114C4.78735 10.5114 4 11.2988 4 12.2689C4 12.9859 4.42179 13.5905 5.04042 13.8717C5.0123 14.0404 4.99824 14.2232 4.99824 14.406C4.99824 17.1055 8.13357 19.2847 12.0141 19.2847C15.8946 19.2847 19.0299 17.1055 19.0299 14.406C19.0299 14.2232 19.0158 14.0545 18.9877 13.8858C19.5641 13.6046 20 12.9859 20 12.2689ZM7.97891 13.5202C7.97891 12.8313 8.5413 12.2689 9.23023 12.2689C9.91916 12.2689 10.4815 12.8313 10.4815 13.5202C10.4815 14.2091 9.91916 14.7715 9.23023 14.7715C8.5413 14.7715 7.97891 14.2091 7.97891 13.5202ZM14.9666 16.8243C14.109 17.6819 12.478 17.7381 12 17.7381C11.522 17.7381 9.87698 17.6678 9.03339 16.8243C8.90685 16.6977 8.90685 16.4868 9.03339 16.3603C9.15993 16.2337 9.37083 16.2337 9.49736 16.3603C10.0316 16.8946 11.1845 17.0914 12.0141 17.0914C12.8436 17.0914 13.9824 16.8946 14.5308 16.3603C14.6573 16.2337 14.8682 16.2337 14.9947 16.3603C15.0931 16.5009 15.0931 16.6977 14.9666 16.8243ZM14.7417 14.7715C14.0527 14.7715 13.4903 14.2091 13.4903 13.5202C13.4903 12.8313 14.0527 12.2689 14.7417 12.2689C15.4306 12.2689 15.993 12.8313 15.993 13.5202C15.993 14.2091 15.4306 14.7715 14.7417 14.7715Z" fill="#FF4500"/>
+</svg>
diff --git a/src/assets/icon/slack.svg b/src/assets/icon/slack.svg
index 73d69d013..53b24e829 100644
--- a/src/assets/icon/slack.svg
+++ b/src/assets/icon/slack.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.8752 11.2497C20.9106 11.2497 21.75 10.4103 21.75 9.37485C21.75 8.3394 20.9105 7.5 19.8751 7.5C18.8395 7.5 18 8.33948 18 9.375V11.2497H19.8752ZM14.625 11.2497C15.6605 11.2497 16.5 10.4102 16.5 9.3747V4.125C16.5 3.08947 15.6605 2.25 14.625 2.25C13.5895 2.25 12.75 3.08947 12.75 4.125V9.3747C12.75 10.4102 13.5895 11.2497 14.625 11.2497Z" fill="#2EB67D"/>
-<path d="M4.12484 12.7504C3.08939 12.7504 2.25 13.5898 2.25 14.6252C2.25 15.6607 3.08947 16.5001 4.12492 16.5001C5.16045 16.5001 6 15.6606 6 14.6251V12.7504H4.12484ZM9.375 12.7504C8.33948 12.7504 7.5 13.5898 7.5 14.6254V19.8751C7.5 20.9106 8.33948 21.7501 9.375 21.7501C10.4105 21.7501 11.25 20.9106 11.25 19.8751V14.6254C11.25 13.5898 10.4105 12.7504 9.375 12.7504Z" fill="#E01E5A"/>
-<path d="M12.7502 19.8752C12.7502 20.9106 13.5896 21.75 14.6251 21.75C15.6605 21.75 16.4999 20.9105 16.4999 19.8751C16.4999 18.8395 15.6605 18 14.6249 18H12.7502V19.8752ZM12.7502 14.625C12.7502 15.6605 13.5897 16.5 14.6252 16.5H19.8749C20.9105 16.5 21.7499 15.6605 21.7499 14.625C21.7499 13.5895 20.9105 12.75 19.8749 12.75H14.6252C13.5897 12.75 12.7502 13.5895 12.7502 14.625Z" fill="#ECB22E"/>
-<path d="M11.2497 4.12484C11.2497 3.08939 10.4103 2.25 9.37485 2.25C8.3394 2.25 7.5 3.08947 7.5 4.12492C7.5 5.16046 8.33948 6 9.375 6H11.2497V4.12484ZM11.2497 9.375C11.2497 8.33948 10.4102 7.5 9.3747 7.5H4.125C3.08947 7.5 2.25 8.33948 2.25 9.375C2.25 10.4105 3.08947 11.25 4.125 11.25H9.3747C10.4102 11.25 11.2497 10.4105 11.2497 9.375Z" fill="#36C5F0"/>
+<path d="M18.4635 11.3844C19.3131 11.3844 20.0018 10.6956 20.0018 9.84603C20.0018 8.99643 19.313 8.30769 18.4634 8.30769C17.6137 8.30769 16.9249 8.99649 16.9249 9.84615V11.3844H18.4635ZM14.1556 11.3844C15.0053 11.3844 15.6941 10.6956 15.6941 9.84591V5.53846C15.6941 4.68879 15.0053 4 14.1556 4C13.306 4 12.6172 4.68879 12.6172 5.53846V9.84591C12.6172 10.6956 13.306 11.3844 14.1556 11.3844Z" fill="#2EB67D"/>
+<path d="M5.53833 12.6156C4.68873 12.6156 4 13.3043 4 14.1539C4 15.0035 4.6888 15.6923 5.53839 15.6923C6.38806 15.6923 7.07692 15.0035 7.07692 14.1538V12.6156H5.53833ZM9.84615 12.6156C8.99649 12.6156 8.30769 13.3044 8.30769 14.1541V18.4615C8.30769 19.3112 8.99649 20 9.84615 20C10.6958 20 11.3846 19.3112 11.3846 18.4615V14.1541C11.3846 13.3044 10.6958 12.6156 9.84615 12.6156Z" fill="#E01E5A"/>
+<path d="M12.6172 18.4616C12.6172 19.3112 13.3059 20 14.1555 20C15.0051 20 15.6939 19.3112 15.6939 18.4616C15.6939 17.6119 15.0051 16.923 14.1554 16.923H12.6172V18.4616ZM12.6172 14.1538C12.6172 15.0035 13.306 15.6923 14.1556 15.6923H18.4631C19.3128 15.6923 20.0016 15.0035 20.0016 14.1538C20.0016 13.3042 19.3128 12.6154 18.4631 12.6154H14.1556C13.306 12.6154 12.6172 13.3042 12.6172 14.1538Z" fill="#ECB22E"/>
+<path d="M11.3844 5.53833C11.3844 4.68873 10.6956 4 9.84603 4C8.99643 4 8.30769 4.6888 8.30769 5.53839C8.30769 6.38807 8.99649 7.07692 9.84615 7.07692H11.3844V5.53833ZM11.3844 9.84615C11.3844 8.99649 10.6956 8.30769 9.84591 8.30769H5.53846C4.68879 8.30769 4 8.99649 4 9.84615C4 10.6958 4.68879 11.3846 5.53846 11.3846H9.84591C10.6956 11.3846 11.3844 10.6958 11.3844 9.84615Z" fill="#36C5F0"/>
 </svg>
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/assets/icon/whatsapp.svg b/src/assets/icon/whatsapp.svg
new file mode 100644
index 000000000..49f70f468
--- /dev/null
+++ b/src/assets/icon/whatsapp.svg
@@ -0,0 +1,11 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35 20C35 28.2842 28.2842 35 20 35C16.8402 35 13.9086 34.023 11.4908 32.3546L6.36364 33.6364L7.7072 28.598C6.00115 26.1634 5 23.1986 5 20C5 11.7157 11.7157 5 20 5C28.2842 5 35 11.7157 35 20Z" fill="url(#paint0_linear_4415_1672)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 37.5C29.665 37.5 37.5 29.665 37.5 20C37.5 10.335 29.665 2.5 20 2.5C10.335 2.5 2.5 10.335 2.5 20C2.5 23.1386 3.32625 26.0843 4.77309 28.6313L2.5 37.5L11.6436 35.3798C14.1268 36.7318 16.9736 37.5 20 37.5ZM20 34.8078C28.1781 34.8078 34.8078 28.1781 34.8078 20C34.8078 11.8219 28.1781 5.19231 20 5.19231C11.8219 5.19231 5.19231 11.8219 5.19231 20C5.19231 23.1576 6.18063 26.0844 7.8648 28.4877L6.53846 33.4615L11.5999 32.1961C13.9868 33.8433 16.8808 34.8078 20 34.8078Z" fill="white"/>
+<path d="M15.625 11.8747C15.209 11.039 14.5706 11.113 13.9259 11.113C12.7735 11.113 10.9766 12.4934 10.9766 15.0624C10.9766 17.1678 11.9043 19.4724 15.0305 22.92C18.0475 26.2473 22.0118 27.9684 25.3028 27.9098C28.5938 27.8513 29.2709 25.0191 29.2709 24.0628C29.2709 23.6389 29.0078 23.4274 28.8266 23.3699C27.7051 22.8316 25.6366 21.8288 25.166 21.6404C24.6954 21.452 24.4496 21.7069 24.2969 21.8455C23.8701 22.2521 23.0241 23.4509 22.7344 23.7205C22.4447 23.9901 22.0129 23.8536 21.8331 23.7518C21.1717 23.4864 19.3786 22.6888 17.9494 21.3031C16.1816 19.5896 16.0779 19 15.7449 18.4753C15.4785 18.0554 15.674 17.7979 15.7715 17.6853C16.1524 17.2459 16.6782 16.5674 16.9141 16.2303C17.1499 15.893 16.9627 15.3811 16.8504 15.0624C16.3672 13.6911 15.9579 12.5433 15.625 11.8747Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_4415_1672" x1="33.125" y1="8.75" x2="5" y2="35" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5BD066"/>
+<stop offset="1" stop-color="#27B43E"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/icon/x.svg b/src/assets/icon/x.svg
new file mode 100644
index 000000000..f414fb575
--- /dev/null
+++ b/src/assets/icon/x.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9027 10.6547L21.3482 2H19.5838L13.1189 9.51478L7.95547 2H2L9.8082 13.3637L2 22.4395H3.76443L10.5915 14.5036L16.0445 22.4395H22L13.9023 10.6547H13.9027ZM11.4861 13.4638L10.6949 12.3322L4.40018 3.32824H7.11025L12.1902 10.5947L12.9813 11.7263L19.5847 21.1717H16.8746L11.4861 13.4642V13.4638Z" fill="black"/>
+</svg>
diff --git a/src/assets/light.png b/src/assets/light.png
deleted file mode 100644
index f0de3f5e5..000000000
Binary files a/src/assets/light.png and /dev/null differ
diff --git a/src/assets/logo/icon_black.svg b/src/assets/logo/icon_black.svg
index 752962fb5..a4a46348b 100644
--- a/src/assets/logo/icon_black.svg
+++ b/src/assets/logo/icon_black.svg
@@ -1,33 +1,32 @@
-<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ddi_6940_13775)">
-<rect x="2.25" y="0.75" width="24" height="24" rx="6" fill="#1D1D1D"/>
-<path d="M23.3857 19.2275H17.6582V18.4121L17.793 18.4102C18.5164 18.3979 18.9463 18.322 19.0889 18.2783C19.2284 18.2296 19.3056 18.1716 19.3447 18.1162C19.367 18.0787 19.3944 17.9968 19.417 17.8516C19.439 17.7098 19.4557 17.5229 19.4648 17.2891V17.2881C19.4709 17.1624 19.4824 16.2946 19.501 14.6777V10.4131C19.501 9.57932 19.4921 8.76366 19.4736 7.9668L19.4551 7.5791C19.4471 7.46564 19.4369 7.36779 19.4258 7.28516C19.4146 7.20243 19.4026 7.13724 19.3896 7.08887C19.3763 7.03925 19.365 7.01663 19.3604 7.00977L19.3545 7.00195C19.3086 6.9273 19.227 6.86361 19.0889 6.82129L19.082 6.81934C19.0244 6.79881 18.8925 6.77676 18.6689 6.75977C18.4506 6.74317 18.1589 6.73171 17.793 6.72559L17.6582 6.72363V5.86328H23.3857V6.72363L23.252 6.72559C22.8859 6.73171 22.593 6.74317 22.373 6.75977C22.1479 6.77676 22.0126 6.79916 21.9512 6.82031L21.9482 6.82129C21.8143 6.86394 21.7385 6.9183 21.6992 6.97363L21.6631 7.06543C21.6507 7.10896 21.6383 7.16615 21.627 7.23926C21.6049 7.38098 21.5892 7.56795 21.5801 7.80176V7.80371C21.5741 7.9247 21.5615 8.79222 21.543 10.4141V14.6777C21.543 15.5117 21.5518 16.3244 21.5703 17.1152L21.5889 17.5039C21.5964 17.6179 21.6058 17.7171 21.6162 17.8008C21.6266 17.8844 21.6382 17.9507 21.6504 18.001C21.6622 18.0495 21.6736 18.0748 21.6797 18.0859C21.7335 18.1652 21.8187 18.2311 21.9482 18.2783C22.0121 18.2975 22.1486 18.3177 22.3721 18.333C22.5925 18.3481 22.8857 18.3591 23.252 18.3652L23.3857 18.3672V19.2275Z" fill="white" stroke="white" stroke-width="0.272725"/>
-<path d="M11.7344 5.86328C11.9988 5.86328 12.2185 5.94507 12.3623 6.13086L12.4121 6.19727C12.5237 6.36171 12.604 6.59382 12.6611 6.87988C12.7364 7.24188 12.9978 8.4274 13.4453 10.4375C13.8926 12.4405 14.2613 13.9515 14.5508 14.9707C14.8414 15.9937 15.0685 16.6837 15.2324 17.0488C15.3913 17.4026 15.5787 17.6033 15.7393 17.7744C15.7866 17.8249 15.8922 17.9057 16.0273 17.9951C16.1592 18.0823 16.3087 18.1707 16.4355 18.2363C16.5092 18.2745 16.6505 18.3235 16.8105 18.3623C16.9703 18.4011 17.1322 18.426 17.2461 18.4229L17.3867 18.4189V19.2275H17.25C16.9425 19.2275 16.608 19.2252 16.3066 19.2236C16.0053 19.2221 15.7375 19.2207 15.5625 19.2207H14.7598C14.464 19.2207 14.2027 19.1339 13.9834 18.957C13.7661 18.7817 13.5975 18.5249 13.4727 18.1982C13.23 17.5632 12.8065 15.8749 12.2031 13.1494L11.0439 8.11914C10.9229 7.60275 10.7785 7.27544 10.624 7.10938C10.4814 6.95602 10.2272 6.8623 9.8252 6.8623C9.75633 6.86231 9.65581 6.86402 9.52734 6.86523C9.39921 6.86645 9.24437 6.86719 9.06836 6.86719H8.93164V6.25391L9.03906 6.23047C10.2751 5.95623 11.3912 5.8633 11.7344 5.86328Z" fill="white" stroke="white" stroke-width="0.272725"/>
-<path d="M10.374 10.3096C9.65413 11.98 8.56815 14.3876 7.98438 15.6914C7.59259 16.5664 7.70123 16.313 7.49512 16.7314C7.42234 16.8792 7.23706 17.1383 7.04297 17.3877C6.8507 17.6347 6.66264 17.8568 6.59473 17.9277C6.55362 17.9707 6.46063 18.0408 6.33984 18.1191C6.22207 18.1955 6.08781 18.2726 5.97461 18.3301C5.91227 18.3617 5.78922 18.4007 5.64551 18.4307C5.50316 18.4603 5.35694 18.4784 5.25391 18.4756L5.11426 18.4717V19.2266H7.07031C7.59356 19.2265 8.20356 18.9286 8.44141 18.3184C8.6554 17.7693 10.1261 13.8285 10.835 11.5898L10.8447 11.5576L10.8398 11.5254L10.6338 10.3398L10.5557 9.88867L10.374 10.3096Z" fill="white" stroke="white" stroke-width="0.272725"/>
+<svg width="30" height="33" viewBox="0 0 30 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dii_7646_73652)">
+<path d="M21 3H9C5.68629 3 3 5.68629 3 9V21C3 24.3137 5.68629 27 9 27H21C24.3137 27 27 24.3137 27 21V9C27 5.68629 24.3137 3 21 3Z" fill="#1D1D1D"/>
+<path d="M24.1368 21.4775H18.4092V20.6621L18.544 20.6602C19.2674 20.6479 19.6973 20.572 19.8399 20.5283C19.9794 20.4796 20.0566 20.4216 20.0958 20.3662C20.1181 20.3287 20.1454 20.2468 20.168 20.1016C20.1901 19.9598 20.2067 19.7729 20.2159 19.5391V19.5381C20.2219 19.4124 20.2335 18.5446 20.252 16.9277V12.6631C20.252 11.8293 20.2431 11.0137 20.2247 10.2168L20.2061 9.8291C20.1982 9.71564 20.1879 9.61779 20.1768 9.53516C20.1657 9.45243 20.1537 9.38724 20.1407 9.33887C20.1273 9.28925 20.116 9.26663 20.1114 9.25977L20.1055 9.25195C20.0596 9.1773 19.978 9.11361 19.8399 9.07129L19.8331 9.06934C19.7754 9.04881 19.6436 9.02676 19.42 9.00977C19.2016 8.99317 18.9099 8.98171 18.544 8.97559L18.4092 8.97363V8.11328H24.1368V8.97363L24.003 8.97559C23.6369 8.98171 23.3441 8.99317 23.1241 9.00977C22.8989 9.02676 22.7636 9.04916 22.7022 9.07031L22.6993 9.07129C22.5653 9.11394 22.4895 9.1683 22.4503 9.22363L22.4141 9.31543C22.4017 9.35896 22.3894 9.41615 22.378 9.48926C22.356 9.63098 22.3403 9.81795 22.3311 10.0518V10.0537C22.3251 10.1747 22.3125 11.0422 22.294 12.6641V16.9277C22.294 17.7617 22.3029 18.5744 22.3213 19.3652L22.3399 19.7539C22.3475 19.8679 22.3568 19.9671 22.3672 20.0508C22.3777 20.1344 22.3892 20.2007 22.4014 20.251C22.4132 20.2995 22.4246 20.3248 22.4307 20.3359C22.4846 20.4152 22.5697 20.4811 22.6993 20.5283C22.7632 20.5475 22.8997 20.5677 23.1231 20.583C23.3436 20.5981 23.6367 20.6091 24.003 20.6152L24.1368 20.6172V21.4775Z" fill="white" stroke="white" stroke-width="0.272725"/>
+<path d="M12.4844 8.11328C12.7489 8.11328 12.9685 8.19507 13.1123 8.38086L13.1621 8.44727C13.2737 8.61171 13.3541 8.84382 13.4112 9.12988C13.4865 9.49188 13.7478 10.6774 14.1954 12.6875C14.6427 14.6905 15.0113 16.2015 15.3008 17.2207C15.5914 18.2437 15.8185 18.9337 15.9825 19.2988C16.1413 19.6526 16.3287 19.8533 16.4893 20.0244C16.5367 20.0749 16.6423 20.1557 16.7774 20.2451C16.9092 20.3323 17.0587 20.4207 17.1856 20.4863C17.2593 20.5245 17.4006 20.5735 17.5606 20.6123C17.7204 20.6511 17.8822 20.676 17.9961 20.6729L18.1368 20.6689V21.4775H18C17.6925 21.4775 17.358 21.4752 17.0567 21.4736C16.7553 21.4721 16.4876 21.4707 16.3125 21.4707H15.5098C15.214 21.4707 14.9528 21.3839 14.7334 21.207C14.5161 21.0317 14.3476 20.7749 14.2227 20.4482C13.98 19.8132 13.5565 18.1249 12.9532 15.3994L11.794 10.3691C11.6729 9.85275 11.5285 9.52544 11.3741 9.35938C11.2314 9.20602 10.9773 9.1123 10.5752 9.1123C10.5064 9.11231 10.4059 9.11402 10.2774 9.11523C10.1492 9.11645 9.99437 9.11719 9.81836 9.11719H9.68164V8.50391L9.78906 8.48047C11.0251 8.20623 12.1413 8.1133 12.4844 8.11328Z" fill="white" stroke="white" stroke-width="0.272725"/>
+<path d="M11.1231 12.5596C10.4032 14.23 9.31718 16.6376 8.7334 17.9414C8.34161 18.8164 8.45025 18.563 8.24414 18.9814C8.17136 19.1292 7.98608 19.3883 7.79199 19.6377C7.59972 19.8847 7.41166 20.1068 7.34375 20.1777C7.30264 20.2207 7.20965 20.2908 7.08886 20.3691C6.97109 20.4455 6.83683 20.5226 6.72363 20.5801C6.66129 20.6117 6.53824 20.6507 6.39453 20.6807C6.25218 20.7103 6.10596 20.7284 6.00293 20.7256L5.86328 20.7217V21.4766H7.81933C8.34258 21.4765 8.95258 21.1786 9.19043 20.5684C9.40442 20.0193 10.8752 16.0785 11.584 13.8398L11.5938 13.8076L11.5889 13.7754L11.3828 12.5898L11.3047 12.1387L11.1231 12.5596Z" fill="white" stroke="white" stroke-width="0.272725"/>
 </g>
 <defs>
-<filter id="filter0_ddi_6940_13775" x="0" y="0" width="28.5" height="29.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_dii_7646_73652" x="0" y="2.25" width="30" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="0.75" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_6940_13775"/>
-<feOffset/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.831373 0 0 0 0 0.831373 0 0 0 0 0.831373 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6940_13775"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="0.75" operator="erode" in="SourceAlpha" result="effect2_dropShadow_6940_13775"/>
 <feOffset dy="2.25"/>
 <feGaussianBlur stdDeviation="1.5"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="effect1_dropShadow_6940_13775" result="effect2_dropShadow_6940_13775"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6940_13775" result="shape"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7646_73652"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7646_73652" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.831373 0 0 0 0 0.831373 0 0 0 0 0.831373 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_7646_73652"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset dy="0.75"/>
 <feGaussianBlur stdDeviation="1.5"/>
 <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
 <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.33 0"/>
-<feBlend mode="normal" in2="shape" result="effect3_innerShadow_6940_13775"/>
+<feBlend mode="normal" in2="effect2_innerShadow_7646_73652" result="effect3_innerShadow_7646_73652"/>
 </filter>
 </defs>
 </svg>
diff --git a/src/assets/logo/icon_white.svg b/src/assets/logo/icon_white.svg
index 4cefd0711..a66226908 100644
--- a/src/assets/logo/icon_white.svg
+++ b/src/assets/logo/icon_white.svg
@@ -1,33 +1,32 @@
-<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ddi_6940_13779)">
-<rect x="2.25" y="0.75" width="24" height="24" rx="6" fill="white"/>
-<path d="M23.3857 19.2275H17.6582V18.4121L17.793 18.4102C18.5164 18.3979 18.9463 18.322 19.0889 18.2783C19.2284 18.2296 19.3056 18.1716 19.3447 18.1162C19.367 18.0787 19.3944 17.9968 19.417 17.8516C19.439 17.7098 19.4557 17.5229 19.4648 17.2891V17.2881C19.4709 17.1624 19.4824 16.2946 19.501 14.6777V10.4131C19.501 9.57932 19.4921 8.76366 19.4736 7.9668L19.4551 7.5791C19.4471 7.46564 19.4369 7.36779 19.4258 7.28516C19.4146 7.20243 19.4026 7.13724 19.3896 7.08887C19.3763 7.03925 19.365 7.01663 19.3604 7.00977L19.3545 7.00195C19.3086 6.9273 19.227 6.86361 19.0889 6.82129L19.082 6.81934C19.0244 6.79881 18.8925 6.77676 18.6689 6.75977C18.4506 6.74317 18.1589 6.73171 17.793 6.72559L17.6582 6.72363V5.86328H23.3857V6.72363L23.252 6.72559C22.8859 6.73171 22.593 6.74317 22.373 6.75977C22.1479 6.77676 22.0126 6.79916 21.9512 6.82031L21.9482 6.82129C21.8143 6.86394 21.7385 6.9183 21.6992 6.97363L21.6631 7.06543C21.6507 7.10896 21.6383 7.16615 21.627 7.23926C21.6049 7.38098 21.5892 7.56795 21.5801 7.80176V7.80371C21.5741 7.9247 21.5615 8.79222 21.543 10.4141V14.6777C21.543 15.5117 21.5518 16.3244 21.5703 17.1152L21.5889 17.5039C21.5964 17.6179 21.6058 17.7171 21.6162 17.8008C21.6266 17.8844 21.6382 17.9507 21.6504 18.001C21.6622 18.0495 21.6736 18.0748 21.6797 18.0859C21.7335 18.1652 21.8187 18.2311 21.9482 18.2783C22.0121 18.2975 22.1486 18.3177 22.3721 18.333C22.5925 18.3481 22.8857 18.3591 23.252 18.3652L23.3857 18.3672V19.2275Z" fill="#1D1D1D" stroke="#1D1D1D" stroke-width="0.272725"/>
-<path d="M11.7344 5.86328C11.9988 5.86328 12.2185 5.94507 12.3623 6.13086L12.4121 6.19727C12.5237 6.36171 12.604 6.59382 12.6611 6.87988C12.7364 7.24188 12.9978 8.4274 13.4453 10.4375C13.8926 12.4405 14.2613 13.9515 14.5508 14.9707C14.8414 15.9937 15.0685 16.6837 15.2324 17.0488C15.3913 17.4026 15.5787 17.6033 15.7393 17.7744C15.7866 17.8249 15.8922 17.9057 16.0273 17.9951C16.1592 18.0823 16.3087 18.1707 16.4355 18.2363C16.5092 18.2745 16.6505 18.3235 16.8105 18.3623C16.9703 18.4011 17.1322 18.426 17.2461 18.4229L17.3867 18.4189V19.2275H17.25C16.9425 19.2275 16.608 19.2252 16.3066 19.2236C16.0053 19.2221 15.7375 19.2207 15.5625 19.2207H14.7598C14.464 19.2207 14.2027 19.1339 13.9834 18.957C13.7661 18.7817 13.5975 18.5249 13.4727 18.1982C13.23 17.5632 12.8065 15.8749 12.2031 13.1494L11.0439 8.11914C10.9229 7.60275 10.7785 7.27544 10.624 7.10938C10.4814 6.95602 10.2272 6.8623 9.8252 6.8623C9.75633 6.86231 9.65581 6.86402 9.52734 6.86523C9.39921 6.86645 9.24437 6.86719 9.06836 6.86719H8.93164V6.25391L9.03906 6.23047C10.2751 5.95623 11.3912 5.8633 11.7344 5.86328Z" fill="#1D1D1D" stroke="#1D1D1D" stroke-width="0.272725"/>
-<path d="M10.374 10.3096C9.65413 11.98 8.56815 14.3876 7.98438 15.6914C7.59259 16.5664 7.70123 16.313 7.49512 16.7314C7.42234 16.8792 7.23706 17.1383 7.04297 17.3877C6.8507 17.6347 6.66264 17.8568 6.59473 17.9277C6.55362 17.9707 6.46063 18.0408 6.33984 18.1191C6.22207 18.1955 6.08781 18.2726 5.97461 18.3301C5.91227 18.3617 5.78922 18.4007 5.64551 18.4307C5.50316 18.4603 5.35694 18.4784 5.25391 18.4756L5.11426 18.4717V19.2266H7.07031C7.59356 19.2265 8.20356 18.9286 8.44141 18.3184C8.6554 17.7693 10.1261 13.8285 10.835 11.5898L10.8447 11.5576L10.8398 11.5254L10.6338 10.3398L10.5557 9.88867L10.374 10.3096Z" fill="#1D1D1D" stroke="#1D1D1D" stroke-width="0.272725"/>
+<svg width="30" height="33" viewBox="0 0 30 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dii_7646_73664)">
+<path d="M21 3H9C5.68629 3 3 5.68629 3 9V21C3 24.3137 5.68629 27 9 27H21C24.3137 27 27 24.3137 27 21V9C27 5.68629 24.3137 3 21 3Z" fill="white"/>
+<path d="M24.1368 21.4775H18.4092V20.6621L18.544 20.6602C19.2674 20.6479 19.6973 20.572 19.8399 20.5283C19.9794 20.4796 20.0566 20.4216 20.0958 20.3662C20.1181 20.3287 20.1454 20.2468 20.168 20.1016C20.1901 19.9598 20.2067 19.7729 20.2159 19.5391V19.5381C20.2219 19.4124 20.2335 18.5446 20.252 16.9277V12.6631C20.252 11.8293 20.2431 11.0137 20.2247 10.2168L20.2061 9.8291C20.1982 9.71564 20.1879 9.61779 20.1768 9.53516C20.1657 9.45243 20.1537 9.38724 20.1407 9.33887C20.1273 9.28925 20.116 9.26663 20.1114 9.25977L20.1055 9.25195C20.0596 9.1773 19.978 9.11361 19.8399 9.07129L19.8331 9.06934C19.7754 9.04881 19.6436 9.02676 19.42 9.00977C19.2016 8.99317 18.9099 8.98171 18.544 8.97559L18.4092 8.97363V8.11328H24.1368V8.97363L24.003 8.97559C23.6369 8.98171 23.3441 8.99317 23.1241 9.00977C22.8989 9.02676 22.7636 9.04916 22.7022 9.07031L22.6993 9.07129C22.5653 9.11394 22.4895 9.1683 22.4503 9.22363L22.4141 9.31543C22.4017 9.35896 22.3894 9.41615 22.378 9.48926C22.356 9.63098 22.3403 9.81795 22.3311 10.0518V10.0537C22.3251 10.1747 22.3125 11.0422 22.294 12.6641V16.9277C22.294 17.7617 22.3029 18.5744 22.3213 19.3652L22.3399 19.7539C22.3475 19.8679 22.3568 19.9671 22.3672 20.0508C22.3777 20.1344 22.3892 20.2007 22.4014 20.251C22.4132 20.2995 22.4246 20.3248 22.4307 20.3359C22.4846 20.4152 22.5697 20.4811 22.6993 20.5283C22.7632 20.5475 22.8997 20.5677 23.1231 20.583C23.3436 20.5981 23.6367 20.6091 24.003 20.6152L24.1368 20.6172V21.4775Z" fill="#1D1D1D" stroke="#1D1D1D" stroke-width="0.272725"/>
+<path d="M12.4844 8.11328C12.7489 8.11328 12.9685 8.19507 13.1123 8.38086L13.1621 8.44727C13.2737 8.61171 13.3541 8.84382 13.4112 9.12988C13.4865 9.49188 13.7478 10.6774 14.1954 12.6875C14.6427 14.6905 15.0113 16.2015 15.3008 17.2207C15.5914 18.2437 15.8185 18.9337 15.9825 19.2988C16.1413 19.6526 16.3287 19.8533 16.4893 20.0244C16.5367 20.0749 16.6423 20.1557 16.7774 20.2451C16.9092 20.3323 17.0587 20.4207 17.1856 20.4863C17.2593 20.5245 17.4006 20.5735 17.5606 20.6123C17.7204 20.6511 17.8822 20.676 17.9961 20.6729L18.1368 20.6689V21.4775H18C17.6925 21.4775 17.358 21.4752 17.0567 21.4736C16.7553 21.4721 16.4876 21.4707 16.3125 21.4707H15.5098C15.214 21.4707 14.9528 21.3839 14.7334 21.207C14.5161 21.0317 14.3476 20.7749 14.2227 20.4482C13.98 19.8132 13.5565 18.1249 12.9532 15.3994L11.794 10.3691C11.6729 9.85275 11.5285 9.52544 11.3741 9.35938C11.2314 9.20602 10.9773 9.1123 10.5752 9.1123C10.5064 9.11231 10.4059 9.11402 10.2774 9.11523C10.1492 9.11645 9.99437 9.11719 9.81836 9.11719H9.68164V8.50391L9.78906 8.48047C11.0251 8.20623 12.1413 8.1133 12.4844 8.11328Z" fill="#1D1D1D" stroke="#1D1D1D" stroke-width="0.272725"/>
+<path d="M11.1231 12.5596C10.4032 14.23 9.31718 16.6376 8.7334 17.9414C8.34161 18.8164 8.45025 18.563 8.24414 18.9814C8.17136 19.1292 7.98608 19.3883 7.79199 19.6377C7.59972 19.8847 7.41166 20.1068 7.34375 20.1777C7.30264 20.2207 7.20965 20.2908 7.08886 20.3691C6.97109 20.4455 6.83683 20.5226 6.72363 20.5801C6.66129 20.6117 6.53824 20.6507 6.39453 20.6807C6.25218 20.7103 6.10596 20.7284 6.00293 20.7256L5.86328 20.7217V21.4766H7.81933C8.34258 21.4765 8.95258 21.1786 9.19043 20.5684C9.40442 20.0193 10.8752 16.0785 11.584 13.8398L11.5938 13.8076L11.5889 13.7754L11.3828 12.5898L11.3047 12.1387L11.1231 12.5596Z" fill="#1D1D1D" stroke="#1D1D1D" stroke-width="0.272725"/>
 </g>
 <defs>
-<filter id="filter0_ddi_6940_13779" x="0" y="0" width="28.5" height="29.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_dii_7646_73664" x="0" y="2.25" width="30" height="30" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="0.75" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_6940_13779"/>
-<feOffset/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.831373 0 0 0 0 0.831373 0 0 0 0 0.831373 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6940_13779"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feMorphology radius="0.75" operator="erode" in="SourceAlpha" result="effect2_dropShadow_6940_13779"/>
 <feOffset dy="2.25"/>
 <feGaussianBlur stdDeviation="1.5"/>
 <feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="effect1_dropShadow_6940_13779" result="effect2_dropShadow_6940_13779"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6940_13779" result="shape"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7646_73664"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7646_73664" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.308181 0 0 0 0 0.308181 0 0 0 0 0.308181 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_7646_73664"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset dy="0.75"/>
 <feGaussianBlur stdDeviation="1.5"/>
 <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.33 0"/>
-<feBlend mode="normal" in2="shape" result="effect3_innerShadow_6940_13779"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.113725 0 0 0 0 0.113725 0 0 0 0 0.113725 0 0 0 0.33 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_7646_73664" result="effect3_innerShadow_7646_73664"/>
 </filter>
 </defs>
 </svg>
diff --git a/src/assets/transparent.png b/src/assets/transparent.png
deleted file mode 100644
index 798523455..000000000
Binary files a/src/assets/transparent.png and /dev/null differ
diff --git a/src/client/platform.ts b/src/client/platform.ts
index 9c717066f..269d073e3 100644
--- a/src/client/platform.ts
+++ b/src/client/platform.ts
@@ -13,6 +13,8 @@
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 // Client platform detection. See docs/design/04-client.md.
 
+import { createHost } from '@/host/createHost';
+
 export type ClientType =
   | 'desktop'
   | 'web'
@@ -26,11 +28,8 @@ export type ClientType =
 
 /** True when running inside Electron (desktop app). */
 export function isElectron(): boolean {
-  return (
-    typeof window !== 'undefined' &&
-    !!(window as any).electronAPI &&
-    !!(window as any).ipcRenderer
-  );
+  const host = createHost();
+  return !!host.electronAPI && !!host.ipcRenderer;
 }
 
 /** Current client type. Web build = 'web'; Electron = 'desktop'. */
diff --git a/src/components/AddWorker/ToolSelect.tsx b/src/components/AddWorker/ToolSelect.tsx
index 35437aedb..4d3247dc4 100644
--- a/src/components/AddWorker/ToolSelect.tsx
+++ b/src/components/AddWorker/ToolSelect.tsx
@@ -20,30 +20,31 @@ import {
   proxyFetchPost,
   proxyFetchPut,
 } from '@/api/http';
-import githubIcon from '@/assets/github.svg';
-import IntegrationList from '@/components/IntegrationList';
+import IntegrationList from '@/components/Dashboard/IntegrationList';
 import { Badge } from '@/components/ui/badge';
+import {
+  useIntegrationManagement,
+  type IntegrationItem,
+} from '@/hooks/useIntegrationManagement';
 import { useHost } from '@/host';
 import { capitalizeFirstLetter, getProxyBaseURL } from '@/lib';
+import { cn } from '@/lib/utils';
 import { useAuthStore } from '@/store/authStore';
-import { CircleAlert, Store, X } from 'lucide-react';
+import { CircleAlert, X } from 'lucide-react';
 import {
   forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '../ui/button';
+import { Checkbox } from '../ui/checkbox';
 import { Textarea } from '../ui/textarea';
 import { TooltipSimple } from '../ui/tooltip';
 
-import AnthropicIcon from '@/assets/mcp/Anthropic.svg?url';
-import CamelIcon from '@/assets/mcp/Camel.svg?url';
-import CommunityIcon from '@/assets/mcp/Community.svg?url';
-import OfficialIcon from '@/assets/mcp/Official.svg?url';
 interface McpItem {
   id: number;
   name: string;
@@ -73,22 +74,22 @@ const ToolSelect = forwardRef<
   const { t } = useTranslation();
   // state management - remove internal selected state, use parent passed initialSelectedTools
   const [keyword, setKeyword] = useState<string>('');
-  const [mcpList, setMcpList] = useState<McpItem[]>([]);
-  const [allMcpList, setAllMcpList] = useState<McpItem[]>([]);
-  const [customMcpList, setCustomMcpList] = useState<any[]>([]);
-  const [isOpen, setIsOpen] = useState(false);
-  const [installed, setInstalled] = useState<{ [id: number]: boolean }>({});
-  const [installing, setInstalling] = useState<{ [id: number]: boolean }>({});
-  const [installedIds, setInstalledIds] = useState<number[]>([]);
   const { email } = useAuthStore();
-  // add: integration service list
   const [integrations, setIntegrations] = useState<any[]>([]);
+  const [userMcpList, setUserMcpList] = useState<any[]>([]);
+
+  const integrationItems = integrations as IntegrationItem[];
+  const { installed: webInstalled } =
+    useIntegrationManagement(integrationItems);
+
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
   // select management
   const addOption = useCallback(
     (item: McpItem, isLocal?: boolean) => {
-      setKeyword('');
       const currentSelected = initialSelectedTools || [];
-      console.log(currentSelected.find((i) => i.id === item.id));
       if (isLocal) {
         if (!currentSelected.find((i) => i.key === item.key)) {
           const newSelected = [...currentSelected, { ...item, isLocal }];
@@ -298,86 +299,23 @@ const ToolSelect = forwardRef<
     [addOption, t]
   );
 
-  // Refs
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // constants
-  const categoryIconMap: Record<string, string> = {
-    anthropic: 'Anthropic',
-    community: 'Community',
-    official: 'Official',
-    camel: 'Camel',
-  };
-
-  const svgIcons: Record<string, string> = {
-    Anthropic: AnthropicIcon,
-    Community: CommunityIcon,
-    Official: OfficialIcon,
-    Camel: CamelIcon,
-  };
-
-  // data fetching
-  const fetchData = useCallback((keyword?: string) => {
-    proxyFetchGet('/api/v1/mcps', {
-      keyword: keyword || '',
-      page: 1,
-      size: 100,
-    })
-      .then((res) => {
-        // Add defensive check for API errors
-        if (res && res.items && Array.isArray(res.items)) {
-          setAllMcpList(res.items);
-        } else {
-          console.error('Failed to fetch MCPs:', res);
-          setAllMcpList([]);
-        }
-      })
-      .catch((error) => {
-        console.error('Error fetching MCPs:', error);
-        setAllMcpList([]);
-      });
-  }, []);
-
   const fetchInstalledMcps = useCallback(() => {
     proxyFetchGet('/api/v1/mcp/users')
       .then((res) => {
-        let dataList = [];
-        let ids: number[] = [];
+        let dataList: any[] = [];
         if (Array.isArray(res)) {
-          ids = res.map((item: any) => item.mcp_id);
           dataList = res;
         } else if (res && Array.isArray(res.items)) {
-          ids = res.items.map((item: any) => item.mcp_id);
           dataList = res.items;
         }
-        setInstalledIds(ids);
-
-        const customMcpList = dataList.filter((item: any) => item.mcp_id === 0);
-        setCustomMcpList(customMcpList);
+        setUserMcpList(dataList);
       })
       .catch((error) => {
         console.error('Error fetching installed MCPs:', error);
-        setInstalledIds([]);
-        setCustomMcpList([]);
+        setUserMcpList([]);
       });
   }, []);
 
-  // only surface installed MCPs from the market list
-  useEffect(() => {
-    // Add defensive check and fix logic: should filter when installedIds has items
-    if (Array.isArray(allMcpList) && installedIds.length > 0) {
-      const filtered = allMcpList.filter((item) =>
-        installedIds.includes(item.id)
-      );
-      setMcpList(filtered);
-    } else if (Array.isArray(allMcpList)) {
-      // If no installed IDs, show empty list instead of all
-      setMcpList([]);
-    }
-  }, [allMcpList, installedIds]);
-
   // public save env/config logic
   const saveEnvAndConfig = async (
     provider: string,
@@ -634,11 +572,16 @@ const ToolSelect = forwardRef<
       }
       return;
     }
-    setInstalling((prev) => ({ ...prev, [id]: true }));
     try {
       await proxyFetchPost('/api/v1/mcp/install?mcp_id=' + id);
-      setInstalled((prev) => ({ ...prev, [id]: true }));
-      const installedMcp = mcpList.find((mcp) => mcp.id === id);
+      const listRes = await proxyFetchGet('/api/v1/mcps', {
+        page: 1,
+        size: 200,
+        keyword: '',
+      });
+      const items =
+        listRes?.items && Array.isArray(listRes.items) ? listRes.items : [];
+      const installedMcp = items.find((mcp: McpItem) => mcp.id === id);
       if (installedMcp?.install_command) {
         const installCmd = { ...installedMcp.install_command };
         if (envValue) {
@@ -650,14 +593,11 @@ const ToolSelect = forwardRef<
         }
         await mcpInstall(installedMcp.key, installCmd);
       }
-      // after install successfully, automatically add to selected list
       if (installedMcp) {
         addOption(installedMcp);
       }
     } catch (e) {
       console.error('Failed to install MCP:', e);
-    } finally {
-      setInstalling((prev) => ({ ...prev, [id]: false }));
     }
   };
 
@@ -666,57 +606,81 @@ const ToolSelect = forwardRef<
     installMcp,
   }));
 
-  const checkEnv = (id: number) => {
-    const mcp = mcpList.find((mcp) => mcp.id === id);
-    if (mcp && Object.keys(mcp?.install_command?.env || {}).length > 0) {
-      if (onShowEnvConfig) {
-        onShowEnvConfig(mcp);
-      }
-    } else {
-      installMcp(id);
-    }
-  };
-
-  const removeOption = (item: McpItem) => {
-    const currentSelected = initialSelectedTools || [];
-    const newSelected = currentSelected.filter((i) => i.id !== item.id);
-    onSelectedToolsChange?.(newSelected);
-  };
-
-  // tool functions
-  const getCategoryIcon = (categoryName?: string) => {
-    if (!categoryName) return <Store className="h-4 w-4 text-icon-primary" />;
+  const removeOption = useCallback(
+    (item: McpItem) => {
+      const currentSelected = initialSelectedTools || [];
+      const newSelected = currentSelected.filter((i) => i.id !== item.id);
+      onSelectedToolsChange?.(newSelected);
+    },
+    [initialSelectedTools, onSelectedToolsChange]
+  );
 
-    const normalizedName = categoryName.toLowerCase();
-    const iconKey = categoryIconMap[normalizedName];
-    const iconUrl = iconKey ? svgIcons[iconKey] : undefined;
+  const buildLocalToolFromIntegration = useCallback(
+    (item: IntegrationItem): McpItem => {
+      const normalizedToolkit =
+        item.name === 'Notion' ? 'notion_mcp_toolkit' : item.toolkit;
+      return {
+        id: 0,
+        key: item.key,
+        name: item.name,
+        description: typeof item.desc === 'string' ? item.desc : '',
+        toolkit: normalizedToolkit,
+        isLocal: true,
+      };
+    },
+    []
+  );
 
-    return iconUrl ? (
-      <img src={iconUrl} alt={categoryName} className="h-4 w-4" />
-    ) : (
-      <Store className="h-4 w-4 text-icon-primary" />
-    );
-  };
+  const isIntegrationInAgentSelection = useCallback(
+    (item: IntegrationItem) =>
+      !!(initialSelectedTools || []).find(
+        (s) => s.isLocal && s.key === item.key
+      ),
+    [initialSelectedTools]
+  );
 
-  const getGithubRepoName = (homePage?: string) => {
-    if (!homePage || !homePage.startsWith('https://github.com/')) return null;
-    const parts = homePage.split('/');
-    return parts.length > 4 ? parts[4] : homePage;
-  };
+  const handleToggleIntegrationForAgent = useCallback(
+    (item: IntegrationItem, selected: boolean) => {
+      if (selected) {
+        addOption(buildLocalToolFromIntegration(item), true);
+      } else {
+        const found = (initialSelectedTools || []).find(
+          (s) => s.isLocal && s.key === item.key
+        );
+        if (found) removeOption(found);
+      }
+    },
+    [
+      addOption,
+      buildLocalToolFromIntegration,
+      initialSelectedTools,
+      removeOption,
+    ]
+  );
 
-  const getInstallButtonText = (itemId: number) => {
-    if (installedIds.includes(itemId)) return t('layout.installed');
-    if (installing[itemId]) return t('layout.installing');
-    if (installed[itemId]) return t('layout.installed');
-    return t('layout.install');
-  };
+  const handleToggleUserMcp = useCallback(
+    (row: any, selected: boolean) => {
+      if (selected) {
+        addOption({
+          id: row.id,
+          key: row.mcp_key || String(row.id),
+          name: row.mcp_name || row.mcp_key,
+          description: String(row.mcp_desc || ''),
+          mcp_name: row.mcp_name,
+        } as McpItem);
+      } else {
+        const found = (initialSelectedTools || []).find((i) => i.id === row.id);
+        if (found) removeOption(found);
+      }
+    },
+    [addOption, initialSelectedTools, removeOption]
+  );
 
   // Effects
   useEffect(() => {
-    fetchData();
     fetchIntegrationsData();
     fetchInstalledMcps();
-  }, [fetchData, fetchIntegrationsData, fetchInstalledMcps]);
+  }, [fetchIntegrationsData, fetchInstalledMcps]);
 
   useEffect(() => {
     if (debounceTimerRef.current) {
@@ -724,7 +688,6 @@ const ToolSelect = forwardRef<
     }
 
     debounceTimerRef.current = setTimeout(() => {
-      fetchData(keyword);
       fetchIntegrationsData(keyword);
     }, 500);
 
@@ -733,23 +696,56 @@ const ToolSelect = forwardRef<
         clearTimeout(debounceTimerRef.current);
       }
     };
-  }, [keyword, fetchData, fetchIntegrationsData]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
+  }, [keyword, fetchIntegrationsData]);
+
+  const webConnectedItems = useMemo(() => {
+    const kw = keyword.trim().toLowerCase();
+    return integrations
+      .filter((i: IntegrationItem) => webInstalled[i.key])
+      .filter((i: IntegrationItem) => {
+        if (!kw) return true;
+        const descStr = typeof i.desc === 'string' ? i.desc.toLowerCase() : '';
+        return (
+          (i.key || '').toLowerCase().includes(kw) ||
+          (i.name || '').toLowerCase().includes(kw) ||
+          descStr.includes(kw)
+        );
+      });
+  }, [integrations, webInstalled, keyword]);
+
+  const webNotConnectedItems = useMemo(() => {
+    const kw = keyword.trim().toLowerCase();
+    return integrations
+      .filter((i: IntegrationItem) => !webInstalled[i.key])
+      .filter((i: IntegrationItem) => {
+        if (!kw) return true;
+        const descStr = typeof i.desc === 'string' ? i.desc.toLowerCase() : '';
+        return (
+          (i.key || '').toLowerCase().includes(kw) ||
+          (i.name || '').toLowerCase().includes(kw) ||
+          descStr.includes(kw)
+        );
+      });
+  }, [integrations, webInstalled, keyword]);
+
+  const ownPicks = useMemo(() => {
+    const kw = keyword.trim().toLowerCase();
+    return userMcpList.filter((opt) => {
+      if (!kw) return true;
+      const name = String(opt.mcp_name || '').toLowerCase();
+      const desc = String(opt.mcp_desc || '').toLowerCase();
+      const key = String(opt.mcp_key || '').toLowerCase();
+      return name.includes(kw) || desc.includes(kw) || key.includes(kw);
+    });
+  }, [userMcpList, keyword]);
+
+  const listHasItems =
+    webConnectedItems.length > 0 ||
+    webNotConnectedItems.length > 0 ||
+    ownPicks.length > 0;
+
+  const showSearchPlaceholder =
+    keyword.length === 0 && (initialSelectedTools?.length ?? 0) === 0;
 
   // render functions
   const renderSelectedItems = () => (
@@ -757,12 +753,14 @@ 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"
+          variant="secondary"
+          size="sm"
+          className="flex w-auto flex-shrink-0"
         >
           {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 flex items-center justify-center bg-transparent">
             <X
-              className="h-4 w-4 cursor-pointer text-button-secondary-icon-disabled"
+              className="h-4 w-4 text-ds-text-neutral-default-disabled hover:text-ds-text-neutral-default-default shrink-0 cursor-pointer"
               onClick={() => removeOption(item)}
             />
           </div>
@@ -771,160 +769,132 @@ const ToolSelect = forwardRef<
     </>
   );
 
-  const renderMcpItem = (item: McpItem) => (
-    <div
-      key={item.id}
-      onClick={() => {
-        // check if already installed
-        const isAlreadyInstalled =
-          installedIds.includes(item.id) || installed[item.id];
-
-        if (isAlreadyInstalled) {
-          // if already installed, add to selected list directly
-          addOption(item);
-          setKeyword('');
-        } else {
-          // if not installed, first check environment configuration, then install and add to selected list
-          checkEnv(item.id);
-        }
-      }}
-      className="flex cursor-pointer justify-between px-3 py-2 hover:bg-surface-hover-subtle"
-    >
-      <div className="flex items-center gap-1">
-        {getCategoryIcon(item.category?.name)}
-        <div className="line-clamp-1 overflow-hidden text-ellipsis break-words text-sm font-bold leading-17 text-text-action">
-          {item.name}
-        </div>
-        <TooltipSimple content={item.description}>
-          <CircleAlert
-            className="h-4 w-4 cursor-pointer text-icon-primary"
-            onClick={(e) => e.stopPropagation()}
-          />
-        </TooltipSimple>
-      </div>
-      <div className="flex items-center gap-1">
-        {getGithubRepoName(item.home_page) && (
-          <div className="flex items-center">
-            <img
-              src={githubIcon}
-              alt="github"
-              style={{
-                width: 14.7,
-                height: 14.7,
-                marginRight: 4,
-                display: 'inline-block',
-                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">
-              {getGithubRepoName(item.home_page)}
-            </span>
-          </div>
-        )}
-        <Button
-          variant="primary"
-          size="sm"
-          disabled={
-            installed[item.id] ||
-            installing[item.id] ||
-            installedIds.includes(item.id)
-          }
-          onClick={(e) => {
-            e.stopPropagation();
-            checkEnv(item.id);
+  const renderCustomMcpItem = (item: any) => {
+    const checked = !!(initialSelectedTools || []).find(
+      (i) => i.id === item.id
+    );
+    return (
+      <div
+        key={item.id}
+        className="gap-2 rounded-lg bg-ds-bg-neutral-subtle-default py-2 px-3 last:mb-1 min-h-0 flex w-auto items-center"
+      >
+        <Checkbox
+          checked={checked}
+          onCheckedChange={(c) => {
+            if (c === 'indeterminate') return;
+            handleToggleUserMcp(item, c === true);
           }}
-        >
-          {getInstallButtonText(item.id)}
-        </Button>
+          onClick={(e) => e.stopPropagation()}
+          aria-label={String(item.mcp_name || item.mcp_key || '')}
+        />
+        <span className="min-w-0 text-sm font-bold leading-5 text-ds-text-neutral-default-default sm:text-base line-clamp-2 flex-1 break-words">
+          {capitalizeFirstLetter(item.mcp_name || '')}
+        </span>
       </div>
-    </div>
-  );
+    );
+  };
 
-  const renderCustomMcpItem = (item: any) => (
-    <div
-      key={item.id}
-      onClick={() => {
-        addOption(item);
-        setKeyword('');
-      }}
-      className="flex cursor-pointer justify-between px-3 py-2 hover:bg-surface-hover-subtle"
-    >
-      <div className="flex items-center gap-1">
-        {/* {getCategoryIcon(item.category?.name)} */}
-        <div className="line-clamp-1 overflow-hidden text-ellipsis break-words text-sm font-bold leading-17 text-text-action">
-          {item.mcp_name}
-        </div>
-        <TooltipSimple content={item.mcp_desc}>
-          <CircleAlert
-            className="h-4 w-4 cursor-pointer text-icon-primary"
-            onClick={(e) => e.stopPropagation()}
-          />
-        </TooltipSimple>
-      </div>
-      <div className="flex items-center gap-1">
-        <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}
-        >
-          {t('layout.installed')}
-        </Button>
-      </div>
-    </div>
-  );
   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="min-w-0 w-full" ref={containerRef}>
+      <div className="gap-1.5 min-w-0 flex w-full flex-col">
+        <div className="gap-1 text-sm font-bold leading-normal text-ds-text-neutral-default-default min-h-5 flex shrink-0 items-center">
           {t('workforce.agent-tool')}
           <TooltipSimple content={t('workforce.agent-tool-tooltip')}>
-            <CircleAlert size={16} className="text-icon-primary" />
+            <CircleAlert
+              size={16}
+              className="text-ds-icon-neutral-default-default shrink-0"
+            />
           </TooltipSimple>
         </div>
         <div
-          onClick={() => {
-            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"
+          onMouseDown={() => inputRef.current?.focus()}
+          className={cn(
+            'focus-within:ring-ds-border-brand-default-default/35 gap-1.5 rounded-lg border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default min-w-0 px-2 py-1.5 flex max-h-[120px] min-h-[40px] w-full flex-wrap content-center items-center justify-start border border-solid focus-within:ring-2'
+          )}
         >
           {renderSelectedItems()}
           <Textarea
             variant="none"
             value={keyword}
             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"
+            placeholder={
+              showSearchPlaceholder ? t('setting.search-mcp') : undefined
+            }
+            aria-label={t('workforce.agent-tool')}
+            aria-controls="agent-tool-picker-panel"
+            className="p-0 text-sm leading-5 text-ds-text-neutral-default-default placeholder:text-ds-text-neutral-muted-default !min-h-[20px] min-w-[8ch] flex-1 resize-none border-none !shadow-none !ring-0 !ring-offset-0 focus-visible:ring-0"
+            rows={1}
           />
         </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="max-h-[192px] overflow-y-auto">
-            <IntegrationList
-              variant="select"
-              onShowEnvConfig={onShowEnvConfig}
-              addOption={addOption}
-              items={integrations}
-              translationNamespace="layout"
-            />
-            {mcpList
-              .filter(
-                (opt) =>
-                  !(initialSelectedTools || []).find((i) => i.id === opt.id)
-              )
-              .map(renderMcpItem)}
-            {customMcpList
-              .filter(
-                (opt) =>
-                  !(initialSelectedTools || []).find((i) => i.id === opt.id)
-              )
-              .map(renderCustomMcpItem)}
+        <div
+          id="agent-tool-picker-panel"
+          role="region"
+          aria-label={t('workforce.agent-tool')}
+          className="min-w-0 rounded-lg border-ds-border-neutral-muted-default bg-ds-bg-neutral-default-default w-full overflow-hidden border border-solid"
+        >
+          <div className="scrollbar-always-visible gap-1.5 px-2 py-2 min-h-0 flex h-[260px] flex-col overflow-x-hidden overflow-y-auto">
+            {listHasItems ? (
+              <div
+                className="text-ds-text-neutral-default-default min-w-0 gap-3 flex flex-col"
+                data-mcp-list="unified"
+              >
+                {webConnectedItems.length > 0 && (
+                  <div>
+                    <div className="text-body-sm font-medium text-ds-text-neutral-subtle-default px-2 py-1">
+                      {t('setting.mcp-sidebar-web')}
+                    </div>
+                    <IntegrationList
+                      className="!space-y-1.5"
+                      variant="select"
+                      onShowEnvConfig={onShowEnvConfig}
+                      addOption={addOption}
+                      items={webConnectedItems}
+                      translationNamespace="layout"
+                      selectWithCheckbox
+                      isIntegrationSelected={isIntegrationInAgentSelection}
+                      onToggleIntegration={handleToggleIntegrationForAgent}
+                    />
+                  </div>
+                )}
+                {ownPicks.length > 0 && (
+                  <div>
+                    <div className="text-body-sm font-medium text-ds-text-neutral-subtle-default px-2 py-1 mb-1">
+                      {t('setting.your-own-mcps')}
+                    </div>
+                    <div className="min-w-0 gap-2 flex flex-col">
+                      {ownPicks.map(renderCustomMcpItem)}
+                    </div>
+                  </div>
+                )}
+                {webNotConnectedItems.length > 0 && (
+                  <div>
+                    <div className="text-body-sm font-medium text-ds-text-neutral-subtle-default px-2 py-1">
+                      {t('setting.mcp-sidebar-not-connected')}
+                    </div>
+                    <IntegrationList
+                      className="!space-y-1.5"
+                      variant="select"
+                      onShowEnvConfig={onShowEnvConfig}
+                      addOption={addOption}
+                      items={webNotConnectedItems}
+                      translationNamespace="layout"
+                      selectWithCheckbox
+                      isIntegrationSelected={isIntegrationInAgentSelection}
+                      onToggleIntegration={handleToggleIntegrationForAgent}
+                    />
+                  </div>
+                )}
+              </div>
+            ) : (
+              <p className="text-body-md text-ds-text-neutral-muted-default px-2 py-2 text-center break-words">
+                {t('dashboard.no-results')}
+              </p>
+            )}
           </div>
         </div>
-      )}
+      </div>
     </div>
   );
 });
diff --git a/src/components/AddWorker/index.tsx b/src/components/AddWorker/index.tsx
index 823b5a453..44646e65c 100644
--- a/src/components/AddWorker/index.tsx
+++ b/src/components/AddWorker/index.tsx
@@ -13,7 +13,7 @@
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
 import { mcpList as fetchMcpConfig } from '@/api/brain';
-import { fetchPost } from '@/api/http';
+import { fetchPost, proxyFetchGet } from '@/api/http';
 import githubIcon from '@/assets/github.svg';
 import { Button } from '@/components/ui/button';
 import {
@@ -32,12 +32,17 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
 import { INIT_PROVODERS } from '@/lib/llm';
+import {
+  getLocalPlatformName,
+  LOCAL_MODEL_OPTIONS,
+} from '@/pages/Agents/localModels';
 import { useAuthStore, useWorkerList } from '@/store/authStore';
-import { Bot, ChevronDown, ChevronUp, Edit, Eye, EyeOff } from 'lucide-react';
-import { useRef, useState } from 'react';
+import { Bot, Edit, Eye, EyeOff } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ToolSelect from './ToolSelect';
 
@@ -63,6 +68,108 @@ interface McpItem {
   mcp_name?: string;
 }
 
+type WorkerModelMode = 'eigent' | 'custom' | 'local';
+
+interface WorkerModelOption {
+  value: string;
+  label: string;
+  model_platform: string;
+  model_type: string;
+}
+
+const EIGENT_MODEL_OPTIONS: ReadonlyArray<WorkerModelOption> = [
+  {
+    value: 'gemini-3.1-pro-preview',
+    label: 'Gemini 3.1 Pro Preview',
+    model_platform: 'gemini',
+    model_type: 'gemini-3.1-pro-preview',
+  },
+  {
+    value: 'gemini-3-pro-preview',
+    label: 'Gemini 3 Pro Preview',
+    model_platform: 'gemini',
+    model_type: 'gemini-3-pro-preview',
+  },
+  {
+    value: 'gemini-3-flash-preview',
+    label: 'Gemini 3 Flash Preview',
+    model_platform: 'gemini',
+    model_type: 'gemini-3-flash-preview',
+  },
+  {
+    value: 'gpt-4.1-mini',
+    label: 'GPT-4.1 Mini',
+    model_platform: 'openai',
+    model_type: 'gpt-4.1-mini',
+  },
+  {
+    value: 'gpt-4.1',
+    label: 'GPT-4.1',
+    model_platform: 'openai',
+    model_type: 'gpt-4.1',
+  },
+  {
+    value: 'gpt-5',
+    label: 'GPT-5',
+    model_platform: 'openai',
+    model_type: 'gpt-5',
+  },
+  {
+    value: 'gpt-5.1',
+    label: 'GPT-5.1',
+    model_platform: 'openai',
+    model_type: 'gpt-5.1',
+  },
+  {
+    value: 'gpt-5.2',
+    label: 'GPT-5.2',
+    model_platform: 'openai',
+    model_type: 'gpt-5.2',
+  },
+  {
+    value: 'gpt-5.4',
+    label: 'GPT-5.4',
+    model_platform: 'openai',
+    model_type: 'gpt-5.4',
+  },
+  {
+    value: 'gpt-5-mini',
+    label: 'GPT-5 Mini',
+    model_platform: 'openai',
+    model_type: 'gpt-5-mini',
+  },
+  {
+    value: 'claude-haiku-4-5',
+    label: 'Claude Haiku 4.5',
+    model_platform: 'aws-bedrock-converse',
+    model_type: 'claude-haiku-4-5',
+  },
+  {
+    value: 'claude-sonnet-4-5',
+    label: 'Claude Sonnet 4.5',
+    model_platform: 'aws-bedrock-converse',
+    model_type: 'claude-sonnet-4-5',
+  },
+  {
+    value: 'claude-sonnet-4-6',
+    label: 'Claude Sonnet 4.6',
+    model_platform: 'aws-bedrock-converse',
+    model_type: 'claude-sonnet-4-6',
+  },
+  {
+    value: 'claude-opus-4-6',
+    label: 'Claude Opus 4.6',
+    model_platform: 'aws-bedrock-converse',
+    model_type: 'claude-opus-4-6',
+  },
+  {
+    value: 'minimax_m2_5',
+    label: 'Minimax M2.5',
+    model_platform: 'openai-compatible-model',
+    model_type: 'minimax_m2_5',
+  },
+];
+
 export function AddWorker({
   edit = false,
   workerInfo = null,
@@ -107,17 +214,19 @@ export function AddWorker({
 
   // Model configuration state
   const [showModelConfig, setShowModelConfig] = useState(false);
-  const [useCustomModel, setUseCustomModel] = useState(false);
-  const [customModelPlatform, setCustomModelPlatform] = useState('');
-  const [customModelType, setCustomModelType] = useState('');
-
-  if (!chatStore) {
-    return null;
-  }
-
-  const activeProjectId = projectStore.activeProjectId;
-  const activeTaskId = chatStore.activeTaskId;
-  const tasks = chatStore.tasks;
+  const [workerModelMode, setWorkerModelMode] =
+    useState<WorkerModelMode>('eigent');
+  const [workerModelName, setWorkerModelName] = useState('');
+  const [customModelOptions, setCustomModelOptions] = useState<
+    WorkerModelOption[]
+  >([]);
+  const [localModelOptions, setLocalModelOptions] = useState<
+    WorkerModelOption[]
+  >([]);
+
+  const activeProjectId = projectStore?.activeProjectId;
+  const activeTaskId = chatStore?.activeTaskId ?? null;
+  const tasks = chatStore?.tasks ?? {};
 
   // environment variable management
   const initializeEnvValues = (mcp: McpItem) => {
@@ -267,15 +376,104 @@ export function AddWorker({
     setSecretVisible({});
     setNameError('');
     setShowModelConfig(false);
-    setUseCustomModel(false);
-    setCustomModelPlatform('');
-    setCustomModelType('');
+    setWorkerModelMode('eigent');
+    setWorkerModelName('');
+    setCustomModelOptions([]);
+    setLocalModelOptions([]);
   };
 
+  const workerModelOptions = useMemo<
+    Record<WorkerModelMode, WorkerModelOption[]>
+  >(
+    () => ({
+      eigent: [...EIGENT_MODEL_OPTIONS],
+      custom: customModelOptions,
+      local: localModelOptions,
+    }),
+    [customModelOptions, localModelOptions]
+  );
+
+  const activeWorkerModelOptions = workerModelOptions[workerModelMode];
+
+  useEffect(() => {
+    if (!showModelConfig) return;
+    const options = activeWorkerModelOptions;
+    if (options.length === 0) {
+      setWorkerModelName('');
+      return;
+    }
+    if (!options.some((opt) => opt.value === workerModelName)) {
+      setWorkerModelName(options[0].value);
+    }
+  }, [activeWorkerModelOptions, showModelConfig, workerModelName]);
+
+  useEffect(() => {
+    if (!showModelConfig) return;
+    (async () => {
+      try {
+        const res = await proxyFetchGet('/api/v1/providers');
+        const providerList = Array.isArray(res) ? res : res?.items || [];
+
+        const customProviderIds = new Set(
+          INIT_PROVODERS.filter((p) => p.id !== 'local').map((p) => p.id)
+        );
+        const localProviderIds = new Set(LOCAL_MODEL_OPTIONS.map((m) => m.id));
+
+        const nextCustomOptions: WorkerModelOption[] = providerList
+          .filter((provider: any) =>
+            customProviderIds.has(provider.provider_name)
+          )
+          .map((provider: any) => {
+            const modelType = String(provider.model_type || '');
+            const providerName = String(provider.provider_name || '');
+            return {
+              value: `${providerName}::${modelType}`,
+              label: modelType
+                ? `${providerName} (${modelType})`
+                : providerName,
+              model_platform: providerName,
+              model_type: modelType,
+            };
+          });
+
+        const nextLocalOptions: WorkerModelOption[] = providerList
+          .filter((provider: any) =>
+            localProviderIds.has(provider.provider_name)
+          )
+          .map((provider: any) => {
+            const config = provider.encrypted_config || {};
+            const modelPlatform = String(
+              config.model_platform || provider.provider_name || ''
+            );
+            const modelType = String(
+              config.model_type || provider.model_type || ''
+            );
+            const platformName = getLocalPlatformName(modelPlatform);
+            return {
+              value: `${modelPlatform}::${modelType}`,
+              label: modelType
+                ? `${platformName} (${modelType})`
+                : platformName,
+              model_platform: modelPlatform,
+              model_type: modelType,
+            };
+          });
+
+        setCustomModelOptions(nextCustomOptions);
+        setLocalModelOptions(nextLocalOptions);
+      } catch (error) {
+        console.error('Error fetching model providers for Add Worker:', error);
+        setCustomModelOptions([]);
+        setLocalModelOptions([]);
+      }
+    })();
+  }, [showModelConfig]);
+
   // tool function
   const getCategoryIcon = (categoryName?: string) => {
-    if (!categoryName) return <Bot className="h-10 w-10 text-icon-primary" />;
-    return <Bot className="h-10 w-10 text-icon-primary" />;
+    if (!categoryName)
+      return <Bot className="h-10 w-10 text-ds-icon-neutral-default-default" />;
+    return <Bot className="h-10 w-10 text-ds-icon-neutral-default-default" />;
   };
 
   const getGithubRepoName = (homePage?: string) => {
@@ -377,12 +575,15 @@ export function AddWorker({
       };
       setWorkerList([...workerList, worker]);
     } else {
-      // Build custom model config if custom model is enabled
+      // Add-worker custom model config is applied to this agent only.
+      const selectedModelOption = workerModelOptions[workerModelMode].find(
+        (opt) => opt.value === workerModelName
+      );
       const customModelConfig =
-        useCustomModel && customModelPlatform
+        showModelConfig && selectedModelOption
           ? {
-              model_platform: customModelPlatform,
-              model_type: customModelType || undefined,
+              model_platform: selectedModelOption.model_platform,
+              model_type: selectedModelOption.model_type || undefined,
             }
           : undefined;
 
@@ -445,8 +646,8 @@ export function AddWorker({
           )}
         </DialogTrigger>
         <DialogContent
-          size="sm"
-          className="gap-0 p-0"
+          size="md"
+          className="gap-0 p-0 min-h-[60vh]"
           onInteractOutside={(e: any) => {
             if (isValidating) e.preventDefault();
           }}
@@ -472,14 +673,14 @@ 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 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">
+                    <div className="text-base font-bold leading-9 text-ds-text-neutral-default-default">
                       {activeMcp?.name}
                     </div>
-                    <div className="text-sm font-bold leading-normal text-text-body">
+                    <div className="text-sm font-bold leading-normal text-ds-text-neutral-default-default">
                       {getGithubRepoName(activeMcp?.home_page) && (
                         <div className="flex items-center">
                           <img
@@ -493,7 +694,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>
@@ -501,7 +702,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}>
@@ -524,12 +725,12 @@ export function AddWorker({
                               secretVisible[key] ? (
                                 <EyeOff
                                   size={16}
-                                  className="text-button-transparent-icon-disabled"
+                                  className="text-ds-text-neutral-muted-disabled"
                                 />
                               ) : (
                                 <Eye
                                   size={16}
-                                  className="text-button-transparent-icon-disabled"
+                                  className="text-ds-text-neutral-muted-disabled"
                                 />
                               )
                             ) : undefined
@@ -546,7 +747,7 @@ export function AddWorker({
                 </div>
               </DialogContentSection>
               <DialogFooter
-                className="!rounded-b-xl bg-white-100% p-md"
+                className="!rounded-b-xl p-md"
                 showCancelButton={true}
                 showConfirmButton={true}
                 cancelButtonText={t('workforce.cancel')}
@@ -571,11 +772,14 @@ 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">
-                      <Bot size={32} className="text-icon-primary" />
+              <DialogContentSection className="gap-3 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-ds-icon-neutral-default-default"
+                      />
                     </div>
                     <Input
                       size="sm"
@@ -611,83 +815,98 @@ export function AddWorker({
                 />
 
                 {/* Model Configuration Section */}
-                <div className="mt-2 flex flex-col gap-2">
-                  <button
-                    type="button"
-                    className="flex items-center gap-1 text-sm text-text-body hover:text-text-action"
-                    onClick={() => setShowModelConfig(!showModelConfig)}
-                  >
-                    {showModelConfig ? (
-                      <ChevronUp size={16} />
-                    ) : (
-                      <ChevronDown size={16} />
-                    )}
-                    {t('workforce.advanced-model-config')}
-                  </button>
+                <div className="mt-2 gap-2 flex flex-col">
+                  <div className="gap-3 flex items-center justify-start">
+                    <span className="text-body-sm font-bold text-ds-text-neutral-default-default">
+                      {t('workforce.use-custom-model')}
+                    </span>
+                    <Switch
+                      checked={showModelConfig}
+                      onCheckedChange={(checked) => {
+                        setShowModelConfig(checked);
+                        if (!checked) {
+                          setWorkerModelName('');
+                        }
+                      }}
+                      aria-label={t('workforce.use-custom-model')}
+                      className="border-ds-border-neutral-default-default border-[0.5px] border-solid"
+                    />
+                  </div>
 
                   {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">
-                        <input
-                          type="checkbox"
-                          checked={useCustomModel}
-                          onChange={(e) => setUseCustomModel(e.target.checked)}
-                          className="rounded border-border-subtle-strong"
-                        />
-                        {t('workforce.use-custom-model')}
-                      </label>
-
-                      {useCustomModel && (
-                        <>
-                          <div className="flex flex-col gap-1">
-                            <label className="text-xs text-text-body">
-                              {t('workforce.model-platform')}
-                            </label>
-                            <Select
-                              value={customModelPlatform}
-                              onValueChange={setCustomModelPlatform}
-                            >
-                              <SelectTrigger className="w-full">
-                                <SelectValue
-                                  placeholder={t('workforce.select-platform')}
-                                />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {INIT_PROVODERS.map((provider) => (
-                                  <SelectItem
-                                    key={provider.id}
-                                    value={provider.id}
-                                  >
-                                    {provider.name}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                          </div>
-
-                          <div className="flex flex-col gap-1">
-                            <label className="text-xs text-text-body">
-                              {t('workforce.model-type')}
-                            </label>
-                            <Input
-                              size="sm"
-                              placeholder={t(
-                                'workforce.model-type-placeholder'
-                              )}
-                              value={customModelType}
-                              onChange={(e) =>
-                                setCustomModelType(e.target.value)
-                              }
+                    <div className="gap-3 rounded-lg px-3 py-2 bg-ds-bg-neutral-muted-default flex flex-row">
+                      <div className="gap-1 flex w-full flex-1 flex-col">
+                        <label className="text-body-sm font-bold text-ds-text-neutral-default-default">
+                          {t('workforce.model-platform')}
+                        </label>
+                        <Select
+                          value={workerModelMode}
+                          onValueChange={(value) =>
+                            setWorkerModelMode(value as WorkerModelMode)
+                          }
+                        >
+                          <SelectTrigger
+                            className="w-full"
+                            wrapperClassName="w-full min-w-0"
+                          >
+                            <SelectValue
+                              placeholder={t('workforce.select-platform')}
                             />
-                          </div>
-                        </>
-                      )}
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="eigent">
+                              {t('setting.eigent-cloud')}
+                            </SelectItem>
+                            <SelectItem value="custom">
+                              {t('setting.custom-model')}
+                            </SelectItem>
+                            <SelectItem value="local">
+                              {t('setting.local-model')}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+
+                      <div className="gap-1 flex w-full flex-1 flex-col">
+                        <label className="text-body-sm font-bold text-ds-text-neutral-default-default">
+                          {t('workforce.model-type')}
+                        </label>
+                        <Select
+                          value={workerModelName}
+                          onValueChange={setWorkerModelName}
+                        >
+                          <SelectTrigger
+                            className="w-full"
+                            wrapperClassName="w-full min-w-0"
+                          >
+                            <SelectValue
+                              placeholder={t('setting.select-default-model')}
+                            />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {activeWorkerModelOptions.length > 0 ? (
+                              activeWorkerModelOptions.map((option) => (
+                                <SelectItem
+                                  key={option.value}
+                                  value={option.value}
+                                >
+                                  {option.label}
+                                </SelectItem>
+                              ))
+                            ) : (
+                              <SelectItem value="__empty__" disabled>
+                                {t('layout.no-results')}
+                              </SelectItem>
+                            )}
+                          </SelectContent>
+                        </Select>
+                      </div>
                     </div>
                   )}
                 </div>
               </DialogContentSection>
               <DialogFooter
-                className="!rounded-b-xl bg-white-100% p-md"
+                className="!rounded-b-xl p-md bg-ds-bg-neutral-subtle-default"
                 showCancelButton={true}
                 showConfirmButton={true}
                 cancelButtonText={t('workforce.cancel')}
diff --git a/src/components/Background/DashedLinesBackground.tsx b/src/components/Background/DashedLinesBackground.tsx
new file mode 100644
index 000000000..f7eb5c2ef
--- /dev/null
+++ b/src/components/Background/DashedLinesBackground.tsx
@@ -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. =========
+
+import { useId } from 'react';
+
+const LINE_SPACING = 28;
+/** Tile width: dash period 12px → 48px fits four repeats (between soft dots and full grid). */
+const DASH_TILE = 48;
+
+/** Horizontal dashed lines — stronger than dotted guides, no verticals (unlike grid). */
+export default function DashedLinesBackground() {
+  const patternId = `${useId().replace(/:/g, '')}-dashed-ruled`;
+
+  return (
+    <svg
+      className="inset-0 pointer-events-none absolute z-0 h-full w-full"
+      aria-hidden
+    >
+      <defs>
+        <pattern
+          id={patternId}
+          width={DASH_TILE}
+          height={LINE_SPACING}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1="0"
+            y1={LINE_SPACING - 0.5}
+            x2={DASH_TILE}
+            y2={LINE_SPACING - 0.5}
+            className="stroke-ds-border-neutral-default-default"
+            strokeWidth={1}
+            strokeDasharray="8 4"
+            strokeLinecap="butt"
+            opacity={0.33}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+}
diff --git a/src/components/Background/DotPatternBackground.tsx b/src/components/Background/DotPatternBackground.tsx
new file mode 100644
index 000000000..62fa3a032
--- /dev/null
+++ b/src/components/Background/DotPatternBackground.tsx
@@ -0,0 +1,47 @@
+// ========= 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 { useId } from 'react';
+
+const PATTERN_STEP = 20;
+
+/** Dot grid overlay derived from theme background tokens, for use inside a `relative` container. */
+export default function DotPatternBackground() {
+  const patternId = `${useId().replace(/:/g, '')}-dot`;
+
+  return (
+    <svg
+      className="inset-0 pointer-events-none absolute z-0 h-full w-full"
+      aria-hidden
+    >
+      <defs>
+        <pattern
+          id={patternId}
+          width={PATTERN_STEP}
+          height={PATTERN_STEP}
+          patternUnits="userSpaceOnUse"
+        >
+          <circle
+            className="fill-ds-bg-neutral-muted-default"
+            cx={PATTERN_STEP / 2}
+            cy={PATTERN_STEP / 2}
+            r={1.25}
+            opacity={0.6}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+}
diff --git a/src/components/Background/DottedLinesBackground.tsx b/src/components/Background/DottedLinesBackground.tsx
new file mode 100644
index 000000000..956e17b6d
--- /dev/null
+++ b/src/components/Background/DottedLinesBackground.tsx
@@ -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. =========
+
+import { useId } from 'react';
+
+const LINE_SPACING = 28;
+/** Tile width so dash pattern repeats seamlessly when tiled. */
+const DASH_TILE = 32;
+
+/** Horizontal dotted guide lines, for use inside a `relative` container. */
+export default function DottedLinesBackground() {
+  const patternId = `${useId().replace(/:/g, '')}-dotted-ruled`;
+
+  return (
+    <svg
+      className="inset-0 pointer-events-none absolute z-0 h-full w-full"
+      aria-hidden
+    >
+      <defs>
+        <pattern
+          id={patternId}
+          width={DASH_TILE}
+          height={LINE_SPACING}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1="0"
+            y1={LINE_SPACING - 0.5}
+            x2={DASH_TILE}
+            y2={LINE_SPACING - 0.5}
+            className="stroke-ds-border-neutral-default-default"
+            strokeWidth={1}
+            strokeDasharray="2 6"
+            strokeLinecap="round"
+            opacity={0.4}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+}
diff --git a/src/components/Background/GridPatternBackground.tsx b/src/components/Background/GridPatternBackground.tsx
new file mode 100644
index 000000000..231ad22d6
--- /dev/null
+++ b/src/components/Background/GridPatternBackground.tsx
@@ -0,0 +1,47 @@
+// ========= 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 { useId } from 'react';
+
+const PATTERN_STEP = 24;
+
+/** Grid overlay derived from theme background tokens, for use inside a `relative` container. */
+export default function GridPatternBackground() {
+  const patternId = `${useId().replace(/:/g, '')}-grid`;
+
+  return (
+    <svg
+      className="inset-0 pointer-events-none absolute z-0 h-full w-full"
+      aria-hidden
+    >
+      <defs>
+        <pattern
+          id={patternId}
+          width={PATTERN_STEP}
+          height={PATTERN_STEP}
+          patternUnits="userSpaceOnUse"
+        >
+          <path
+            className="stroke-ds-border-neutral-default-default"
+            d={`M ${PATTERN_STEP} 0 L 0 0 0 ${PATTERN_STEP}`}
+            fill="none"
+            strokeWidth={1}
+            opacity={0.3}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+}
diff --git a/src/components/Background/RuledLinesBackground.tsx b/src/components/Background/RuledLinesBackground.tsx
new file mode 100644
index 000000000..4b98a0867
--- /dev/null
+++ b/src/components/Background/RuledLinesBackground.tsx
@@ -0,0 +1,49 @@
+// ========= 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 { useId } from 'react';
+
+const LINE_SPACING = 28;
+
+/** Horizontal ruled lines (notebook paper), for use inside a `relative` container. */
+export default function RuledLinesBackground() {
+  const patternId = `${useId().replace(/:/g, '')}-ruled`;
+
+  return (
+    <svg
+      className="inset-0 pointer-events-none absolute z-0 h-full w-full"
+      aria-hidden
+    >
+      <defs>
+        <pattern
+          id={patternId}
+          width="1"
+          height={LINE_SPACING}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1="0"
+            y1={LINE_SPACING - 0.5}
+            x2="1"
+            y2={LINE_SPACING - 0.5}
+            className="stroke-ds-border-neutral-default-default"
+            strokeWidth={1}
+            opacity={0.35}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+}
diff --git a/src/components/Background/index.ts b/src/components/Background/index.ts
new file mode 100644
index 000000000..c523b632d
--- /dev/null
+++ b/src/components/Background/index.ts
@@ -0,0 +1,19 @@
+// ========= 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. =========
+
+export { default as DashedLinesBackground } from './DashedLinesBackground';
+export { default as DotPatternBackground } from './DotPatternBackground';
+export { default as DottedLinesBackground } from './DottedLinesBackground';
+export { default as GridPatternBackground } from './GridPatternBackground';
+export { default as RuledLinesBackground } from './RuledLinesBackground';
diff --git a/src/components/BottomBar/index.tsx b/src/components/BottomBar/index.tsx
deleted file mode 100644
index a25efae35..000000000
--- a/src/components/BottomBar/index.tsx
+++ /dev/null
@@ -1,63 +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 useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
-import { useTranslation } from 'react-i18next';
-import { WorkSpaceMenu } from '../WorkspaceMenu';
-
-interface BottomBarProps {
-  onToggleChatBox?: () => void;
-  isChatBoxVisible?: boolean;
-}
-
-// Red dot notification indicator
-const RedDotIcon = () => (
-  <div className="h-2 w-2 shrink-0 rounded-full bg-red-500" />
-);
-
-function BottomBar({ onToggleChatBox, isChatBoxVisible }: BottomBarProps) {
-  const { t } = useTranslation();
-  const { chatStore } = useChatStoreAdapter();
-
-  // Check if there are new files
-  const nuwFileNum = chatStore?.activeTaskId
-    ? chatStore.tasks[chatStore.activeTaskId]?.nuwFileNum || 0
-    : 0;
-  const hasNewFiles = nuwFileNum > 0;
-
-  // Handle inbox click and reset notification
-  const handleInboxClick = () => {
-    if (chatStore?.activeTaskId) {
-      // Reset the new file counter when user views inbox
-      chatStore.setNuwFileNum(chatStore.activeTaskId, 0);
-      // Set active workspace to inbox
-      chatStore.setActiveWorkspace(chatStore.activeTaskId, 'inbox');
-    }
-  };
-
-  const activeWorkspace = chatStore?.activeTaskId
-    ? chatStore.tasks[chatStore.activeTaskId]?.activeWorkspace
-    : null;
-
-  return (
-    <div className="relative z-50 flex h-12 items-center justify-center pt-2">
-      <WorkSpaceMenu
-        onToggleChatBox={onToggleChatBox}
-        isChatBoxVisible={isChatBoxVisible}
-      />
-    </div>
-  );
-}
-
-export default BottomBar;
diff --git a/src/components/BrowserAgentWorkspace/index.tsx b/src/components/BrowserAgentWorkspace/index.tsx
index 3c704d584..b32270ec0 100644
--- a/src/components/BrowserAgentWorkspace/index.tsx
+++ b/src/components/BrowserAgentWorkspace/index.tsx
@@ -43,43 +43,51 @@ export default function BrowserAgentWorkspace() {
   const agentMap = {
     developer_agent: {
       name: 'Developer Agent',
-      icon: <CodeXml size={16} className="text-text-primary" />,
+      icon: (
+        <CodeXml size={16} className="text-ds-text-neutral-default-default" />
+      ),
       textColor: 'text-emerald-700',
-      bgColor: 'bg-bg-fill-coding-active',
-      shapeColor: 'bg-bg-fill-coding-default',
-      borderColor: 'border-bg-fill-coding-active',
+      bgColor: 'bg-ds-bg-terminal-default-default',
+      shapeColor: 'bg-ds-bg-terminal-subtle-default',
+      borderColor: 'border-ds-border-terminal-default-default',
       bgColorLight: 'bg-emerald-200',
     },
     browser_agent: {
       name: 'Browser Agent',
-      icon: <Globe size={16} className="text-text-primary" />,
+      icon: (
+        <Globe size={16} className="text-ds-text-neutral-default-default" />
+      ),
       textColor: 'text-blue-700',
-      bgColor: 'bg-bg-fill-browser-active',
-      shapeColor: 'bg-bg-fill-browser-default',
-      borderColor: 'border-bg-fill-browser-active',
+      bgColor: 'bg-ds-bg-browser-default-default',
+      shapeColor: 'bg-ds-bg-browser-subtle-default',
+      borderColor: 'border-ds-border-browser-default-default',
       bgColorLight: 'bg-blue-200',
     },
     document_agent: {
       name: 'Document Agent',
-      icon: <FileText size={16} className="text-text-primary" />,
+      icon: (
+        <FileText size={16} className="text-ds-text-neutral-default-default" />
+      ),
       textColor: 'text-yellow-700',
-      bgColor: 'bg-bg-fill-writing-active',
-      shapeColor: 'bg-bg-fill-writing-default',
-      borderColor: 'border-bg-fill-writing-active',
+      bgColor: 'bg-ds-bg-document-default-default',
+      shapeColor: 'bg-ds-bg-document-subtle-default',
+      borderColor: 'border-ds-border-document-default-default',
       bgColorLight: 'bg-yellow-200',
     },
     multi_modal_agent: {
       name: 'Multi Modal Agent',
-      icon: <Image size={16} className="text-text-primary" />,
+      icon: (
+        <Image size={16} className="text-ds-text-neutral-default-default" />
+      ),
       textColor: 'text-fuchsia-700',
-      bgColor: 'bg-bg-fill-multimodal-active',
-      shapeColor: 'bg-bg-fill-multimodal-default',
-      borderColor: 'border-bg-fill-multimodal-active',
+      bgColor: 'bg-ds-bg-neutral-default-default',
+      shapeColor: 'bg-ds-bg-neutral-subtle-default',
+      borderColor: 'border-ds-border-neutral-default-default',
       bgColorLight: 'bg-fuchsia-200',
     },
     social_media_agent: {
       name: 'Social Media Agent',
-      icon: <Bird size={16} className="text-text-primary" />,
+      icon: <Bird size={16} className="text-ds-text-neutral-default-default" />,
       textColor: 'text-purple-700',
       bgColor: 'bg-violet-700',
       shapeColor: 'bg-violet-300',
@@ -169,9 +177,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-ds-border-status-completed-default-default bg-ds-bg-neutral-strong-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-ds-border-neutral-strong-default p-1 rounded-full border border-solid bg-transparent">
           <Button
             onClick={() => {
               fetchPut(`/task/${projectStore.activeProjectId}/take-control`, {
@@ -194,13 +202,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="backdrop-blur-sm rounded-xl bg-ds-bg-neutral-default-default 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(
@@ -257,7 +266,7 @@ export default function BrowserAgentWorkspace() {
                 ).length || 0
               }
             />
-            {/* <div className="text-[10px] leading-17 font-medium text-text-tertiary">
+            {/* <div className="text-[10px] leading-17 font-medium text-ds-text-neutral-muted-default">
 							{
 								activeAgent?.tasks?.filter(
 									(task) => task.status && task.status !== "running"
@@ -280,14 +289,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-dialog-overlay-dark 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-[0.67]">
                   <Button
                     size="sm"
                     variant="primary"
@@ -307,7 +316,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)
@@ -316,7 +325,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)]'
@@ -326,7 +335,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
@@ -335,7 +344,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-dialog-overlay-dark inset-0 rounded-lg pointer-events-none absolute flex h-full w-full items-center justify-center opacity-0 transition-all group-hover:opacity-[0.67]"
                     >
                       <Button
                         size="sm"
@@ -354,9 +363,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-ds-border-neutral-strong-default bg-ds-bg-neutral-strong-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) {
@@ -380,7 +390,8 @@ export default function BrowserAgentWorkspace() {
               <ArrowDown size={16} />
             </Button>
             <Button
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               variant="ghost"
               onClick={() => {
                 if (scrollContainerRef.current) {
@@ -401,7 +412,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..4b20e222c 100644
--- a/src/components/ChatBox/BottomBox/BoxHeader.tsx
+++ b/src/components/ChatBox/BottomBox/BoxHeader.tsx
@@ -12,8 +12,9 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-import { AnimateIcon } from '@/components/animate-ui/icons/icon';
-import { Orbit } from '@/components/animate-ui/icons/orbit';
+import { UserMessageRichContent } from '@/components/ChatBox/MessageItem/UserMessageRichContent';
+import { AnimateIcon } from '@/components/ui/animate-ui/icons/icon';
+import { Orbit } from '@/components/ui/animate-ui/icons/orbit';
 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"
@@ -44,14 +45,14 @@ export const BoxHeaderSplitting = ({ className }: BoxHeaderSplittingProps) => {
           <AnimateIcon
             animate
             loop
-            className="h-4 w-4 items-center justify-center"
+            className="h-4 w-4 !text-ds-text-information-default-default items-center justify-center"
           >
-            <Orbit size={16} className="text-icon-information" />
+            <Orbit size={16} />
           </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-body-sm font-bold text-ds-text-information-default-default whitespace-nowrap">
             {t('chat.splitting-tasks')}
           </span>
         </div>
@@ -82,28 +83,33 @@ 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"
-          className="px-1 focus:ring-0 focus-visible:outline-none"
+          buttonContent="icon-only"
+          tone="neutral"
+          buttonRadius="full"
+          className="focus:ring-0 focus-visible:outline-none"
           onClick={onEdit}
         >
-          <ChevronLeft size={16} className="text-icon-primary" />
+          <ChevronLeft />
         </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/ChatInputModelDropdown.tsx b/src/components/ChatBox/BottomBox/ChatInputModelDropdown.tsx
new file mode 100644
index 000000000..707393fb5
--- /dev/null
+++ b/src/components/ChatBox/BottomBox/ChatInputModelDropdown.tsx
@@ -0,0 +1,645 @@
+// ========= 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 model picker for the chat input bar — same structure as Agents → Models.
+ * Configured models switch inline; unconfigured options open Agents → Models.
+ */
+
+import { proxyFetchGet } from '@/api/http';
+import folderIcon from '@/assets/Folder.svg';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  applyDefaultModelSelection,
+  DEFAULT_MODEL_CONFIGURE_PATH,
+  isDefaultModelConfigured,
+  type DefaultModelCategory,
+} from '@/lib/applyDefaultModelSelection';
+import { INIT_PROVODERS } from '@/lib/llm';
+import { cn } from '@/lib/utils';
+import {
+  getLocalPlatformName,
+  LOCAL_MODEL_OPTIONS,
+} from '@/pages/Agents/localModels';
+import {
+  getModelImage,
+  needsInvertModelImage,
+} from '@/shared/modelProviderImages';
+import { useAuthStore } from '@/store/authStore';
+import type { Provider } from '@/types';
+
+import {
+  Check,
+  ChevronDown,
+  HardDrive,
+  Key,
+  Layers,
+  Server,
+  Sparkles,
+} from 'lucide-react';
+import type { Dispatch, SetStateAction } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+const cloudModelOptions = [
+  { id: 'gemini-3.1-pro-preview', name: 'Gemini 3.1 Pro Preview' },
+  { id: 'gemini-3-pro-preview', name: 'Gemini 3 Pro Preview' },
+  { id: 'gemini-3-flash-preview', name: 'Gemini 3 Flash Preview' },
+  { id: 'gpt-4.1-mini', name: 'GPT-4.1 Mini' },
+  { id: 'gpt-4.1', name: 'GPT-4.1' },
+  { id: 'gpt-5', name: 'GPT-5' },
+  { id: 'gpt-5.1', name: 'GPT-5.1' },
+  { id: 'gpt-5.2', name: 'GPT-5.2' },
+  { id: 'gpt-5.4', name: 'GPT-5.4' },
+  { id: 'gpt-5-mini', name: 'GPT-5 Mini' },
+  { id: 'claude-haiku-4-5', name: 'Claude Haiku 4.5' },
+  { id: 'claude-sonnet-4-5', name: 'Claude Sonnet 4.5' },
+  { id: 'claude-sonnet-4-6', name: 'Claude Sonnet 4.6' },
+  { id: 'claude-opus-4-6', name: 'Claude Opus 4.6' },
+  { id: 'minimax_m2_5', name: 'Minimax M2.5' },
+] as const;
+
+export interface ChatInputModelDropdownProps {
+  disabled?: boolean;
+  /**
+   * When true, shows the current default model in the same shell as
+   * `WorkspaceSessionModeToggle` (readOnly) — no chevron, not interactive,
+   * no filled background (session input bar).
+   * Used for session chat input where the model is fixed for the session.
+   */
+  readOnly?: boolean;
+}
+
+const modelTriggerShellClass = cn(
+  'rounded-xl px-2 py-1 inline-flex max-w-[min(100%,320px)] shrink-0 items-center gap-1.5',
+  'bg-ds-bg-neutral-default-default text-ds-text-neutral-default-default'
+);
+
+export function ChatInputModelDropdown({
+  disabled,
+  readOnly = false,
+}: ChatInputModelDropdownProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const {
+    modelType,
+    cloud_model_type,
+    appearance,
+    setModelType,
+    setCloudModelType,
+  } = useAuthStore();
+
+  const [items] = useState<Provider[]>(
+    INIT_PROVODERS.filter((p) => p.id !== 'local')
+  );
+  const [form, setForm] = useState(() =>
+    INIT_PROVODERS.filter((p) => p.id !== 'local').map((p) => ({
+      apiKey: p.apiKey,
+      apiHost: p.apiHost,
+      is_valid: p.is_valid ?? false,
+      model_type: p.model_type ?? '',
+      externalConfig: p.externalConfig
+        ? p.externalConfig.map((ec) => ({ ...ec }))
+        : undefined,
+      provider_id: p.provider_id ?? undefined,
+      prefer: p.prefer ?? false,
+    }))
+  );
+  const [cloudPrefer, setCloudPrefer] = useState(false);
+  const [localPrefer, setLocalPrefer] = useState(false);
+  const [localPlatform, setLocalPlatform] = useState<string>('ollama');
+  const [localTypes, setLocalTypes] = useState<Record<string, string>>({});
+  const [localProviderIds, setLocalProviderIds] = useState<
+    Record<string, number | undefined>
+  >({});
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await proxyFetchGet('/api/v1/providers');
+        const providerList = Array.isArray(res) ? res : res.items || [];
+
+        setForm((f) =>
+          f.map((fi, idx) => {
+            const item = items[idx];
+            const found = providerList.find(
+              (p: { provider_name: string }) => p.provider_name === item.id
+            );
+            if (found) {
+              return {
+                ...fi,
+                provider_id: found.id,
+                apiKey: found.api_key || '',
+                apiHost: found.endpoint_url || item.apiHost,
+                is_valid: !!found?.is_valid,
+                prefer: found.prefer ?? false,
+                model_type: found.model_type ?? '',
+                externalConfig: fi.externalConfig
+                  ? fi.externalConfig.map((ec) => {
+                      if (
+                        found.encrypted_config &&
+                        found.encrypted_config[ec.key] !== undefined
+                      ) {
+                        return { ...ec, value: found.encrypted_config[ec.key] };
+                      }
+                      return ec;
+                    })
+                  : undefined,
+              };
+            }
+            return fi;
+          })
+        );
+
+        const localProviders = providerList.filter(
+          (p: { provider_name: string }) =>
+            LOCAL_MODEL_OPTIONS.some((model) => model.id === p.provider_name)
+        );
+
+        const types: Record<string, string> = {};
+        const providerIds: Record<string, number | undefined> = {};
+
+        localProviders.forEach((local: Record<string, unknown>) => {
+          const platform =
+            (local.encrypted_config as { model_platform?: string } | undefined)
+              ?.model_platform || (local.provider_name as string);
+          types[platform] =
+            (local.encrypted_config as { model_type?: string } | undefined)
+              ?.model_type || '';
+          providerIds[platform] = local.id as number;
+
+          if (local.prefer) {
+            setLocalPrefer(true);
+            setLocalPlatform(platform);
+          }
+        });
+
+        setLocalTypes(types);
+        setLocalProviderIds(providerIds);
+
+        if (localProviders.length === 0) {
+          const nextTypes: Record<string, string> = {};
+          const nextIds: Record<string, number | undefined> = {};
+          LOCAL_MODEL_OPTIONS.forEach((model) => {
+            nextTypes[model.id] = '';
+            nextIds[model.id] = undefined;
+          });
+          setLocalTypes(nextTypes);
+          setLocalProviderIds(nextIds);
+        }
+
+        if (modelType === 'cloud') {
+          setCloudPrefer(true);
+          setForm((f) => f.map((fi) => ({ ...fi, prefer: false })));
+          setLocalPrefer(false);
+        } else if (modelType === 'local') {
+          setForm((f) => f.map((fi) => ({ ...fi, prefer: false })));
+          setLocalPrefer(true);
+          setCloudPrefer(false);
+        } else {
+          setLocalPrefer(false);
+          setCloudPrefer(false);
+        }
+      } catch (e) {
+        console.error('Error fetching providers:', e);
+      }
+    })();
+  }, [items, modelType]);
+
+  /** Model name only in the trigger (e.g. "Gemini 3.1 Pro Preview", no cloud/source prefix). */
+  const triggerModelName = useMemo(() => {
+    if (cloudPrefer) {
+      const cloudModel = cloudModelOptions.find(
+        (m) => m.id === cloud_model_type
+      );
+      return cloudModel
+        ? cloudModel.name
+        : String(cloud_model_type)
+            .replace(/-/g, ' ')
+            .replace(/\b\w/g, (c) => c.toUpperCase());
+    }
+
+    const preferredIdx = form.findIndex((f) => f.prefer);
+    if (preferredIdx !== -1) {
+      const item = items[preferredIdx];
+      const mt = form[preferredIdx].model_type || '';
+      return `${item.name}${mt ? ` (${mt})` : ''}`;
+    }
+
+    if (localPrefer && localPlatform) {
+      const platformName = getLocalPlatformName(localPlatform);
+      const mt = localTypes[localPlatform] || '';
+      return `${platformName}${mt ? ` (${mt})` : ''}`;
+    }
+
+    return t('setting.select-default-model');
+  }, [
+    cloudPrefer,
+    cloud_model_type,
+    form,
+    items,
+    localPrefer,
+    localPlatform,
+    localTypes,
+    t,
+  ]);
+
+  const needsInvert = (modelId: string | null): boolean =>
+    needsInvertModelImage(modelId, appearance);
+
+  const handleDefaultModelSelect = useCallback(
+    async (category: DefaultModelCategory, modelId: string) => {
+      if (
+        !isDefaultModelConfigured(category, modelId, {
+          items,
+          form,
+          localProviderIds,
+        })
+      ) {
+        navigate(DEFAULT_MODEL_CONFIGURE_PATH);
+        return;
+      }
+      await applyDefaultModelSelection({
+        category,
+        modelId,
+        items,
+        form,
+        setForm: setForm as Dispatch<SetStateAction<unknown[]>>,
+        setCloudPrefer,
+        setLocalPrefer,
+        setLocalPlatform,
+        localProviderIds,
+        localPlatform,
+        setModelType,
+        setCloudModelType: (id: string) => {
+          setCloudModelType(id as never);
+        },
+        t,
+      });
+    },
+    [
+      items,
+      form,
+      localProviderIds,
+      localPlatform,
+      navigate,
+      setModelType,
+      setCloudModelType,
+      t,
+    ]
+  );
+
+  /** Radix submenu forces align=start (tops align); use alignOffset so sub bottom aligns with the SubTrigger row bottom. */
+  const activeSubTriggerRef = useRef<HTMLElement | null>(null);
+  const subMenuContentRef = useRef<HTMLDivElement | null>(null);
+  const [subMenuAlignOffset, setSubMenuAlignOffset] = useState(0);
+  /** Bumped only when a submenu opens — never from ref callbacks (Radix composed refs re-fire and would loop). */
+  const [subAlignSyncEpoch, setSubAlignSyncEpoch] = useState(0);
+
+  const syncSubMenuAlignOffset = useCallback(() => {
+    const trigger = activeSubTriggerRef.current;
+    const sub = subMenuContentRef.current;
+    if (!trigger || !sub) return;
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const subH = sub.offsetHeight;
+
+    const desiredTop = triggerRect.bottom - subH;
+    const next = Math.round(desiredTop - triggerRect.top);
+
+    setSubMenuAlignOffset((prev) => (prev === next ? prev : next));
+  }, []);
+
+  useLayoutEffect(() => {
+    if (subAlignSyncEpoch === 0) return;
+    let cancelled = false;
+    let raf1 = 0;
+    let raf2 = 0;
+    let raf3 = 0;
+    let raf4 = 0;
+
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        if (cancelled) return;
+        syncSubMenuAlignOffset();
+        raf3 = requestAnimationFrame(() => {
+          raf4 = requestAnimationFrame(() => {
+            if (cancelled) return;
+            syncSubMenuAlignOffset();
+          });
+        });
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+      cancelAnimationFrame(raf3);
+      cancelAnimationFrame(raf4);
+    };
+  }, [subAlignSyncEpoch, syncSubMenuAlignOffset]);
+
+  if (readOnly) {
+    return (
+      <div
+        role="status"
+        title={triggerModelName}
+        aria-label={triggerModelName}
+        className={cn(
+          modelTriggerShellClass,
+          'pointer-events-none bg-transparent',
+          {
+            'opacity-50': disabled,
+          }
+        )}
+      >
+        <span className="gap-1.5 min-w-0 inline-flex min-h-[1.25rem] items-center overflow-hidden">
+          <Sparkles className="size-3.5 shrink-0" strokeWidth={2} aria-hidden />
+          <span className="!text-label-xs min-w-0 font-semibold truncate">
+            {triggerModelName}
+          </span>
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <DropdownMenu
+      onOpenChange={(open) => {
+        if (!open) setSubMenuAlignOffset(0);
+      }}
+    >
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          title={triggerModelName}
+          aria-label={triggerModelName}
+          aria-haspopup="menu"
+          className={cn(
+            modelTriggerShellClass,
+            'min-w-0 cursor-pointer border-0 text-left',
+            'font-semibold justify-between transition-colors',
+            'hover:bg-ds-bg-neutral-subtle-hover active:bg-ds-bg-neutral-subtle-default',
+            'focus-visible:ring-ds-border-neutral-strong-default focus-visible:ring-offset-ds-bg-neutral-default-default focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+            'disabled:pointer-events-none disabled:opacity-50'
+          )}
+        >
+          <span className="gap-1.5 min-w-0 flex flex-1 items-center overflow-hidden">
+            <Sparkles
+              className="size-3.5 shrink-0"
+              strokeWidth={2}
+              aria-hidden
+            />
+            <span className="!text-label-xs min-w-0 text-ds-text-neutral-default-default flex-1 truncate text-left">
+              {triggerModelName}
+            </span>
+          </span>
+          <ChevronDown
+            className="h-3.5 w-3.5 shrink-0 opacity-80"
+            aria-hidden
+            strokeWidth={2}
+          />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="start"
+        side="top"
+        sideOffset={4}
+        alignOffset={0}
+        collisionPadding={12}
+        avoidCollisions
+        className="w-[180px]"
+      >
+        {import.meta.env.VITE_USE_LOCAL_PROXY !== 'true' && (
+          <DropdownMenuSub
+            onOpenChange={(open) => {
+              if (open) setSubAlignSyncEpoch((e) => e + 1);
+            }}
+          >
+            <DropdownMenuSubTrigger
+              className="gap-2 min-w-0 [&>svg:first-child]:!h-4 [&>svg:first-child]:!w-4 [&>svg:first-child]:!min-h-4 [&>svg:first-child]:!min-w-4 flex w-full items-center justify-start"
+              onPointerEnter={(e) => {
+                activeSubTriggerRef.current = e.currentTarget;
+              }}
+            >
+              <img
+                src={folderIcon}
+                alt=""
+                className="h-4 w-4 mt-0.5 shrink-0"
+                aria-hidden
+              />
+              <span className="text-body-sm min-w-0 flex-1 text-left">
+                {t('setting.eigent-cloud')}
+              </span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent
+              ref={subMenuContentRef}
+              alignOffset={subMenuAlignOffset}
+              className="max-h-[300px] w-[200px] overflow-y-auto"
+              collisionPadding={12}
+              avoidCollisions
+            >
+              {cloudModelOptions.map((model) => (
+                <DropdownMenuItem
+                  key={model.id}
+                  onSelect={() => {
+                    void handleDefaultModelSelect('cloud', model.id);
+                  }}
+                  className="flex items-center justify-between"
+                >
+                  <span className="text-body-sm">{model.name}</span>
+                  {cloudPrefer && cloud_model_type === model.id && (
+                    <Check className="h-4 w-4 text-ds-text-success-default-default" />
+                  )}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        )}
+
+        <DropdownMenuSub
+          onOpenChange={(open) => {
+            if (open) setSubAlignSyncEpoch((e) => e + 1);
+          }}
+        >
+          <DropdownMenuSubTrigger
+            className="gap-2 min-w-0 [&>svg:first-child]:!h-5 [&>svg:first-child]:!w-4 [&>svg:first-child]:!min-h-4 [&>svg:first-child]:!min-w-4 flex w-full items-center justify-start"
+            onPointerEnter={(e) => {
+              activeSubTriggerRef.current = e.currentTarget;
+            }}
+          >
+            <Layers
+              className="text-ds-icon-neutral-default-default shrink-0"
+              aria-hidden
+            />
+            <span className="text-body-sm min-w-0 flex-1 text-left">
+              {t('setting.custom-model')}
+            </span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent
+            ref={subMenuContentRef}
+            alignOffset={subMenuAlignOffset}
+            className="max-h-[440px] w-[220px] overflow-y-auto"
+            collisionPadding={12}
+            avoidCollisions
+          >
+            {items.map((item, idx) => {
+              const isConfigured = !!form[idx]?.provider_id;
+              const isPreferred = form[idx]?.prefer;
+              const modelImage = getModelImage(item.id);
+
+              return (
+                <DropdownMenuItem
+                  key={item.id}
+                  onSelect={() => {
+                    void handleDefaultModelSelect('custom', item.id);
+                  }}
+                  className="flex items-center justify-between"
+                >
+                  <div className="gap-2 flex items-center">
+                    {modelImage ? (
+                      <img
+                        src={modelImage}
+                        alt={item.name}
+                        className="h-4 w-4"
+                        style={
+                          needsInvert(item.id)
+                            ? { filter: 'invert(1)' }
+                            : undefined
+                        }
+                      />
+                    ) : (
+                      <Key className="h-3 w-3 text-ds-icon-neutral-muted-default" />
+                    )}
+                    <span
+                      className={`text-body-sm ${isConfigured ? 'text-ds-text-neutral-default-default' : 'text-ds-text-neutral-subtle-default'}`}
+                    >
+                      {item.name}
+                    </span>
+                  </div>
+                  <div className="gap-1 flex items-center">
+                    {!isConfigured && (
+                      <div className="h-2 w-2 bg-ds-text-neutral-subtle-default rounded-full opacity-10" />
+                    )}
+                    {isPreferred && (
+                      <Check className="h-4 w-4 text-ds-text-success-default-default" />
+                    )}
+                    {isConfigured && !isPreferred && (
+                      <div className="h-2 w-2 bg-ds-text-success-default-default rounded-full" />
+                    )}
+                  </div>
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+
+        <DropdownMenuSub
+          onOpenChange={(open) => {
+            if (open) setSubAlignSyncEpoch((e) => e + 1);
+          }}
+        >
+          <DropdownMenuSubTrigger
+            className="gap-2 min-w-0 [&>svg:first-child]:!h-4 [&>svg:first-child]:!w-4 [&>svg:first-child]:!min-h-4 [&>svg:first-child]:!min-w-4 flex w-full items-center justify-start"
+            onPointerEnter={(e) => {
+              activeSubTriggerRef.current = e.currentTarget;
+            }}
+          >
+            <HardDrive
+              className="text-ds-icon-neutral-default-default shrink-0"
+              aria-hidden
+            />
+            <span className="text-body-sm min-w-0 flex-1 text-left">
+              {t('setting.local-model')}
+            </span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent
+            ref={subMenuContentRef}
+            alignOffset={subMenuAlignOffset}
+            className="w-[200px]"
+            collisionPadding={12}
+            avoidCollisions
+          >
+            {LOCAL_MODEL_OPTIONS.map((model) => {
+              const isConfigured = !!localProviderIds[model.id];
+              const isPreferred = localPrefer && localPlatform === model.id;
+              const modelImage = getModelImage(`local-${model.id}`);
+
+              return (
+                <DropdownMenuItem
+                  key={model.id}
+                  onSelect={() => {
+                    void handleDefaultModelSelect('local', model.id);
+                  }}
+                  className="flex items-center justify-between"
+                >
+                  <div className="gap-2 flex items-center">
+                    {modelImage ? (
+                      <img
+                        src={modelImage}
+                        alt={model.name}
+                        className="h-4 w-4"
+                        style={
+                          needsInvert(`local-${model.id}`)
+                            ? { filter: 'invert(1)' }
+                            : undefined
+                        }
+                      />
+                    ) : (
+                      <Server className="h-4 w-4 text-ds-icon-neutral-muted-default" />
+                    )}
+                    <span
+                      className={`text-body-sm ${isConfigured ? 'text-ds-text-neutral-default-default' : 'text-ds-text-neutral-subtle-default'}`}
+                    >
+                      {model.name}
+                    </span>
+                  </div>
+                  <div className="gap-1 flex items-center">
+                    {!isConfigured && (
+                      <div className="h-2 w-2 bg-ds-text-neutral-subtle-default rounded-full opacity-10" />
+                    )}
+                    {isPreferred && (
+                      <Check className="h-4 w-4 text-ds-text-success-default-default" />
+                    )}
+                    {isConfigured && !isPreferred && (
+                      <div className="h-2 w-2 bg-ds-text-success-default-default rounded-full" />
+                    )}
+                  </div>
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
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 56291c0f4..5040f5fbd 100644
--- a/src/components/ChatBox/BottomBox/InputBox.tsx
+++ b/src/components/ChatBox/BottomBox/InputBox.tsx
@@ -12,36 +12,45 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-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 { useHost } from '@/host';
+import { WorkspaceSessionModeToggle } from '@/components/Workspace/WorkspaceSessionModeToggle';
 import { processDroppedFiles } from '@/lib/fileUtils';
 import { cn } from '@/lib/utils';
 import type { TriggerInput } from '@/types';
-import { AnimatePresence } from 'framer-motion';
+import type { SessionModeType } from '@/types/constants';
 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 { ChatInputModelDropdown } from './ChatInputModelDropdown';
+import { RichChatInput } from './RichChatInput';
 
 /**
  * File attachment object
@@ -69,24 +78,32 @@ 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;
+  /** Session mode for the mode-select row; omit to hide it. */
+  sessionMode?: SessionModeType;
+  /** Called when the user changes mode (workspace only). */
+  onSessionModeChange?: (mode: SessionModeType) => void;
+  /** Full toggle on workspace; on session chat, only the current mode is shown. */
+  sessionModeSelectInteractive?: 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;
 }
 
 /**
@@ -97,7 +114,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)
@@ -122,7 +139,7 @@ export interface InputboxProps {
  *   onAddFile={() => {
  *     // Open file picker
  *   }}
- *   placeholder="What do you need to achieve today?"
+ *   placeholder="Ask a follow-up"
  *   allowDragDrop={true}
  * />
  * ```
@@ -135,19 +152,23 @@ 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,
+  sessionMode,
+  onSessionModeChange,
+  sessionModeSelectInteractive = false,
+  onTriggerCreating: _onTriggerCreating,
+  onTriggerCreated: _onTriggerCreated,
 }: InputboxProps) => {
-  const host = useHost();
   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);
@@ -156,51 +177,6 @@ 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 [instanceId] = useState(
-    () => `inputbox-${crypto.randomUUID().slice(0, 9)}`
-  );
-
-  // Handle dialog open/close with singleton tracking
-  const handleExpandedDialogChange = useCallback(
-    (open: boolean) => {
-      if (open) {
-        activeExpandedDialogId = instanceId;
-        setIsExpandedDialogOpen(true);
-      } else {
-        if (activeExpandedDialogId === instanceId) {
-          activeExpandedDialogId = null;
-        }
-        setIsExpandedDialogOpen(false);
-      }
-    },
-    [instanceId]
-  );
-
-  // 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 === instanceId) {
-          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, instanceId]);
 
   const openRemainingPopover = () => {
     if (hoverCloseTimerRef.current) {
@@ -230,11 +206,13 @@ export const Inputbox = ({
 
   // Determine if we're in the "Input" state (has content or files)
   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) {
@@ -246,7 +224,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();
@@ -261,9 +239,13 @@ 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-ds-icon-neutral-default-default" />
+      );
     }
-    return <FileText className="h-4 w-4 text-icon-primary" />;
+    return (
+      <FileText className="size-3.5 text-ds-icon-neutral-default-default" />
+    );
   };
 
   // Drag & drop handlers
@@ -276,7 +258,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();
@@ -285,7 +267,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();
@@ -305,14 +287,15 @@ 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;
 
       console.log('[Drag-Drop] Processing dropped files:', dropped.length);
 
-      const result = await processDroppedFiles(dropped, files, host);
+      const result = await processDroppedFiles(dropped, files);
 
       if (result.success) {
         console.log('[Drag-Drop] Setting files:', result.files);
@@ -336,9 +319,11 @@ 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',
-        isFocused && 'border-input-border-focus',
-        isDragging && 'border-info-primary bg-info-primary/10',
+        'rounded-3xl p-3 border-ds-border-neutral-default-default bg-ds-bg-neutral-subtle-default shadow-lg relative flex w-full flex-col items-start border border-solid transition-colors',
+        (isFocused || hasContent) &&
+          'border-ds-border-information-default-default',
+        isDragging &&
+          'border-ds-border-neutral-strong-default bg-ds-bg-information-subtle-default',
         className
       )}
       onDragEnter={handleDragEnter}
@@ -347,60 +332,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="inset-0 gap-2 rounded-2xl backdrop-blur-sm border-ds-border-neutral-strong-default bg-ds-bg-information-subtle-default text-ds-text-neutral-default-default 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 2: 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 pr-1 bg-ds-bg-neutral-default-default relative box-border flex h-auto items-center'
                 )}
                 onMouseEnter={() => setHoveredFilePath(file.filePath)}
                 onMouseLeave={() =>
@@ -413,7 +361,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();
@@ -423,7 +371,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-ds-icon-neutral-muted-default" />
                   ) : (
                     getFileIcon(file.fileName)
                   )}
@@ -432,7 +380,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-ds-text-neutral-default-default relative min-h-px min-w-px flex-1 overflow-hidden font-['Inter'] overflow-ellipsis whitespace-nowrap"
                   )}
                   title={file.fileName}
                 >
@@ -446,34 +394,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-ds-bg-neutral-strong-default 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-ds-text-neutral-default-default 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 p-1 shadow-perfect border-ds-border-neutral-subtle-default bg-ds-bg-neutral-default-default !w-auto border-solid"
                 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 px-1 py-0.5 bg-ds-bg-neutral-strong-default hover:bg-ds-bg-neutral-default-hover flex cursor-pointer items-center transition-colors duration-300"
                         onMouseEnter={() => setHoveredFilePath(file.filePath)}
                         onMouseLeave={() =>
                           setHoveredFilePath((prev) =>
@@ -484,7 +436,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();
@@ -497,12 +449,12 @@ export const Inputbox = ({
                           }
                         >
                           {isHovered ? (
-                            <X className="size-4 text-icon-secondary" />
+                            <X className="size-4 text-ds-icon-neutral-muted-default" />
                           ) : (
                             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-ds-text-neutral-default-default flex-1 overflow-hidden font-['Inter'] text-ellipsis whitespace-nowrap">
                           {file.fileName}
                         </p>
                       </div>
@@ -515,93 +467,203 @@ export const Inputbox = ({
         </div>
       )}
 
-      {/* 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>
+      {/* Layer 3: Text input area */}
+      <div className="gap-2.5 pb-3 relative 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="text-ds-text-neutral-default-default"
+          style={{
+            fontFamily: 'Inter',
+            fontSize: '13px',
+            lineHeight: '20px',
+          }}
+          maxHeightPx={200}
+        />
+      </div>
 
-          {/* Add Trigger Button - opens TriggerDialog */}
-          <Button
-            variant="ghost"
-            size="xs"
-            className="rounded-lg"
+      {/* Layer 4: Action buttons */}
+      <div className="flex w-full items-center justify-between">
+        {/* Left: Add File Button and Add Trigger Button */}
+        <div className="gap-2 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 />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              side="top"
+              align="start"
+              className="min-w-[13.5rem]"
+            >
+              <DropdownMenuItem
+                disabled={
+                  !privacy ||
+                  useCloudModelInDev ||
+                  typeof onAddFile !== 'function'
+                }
+                onSelect={() => {
+                  onAddFile?.();
+                }}
+              >
+                <Paperclip
+                  className="text-ds-icon-neutral-default-default"
+                  aria-hidden
+                />
+                {t('chat.input-attach-add-files-or-photos')}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator className="-mx-1 my-1 bg-ds-border-neutral-default-default" />
+              {/* 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-ds-icon-neutral-default-default"
+                    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-ds-icon-neutral-default-default"
+                    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-ds-icon-neutral-default-default"
+                    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>
+          <ChatInputModelDropdown
             disabled={disabled}
-            onClick={() => setTriggerDialogOpen(true)}
-          >
-            <Zap size={16} className="text-icon-primary" />
-            {t('triggers.trigger-label')}
-          </Button>
-
-          {/* TriggerDialog for adding trigger and task */}
-          <TriggerDialog
-            selectedTrigger={null}
-            isOpen={triggerDialogOpen}
-            onOpenChange={setTriggerDialogOpen}
-            initialTaskPrompt={value}
+            readOnly={
+              sessionMode !== undefined &&
+              sessionModeSelectInteractive === false
+            }
           />
         </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>
-          )}*/}
+        {/* Right: Session mode (workspace: full toggle; session: current mode only) + send */}
+        <div className="gap-2 flex items-center">
+          {sessionMode !== undefined && (
+            <WorkspaceSessionModeToggle
+              value={sessionMode}
+              onValueChange={onSessionModeChange ?? (() => {})}
+              readOnly={!sessionModeSelectInteractive}
+              className="shrink-0"
+            />
+          )}
           <Button
-            size="icon"
-            variant={value.trim().length > 0 ? 'success' : 'secondary'}
-            className="rounded-full"
+            size="xs"
+            buttonContent="icon-only"
+            textWeight="bold"
+            buttonRadius="full"
+            variant={value.trim().length > 0 ? 'primary' : 'primary'}
+            tone={value.trim().length > 0 ? 'success' : 'default'}
             onClick={handleSend}
             disabled={disabled || value.trim().length === 0}
           >
             <ArrowRight
-              size={16}
               className={cn(
-                'text-button-primary-icon-default transition-transform duration-200',
+                'text-current 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)]" />
           </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..05a5c8f80 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 py-1 border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default 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"
@@ -58,21 +58,27 @@ export function QueuedBox({
           onClick={() => setIsExpanded(!isExpanded)}
         >
           {isExpanded ? (
-            <ChevronUp size={16} className="text-icon-primary" />
+            <ChevronUp
+              size={16}
+              className="text-ds-icon-neutral-default-default"
+            />
           ) : (
-            <ChevronDown size={16} className="text-icon-primary" />
+            <ChevronDown
+              size={16}
+              className="text-ds-icon-neutral-default-default"
+            />
           )}
         </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">
-            <span className="text-xs font-bold text-text-body">
+        <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-ds-text-neutral-default-default">
               {queuedMessages.length}
             </span>
           </div>
           <div className="relative flex shrink-0 flex-col justify-center">
-            <span className="text-xs font-bold text-text-body">
+            <span className="text-xs font-bold text-ds-text-neutral-default-default">
               {t('chat.queued-tasks')}
             </span>
           </div>
@@ -82,7 +88,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 +117,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 px-1 py-1 bg-ds-bg-neutral-strong-default hover:bg-ds-bg-neutral-default-default 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">
-        <Circle size={16} className="text-icon-secondary" />
+      <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-ds-icon-neutral-muted-default" />
       </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-ds-bg-neutral-default-hover opacity-100'
+            : 'translate-x-2 pointer-events-none opacity-0'
         )}
         onClick={(e) => {
           e.preventDefault();
@@ -140,7 +147,7 @@ function QueueingItem({ content, onRemove }: QueueingItemProps) {
         }}
         aria-label={t('chat.remove-queued-message')}
       >
-        <X size={16} className="text-icon-secondary" />
+        <X size={16} className="text-ds-icon-neutral-muted-default" />
       </Button>
     </div>
   );
diff --git a/src/components/ChatBox/BottomBox/RichChatInput.tsx b/src/components/ChatBox/BottomBox/RichChatInput.tsx
new file mode 100644
index 000000000..d1d62ab73
--- /dev/null
+++ b/src/components/ChatBox/BottomBox/RichChatInput.tsx
@@ -0,0 +1,463 @@
+// ========= 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 {
+  httpUrlOrNull,
+  segmentsToHtml,
+  tokenizeRichPlainText,
+} from '@/lib/richText';
+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';
+
+export { tokenizeRichPlainText } from '@/lib/richText';
+
+const PLACEHOLDER_ROTATE_MS = 30_000;
+
+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]);
+
+  const handleBlur = useCallback(() => {
+    const el = rootRef.current;
+    if (!el || composingRef.current) {
+      onBlur?.();
+      return;
+    }
+    const plain = getPlainTextFromRoot(el);
+    internalUpdate.current = true;
+    onChange(plain, plain.length);
+    applyHtml(plain);
+    resizeHeight();
+    onBlur?.();
+  }, [applyHtml, onBlur, onChange, resizeHeight]);
+
+  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;
+    }
+    const sel = window.getSelection();
+    const shouldRestoreCaret =
+      document.activeElement === el &&
+      sel &&
+      sel.rangeCount > 0 &&
+      el.contains(sel.anchorNode);
+    const caretBefore = shouldRestoreCaret ? getCaretOffset(el) : undefined;
+    applyHtml(value, caretBefore);
+    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-ds-text-neutral-subtle-disabled text-body-sm block w-full"
+              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={handleBlur}
+        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 caret / 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..d72b1573c 100644
--- a/src/components/ChatBox/BottomBox/index.tsx
+++ b/src/components/ChatBox/BottomBox/index.tsx
@@ -12,7 +12,9 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
+import { Button } from '@/components/ui/button';
 import { type ChatTaskStatusType } from '@/types/constants';
+import { TriangleAlert } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { BoxHeaderConfirm, BoxHeaderSplitting } from './BoxHeader';
 import { FileAttachment, Inputbox, InputboxProps } from './InputBox';
@@ -53,6 +55,10 @@ interface BottomBoxProps {
 
   // Loading states
   loading?: boolean;
+
+  /** Full-area warning overlay on the input card when no model is configured. */
+  noModelOverlay?: boolean;
+  onSelectModel?: () => void;
 }
 
 export default function BottomBox({
@@ -64,20 +70,24 @@ export default function BottomBox({
   onEdit,
   inputProps,
   loading = false,
+  noModelOverlay = false,
+  onSelectModel,
 }: BottomBoxProps) {
   const { t } = useTranslation();
   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';
-  if (state === 'splitting') backgroundClass = 'bg-input-bg-spliting';
-  else if (state === 'confirm') backgroundClass = 'bg-input-bg-confirm';
+  let backgroundClass = 'bg-ds-bg-neutral-subtle-default';
+  if (state === 'splitting')
+    backgroundClass = 'bg-ds-bg-splitting-subtle-default';
+  else if (state === 'confirm')
+    backgroundClass = 'bg-ds-bg-completed-subtle-default';
 
   return (
-    <div className="relative z-50 flex w-full flex-col">
+    <div className="backdrop-blur-xl rounded-t-2xl bg-ds-bg-neutral-subtle-default 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 +96,7 @@ export default function BottomBox({
       )}
       {/* BoxMain */}
       <div
-        className={`flex w-full flex-col rounded-t-lg p-2 ${backgroundClass}`}
+        className={`rounded-3xl mb-sm relative flex w-full flex-col ${backgroundClass}`}
       >
         {/* BoxHeader variants */}
         {state === 'splitting' && <BoxHeaderSplitting />}
@@ -101,6 +111,33 @@ export default function BottomBox({
 
         {/* Inputbox (always visible) */}
         <Inputbox {...inputProps} />
+
+        {noModelOverlay && onSelectModel ? (
+          <div
+            className="inset-0 rounded-3xl gap-3 backdrop-blur-lg px-4 py-5 bg-ds-bg-warning-subtle-default absolute z-[15] flex flex-row items-center justify-center"
+            role="alert"
+          >
+            <TriangleAlert
+              className="h-4 w-4 text-ds-icon-warning-default-default shrink-0"
+              aria-hidden
+            />
+            <p className="text-sm font-medium leading-snug text-ds-text-warning-default-default">
+              {t('layout.please-select-model')}
+            </p>
+            <Button
+              type="button"
+              variant="primary"
+              tone="warning"
+              size="sm"
+              buttonRadius="full"
+              onClick={onSelectModel}
+            >
+              {t('layout.select-model-cta', {
+                defaultValue: 'Select a model',
+              })}
+            </Button>
+          </div>
+        ) : null}
       </div>
     </div>
   );
diff --git a/src/components/ChatBox/HeaderBox/index.tsx b/src/components/ChatBox/HeaderBox/index.tsx
deleted file mode 100644
index 3c12df89d..000000000
--- a/src/components/ChatBox/HeaderBox/index.tsx
+++ /dev/null
@@ -1,85 +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 tokenDarkIcon from '@/assets/token-dark.svg';
-import tokenLightIcon from '@/assets/token-light.svg';
-import { Button } from '@/components/ui/button';
-import { useAuthStore } from '@/store/authStore';
-import { PlayCircle } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { AnimatedTokenNumber } from '../TokenUtils';
-
-interface HeaderBoxProps {
-  /** Total token count for the current project */
-  totalTokens?: number;
-  /** Task status – controls visibility of replay button */
-  status?: 'running' | 'finished' | 'pending' | 'pause';
-  /** Whether the replay action is in a loading state */
-  replayLoading?: boolean;
-  /** Callback fired when the replay button is clicked */
-  onReplay?: () => void;
-  /** Optional extra class names for the outer container */
-  className?: string;
-}
-
-export function HeaderBox({
-  totalTokens = 0,
-  status,
-  replayLoading = false,
-  onReplay,
-  className,
-}: HeaderBoxProps) {
-  const { t } = useTranslation();
-  const { appearance } = useAuthStore();
-  const tokenIcon = appearance === 'dark' ? tokenDarkIcon : tokenLightIcon;
-
-  const showReplayButton = status === 'finished';
-  const isReplayDisabled =
-    status === 'running' || status === 'pending' || status === 'pause';
-
-  return (
-    <div
-      className={`flex h-[44px] w-full flex-row items-center justify-between px-3 ${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>
-
-        {showReplayButton && (
-          <Button
-            onClick={onReplay}
-            disabled={isReplayDisabled || replayLoading}
-            variant="ghost"
-            size="sm"
-            className="no-drag rounded-full bg-surface-information font-semibold !text-text-information"
-          >
-            <PlayCircle className="mr-1 h-3.5 w-3.5" />
-            {replayLoading ? t('common.loading') : t('chat.replay')}
-          </Button>
-        )}
-      </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>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/ChatBox/MessageItem/AgentMessageCard.tsx b/src/components/ChatBox/MessageItem/AgentMessageCard.tsx
index af9381bd0..687bd5513 100644
--- a/src/components/ChatBox/MessageItem/AgentMessageCard.tsx
+++ b/src/components/ChatBox/MessageItem/AgentMessageCard.tsx
@@ -13,8 +13,8 @@
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
 import { useHost } from '@/host';
-import { Check, Copy, FileText } from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
+import { Check, Copy, FileText, ThumbsDown, ThumbsUp } from 'lucide-react';
+import { useCallback, useEffect, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import { Button } from '../../ui/button';
@@ -28,40 +28,44 @@ 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
-const completedTypewriterHashes = new Map<string, boolean>();
+// Tracks agent messages that have already played the typewriter (by stable message id).
+const completedTypewriterByMessageId = new Map<string, boolean>();
 
 export function AgentMessageCard({
   id,
   content,
   typewriter = true,
   onTyping,
+  onMarkdownRenderComplete,
   className,
   attaches,
+  deferredFooter,
 }: AgentMessageCardProps) {
   const host = useHost();
   const ipcRenderer = host?.ipcRenderer;
-  // use content hash to track if typewriter effect is completed
-  const contentHash = useMemo(() => {
-    return `${id}-${content}`;
-  }, [id, content]);
+  const [markdownAndTypingComplete, setMarkdownAndTypingComplete] = useState(
+    () => completedTypewriterByMessageId.has(id)
+  );
 
-  // check if typewriter effect is completed
-  const isCompleted = completedTypewriterHashes.has(contentHash);
+  useEffect(() => {
+    setMarkdownAndTypingComplete(completedTypewriterByMessageId.has(id));
+  }, [id]);
 
-  // if completed, disable typewriter effect
+  const isCompleted = completedTypewriterByMessageId.has(id);
   const enableTypewriter = !isCompleted;
 
   const [copied, setCopied] = useState(false);
   const { t } = useTranslation();
 
-  // when typewriter effect is completed, record to global Map
   const handleTypingComplete = () => {
-    if (!isCompleted) {
-      completedTypewriterHashes.set(contentHash, true);
+    if (!completedTypewriterByMessageId.has(id)) {
+      completedTypewriterByMessageId.set(id, true);
     }
     if (onTyping) {
       onTyping();
@@ -79,27 +83,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 || ''} 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
@@ -108,14 +113,14 @@ export function AgentMessageCard({
                   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 py-1 pl-2 flex w-full cursor-pointer items-center border border-solid border-ds-border-neutral-subtle-default bg-ds-bg-neutral-default-default"
               >
                 <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 overflow-hidden text-ellipsis whitespace-nowrap text-ds-text-neutral-default-default">
                     {file?.fileName?.split('.')[0]}
                   </div>
-                  <div className="text-xs font-medium leading-29 text-text-body">
+                  <div className="text-xs font-medium leading-29 text-ds-text-neutral-default-default">
                     {file?.fileName?.split('.')[1]}
                   </div>
                 </div>
@@ -124,6 +129,44 @@ export function AgentMessageCard({
           })}
         </div>
       )}
+      {showDeferredFileUi && deferredFooter != null && (
+        <div className="mt-[10px] w-full">{deferredFooter}</div>
+      )}
+      {markdownAndTypingComplete && (
+        <div className="mt-3 gap-1 flex shrink-0 justify-start">
+          <Button
+            onClick={handleCopy}
+            variant="ghost"
+            size="xs"
+            buttonContent="icon-only"
+            aria-label={t('setting.copy')}
+          >
+            {copied ? (
+              <Check className="h-4 w-4 text-ds-text-success-default-default" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </Button>
+          <Button
+            onClick={() => {}}
+            variant="ghost"
+            size="xs"
+            buttonContent="icon-only"
+            aria-label="Thumb up"
+          >
+            <ThumbsUp className="h-4 w-4" />
+          </Button>
+          <Button
+            onClick={() => {}}
+            variant="ghost"
+            size="xs"
+            buttonContent="icon-only"
+            aria-label="Thumb down"
+          >
+            <ThumbsDown className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/ChatBox/MessageItem/FeedbackCard.tsx b/src/components/ChatBox/MessageItem/FeedbackCard.tsx
index eb8ef7ede..a54244100 100644
--- a/src/components/ChatBox/MessageItem/FeedbackCard.tsx
+++ b/src/components/ChatBox/MessageItem/FeedbackCard.tsx
@@ -70,15 +70,20 @@ 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={`group gap-4 rounded-xl px-4 py-3 bg-ds-bg-neutral-default-default 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" />
+            <Check className="h-4 w-4 text-ds-text-success-default-default" />
           ) : (
             <Copy className="h-4 w-4" />
           )}
@@ -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 w-full text-ds-text-neutral-default-default">
         {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 w-full text-ds-text-neutral-default-default">
         {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/FloatingAction.tsx b/src/components/ChatBox/MessageItem/FloatingAction.tsx
similarity index 82%
rename from src/components/ChatBox/FloatingAction.tsx
rename to src/components/ChatBox/MessageItem/FloatingAction.tsx
index a78a273c1..c24d5e937 100644
--- a/src/components/ChatBox/FloatingAction.tsx
+++ b/src/components/ChatBox/MessageItem/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-32 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="gap-2 p-1 backdrop-blur-md border-ds-border-neutral-default-default bg-ds-bg-neutral-subtle-default shadow-button-shadow pointer-events-auto flex items-center rounded-full border">
         {/* Always show Stop Task button when running (removed pause/resume logic) */}
         <Button
           variant="outline"
@@ -60,14 +63,14 @@ export const FloatingAction = ({
           disabled={loading}
           className="gap-1.5 rounded-full"
         >
-          <span className="text-sm font-semibold">Stop Task</span>
+          <span className="!text-label-sm font-semibold">Stop Task</span>
         </Button>
 
         {/* Commented out pause/resume functionality
 				{status === "running" ? (
 					// State 1: Running - Show Pause button
 					<Button
-						variant="cuation"
+						variant="caution"
 						size="sm"
 						onClick={onPause}
 						disabled={loading}
diff --git a/src/components/ChatBox/MessageItem/MarkDown.tsx b/src/components/ChatBox/MessageItem/MarkDown.tsx
index 38b6003b0..dd3d18f8a 100644
--- a/src/components/ChatBox/MessageItem/MarkDown.tsx
+++ b/src/components/ChatBox/MessageItem/MarkDown.tsx
@@ -15,6 +15,7 @@
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { useHost } from '@/host';
 import { isHtmlDocument } from '@/lib/htmlFontStyles';
+import { escapeHtml } from '@/lib/richText';
 import '@/style/markdown-styles.css';
 import DOMPurify from 'dompurify';
 import { marked } from 'marked';
@@ -59,12 +60,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;
@@ -79,19 +83,20 @@ 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]);
 
-    // Typewriter effect
     useEffect(() => {
-      if (lastContentRef.current === content) {
-        return;
-      }
-      lastContentRef.current = content;
+      renderCompleteRef.current = onMarkdownRenderComplete;
+    }, [onMarkdownRenderComplete]);
 
+    // Typewriter effect
+    useEffect(() => {
       if (!enableTypewriter) {
+        lastContentRef.current = content;
         setDisplayedContent(content);
         if (typingCallbackRef.current) {
           typingCallbackRef.current();
@@ -99,6 +104,11 @@ export const MarkDown = memo(
         return;
       }
 
+      if (lastContentRef.current === content) {
+        return;
+      }
+      lastContentRef.current = content;
+
       setDisplayedContent('');
       let index = 0;
 
@@ -133,8 +143,11 @@ export const MarkDown = memo(
             .join('\n')
             .trim();
           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>`
+            `<pre class="bg-ds-bg-neutral-strong-default p-2 rounded text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all" style="word-break: break-all;"><code>${escapeHtml(formattedHtml)}</code></pre>`
           );
+          if (displayedContent === content && renderCompleteRef.current) {
+            renderCompleteRef.current();
+          }
           return;
         }
 
@@ -174,7 +187,7 @@ export const MarkDown = memo(
                   // Fallback: show alt text or placeholder
                   const altMatch = fullTag.match(/alt=["']([^"']*)["']/);
                   const alt = altMatch ? altMatch[1] : 'image';
-                  const placeholder = `<span class="inline-block text-sm text-text-secondary">[${alt}]</span>`;
+                  const placeholder = `<span class="inline-block text-sm text-ds-text-neutral-muted-default">[${alt}]</span>`;
                   rawHtml = rawHtml.replace(fullTag, placeholder);
                 }
               } catch (error) {
@@ -195,10 +208,13 @@ export const MarkDown = memo(
         // Sanitize HTML
         const sanitized = DOMPurify.sanitize(rawHtml);
         setHtml(sanitized);
+        if (displayedContent === content && renderCompleteRef.current) {
+          renderCompleteRef.current();
+        }
       };
 
       processMarkdown();
-    }, [displayedContent, contentBasePath, electronAPI]);
+    }, [displayedContent, content, contentBasePath, electronAPI]);
 
     // Add click handlers for images
     useEffect(() => {
@@ -238,14 +254,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..260d24b56 100644
--- a/src/components/ChatBox/MessageItem/NoticeCard.tsx
+++ b/src/components/ChatBox/MessageItem/NoticeCard.tsx
@@ -35,7 +35,6 @@ export function NoticeCard() {
   // when cotList is added, smooth scroll to the bottom
   useEffect(() => {
     if (!isExpanded && contentRef.current) {
-      console.log('contentRef.current', contentRef.current);
       // use setTimeout to ensure DOM update is completed before scrolling
       setTimeout(() => {
         const container = contentRef.current;
@@ -55,13 +54,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 +75,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 +85,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 rounded-full bg-ds-icon-neutral-default-default"></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/PreparingToExecuteTasks.tsx b/src/components/ChatBox/MessageItem/PreparingToExecuteTasks.tsx
new file mode 100644
index 000000000..379fdd689
--- /dev/null
+++ b/src/components/ChatBox/MessageItem/PreparingToExecuteTasks.tsx
@@ -0,0 +1,35 @@
+// ========= 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 ShinyText from '@/components/ui/ShinyText/ShinyText';
+import { useTranslation } from 'react-i18next';
+
+/** Shown after the user confirms the task plan while the start request is in flight (before the work log appears). */
+export function PreparingToExecuteTasks() {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className="my-2 min-w-0 flex w-full items-center"
+      role="status"
+      aria-live="polite"
+    >
+      <ShinyText
+        text={t('chat.preparing-to-execute-tasks')}
+        className="text-body-sm"
+        speed={2.5}
+      />
+    </div>
+  );
+}
diff --git a/src/components/ChatBox/MessageItem/SplittingProgressRow.tsx b/src/components/ChatBox/MessageItem/SplittingProgressRow.tsx
new file mode 100644
index 000000000..44562ab80
--- /dev/null
+++ b/src/components/ChatBox/MessageItem/SplittingProgressRow.tsx
@@ -0,0 +1,161 @@
+// ========= 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 tokenDarkIcon from '@/assets/token-dark.svg';
+import tokenLightIcon from '@/assets/token-light.svg';
+import { ClipboardList } from '@/components/ui/animate-ui/icons/clipboard-list';
+import { cn } from '@/lib/utils';
+import { useAuthStore } from '@/store/authStore';
+import type { VanillaChatStore } from '@/store/chatStore';
+import { AgentStep, ChatTaskStatus } from '@/types/constants';
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AnimatedTokenNumber, formatSplittingElapsed } from './TokenUtils';
+
+/** Shared start wall time when the task has no `taskTime` / `elapsed` yet (keeps a stable clock across remounts). */
+const splittingTimerStartMsByTaskId = new Map<string, number>();
+
+/** Matches work-log / `getFormattedTaskTime` (TaskWorkLogAccordion `getTaskElapsedMs`). */
+function getTaskElapsedMs(task: { taskTime: number; elapsed: number }): number {
+  if (task.taskTime !== 0) {
+    return Math.max(0, Date.now() - task.taskTime + task.elapsed);
+  }
+  return Math.max(0, task.elapsed);
+}
+
+function getOrCreateSplittingMapStart(taskId: string): number {
+  let start = splittingTimerStartMsByTaskId.get(taskId);
+  if (start === undefined) {
+    start = Date.now();
+    splittingTimerStartMsByTaskId.set(taskId, start);
+  }
+  return start;
+}
+
+function clearSplittingTimerStart(taskId: string) {
+  splittingTimerStartMsByTaskId.delete(taskId);
+}
+
+function isSplittingSkeletonPhase(task: any): boolean {
+  if (!task) return false;
+  const anyToSubTasksMessage = task.messages?.find(
+    (m: any) => m.step === AgentStep.TO_SUB_TASKS
+  );
+  return (
+    (task.status !== ChatTaskStatus.FINISHED &&
+      task.status !== ChatTaskStatus.RUNNING &&
+      !anyToSubTasksMessage &&
+      !task.hasWaitComfirm &&
+      (task.messages?.length ?? 0) > 0) ||
+    (task.isTakeControl && !anyToSubTasksMessage)
+  );
+}
+
+function useSplittingPhaseElapsedMs(
+  chatStore: VanillaChatStore,
+  taskId: string | null
+): number {
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!taskId) return;
+    const tick = () => setNow(Date.now());
+    tick();
+    const id = window.setInterval(tick, 1000);
+    return () => window.clearInterval(id);
+  }, [taskId]);
+
+  useEffect(() => {
+    if (!taskId) return;
+    const sync = () => {
+      const task = chatStore.getState().tasks[taskId];
+      if (!isSplittingSkeletonPhase(task)) {
+        clearSplittingTimerStart(taskId);
+      }
+    };
+    sync();
+    const unsubscribe = chatStore.subscribe(sync);
+    return () => {
+      unsubscribe();
+      clearSplittingTimerStart(taskId);
+    };
+  }, [chatStore, taskId]);
+
+  if (!taskId) return 0;
+  const task = chatStore.getState().tasks[taskId];
+  if (!task) return 0;
+  const fromTask = getTaskElapsedMs(task);
+  if (fromTask > 0 || task.taskTime !== 0) {
+    return fromTask;
+  }
+  return Math.max(0, now - getOrCreateSplittingMapStart(taskId));
+}
+
+export interface SplittingProgressRowProps {
+  chatStore: VanillaChatStore;
+  taskId: string | null;
+  className?: string;
+}
+
+export function SplittingProgressRow({
+  chatStore,
+  taskId,
+  className,
+}: SplittingProgressRowProps) {
+  const { t } = useTranslation();
+  const { appearance } = useAuthStore();
+  const tokenIcon = appearance === 'dark' ? tokenDarkIcon : tokenLightIcon;
+  const elapsedMs = useSplittingPhaseElapsedMs(chatStore, taskId);
+
+  const tokens = useSyncExternalStore(
+    (cb) => chatStore.subscribe(cb),
+    () => (taskId ? (chatStore.getState().tasks[taskId]?.tokens ?? 0) : 0),
+    () => (taskId ? (chatStore.getState().tasks[taskId]?.tokens ?? 0) : 0)
+  );
+
+  return (
+    <div
+      className={cn(
+        'gap-x-2 gap-y-1 min-w-0 py-2 mx-3 flex w-full flex-wrap items-center justify-start',
+        className
+      )}
+    >
+      <div className="flex shrink-0 items-center justify-center">
+        <ClipboardList
+          animate
+          loop
+          size={16}
+          className="text-ds-icon-information-default-default"
+        />
+      </div>
+      <span className="text-body-sm font-medium text-ds-text-information-default-default shrink-0">
+        {t('chat.splitting-tasks')}
+      </span>
+      <span className="text-body-sm font-normal text-ds-text-neutral-subtle-default shrink-0 tabular-nums">
+        {formatSplittingElapsed(elapsedMs)}
+      </span>
+      <span className="text-body-sm font-normal text-ds-text-neutral-subtle-default shrink-0 tabular-nums">
+        {' '}
+        •{' '}
+      </span>
+      <span
+        className="gap-1 text-body-sm font-normal text-ds-text-neutral-subtle-default flex shrink-0 items-center"
+        aria-label={`${t('chat.token')}: ${tokens}`}
+      >
+        <AnimatedTokenNumber value={tokens} />
+        tokens
+      </span>
+    </div>
+  );
+}
diff --git a/src/components/ChatBox/MessageItem/SummaryMarkDown.tsx b/src/components/ChatBox/MessageItem/SummaryMarkDown.tsx
index 2de29f595..1a7fe48d4 100644
--- a/src/components/ChatBox/MessageItem/SummaryMarkDown.tsx
+++ b/src/components/ChatBox/MessageItem/SummaryMarkDown.tsx
@@ -67,7 +67,7 @@ export const SummaryMarkDown = ({
       .trim();
     return (
       <div className="prose prose-sm max-w-none">
-        <pre className="mb-3 overflow-x-auto whitespace-pre-wrap rounded-lg border border-emerald-200 bg-emerald-50 p-3 font-mono text-xs">
+        <pre className="mb-3 rounded-lg p-3 font-mono text-xs overflow-x-auto border border-ds-border-status-completed-default-default bg-ds-bg-completed-subtle-default whitespace-pre-wrap text-ds-text-neutral-default-default">
           <code>{formattedHtml}</code>
         </pre>
       </div>
@@ -79,62 +79,68 @@ export const SummaryMarkDown = ({
       <ReactMarkdown
         components={{
           h1: ({ children }) => (
-            <h1 className="mb-3 flex items-center gap-2 border-b border-emerald-200 pb-2 text-xl font-bold text-emerald-800">
+            <h1 className="mb-3 gap-2 pb-2 text-xl font-bold flex items-center border-b border-ds-border-status-completed-default-default text-ds-text-success-default-default">
               {children}
             </h1>
           ),
           h2: ({ children }) => (
-            <h2 className="mb-3 mt-4 flex items-center gap-2 text-lg font-semibold text-emerald-700">
+            <h2 className="mb-3 mt-4 gap-2 text-lg font-semibold flex items-center text-ds-text-status-completed-muted-default">
               {children}
             </h2>
           ),
           h3: ({ children }) => (
-            <h3 className="mb-2 mt-3 text-base font-medium text-emerald-600">
+            <h3 className="mb-2 mt-3 text-base font-medium text-ds-text-status-completed-muted-default">
               {children}
             </h3>
           ),
           p: ({ children }) => (
-            <p className="m-0 mb-3 whitespace-pre-wrap text-sm font-normal leading-relaxed text-gray-700">
+            <p className="m-0 mb-3 text-sm font-normal leading-relaxed whitespace-pre-wrap text-ds-text-neutral-default-default">
               {children}
             </p>
           ),
           ul: ({ children }) => (
-            <ul className="mb-3 ml-2 list-inside list-disc space-y-1 text-sm text-gray-700">
+            <ul className="mb-3 ml-2 space-y-1 text-sm list-inside list-disc text-ds-text-neutral-default-default">
               {children}
             </ul>
           ),
           ol: ({ children }) => (
-            <ol className="mb-3 ml-2 list-inside list-decimal space-y-1 text-sm text-gray-700">
+            <ol className="mb-3 ml-2 space-y-1 text-sm list-inside list-decimal text-ds-text-neutral-default-default">
               {children}
             </ol>
           ),
           li: ({ children }) => (
-            <li className="mb-1 leading-relaxed text-gray-700">{children}</li>
+            <li className="mb-1 leading-relaxed text-ds-text-neutral-default-default">
+              {children}
+            </li>
           ),
           code: ({ children }) => (
-            <code className="rounded bg-surface-success-subtle px-2 py-1 font-mono text-xs text-text-success">
+            <code className="rounded px-2 py-1 font-mono text-xs bg-ds-bg-completed-subtle-default text-ds-text-success-default-default">
               {children}
             </code>
           ),
           pre: ({ children }) => (
-            <pre className="mb-3 overflow-x-auto whitespace-pre-wrap rounded-lg border border-emerald-200 bg-emerald-50 p-3 font-mono text-xs">
+            <pre className="mb-3 rounded-lg p-3 font-mono text-xs overflow-x-auto border border-ds-border-status-completed-default-default bg-ds-bg-completed-subtle-default whitespace-pre-wrap text-ds-text-neutral-default-default">
               {children}
             </pre>
           ),
           blockquote: ({ children }) => (
-            <blockquote className="mb-3 rounded-r-lg border-l-4 border-emerald-300 bg-emerald-50 py-2 pl-4 italic text-emerald-700">
+            <blockquote className="mb-3 rounded-r-lg py-2 pl-4 border-l-4 border-ds-border-status-completed-default-default bg-ds-bg-completed-subtle-default text-ds-text-status-completed-muted-default italic">
               {children}
             </blockquote>
           ),
           strong: ({ children }) => (
-            <strong className="font-semibold text-emerald-800">
+            <strong className="font-semibold text-ds-text-success-default-default">
               {children}
             </strong>
           ),
           em: ({ children }) => (
-            <em className="italic text-emerald-600">{children}</em>
+            <em className="text-ds-text-status-completed-muted-default italic">
+              {children}
+            </em>
+          ),
+          hr: () => (
+            <hr className="my-4 border-ds-border-status-completed-default-default" />
           ),
-          hr: () => <hr className="my-4 border-emerald-200" />,
         }}
       >
         {displayedContent}
diff --git a/src/components/ChatBox/MessageItem/TaskCompletionCard.tsx b/src/components/ChatBox/MessageItem/TaskCompletionCard.tsx
index 8efdf66f8..3a7ee19e7 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,15 +40,32 @@ 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 p-3 bg-ds-bg-neutral-default-default relative flex w-full flex-row items-center"
       >
-        {/* Description */}
-        <div className="flex w-full flex-col">
-          <div className="text-label-sm font-bold leading-normal text-text-body">
+        {onDismiss && (
+          <Button
+            type="button"
+            variant="secondary"
+            tone="default"
+            emphasis="default"
+            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-ds-text-neutral-default-default">
             {t('chat.task-completed-card-title')}
           </div>
-          <div className="text-label-sm font-medium leading-normal text-text-label">
+          <div className="text-label-sm font-medium leading-normal text-ds-text-neutral-subtle-default">
             {t('chat.task-completed-card-subtitle')}
           </div>
         </div>
@@ -55,7 +73,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/TaskWorkLogAccordion.tsx b/src/components/ChatBox/MessageItem/TaskWorkLogAccordion.tsx
new file mode 100644
index 000000000..a6c06fda2
--- /dev/null
+++ b/src/components/ChatBox/MessageItem/TaskWorkLogAccordion.tsx
@@ -0,0 +1,834 @@
+// ========= 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 ShinyText from '@/components/ui/ShinyText/ShinyText';
+import { agentMap, type WorkflowAgentType } from '@/components/WorkFlow/agents';
+import { MarkDown } from '@/components/WorkFlow/MarkDown';
+import { cn } from '@/lib/utils';
+import type { VanillaChatStore } from '@/store/chatStore';
+import {
+  AgentStep,
+  ChatTaskStatus,
+  type ChatTaskStatusType,
+} from '@/types/constants';
+import { AnimatePresence, motion } from 'framer-motion';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { formatSplittingElapsed } from './TokenUtils';
+
+const CONTENT_EASE: [number, number, number, number] = [0.32, 0.72, 0, 1];
+const HEIGHT_MOTION = {
+  height: { duration: 0.22, ease: CONTENT_EASE },
+  opacity: { duration: 0.16, ease: CONTENT_EASE },
+} as const;
+const MARKDOWN_DEFER_THRESHOLD = 1200;
+const MARKDOWN_DEFER_MS = 180;
+
+function normalizeToolkitMessage(value: unknown): string {
+  if (typeof value === 'string') return value;
+  if (value == null) return '';
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+/** Matches `getFormattedTaskTime` / task timer fields on the chat task. */
+function getTaskElapsedMs(task: {
+  status: ChatTaskStatusType;
+  taskTime: number;
+  elapsed: number;
+}): number {
+  if (task.status === ChatTaskStatus.RUNNING && task.taskTime !== 0) {
+    return Math.max(0, Date.now() - task.taskTime + task.elapsed);
+  }
+  return Math.max(0, task.elapsed);
+}
+
+type TaggedLog = {
+  entry: AgentMessage;
+  agentId: string;
+  agentType: string;
+  agentName: string;
+};
+
+function mergeTaggedAgentLogs(taskAssigning: Agent[] | undefined): TaggedLog[] {
+  if (!taskAssigning?.length) return [];
+  return taskAssigning.flatMap((a) =>
+    (a.log ?? []).map((entry) => ({
+      entry,
+      agentId: a.agent_id,
+      agentType: a.type,
+      agentName: agentMap[a.type as WorkflowAgentType]?.name ?? a.name,
+    }))
+  );
+}
+
+function titleCaseMethod(method: string): string {
+  if (!method) return '';
+  return method.charAt(0).toUpperCase() + method.slice(1);
+}
+
+function truncateText(text: string, max: number): string {
+  const t = text.trim();
+  if (t.length <= max) return t;
+  return `${t.slice(0, max - 1)}…`;
+}
+
+function formatToolSummary(
+  toolkitName: string,
+  method: string,
+  preview: string
+): string {
+  const p = preview.trim();
+  const head = `${toolkitName} · ${titleCaseMethod(method)}`;
+  return p ? `${head} — ${truncateText(p, 100)}` : head;
+}
+
+function toolRowTitle(toolkitName: string, method: string): string {
+  return `${toolkitName} · ${titleCaseMethod(method)}`;
+}
+
+type ToolSegment = {
+  id: string;
+  rowTitle: string;
+  toolkitName: string;
+  method: string;
+  summary: string;
+  detail: string;
+  status: 'running' | 'done';
+};
+
+/**
+ * One "action" — a bounded unit of agent work delimited by either an
+ * `ACTIVATE_AGENT` message (reasoning for the next tool burst) or an
+ * agent-id change in the chronological log.
+ */
+export type ActionGroup = {
+  id: string;
+  agentId: string;
+  agentType: string;
+  agentName: string;
+  /** The reasoning text from ACTIVATE_AGENT, if one bounded this group. */
+  reasoning: string | null;
+  /** `NOTICE` messages collected while this group was active. */
+  notices: string[];
+  /** Tool invocations that fired while this group was active. */
+  tools: ToolSegment[];
+  /**
+   * `running` until either a newer group starts, the agent emits
+   * `DEACTIVATE_AGENT`, or the overall task leaves RUNNING. The component
+   * re-derives final status with the task-level context.
+   */
+  status: 'running' | 'done';
+  /**
+   * `preparation` is the synthetic group that collapses the workforce's
+   * leading `register agent` toolkit calls into one "Preparing agents" row.
+   * Everything else is `action`.
+   */
+  kind: 'preparation' | 'action';
+};
+
+const PREPARATION_GROUP_ID = 'g-prep';
+const PREPARATION_GROUP_LABEL = 'Preparing agents';
+
+function isRegisterAgentEvent(entry: AgentMessage): boolean {
+  if (
+    entry.step !== AgentStep.ACTIVATE_TOOLKIT &&
+    entry.step !== AgentStep.DEACTIVATE_TOOLKIT
+  ) {
+    return false;
+  }
+  return (
+    (entry.data?.method_name ?? '').trim().toLowerCase() === 'register agent'
+  );
+}
+
+/**
+ * Exported for unit tests. Folds a tagged, chronological log into
+ * `ActionGroup[]`, pairing DEACTIVATE_TOOLKIT with the most recent matching
+ * running tool inside the active group.
+ */
+export function buildActionGroups(tagged: TaggedLog[]): ActionGroup[] {
+  const groups: ActionGroup[] = [];
+  const cursor: { current: ActionGroup | null } = { current: null };
+  let prep: ActionGroup | null = null;
+
+  // The workforce factory wires up agents via `register agent` toolkit calls.
+  // Those calls can appear as a leading burst *and* sprinkled in mid-run
+  // whenever a new specialist (e.g. a multi-modal agent) is lazily registered
+  // after another agent has already started acting. We always route them to
+  // a single synthetic "Preparing agents" group pinned at the top so the
+  // currently-active agent's action group is not interrupted by registration
+  // noise.
+  const ensurePrep = (): ActionGroup => {
+    if (!prep) {
+      prep = {
+        id: PREPARATION_GROUP_ID,
+        agentId: '__prep__',
+        agentType: '__prep__',
+        agentName: PREPARATION_GROUP_LABEL,
+        reasoning: null,
+        notices: [],
+        tools: [],
+        status: 'running',
+        kind: 'preparation',
+      };
+      groups.unshift(prep);
+    }
+    return prep;
+  };
+
+  const appendRegisterEvent = (tag: TaggedLog, idx: number) => {
+    const p = ensurePrep();
+    const entry = tag.entry;
+    const name = (entry.data?.toolkit_name ?? '').trim() || 'Tool';
+    const method = (entry.data?.method_name ?? '').trim();
+    const rawMsg = normalizeToolkitMessage(entry.data?.message).trim();
+
+    if (entry.step === AgentStep.ACTIVATE_TOOLKIT) {
+      p.tools.push({
+        id: `t-prep-${idx}`,
+        rowTitle: `${tag.agentName} · ${name}`,
+        toolkitName: name,
+        method,
+        summary: formatToolSummary(name, method, rawMsg),
+        detail: rawMsg,
+        status: 'running',
+      });
+      return;
+    }
+
+    for (let j = p.tools.length - 1; j >= 0; j--) {
+      const s = p.tools[j]!;
+      if (s.status !== 'running') continue;
+      if (s.toolkitName !== name || s.method !== method) continue;
+      s.status = 'done';
+      s.detail = [s.detail, rawMsg].filter(Boolean).join('\n\n').trim();
+      s.summary = formatToolSummary(name, method, s.detail);
+      break;
+    }
+  };
+
+  const startNew = (tag: TaggedLog, reasoning: string | null): ActionGroup => {
+    const g: ActionGroup = {
+      id: `g-${groups.length}-${tag.agentId}`,
+      agentId: tag.agentId,
+      agentType: tag.agentType,
+      agentName: tag.agentName,
+      reasoning,
+      notices: [],
+      tools: [],
+      status: 'running',
+      kind: 'action',
+    };
+    groups.push(g);
+    cursor.current = g;
+    return g;
+  };
+
+  const ensureGroupForAgent = (tag: TaggedLog): ActionGroup => {
+    const c = cursor.current;
+    if (!c || c.kind === 'preparation' || c.agentId !== tag.agentId) {
+      return startNew(tag, null);
+    }
+    return c;
+  };
+
+  for (let i = 0; i < tagged.length; i++) {
+    const tag = tagged[i]!;
+    const { entry } = tag;
+
+    if (isRegisterAgentEvent(entry)) {
+      appendRegisterEvent(tag, i);
+      continue;
+    }
+
+    if (entry.step === AgentStep.ACTIVATE_AGENT) {
+      const text = normalizeToolkitMessage(entry.data?.message).trim();
+      startNew(tag, text || null);
+      continue;
+    }
+
+    if (entry.step === AgentStep.DEACTIVATE_AGENT) {
+      const cur = cursor.current;
+      if (cur && cur.agentId === tag.agentId) cur.status = 'done';
+      continue;
+    }
+
+    if (entry.step === AgentStep.ACTIVATE_TOOLKIT) {
+      const name = (entry.data?.toolkit_name ?? '').trim() || 'Tool';
+      const method = (entry.data?.method_name ?? '').trim();
+      const rawMsg = normalizeToolkitMessage(entry.data?.message).trim();
+
+      if (name.toLowerCase() === 'notice') {
+        if (rawMsg) ensureGroupForAgent(tag).notices.push(rawMsg);
+        continue;
+      }
+
+      if (!method && !rawMsg) continue;
+
+      const g = ensureGroupForAgent(tag);
+      g.tools.push({
+        id: `t-${i}`,
+        rowTitle: toolRowTitle(name, method),
+        toolkitName: name,
+        method,
+        summary: formatToolSummary(name, method, rawMsg),
+        detail: rawMsg,
+        status: 'running',
+      });
+      continue;
+    }
+
+    if (entry.step === AgentStep.DEACTIVATE_TOOLKIT) {
+      const cur = cursor.current;
+      if (!cur) continue;
+      const name = (entry.data?.toolkit_name ?? '').trim();
+      const method = (entry.data?.method_name ?? '').trim();
+      const msg = normalizeToolkitMessage(entry.data?.message).trim();
+
+      for (let j = cur.tools.length - 1; j >= 0; j--) {
+        const s = cur.tools[j]!;
+        if (s.status !== 'running') continue;
+        if (s.toolkitName !== name || s.method !== method) continue;
+        s.status = 'done';
+        s.detail = [s.detail, msg].filter(Boolean).join('\n\n').trim();
+        s.summary = formatToolSummary(name, method, s.detail);
+        break;
+      }
+    }
+  }
+
+  // A non-last group is always done (a newer group started). The last group
+  // inherits the most recent explicit transition; component-level logic may
+  // still force all groups to 'done' when the task leaves RUNNING.
+  for (let i = 0; i < groups.length - 1; i++) {
+    groups[i]!.status = 'done';
+  }
+
+  return groups;
+}
+
+/** Title shown on a group header. Prefers reasoning; falls back to the latest tool. */
+export function getGroupTitle(group: ActionGroup): string {
+  if (group.reasoning) return group.reasoning;
+  const last = group.tools[group.tools.length - 1];
+  if (last) return last.rowTitle;
+  return 'Thinking…';
+}
+
+function getGroupHeaderTitle(group: ActionGroup): string {
+  if (group.kind === 'preparation') {
+    return group.tools.length > 0
+      ? `${group.agentName} · ${group.tools.length} Registered`
+      : group.agentName;
+  }
+
+  const lastTool = group.tools[group.tools.length - 1];
+  if (!lastTool) return `${group.agentName} · Thinking…`;
+
+  const parts = [group.agentName, lastTool.toolkitName];
+  if (lastTool.method) parts.push(titleCaseMethod(lastTool.method));
+  return parts.join(' · ');
+}
+
+/**
+ * Cheap digest of the task slice that affects this accordion, so any chat store
+ * mutation re-renders without relying on `updateCount` (rarely bumped).
+ */
+function useTaskWorkStoreSnapshot(
+  chatStore: VanillaChatStore,
+  taskId: string | null
+) {
+  return useSyncExternalStore(
+    (cb) => chatStore.subscribe(cb),
+    () => {
+      if (!taskId) return '';
+      const t = chatStore.getState().tasks[taskId];
+      if (!t) return '';
+      const logDigest = (t.taskAssigning ?? [])
+        .map((a) => {
+          const log = a.log ?? [];
+          const last = log[log.length - 1];
+          const msg = last?.data?.message;
+          const msgLen =
+            typeof msg === 'string'
+              ? msg.length
+              : msg != null
+                ? JSON.stringify(msg).length
+                : 0;
+          return `${log.length}:${last?.step ?? ''}:${msgLen}:${last?.data?.toolkit_name ?? ''}:${last?.data?.method_name ?? ''}`;
+        })
+        .join('>');
+      return `${t.status}|${t.taskTime}|${t.elapsed}|${logDigest}`;
+    },
+    () => ''
+  );
+}
+
+function useTaskWorkLogData(
+  chatStore: VanillaChatStore,
+  taskId: string | null,
+  _snapshot: string
+) {
+  void _snapshot;
+  if (!taskId) {
+    return { task: undefined, groups: [] as ActionGroup[] };
+  }
+  const t = chatStore.getState().tasks[taskId];
+  const tagged = mergeTaggedAgentLogs(t?.taskAssigning);
+  const groups = buildActionGroups(tagged);
+  return { task: t, groups };
+}
+
+function useWorkLogElapsedMs(
+  chatStore: VanillaChatStore,
+  taskId: string | null,
+  snapshot: string
+): number {
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    const t = taskId ? chatStore.getState().tasks[taskId] : null;
+    if (t?.status !== ChatTaskStatus.RUNNING) return;
+    const id = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(id);
+  }, [chatStore, taskId, snapshot]);
+
+  void now;
+  if (!taskId) return 0;
+  const t = chatStore.getState().tasks[taskId];
+  if (!t) return 0;
+  return getTaskElapsedMs(t);
+}
+
+const ToolDetailRow = memo(function ToolDetailRow({
+  rowTitle,
+  detail,
+  status,
+}: {
+  rowTitle: string;
+  detail: string;
+  status: 'running' | 'done';
+}) {
+  const [open, setOpen] = useState(false);
+  const [renderMarkdown, setRenderMarkdown] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setRenderMarkdown(false);
+      return;
+    }
+
+    if (detail.length <= MARKDOWN_DEFER_THRESHOLD) {
+      setRenderMarkdown(true);
+      return;
+    }
+
+    const timer = window.setTimeout(
+      () => setRenderMarkdown(true),
+      MARKDOWN_DEFER_MS
+    );
+    return () => window.clearTimeout(timer);
+  }, [open, detail]);
+
+  return (
+    <div className="min-w-0 flex w-full flex-col items-start">
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+        className="group min-w-0 gap-1 py-0.5 inline-flex max-w-full items-center self-start text-left transition-opacity hover:opacity-80"
+      >
+        {status === 'running' ? (
+          <ShinyText
+            text={rowTitle}
+            speed={2.5}
+            className="!text-label-xs font-medium min-w-0 text-ds-text-neutral-subtle-default shrink overflow-hidden text-ellipsis whitespace-nowrap"
+          />
+        ) : (
+          <span className="!text-label-xs font-medium min-w-0 text-ds-text-neutral-subtle-default shrink overflow-hidden text-ellipsis whitespace-nowrap">
+            {rowTitle}
+          </span>
+        )}
+        <ChevronRight
+          size={16}
+          aria-hidden
+          className={cn(
+            'text-ds-icon-neutral-subtle-default shrink-0 transition-[opacity,transform] duration-200',
+            open
+              ? 'rotate-90 opacity-100'
+              : 'rotate-0 opacity-0 group-focus-within:opacity-100 group-hover:opacity-100'
+          )}
+        />
+      </button>
+      <AnimatePresence initial={false}>
+        {open ? (
+          <motion.div
+            key="tool-detail"
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={HEIGHT_MOTION}
+            className="min-w-0 mt-1 w-full overflow-hidden"
+          >
+            {detail ? (
+              <div className="p-2 bg-ds-bg-neutral-muted-default rounded-md w-full opacity-60">
+                {renderMarkdown ? (
+                  <MarkDown
+                    content={detail}
+                    enableTypewriter={false}
+                    pTextSize="text-label-xs text-ds-text-neutral-default-default"
+                  />
+                ) : (
+                  <p className="text-label-xs text-ds-text-neutral-default-default m-0">
+                    Rendering details...
+                  </p>
+                )}
+              </div>
+            ) : null}
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </div>
+  );
+});
+ToolDetailRow.displayName = 'ToolDetailRow';
+
+const ActionGroupRow = memo(function ActionGroupRow({
+  group,
+  isLastRunning,
+  taskRunning,
+  open,
+  onToggle,
+}: {
+  group: ActionGroup;
+  isLastRunning: boolean;
+  taskRunning: boolean;
+  open: boolean;
+  onToggle: () => void;
+}) {
+  const running = group.status === 'running' || isLastRunning;
+  const headerTitle = getGroupHeaderTitle(group);
+
+  return (
+    <div className="min-w-0 flex w-full flex-col">
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={onToggle}
+        className="min-w-0 gap-2 py-1 my-1 flex w-fit max-w-full items-center text-left transition-opacity hover:opacity-80"
+      >
+        <span className="text-label-sm font-normal min-w-0 max-w-full truncate">
+          {running ? (
+            <ShinyText
+              text={headerTitle}
+              speed={2.5}
+              className="text-label-sm font-normal text-ds-text-neutral-muted-default truncate"
+            />
+          ) : (
+            <span className="text-ds-text-neutral-muted-default">
+              {headerTitle}
+            </span>
+          )}
+        </span>
+        {open ? (
+          <ChevronDown
+            size={16}
+            aria-hidden
+            className="text-ds-icon-neutral-subtle-default shrink-0"
+          />
+        ) : (
+          <ChevronRight
+            size={16}
+            aria-hidden
+            className="text-ds-icon-neutral-subtle-default shrink-0"
+          />
+        )}
+      </button>
+
+      <AnimatePresence initial={false}>
+        {open ? (
+          <motion.div
+            key="group-body"
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={HEIGHT_MOTION}
+            className="min-w-0 overflow-hidden"
+          >
+            <div className="py-1 gap-2 flex flex-col">
+              {group.reasoning ? (
+                <p className="text-label-sm text-ds-text-neutral-subtle-default break-words whitespace-pre-wrap">
+                  {group.reasoning}
+                </p>
+              ) : null}
+              {group.notices.map((notice, i) => (
+                <p
+                  key={`n-${i}`}
+                  className="text-label-sm text-ds-text-neutral-subtle-default break-words whitespace-pre-wrap"
+                >
+                  {notice}
+                </p>
+              ))}
+              {group.tools.map((tool) => (
+                <ToolDetailRow
+                  key={tool.id}
+                  rowTitle={tool.rowTitle}
+                  detail={tool.detail}
+                  status={
+                    taskRunning &&
+                    group.status === 'running' &&
+                    tool.status === 'running'
+                      ? 'running'
+                      : 'done'
+                  }
+                />
+              ))}
+              {group.tools.length === 0 && running && !group.reasoning && (
+                <p className="text-label-sm text-ds-text-neutral-subtle-default italic">
+                  Waiting for tool calls…
+                </p>
+              )}
+            </div>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </div>
+  );
+});
+ActionGroupRow.displayName = 'ActionGroupRow';
+
+/**
+ * Per-group open state with user override.
+ * - Default: every group is folded.
+ * - User clicks set an override for the current phase only. When a group
+ *   transitions running → done, its override is cleared so auto-fold wins
+ *   unless the user toggles again after the transition.
+ */
+function useGroupOpenState(groups: ActionGroup[]): {
+  isOpen: (group: ActionGroup) => boolean;
+  toggle: (id: string) => void;
+} {
+  // key → open flag. Key is `${id}:${phase}` so each phase owns its override.
+  const [overrides, setOverrides] = useState<Map<string, boolean>>(new Map());
+  const prevStatusRef = useRef<Map<string, 'running' | 'done'>>(new Map());
+
+  useEffect(() => {
+    const prev = prevStatusRef.current;
+    const next = new Map<string, 'running' | 'done'>();
+    for (const g of groups) next.set(g.id, g.status);
+    prevStatusRef.current = next;
+
+    // Drop overrides whose group disappeared, plus running-phase overrides
+    // for any group that just flipped to done.
+    setOverrides((current) => {
+      if (current.size === 0) return current;
+      const live = new Set(groups.map((g) => g.id));
+      let changed = false;
+      const updated = new Map(current);
+      for (const key of current.keys()) {
+        const [id, phase] = key.split(':') as [string, 'running' | 'done'];
+        if (!live.has(id)) {
+          updated.delete(key);
+          changed = true;
+          continue;
+        }
+        if (phase === 'running' && next.get(id) === 'done') {
+          updated.delete(key);
+          changed = true;
+        }
+      }
+      // No-op branch: also track that prev tracked running transitioning away.
+      void prev;
+      return changed ? updated : current;
+    });
+  }, [groups]);
+
+  const phaseKey = (group: ActionGroup) => `${group.id}:${group.status}`;
+
+  const isOpen = useCallback(
+    (group: ActionGroup) => {
+      const override = overrides.get(phaseKey(group));
+      if (override !== undefined) return override;
+      return false;
+    },
+    [overrides]
+  );
+
+  const toggle = useCallback(
+    (id: string) => {
+      setOverrides((prev) => {
+        const group = groups.find((g) => g.id === id);
+        if (!group) return prev;
+        const key = `${group.id}:${group.status}`;
+        const currentlyOpen = prev.has(key)
+          ? (prev.get(key) as boolean)
+          : false;
+        const next = new Map(prev);
+        next.set(key, !currentlyOpen);
+        return next;
+      });
+    },
+    [groups]
+  );
+
+  return { isOpen, toggle };
+}
+
+export interface TaskWorkLogAccordionProps {
+  chatStore: VanillaChatStore;
+  taskId: string | null;
+  className?: string;
+}
+
+export function TaskWorkLogAccordion({
+  chatStore,
+  taskId,
+  className,
+}: TaskWorkLogAccordionProps) {
+  const { t: _t } = useTranslation();
+  const snapshot = useTaskWorkStoreSnapshot(chatStore, taskId);
+  const { task, groups } = useTaskWorkLogData(chatStore, taskId, snapshot);
+  const status = task?.status;
+  const elapsedMs = useWorkLogElapsedMs(chatStore, taskId, snapshot);
+  const taskRunning = status === ChatTaskStatus.RUNNING;
+
+  // Normalize group status with task-level context — once the task stops,
+  // every group is done regardless of whether DEACTIVATE_AGENT arrived.
+  const effectiveGroups = useMemo(() => {
+    if (taskRunning) return groups;
+    return groups.map((g) =>
+      g.status === 'done' ? g : { ...g, status: 'done' as const }
+    );
+  }, [groups, taskRunning]);
+
+  const { isOpen, toggle } = useGroupOpenState(effectiveGroups);
+
+  const [outerOpen, setOuterOpen] = useState(() => taskRunning);
+
+  useEffect(() => {
+    if (status === ChatTaskStatus.FINISHED) {
+      setOuterOpen(false);
+    } else if (status === ChatTaskStatus.RUNNING) {
+      setOuterOpen(true);
+    }
+  }, [status]);
+
+  if (!taskId || !task) return null;
+
+  const allowed =
+    status === ChatTaskStatus.RUNNING ||
+    status === ChatTaskStatus.FINISHED ||
+    status === ChatTaskStatus.PAUSE;
+
+  if (!allowed) return null;
+  if (!taskRunning && effectiveGroups.length === 0) return null;
+
+  const timeLabel = formatSplittingElapsed(elapsedMs);
+
+  return (
+    <div className={cn('min-w-0 my-2 flex w-full flex-col', className)}>
+      <button
+        type="button"
+        aria-expanded={outerOpen}
+        onClick={() => setOuterOpen((v) => !v)}
+        className="gap-1 py-2 min-w-0 flex w-full items-center justify-start text-left"
+      >
+        <span className="text-body-sm font-medium text-ds-text-neutral-muted-default">
+          {status === ChatTaskStatus.RUNNING ||
+          status === ChatTaskStatus.PAUSE ? (
+            <Trans
+              i18nKey="chat.working-on-tasks-for"
+              values={{ time: timeLabel }}
+              components={{
+                elapsed: (
+                  <span className="text-ds-text-neutral-subtle-default tabular-nums" />
+                ),
+              }}
+            />
+          ) : (
+            <Trans
+              i18nKey="chat.worked-for"
+              values={{ time: timeLabel }}
+              components={{
+                elapsed: (
+                  <span className="text-ds-text-neutral-subtle-default tabular-nums" />
+                ),
+              }}
+            />
+          )}
+        </span>
+        {outerOpen ? (
+          <ChevronDown
+            size={16}
+            strokeWidth={2}
+            aria-hidden
+            className="text-ds-icon-neutral-muted-default shrink-0"
+          />
+        ) : (
+          <ChevronRight
+            size={16}
+            strokeWidth={2}
+            aria-hidden
+            className="text-ds-icon-neutral-muted-default shrink-0"
+          />
+        )}
+      </button>
+
+      <AnimatePresence initial={false}>
+        {outerOpen ? (
+          <motion.div
+            key="work-log-body"
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={HEIGHT_MOTION}
+            className="overflow-hidden"
+          >
+            <div className="gap-1 pb-1 min-w-0 flex flex-col">
+              {effectiveGroups.map((group, i) => {
+                const isLastRunning =
+                  taskRunning &&
+                  i === effectiveGroups.length - 1 &&
+                  group.status === 'running';
+                return (
+                  <ActionGroupRow
+                    key={group.id}
+                    group={group}
+                    isLastRunning={isLastRunning}
+                    taskRunning={taskRunning}
+                    open={isOpen(group)}
+                    onToggle={() => toggle(group.id)}
+                  />
+                );
+              })}
+            </div>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/src/components/ChatBox/TokenUtils.tsx b/src/components/ChatBox/MessageItem/TokenUtils.tsx
similarity index 85%
rename from src/components/ChatBox/TokenUtils.tsx
rename to src/components/ChatBox/MessageItem/TokenUtils.tsx
index 3464e2998..042eb49d0 100644
--- a/src/components/ChatBox/TokenUtils.tsx
+++ b/src/components/ChatBox/MessageItem/TokenUtils.tsx
@@ -28,6 +28,19 @@ const TOKEN_UNITS = [
   { threshold: 1_000, suffix: 'K' },
 ] as const;
 
+/**
+ * Elapsed time during splitting / planning: seconds, then minutes + seconds.
+ * Examples: "0s", "45s", "1m 05s", "12m 00s"
+ */
+export function formatSplittingElapsed(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 0) return '0s';
+  const sec = Math.floor(ms / 1000);
+  if (sec < 60) return `${sec}s`;
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return `${m}m ${s.toString().padStart(2, '0')}s`;
+}
+
 export function formatTokenCount(n: number): string {
   if (!Number.isFinite(n)) return '0';
 
diff --git a/src/components/ChatBox/MessageItem/UserMessageCard.tsx b/src/components/ChatBox/MessageItem/UserMessageCard.tsx
index c05002b1d..77ae1f501 100644
--- a/src/components/ChatBox/MessageItem/UserMessageCard.tsx
+++ b/src/components/ChatBox/MessageItem/UserMessageCard.tsx
@@ -14,38 +14,32 @@
 
 import { useHost } from '@/host';
 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 = {
+  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;
@@ -65,9 +59,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);
@@ -101,178 +122,199 @@ export function UserMessageCard({
   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="h-4 w-4 text-ds-icon-neutral-default-default" />;
     }
-    return <FileText className="h-4 w-4 text-icon-primary" />;
+    return (
+      <FileText className="h-4 w-4 text-ds-icon-neutral-default-default" />
+    );
   };
 
-  const handleOpenSkillFolder = useCallback(
-    async (skillName: string) => {
-      const { skillGetPathByName } = await import('@/api/brain');
-      const res = await skillGetPathByName(skillName);
-      if (res?.path && ipcRenderer?.invoke) {
-        ipcRenderer.invoke('reveal-in-folder', res.path);
-      }
-    },
-    [ipcRenderer]
-  );
-
-  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;
-
-            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();
-                        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>
+    <div key={id} className={cn('group/msg relative w-full', className)}>
+      <div className="rounded-xl py-2 px-4 bg-ds-bg-neutral-default-default 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;
 
-                      {/* 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-ds-bg-neutral-default-default hover:bg-ds-bg-neutral-default-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();
+                          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 relative min-h-px min-w-px flex-1 overflow-hidden font-['Inter'] overflow-ellipsis whitespace-nowrap text-ds-text-neutral-default-default"
+                          )}
+                          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();
-                                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 relative flex items-center bg-ds-bg-neutral-strong-default"
+                          onMouseEnter={openRemainingPopover}
+                          onMouseLeave={scheduleCloseRemainingPopover}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                          }}
+                        >
+                          <span className="text-label-xs font-bold leading-tight font-['Inter'] whitespace-nowrap text-ds-text-neutral-default-default">
+                            {remainingCount}+
+                          </span>
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent
+                        align="end"
+                        sideOffset={4}
+                        className="max-w-40 rounded-md p-1 shadow-perfect !w-auto border border-ds-border-neutral-subtle-default bg-ds-bg-neutral-default-default"
+                        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 py-0.5 flex cursor-pointer items-center bg-ds-bg-neutral-strong-default transition-colors duration-300 hover:bg-ds-bg-neutral-default-hover"
+                                onMouseLeave={() =>
+                                  setHoveredFilePath((prev) =>
+                                    prev === file.filePath ? null : prev
+                                  )
+                                }
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  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 flex-1 overflow-hidden font-['Inter'] text-ellipsis whitespace-nowrap text-ds-text-neutral-default-default">
+                                  {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 bg-ds-bg-neutral-default-default pointer-events-none absolute z-[1]"
+                style={USER_MESSAGE_FOLD_FADE_STYLE}
+                aria-hidden
+              />
+            )}
+          </div>
         </div>
-      )}
+        <div className="bottom-1 right-2 gap-0.5 pointer-events-none absolute z-10 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-ds-text-success-default-default" />
+            ) : (
+              <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..acadfe03f
--- /dev/null
+++ b/src/components/ChatBox/MessageItem/UserMessageRichContent.tsx
@@ -0,0 +1,165 @@
+// ========= 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 { useHost } from '@/host';
+import {
+  RICH_SKILL_STYLE_CLASSES,
+  hashSkillLabel,
+  httpUrlOrNull,
+  isSafeSkillFolderName,
+  tokenizeRichPlainText,
+} from '@/lib/richText';
+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;
+
+const SKILL_TAG_REGEX = /\{\{([^}]+)\}\}/g;
+
+type ContentNode =
+  | { type: 'text'; value: string }
+  | { type: 'skill'; name: 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: 'text', value: m[0] });
+    } 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 }];
+}
+
+function renderMessageRichSegments(text: string, keyPrefix: string): ReactNode {
+  return tokenizeRichPlainText(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 = httpUrlOrNull(seg.text);
+      if (href) {
+        return (
+          <a
+            key={key}
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-ds-text-information-default-default decoration-ds-border-information-default-default underline underline-offset-2"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {seg.text}
+          </a>
+        );
+      }
+      return <span key={key}>{seg.text}</span>;
+    }
+    const clsIdx = hashSkillLabel(seg.text) % RICH_SKILL_STYLE_CLASSES.length;
+    return (
+      <span
+        key={key}
+        className={cn(
+          'rounded px-0.5 font-normal inline align-baseline',
+          RICH_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: `{{skill}}`, `#skill`, URLs — matches `UserMessageCard`.
+ * `{{@…}}` is shown as plain text until a dedicated mention renderer exists.
+ */
+export function UserMessageRichContent({
+  content,
+  variant = 'card',
+  className,
+}: UserMessageRichContentProps) {
+  const host = useHost();
+  const contentNodes = parseContentWithTags(content);
+
+  const handleOpenSkillFolder = (skillName: string) => {
+    if (!isSafeSkillFolderName(skillName)) return;
+    host?.electronAPI?.openSkillFolder?.(skillName);
+  };
+
+  const bodyClass =
+    variant === 'card'
+      ? 'text-ds-text-neutral-default-default font-sans relative z-0 break-words whitespace-pre-wrap'
+      : 'text-ds-text-neutral-muted-default 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>
+            );
+          }
+          const skillToken = `#${node.name}`;
+          const clsIdx =
+            hashSkillLabel(skillToken) % RICH_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',
+                RICH_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..90c5bc46f 100644
--- a/src/components/ChatBox/ProjectSection.tsx
+++ b/src/components/ChatBox/ProjectSection.tsx
@@ -16,7 +16,7 @@ import { VanillaChatStore } from '@/store/chatStore';
 import { AgentStep } from '@/types/constants';
 import { motion } from 'framer-motion';
 import React from 'react';
-import { FloatingAction } from './FloatingAction';
+import { FloatingAction } from './MessageItem/FloatingAction';
 import { UserQueryGroup } from './UserQueryGroup';
 
 interface ProjectSectionProps {
@@ -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/README.md b/src/components/ChatBox/README.md
index fab5fc885..f123c4d38 100644
--- a/src/components/ChatBox/README.md
+++ b/src/components/ChatBox/README.md
@@ -1,285 +1,112 @@
-# ChatBox Component Structure
+# ChatBox component structure
 
-This document explains the new Message ChatBox structure and the relationships between different components in the ChatBox folder.
+This document describes the ChatBox layout, how the main pieces connect, and where to change behavior. Paths are relative to `src/components/ChatBox/`.
 
 ## Overview
 
-The ChatBox component has been restructured to support a multi-turn conversation system with improved message organization, task management, and user interaction patterns. The new structure separates concerns and provides better scalability for handling complex chat interactions.
+ChatBox is the main chat surface: it wires **project + chat store** data to **message threads**, **task / workforce UI**, and the **BottomBox** composer. It supports multi-turn flows, task planning, splitting, and execution with scroll and timeline affordances.
 
-## Architecture
+## Architecture (folders)
 
-### Core Structure
-
-```
+```text
 ChatBox/
-├── index.tsx                    # Main ChatBox container and orchestration
-├── ProjectChatContainer.tsx     # Project-level chat container
-├── ProjectSection.tsx           # Individual project section
-├── UserQueryGroup.tsx           # User query and response grouping
-├── TaskCard.tsx                 # Task planning and execution display
-├── MessageCard.tsx              # Individual message rendering
-├── TypeCardSkeleton.tsx         # Loading skeleton for task planning
-├── NoticeCard.tsx               # Chain of thought display
-├── FloatingAction.tsx           # Floating action buttons
-├── TaskItem.tsx                 # Individual task item component
-├── TaskType.tsx                 # Task type indicator
-├── MarkDown.tsx                 # Markdown content rendering
-├── SummaryMarkDown.tsx          # Summary markdown rendering
-└── BottomBox/                   # Input and action components
-    ├── index.tsx               # BottomBox container
-    ├── InputBox.tsx            # Message input component
-    ├── BoxAction.tsx           # Action buttons
-    ├── BoxHeader.tsx           # Header with task info
-    └── QueuedBox.tsx           # Queued messages display
+├── index.tsx                 # Main shell: layout, chat timeline, send/stop, BottomBox
+├── ChatTimeline.tsx         # Per-project task/chat rail or popover (narrow layout)
+├── ProjectChatContainer.tsx  # Scroll region + all chat stores for the active project
+├── ProjectSection.tsx        # One chat store: query groups, FloatingAction
+├── UserQueryGroup.tsx        # One user query → messages, task UI, agent results
+│
+├── TaskBox/                 # Plan / run task UI
+│   ├── TaskCard.tsx         # Plan list, progress, filter, expand (workforce subtasks)
+│   ├── TaskItem.tsx         # Editable line in the plan
+│   ├── TaskType.tsx         # Task type indicator
+│   ├── TypeCardSkeleton.tsx  # Loading skeleton while the plan is forming
+│   └── StreamingTaskList.tsx
+│
+├── MessageItem/             # All message- and log-specific UI
+│   ├── UserMessageCard.tsx
+│   ├── UserMessageRichContent.tsx
+│   ├── AgentMessageCard.tsx
+│   ├── NoticeCard.tsx
+│   ├── FeedbackCard.tsx
+│   ├── TaskCompletionCard.tsx
+│   ├── SplittingProgressRow.tsx   # “Splitting tasks” + token tick during decompose
+│   ├── TaskWorkLogAccordion.tsx  # Work log: tool / agent lines (workforce)
+│   ├── FloatingAction.tsx        # Pause / skip (used from ProjectSection)
+│   ├── MarkDown.tsx
+│   ├── SummaryMarkDown.tsx
+│   └── TokenUtils.tsx            # Token animation + splitting elapsed formatting
+│
+└── BottomBox/                # Composer and chrome above input
+    ├── index.tsx
+    ├── InputBox.tsx
+    ├── RichChatInput.tsx
+    ├── ChatInputModelDropdown.tsx
+    ├── BoxAction.tsx
+    ├── BoxHeader.tsx
+    └── QueuedBox.tsx
 ```
 
-## Component Relationships
-
-### 1. Main Orchestration (`index.tsx`)
-
-**Purpose**: The main ChatBox component that orchestrates the entire chat experience.
-
-**Key Responsibilities**:
-
-- Manages chat state and project store integration
-- Handles message sending and task queuing
-- Controls BottomBox state based on task status
-- Manages privacy settings and file attachments
-- Handles task confirmation and replay functionality
-
-**Relationships**:
-
-- **Uses**: `ProjectChatContainer`, `BottomBox`
-- **Manages**: Chat store state, project store state, message queuing
-- **Controls**: Input state, task status, privacy settings
-
-### 2. Project Chat Container (`ProjectChatContainer.tsx`)
-
-**Purpose**: Container for all chat stores within an active project.
-
-**Key Responsibilities**:
-
-- Renders multiple chat stores for the active project
-- Manages scroll behavior and auto-scrolling
-- Handles intersection observer for scroll-based animations
-- Provides scrollbar visibility management
-
-**Relationships**:
-
-- **Uses**: `ProjectSection`
-- **Manages**: Multiple chat stores, scroll behavior
-- **Provides**: Scroll container for all project chats
-
-### 3. Project Section (`ProjectSection.tsx`)
-
-**Purpose**: Individual project section that groups messages by query cycles.
-
-**Key Responsibilities**:
-
-- Groups messages by user queries and responses
-- Renders query groups in chronological order
-- Manages floating action buttons
-- Provides project-level task management
-
-**Relationships**:
-
-- **Uses**: `UserQueryGroup`, `FloatingAction`
-- **Manages**: Message grouping, query cycles
-- **Provides**: Project-level task controls
-
-### 4. User Query Group (`UserQueryGroup.tsx`)
-
-**Purpose**: Groups a user query with its associated task and responses.
-
-**Key Responsibilities**:
-
-- Renders user message and associated task card
-- Manages sticky task box behavior
-- Handles skeleton loading states
-- Renders assistant responses and file lists
-- Manages intersection observer for active query tracking
-
-**Relationships**:
-
-- **Uses**: `MessageCard`, `TaskCard`, `TypeCardSkeleton`, `NoticeCard`
-- **Manages**: Query grouping, sticky behavior, loading states
-- **Provides**: Complete query-response cycle display
-
-### 5. Task Card (`TaskCard.tsx`)
-
-**Purpose**: Displays task planning, execution status, and progress.
-
-**Key Responsibilities**:
-
-- Shows task summary and progress
-- Displays task list with status indicators
-- Manages task filtering and expansion
-- Handles task editing and management
-- Provides task state visualization
-
-**Relationships**:
-
-- **Uses**: `TaskItem`, `TaskType`, `TaskState`
-- **Manages**: Task info, task running status, progress
-- **Provides**: Task planning and execution interface
-
-### 6. Message Card (`MessageCard.tsx`)
-
-**Purpose**: Renders individual messages with typewriter effects and attachments.
-
-**Key Responsibilities**:
-
-- Displays message content with markdown rendering
-- Manages typewriter effect for agent messages
-- Handles file attachments display
-- Provides copy functionality for user messages
-- Tracks completed typewriter effects globally
-
-**Relationships**:
-
-- **Uses**: `MarkDown`
-- **Manages**: Message content, typewriter effects, attachments
-- **Provides**: Individual message rendering
-
-### 7. Loading and State Components
-
-#### TypeCardSkeleton (`TypeCardSkeleton.tsx`)
-
-- **Purpose**: Loading skeleton for task planning phase
-- **Shows**: Animated placeholders for task planning
-- **Used by**: `UserQueryGroup` during skeleton phase
-
-#### NoticeCard (`NoticeCard.tsx`)
-
-- **Purpose**: Displays chain of thought reasoning
-- **Shows**: Expandable list of reasoning steps
-- **Used by**: `UserQueryGroup` for CoT display
-
-#### FloatingAction (`FloatingAction.tsx`)
-
-- **Purpose**: Floating action buttons for task control
-- **Shows**: Pause, Resume, Skip buttons
-- **Used by**: `ProjectSection` for task control
-
-### 8. Task Management Components
-
-#### TaskItem (`TaskItem.tsx`)
-
-- **Purpose**: Individual task item with editing capabilities
-- **Features**: Inline editing, task status, delete functionality
-- **Used by**: `TaskCard` for task list display
-
-#### TaskType (`TaskType.tsx`)
-
-- **Purpose**: Visual indicator for task type
-- **Shows**: Task type icons and labels
-- **Used by**: `TaskCard`, `TypeCardSkeleton`
-
-### 9. BottomBox Components
-
-The BottomBox directory contains input and action components:
-
-#### BottomBox (`BottomBox/index.tsx`)
-
-- **Purpose**: Main input and action container
-- **Manages**: Different states (input, confirm, running, finished, splitting)
-- **Coordinates**: Input, actions, and queued messages
-
-#### InputBox (`BottomBox/InputBox.tsx`)
-
-- **Purpose**: Message input with file attachments
-- **Features**: Text input, file drag-drop, send functionality
-- **Used by**: BottomBox for message input
-
-#### QueuedBox (`BottomBox/QueuedBox.tsx`)
-
-- **Purpose**: Displays queued messages
-- **Features**: Message queuing, removal, reordering
-- **Used by**: BottomBox for queued message management
-
-#### BoxAction (`BottomBox/BoxAction.tsx`)
-
-- **Purpose**: Action buttons for task control
-- **Features**: Confirm, edit, replay, pause/resume, skip
-- **Used by**: BottomBox for task actions
-
-#### BoxHeader (`BottomBox/BoxHeader.tsx`)
-
-- **Purpose**: Header with task information
-- **Shows**: Task summary, progress, timing
-- **Used by**: BottomBox for task status display
-
-## Data Flow
-
-### Message Flow
-
-1. **User Input** → `BottomBox/InputBox` → `index.tsx` → Chat Store
-1. **Message Processing** → `index.tsx` → Backend API
-1. **Response Rendering** → Chat Store → `ProjectChatContainer` → `ProjectSection` → `UserQueryGroup` → `MessageCard`
-
-### Task Flow
-
-1. **Task Planning** → `UserQueryGroup` → `TypeCardSkeleton` (loading) → `TaskCard` (planning)
-1. **Task Execution** → `TaskCard` → Task status updates → `FloatingAction` (controls)
-1. **Task Completion** → `TaskCard` → Final results → `MessageCard` (end message)
-
-### State Management
-
-- **Chat Store**: Manages individual chat sessions and tasks
-- **Project Store**: Manages multiple chat stores per project
-- **Component State**: Local UI state (expanded/collapsed, active queries, etc.)
+## Core responsibilities
 
-## Key Features
+### `index.tsx`
 
-### Multi-Turn Conversations
+- Composes `ProjectChatContainer`, `BottomBox`, and (when used) `ChatTimeline`.
+- Connects to `useChatStoreAdapter`, `projectStore`, navigation, and session chrome (e.g. scroll padding, task time display, pause/resume).
+- Owns high-level task operations (send, stop, share, history hooks) and passes props into children.
 
-- Each user query creates a new query group
-- Task cards are sticky and follow the user query
-- Messages are grouped by query cycles for better organization
+### `ProjectChatContainer.tsx`
 
-### Task Management
+- Renders the stack of per–chat-id sections for the active project.
+- Owns scroll behavior and “stick to bottom” / padding for the last message and BottomBox.
 
-- Visual task planning with skeleton loading
-- Real-time task execution status
-- Task filtering and expansion
-- Inline task editing capabilities
+### `ProjectSection.tsx`
 
-### Message Queuing
+- One **vanilla `chatStore`** instance: subscribes to it and maps **messages** into **query groups** (see `UserQueryGroup`).
+- Hosts `FloatingAction` (pause, skip) for the active task.
 
-- Messages can be queued when tasks are busy
-- Queued messages are displayed in a separate box
-- Automatic processing when current task completes
+### `UserQueryGroup.tsx`
 
-### Responsive Design
+- A **single user turn**: user content, then downstream UI driven by `AgentStep` / `ChatTaskStatus` (e.g. splitting, task card, agent completion, notices).
+- Imports from `TaskBox/` and `MessageItem/`; this is the main place new message *shapes* are routed.
 
-- Sticky task cards that adapt to scroll position
-- Smooth animations and transitions
-- Intersection observer for performance optimization
+## TaskBox (`TaskBox/`)
 
-### File Handling
+- **`TaskCard`**: Task type 1/2/3 flows—plan text, `taskRunning` rows, filter tabs, link to the chat that owns a subtask, expand/collapse with session-backed preference.
+- **`TaskItem`**: Single plan line edit/delete.
+- **`TypeCardSkeleton`**: Shown while the model is decomposing before `to_sub_tasks` is ready.
+- **`StreamingTaskList`**: Renders running subtasks during streaming / updates.
 
-- File attachments in messages
-- File list display in end messages
-- Click-to-reveal functionality
+## MessageItem (`MessageItem/`)
 
-## Usage Patterns
+- **`UserMessageCard` / `UserMessageRichContent`**: User bubble + rich blocks.
+- **`AgentMessageCard`**: Assistant markdown, optional typewriter, attachments.
+- **`SplittingProgressRow`**: Shown while the task is in the splitting phase; uses store `taskTime` / `elapsed` when present, with a per-session wall-clock fallback when not.
+- **`TaskWorkLogAccordion`**: Collapsible work log for running/finished/paused task (tool activate/deactivate, agent lines); Framer `height: auto` for expand, stable segment keys from the merged log.
+- **`TaskCompletionCard`**: Completion / summary style card when appropriate.
+- **`NoticeCard`**: Chain-of-thought or notice-style content.
+- **`FeedbackCard`**: Thumbs / feedback when enabled.
+- **`FloatingAction`**: Compact floating controls (wired from `ProjectSection`).
+- **`TokenUtils`**: Animated token number and `formatSplittingElapsed` helpers.
 
-### Adding New Message Types
+## BottomBox (`BottomBox/`)
 
-1. Add message type handling in `UserQueryGroup.tsx`
-1. Create specific rendering logic in the appropriate component
-1. Update message grouping logic in `ProjectSection.tsx`
+- **`index.tsx`**: Wires `BoxHeader`, `InputBox` / `RichChatInput`, `BoxAction`, `QueuedBox` to task state (pending, running, confirm, etc.).
+- **`InputBox` / `RichChatInput` / `ChatInputModelDropdown`**: Text input, model picker, rich input where applicable.
+- **`BoxAction`**: Confirm, edit, send, stop, and related actions.
+- **`BoxHeader`**: Task summary, timing, and header affordances.
+- **`QueuedBox`**: Queued user messages when the task pipeline is busy.
 
-### Extending Task Management
+## Data flow (short)
 
-1. Add new task states in `TaskCard.tsx`
-1. Update task filtering logic
-1. Add corresponding UI elements in `TaskItem.tsx`
+1. **User input** → `BottomBox` → `index.tsx` / store → API or store updates.
+1. **SSE / store updates** → `ProjectChatContainer` → `ProjectSection` → `UserQueryGroup` → `MessageItem` / `TaskBox` by step and status.
+1. **State** → **`chatStore`** (per chat), **`projectStore`** (project + which chat is active), plus local component state (expand, scroll, active query).
 
-### Customizing Message Rendering
+## Extending the UI
 
-1. Modify `MessageCard.tsx` for basic message display
-1. Update `MarkDown.tsx` for content rendering
-1. Add new attachment types as needed
+- **New agent or system message type**: branch in `UserQueryGroup.tsx` (and possibly `ProjectSection` if grouping changes).
+- **New task UI**: add under `TaskBox/` and mount from `UserQueryGroup` or `TaskCard` as needed.
+- **New bubble content**: add a card under `MessageItem/` and import it from `UserQueryGroup` (or the parent that owns that message list).
 
-This structure provides a scalable foundation for complex chat interactions while maintaining clear separation of concerns and efficient state management.
+This layout keeps **transport and layout** (`index`, `Project*`) separate from **message rendering** (`MessageItem/`) and **task planning/execution** (`TaskBox/`), and **composer** behavior (`BottomBox/`).
diff --git a/src/components/ChatBox/TaskBox/StreamingTaskList.tsx b/src/components/ChatBox/TaskBox/StreamingTaskList.tsx
index e03b4e6e4..69a70e0a2 100644
--- a/src/components/ChatBox/TaskBox/StreamingTaskList.tsx
+++ b/src/components/ChatBox/TaskBox/StreamingTaskList.tsx
@@ -71,17 +71,17 @@ 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 py-sm bg-ds-bg-neutral-default-default relative h-auto w-full overflow-hidden">
+          <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"
+              className="animate-spin text-ds-icon-information-default-default"
             />
-            <span className="animate-pulse text-sm text-text-secondary">
+            <span className="animate-pulse text-sm text-ds-text-neutral-subtle-default">
               {t('layout.task-splitting')}...
             </span>
           </div>
@@ -91,23 +91,23 @@ 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 py-sm bg-ds-bg-neutral-default-default relative h-auto w-full overflow-hidden">
         {/* 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">
+          <span className="text-xs font-medium text-ds-text-neutral-subtle-default">
             {t('layout.tasks')} {tasks.length}
           </span>
         </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,26 +115,29 @@ 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 bg-ds-bg-neutral-subtle-default 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}
-                      className="animate-spin text-icon-information"
+                      className="animate-spin text-ds-icon-information-default-default"
                     />
                   ) : (
-                    <CircleDashed size={13} className="text-icon-secondary" />
+                    <CircleDashed
+                      size={13}
+                      className="text-ds-icon-neutral-muted-default"
+                    />
                   )}
                 </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 pb-2 relative flex w-full items-start">
+                  <span className="text-label-xs text-ds-text-neutral-default-default">
                     {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-ds-icon-information-default-default inline-block" />
                     )}
                   </span>
                 </div>
diff --git a/src/components/ChatBox/TaskBox/TaskCard.tsx b/src/components/ChatBox/TaskBox/TaskCard.tsx
index ed1e7c7db..5c284f489 100644
--- a/src/components/ChatBox/TaskBox/TaskCard.tsx
+++ b/src/components/ChatBox/TaskBox/TaskCard.tsx
@@ -29,7 +29,37 @@ import {
   Plus,
   TriangleAlert,
 } from 'lucide-react';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+const TASK_CARD_EXPAND_STORAGE_PREFIX = 'eigent:task-card-expanded';
+
+function getTaskCardExpandStorageKey(
+  chatId: string | undefined,
+  activeTaskId: string | undefined
+): string | null {
+  if (!activeTaskId) return null;
+  if (chatId)
+    return `${TASK_CARD_EXPAND_STORAGE_PREFIX}:${chatId}:${activeTaskId}`;
+  return `${TASK_CARD_EXPAND_STORAGE_PREFIX}:${activeTaskId}`;
+}
+
+function readStoredTaskCardExpanded(key: string | null): boolean {
+  if (!key || typeof window === 'undefined') return false;
+  try {
+    return sessionStorage.getItem(key) === '1';
+  } catch {
+    return false;
+  }
+}
+
+function writeStoredTaskCardExpanded(key: string | null, expanded: boolean) {
+  if (!key || typeof window === 'undefined') return;
+  try {
+    sessionStorage.setItem(key, expanded ? '1' : '0');
+  } catch {
+    /* ignore quota / private mode */
+  }
+}
 
 interface TaskCardProps {
   taskInfo: any[];
@@ -61,7 +91,6 @@ export function TaskCard({
 }: TaskCardProps) {
   const host = useHost();
   const electronAPI = host?.electronAPI;
-  const [isExpanded, setIsExpanded] = useState(true);
   const contentRef = useRef<HTMLDivElement>(null);
   const [contentHeight, setContentHeight] = useState<number | 'auto'>('auto');
   const [selectedState, setSelectedState] = useState<TaskStateType>('all');
@@ -74,7 +103,21 @@ export function TaskCard({
   const activeTaskId = chatStore?.activeTaskId as string;
   const activeTask = chatStore?.tasks?.[activeTaskId];
   const activeTaskStatus = activeTask?.status;
-  const activeWorkspace = activeTask?.activeWorkspace;
+  const expandStorageKey = getTaskCardExpandStorageKey(chatId, activeTaskId);
+
+  const [isExpanded, setIsExpanded] = useState(() =>
+    readStoredTaskCardExpanded(
+      getTaskCardExpandStorageKey(chatId, activeTaskId)
+    )
+  );
+
+  useEffect(() => {
+    setIsExpanded(readStoredTaskCardExpanded(expandStorageKey));
+  }, [expandStorageKey]);
+
+  useEffect(() => {
+    writeStoredTaskCardExpanded(expandStorageKey, isExpanded);
+  }, [expandStorageKey, isExpanded]);
 
   useEffect(() => {
     const tasks = taskRunning || [];
@@ -114,18 +157,6 @@ export function TaskCard({
     }
   }, [selectedState, taskInfo, taskRunning]);
 
-  const isAllTaskFinished = useMemo(() => {
-    return activeTaskStatus === ChatTaskStatus.FINISHED;
-  }, [activeTaskStatus]);
-
-  useEffect(() => {
-    if (activeWorkspace === 'workflow') {
-      setIsExpanded(false);
-    } else {
-      setIsExpanded(true);
-    }
-  }, [activeWorkspace]);
-
   // Improved height calculation logic
   useEffect(() => {
     if (!contentRef.current) return;
@@ -188,9 +219,9 @@ export function TaskCard({
 
   return (
     <div>
-      <div className="flex h-auto w-full flex-col gap-2 px-sm transition-all duration-300">
-        <div className="relative h-auto w-full overflow-hidden rounded-xl bg-task-surface py-sm">
-          <div className="absolute left-0 top-0 w-full bg-transparent">
+      <div className="gap-2 px-sm py-2 flex h-auto w-full flex-col transition-all duration-300">
+        <div className="rounded-xl py-sm bg-ds-bg-neutral-default-default relative h-auto w-full overflow-hidden">
+          <div className="left-0 top-0 absolute w-full bg-transparent">
             <Progress value={progressValue} className="h-[2px] w-full" />
           </div>
           {summaryTask && (
@@ -200,8 +231,8 @@ export function TaskCard({
           )}
 
           {summaryTask && (
-            <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 === 1 && (
                   <TaskState
                     all={
@@ -293,16 +324,16 @@ export function TaskCard({
                 )}
               </div>
 
-              <div className="transition-all duration-300 ease-in-out">
+              <div className="ease-in-out transition-all duration-300">
                 {taskType === 1 && (
                   <Button variant="ghost" size="icon" onClick={onAddTask}>
                     <Plus size={16} />
                   </Button>
                 )}
                 {taskType === 2 && (
-                  <div className="flex items-center gap-2 duration-300 animate-in fade-in-0 slide-in-from-right-2">
-                    {(isExpanded || isAllTaskFinished) && (
-                      <div className="text-xs font-medium leading-17 text-text-tertiary">
+                  <div className="gap-2 animate-in fade-in-0 slide-in-from-right-2 flex items-center duration-300">
+                    {isExpanded && (
+                      <div className="text-xs font-medium leading-17 text-ds-text-neutral-subtle-default">
                         {taskRunning?.filter(
                           (task) =>
                             task.status === TaskStatus.COMPLETED ||
@@ -314,7 +345,7 @@ export function TaskCard({
                     <Button
                       variant="ghost"
                       size="icon"
-                      onClick={() => setIsExpanded(!isExpanded)}
+                      onClick={() => setIsExpanded((prev) => !prev)}
                     >
                       <ChevronDown
                         size={16}
@@ -331,11 +362,11 @@ export function TaskCard({
 
           <div className="relative">
             {taskType === 1 && (
-              <div className="mt-sm flex flex-col px-sm duration-500 ease-out animate-in fade-in-0 slide-in-from-bottom-4">
+              <div className="mt-sm px-sm ease-out animate-in fade-in-0 slide-in-from-bottom-4 flex flex-col duration-500">
                 {taskInfo.map((task, taskIndex) => (
                   <div
                     key={`task-${taskIndex}`}
-                    className="duration-300 animate-in fade-in-0 slide-in-from-left-2"
+                    className="animate-in fade-in-0 slide-in-from-left-2 duration-300"
                   >
                     <TaskItem
                       taskInfo={task}
@@ -351,13 +382,13 @@ export function TaskCard({
             {taskType === 2 && (
               <div
                 ref={contentRef}
-                className="overflow-hidden transition-all duration-300 ease-in-out"
+                className="ease-in-out overflow-hidden transition-all duration-300"
                 style={{
                   height: isExpanded ? contentHeight : 0,
                   opacity: isExpanded ? 1 : 0,
                 }}
               >
-                <div className="mt-sm flex flex-col gap-2 px-2">
+                <div className="mt-sm gap-2 px-2 flex flex-col">
                   {filterTasks.map((task: TaskInfo) => {
                     return (
                       <div
@@ -402,33 +433,41 @@ export function TaskCard({
                           }
                         }}
                         key={`taskList-${task.id}`}
-                        className={`flex gap-2 rounded-lg 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 px-sm py-sm ease-in-out animate-in fade-in-0 slide-in-from-left-2 flex transition-all duration-300 ${
                           task.status === TaskStatus.COMPLETED
-                            ? 'bg-task-fill-success'
+                            ? 'bg-ds-bg-completed-subtle-default'
                             : task.status === TaskStatus.FAILED
-                              ? 'bg-task-fill-error'
+                              ? 'bg-ds-bg-error-subtle-default'
                               : task.status === TaskStatus.RUNNING
-                                ? 'bg-task-fill-running'
+                                ? 'bg-ds-bg-running-subtle-default'
                                 : task.status === TaskStatus.BLOCKED
-                                  ? 'bg-task-fill-warning'
-                                  : 'bg-task-fill-running'
+                                  ? 'bg-ds-bg-blocked-subtle-default'
+                                  : task.status === TaskStatus.SKIPPED ||
+                                      task.status === TaskStatus.WAITING ||
+                                      task.status === TaskStatus.EMPTY
+                                    ? 'bg-ds-bg-pending-subtle-default'
+                                    : 'bg-ds-bg-running-subtle-default'
                         } cursor-pointer border border-solid border-transparent ${
                           task.status === TaskStatus.COMPLETED
-                            ? 'hover:border-bg-fill-success-primary'
+                            ? 'hover:border-ds-border-status-completed-default-focus'
                             : task.status === TaskStatus.FAILED
-                              ? 'hover:border-task-border-focus-error'
+                              ? 'hover:border-ds-border-status-error-default-focus'
                               : task.status === TaskStatus.RUNNING
-                                ? 'hover:border-border-primary'
+                                ? 'hover:border-ds-border-status-running-default-focus'
                                 : task.status === TaskStatus.BLOCKED
-                                  ? 'hover:border-task-border-focus-warning'
-                                  : 'border-transparent'
+                                  ? 'hover:border-ds-border-status-blocked-default-focus'
+                                  : task.status === TaskStatus.SKIPPED ||
+                                      task.status === TaskStatus.WAITING ||
+                                      task.status === TaskStatus.EMPTY
+                                    ? 'hover:border-ds-border-status-pending-default-hover'
+                                    : 'border-transparent'
                         } `}
                       >
                         <div className="pt-0.5">
                           {task.status === TaskStatus.RUNNING && (
                             <LoaderCircle
                               size={16}
-                              className={`text-icon-information ${
+                              className={`text-ds-icon-information-default-default ${
                                 activeTaskStatus === ChatTaskStatus.RUNNING &&
                                 'animate-spin'
                               } `}
@@ -437,39 +476,47 @@ export function TaskCard({
                           {task.status === TaskStatus.SKIPPED && (
                             <LoaderCircle
                               size={16}
-                              className={`text-icon-secondary`}
+                              className="text-ds-icon-status-pending-default-default"
                             />
                           )}
                           {task.status === TaskStatus.COMPLETED && (
                             <CircleCheckBig
                               size={16}
-                              className="text-icon-success"
+                              className="text-ds-icon-success-default-default"
                             />
                           )}
                           {task.status === TaskStatus.FAILED && (
                             <CircleSlash
                               size={16}
-                              className="text-icon-cuation"
+                              className="text-ds-icon-caution-default-default"
                             />
                           )}
                           {task.status === TaskStatus.BLOCKED && (
                             <TriangleAlert
                               size={16}
-                              className="text-icon-warning"
+                              className="text-ds-icon-warning-default-default"
                             />
                           )}
-                          {task.status === TaskStatus.EMPTY && (
-                            <Circle size={16} className="text-icon-secondary" />
+                          {(task.status === TaskStatus.EMPTY ||
+                            task.status === TaskStatus.WAITING) && (
+                            <Circle
+                              size={16}
+                              className="text-ds-icon-status-pending-default-default"
+                            />
                           )}
                         </div>
-                        <div className="flex min-w-0 flex-1 flex-col items-start justify-center">
+                        <div className="min-w-0 flex flex-1 flex-col items-start justify-center">
                           <div
-                            className={`w-full min-w-0 whitespace-pre-line break-words [overflow-wrap:anywhere] ${
+                            className={`min-w-0 w-full [overflow-wrap:anywhere] whitespace-pre-line ${
                               task.status === TaskStatus.FAILED
-                                ? 'text-text-cuation-default'
+                                ? 'text-ds-text-caution-default-default'
                                 : task.status === TaskStatus.BLOCKED
-                                  ? 'text-text-body'
-                                  : 'text-text-primary'
+                                  ? 'text-ds-text-warning-default-default'
+                                  : task.status === TaskStatus.SKIPPED ||
+                                      task.status === TaskStatus.WAITING ||
+                                      task.status === TaskStatus.EMPTY
+                                    ? 'text-ds-text-status-pending-default-default'
+                                    : 'text-ds-text-neutral-default-default'
                             } text-sm font-medium leading-13`}
                           >
                             {task.content}
diff --git a/src/components/ChatBox/TaskBox/TaskItem.tsx b/src/components/ChatBox/TaskBox/TaskItem.tsx
index 89b880e69..52b7dc681 100644
--- a/src/components/ChatBox/TaskBox/TaskItem.tsx
+++ b/src/components/ChatBox/TaskBox/TaskItem.tsx
@@ -67,26 +67,29 @@ 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-ds-bg-neutral-default-hover mb-2 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'
+            ? 'border-ds-border-neutral-subtle-disabled bg-ds-bg-neutral-subtle-default'
+            : 'border-ds-border-neutral-subtle-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" />
+            <CircleDashed
+              size={13}
+              className="text-ds-icon-neutral-muted-default"
+            />
           ) : (
-            <div className="h-2 w-2 rounded-full bg-icon-information"></div>
+            <div className="h-2 w-2 bg-ds-icon-information-default-default 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 +101,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 +114,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,21 +127,20 @@ export function TaskItem({
               }}
               className="rounded-full"
               variant="success"
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
             >
-              <Check
-                size={16}
-                className="text-button-fill-success-foreground"
-              />
+              <Check size={16} className="text-current" />
             </Button>
           )}
           <Button
             onClick={() => onDelete()}
             className="rounded-full"
-            variant="cuation"
-            size="icon"
+            variant="caution"
+            size="xs"
+            buttonContent="icon-only"
           >
-            <Trash2 size={16} className="text-icon-tertiary" />
+            <Trash2 size={16} className="text-ds-icon-neutral-muted-default" />
           </Button>
         </div>
       </div>
diff --git a/src/components/ChatBox/TaskBox/TaskType.tsx b/src/components/ChatBox/TaskBox/TaskType.tsx
index 7ff7a4664..9ea0c3907 100644
--- a/src/components/ChatBox/TaskBox/TaskType.tsx
+++ b/src/components/ChatBox/TaskBox/TaskType.tsx
@@ -18,26 +18,26 @@ export const TaskType = ({ type }: { type: 1 | 2 | 3 }) => {
   const typeMap = {
     1: {
       label: t('layout.task-splitting'),
-      textColor: 'text-badge-splitting-surface-foreground',
-      bgColor: 'bg-badge-splitting-surface',
-      dotColor: 'bg-badge-splitting-surface-foreground',
+      textColor: 'text-ds-text-status-splitting-strong-default',
+      bgColor: 'bg-ds-bg-status-splitting-subtle-default',
+      dotColor: 'bg-ds-text-status-splitting-strong-default',
     },
     2: {
       label: t('layout.task-running'),
-      textColor: 'text-text-success-primary',
-      bgColor: 'bg-bg-fill-success-secondary',
-      dotColor: 'bg-text-success-primary',
+      textColor: 'text-ds-text-status-running-default-default',
+      bgColor: 'bg-ds-bg-status-running-subtle-default',
+      dotColor: 'bg-ds-text-status-running-default-default',
     },
     3: {
       label: t('layout.task-completed'),
-      textColor: 'text-text-primary',
+      textColor: 'text-ds-text-neutral-default-default',
       bgColor: 'bg-transparent',
-      dotColor: 'bg-text-primary',
+      dotColor: 'bg-ds-text-neutral-default-default',
     },
   };
   return (
     <div
-      className={`flex h-6 items-center gap-1 rounded-full px-2 py-1 ${typeMap[type].bgColor} ${typeMap[type].textColor} text-xs font-medium leading-17`}
+      className={`h-6 gap-1 px-2 py-1 flex items-center rounded-full ${typeMap[type].bgColor} ${typeMap[type].textColor} text-xs font-medium leading-17`}
     >
       <div className={`h-2 w-2 ${typeMap[type].dotColor} rounded-full`}></div>
       <span>{typeMap[type].label}</span>
diff --git a/src/components/ChatBox/TaskBox/TypeCardSkeleton.tsx b/src/components/ChatBox/TaskBox/TypeCardSkeleton.tsx
index c377da12b..ce4772349 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 py-sm bg-ds-bg-neutral-default-default relative h-auto w-full overflow-hidden">
+          <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-ds-bg-neutral-subtle-disabled 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-ds-bg-neutral-subtle-disabled 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-ds-bg-neutral-subtle-disabled 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="text-xs font-medium leading-17 text-text-tertiary">
+            <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-ds-text-neutral-subtle-default">
                   {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,30 +69,30 @@ 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 px-sm py-sm ease-in-out animate-in fade-in-0 slide-in-from-left-2 bg-ds-bg-neutral-default-default flex cursor-pointer border border-solid border-transparent transition-all duration-300`}
                     >
                       <div className="pt-0.5">
                         <LoaderCircle
                           size={16}
-                          className={`text-icon-success ${
+                          className={`text-ds-icon-status-running-default-default ${
                             !isTakeControl ? 'animate-spin' : ''
                           }`}
                         />
                       </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 text-sm font-medium leading-13 bg-ds-bg-neutral-subtle-disabled 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 text-sm font-medium leading-13 bg-ds-bg-neutral-subtle-disabled w-1/3 rounded-full ${
                             !isTakeControl ? 'animate-pulse' : ''
                           }`}
                         ></div>
diff --git a/src/components/ChatBox/UserQueryGroup.tsx b/src/components/ChatBox/UserQueryGroup.tsx
index eb1fecc6f..6199f84f4 100644
--- a/src/components/ChatBox/UserQueryGroup.tsx
+++ b/src/components/ChatBox/UserQueryGroup.tsx
@@ -13,19 +13,93 @@
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
 import { VanillaChatStore } from '@/store/chatStore';
+import { usePageTabStore } from '@/store/pageTabStore';
+import { useProjectStore } from '@/store/projectStore';
 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 { PreparingToExecuteTasks } from './MessageItem/PreparingToExecuteTasks';
+import { SplittingProgressRow } from './MessageItem/SplittingProgressRow';
 import { TaskCompletionCard } from './MessageItem/TaskCompletionCard';
+import { TaskWorkLogAccordion } from './MessageItem/TaskWorkLogAccordion';
 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="overflow-hidden px-2">
+      {/* Header (always visible) */}
+      <button
+        type="button"
+        className="focus-visible:ring-ds-border-brand-default-focus/40 flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm font-semibold text-ds-text-neutral-default-default transition-colors hover:bg-ds-bg-neutral-default-hover focus-visible:outline-none focus-visible:ring-2 active:bg-ds-bg-neutral-default-active"
+        onClick={() => setIsOpen((v) => !v)}
+      >
+        <span className="min-w-0 flex-1 truncate">{label}</span>
+        <ChevronDown
+          size={14}
+          aria-hidden
+          className={`shrink-0 text-ds-icon-neutral-default-default transition-transform duration-200 ${isOpen ? 'rotate-180' : 'rotate-0'}`}
+        />
+      </button>
+
+      {/* Collapsible body */}
+      <div
+        className={`overflow-hidden transition-all duration-200 ease-in-out ${isOpen ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'}`}
+      >
+        <div className="border-t border-ds-border-neutral-default-default px-1 py-1">
+          <AgentMessageCard
+            id={id}
+            content={content}
+            typewriter={false}
+            onTyping={() => {}}
+            attaches={attaches}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/** Typewriter only for the agent message currently being produced (latest agent row while task is running). */
+function shouldUseLiveAgentTypewriter(
+  task: {
+    type?: string;
+    delayTime?: number;
+    status: string;
+    messages: any[];
+  } | null,
+  messageId: string
+): boolean {
+  const replayAllows =
+    task?.type !== 'replay' ||
+    (task?.type === 'replay' && task?.delayTime !== 0);
+  if (!replayAllows) return false;
+  if (!task || task.status !== ChatTaskStatus.RUNNING) return false;
+  const msgs = task.messages;
+  if (!msgs.length) return false;
+  const last = msgs[msgs.length - 1];
+  return last.role === 'agent' && last.id === messageId;
+}
 
 interface QueryGroup {
   queryId: string;
@@ -51,25 +125,69 @@ 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;
+  const activeProjectId = useProjectStore((state) => state.activeProjectId);
+  const setActiveWorkspaceTab = usePageTabStore(
+    (state) => state.setActiveWorkspaceTab
+  );
+  const openFilePreview = useCallback(
+    (file: FileInfo) => {
+      const state = chatStore.getState();
+      const taskId = state.activeTaskId;
+      if (!taskId) return;
+
+      state.setSelectedFile(taskId, file);
+      state.setNuwFileNum(taskId, 0);
+      state.setActiveWorkspace(taskId, 'documentWorkSpace');
+      setActiveWorkspaceTab('inbox', {
+        clearInboxForProjectId: activeProjectId,
+      });
+    },
+    [activeProjectId, chatStore, setActiveWorkspaceTab]
+  );
+
+  // 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 +204,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 +300,26 @@ 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;
+
+  const hasConfirmedSubTasks = Boolean(
+    task?.messages.some(
+      (m: any) => m.step === AgentStep.TO_SUB_TASKS && m.isConfirm
+    )
+  );
+  const showPreparingExecute =
+    taskCardVisible &&
+    Boolean(activeTaskId && task) &&
+    hasConfirmedSubTasks &&
+    task!.status === ChatTaskStatus.PENDING;
+
   return (
     <motion.div
       ref={groupRef}
@@ -202,8 +332,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,8 +348,8 @@ 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"
@@ -230,71 +360,79 @@ 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>
+      )}
+
+      {taskCardVisible && activeTaskId && (
+        <motion.div
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.25, delay: 0.05 }}
+          className="px-sm"
+        >
+          {showPreparingExecute ? <PreparingToExecuteTasks /> : null}
+          <TaskWorkLogAccordion chatStore={chatStore} taskId={activeTaskId} />
+        </motion.div>
+      )}
 
       {/* Other Messages */}
       {queryGroup.otherMessages.map((message) => {
@@ -306,69 +444,48 @@ 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="flex flex-col gap-4"
               >
                 <AgentMessageCard
-                  typewriter={
-                    task?.type !== 'replay' ||
-                    (task?.type === 'replay' && task?.delayTime !== 0)
-                  }
+                  typewriter={shouldUseLiveAgentTypewriter(task, message.id)}
                   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="my-2 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.05 }}
+                              onClick={() => {
+                                openFilePreview(file);
+                              }}
+                              className="flex w-[140px] cursor-pointer items-center gap-2 rounded-lg bg-ds-bg-neutral-default-default px-3 py-2 transition-colors hover:bg-ds-bg-neutral-default-hover"
+                            >
+                              <FileText
+                                size={16}
+                                className="flex-shrink-0 text-ds-icon-neutral-default-default"
+                              />
+                              <div className="flex flex-col">
+                                <div className="max-w-[100px] overflow-hidden text-ellipsis whitespace-nowrap text-body-sm font-bold text-ds-text-neutral-default-default">
+                                  {file.name.split('.')[0]}
+                                </div>
+                                <div className="text-label-xs font-medium text-ds-text-neutral-muted-default">
+                                  {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.setNuwFileNum(activeTaskId as string, 0);
-                          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') {
@@ -378,7 +495,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="flex flex-col gap-4"
               >
                 <AgentMessageCard
                   key={message.id}
@@ -388,6 +505,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
@@ -395,14 +530,11 @@ 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="flex flex-col gap-4"
               >
                 <AgentMessageCard
                   key={message.id}
-                  typewriter={
-                    task?.type !== 'replay' ||
-                    (task?.type === 'replay' && task?.delayTime !== 0)
-                  }
+                  typewriter={shouldUseLiveAgentTypewriter(task, message.id)}
                   id={message.id}
                   content={message.content}
                   onTyping={() => {}}
@@ -418,7 +550,7 @@ 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="flex flex-col gap-4"
             >
               {message.fileList && (
                 <div className="flex flex-wrap gap-2">
@@ -429,24 +561,19 @@ export const UserQueryGroup: React.FC<UserQueryGroupProps> = ({
                       animate={{ opacity: 1, scale: 1 }}
                       transition={{ delay: 0.3 }}
                       onClick={() => {
-                        chatState.setSelectedFile(activeTaskId as string, file);
-                        chatState.setNuwFileNum(activeTaskId as string, 0);
-                        chatState.setActiveWorkspace(
-                          activeTaskId as string,
-                          'documentWorkSpace'
-                        );
+                        openFilePreview(file);
                       }}
-                      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="flex w-[120px] cursor-pointer items-center gap-2 rounded-2xl bg-ds-bg-neutral-default-default px-2 py-1 transition-colors hover:bg-ds-bg-neutral-default-hover"
                     >
                       <FileText
                         size={16}
-                        className="flex-shrink-0 text-icon-primary"
+                        className="flex-shrink-0 text-ds-icon-neutral-default-default"
                       />
                       <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 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold text-ds-text-neutral-default-default">
                           {file.name.split('.')[0]}
                         </div>
-                        <div className="text-xs font-medium leading-29 text-text-body">
+                        <div className="text-xs font-medium leading-29 text-ds-text-neutral-default-default">
                           {file.type}
                         </div>
                       </div>
@@ -471,19 +598,44 @@ 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="mb-md flex flex-col gap-4 px-sm"
+          >
+            <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} />
       )}
 
-      {/* Skeleton for loading state */}
-      {isSkeletonPhase && (
+      {isSkeletonPhase && activeTaskId && (
         <motion.div
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.4 }}
+          transition={{ delay: 0.15 }}
+          className="px-sm"
         >
-          <TypeCardSkeleton isTakeControl={task?.isTakeControl || false} />
+          <SplittingProgressRow chatStore={chatStore} taskId={activeTaskId} />
         </motion.div>
       )}
     </motion.div>
diff --git a/src/components/ChatBox/index.tsx b/src/components/ChatBox/index.tsx
index 03d567261..fecd685ee 100644
--- a/src/components/ChatBox/index.tsx
+++ b/src/components/ChatBox/index.tsx
@@ -23,46 +23,57 @@ import {
 import { isWeb } from '@/client/platform';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
 import { useHost } from '@/host';
-import { generateUniqueId, replayActiveTask } from '@/lib';
+import { generateUniqueId } from '@/lib';
 import { proxyUpdateTriggerExecution } from '@/service/triggerApi';
 import { useAuthStore } from '@/store/authStore';
-import type { VanillaChatStore } 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 { AgentStep, ChatTaskStatus, SessionMode } from '@/types/constants';
+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 { 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;
 export default function ChatBox(): JSX.Element {
-  const host = useHost();
   const [message, setMessage] = useState<string>('');
+  const host = useHost();
 
   //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 sessionSidePanelMode = usePageTabStore(
+    (s) => s.sessionSidePanelMode ?? SessionMode.WORKFORCE
+  );
   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 (
@@ -74,27 +85,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);
@@ -111,25 +116,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/v1/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();
     }
@@ -146,6 +141,19 @@ 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();
+
+  const handleSelectModel = useCallback(() => {
+    navigate('/history?tab=agents');
+  }, [navigate]);
 
   // Task time tracking
   const [taskTime, setTaskTime] = useState(
@@ -153,14 +161,10 @@ 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(() => {
@@ -173,16 +177,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;
@@ -200,56 +194,13 @@ 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 chatTotals = new Map<string, number>();
-    let nextProjectTotalTokens = 0;
-
-    getAllChatStoresMemoized.forEach(({ chatId, chatStore }) => {
-      const chatTotalTokens = getChatStoreTotalTokens(chatStore);
-      chatTotals.set(chatId, chatTotalTokens);
-      nextProjectTotalTokens += chatTotalTokens;
-    });
-
-    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);
-        })
-    );
-
-    return () => {
-      unsubscribers.forEach((unsubscribe) => unsubscribe());
-    };
-  }, [projectStore.activeProjectId, getAllChatStoresMemoized]);
-
   // Check if any chat store in the project has messages
   const hasAnyMessages = useMemo(() => {
     if (!chatStore) return false;
@@ -276,10 +227,33 @@ export default function ChatBox(): JSX.Element {
     });
   }, [chatStore, getAllChatStoresMemoized]);
 
+  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 ||
@@ -289,7 +263,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
@@ -307,7 +283,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;
@@ -428,13 +404,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);
@@ -454,7 +432,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 {
@@ -462,7 +467,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)) ||
             [],
@@ -481,18 +486,14 @@ export default function ChatBox(): JSX.Element {
           reply: tempMessageContent,
         });
         chatStore.setAttaches(_taskId, []);
-        chatStore.setIsPending(_taskId, false);
         if (chatStore.tasks[_taskId].askList.length === 0) {
           chatStore.setActiveAsk(_taskId, '');
         } else {
           let activeAskList = chatStore.tasks[_taskId].askList;
-          console.log(
-            'activeAskList',
-            JSON.parse(JSON.stringify(activeAskList))
-          );
           let message = activeAskList.shift();
           chatStore.setActiveAskList(_taskId, [...activeAskList]);
           chatStore.setActiveAsk(_taskId, message?.agent_name || '');
+          chatStore.setIsPending(_taskId, false);
           chatStore.addMessages(_taskId, message!);
         }
       } else {
@@ -574,10 +575,6 @@ export default function ChatBox(): JSX.Element {
             // keep hasWaitComfirm as true so that follow-up improves work as usual
           } else {
             // Continue conversation: simple response, complex task, or finished task
-            console.log(
-              '[Multi-turn] Continuing conversation with improve API'
-            );
-
             const attachesForThisTurn = JSON.parse(
               JSON.stringify(chatStore.tasks[_taskId]?.attaches || [])
             );
@@ -589,19 +586,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, []);
@@ -644,67 +642,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(() => {
@@ -719,7 +657,6 @@ export default function ChatBox(): JSX.Element {
   }, [projectStore]);
 
   useEffect(() => {
-    // Wait for config to be loaded before handling share token
     if (share_token && isConfigLoaded) {
       handleSendShare(share_token);
     }
@@ -809,13 +746,6 @@ export default function ChatBox(): JSX.Element {
     }
   };
 
-  // Replay handler
-  const handleReplay = async () => {
-    setIsReplayLoading(true);
-    await replayActiveTask(chatStore, projectStore, navigate);
-    setIsReplayLoading(false);
-  };
-
   // Pause/Resume handler
   const handlePauseResume = () => {
     const taskId = chatStore.activeTaskId as string;
@@ -844,37 +774,21 @@ export default function ChatBox(): JSX.Element {
   // Stop task handler - triggers Action.skip_task which preserves context
   const handleSkip = async () => {
     const taskId = chatStore.activeTaskId as string;
-    console.log('='.repeat(80));
-    console.log('🛑 [STOP-BUTTON] handleSkip CALLED from frontend');
-    console.log(
-      `[STOP-BUTTON] taskId: ${taskId}, projectId: ${projectStore.activeProjectId}`
-    );
-    console.log('='.repeat(80));
     setIsPauseResumeLoading(true);
 
     try {
       // Call skip-task endpoint to trigger Action.skip_task
       // This will stop the task gracefully while preserving context for multi-turn
-      console.log(
-        `[STOP-BUTTON] Sending POST request to /chat/${projectStore.activeProjectId}/skip-task`
-      );
       await fetchPost(`/chat/${projectStore.activeProjectId}/skip-task`, {
         project_id: projectStore.activeProjectId,
       });
-      console.log('[STOP-BUTTON] ✅ Backend skip-task request successful');
 
       // DO NOT call chatStore.stopTask here!
       // Keep SSE connection alive to receive "end" event from backend
       // The "end" event will set status to 'finished' and allow multi-turn conversation
-      console.log(
-        "[STOP-BUTTON] ⚠️  SSE connection kept alive, waiting for backend 'end' event"
-      );
 
       // Only set isPending to false so UI shows task is stopped
       chatStore.setIsPending(taskId, false);
-      console.log(
-        '[STOP-BUTTON] ✅ Task marked as not pending, SSE connection remains open'
-      );
 
       toast.success('Task stopped successfully', {
         closeButton: true,
@@ -883,15 +797,9 @@ export default function ChatBox(): JSX.Element {
       console.error('[STOP-BUTTON] ❌ Failed to stop task:', error);
 
       // If backend call failed, close SSE connection as fallback
-      console.log(
-        '[STOP-BUTTON] Backend call failed, closing SSE connection as fallback'
-      );
       try {
         chatStore.stopTask(taskId);
         chatStore.setIsPending(taskId, false);
-        console.log(
-          '[STOP-BUTTON] ⚠️  SSE connection closed due to backend failure'
-        );
         toast.warning(
           'Task stopped locally, but backend notification failed. Backend task may continue running.',
           {
@@ -912,7 +820,6 @@ export default function ChatBox(): JSX.Element {
         );
       }
     } finally {
-      console.log('[STOP-BUTTON] handleSkip completed');
       setIsPauseResumeLoading(false);
     }
   };
@@ -990,8 +897,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) ||
@@ -1016,12 +925,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';
@@ -1058,8 +972,6 @@ export default function ChatBox(): JSX.Element {
           }
         );
       }
-
-      console.log(`[ChatBox] Task ${task_id} cancelled successfully`);
     } catch (error) {
       console.error(`[ChatBox] Failed to cancel task ${task_id}:`, error);
       // Restore the message if backend update failed
@@ -1070,61 +982,98 @@ export default function ChatBox(): JSX.Element {
     }
   };
 
-  if (!chatStore) {
-    return <div>Loading...</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'
-            }`}
-          >
+  const chatColumn = (
+    <>
+      {/* Main: scroll (scrollbar on panel edge) + BottomBox overlay when chatting */}
+      <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+        <div
+          ref={scrollContainerRef}
+          className="scrollbar-always-visible min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden"
+        >
+          {hasAnyMessages ? (
             <ProjectChatContainer
+              scrollContainerRef={scrollContainerRef}
+              scrollBottomInsetPx={scrollBottomInsetPx}
               onSkip={handleSkip}
               isPauseResumeLoading={isPauseResumeLoading}
             />
-          </div>
+          ) : (
+            <div className="mx-auto flex min-h-full w-full max-w-[600px] flex-col pl-4 pr-2">
+              <div className="flex flex-1 flex-col items-center justify-end gap-1 pb-4"></div>
+
+              {chatStore.activeTaskId && (
+                <BottomBox
+                  state="input"
+                  queuedMessages={queuedMessages}
+                  onRemoveQueuedMessage={(id) => handleRemoveTaskQueue(id)}
+                  noModelOverlay={!hasModel}
+                  onSelectModel={handleSelectModel}
+                  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,
+                    sessionMode: sessionSidePanelMode,
+                    sessionModeSelectInteractive: false,
+                  }}
+                />
+              )}
+            </div>
+          )}
+        </div>
 
-          {/* Init State Container - Welcome + BottomBox + Suggestions (vertically centered) */}
+        {chatStore.activeTaskId && hasAnyMessages && (
           <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'
-            }`}
+            ref={bottomBoxOverlayRef}
+            className="pointer-events-none absolute inset-x-0 bottom-0 z-30 flex justify-center"
           >
-            {/* 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>
-            </div>
-
-            {/* Bottom Box - Center (init state only) */}
-            {chatStore.activeTaskId && (
+            <div className="pointer-events-auto w-full max-w-[600px] px-sm">
               <BottomBox
-                state="input"
+                state={getBottomBoxState()}
                 queuedMessages={queuedMessages}
                 onRemoveQueuedMessage={(id) => handleRemoveTaskQueue(id)}
+                noModelOverlay={!hasModel}
+                onSelectModel={handleSelectModel}
+                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,
@@ -1142,117 +1091,25 @@ export default function ChatBox(): JSX.Element {
                       files as any
                     ),
                   onAddFile: handleFileSelect,
-                  placeholder: t('chat.ask-placeholder'),
+                  placeholder: t('chat.follow-up-placeholder'),
                   disabled: isInputDisabled,
                   textareaRef: textareaRef,
                   allowDragDrop: true,
                   useCloudModelInDev: useCloudModelInDev,
+                  sessionMode: sessionSidePanelMode,
+                  sessionModeSelectInteractive: false,
                 }}
               />
-            )}
-
-            {/* 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"
-                  >
-                    <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);
-                      }}
-                    >
-                      <span>{label}</span>
-                    </div>
-                  ))}
-                </div>
-              )}
             </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>
+    </>
+  );
+
+  return (
+    <div className="relative flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden">
+      {chatColumn}
     </div>
   );
 }
diff --git a/src/components/GroupedHistoryView/ProjectDialog.tsx b/src/components/Dashboard/GroupedHistoryView/ProjectDialog.tsx
similarity index 77%
rename from src/components/GroupedHistoryView/ProjectDialog.tsx
rename to src/components/Dashboard/GroupedHistoryView/ProjectDialog.tsx
index c9c8db6f1..d93f4b93c 100644
--- a/src/components/GroupedHistoryView/ProjectDialog.tsx
+++ b/src/components/Dashboard/GroupedHistoryView/ProjectDialog.tsx
@@ -27,9 +27,9 @@ import {
   CheckCircle,
   Clock,
   Hash,
+  ListChecks,
   Loader2,
   LoaderCircle,
-  Pin,
 } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -159,15 +159,15 @@ export default function ProjectDialog({
         >
           {/* Project Name Section - Inline Edit with Auto-Save */}
           <div
-            className="mb-lg flex flex-col gap-sm"
+            className="mb-lg gap-sm flex flex-col"
             onClick={(e) => e.stopPropagation()}
             onMouseDown={(e) => e.stopPropagation()}
           >
-            <label className="text-label-sm font-bold text-text-label">
+            <label className="text-label-sm font-bold text-ds-text-neutral-muted-default">
               {t('layout.project-name')}
             </label>
             <div
-              className="flex items-center gap-sm"
+              className="gap-sm flex items-center"
               onClick={(e) => e.stopPropagation()}
               onMouseDown={(e) => e.stopPropagation()}
             >
@@ -181,7 +181,7 @@ export default function ProjectDialog({
                 placeholder={t('layout.enter-project-name')}
               />
               {isSaving ? (
-                <Loader2 className="h-4 w-4 flex-shrink-0 animate-spin text-icon-action" />
+                <Loader2 className="h-4 w-4 animate-spin text-ds-icon-brand-default-default flex-shrink-0" />
               ) : (
                 <></>
               )}
@@ -189,50 +189,50 @@ export default function ProjectDialog({
           </div>
 
           {/* Project Stats */}
-          <div className="grid grid-cols-4 gap-lg border-x-0 border-t-0 border-solid border-border-disabled pb-md">
-            <div className="flex flex-col gap-xs">
-              <span className="text-label-sm font-normal text-text-label">
+          <div className="gap-lg border-ds-border-neutral-muted-disabled pb-md grid grid-cols-4 border-x-0 border-t-0 border-solid">
+            <div className="gap-xs flex flex-col">
+              <span className="text-label-sm font-normal text-ds-text-neutral-muted-default">
                 {t('layout.total-tokens')}
               </span>
-              <div className="flex flex-row items-center gap-sm">
-                <Hash className="h-4 w-4 text-icon-primary" />
-                <span className="text-body-lg font-bold text-text-heading">
+              <div className="gap-sm flex flex-row items-center">
+                <Hash className="h-4 w-4 text-ds-icon-neutral-default-default" />
+                <span className="text-body-lg font-bold text-ds-text-neutral-default-default">
                   {project.total_tokens.toLocaleString()}
                 </span>
               </div>
             </div>
 
-            <div className="flex flex-col gap-xs">
-              <span className="text-label-sm font-normal text-text-label">
+            <div className="gap-xs flex flex-col">
+              <span className="text-label-sm font-normal text-ds-text-neutral-muted-default">
                 {t('layout.total-tasks')}
               </span>
-              <div className="flex flex-row items-center gap-sm">
-                <Pin className="h-4 w-4 text-icon-primary" />
-                <span className="text-body-lg font-bold text-text-heading">
+              <div className="gap-sm flex flex-row items-center">
+                <ListChecks className="h-4 w-4 text-ds-icon-neutral-default-default" />
+                <span className="text-body-lg font-bold text-ds-text-neutral-default-default">
                   {project.task_count}
                 </span>
               </div>
             </div>
 
-            <div className="flex flex-col gap-xs">
-              <span className="text-label-sm font-normal text-text-label">
+            <div className="gap-xs flex flex-col">
+              <span className="text-label-sm font-normal text-ds-text-neutral-muted-default">
                 {t('layout.completed')}
               </span>
-              <div className="flex flex-row items-center gap-sm">
-                <CheckCircle className="h-4 w-4 text-icon-success" />
-                <span className="text-body-lg font-bold text-text-heading">
+              <div className="gap-sm flex flex-row items-center">
+                <CheckCircle className="h-4 w-4 text-ds-icon-status-completed-default-default" />
+                <span className="text-body-lg font-bold text-ds-text-neutral-default-default">
                   {project.total_completed_tasks}
                 </span>
               </div>
             </div>
 
-            <div className="flex flex-col gap-xs">
-              <span className="text-label-sm font-normal text-text-label">
+            <div className="gap-xs flex flex-col">
+              <span className="text-label-sm font-normal text-ds-text-neutral-muted-default">
                 {t('layout.ongoing')}
               </span>
-              <div className="flex flex-row items-center gap-sm">
-                <LoaderCircle className="h-4 w-4 text-icon-information" />
-                <span className="text-body-lg font-bold text-text-heading">
+              <div className="gap-sm flex flex-row items-center">
+                <LoaderCircle className="h-4 w-4 text-ds-icon-status-splitting-default-default" />
+                <span className="text-body-lg font-bold text-ds-text-neutral-default-default">
                   {project.total_ongoing_tasks}
                 </span>
               </div>
@@ -240,8 +240,8 @@ export default function ProjectDialog({
           </div>
 
           {/* Tasks List */}
-          <div className="scrollbar mt-4 flex h-full flex-col gap-sm overflow-y-auto">
-            <div className="scrollbar flex h-full flex-col gap-sm overflow-y-auto">
+          <div className="scrollbar mt-4 gap-sm flex h-full flex-col overflow-y-auto">
+            <div className="scrollbar gap-sm flex h-full flex-col overflow-y-auto">
               {project.tasks.length > 0 ? (
                 project.tasks.map((task, index) => (
                   <TaskItem
@@ -263,8 +263,8 @@ export default function ProjectDialog({
                   />
                 ))
               ) : (
-                <div className="py-lg text-center text-sm text-text-label">
-                  <Clock className="mx-auto mb-sm h-8 w-8 text-icon-secondary opacity-50" />
+                <div className="py-lg text-sm text-ds-text-neutral-muted-default text-center">
+                  <Clock className="mb-sm h-8 w-8 text-ds-icon-neutral-muted-default mx-auto opacity-50" />
                   {t('layout.no-tasks-in-project')}
                 </div>
               )}
diff --git a/src/components/GroupedHistoryView/ProjectGroup.tsx b/src/components/Dashboard/GroupedHistoryView/ProjectGroup.tsx
similarity index 57%
rename from src/components/GroupedHistoryView/ProjectGroup.tsx
rename to src/components/Dashboard/GroupedHistoryView/ProjectGroup.tsx
index 3980a6671..493e464c5 100644
--- a/src/components/GroupedHistoryView/ProjectGroup.tsx
+++ b/src/components/Dashboard/GroupedHistoryView/ProjectGroup.tsx
@@ -12,6 +12,9 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
+import tokenDarkIcon from '@/assets/token-dark.svg';
+import tokenLightIcon from '@/assets/token-light.svg';
+import { formatTokenCount } from '@/components/ChatBox/MessageItem/TokenUtils';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -23,18 +26,17 @@ import { Tag } from '@/components/ui/tag';
 import { TooltipSimple } from '@/components/ui/tooltip';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
 import { loadProjectFromHistory } from '@/lib/replay';
+import { useAuthStore } from '@/store/authStore';
 import { useProjectStore } from '@/store/projectStore';
 import { ChatTaskStatus } from '@/types/constants';
 import { ProjectGroup as ProjectGroupType } from '@/types/history';
 import { motion } from 'framer-motion';
 import {
-  Edit,
-  Hash,
+  FolderCheck,
+  FolderClock,
+  ListChecks,
   Loader2,
   MoreHorizontal,
-  Pin,
-  Sparkle,
-  Sparkles,
   Trash2,
   Zap,
 } from 'lucide-react';
@@ -43,6 +45,39 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import ProjectDialog from './ProjectDialog';
 
+const compactCountFormatter = new Intl.NumberFormat('en', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+});
+
+const formatCompactCount = (value?: number) =>
+  compactCountFormatter.format(value || 0).replace('.0', '');
+
+const toFiniteNumber = (value: unknown): number | null => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : null;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value.replace(/,/g, '').trim());
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+};
+
+const resolveProjectTokenCount = (project: ProjectGroupType): number => {
+  const direct = toFiniteNumber(project.total_tokens as unknown);
+  if (direct !== null) {
+    return direct;
+  }
+
+  // Fallback for inconsistent payloads where project-level total is missing/invalid.
+  return (project.tasks || []).reduce(
+    (sum, task) =>
+      sum + (toFiniteNumber((task as { tokens?: unknown }).tokens) ?? 0),
+    0
+  );
+};
+
 interface ProjectGroupProps {
   project: ProjectGroupType;
   onTaskSelect: (
@@ -74,15 +109,18 @@ export default function ProjectGroup({
   isOngoing = false,
   onOngoingTaskPause: _onOngoingTaskPause,
   onOngoingTaskResume: _onOngoingTaskResume,
-  onProjectEdit,
+  onProjectEdit: _onProjectEdit,
   onProjectDelete,
   onProjectRename,
   viewMode = 'grid',
 }: ProjectGroupProps) {
   const { t } = useTranslation();
+  const { appearance } = useAuthStore();
   const navigate = useNavigate();
   const projectStore = useProjectStore();
   const { chatStore } = useChatStoreAdapter();
+  const tokenIcon = appearance === 'dark' ? tokenDarkIcon : tokenLightIcon;
+  const totalTokenCount = resolveProjectTokenCount(project);
   const [_isExpanded, _setIsExpanded] = useState(true);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [isLoadingProject, setIsLoadingProject] = useState(false);
@@ -192,18 +230,6 @@ export default function ProjectGroup({
   // Trigger count is 0 for now (disabled)
   // const _triggerCount = 0;
 
-  // Handle project edit - open dialog
-  const handleProjectEdit = (e?: React.MouseEvent) => {
-    if (e) {
-      e.stopPropagation();
-    }
-    setIsDialogOpen(true);
-    // Also call the parent callback if provided
-    if (onProjectEdit) {
-      onProjectEdit(project.project_id);
-    }
-  };
-
   // Handle project rename
   const handleProjectRename = (projectId: string, newName: string) => {
     if (onProjectRename) {
@@ -217,27 +243,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 bg-ds-bg-neutral-default-default backdrop-blur-sm hover:bg-ds-bg-neutral-default-hover hover:border-ds-border-neutral-subtle-default ease-in-out relative h-full overflow-hidden border border-solid border-transparent transition-colors duration-200 ${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">
-            <Loader2 className="h-6 w-6 animate-spin text-icon-primary" />
+          <div className="bg-white/50 inset-0 absolute z-10 flex items-center justify-center">
+            <Loader2 className="h-6 w-6 animate-spin text-ds-icon-neutral-default-default" />
           </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" />
+                  <FolderClock className="h-6 w-6 text-ds-icon-status-running-default-default flex-shrink-0" />
                 ) : (
-                  <Sparkle className="h-6 w-6 flex-shrink-0 text-icon-secondary" />
+                  <FolderCheck className="h-6 w-6 text-ds-icon-neutral-subtle-default 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
@@ -245,7 +271,7 @@ export default function ProjectGroup({
                       animate={{ opacity: 1, scale: 1 }}
                       transition={{ duration: 0.2 }}
                     >
-                      <Tag variant="info" size="xs">
+                      <Tag variant="primary" tone="information" size="xs">
                         <Activity className="w-3.5 h-3.5" />
                         {t("layout.ongoing")}
                       </Tag>
@@ -258,7 +284,7 @@ export default function ProjectGroup({
                       animate={{ opacity: 1, scale: 1 }}
                       transition={{ duration: 0.2 }}
                     >
-                      <Tag variant="warning" size="xs">
+                      <Tag variant="primary" tone="warning" size="xs">
                         {t("layout.issue") || "Issue"}
                       </Tag>
                     </motion.div>
@@ -269,9 +295,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-ds-bg-neutral-strong-default 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-ds-text-neutral-default-default line-clamp-2">
                   {project.project_name}
                 </span>
               </TooltipSimple>
@@ -282,35 +308,27 @@ 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" />
+                  <MoreHorizontal className="h-4 w-4 text-ds-icon-neutral-default-default" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 align="end"
-                className="z-50 border-dropdown-border bg-dropdown-bg"
+                className="border-ds-border-neutral-default-default bg-ds-bg-neutral-strong-default z-50"
               >
-                {onProjectEdit && (
-                  <DropdownMenuItem
-                    onClick={handleProjectEdit}
-                    className="cursor-pointer bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover"
-                  >
-                    <Edit className="mr-2 h-4 w-4" />
-                    {t('layout.edit') || 'Edit'}
-                  </DropdownMenuItem>
-                )}
                 {onProjectDelete && (
                   <DropdownMenuItem
                     onClick={(e) => {
                       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-ds-bg-neutral-subtle-default text-ds-text-error-default-default hover:bg-ds-bg-neutral-subtle-hover hover:text-ds-text-error-default-default focus:text-ds-text-error-default-default data-[highlighted]:text-ds-text-error-default-default [&>svg]:text-ds-icon-error-default-default hover:[&>svg]:text-ds-icon-error-default-default focus:[&>svg]:text-ds-icon-error-default-default data-[highlighted]:[&>svg]:text-ds-icon-error-default-default cursor-pointer"
                   >
-                    <Trash2 className="mr-2 h-4 w-4" />
+                    <Trash2 className="mr-2 h-4 w-4 text-ds-icon-error-default-default" />
                     {t('layout.delete')}
                   </DropdownMenuItem>
                 )}
@@ -335,46 +353,52 @@ 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-ds-border-neutral-muted-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">
-              {/* Token count */}
+            <div className="gap-4 flex w-full flex-row items-center justify-end">
               <TooltipSimple content={t('chat.token')}>
-                <div className="flex items-center gap-1">
-                  <Hash className="h-4 w-4 text-icon-information" />
-                  <span className="text-body-sm font-semibold text-text-information">
-                    {' '}
-                    {t('chat.token')}
+                <Tag
+                  variant="primary"
+                  tone="information"
+                  emphasis="default"
+                  size="xs"
+                  className="gap-1.5"
+                >
+                  <img src={tokenIcon} alt="" className="h-4 w-4" />
+                  <span className="text-label-xs">
+                    {formatTokenCount(totalTokenCount)}
                   </span>
-                  <span className="text-body-sm font-semibold text-text-information">
-                    {project.total_tokens
-                      ? project.total_tokens.toLocaleString()
-                      : '0'}
+                </Tag>
+              </TooltipSimple>
+              <TooltipSimple content={t('layout.tasks')}>
+                <Tag
+                  variant="primary"
+                  tone="success"
+                  emphasis="default"
+                  size="xs"
+                  className="gap-1.5 min-w-10"
+                >
+                  <ListChecks className="h-3 w-3" />
+                  <span className="text-label-xs">
+                    {formatCompactCount(project.task_count)}
                   </span>
-                </div>
+                </Tag>
               </TooltipSimple>
 
-              <div className="flex flex-row items-center justify-end gap-4">
-                {/* Task count */}
-                <TooltipSimple content="Tasks">
-                  <div className="flex items-center gap-1">
-                    <Pin className="h-4 w-4 text-icon-primary" />
-                    <span className="text-body-sm font-semibold text-text-body">
-                      {project.task_count}
-                    </span>
-                  </div>
-                </TooltipSimple>
-
-                {/* Trigger count */}
-                <TooltipSimple content="Triggers">
-                  <div className="flex items-center gap-1">
-                    <Zap className="h-4 w-4 text-icon-warning" />
-                    <span className="text-body-sm font-semibold text-text-warning">
-                      {project.total_triggers || 0}
-                    </span>
-                  </div>
-                </TooltipSimple>
-              </div>
+              <TooltipSimple content="Triggers">
+                <Tag
+                  variant="primary"
+                  tone="warning"
+                  emphasis="default"
+                  size="xs"
+                  className="gap-1.5 min-w-10"
+                >
+                  <Zap className="h-3 w-3" />
+                  <span className="text-label-xs">
+                    {formatCompactCount(project.total_triggers)}
+                  </span>
+                </Tag>
+              </TooltipSimple>
             </div>
           </motion.div>
         </div>
@@ -386,72 +410,92 @@ 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 bg-ds-bg-neutral-default-default backdrop-blur-sm hover:bg-ds-bg-neutral-default-hover hover:border-ds-border-neutral-subtle-default ease-in-out relative overflow-hidden border border-solid border-transparent transition-colors duration-200 ${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">
-          <Loader2 className="h-6 w-6 animate-spin text-icon-primary" />
+        <div className="bg-white/50 inset-0 absolute z-10 flex items-center justify-center">
+          <Loader2 className="h-6 w-6 animate-spin text-ds-icon-neutral-default-default" />
         </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" />
+            <FolderClock className="h-5 w-5 text-ds-icon-status-running-default-default flex-shrink-0" />
           ) : (
-            <Sparkle className="h-5 w-5 flex-shrink-0 text-icon-secondary" />
+            <FolderCheck className="h-5 w-5 text-ds-icon-neutral-subtle-default 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-ds-bg-neutral-strong-default 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-ds-text-neutral-default-default 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">
-          <Tag variant="info" size="sm">
-            <Hash />
-            <span>
-              {project.total_tokens
-                ? project.total_tokens.toLocaleString()
-                : '0'}
+        <div className="gap-2 flex w-fit flex-1 items-center justify-end">
+          <Tag
+            variant="primary"
+            tone="information"
+            emphasis="default"
+            size="xs"
+            className="gap-1.5"
+          >
+            <img src={tokenIcon} alt="" className="h-4 w-4" />
+            <span className="text-label-xs">
+              {formatTokenCount(totalTokenCount)}
             </span>
           </Tag>
 
           <TooltipSimple content={t('layout.tasks')}>
-            <Tag variant="default" size="sm" className="min-w-10">
-              <Pin />
-              <span>{project.task_count}</span>
+            <Tag
+              variant="primary"
+              tone="success"
+              emphasis="default"
+              size="xs"
+              className="gap-1.5 min-w-10"
+            >
+              <ListChecks className="h-3 w-3" />
+              <span className="text-label-xs">
+                {formatCompactCount(project.task_count)}
+              </span>
             </Tag>
           </TooltipSimple>
 
           <TooltipSimple content="Triggers">
-            <Tag variant="warning" size="sm" className="min-w-10">
-              <Zap />
-              <span>{project.total_triggers || 0}</span>
+            <Tag
+              variant="primary"
+              tone="warning"
+              emphasis="default"
+              size="xs"
+              className="gap-1.5 min-w-10"
+            >
+              <Zap className="h-3 w-3" />
+              <span className="text-label-xs">
+                {formatCompactCount(project.total_triggers)}
+              </span>
             </Tag>
           </TooltipSimple>
         </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-ds-border-neutral-muted-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">
+            <Tag variant="primary" tone="information" size="sm">
               <Activity />
               {t("layout.ongoing")}
             </Tag>
           )} */}
 
           {/* {!isOngoing && hasIssue && (
-            <Tag variant="warning" size="sm">
+            <Tag variant="primary" tone="warning" size="sm">
               {t("layout.issue") || "Issue"}
             </Tag>
           )} */}
@@ -461,31 +505,23 @@ 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" />
+                <MoreHorizontal className="h-4 w-4 text-ds-icon-neutral-default-default" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent
               align="end"
-              className="z-50 border-dropdown-border bg-dropdown-bg"
+              className="border-ds-border-neutral-default-default bg-ds-bg-neutral-strong-default z-50"
             >
-              {onProjectEdit && (
-                <DropdownMenuItem
-                  onClick={handleProjectEdit}
-                  className="cursor-pointer bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover"
-                >
-                  <Edit className="mr-2 h-4 w-4" />
-                  {t('layout.edit') || 'Edit'}
-                </DropdownMenuItem>
-              )}
               {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-ds-bg-neutral-subtle-default text-ds-text-error-default-default hover:bg-ds-bg-neutral-subtle-hover hover:text-ds-text-error-default-default focus:text-ds-text-error-default-default data-[highlighted]:text-ds-text-error-default-default [&>svg]:text-ds-icon-error-default-default hover:[&>svg]:text-ds-icon-error-default-default focus:[&>svg]:text-ds-icon-error-default-default data-[highlighted]:[&>svg]:text-ds-icon-error-default-default cursor-pointer"
                 >
-                  <Trash2 className="mr-2 h-4 w-4" />
+                  <Trash2 className="h-4 w-4 text-ds-icon-error-default-default" />
                   {t('layout.delete')}
                 </DropdownMenuItem>
               )}
diff --git a/src/components/GroupedHistoryView/TaskItem.tsx b/src/components/Dashboard/GroupedHistoryView/TaskItem.tsx
similarity index 78%
rename from src/components/GroupedHistoryView/TaskItem.tsx
rename to src/components/Dashboard/GroupedHistoryView/TaskItem.tsx
index 3cb253e3e..64747531c 100644
--- a/src/components/GroupedHistoryView/TaskItem.tsx
+++ b/src/components/Dashboard/GroupedHistoryView/TaskItem.tsx
@@ -31,7 +31,7 @@ import {
   Clock,
   Ellipsis,
   Hash,
-  Pin,
+  ListChecks,
   Share,
   Trash2,
 } from 'lucide-react';
@@ -72,21 +72,21 @@ export default function TaskItem({
     switch (status) {
       case 1: // ChatStatus.ongoing
         return (
-          <Tag variant="info" size="sm">
+          <Tag variant="primary" tone="information" size="sm">
             <Clock />
             <span>{t('layout.running')}</span>
           </Tag>
         );
       case 2: // ChatStatus.done
         return (
-          <Tag variant="success" size="sm">
+          <Tag variant="primary" tone="success" size="sm">
             <CheckCircle />
             <span>{t('layout.completed')}</span>
           </Tag>
         );
       default: // Unknown status
         return (
-          <Tag variant="default" size="sm">
+          <Tag variant="primary" tone="neutral" size="sm">
             <Clock />
             <span>{t('layout.unknown')}</span>
           </Tag>
@@ -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-ds-bg-neutral-inverse-default' : ''} h-14 gap-md rounded-xl border-ds-border-neutral-muted-disabled bg-ds-bg-neutral-inverse-default/30 p-3 shadow-history-item hover:bg-ds-bg-neutral-inverse-default 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" />
+          <ListChecks className="h-4 w-4 text-ds-icon-neutral-default-default" />
         </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-ds-bg-neutral-strong-default 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,24 +128,25 @@ 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-ds-text-neutral-default-default 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">
+        <Tag variant="primary" tone="information" size="sm">
           <Hash />
           <span>{task.tokens ? task.tokens.toLocaleString() : '0'}</span>
         </Tag>
 
         {isOngoing && (onPause || onResume) && (
           <Tag
-            variant={isPaused ? 'info' : 'success'}
+            variant="primary"
+            tone={isPaused ? 'information' : 'success'}
             size="sm"
             onClick={(e) => {
               e.stopPropagation();
@@ -165,7 +166,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 +177,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-ds-border-neutral-default-default bg-ds-bg-neutral-strong-default p-sm w-[98px] rounded-[12px] border border-solid"
             >
               <div className="space-y-1">
                 {!isOngoing && (
@@ -207,7 +209,7 @@ export default function TaskItem({
                   >
                     <Trash2
                       size={14}
-                      className="text-icon-primary group-hover:text-icon-cuation"
+                      className="text-ds-icon-neutral-default-default group-hover:text-ds-icon-status-error-default-default"
                     />
                     {t('layout.delete')}
                   </Button>
diff --git a/src/components/GroupedHistoryView/index.tsx b/src/components/Dashboard/GroupedHistoryView/index.tsx
similarity index 86%
rename from src/components/GroupedHistoryView/index.tsx
rename to src/components/Dashboard/GroupedHistoryView/index.tsx
index a6cb232e1..b23a0f25b 100644
--- a/src/components/GroupedHistoryView/index.tsx
+++ b/src/components/Dashboard/GroupedHistoryView/index.tsx
@@ -15,18 +15,28 @@
 import { proxyFetchDelete, proxyFetchPut } from '@/api/http';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Tag } from '@/components/ui/tag';
+import { useHost } from '@/host';
 import { fetchGroupedHistoryTasks } from '@/service/historyApi';
 import { getAuthStore } from '@/store/authStore';
 import { useGlobalStore } from '@/store/globalStore';
 import { useProjectStore } from '@/store/projectStore';
 import { ProjectGroup as ProjectGroupType } from '@/types/history';
 import { AnimatePresence, motion } from 'framer-motion';
-import { FolderOpen, LayoutGrid, List, Pin, Sparkle } from 'lucide-react';
+import {
+  Folder,
+  FolderOpen,
+  LayoutGrid,
+  List,
+  ListChecks,
+  Zap,
+} from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ProjectGroup from './ProjectGroup';
 
 interface GroupedHistoryViewProps {
+  /** When true, grid/list tabs are hidden (e.g. controlled from a parent sidebar). */
+  hideViewSwitcher?: boolean;
   searchValue?: string;
   onTaskSelect: (
     projectId: string,
@@ -48,6 +58,7 @@ interface GroupedHistoryViewProps {
 }
 
 export default function GroupedHistoryView({
+  hideViewSwitcher = false,
   searchValue = '',
   onTaskSelect,
   onTaskDelete,
@@ -63,6 +74,8 @@ export default function GroupedHistoryView({
   onProjectDelete,
 }: GroupedHistoryViewProps) {
   const { t } = useTranslation();
+  const host = useHost();
+  const ipcRenderer = host?.ipcRenderer;
   const [projects, setProjects] = useState<ProjectGroupType[]>([]);
   const [loading, setLoading] = useState(true);
   const { history_type, setHistoryType } = useGlobalStore();
@@ -145,9 +158,9 @@ export default function GroupedHistoryView({
 
               // Also delete local files for this task if available (via Electron IPC)
               const { email } = getAuthStore();
-              if (history.task_id && (window as any).ipcRenderer) {
+              if (history.task_id && ipcRenderer) {
                 try {
-                  await (window as any).ipcRenderer.invoke(
+                  await ipcRenderer.invoke(
                     'delete-task-files',
                     email,
                     history.task_id,
@@ -292,41 +305,41 @@ export default function GroupedHistoryView({
   // Shimmer animation styles
   const shimmerStyle = {
     background:
-      'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%)',
+      'linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ds-text-neutral-subtle-default) 40%, transparent) 50%, transparent 100%)',
     backgroundSize: '200% 100%',
     animation: 'shimmer 1.5s infinite',
   };
 
   // Skeleton component for list card loading state
   const ListCardSkeleton = () => (
-    <div className="overflow-hidden rounded-xl bg-surface-secondary">
+    <div className="overflow-hidden rounded-xl bg-ds-bg-neutral-default-default">
       <div className="flex w-full items-center justify-between px-6 py-4">
         {/* Start: Folder icon and project name skeleton */}
         <div className="flex w-48 flex-shrink-0 items-center gap-3">
-          <div className="relative h-5 w-5 flex-shrink-0 overflow-hidden rounded bg-surface-primary">
+          <div className="relative h-5 w-5 flex-shrink-0 overflow-hidden rounded bg-ds-bg-neutral-subtle-default">
             <div className="absolute inset-0" style={shimmerStyle} />
           </div>
-          <div className="relative h-5 w-32 overflow-hidden rounded bg-surface-primary">
+          <div className="relative h-5 w-32 overflow-hidden rounded bg-ds-bg-neutral-subtle-default">
             <div className="absolute inset-0" style={shimmerStyle} />
           </div>
         </div>
 
         {/* Middle: Tags skeleton */}
         <div className="flex flex-1 items-center justify-end gap-4">
-          <div className="relative h-6 w-16 overflow-hidden rounded-full bg-surface-primary">
+          <div className="relative h-6 w-16 overflow-hidden rounded-full bg-ds-bg-neutral-subtle-default">
             <div className="absolute inset-0" style={shimmerStyle} />
           </div>
-          <div className="relative h-6 w-12 overflow-hidden rounded-full bg-surface-primary">
+          <div className="relative h-6 w-12 overflow-hidden rounded-full bg-ds-bg-neutral-subtle-default">
             <div className="absolute inset-0" style={shimmerStyle} />
           </div>
-          <div className="relative h-6 w-12 overflow-hidden rounded-full bg-surface-primary">
+          <div className="relative h-6 w-12 overflow-hidden rounded-full bg-ds-bg-neutral-subtle-default">
             <div className="absolute inset-0" style={shimmerStyle} />
           </div>
         </div>
 
         {/* End: Menu skeleton */}
         <div className="ml-4 flex min-w-32 items-center justify-end gap-2 pl-4">
-          <div className="relative h-8 w-8 overflow-hidden rounded-md bg-surface-primary">
+          <div className="relative h-8 w-8 overflow-hidden rounded-md bg-ds-bg-neutral-subtle-default">
             <div className="absolute inset-0" style={shimmerStyle} />
           </div>
         </div>
@@ -350,15 +363,15 @@ export default function GroupedHistoryView({
         {/* Summary skeleton */}
         <div className="flex items-center justify-between pb-4">
           <div className="flex items-center gap-2">
-            <div className="relative h-7 w-28 overflow-hidden rounded-full bg-surface-tertiary">
+            <div className="relative h-7 w-28 overflow-hidden rounded-full bg-ds-bg-neutral-strong-default">
               <div className="absolute inset-0" style={shimmerStyle} />
             </div>
-            <div className="relative h-7 w-32 overflow-hidden rounded-full bg-surface-tertiary">
+            <div className="relative h-7 w-32 overflow-hidden rounded-full bg-ds-bg-neutral-strong-default">
               <div className="absolute inset-0" style={shimmerStyle} />
             </div>
           </div>
           <div className="flex items-center gap-md">
-            <div className="relative h-9 w-40 overflow-hidden rounded-lg bg-surface-tertiary">
+            <div className="relative h-9 w-40 overflow-hidden rounded-lg bg-ds-bg-neutral-strong-default">
               <div className="absolute inset-0" style={shimmerStyle} />
             </div>
           </div>
@@ -377,14 +390,14 @@ export default function GroupedHistoryView({
   if (filteredProjects.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center p-8 text-center">
-        <FolderOpen className="text-icon-tertiary mb-4 h-12 w-12" />
-        <div className="text-sm text-text-secondary">
+        <FolderOpen className="mb-4 h-12 w-12 text-ds-icon-neutral-muted-default" />
+        <div className="text-sm text-ds-text-neutral-muted-default">
           {searchValue
             ? t('dashboard.no-projects-match-search')
             : t('dashboard.no-projects-found')}
         </div>
         {searchValue && (
-          <div className="mt-1 text-xs text-text-tertiary">
+          <div className="mt-1 text-xs text-ds-text-neutral-muted-default">
             {t('dashboard.try-different-search')}
           </div>
         )}
@@ -395,47 +408,62 @@ export default function GroupedHistoryView({
   return (
     <div className="flex w-full flex-col gap-4 pb-40">
       {/* Summary */}
-      <div className="flex items-center justify-between pb-4">
+      <div
+        className={`flex items-center pb-4 ${hideViewSwitcher ? 'justify-start' : 'justify-between'}`}
+      >
         <div className="flex items-center gap-2">
-          <Tag variant="default" size="sm" className="gap-2">
-            <Sparkle />
+          <Tag variant="primary" tone="neutral" size="sm" className="gap-2">
+            <Folder />
             <span className="text-body-sm"> {t('layout.projects')}</span>
-            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-tag-fill-default-foreground text-label-xs font-bold text-text-body">
-              {allProjects.length}
-            </span>
+
+            {allProjects.length}
           </Tag>
 
-          <Tag variant="default" size="sm" className="gap-2">
-            <Pin />
+          <Tag variant="primary" tone="neutral" size="sm" className="gap-2">
+            <ListChecks />
             <span className="text-body-sm"> {t('layout.total-tasks')}</span>
-            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-tag-fill-default-foreground text-label-xs font-bold text-text-body">
-              {allProjects.reduce(
-                (total, project) => total + project.task_count,
-                0
-              )}
+            {allProjects.reduce(
+              (total, project) => total + project.task_count,
+              0
+            )}
+          </Tag>
+
+          <Tag variant="primary" tone="neutral" size="sm" className="gap-2">
+            <Zap />
+            <span className="text-body-sm">
+              {' '}
+              {t('layout.triggers') || 'Triggers'}
             </span>
+            {allProjects.reduce(
+              (total, project) => total + (project.total_triggers || 0),
+              0
+            )}
           </Tag>
         </div>
         <div className="flex items-center gap-md">
-          <Tabs
-            value={viewType}
-            onValueChange={(value) => setHistoryType(value as 'grid' | 'list')}
-          >
-            <TabsList>
-              <TabsTrigger value="grid">
-                <div className="flex items-center gap-1">
-                  <LayoutGrid size={16} />
-                  <span>{t('dashboard.grid')}</span>
-                </div>
-              </TabsTrigger>
-              <TabsTrigger value="list">
-                <div className="flex items-center gap-1">
-                  <List size={16} />
-                  <span>{t('dashboard.list')}</span>
-                </div>
-              </TabsTrigger>
-            </TabsList>
-          </Tabs>
+          {!hideViewSwitcher && (
+            <Tabs
+              value={viewType}
+              onValueChange={(value) =>
+                setHistoryType(value as 'grid' | 'list')
+              }
+            >
+              <TabsList>
+                <TabsTrigger value="grid">
+                  <div className="flex items-center gap-1 text-label-sm">
+                    <LayoutGrid size={16} />
+                    <span>{t('dashboard.grid')}</span>
+                  </div>
+                </TabsTrigger>
+                <TabsTrigger value="list">
+                  <div className="flex items-center gap-1 text-label-sm">
+                    <List size={16} />
+                    <span>{t('dashboard.list')}</span>
+                  </div>
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+          )}
         </div>
       </div>
 
diff --git a/src/components/Dashboard/HistoryTabsNav.tsx b/src/components/Dashboard/HistoryTabsNav.tsx
new file mode 100644
index 000000000..72eec2429
--- /dev/null
+++ b/src/components/Dashboard/HistoryTabsNav.tsx
@@ -0,0 +1,233 @@
+// ========= 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 { Blocks } from '@/components/ui/animate-ui/icons/blocks';
+import { Bot } from '@/components/ui/animate-ui/icons/bot';
+import { Compass } from '@/components/ui/animate-ui/icons/compass';
+import { Hammer } from '@/components/ui/animate-ui/icons/hammer';
+import { AnimateIcon } from '@/components/ui/animate-ui/icons/icon';
+import { Radio } from '@/components/ui/animate-ui/icons/radio';
+import { Settings } from '@/components/ui/animate-ui/icons/settings';
+import { cn } from '@/lib/utils';
+import { motion } from 'framer-motion';
+import type { ReactNode } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const HISTORY_TAB_IDS = [
+  'projects',
+  'agents',
+  'channels',
+  'connectors',
+  'browser',
+  'settings',
+] as const;
+
+export type HistoryTabId = (typeof HISTORY_TAB_IDS)[number];
+
+export function isHistoryTabId(value: string): value is HistoryTabId {
+  return (HISTORY_TAB_IDS as readonly string[]).includes(value);
+}
+
+type TabConfig = {
+  id: HistoryTabId;
+  icon: ReactNode;
+  iconAnimateOnHover: boolean | string;
+};
+
+const HISTORY_TABS: TabConfig[] = [
+  { id: 'projects', icon: <Blocks />, iconAnimateOnHover: 'default' },
+  { id: 'agents', icon: <Bot />, iconAnimateOnHover: 'default' },
+  { id: 'channels', icon: <Radio />, iconAnimateOnHover: 'default' },
+  { id: 'connectors', icon: <Hammer />, iconAnimateOnHover: 'default' },
+  { id: 'browser', icon: <Compass />, iconAnimateOnHover: 'default' },
+  { id: 'settings', icon: <Settings />, iconAnimateOnHover: 'default' },
+];
+
+const tabButtonClass =
+  'group relative z-10 inline-flex h-8 min-h-8 shrink-0 items-center gap-1 rounded-lg px-2 text-label-sm font-bold transition-colors';
+
+const iconSlotClass =
+  'inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-4';
+
+export type HistoryTabsNavProps = {
+  activeTab: HistoryTabId;
+  onChange: (value: string) => void;
+  className?: string;
+};
+
+export function HistoryTabsNav({
+  activeTab,
+  onChange,
+  className,
+}: HistoryTabsNavProps) {
+  const { t } = useTranslation();
+  const navRef = useRef<HTMLDivElement>(null);
+  const [hoveredTab, setHoveredTab] = useState<HistoryTabId | null>(null);
+  const [hoverRect, setHoverRect] = useState({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+  });
+  const [activeLine, setActiveLine] = useState({
+    left: 0,
+    top: 0,
+    width: 0,
+  });
+
+  const updateActiveLine = useCallback(() => {
+    const nav = navRef.current;
+    if (!nav) return;
+    const el = nav.querySelector<HTMLElement>(
+      `[data-history-tab="${activeTab}"]`
+    );
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const nr = nav.getBoundingClientRect();
+    const gapPx = 8;
+    setActiveLine({
+      left: r.left - nr.left,
+      top: r.bottom - nr.top + gapPx,
+      width: r.width,
+    });
+  }, [activeTab]);
+
+  useLayoutEffect(() => {
+    updateActiveLine();
+    const nav = navRef.current;
+    if (!nav) return;
+    const onResize = () => updateActiveLine();
+    window.addEventListener('resize', onResize);
+    const ro = new ResizeObserver(onResize);
+    ro.observe(nav);
+    return () => {
+      window.removeEventListener('resize', onResize);
+      ro.disconnect();
+    };
+  }, [updateActiveLine]);
+
+  const updateHoverRect = useCallback((el: HTMLElement) => {
+    const nav = navRef.current;
+    if (!nav) return;
+    const r = el.getBoundingClientRect();
+    const nr = nav.getBoundingClientRect();
+    setHoverRect({
+      left: r.left - nr.left,
+      top: r.top - nr.top,
+      width: r.width,
+      height: r.height,
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!hoveredTab) return;
+    const el = navRef.current?.querySelector<HTMLElement>(
+      `[data-history-tab="${hoveredTab}"]`
+    );
+    if (el) updateHoverRect(el);
+  }, [activeTab, hoveredTab, updateHoverRect]);
+
+  useLayoutEffect(() => {
+    if (!hoveredTab) return;
+    const el = navRef.current?.querySelector<HTMLElement>(
+      `[data-history-tab="${hoveredTab}"]`
+    );
+    if (!el || !navRef.current) return;
+    const nav = navRef.current;
+    const onResize = () => updateHoverRect(el);
+    window.addEventListener('resize', onResize);
+    const ro = new ResizeObserver(onResize);
+    ro.observe(nav);
+    return () => {
+      window.removeEventListener('resize', onResize);
+      ro.disconnect();
+    };
+  }, [hoveredTab, updateHoverRect]);
+
+  return (
+    <div
+      ref={navRef}
+      className={cn(
+        'gap-2 pb-2 relative flex flex-row flex-wrap items-center',
+        className
+      )}
+      onMouseLeave={() => setHoveredTab(null)}
+      role="tablist"
+    >
+      <motion.div
+        aria-hidden
+        className="rounded-lg bg-ds-bg-neutral-subtle-default ring-ds-border-neutral-default-default shadow-sm pointer-events-none absolute z-0 ring-1"
+        initial={false}
+        animate={{
+          left: hoverRect.left,
+          top: hoverRect.top,
+          width: hoverRect.width,
+          height: hoverRect.height,
+          opacity: hoveredTab ? 1 : 0,
+        }}
+        transition={{
+          left: { type: 'spring', stiffness: 440, damping: 36, mass: 0.55 },
+          top: { type: 'spring', stiffness: 440, damping: 36, mass: 0.55 },
+          width: { type: 'spring', stiffness: 440, damping: 36, mass: 0.55 },
+          height: { type: 'spring', stiffness: 440, damping: 36, mass: 0.55 },
+          opacity: { duration: 0.18, ease: 'easeOut' },
+        }}
+        style={{ position: 'absolute' }}
+      />
+      <motion.div
+        aria-hidden
+        className="bg-ds-bg-brand-default-default h-0.5 pointer-events-none absolute z-[11] rounded-full"
+        initial={false}
+        animate={{
+          left: activeLine.left,
+          top: activeLine.top,
+          width: activeLine.width,
+        }}
+        transition={{
+          type: 'spring',
+          stiffness: 420,
+          damping: 34,
+          mass: 0.55,
+        }}
+        style={{ position: 'absolute' }}
+      />
+      {HISTORY_TABS.map(({ id, icon, iconAnimateOnHover }) => (
+        <AnimateIcon key={id} animateOnHover={iconAnimateOnHover} asChild>
+          <button
+            type="button"
+            role="tab"
+            data-history-tab={id}
+            aria-selected={activeTab === id}
+            onClick={() => onChange(id)}
+            onMouseEnter={(e) => {
+              setHoveredTab(id);
+              updateHoverRect(e.currentTarget);
+            }}
+            className={cn(
+              tabButtonClass,
+              'focus-visible:ring-ds-border-brand-default-focus focus-visible:ring-offset-ds-bg-neutral-default-default !text-body-sm gap-2 flex flex-row border-0 bg-transparent outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+              activeTab === id
+                ? 'text-ds-text-neutral-default-default'
+                : 'text-ds-text-neutral-muted-default hover:text-ds-text-neutral-default-default'
+            )}
+          >
+            <span className={iconSlotClass}>{icon}</span>
+            {t(`layout.${id}`)}
+          </button>
+        </AnimateIcon>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/IntegrationList/index.tsx b/src/components/Dashboard/IntegrationList/index.tsx
similarity index 80%
rename from src/components/IntegrationList/index.tsx
rename to src/components/Dashboard/IntegrationList/index.tsx
index 6247f9a8e..baf644b9a 100644
--- a/src/components/IntegrationList/index.tsx
+++ b/src/components/Dashboard/IntegrationList/index.tsx
@@ -14,10 +14,10 @@
 
 import { fetchGet, fetchPost } from '@/api/http';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
   Tooltip,
   TooltipContent,
-  TooltipSimple,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { CircleAlert, Settings2 } from 'lucide-react';
@@ -36,6 +36,7 @@ import {
 } from '@/hooks/useIntegrationManagement';
 import { getProxyBaseURL } from '@/lib';
 import { OAuth } from '@/lib/oauth';
+import { cn } from '@/lib/utils';
 import { MCPEnvDialog } from '@/pages/Connectors/components/MCPEnvDialog';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -65,6 +66,11 @@ interface IntegrationListProps {
   installedKeys?: string[];
   oauth?: OAuth | null;
   translationNamespace?: 'layout' | 'setting'; // For translation keys
+  className?: string;
+  /** Select mode: show a leading checkbox; use isIntegrationSelected + onToggleIntegration */
+  selectWithCheckbox?: boolean;
+  isIntegrationSelected?: (item: IntegrationItem) => boolean;
+  onToggleIntegration?: (item: IntegrationItem, selected: boolean) => void;
 }
 
 export default function IntegrationList({
@@ -84,6 +90,10 @@ export default function IntegrationList({
   installedKeys: _installedKeys = [],
   oauth: _oauth,
   translationNamespace = variant === 'select' ? 'layout' : 'setting',
+  className: rootClassName,
+  selectWithCheckbox = false,
+  isIntegrationSelected,
+  onToggleIntegration,
 }: IntegrationListProps) {
   const { t } = useTranslation();
   const [showEnvConfig, setShowEnvConfig] = useState(false);
@@ -294,15 +304,15 @@ export default function IntegrationList({
     : 'flex flex-col w-full items-start justify-start gap-4';
 
   const itemClassName = isSelectMode
-    ? 'cursor-pointer hover:bg-surface-hover-subtle px-3 py-2 flex justify-between'
-    : 'w-full px-6 py-4 bg-surface-tertiary rounded-2xl';
+    ? 'cursor-pointer gap-2 rounded-lg bg-ds-bg-neutral-subtle-default px-3 py-2 min-h-0 flex w-full items-center justify-between hover:bg-ds-bg-neutral-default-hover'
+    : 'w-full px-6 py-4 bg-ds-bg-neutral-subtle-default rounded-2xl';
 
   const titleClassName = isSelectMode
-    ? 'text-base leading-snug font-bold text-text-action'
-    : 'text-label-lg font-bold text-text-heading';
+    ? 'min-w-0 flex-1 text-sm font-bold leading-5 text-ds-text-neutral-default-default sm:text-base line-clamp-2 break-words'
+    : 'text-label-lg font-bold text-ds-text-neutral-default-default';
 
   return (
-    <div className={containerClassName}>
+    <div className={cn(containerClassName, rootClassName)}>
       <MCPEnvDialog
         showEnvConfig={showEnvConfig}
         onClose={onClose}
@@ -312,6 +322,12 @@ export default function IntegrationList({
       {sortedItems.map((item) => {
         const isInstalled = !!installed[item.key];
         const isComingSoon = COMING_SOON_ITEMS.includes(item.name);
+        const envCount = item.env_vars?.length ?? 0;
+        const selectedForTool =
+          selectWithCheckbox && isIntegrationSelected
+            ? isIntegrationSelected(item)
+            : false;
+        const checkboxDisabled = isComingSoon || (!isInstalled && envCount > 0);
 
         return (
           <div key={item.key} className="w-full">
@@ -320,49 +336,52 @@ export default function IntegrationList({
               onClick={
                 isSelectMode
                   ? () => {
-                      if (!isComingSoon) {
-                        if (item.env_vars.length === 0 || isInstalled) {
-                          // Ensure toolkit field is passed and normalized for known cases
-                          const normalizedToolkit =
-                            item.name === 'Notion'
-                              ? 'notion_mcp_toolkit'
-                              : item.toolkit;
-                          addOption?.(
-                            { ...item, toolkit: normalizedToolkit },
-                            true
-                          );
+                      if (isComingSoon) return;
+                      if (selectWithCheckbox && onToggleIntegration) {
+                        if (isInstalled) {
+                          onToggleIntegration(item, !selectedForTool);
+                        } else if (envCount === 0) {
+                          onToggleIntegration(item, !selectedForTool);
                         } else {
                           handleInstall(item);
                         }
+                        return;
+                      }
+                      if (envCount === 0 || isInstalled) {
+                        const normalizedToolkit =
+                          item.name === 'Notion'
+                            ? 'notion_mcp_toolkit'
+                            : item.toolkit;
+                        addOption?.(
+                          { ...item, toolkit: normalizedToolkit },
+                          true
+                        );
+                      } else {
+                        handleInstall(item);
                       }
                     }
                   : undefined
               }
             >
               {isSelectMode ? (
-                <div className="flex items-center gap-xs">
-                  {(isSelectMode || showStatusDot) && (
-                    <img
-                      src={ellipseIcon}
-                      alt="icon"
-                      className="mr-2 h-3 w-3"
-                      style={{
-                        filter: isInstalled
-                          ? 'grayscale(0%) brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(81deg) brightness(95%) contrast(92%)'
-                          : 'none',
+                <div className="gap-2 min-w-0 min-h-0 flex flex-1 items-center">
+                  {selectWithCheckbox && (
+                    <Checkbox
+                      disabled={checkboxDisabled}
+                      checked={selectedForTool}
+                      onCheckedChange={(c) => {
+                        if (c === 'indeterminate') return;
+                        onToggleIntegration?.(item, c === true);
                       }}
+                      onClick={(e) => e.stopPropagation()}
+                      aria-label={item.name}
                     />
                   )}
-                  <div className={titleClassName}>{item.name}</div>
-                  <div className="flex items-center">
-                    <TooltipSimple content={item.desc}>
-                      <CircleAlert className="h-4 w-4 text-icon-secondary" />
-                    </TooltipSimple>
-                  </div>
+                  <span className={titleClassName}>{item.name}</span>
                 </div>
               ) : (
-                <div className="flex w-full flex-row items-center justify-between gap-xs">
-                  <div className="flex flex-row items-center gap-xs">
+                <div className="gap-xs flex w-full flex-row items-center justify-between">
+                  <div className="gap-xs flex flex-row items-center">
                     {showStatusDot && (
                       <img
                         src={ellipseIcon}
@@ -379,7 +398,7 @@ export default function IntegrationList({
                     <div className="flex items-center">
                       <Tooltip>
                         <TooltipTrigger asChild>
-                          <CircleAlert className="h-4 w-4 text-icon-secondary" />
+                          <CircleAlert className="h-4 w-4 text-ds-icon-neutral-muted-default" />
                         </TooltipTrigger>
                         <TooltipContent>
                           <div>{item.desc}</div>
@@ -387,7 +406,7 @@ export default function IntegrationList({
                       </Tooltip>
                     </div>
                   </div>
-                  <div className="flex flex-row items-center gap-md">
+                  <div className="gap-md flex flex-row items-center">
                     {showConfigButton && (
                       <Button
                         type="button"
@@ -433,7 +452,7 @@ export default function IntegrationList({
                   </div>
                 </div>
               )}
-              {isSelectMode && item.env_vars.length !== 0 && (
+              {isSelectMode && envCount !== 0 && (
                 <Button
                   disabled={isComingSoon}
                   variant={isInstalled ? 'secondary' : 'primary'}
@@ -455,9 +474,9 @@ export default function IntegrationList({
             </div>
 
             {!isSelectMode && showSelect && (
-              <div className="mt-6 flex w-full flex-row items-center gap-md border-x-0 border-b-0 border-solid border-border-secondary pt-6">
-                <div className="flex w-full flex-row items-center justify-between gap-md">
-                  <div className="text-body-md text-text-body">
+              <div className="mt-6 gap-md border-ds-border-neutral-default-default pt-6 flex w-full flex-row items-center border-x-0 border-b-0 border-solid">
+                <div className="gap-md flex w-full flex-row items-center justify-between">
+                  <div className="text-body-md text-ds-text-neutral-default-default">
                     {' '}
                     Default {item.name}
                   </div>
diff --git a/src/components/SearchInput/index.tsx b/src/components/Dashboard/SearchInput/index.tsx
similarity index 86%
rename from src/components/SearchInput/index.tsx
rename to src/components/Dashboard/SearchInput/index.tsx
index 43e27a2ae..197cc208f 100644
--- a/src/components/SearchInput/index.tsx
+++ b/src/components/Dashboard/SearchInput/index.tsx
@@ -81,8 +81,8 @@ export default function SearchInput({
       <motion.div
         className={cn(
           'rounded-lg py-0.5 flex items-center justify-center overflow-hidden border border-solid border-transparent bg-transparent',
-          'focus-within:border-input-border-focus focus-within:bg-input-bg-input',
-          'hover:bg-surface-tertiary hover:border-transparent'
+          'focus-within:border-ds-border-brand-default-focus focus-within:bg-ds-bg-neutral-strong-default',
+          'hover:bg-ds-bg-neutral-strong-hover hover:border-transparent'
         )}
         initial={false}
         animate={{ width: isExpanded ? EXPANDED_WIDTH : COLLAPSED_WIDTH }}
@@ -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}
                 >
@@ -123,7 +124,7 @@ export default function SearchInput({
               exit={{ opacity: 0 }}
               transition={{ duration: 0.15 }}
             >
-              <span className="ml-2 h-4 w-4 text-icon-secondary pointer-events-none inline-flex shrink-0 items-center justify-center">
+              <span className="ml-2 h-4 w-4 text-ds-icon-neutral-muted-default pointer-events-none inline-flex shrink-0 items-center justify-center">
                 <Search className="h-4 w-4" />
               </span>
               <input
@@ -140,14 +141,15 @@ export default function SearchInput({
                     onSearch?.();
                   }
                 }}
-                className="h-6 min-w-0 pl-2 text-label-sm text-text-heading placeholder:text-text-label flex-1 bg-transparent outline-none"
+                className="h-6 min-w-0 pl-2 text-label-sm text-ds-text-neutral-default-default placeholder:text-ds-text-neutral-muted-default flex-1 bg-transparent outline-none"
               />
               <TooltipSimple content={clearLabel}>
                 <Button
                   type="button"
                   variant="ghost"
-                  size="icon"
-                  className="text-icon-secondary shrink-0 rounded-full"
+                  size="xs"
+                  buttonContent="icon-only"
+                  className="text-ds-icon-neutral-muted-default shrink-0 rounded-full"
                   onClick={collapse}
                   aria-label={clearLabel}
                 >
@@ -168,7 +170,9 @@ export default function SearchInput({
         value={value}
         onChange={onChange}
         placeholder={place}
-        leadingIcon={<Search className="h-5 w-5 text-icon-secondary" />}
+        leadingIcon={
+          <Search className="h-5 w-5 text-ds-icon-neutral-muted-default" />
+        }
       />
     </div>
   );
diff --git a/src/components/Navigation/index.tsx b/src/components/Dashboard/VerticalNav.tsx
similarity index 82%
rename from src/components/Navigation/index.tsx
rename to src/components/Dashboard/VerticalNav.tsx
index 1fd7c3737..7e069384a 100644
--- a/src/components/Navigation/index.tsx
+++ b/src/components/Dashboard/VerticalNav.tsx
@@ -62,7 +62,7 @@ export function VerticalNavigation({
     >
       <TabsList
         className={cn(
-          'flex w-full flex-col gap-1.5 rounded-none border-none bg-transparent p-0',
+          'gap-1.5 p-0 flex w-full flex-col rounded-none border-none bg-transparent',
           listClassName
         )}
       >
@@ -72,16 +72,16 @@ export function VerticalNavigation({
             value={item.value}
             disabled={item.disabled}
             className={cn(
-              'w-full justify-start gap-2 rounded-lg px-5 py-1.5 text-body-sm',
+              'gap-2 rounded-lg px-5 py-1.5 text-body-sm w-full justify-start',
               'bg-transparent data-[state=inactive]:bg-transparent',
-              'data-[state=inactive]:text-menubutton-text-default data-[state=inactive]:opacity-70',
-              'data-[state=inactive]:hover:bg-menubutton-fill-hover data-[state=inactive]:hover:opacity-100',
-              'data-[state=active]:bg-menubutton-fill-active data-[state=active]:text-menutabs-text-active',
+              'data-[state=inactive]:text-ds-text-neutral-muted-default data-[state=inactive]:opacity-70',
+              'data-[state=inactive]:hover:bg-ds-bg-neutral-default-hover data-[state=inactive]:hover:opacity-100',
+              'data-[state=active]:bg-ds-bg-neutral-default-default data-[state=active]:text-ds-text-neutral-default-default',
               triggerClassName
             )}
           >
             {item.icon ? (
-              <span className="inline-flex h-4 w-4 items-center justify-center">
+              <span className="h-4 w-4 inline-flex items-center justify-center">
                 {item.icon}
               </span>
             ) : null}
diff --git a/src/components/Dialog/CloseNotice.tsx b/src/components/Dialog/CloseNotice.tsx
index 7a62ca683..a0e808211 100644
--- a/src/components/Dialog/CloseNotice.tsx
+++ b/src/components/Dialog/CloseNotice.tsx
@@ -46,14 +46,14 @@ export default function CloseNoticeDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
-      <DialogContent className="gap-0 !rounded-xl border border-border-subtle-strong !bg-popup-surface p-0 shadow-sm sm:max-w-[600px]">
-        <DialogHeader className="!rounded-t-xl !bg-popup-surface p-md">
+      <DialogContent className="gap-0 !rounded-xl border-ds-border-neutral-strong-default !bg-ds-bg-neutral-strong-default p-0 shadow-sm sm:max-w-[600px] border">
+        <DialogHeader className="!rounded-t-xl !bg-ds-bg-neutral-strong-default p-md">
           <DialogTitle className="m-0">{t('layout.close-notice')}</DialogTitle>
         </DialogHeader>
-        <div className="flex flex-col gap-md bg-popup-bg p-md">
+        <div className="gap-md bg-ds-bg-neutral-strong-default p-md flex flex-col">
           {t('layout.a-task-is-currently-running')}
         </div>
-        <DialogFooter className="!rounded-b-xl bg-white-100% p-md">
+        <DialogFooter className="!rounded-b-xl bg-ds-bg-neutral-inverse-default p-md">
           <DialogClose asChild>
             <Button variant="ghost" size="md">
               {t('layout.cancel')}
diff --git a/src/components/Dialog/EndNotice.tsx b/src/components/Dialog/EndNotice.tsx
index a5ffecffd..35bcf8761 100644
--- a/src/components/Dialog/EndNotice.tsx
+++ b/src/components/Dialog/EndNotice.tsx
@@ -48,14 +48,14 @@ export default function EndNoticeDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
-      <DialogContent className="gap-0 !rounded-xl border border-border-subtle-strong !bg-popup-surface p-0 shadow-sm sm:max-w-[600px]">
-        <DialogHeader className="justify-start !rounded-t-xl !bg-popup-surface p-md">
+      <DialogContent className="gap-0 !rounded-xl border-ds-border-neutral-strong-default !bg-ds-bg-neutral-strong-default p-0 shadow-sm sm:max-w-[600px] border">
+        <DialogHeader className="!rounded-t-xl !bg-ds-bg-neutral-strong-default p-md justify-start">
           <DialogTitle className="m-0">{t('layout.end-project')}</DialogTitle>
         </DialogHeader>
-        <div className="flex flex-col gap-md bg-popup-bg p-md">
+        <div className="gap-md bg-ds-bg-neutral-strong-default p-md flex flex-col">
           {t('layout.ending-this-project-will-stop')}
         </div>
-        <DialogFooter className="!rounded-b-xl bg-white-100% p-md">
+        <DialogFooter className="!rounded-b-xl bg-ds-bg-neutral-inverse-default p-md">
           <DialogClose asChild>
             <Button variant="ghost" size="md" disabled={loading}>
               {t('layout.cancel')}
@@ -64,7 +64,7 @@ export default function EndNoticeDialog({
           <Button
             size="md"
             onClick={onSubmit}
-            variant="cuation"
+            variant="caution"
             disabled={loading}
           >
             {t('layout.yes-end-project')}
diff --git a/src/components/Dialog/ReportBugDialog.tsx b/src/components/Dialog/ReportBugDialog.tsx
new file mode 100644
index 000000000..bef3c8416
--- /dev/null
+++ b/src/components/Dialog/ReportBugDialog.tsx
@@ -0,0 +1,293 @@
+// ========= 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 {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Textarea } from '@/components/ui/textarea';
+import { useHost } from '@/host';
+import { Download } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+
+const INFO_EMAIL = 'info@eigent.ai';
+
+function buildMailtoUrl(
+  subject: string,
+  body: string
+): { url: string; truncated: boolean } {
+  const maxLen = 1800;
+  const tail = '\n\n[…]';
+  let b = body;
+  let truncated = false;
+  if (b.length > maxLen) {
+    b = b.slice(0, maxLen - tail.length) + tail;
+    truncated = true;
+  }
+  const url = `mailto:${INFO_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(b)}`;
+  return { url, truncated };
+}
+
+/** Matches `getDiagnosticsInfo` in preload / `ElectronAPI` */
+type DiagnosticsInfo = {
+  version: string;
+  platform: string;
+  arch: string;
+};
+
+interface ReportBugDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function ReportBugDialog({
+  open,
+  onOpenChange,
+}: ReportBugDialogProps) {
+  const host = useHost();
+  const { t } = useTranslation();
+  const [description, setDescription] = useState('');
+  const [steps, setSteps] = useState('');
+  const [meta, setMeta] = useState<DiagnosticsInfo | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [downloadingLog, setDownloadingLog] = useState(false);
+
+  const handleDownloadLog = useCallback(async () => {
+    const exportLog = host?.electronAPI?.exportLog;
+    if (!exportLog) {
+      toast.error(t('layout.general-error'));
+      return;
+    }
+    setDownloadingLog(true);
+    try {
+      const response = await exportLog();
+      if (!response?.success) {
+        if (response?.error) {
+          toast.error(response.error);
+        }
+        return;
+      }
+      if (response.savedPath) {
+        toast.success(`${t('layout.log-saved')} ${response.savedPath}`);
+        return;
+      }
+      if (response.data === 'log file is empty') {
+        toast.info(t('layout.log-file-empty'));
+      }
+    } catch (e: unknown) {
+      toast.error(e instanceof Error ? e.message : t('layout.general-error'));
+    } finally {
+      setDownloadingLog(false);
+    }
+  }, [host?.electronAPI, t]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const api = host?.electronAPI;
+    if (!api?.getDiagnosticsInfo) {
+      return;
+    }
+    void api
+      .getDiagnosticsInfo()
+      .then((info: DiagnosticsInfo) => {
+        if (info?.version) {
+          setMeta({
+            version: info.version,
+            platform: info.platform,
+            arch: info.arch,
+          });
+        }
+      })
+      .catch(() => {
+        setMeta(null);
+      });
+  }, [open, host?.electronAPI]);
+
+  useEffect(() => {
+    if (!open) {
+      setDescription('');
+      setSteps('');
+    }
+  }, [open]);
+
+  const onSubmit = useCallback(async () => {
+    const api = host?.electronAPI;
+    if (!api?.exportDiagnosticsZip || !api?.openMailto) {
+      toast.error(t('layout.general-error'));
+      return;
+    }
+    const trimmed = description.trim();
+    if (!trimmed) {
+      toast.error(t('layout.report-bug-description-required'));
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const response = await api.exportDiagnosticsZip({
+        description: trimmed,
+        steps: steps.trim() || undefined,
+      });
+      if (!response?.success) {
+        if (response?.error === '') {
+          return;
+        }
+        if (response?.error) {
+          toast.error(response.error);
+        } else {
+          toast.error(t('layout.general-error'));
+        }
+        return;
+      }
+      if (!response.savedPath) {
+        return;
+      }
+
+      const subject = t('layout.report-bug-mail-subject');
+      const v = meta?.version ?? '—';
+      const p = meta?.platform ?? '—';
+      const a = meta?.arch ?? '—';
+      const body = [
+        t('layout.report-bug-mail-body-intro'),
+        '',
+        t('layout.report-bug-mail-body-path', { path: response.savedPath }),
+        '',
+        '—',
+        t('layout.report-bug-mail-body-meta', { version: v, os: p, arch: a }),
+        '',
+        t('layout.report-bug-mail-body-desc'),
+        trimmed,
+        '',
+        ...(steps.trim()
+          ? [t('layout.report-bug-mail-body-steps'), steps.trim(), '']
+          : []),
+      ].join('\n');
+
+      const { url, truncated } = buildMailtoUrl(subject, body);
+      if (truncated) {
+        toast.info(t('layout.report-bug-mail-body-truncated'));
+      }
+
+      const mail = await api.openMailto(url);
+      if (!mail?.success) {
+        if (mail?.error) {
+          toast.error(mail.error);
+        }
+        return;
+      }
+      onOpenChange(false);
+      toast.success(t('layout.report-bug-diagnostics-saved'));
+    } catch (e: unknown) {
+      toast.error(e instanceof Error ? e.message : t('layout.general-error'));
+    } finally {
+      setSubmitting(false);
+    }
+  }, [host?.electronAPI, description, steps, meta, onOpenChange, t]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        size="md"
+        className="gap-0 !rounded-xl border-ds-border-neutral-strong-default !bg-ds-bg-neutral-strong-default p-0 shadow-sm sm:max-w-[560px] border"
+      >
+        <div className="bg-ds-bg-neutral-strong-default rounded-t-xl pl-md pr-12 pt-md pb-2 w-full text-left">
+          <DialogTitle className="m-0 text-body-md font-bold text-ds-text-neutral-default-default block w-full text-left">
+            {t('layout.report-bug-dialog-title')}
+          </DialogTitle>
+        </div>
+        <div className="gap-md bg-ds-bg-neutral-strong-default px-md pt-2 pb-md flex max-h-[min(70vh,520px)] flex-col text-left">
+          {meta && (
+            <p className="text-body-sm text-ds-text-neutral-subtle-default m-0">
+              {t('layout.report-bug-meta', {
+                version: meta.version,
+                os: meta.platform,
+                arch: meta.arch,
+              })}
+            </p>
+          )}
+          <p className="text-body-sm text-ds-text-neutral-subtle-default m-0">
+            {t('layout.report-bug-footer-hint')}
+          </p>
+          <label
+            className="text-body-sm font-medium text-ds-text-neutral-default-default"
+            htmlFor="report-bug-description"
+          >
+            {t('layout.report-bug-field-description')}
+          </label>
+          <Textarea
+            id="report-bug-description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder={t('layout.report-bug-field-description-placeholder')}
+            className="min-h-[88px] resize-y"
+            disabled={submitting}
+          />
+          <label
+            className="text-body-sm font-medium text-ds-text-neutral-default-default"
+            htmlFor="report-bug-steps"
+          >
+            {t('layout.report-bug-field-steps')}
+          </label>
+          <Textarea
+            id="report-bug-steps"
+            value={steps}
+            onChange={(e) => setSteps(e.target.value)}
+            placeholder={t('layout.report-bug-field-steps-placeholder')}
+            className="min-h-[72px] resize-y"
+            disabled={submitting}
+          />
+          <div className="pt-1">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              buttonContent="text"
+              onClick={() => void handleDownloadLog()}
+              disabled={submitting || downloadingLog}
+            >
+              <Download className="h-4 w-4 shrink-0" aria-hidden />
+              {t('layout.download-logs')}
+            </Button>
+          </div>
+        </div>
+        <DialogFooter className="!rounded-b-xl p-md gap-sm sm:!flex-col flex !flex-col !border-0 !border-t-0 bg-transparent shadow-none">
+          <div className="gap-sm flex w-full flex-row justify-end">
+            <Button
+              variant="ghost"
+              size="md"
+              onClick={() => onOpenChange(false)}
+              disabled={submitting}
+            >
+              {t('layout.cancel')}
+            </Button>
+            <Button
+              size="md"
+              variant="primary"
+              onClick={() => void onSubmit()}
+              disabled={submitting || !description.trim()}
+            >
+              {t('layout.report-bug-submit')}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/SearchHistoryDialog.tsx b/src/components/Dialog/SearchHistoryDialog.tsx
similarity index 92%
rename from src/components/SearchHistoryDialog.tsx
rename to src/components/Dialog/SearchHistoryDialog.tsx
index 1e33a03fc..191a2d5c8 100644
--- a/src/components/SearchHistoryDialog.tsx
+++ b/src/components/Dialog/SearchHistoryDialog.tsx
@@ -14,10 +14,8 @@
 
 'use client';
 
-import { ScanFace, Search } from 'lucide-react';
-import { useEffect, useState } from 'react';
-
-import GroupedHistoryView from '@/components/GroupedHistoryView';
+import GroupedHistoryView from '@/components/Dashboard/GroupedHistoryView';
+import { Button } from '@/components/ui/button';
 import {
   CommandDialog,
   CommandEmpty,
@@ -27,15 +25,16 @@ import {
   CommandList,
   CommandSeparator,
 } from '@/components/ui/command';
+import { DialogTitle } from '@/components/ui/dialog';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
 import { loadProjectFromHistory } from '@/lib';
 import { fetchHistoryTasks } from '@/service/historyApi';
 import { useGlobalStore } from '@/store/globalStore';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { ScanFace, Search } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { Button } from './ui/button';
-import { DialogTitle } from './ui/dialog';
 
 export function SearchHistoryDialog() {
   const { t } = useTranslation();
@@ -97,11 +96,11 @@ export function SearchHistoryDialog() {
     <>
       <Button
         variant="ghost"
-        className="h-[32px] border border-solid border-menutabs-border-default bg-menutabs-bg-default"
+        className="border-ds-border-neutral-default-default bg-ds-bg-neutral-strong-default h-[32px] border border-solid"
         size="sm"
         onClick={() => setOpen(true)}
       >
-        <Search className="text-menutabs-icon-active" size={16} />
+        <Search className="text-ds-icon-neutral-default-default" size={16} />
         <span>{t('dashboard.search')}</span>
       </Button>
       <CommandDialog open={open} onOpenChange={setOpen}>
diff --git a/src/components/ErrorBoundary/index.tsx b/src/components/ErrorBoundary/index.tsx
index dfe089940..37b4d10a1 100644
--- a/src/components/ErrorBoundary/index.tsx
+++ b/src/components/ErrorBoundary/index.tsx
@@ -60,30 +60,30 @@ export class ErrorBoundary extends Component<Props, State> {
 
       // Default error UI
       return (
-        <div className="flex h-screen w-full items-center justify-center bg-surface-primary p-4">
-          <div className="flex max-w-md flex-col items-center gap-6 rounded-xl border border-solid border-border-secondary bg-surface-secondary p-8 text-center shadow-lg">
-            <div className="bg-warning/10 flex h-16 w-16 items-center justify-center rounded-full">
+        <div className="bg-ds-bg-neutral-subtle-default p-4 flex h-screen w-full items-center justify-center">
+          <div className="max-w-md gap-6 rounded-xl border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default p-8 shadow-lg flex flex-col items-center border border-solid text-center">
+            <div className="bg-warning/10 h-16 w-16 flex items-center justify-center rounded-full">
               <AlertTriangle className="text-warning h-8 w-8" />
             </div>
-            <div className="flex flex-col gap-2">
-              <h1 className="text-xl font-bold text-text-primary">
+            <div className="gap-2 flex flex-col">
+              <h1 className="text-xl font-bold text-ds-text-neutral-default-default">
                 Something went wrong
               </h1>
-              <p className="text-sm text-text-secondary">
+              <p className="text-sm text-ds-text-neutral-muted-default">
                 An unexpected error occurred. Please try refreshing the page.
               </p>
             </div>
             {this.state.error && (
-              <div className="w-full rounded-lg bg-surface-tertiary p-4 text-left">
-                <p className="mb-2 text-xs font-medium text-text-secondary">
+              <div className="rounded-lg bg-ds-bg-neutral-strong-default p-4 w-full text-left">
+                <p className="mb-2 text-xs font-medium text-ds-text-neutral-muted-default">
                   Error details:
                 </p>
-                <p className="max-h-32 overflow-y-auto font-mono text-xs text-text-primary">
+                <p className="max-h-32 font-mono text-xs text-ds-text-neutral-default-default overflow-y-auto">
                   {this.state.error.toString()}
                 </p>
               </div>
             )}
-            <div className="flex gap-3">
+            <div className="gap-3 flex">
               <Button
                 variant="outline"
                 size="md"
diff --git a/src/components/Folder/FolderComponent.tsx b/src/components/Folder/FolderComponent.tsx
index 90376ef75..29d946bee 100644
--- a/src/components/Folder/FolderComponent.tsx
+++ b/src/components/Folder/FolderComponent.tsx
@@ -133,7 +133,7 @@ export default function FolderComponent({ selectedFile }: Props) {
 
   return (
     <div
-      className="folder-component-content w-full overflow-auto text-text-primary"
+      className="folder-component-content text-ds-text-neutral-default-default w-full overflow-auto"
       dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
     />
   );
diff --git a/src/components/Folder/ZoomControls.tsx b/src/components/Folder/ZoomControls.tsx
index 2787b41ff..bfa2a4008 100644
--- a/src/components/Folder/ZoomControls.tsx
+++ b/src/components/Folder/ZoomControls.tsx
@@ -30,36 +30,39 @@ 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-ds-bg-neutral-default-default border-ds-border-neutral-subtle-default 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"
-          className="h-7 w-7 text-text-secondary hover:bg-fill-fill-transparent-hover hover:text-text-primary"
+          className="h-7 w-7 text-ds-text-neutral-muted-default hover:bg-ds-bg-neutral-subtle-hover hover:text-ds-text-neutral-default-default"
         >
           <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-ds-text-neutral-default-default 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"
-          className="h-7 w-7 text-text-secondary hover:bg-fill-fill-transparent-hover hover:text-text-primary"
+          className="h-7 w-7 text-ds-text-neutral-muted-default hover:bg-ds-bg-neutral-subtle-hover hover:text-ds-text-neutral-default-default"
         >
           <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-ds-border-neutral-default-default w-px" />
         <Button
-          size="icon"
+          size="xs"
+          buttonContent="icon-only"
           variant="ghost"
           onClick={onZoomReset}
           title="Reset Zoom"
-          className="h-7 w-7 text-text-secondary hover:bg-fill-fill-transparent-hover hover:text-text-primary"
+          className="h-7 w-7 text-ds-text-neutral-muted-default hover:bg-ds-bg-neutral-subtle-hover hover:text-ds-text-neutral-default-default"
         >
           <RotateCcw className="h-3.5 w-3.5" />
         </Button>
diff --git a/src/components/Folder/index.tsx b/src/components/Folder/index.tsx
index 2f07f03db..86064097b 100644
--- a/src/components/Folder/index.tsx
+++ b/src/components/Folder/index.tsx
@@ -12,25 +12,45 @@
 // 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,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import type { LucideIcon } from 'lucide-react';
 import {
   ChevronDown,
   ChevronRight,
-  ChevronsLeft,
   CodeXml,
   Download,
+  File,
+  FileArchive,
+  FileCode,
+  FileJson,
   FileText,
   Folder as FolderIcon,
+  FolderOpen,
+  Image,
+  Music,
   Search,
   SquareTerminal,
+  Table2,
+  Video,
 } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import {
+  createElement,
+  Fragment,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import FolderComponent from './FolderComponent';
 
 import { fetchGet, getBaseURL } from '@/api/http';
@@ -47,28 +67,132 @@ import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import { ZoomControls } from './ZoomControls';
 
-const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg'];
-const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'wma'];
-const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'avi', 'mkv', 'flv', 'wmv'];
-
-function FileLoadingSpinner({ fileName }: { fileName?: string } = {}) {
-  return (
-    <div className="flex h-full min-h-[200px] flex-col items-center justify-center gap-4">
-      <div className="h-10 w-10 animate-spin rounded-full border-2 border-border-subtle border-t-text-link" />
-      <p className="text-sm text-text-secondary">
-        {fileName ? (
-          <>
-            Loading{' '}
-            <span className="font-medium text-text-primary">{fileName}</span>
-            ...
-          </>
-        ) : (
-          'Loading...'
-        )}
-      </p>
-    </div>
-  );
-}
+const IMAGE_EXTENSIONS = [
+  'png',
+  'jpg',
+  'jpeg',
+  'gif',
+  'bmp',
+  'webp',
+  'svg',
+  'ico',
+  'heic',
+  'avif',
+];
+const AUDIO_EXTENSIONS = [
+  'mp3',
+  'wav',
+  'ogg',
+  'flac',
+  'aac',
+  'm4a',
+  'wma',
+  'opus',
+  'm4b',
+  'aiff',
+  'alac',
+];
+const VIDEO_EXTENSIONS = [
+  'mp4',
+  'webm',
+  'mov',
+  'avi',
+  'mkv',
+  'flv',
+  'wmv',
+  'm4v',
+  'mpg',
+  'mpeg',
+  '3gp',
+  'ogv',
+];
+
+const ARCHIVE_EXTENSIONS = [
+  'zip',
+  'rar',
+  '7z',
+  'tar',
+  'gz',
+  'bz2',
+  'xz',
+  'tgz',
+  'lz4',
+  'zst',
+];
+
+const CODE_EXTENSIONS = [
+  'js',
+  'mjs',
+  'cjs',
+  'ts',
+  'tsx',
+  'jsx',
+  'py',
+  'java',
+  'go',
+  'rs',
+  'cpp',
+  'cc',
+  'cxx',
+  'c',
+  'h',
+  'hpp',
+  'cs',
+  'php',
+  'rb',
+  'swift',
+  'kt',
+  'kts',
+  'sql',
+  'vue',
+  'svelte',
+  'wasm',
+  'ps1',
+  'bat',
+  'cmd',
+  'gradle',
+  'cmake',
+  'make',
+  'dockerfile',
+];
+
+const MARKUP_STYLE_EXTENSIONS = [
+  'html',
+  'htm',
+  'xml',
+  'css',
+  'scss',
+  'sass',
+  'less',
+  'yaml',
+  'yml',
+];
+
+/** Office / binary documents — use generic {@link File} icon */
+const DOCUMENT_EXTENSIONS = [
+  'pdf',
+  'doc',
+  'docx',
+  'odt',
+  'ppt',
+  'pptx',
+  'odp',
+  'key',
+  'pages',
+  'rtf',
+];
+
+const PLAIN_TEXT_EXTENSIONS = [
+  'txt',
+  'md',
+  'markdown',
+  'log',
+  'rst',
+  'adoc',
+  'tex',
+];
+
+const SPREADSHEET_EXTENSIONS = ['xls', 'xlsx', 'csv', 'ods', 'tsv'];
 
 type FileTypeTarget = {
   name?: string;
@@ -118,6 +242,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));
 }
@@ -128,9 +258,39 @@ function isVideoFile(file: FileTypeTarget) {
   return VIDEO_EXTENSIONS.includes(getFileType(file));
 }
 
+function isArchiveFile(file: FileTypeTarget) {
+  return ARCHIVE_EXTENSIONS.includes(getFileType(file));
+}
+
+function isCodeLikeFile(file: FileTypeTarget) {
+  const ext = getFileType(file);
+  if (!ext) return false;
+  if (CODE_EXTENSIONS.includes(ext)) return true;
+  if (MARKUP_STYLE_EXTENSIONS.includes(ext)) return true;
+  return false;
+}
+
+/** Leading icon for file tree leaves (when no custom `icon` on the node). */
+function getLeafFileTreeIcon(file: FileTypeTarget): LucideIcon {
+  if (isImageFile(file)) return Image;
+  if (isVideoFile(file)) return Video;
+  if (isAudioFile(file)) return Music;
+  if (isArchiveFile(file)) return FileArchive;
+
+  const ext = getFileType(file);
+  if (!ext) return File;
+
+  if (ext === 'json' || ext === 'jsonl' || ext === 'jsonc') return FileJson;
+  if (isCodeLikeFile(file)) return FileCode;
+  if (SPREADSHEET_EXTENSIONS.includes(ext)) return Table2;
+  if (DOCUMENT_EXTENSIONS.includes(ext)) return File;
+  if (PLAIN_TEXT_EXTENSIONS.includes(ext)) return FileText;
+
+  return File;
+}
+
 // Type definitions
 interface FileTreeNode {
-  id: string;
   name: string;
   path: string;
   type?: string;
@@ -141,6 +301,57 @@ interface FileTreeNode {
   relativePath?: string;
 }
 
+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 };
+}
+
+/** Keep folder hierarchy; only include file leaves whose `path` is in the set. */
+function filterTreeToAllowedLeafPaths(
+  node: FileTreeNode,
+  allowedLeafPaths: Set<string>
+): FileTreeNode | null {
+  if (!node.children?.length) return null;
+  const children: FileTreeNode[] = [];
+  for (const child of node.children) {
+    if (child.isFolder) {
+      const nested = filterTreeToAllowedLeafPaths(child, allowedLeafPaths);
+      if (nested?.children?.length) {
+        children.push(nested);
+      }
+    } else if (allowedLeafPaths.has(child.path)) {
+      children.push(child);
+    }
+  }
+  if (!children.length) return null;
+  return { ...node, children };
+}
+
+function pathsFromFileList(res: unknown[] | null): Set<string> {
+  const s = new Set<string>();
+  for (const item of res || []) {
+    const p = (item as { path?: string; url?: string })?.path;
+    const u = (item as { url?: string })?.url;
+    if (p) s.add(p);
+    else if (u) s.add(u);
+  }
+  return s;
+}
+
 interface FileInfo {
   name: string;
   path: string;
@@ -152,196 +363,80 @@ interface FileInfo {
   isRemote?: boolean;
 }
 
-type FileIdentity = Pick<FileInfo, 'name' | 'path' | 'relativePath'>;
-
-function normalizeTreePath(path: string): string {
-  return path
-    .replace(/\\/g, '/')
-    .replace(/^\.?\//, '')
-    .replace(/\/+/g, '/')
-    .replace(/^\/+/, '');
-}
-
 function getNormalizedTreeRelativePath(file: FileInfo): string {
-  const normalizedRelativePath = normalizeTreePath(file.relativePath || '');
-  if (normalizedRelativePath) {
-    return normalizedRelativePath;
-  }
-
-  const normalizedName = normalizeTreePath(file.name || '');
-  if (normalizedName) {
-    return normalizedName;
-  }
-
-  return '';
+  const rel = (file.relativePath || '').replace(/\\/g, '/').replace(/^\/+/, '');
+  if (rel) return rel;
+  return (file.path || file.name || '').replace(/\\/g, '/').replace(/^\/+/, '');
 }
 
-function getComparableRelativePath(file?: FileIdentity | null): string | null {
-  if (!file) return null;
-
-  const normalizedRelativePath = normalizeLookupPath(file.relativePath || '');
-  if (normalizedRelativePath) {
-    return normalizedRelativePath;
-  }
-
-  if (!file.path) return null;
-
-  try {
-    const url = new URL(file.path, window.location.origin);
-    const pathParam = url.searchParams.get('path');
-    return pathParam
-      ? normalizeLookupPath(decodeURIComponent(pathParam))
-      : null;
-  } catch {
-    return null;
-  }
+function getComparableRelativePath(file?: FileInfo | null): string {
+  if (!file) return '';
+  return getNormalizedTreeRelativePath(file).toLowerCase();
 }
 
-export function isSameFileIdentity(
-  left?: FileIdentity | null,
-  right?: FileIdentity | null
+function isSameFileIdentity(
+  left?: FileInfo | null,
+  right?: FileInfo | null
 ): boolean {
   if (!left || !right) return false;
-
-  if (left.path && right.path && left.path === right.path) {
-    return true;
-  }
-
-  const leftRelativePath = getComparableRelativePath(left);
-  const rightRelativePath = getComparableRelativePath(right);
-
-  if (leftRelativePath && rightRelativePath) {
-    return leftRelativePath === rightRelativePath;
-  }
-
-  return (
-    !!left.name &&
-    !!right.name &&
-    left.name === right.name &&
-    !leftRelativePath &&
-    !rightRelativePath &&
-    !left.path &&
-    !right.path
-  );
+  const leftRel = getComparableRelativePath(left);
+  const rightRel = getComparableRelativePath(right);
+  if (leftRel && rightRel) return leftRel === rightRel;
+  return left.path === right.path;
 }
 
-export function findMatchingFile(
+function findMatchingFile(
   files: FileInfo[],
   target?: FileInfo | null
 ): FileInfo | undefined {
   if (!target) return undefined;
 
-  if (target.path) {
-    const exactPathMatch = files.find((file) => file.path === target.path);
-    if (exactPathMatch) {
-      return exactPathMatch;
-    }
-  }
+  const pathMatch = files.find((file) => file.path === target.path);
+  if (pathMatch) return pathMatch;
 
   const targetRelativePath = getComparableRelativePath(target);
   if (targetRelativePath) {
     const relativePathMatch = files.find(
       (file) => getComparableRelativePath(file) === targetRelativePath
     );
-    if (relativePathMatch) {
-      return relativePathMatch;
-    }
+    if (relativePathMatch) return relativePathMatch;
   }
 
   if (target.name) {
     const sameNameMatches = files.filter((file) => file.name === target.name);
-    if (sameNameMatches.length === 1) {
-      return sameNameMatches[0];
-    }
+    if (sameNameMatches.length === 1) return sameNameMatches[0];
   }
 
   return undefined;
 }
 
-export function buildFileTree(files: FileInfo[]): FileTreeNode {
-  const root: FileTreeNode = {
-    id: 'root',
-    name: 'root',
-    path: '',
-    children: [],
-    isFolder: true,
-  };
-
-  const folderMap = new Map<string, FileTreeNode>();
-  folderMap.set('', root);
-
-  const sortedFiles = [...files].sort((left, right) => {
-    const leftRelativePath = getNormalizedTreeRelativePath(left);
-    const rightRelativePath = getNormalizedTreeRelativePath(right);
-    const leftDepth = leftRelativePath.split('/').filter(Boolean).length;
-    const rightDepth = rightRelativePath.split('/').filter(Boolean).length;
-
-    if (leftDepth !== rightDepth) {
-      return leftDepth - rightDepth;
-    }
-
-    return leftRelativePath.localeCompare(rightRelativePath);
-  });
-
-  for (const file of sortedFiles) {
-    const normalizedRelativePath = getNormalizedTreeRelativePath(file);
-    const pathSegments = normalizedRelativePath.split('/').filter(Boolean);
-    const folderSegments = pathSegments.slice(0, -1);
-    const fileName = pathSegments[pathSegments.length - 1] || file.name;
-
-    let parentNode = root;
-    let currentFolderPath = '';
-
-    for (const segment of folderSegments) {
-      currentFolderPath = currentFolderPath
-        ? `${currentFolderPath}/${segment}`
-        : segment;
-
-      let folderNode = folderMap.get(currentFolderPath);
-      if (!folderNode) {
-        folderNode = {
-          id: `folder:${currentFolderPath}`,
-          name: segment,
-          path: currentFolderPath,
-          isFolder: true,
-          children: [],
-          relativePath: currentFolderPath,
-        };
-        parentNode.children!.push(folderNode);
-        folderMap.set(currentFolderPath, folderNode);
-      }
-
-      parentNode = folderNode;
-    }
-
-    parentNode.children!.push({
-      id: `file:${normalizedRelativePath || file.path || file.name}`,
-      name: fileName || file.name,
-      path: file.path,
-      type: file.type,
-      isFolder: file.isFolder,
-      icon: file.icon,
-      children: file.isFolder ? [] : undefined,
-      isRemote: file.isRemote,
-      relativePath: file.relativePath,
-    });
+function getAncestorFolderPathsForFile(file?: FileInfo | null): string[] {
+  if (!file || file.isFolder) return [];
+  if (!file.relativePath && /^(https?:|file:|blob:|data:)/i.test(file.path)) {
+    return [];
   }
 
-  const sortTree = (node: FileTreeNode) => {
-    if (!node.children?.length) return;
-
-    node.children.sort((left, right) => {
-      if (!!left.isFolder !== !!right.isFolder) {
-        return left.isFolder ? -1 : 1;
-      }
-      return left.name.localeCompare(right.name);
-    });
+  const segments = getNormalizedTreeRelativePath(file)
+    .split('/')
+    .filter(Boolean);
+  if (segments.length <= 1) return [];
 
-    node.children.forEach(sortTree);
-  };
+  return segments
+    .slice(0, -1)
+    .map((_, index) => segments.slice(0, index + 1).join('/'));
+}
 
-  sortTree(root);
-  return root;
+/** Breadcrumb: project root label → parent folders (from `relativePath`) → file name. */
+function getFileBreadcrumbSegments(
+  file: FileInfo,
+  options: { projectRootLabel: string; remoteRootLabel: string }
+): string[] {
+  if (file.isRemote) {
+    return [options.remoteRootLabel, file.name];
+  }
+  const rel = (file.relativePath || '').replace(/\\/g, '/').trim();
+  const folders = rel ? rel.split('/').filter(Boolean) : [];
+  return [options.projectRootLabel, ...folders, file.name];
 }
 
 // FileTree component to render nested file structure
@@ -367,9 +462,12 @@ export const FileTree: React.FC<FileTreeProps> = ({
   if (!node.children || node.children.length === 0) return null;
 
   return (
-    <div className={level > 0 ? 'ml-4' : ''}>
+    <div className="min-w-0">
       {node.children.map((child) => {
-        const isExpanded = expandedFolders.has(child.id);
+        const isExpanded = expandedFolders.has(child.path);
+        const hasNested = Boolean(
+          child.isFolder && isExpanded && child.children?.length
+        );
         const fileInfo: FileInfo = {
           name: child.name,
           path: child.path,
@@ -380,65 +478,68 @@ export const FileTree: React.FC<FileTreeProps> = ({
           relativePath: child.relativePath,
         };
 
+        const isRowSelected = isSameFileIdentity(selectedFile, fileInfo);
+        const rowIconClass = `size-4 shrink-0 ${
+          isRowSelected
+            ? 'text-ds-icon-neutral-default-default'
+            : 'text-ds-icon-neutral-muted-default'
+        }`;
+
         return (
-          <div key={child.id}>
+          <div key={child.path} className="min-w-0">
             <button
+              type="button"
               onClick={() => {
                 if (child.isFolder) {
-                  onToggleFolder(child.id);
+                  onToggleFolder(child.path);
                 } else {
                   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 ${
-                isSameFileIdentity(selectedFile, fileInfo)
-                  ? 'bg-fill-fill-transparent-active'
-                  : ''
+              className={`mb-1 min-w-0 gap-2 rounded-lg px-2 py-1.5 hover:bg-ds-bg-neutral-subtle-hover flex w-full flex-row items-center justify-start text-left transition-colors ${
+                isRowSelected
+                  ? 'bg-ds-bg-neutral-default-default text-ds-text-neutral-default-default'
+                  : 'text-ds-text-neutral-muted-default bg-transparent'
               }`}
             >
               {child.isFolder ? (
-                <span className="flex h-4 w-4 flex-shrink-0 items-center justify-center">
+                <span className="w-4 inline-flex shrink-0 items-center justify-start">
                   {isExpanded ? (
-                    <ChevronDown className="h-4 w-4" />
+                    <ChevronDown className={rowIconClass} />
                   ) : (
-                    <ChevronRight className="h-4 w-4" />
+                    <ChevronRight className={rowIconClass} />
                   )}
                 </span>
               ) : (
-                <span
-                  className="flex h-4 w-4 flex-shrink-0 items-center justify-center"
-                  aria-hidden
-                />
-              )}
-
-              {child.isFolder ? (
-                <FolderIcon className="h-5 w-5 flex-shrink-0 text-yellow-600" />
-              ) : child.icon ? (
-                <child.icon className="h-5 w-5 flex-shrink-0" />
-              ) : (
-                <FileText className="h-5 w-5 flex-shrink-0" />
+                createElement(
+                  child.icon ??
+                    getLeafFileTreeIcon({
+                      name: child.name,
+                      path: child.path,
+                      type: child.type,
+                    }),
+                  { className: rowIconClass }
+                )
               )}
 
-              <span
-                className={`truncate text-[13px] leading-5 ${
-                  child.isFolder ? 'font-semibold' : 'font-medium'
-                }`}
-              >
+              <span className="min-w-0 text-body-sm font-medium leading-normal flex-1 truncate text-left">
                 {child.name}
               </span>
             </button>
 
-            {child.isFolder && isExpanded && child.children && (
-              <FileTree
-                node={child}
-                level={level + 1}
-                selectedFile={selectedFile}
-                expandedFolders={expandedFolders}
-                onToggleFolder={onToggleFolder}
-                onSelectFile={onSelectFile}
-                isShowSourceCode={isShowSourceCode}
-              />
-            )}
+            {hasNested ? (
+              <div className="ml-4 pl-1 border-ds-border-neutral-subtle-default border-y-0 border-r-0 border-l border-solid">
+                <FileTree
+                  node={child}
+                  level={level + 1}
+                  selectedFile={selectedFile}
+                  expandedFolders={expandedFolders}
+                  onToggleFolder={onToggleFolder}
+                  onSelectFile={onSelectFile}
+                  isShowSourceCode={isShowSourceCode}
+                />
+              </div>
+            ) : null}
           </div>
         );
       })}
@@ -446,39 +547,208 @@ export const FileTree: React.FC<FileTreeProps> = ({
   );
 };
 
-function downloadByBrowser(ipcRenderer: any, url: string) {
-  const ipc = ipcRenderer;
-  if (ipc?.invoke) {
-    ipc
-      .invoke('download-file', url)
-      .then((result: { success?: boolean; path?: string; error?: string }) => {
-        if (result?.success) {
-          console.log('download-file success:', result.path);
-        } else {
-          console.error('download-file error:', result?.error);
-        }
-      })
-      .catch((error: unknown) => {
-        console.error('download-file error:', error);
-      });
-  } else {
-    // Web mode: open in new tab for download
-    window.open(url, '_blank', 'noopener,noreferrer');
+function triggerBlobDownload(blob: Blob, filename: string): void {
+  const objectUrl = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = objectUrl;
+  anchor.download = filename;
+  anchor.rel = 'noopener';
+  anchor.style.display = 'none';
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  window.setTimeout(() => URL.revokeObjectURL(objectUrl), 0);
+}
+
+function parseFilenameFromContentDisposition(
+  header: string | null
+): string | undefined {
+  if (!header) return undefined;
+  const utf8 = /filename\*=UTF-8''([^;\s]+)/i.exec(header);
+  if (utf8?.[1]) {
+    try {
+      return decodeURIComponent(utf8[1]);
+    } catch {
+      return utf8[1];
+    }
   }
+  const quoted = /filename="([^"]+)"/i.exec(header);
+  if (quoted?.[1]) return quoted[1];
+  const plain = /filename=([^;\s]+)/i.exec(header);
+  if (plain?.[1]) return plain[1].replace(/^["']|["']$/g, '');
+  return undefined;
+}
+
+const TEXT_DOWNLOAD_TYPES = new Set([
+  'md',
+  'txt',
+  'json',
+  'xml',
+  'csv',
+  'html',
+  'css',
+  'js',
+  'ts',
+  'tsx',
+  'jsx',
+  'mjs',
+  'cjs',
+  'py',
+  'yml',
+  'yaml',
+  'sh',
+  'env',
+  'log',
+  'sql',
+  'graphql',
+  'rs',
+  'go',
+  'java',
+  'c',
+  'cpp',
+  'h',
+  'cs',
+  'rb',
+  'php',
+  'swift',
+  'kt',
+]);
+
+function mimeFromFileType(type: string): string {
+  const lower = type.toLowerCase();
+  const map: Record<string, string> = {
+    md: 'text/markdown',
+    txt: 'text/plain',
+    json: 'application/json',
+    html: 'text/html',
+    csv: 'text/csv',
+    css: 'text/css',
+    js: 'text/javascript',
+    ts: 'text/typescript',
+    tsx: 'text/typescript',
+    jsx: 'text/javascript',
+    xml: 'application/xml',
+    yml: 'text/yaml',
+    yaml: 'text/yaml',
+  };
+  return map[lower] ?? 'text/plain';
+}
+
+async function blobFromDataUrl(dataUrl: string): Promise<Blob> {
+  const res = await fetch(dataUrl);
+  return res.blob();
+}
+
+/** Web-only: fetch URL or path (same-origin relative) and save with the given name. */
+async function downloadFromUrl(
+  url: string | undefined,
+  suggestedFilename: string
+): Promise<void> {
+  const trimmed = url?.trim();
+  if (!trimmed) return;
+
+  const fallbackName =
+    suggestedFilename ||
+    (() => {
+      try {
+        return (
+          new URL(trimmed, window.location.href).pathname.split('/').pop() ||
+          'download'
+        );
+      } catch {
+        return 'download';
+      }
+    })();
+
+  const tryFetchAsBlob = async (): Promise<boolean> => {
+    try {
+      const response = await fetch(trimmed, { credentials: 'include' });
+      if (!response.ok) return false;
+      const blob = await response.blob();
+      const filename =
+        parseFilenameFromContentDisposition(
+          response.headers.get('Content-Disposition')
+        ) ?? fallbackName;
+      triggerBlobDownload(blob, filename);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  if (/^https?:\/\//i.test(trimmed)) {
+    if (await tryFetchAsBlob()) return;
+    window.open(trimmed, '_blank', 'noopener,noreferrer');
+    return;
+  }
+
+  if (
+    trimmed.startsWith('/') ||
+    trimmed.startsWith('./') ||
+    trimmed.startsWith('../')
+  ) {
+    await tryFetchAsBlob();
+    return;
+  }
+
+  console.warn(
+    'downloadFromUrl: path is not fetchable in the browser (use an http(s) or same-origin URL):',
+    trimmed
+  );
+}
+
+/** Web-first download for the file viewer: prefers in-memory content, then fetchable URL. */
+async function downloadOpenedFile(file: FileInfo): Promise<void> {
+  if (file.isFolder || (!file.path && file.content === undefined)) return;
+
+  const filename = file.name || 'download';
+  const content = file.content;
+
+  if (typeof content === 'string') {
+    if (content.startsWith('data:')) {
+      const blob = await blobFromDataUrl(content);
+      triggerBlobDownload(blob, filename);
+      return;
+    }
+    if (content.startsWith('blob:')) {
+      const anchor = document.createElement('a');
+      anchor.href = content;
+      anchor.download = filename;
+      anchor.rel = 'noopener';
+      anchor.style.display = 'none';
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+      return;
+    }
+    if (TEXT_DOWNLOAD_TYPES.has(file.type) && content.length > 0) {
+      triggerBlobDownload(
+        new Blob([content], { type: mimeFromFileType(file.type) }),
+        filename
+      );
+      return;
+    }
+  }
+
+  await downloadFromUrl(file.path, filename);
 }
 
 export default function Folder({ data: _data }: { data?: Agent }) {
   //Get Chatstore for the active project's task
-  const host = useHost();
   const { chatStore, projectStore } = useChatStoreAdapter();
   const authStore = useAuthStore();
+  const host = useHost();
+  const ipcRenderer = host?.ipcRenderer;
+  const electronAPI = host?.electronAPI;
   const { t } = useTranslation();
   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>({
-    id: 'root',
     name: 'root',
     path: '',
     children: [],
@@ -500,96 +770,153 @@ export default function Folder({ data: _data }: { data?: Agent }) {
   ]);
   const hasFetchedRemote = useRef(false);
   const lastFetchKey = useRef<string>('');
-  const electronAPI = host?.electronAPI;
-  const ipcRenderer = host?.ipcRenderer;
+  const priorFilePathsSnapshotRef = useRef<Set<string>>(new Set());
+  const [fileTreeScope, setFileTreeScope] = useState<'all' | 'new'>('all');
+  const [newFilePathsAccumulated, setNewFilePathsAccumulated] = useState<
+    Set<string>
+  >(() => new Set());
+  const [isFileSidebarOpen, setIsFileSidebarOpen] = useState(true);
+
+  const filteredFileTree = useMemo(
+    () => filterFileTree(fileTree, fileSearchQuery),
+    [fileTree, fileSearchQuery]
+  );
+
+  const sidebarFileTree = useMemo(() => {
+    if (fileTreeScope === 'all') return filteredFileTree;
+    if (newFilePathsAccumulated.size === 0) {
+      return {
+        name: 'root',
+        path: '',
+        children: [],
+        isFolder: true,
+      } satisfies FileTreeNode;
+    }
+    const filtered = filterTreeToAllowedLeafPaths(
+      filteredFileTree,
+      newFilePathsAccumulated
+    );
+    return (
+      filtered ?? {
+        name: 'root',
+        path: '',
+        children: [],
+        isFolder: true,
+      }
+    );
+  }, [filteredFileTree, fileTreeScope, newFilePathsAccumulated]);
 
   const selectedFileChange = (file: FileInfo, isShowSourceCode?: boolean) => {
-    const ipc = ipcRenderer;
-    const isWebMode = !ipc?.invoke;
+    const isWebMode = !ipcRenderer?.invoke;
 
     if (file.type === 'zip') {
+      // if file is remote, don't call reveal-in-folder
       if (file.isRemote) {
-        downloadByBrowser(ipcRenderer, file.path);
+        void downloadFromUrl(file.path, file.name);
         return;
       }
-      ipc?.invoke('reveal-in-folder', file.path);
+      ipcRenderer?.invoke('reveal-in-folder', file.path);
+      return;
+    }
+    // Don't open folders in preview - they are handled by expand/collapse
+    if (file.isFolder) {
       return;
     }
-    if (file.isFolder) return;
-
     setSelectedFile(file);
     setLoading(true);
+    console.log('file', JSON.parse(JSON.stringify(file)));
 
-    // Remote files (path is URL): use URL directly for display where possible
     if (file.isRemote && file.path?.startsWith('http')) {
-      // Images/audio/video: use path (URL) directly, loaders will use it
-      if (isImageFile(file) || isAudioFile(file) || isVideoFile(file)) {
+      if (isImageFile(file)) {
+        const loadRemoteImage = async () => {
+          try {
+            const content = await fetchRemoteFileAsDataUrl(file.path);
+            setSelectedFile({ ...file, content });
+            chatStore.setSelectedFile(chatStore.activeTaskId as string, file);
+          } catch (error) {
+            console.error('Failed to load remote image:', error);
+            setSelectedFile({ ...file });
+            chatStore.setSelectedFile(chatStore.activeTaskId as string, file);
+          } finally {
+            setLoading(false);
+          }
+        };
+        void loadRemoteImage();
+        return;
+      }
+
+      if (isAudioFile(file) || isVideoFile(file)) {
         setSelectedFile({ ...file });
         chatStore.setSelectedFile(chatStore.activeTaskId as string, file);
         setLoading(false);
         return;
       }
-      // Other types (text, PDF, etc.): Electron uses IPC; Web fetches
-      if (!isWebMode) {
-        ipc
-          ?.invoke('open-file', file.type, file.path, isShowSourceCode)
-          ?.then((res: string) => {
+
+      if (!isWebMode && ipcRenderer) {
+        ipcRenderer
+          .invoke('open-file', file.type, file.path, isShowSourceCode)
+          .then((res: string) => {
             setSelectedFile({ ...file, content: res });
             chatStore.setSelectedFile(chatStore.activeTaskId as string, file);
             setLoading(false);
           })
-          ?.catch((error: unknown) => {
+          .catch((error: unknown) => {
             console.error('open-file error:', error);
             setLoading(false);
           });
         return;
       }
+
       const loadRemoteContent = async () => {
         try {
-          const resp = await fetch(file.path!);
+          const resp = await fetch(file.path);
           if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
           const contentType = resp.headers.get('content-type') || '';
           let content: string;
           if (file.type === 'pdf' || contentType.includes('application/pdf')) {
             const blob = await resp.blob();
             content = await new Promise<string>((resolve, reject) => {
-              const r = new FileReader();
-              r.onload = () => resolve(r.result as string);
-              r.onerror = reject;
-              r.readAsDataURL(blob);
+              const reader = new FileReader();
+              reader.onload = () => resolve(reader.result as string);
+              reader.onerror = reject;
+              reader.readAsDataURL(blob);
             });
           } else {
             content = await resp.text();
           }
           setSelectedFile({ ...file, content });
           chatStore.setSelectedFile(chatStore.activeTaskId as string, file);
-        } catch (e) {
-          console.error('Failed to load remote file:', e);
+        } catch (error) {
+          console.error('Failed to load remote file:', error);
         } finally {
           setLoading(false);
         }
       };
-      loadRemoteContent();
+      void loadRemoteContent();
       return;
     }
 
-    // Electron: PDF and images (open-file reads binary as utf-8 and corrupts)
-    if (file.type === 'pdf' || isImageFile(file)) {
-      ipc
-        ?.invoke('read-file-dataurl', file.path)
-        ?.then((dataUrl: string) => {
-          setSelectedFile({ ...file, content: dataUrl });
-          chatStore.setSelectedFile(chatStore.activeTaskId as string, file);
-          setLoading(false);
-        })
-        ?.catch((error: unknown) => {
-          console.error('read-file-dataurl error:', error);
-          setLoading(false);
-        });
+    // For PDF files, use data URL instead of custom protocol
+    if (file.type === 'pdf') {
+      if (ipcRenderer) {
+        ipcRenderer
+          .invoke('read-file-dataurl', file.path)
+          .then((dataUrl: string) => {
+            setSelectedFile({ ...file, content: dataUrl });
+            chatStore.setSelectedFile(chatStore.activeTaskId as string, file);
+            setLoading(false);
+          })
+          .catch((error: unknown) => {
+            console.error('read-file-dataurl error:', error);
+            setLoading(false);
+          });
+      } else {
+        setLoading(false);
+      }
       return;
     }
 
-    // Audio/video: loaders use path or content
+    // For audio/video files, skip open-file — loaders handle reading themselves
     if (isAudioFile(file) || isVideoFile(file)) {
       setSelectedFile({ ...file });
       chatStore.setSelectedFile(chatStore.activeTaskId as string, file);
@@ -597,18 +924,22 @@ export default function Folder({ data: _data }: { data?: Agent }) {
       return;
     }
 
-    // Electron: open-file
-    ipc
-      ?.invoke('open-file', file.type, file.path, isShowSourceCode)
-      ?.then((res: string) => {
-        setSelectedFile({ ...file, content: res });
-        chatStore.setSelectedFile(chatStore.activeTaskId as string, file);
-        setLoading(false);
-      })
-      ?.catch((error: unknown) => {
-        console.error('open-file error:', error);
-        setLoading(false);
-      });
+    // all other files call open-file interface, the backend handles download and parsing
+    if (ipcRenderer) {
+      ipcRenderer
+        .invoke('open-file', file.type, file.path, isShowSourceCode)
+        .then((res: string) => {
+          setSelectedFile({ ...file, content: res });
+          chatStore.setSelectedFile(chatStore.activeTaskId as string, file);
+          setLoading(false);
+        })
+        .catch((error: unknown) => {
+          console.error('open-file error:', error);
+          setLoading(false);
+        });
+    } else {
+      setLoading(false);
+    }
   };
 
   const isShowSourceCodeChange = () => {
@@ -617,6 +948,89 @@ export default function Folder({ data: _data }: { data?: Agent }) {
     setIsShowSourceCode(!isShowSourceCode);
   };
 
+  const buildFileTree = (files: FileInfo[]): FileTreeNode => {
+    const root: FileTreeNode = {
+      name: 'root',
+      path: '',
+      children: [],
+      isFolder: true,
+    };
+
+    const folderMap = new Map<string, FileTreeNode>();
+    folderMap.set('', root);
+
+    const sortedFiles = [...files].sort((left, right) => {
+      const leftRelativePath = getNormalizedTreeRelativePath(left);
+      const rightRelativePath = getNormalizedTreeRelativePath(right);
+      const leftDepth = leftRelativePath.split('/').filter(Boolean).length;
+      const rightDepth = rightRelativePath.split('/').filter(Boolean).length;
+
+      if (leftDepth !== rightDepth) {
+        return leftDepth - rightDepth;
+      }
+
+      return leftRelativePath.localeCompare(rightRelativePath);
+    });
+
+    for (const file of sortedFiles) {
+      const normalizedRelativePath = getNormalizedTreeRelativePath(file);
+      const pathSegments = normalizedRelativePath.split('/').filter(Boolean);
+      const folderSegments = pathSegments.slice(0, -1);
+      const fileName = pathSegments[pathSegments.length - 1] || file.name;
+
+      let parentNode = root;
+      let currentFolderPath = '';
+
+      for (const segment of folderSegments) {
+        currentFolderPath = currentFolderPath
+          ? `${currentFolderPath}/${segment}`
+          : segment;
+
+        let folderNode = folderMap.get(currentFolderPath);
+        if (!folderNode) {
+          folderNode = {
+            name: segment,
+            path: currentFolderPath,
+            isFolder: true,
+            children: [],
+            relativePath: currentFolderPath,
+          };
+          parentNode.children!.push(folderNode);
+          folderMap.set(currentFolderPath, folderNode);
+        }
+
+        parentNode = folderNode;
+      }
+
+      parentNode.children!.push({
+        name: fileName || file.name,
+        path: file.path,
+        type: file.type,
+        isFolder: file.isFolder,
+        icon: file.icon,
+        children: file.isFolder ? [] : undefined,
+        isRemote: file.isRemote,
+        relativePath: file.relativePath,
+      });
+    }
+
+    const sortTree = (node: FileTreeNode) => {
+      if (!node.children?.length) return;
+
+      node.children.sort((left, right) => {
+        if (!!left.isFolder !== !!right.isFolder) {
+          return left.isFolder ? -1 : 1;
+        }
+        return left.name.localeCompare(right.name);
+      });
+
+      node.children.forEach(sortTree);
+    };
+
+    sortTree(root);
+    return root;
+  };
+
   const toggleFolder = (folderPath: string) => {
     setExpandedFolders((prev) => {
       const newSet = new Set(prev);
@@ -629,87 +1043,174 @@ export default function Folder({ data: _data }: { data?: Agent }) {
     });
   };
 
-  const activeTaskId = chatStore?.activeTaskId as string;
-  const activeWorkspace = chatStore?.tasks[activeTaskId]?.activeWorkspace;
-  const taskAssigning = chatStore?.tasks[activeTaskId]?.taskAssigning;
   // Reset state when activeTaskId changes (e.g., new project created)
   useEffect(() => {
     hasFetchedRemote.current = false;
     setSelectedFile(null);
-    setFileTree({
-      id: 'root',
-      name: 'root',
-      path: '',
-      children: [],
-      isFolder: true,
-    });
+    setFileTree({ name: 'root', path: '', children: [], isFolder: true });
     setFileGroups([{ folder: 'Reports', files: [] }]);
     setExpandedFolders(new Set());
-  }, [activeTaskId]);
+    priorFilePathsSnapshotRef.current = new Set();
+    setNewFilePathsAccumulated(new Set());
+    setFileTreeScope('all');
+  }, [chatStore?.activeTaskId]);
 
-  // project_id: must match Brain path ~/eigent/{email}/project_{project_id}/task_{task_id}/
-  const projectId = (projectStore.activeProjectId as string) || activeTaskId;
+  useEffect(() => {
+    let cancelled = false;
+    const loadPath = async () => {
+      if (!authStore.email || !projectStore.activeProjectId) {
+        setWorkingFolderPath(null);
+        return;
+      }
+      if (typeof electronAPI?.getProjectFolderPath !== 'function') {
+        setWorkingFolderPath(null);
+        return;
+      }
+      try {
+        const folderPath = await 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, electronAPI]);
 
-  const fetchKey = `${projectId}|${activeTaskId || ''}`;
-  // Poll when task has agents that are running/pending (files may be generated)
+  const activeTaskId = chatStore?.activeTaskId as string;
+  const activeWorkspace = chatStore?.tasks[activeTaskId]?.activeWorkspace;
+  const taskAssigning = chatStore?.tasks[activeTaskId]?.taskAssigning;
+  const projectId = (projectStore.activeProjectId as string) || activeTaskId;
+  const fetchKey = `${projectId || ''}|${activeTaskId || ''}`;
   const taskRunning =
     !!taskAssigning?.length &&
-    taskAssigning.some((a) => a.status === 'running' || a.status === 'pending');
+    taskAssigning.some(
+      (agent) => agent.status === 'running' || agent.status === 'pending'
+    );
+
+  const expandFoldersForFile = (file?: FileInfo | null) => {
+    const folderPaths = getAncestorFolderPathsForFile(file);
+    if (folderPaths.length === 0) return;
+
+    setExpandedFolders((prev) => {
+      let changed = false;
+      const next = new Set(prev);
+      folderPaths.forEach((folderPath) => {
+        if (!next.has(folderPath)) {
+          next.add(folderPath);
+          changed = true;
+        }
+      });
+      return changed ? next : prev;
+    });
+  };
 
-  /**
-   * Folder design: Frontend always fetches file list from Brain API.
-   * - GET /files?project_id=&email=&task_id= → returns [{filename, url, relativePath}]
-   * - Re-fetch when project/task changes (switch project) or periodically when task is running
-   */
   useEffect(() => {
     if (!chatStore || !projectId || !authStore.email) return;
 
-    const fetchFileList = async () => {
-      let res: any[] = [];
-      try {
-        const baseURL = await getBaseURL();
-        if (!baseURL) {
-          console.warn('[Folder] Brain not connected, cannot fetch files');
-          return;
+    const setFileList = async () => {
+      let res: FileInfo[] = [];
+
+      if (ipcRenderer) {
+        try {
+          const localFiles = await ipcRenderer.invoke(
+            'get-project-file-list',
+            authStore.email,
+            projectId
+          );
+          if (Array.isArray(localFiles)) {
+            res = localFiles;
+          }
+        } catch (error) {
+          console.warn('[Folder] Failed to fetch local project files:', error);
         }
-        // Omit task_id to list all files in project (all tasks); backend uses os.walk recursively
-        const listRes = await fetchGet('/files', {
-          project_id: projectId,
-          email: authStore.email,
-        });
-        if (Array.isArray(listRes)) {
-          res = listRes.map((item: any) => {
-            const url = item.url?.startsWith('http')
-              ? item.url
-              : `${baseURL}${item.url || ''}`;
-            return {
-              name: item.filename,
-              type: (item.filename || '').split('.').pop() || '',
-              path: url,
-              relativePath: item.relativePath || '',
-              isRemote: true,
-            };
-          });
+      }
+
+      if (
+        !res.length ||
+        !ipcRenderer ||
+        import.meta.env.VITE_USE_LOCAL_PROXY === 'true'
+      ) {
+        try {
+          const baseURL = await getBaseURL();
+          if (!baseURL) {
+            console.warn('[Folder] Brain not connected, cannot fetch files');
+          } else {
+            const listRes = await fetchGet('/files', {
+              project_id: projectId,
+              email: authStore.email,
+            });
+
+            if (Array.isArray(listRes)) {
+              res = listRes.map((item: any) => {
+                const filename = item.filename || '';
+                const url = item.url?.startsWith('http')
+                  ? item.url
+                  : `${baseURL}${item.url || ''}`;
+                return {
+                  name: filename,
+                  type: filename.split('.').pop() || '',
+                  path: url,
+                  relativePath: item.relativePath || filename,
+                  isRemote: true,
+                };
+              });
+            }
+          }
+        } catch (error) {
+          console.warn('[Folder] Failed to fetch files from Brain:', error);
         }
-      } catch (e) {
-        console.warn('[Folder] Failed to fetch files from Brain:', e);
       }
 
       const tree = buildFileTree(res);
+      if (res && Array.isArray(res)) {
+        const currentPaths = pathsFromFileList(res);
+        const prior = priorFilePathsSnapshotRef.current;
+        const isFirstPopulate = prior.size === 0 && currentPaths.size > 0;
+        if (isFirstPopulate) {
+          priorFilePathsSnapshotRef.current = new Set(currentPaths);
+        } else {
+          const added = new Set<string>();
+          for (const p of currentPaths) {
+            if (!prior.has(p)) added.add(p);
+          }
+          priorFilePathsSnapshotRef.current = new Set(currentPaths);
+          if (added.size > 0) {
+            setNewFilePathsAccumulated((prev) => {
+              const next = new Set(prev);
+              for (const p of added) next.add(p);
+              return next;
+            });
+          }
+        }
+      }
       setFileTree(tree);
+      // Keep the old structure for compatibility
       setFileGroups((prev) => {
         const chatStoreSelectedFile =
           chatStore.tasks[activeTaskId]?.selectedFile;
         if (chatStoreSelectedFile) {
-          const file = findMatchingFile(
-            res as FileInfo[],
-            chatStoreSelectedFile
-          );
-          if (file && !isSameFileIdentity(selectedFile, file)) {
-            selectedFileChange(file, isShowSourceCode);
+          const file = findMatchingFile(res, chatStoreSelectedFile);
+          if (file) {
+            setFileTreeScope('all');
+            setIsFileSidebarOpen(true);
+            expandFoldersForFile(file as FileInfo);
+            if (!isSameFileIdentity(selectedFile, file)) {
+              selectedFileChange(file as FileInfo, isShowSourceCode);
+            }
           }
         }
-        return [{ ...prev[0], files: res }];
+        return [
+          {
+            ...prev[0],
+            files: res || [],
+          },
+        ];
       });
     };
 
@@ -719,15 +1220,16 @@ export default function Folder({ data: _data }: { data?: Agent }) {
     if (shouldFetch) {
       lastFetchKey.current = fetchKey;
       hasFetchedRemote.current = true;
-      fetchFileList();
+      void setFileList();
     }
 
-    let pollTimer: ReturnType<typeof setTimeout> | null = null;
+    let pollTimer: ReturnType<typeof setInterval> | null = null;
     if (taskRunning) {
       pollTimer = setInterval(() => {
-        fetchFileList();
+        void setFileList();
       }, 5000);
     }
+
     return () => {
       if (pollTimer) clearInterval(pollTimer);
     };
@@ -742,7 +1244,6 @@ export default function Folder({ data: _data }: { data?: Agent }) {
     authStore.email,
   ]);
 
-  // Reset hasFetchedRemote when project/task changes so next effect run will fetch
   useEffect(() => {
     hasFetchedRemote.current = false;
   }, [projectId, activeTaskId]);
@@ -756,8 +1257,13 @@ export default function Folder({ data: _data }: { data?: Agent }) {
       chatStore.tasks[chatStore.activeTaskId as string]?.selectedFile;
     if (chatStoreSelectedFile && fileGroups[0]?.files) {
       const file = findMatchingFile(fileGroups[0].files, chatStoreSelectedFile);
-      if (file && !isSameFileIdentity(selectedFile, file)) {
-        selectedFileChange(file, isShowSourceCode);
+      if (file) {
+        setFileTreeScope('all');
+        setIsFileSidebarOpen(true);
+        expandFoldersForFile(file as FileInfo);
+        if (!isSameFileIdentity(selectedFile, file)) {
+          selectedFileChange(file as FileInfo, isShowSourceCode);
+        }
       }
     } else if (!chatStoreSelectedFile && selectedFile) {
       setSelectedFile(null);
@@ -765,30 +1271,48 @@ export default function Folder({ data: _data }: { data?: Agent }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFilePath, fileGroups, isShowSourceCode, chatStore?.activeTaskId]);
 
+  const fileBreadcrumbSegments = useMemo(() => {
+    if (!selectedFile) return [];
+    const projectRootLabel = workingFolderPath
+      ? workingFolderBasename(workingFolderPath)
+      : t('chat.agent-folder');
+    return getFileBreadcrumbSegments(selectedFile, {
+      projectRootLabel,
+      remoteRootLabel: t('folder.file-path-remote-root', {
+        defaultValue: 'Remote',
+      }),
+    });
+  }, [selectedFile, workingFolderPath, t]);
+
   if (!chatStore) {
     return <div>Loading...</div>;
   }
 
-  const handleBack = () => {
+  const _handleBack = () => {
     chatStore.setActiveWorkspace(chatStore.activeTaskId as string, 'workflow');
   };
 
   const handleOpenInIDE = async (ide: 'vscode' | 'cursor' | 'system') => {
     try {
       if (!authStore.email || !projectStore.activeProjectId) return;
-      const folderPath = await electronAPI?.getProjectFolderPath(
+      if (!electronAPI) return;
+      const folderPath = await electronAPI.getProjectFolderPath(
         authStore.email,
         projectStore.activeProjectId
       );
-      if (!folderPath) {
-        toast.error(t('chat.failed-to-open-folder'));
-        return;
-      }
-      const result = await electronAPI?.openInIDE(folderPath, ide);
-      if (!result) {
-        toast.error(t('chat.failed-to-open-folder'));
-        return;
+
+      if (ide === 'system' && selectedFile && !selectedFile.isFolder) {
+        const p = selectedFile.path?.trim() ?? '';
+        const isLocalFsPath =
+          p.length > 0 && !selectedFile.isRemote && !/^https?:\/\//i.test(p);
+        if (isLocalFsPath && ipcRenderer?.invoke) {
+          await ipcRenderer.invoke('reveal-in-folder', p);
+          authStore.setPreferredIDE(ide);
+          return;
+        }
       }
+
+      const result = await electronAPI.openInIDE(folderPath, ide);
       if (!result.success) {
         toast.error(result.error || t('chat.failed-to-open-folder'));
       } else {
@@ -800,110 +1324,179 @@ export default function Folder({ data: _data }: { data?: Agent }) {
     }
   };
 
+  const folderHeaderTitle = workingFolderPath
+    ? workingFolderBasename(workingFolderPath)
+    : t('chat.agent-folder');
+  const canOpenInExternalEditor =
+    electronAPI?.getProjectFolderPath && 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 h-full w-full flex-col overflow-hidden">
+      {/* header */}
+      <div className="gap-2 border-ds-border-neutral-subtle-default p-2 flex w-full shrink-0 items-center border-x-0 border-t-0 border-b-1 border-solid">
+        <div className="min-w-0 flex max-w-[min(20rem,45%)] items-center">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            buttonContent="icon-only"
+            aria-pressed={isFileSidebarOpen}
+            className="text-ds-icon-neutral-default-default shrink-0"
+            aria-label={
+              isFileSidebarOpen
+                ? t('chat.hide-file-sidebar', {
+                    defaultValue: 'Hide file sidebar',
+                  })
+                : t('chat.show-file-sidebar', {
+                    defaultValue: 'Show file sidebar',
+                  })
+            }
+            title={
+              isFileSidebarOpen
+                ? t('chat.hide-file-sidebar', {
+                    defaultValue: 'Hide file sidebar',
+                  })
+                : t('chat.show-file-sidebar', {
+                    defaultValue: 'Show file sidebar',
+                  })
+            }
+            onClick={() => setIsFileSidebarOpen((open) => !open)}
+          >
+            {isFileSidebarOpen ? (
+              <FolderOpen className="h-3.5 w-3.5 shrink-0" aria-hidden />
+            ) : (
+              <FolderIcon className="h-3.5 w-3.5 shrink-0" aria-hidden />
             )}
-            <div className="flex items-center">
-              {!isCollapsed &&
-                electronAPI?.getProjectFolderPath &&
-                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>
+          </Button>
+          <span
+            className="min-w-0 text-body-sm font-semibold text-ds-text-neutral-default-default 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="left-2 h-3.5 w-3.5 text-ds-text-brand-default-default 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="h-7 rounded-lg border-ds-border-neutral-subtle-default py-0 pl-7 pr-2 text-sm focus:ring-ds-ring-brand-default-focus 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"
+                  buttonContent="text"
+                  textWeight="semibold"
+                  tone="neutral"
+                >
+                  <SquareTerminal className="shrink-0" />
+                  {t('chat.open-in-ide')}
+                  <ChevronDown className="shrink-0 opacity-80" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                className="border-ds-border-neutral-default-default bg-ds-bg-neutral-strong-default 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 */}
+        {isFileSidebarOpen ? (
+          <div className="w-64 border-ds-border-neutral-subtle-default flex h-full flex-shrink-0 flex-col border-y-0 border-r border-l-0 border-solid">
+            <div className="h-8 px-1 flex items-center">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    buttonContent="text"
+                  >
+                    <span className="min-w-0 font-bold truncate text-left">
+                      {t('chat.files')}
+                    </span>
+                    <ChevronDown className="size-3.5 shrink-0 opacity-70" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  side="bottom"
+                  align="start"
+                  className="border-ds-border-neutral-default-default bg-ds-bg-neutral-strong-default z-50 min-w-[10rem]"
+                >
+                  <DropdownMenuRadioGroup
+                    value={fileTreeScope}
+                    onValueChange={(v) =>
+                      setFileTreeScope(v === 'new' ? 'new' : 'all')
+                    }
+                  >
+                    <DropdownMenuRadioItem
+                      value="all"
+                      className="bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover cursor-pointer"
+                    >
+                      {t('folder.files-scope-all', {
+                        defaultValue: 'All files',
+                      })}
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem
+                      value="new"
+                      className="bg-dropdown-item-bg-default hover:bg-dropdown-item-bg-hover cursor-pointer"
+                    >
+                      {t('folder.files-scope-new', {
+                        defaultValue: 'New files',
+                      })}
+                    </DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </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>
+            <div className="scrollbar-always-visible min-h-0 flex-1 overflow-y-auto">
+              <div className="pl-1.5 h-full">
                 <FileTree
-                  node={fileTree}
+                  node={sidebarFileTree}
                   selectedFile={selectedFile}
                   expandedFolders={expandedFolders}
                   onToggleFolder={toggleFolder}
@@ -914,152 +1507,177 @@ export default function Folder({ data: _data }: { data?: Agent }) {
                 />
               </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 ${
-                      isSameFileIdentity(selectedFile, file)
-                        ? '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>
-                ))
-              )}
-            </div>
-          )}
-        </div>
-      </div>
+          </div>
+        ) : null}
 
-      {/* 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">
+        {/* content */}
+        <div className="min-w-0 bg-ds-bg-neutral-subtle-default flex flex-1 flex-col overflow-hidden">
+          {/* head */}
+          {selectedFile && (
+            <div className="h-8 gap-2 pl-3 pr-2 flex flex-shrink-0 items-center justify-between">
               <div
                 onClick={() => {
                   // if file is remote, don't call reveal-in-folder
                   if (selectedFile.isRemote) {
-                    downloadByBrowser(ipcRenderer, selectedFile.path);
+                    void downloadFromUrl(selectedFile.path, selectedFile.name);
                     return;
                   }
                   ipcRenderer?.invoke('reveal-in-folder', selectedFile.path);
                 }}
-                className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 overflow-hidden"
+                className="min-w-0 flex flex-1 cursor-pointer items-center 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" />
+                <nav
+                  className="scrollbar-always-visible min-w-0 gap-1 text-body-sm text-ds-text-neutral-muted-default flex max-w-full items-center overflow-x-auto"
+                  aria-label={t('folder.file-path-breadcrumb', {
+                    defaultValue: 'File path',
+                  })}
+                >
+                  {fileBreadcrumbSegments.map((segment, index) => {
+                    const isLast = index === fileBreadcrumbSegments.length - 1;
+                    return (
+                      <Fragment key={`${index}-${segment}`}>
+                        {index > 0 ? (
+                          <ChevronRight
+                            className="h-3.5 w-3.5 text-ds-icon-neutral-muted-default shrink-0"
+                            aria-hidden
+                          />
+                        ) : null}
+                        <span
+                          className={
+                            isLast
+                              ? 'font-bold text-ds-text-neutral-default-default shrink-0'
+                              : 'font-normal shrink-0'
+                          }
+                        >
+                          {segment}
+                        </span>
+                      </Fragment>
+                    );
+                  })}
+                </nav>
+              </div>
+              <div className="gap-0.5 flex flex-shrink-0 items-center">
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  type="button"
+                  aria-label={t('folder.download-file', {
+                    defaultValue: 'Download file',
+                  })}
+                  onClick={() => {
+                    if (!selectedFile || selectedFile.isFolder) return;
+                    void downloadOpenedFile(selectedFile);
+                  }}
+                >
+                  <Download className="h-4 w-4 text-ds-icon-neutral-muted-default" />
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => isShowSourceCodeChange()}
+                >
+                  <CodeXml className="h-4 w-4 text-ds-icon-neutral-muted-default" />
                 </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 flex-col ${
+                selectedFile?.type === 'html' && !isShowSourceCode
+                  ? 'min-h-0 h-full'
+                  : 'py-2 pl-4 pr-2 min-h-full'
+              } 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-ds-text-neutral-muted-default flex h-full w-full items-center justify-center">
+                      <div className="text-center">
+                        <FileText className="mb-4 h-12 w-12 text-ds-text-neutral-muted-default mx-auto" />
+                        <p className="text-sm">
+                          {t('folder.zip-file-is-not-supported-yet')}
+                        </p>
+                      </div>
+                    </div>
+                  ) : isAudioFile(selectedFile) ? (
+                    <div className="flex h-full w-full items-center justify-center">
+                      <AudioLoader selectedFile={selectedFile} />
+                    </div>
+                  ) : isVideoFile(selectedFile) ? (
+                    <div className="flex h-full w-full items-center justify-center">
+                      <VideoLoader selectedFile={selectedFile} />
+                    </div>
+                  ) : isImageFile(selectedFile) ? (
+                    <div className="flex h-full w-full items-center justify-center">
+                      <ImageLoader selectedFile={selectedFile} />
+                    </div>
                   ) : (
-                    <HtmlRenderer
-                      selectedFile={selectedFile}
-                      projectFiles={fileGroups[0]?.files || []}
-                    />
+                    <pre className="font-mono text-sm text-ds-text-neutral-default-default 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 w-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 mx-auto rounded-full"></div>
+                      <p className="text-body-sm text-ds-text-neutral-muted-default">
+                        {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
-                      key={selectedFile.path ?? selectedFile.name}
-                      selectedFile={selectedFile}
-                    />
-                  </div>
-                ) : (
-                  <pre className="overflow-auto whitespace-pre-wrap break-words font-mono text-sm text-text-primary">
-                    {selectedFile.content}
-                  </pre>
                 )
               ) : (
-                <FileLoadingSpinner fileName={selectedFile?.name} />
-              )
-            ) : (
-              <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 className="text-ds-text-neutral-muted-default flex h-full w-full flex-1 items-center justify-center">
+                  <div className="text-center">
+                    <FileText className="mb-4 h-12 w-12 text-ds-text-neutral-muted-default mx-auto" />
+                    <p className="text-sm">
+                      {t('chat.select-a-file-to-view-its-contents')}
+                    </p>
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -1109,40 +1727,23 @@ function toFileUrl(filePath: string): string {
 
 function ImageLoader({ selectedFile }: { selectedFile: FileInfo }) {
   const [src, setSrc] = useState('');
-  const [loadError, setLoadError] = useState(false);
 
   useEffect(() => {
     setSrc('');
-    setLoadError(false);
-
     if (selectedFile.isRemote) {
       setSrc((selectedFile.content as string) || selectedFile.path);
       return;
     }
+    // Use file:// source so Chromium can stream/seek large media files.
     setSrc(toFileUrl(selectedFile.path));
   }, [selectedFile]);
 
-  if (loadError) {
-    return (
-      <div className="flex flex-col items-center gap-2 text-text-secondary">
-        <p className="text-sm">{selectedFile.name}</p>
-        <p className="text-xs text-text-tertiary">
-          Failed to load image. Try selecting again.
-        </p>
-      </div>
-    );
-  }
-
-  if (!src) {
-    return <FileLoadingSpinner fileName={selectedFile.name} />;
-  }
-
   return (
     <img
       src={src}
       alt={selectedFile.name}
       className="max-h-full max-w-full object-contain"
-      onError={() => setLoadError(true)}
+      onError={(err) => console.error('Image load error:', err)}
     />
   );
 }
@@ -1153,20 +1754,16 @@ function AudioLoader({ selectedFile }: { selectedFile: FileInfo }) {
   useEffect(() => {
     setSrc('');
     if (selectedFile.isRemote) {
-      setSrc(selectedFile.content || selectedFile.path || '');
+      setSrc(selectedFile.content || selectedFile.path);
       return;
     }
     // Use file:// source so Chromium can stream/seek large media files.
     setSrc(toFileUrl(selectedFile.path));
   }, [selectedFile]);
 
-  if (!src) {
-    return <FileLoadingSpinner fileName={selectedFile.name} />;
-  }
-
   return (
-    <div className="flex w-full flex-col items-center gap-4 px-8">
-      <p className="text-sm font-medium text-text-primary">
+    <div className="gap-4 px-8 flex w-full flex-col items-center">
+      <p className="text-sm font-medium text-ds-text-neutral-default-default">
         {selectedFile.name}
       </p>
       <audio
@@ -1187,17 +1784,13 @@ function VideoLoader({ selectedFile }: { selectedFile: FileInfo }) {
   useEffect(() => {
     setSrc('');
     if (selectedFile.isRemote) {
-      setSrc(selectedFile.content || selectedFile.path || '');
+      setSrc(selectedFile.content || selectedFile.path);
       return;
     }
     // Use file:// source so Chromium can stream/seek large media files.
     setSrc(toFileUrl(selectedFile.path));
   }, [selectedFile]);
 
-  if (!src) {
-    return <FileLoadingSpinner fileName={selectedFile.name} />;
-  }
-
   return (
     <video
       controls
@@ -1260,6 +1853,89 @@ function resolveRelativePath(basePath: string, relativePath: string): string {
   return baseParts.join('/');
 }
 
+function hasScriptSrcAttribute(attrs: string): boolean {
+  return /(?:^|\s)src\s*=/.test(attrs.toLowerCase());
+}
+
+function isClassicScriptAttribute(attrs: string): boolean {
+  const typeMatch = attrs.match(
+    /(?:^|\s)type\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i
+  );
+  if (!typeMatch) return true;
+
+  const rawType = (typeMatch[1] ?? typeMatch[2] ?? typeMatch[3] ?? '').trim();
+  const normalizedType = rawType.split(';', 1)[0].trim().toLowerCase();
+  if (!normalizedType) return true;
+
+  if (normalizedType === 'module' || normalizedType === 'application/ld+json') {
+    return false;
+  }
+
+  return new Set([
+    'text/javascript',
+    'application/javascript',
+    'text/ecmascript',
+    'application/ecmascript',
+    'application/x-javascript',
+    'text/x-javascript',
+    'application/x-ecmascript',
+    'text/x-ecmascript',
+    'text/jscript',
+    'text/livescript',
+  ]).has(normalizedType);
+}
+
+function canParseClassicScript(script: string): boolean {
+  try {
+    // Parse only. The generated function is never executed.
+    new Function(script);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function normalizeGeneratedDoubleBraces(source: string): string {
+  return source.replace(/\{\{/g, '{').replace(/\}\}/g, '}');
+}
+
+function repairGeneratedReportBraces(html: string): string {
+  let repairedHtml = html.replace(
+    /<style\b([^>]*)>([\s\S]*?)<\/style>/gi,
+    (fullTag, attrs: string, content: string) => {
+      if (!content.includes('{{') && !content.includes('}}')) {
+        return fullTag;
+      }
+      return `<style${attrs}>${normalizeGeneratedDoubleBraces(content)}</style>`;
+    }
+  );
+
+  repairedHtml = repairedHtml.replace(
+    /<script\b([^>]*)>([\s\S]*?)<\/script>/gi,
+    (fullTag, attrs: string, content: string) => {
+      if (
+        hasScriptSrcAttribute(attrs) ||
+        !isClassicScriptAttribute(attrs) ||
+        (!content.includes('{{') && !content.includes('}}'))
+      ) {
+        return fullTag;
+      }
+
+      const normalizedContent = normalizeGeneratedDoubleBraces(content);
+      if (
+        !canParseClassicScript(content) &&
+        canParseClassicScript(normalizedContent)
+      ) {
+        return `<script${attrs}>${normalizedContent}</script>`;
+      }
+
+      return fullTag;
+    }
+  );
+
+  return repairedHtml;
+}
+
 function normalizeLookupPath(path: string): string {
   return path
     .replace(/\\/g, '/')
@@ -1295,6 +1971,212 @@ function isSpecialBrowserUrl(url: string): boolean {
   );
 }
 
+function isInlineImageUrl(url: string): boolean {
+  const normalizedUrl = url.trim().toLowerCase();
+  return normalizedUrl.startsWith('data:') || normalizedUrl.startsWith('blob:');
+}
+
+function getPathWithoutSearchOrHash(pathOrUrl: string): string {
+  return pathOrUrl.split(/[?#]/)[0].toLowerCase();
+}
+
+function isImagePathLike(pathOrUrl: string): boolean {
+  const path = getPathWithoutSearchOrHash(pathOrUrl);
+  return IMAGE_EXTENSIONS.some((ext) => path.endsWith(`.${ext}`));
+}
+
+function isRemoteProjectFileUrl(url: string, baseHref?: string): boolean {
+  try {
+    const parsedUrl = new URL(url, baseHref || window.location.href);
+    return (
+      parsedUrl.pathname.includes('/files/stream') ||
+      parsedUrl.pathname.includes('/files/preview/')
+    );
+  } catch {
+    return false;
+  }
+}
+
+function toAbsoluteResourceUrl(url: string, baseHref?: string): string | null {
+  try {
+    return new URL(url, baseHref || window.location.href).toString();
+  } catch {
+    return null;
+  }
+}
+
+function readBlobAsDataUrl(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function fetchRemoteFileAsDataUrl(url: string): Promise<string> {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}`);
+  }
+  return readBlobAsDataUrl(await response.blob());
+}
+
+function shouldInlineHtmlImageUrl(url: string, baseHref?: string): boolean {
+  if (!url || isInlineImageUrl(url)) {
+    return false;
+  }
+
+  const absoluteUrl = toAbsoluteResourceUrl(url, baseHref);
+  if (!absoluteUrl) {
+    return false;
+  }
+
+  return isRemoteProjectFileUrl(absoluteUrl) || isImagePathLike(url);
+}
+
+async function inlineImageUrl(
+  url: string,
+  baseHref?: string
+): Promise<string | null> {
+  if (!shouldInlineHtmlImageUrl(url, baseHref)) {
+    return null;
+  }
+
+  const absoluteUrl = toAbsoluteResourceUrl(url, baseHref);
+  if (!absoluteUrl) {
+    return null;
+  }
+
+  try {
+    return await fetchRemoteFileAsDataUrl(absoluteUrl);
+  } catch (error) {
+    console.warn('[HtmlRenderer] Failed to inline image:', absoluteUrl, error);
+    return null;
+  }
+}
+
+async function inlineSrcsetImages(
+  srcset: string,
+  baseHref?: string
+): Promise<string> {
+  if (srcset.toLowerCase().includes('data:')) {
+    return srcset;
+  }
+
+  const candidates = srcset
+    .split(',')
+    .map((candidate) => candidate.trim())
+    .filter(Boolean);
+
+  if (!candidates.length) {
+    return srcset;
+  }
+
+  const rewrittenCandidates = await Promise.all(
+    candidates.map(async (candidate) => {
+      const [url, ...descriptors] = candidate.split(/\s+/);
+      const dataUrl = await inlineImageUrl(url, baseHref);
+      return [dataUrl || url, ...descriptors].join(' ');
+    })
+  );
+
+  return rewrittenCandidates.join(', ');
+}
+
+async function inlineCssImageUrls(
+  cssText: string,
+  baseHref?: string
+): Promise<string> {
+  const matches = Array.from(
+    cssText.matchAll(/url\(\s*(['"]?)([^'")]+)\1\s*\)/gi)
+  );
+  if (!matches.length) {
+    return cssText;
+  }
+
+  const replacements = await Promise.all(
+    matches.map(async (match) => {
+      const fullMatch = match[0];
+      const url = match[2];
+      const dataUrl = await inlineImageUrl(url, baseHref);
+      return dataUrl ? { fullMatch, replacement: `url("${dataUrl}")` } : null;
+    })
+  );
+
+  return replacements.reduce((result, replacement) => {
+    if (!replacement) return result;
+    return result.replace(replacement.fullMatch, replacement.replacement);
+  }, cssText);
+}
+
+async function inlineRemoteHtmlImages(
+  html: string,
+  baseHref?: string
+): Promise<string> {
+  if (typeof DOMParser === 'undefined') {
+    return html;
+  }
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  const doctype = html.match(/<!doctype[^>]*>/i)?.[0] || '';
+
+  await Promise.all(
+    Array.from(doc.querySelectorAll('[src], [href], [srcset]')).map(
+      async (element) => {
+        const src = element.getAttribute('src');
+        if (src) {
+          const dataUrl = await inlineImageUrl(src, baseHref);
+          if (dataUrl) {
+            element.setAttribute('src', dataUrl);
+          }
+        }
+
+        const href = element.getAttribute('href');
+        if (href && element.tagName.toLowerCase() === 'image') {
+          const dataUrl = await inlineImageUrl(href, baseHref);
+          if (dataUrl) {
+            element.setAttribute('href', dataUrl);
+          }
+        }
+
+        const srcset = element.getAttribute('srcset');
+        if (srcset) {
+          element.setAttribute(
+            'srcset',
+            await inlineSrcsetImages(srcset, baseHref)
+          );
+        }
+      }
+    )
+  );
+
+  await Promise.all(
+    Array.from(doc.querySelectorAll('[style]')).map(async (element) => {
+      const style = element.getAttribute('style');
+      if (style) {
+        element.setAttribute(
+          'style',
+          await inlineCssImageUrls(style, baseHref)
+        );
+      }
+    })
+  );
+
+  await Promise.all(
+    Array.from(doc.querySelectorAll('style')).map(async (styleElement) => {
+      styleElement.textContent = await inlineCssImageUrls(
+        styleElement.textContent || '',
+        baseHref
+      );
+    })
+  );
+
+  const serialized = doc.documentElement?.outerHTML || html;
+  return `${doctype}${serialized}`;
+}
+
 function getRemoteRelativePath(file: FileInfo): string | undefined {
   if (file.relativePath) {
     return file.relativePath.replace(/\\/g, '/');
@@ -1335,7 +2217,11 @@ function getRemotePreviewUrl(file: FileInfo): string | undefined {
       return undefined;
     }
 
-    return `${url.origin}/files/preview/${encodeURIComponent(email)}/${encodeURIComponent(projectId)}/${encodePathSegments(relativePath)}`;
+    const filesIndex = url.pathname.indexOf('/files/stream');
+    const routePrefix =
+      filesIndex >= 0 ? url.pathname.substring(0, filesIndex) : '';
+
+    return `${url.origin}${routePrefix}/files/preview/${encodeURIComponent(email)}/${encodeURIComponent(projectId)}/${encodePathSegments(relativePath)}`;
   } catch {
     return undefined;
   }
@@ -1441,11 +2327,11 @@ function HtmlRenderer({
   selectedFile: FileInfo;
   projectFiles: FileInfo[];
 }) {
-  const host = useHost();
-  const electronAPI = host?.electronAPI;
-  const ipcRenderer = host?.ipcRenderer;
   const [processedHtml, setProcessedHtml] = useState<string>('');
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const host = useHost();
+  const ipcRenderer = host?.ipcRenderer;
+  const electronAPI = host?.electronAPI;
 
   useEffect(() => {
     const processHtml = async () => {
@@ -1454,7 +2340,7 @@ function HtmlRenderer({
         return;
       }
 
-      let html = selectedFile.content;
+      let html = repairGeneratedReportBraces(selectedFile.content);
 
       // Get the directory of the HTML file
       const htmlDir = getDirPath(selectedFile.path);
@@ -1522,14 +2408,15 @@ function HtmlRenderer({
           selectedFile,
           projectFiles
         );
+        const htmlWithBaseHref = previewBaseHref
+          ? injectBaseHref(rewrittenHtml, previewBaseHref)
+          : rewrittenHtml;
+        const htmlWithInlineImages = await inlineRemoteHtmlImages(
+          htmlWithBaseHref,
+          previewBaseHref
+        );
         setProcessedHtml(
-          injectFontStyles(
-            deferInlineScriptsUntilLoad(
-              previewBaseHref
-                ? injectBaseHref(rewrittenHtml, previewBaseHref)
-                : rewrittenHtml
-            )
-          )
+          injectFontStyles(deferInlineScriptsUntilLoad(htmlWithInlineImages))
         );
         return;
       }
@@ -1566,11 +2453,11 @@ function HtmlRenderer({
           const imagePath = joinPath(htmlDir, src);
 
           try {
-            // Read image as data URL
-            const dataUrl = await electronAPI?.readFileAsDataUrl(imagePath);
-            if (!dataUrl) {
+            if (!electronAPI?.readFileAsDataUrl) {
               return { original: imgTag, processed: imgTag };
             }
+            // Read image as data URL
+            const dataUrl = await electronAPI.readFileAsDataUrl(imagePath);
 
             // Replace src with data URL
             const newAttributes = attributes.replace(
@@ -1604,12 +2491,9 @@ function HtmlRenderer({
       // Load and inject CSS files, replacing external link tags
       for (const cssFile of cssFiles) {
         try {
-          const cssContent = await ipcRenderer?.invoke(
-            'open-file',
-            'css',
-            cssFile.path,
-            false
-          );
+          const cssContent = ipcRenderer
+            ? await ipcRenderer.invoke('open-file', 'css', cssFile.path, false)
+            : null;
           if (cssContent) {
             const styleTag = `<style data-source="${cssFile.name}">${cssContent}</style>`;
 
@@ -1644,12 +2528,9 @@ function HtmlRenderer({
       // Load JS files content and replace external script tags
       for (const jsFile of jsFiles) {
         try {
-          const jsContent = await ipcRenderer?.invoke(
-            'open-file',
-            'js',
-            jsFile.path,
-            false
-          );
+          const jsContent = ipcRenderer
+            ? await ipcRenderer.invoke('open-file', 'js', jsFile.path, false)
+            : null;
           if (jsContent) {
             // Replace external script tag with inline script
             const scriptRegex = new RegExp(
@@ -1681,8 +2562,11 @@ function HtmlRenderer({
       setProcessedHtml(injectFontStyles(htmlWithDeferredScripts));
     };
 
-    processHtml();
-  }, [selectedFile, projectFiles]);
+    processHtml().catch((error) => {
+      console.error('[HtmlRenderer] Failed to process HTML:', error);
+      setProcessedHtml(injectFontStyles(selectedFile.content || ''));
+    });
+  }, [selectedFile, projectFiles, ipcRenderer, electronAPI]);
 
   // Zoom state and controls
   const [zoom, setZoom] = useState(100);
@@ -1701,7 +2585,11 @@ function HtmlRenderer({
   };
 
   if (selectedFile.content && !processedHtml) {
-    return <FileLoadingSpinner fileName={selectedFile.name} />;
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <div className="mb-4 h-8 w-8 animate-spin mx-auto rounded-full" />
+      </div>
+    );
   }
 
   return (
@@ -1716,7 +2604,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..fbdfd0e07 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-ds-bg-neutral-subtle-default shadow-perfect"
+      commandClassName="bg-ds-bg-neutral-subtle-default"
+    >
+      <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-ds-bg-neutral-subtle-default 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">
+        <Search className="h-4 w-4 text-ds-text-neutral-muted-default"></Search>
+        <span className="font-inter leading-4 text-ds-text-neutral-muted-default 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/Halo/index.tsx b/src/components/Halo/index.tsx
deleted file mode 100644
index ee4898a77..000000000
--- a/src/components/Halo/index.tsx
+++ /dev/null
@@ -1,144 +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 { motion } from 'framer-motion';
-import React from 'react';
-
-type HaloProps = {
-  className?: string;
-  /** Overall opacity for the halos (0.0 - 1.0) */
-  opacity?: number;
-  /** Additional blur in pixels applied to each halo layer */
-  blurPx?: number;
-  /** Whether to render as fixed (fullscreen) or relative to parent */
-  fixed?: boolean;
-  /** Animation speed multiplier; 1 = normal, 0.5 = slower, 2 = faster */
-  speed?: number;
-};
-
-/**
- * Animated halo background with three softly-blurred color blobs.
- * Colors: orange-500, red-500, emerald-500.
- * Designed to sit behind content. Parent should be `relative` if not fixed.
- */
-const Halo: React.FC<HaloProps> = ({
-  className,
-  opacity = 0.6,
-  blurPx = 80,
-  fixed = false,
-  speed = 5,
-}) => {
-  const containerClass = fixed
-    ? 'pointer-events-none fixed inset-0 -z-10 overflow-hidden'
-    : 'pointer-events-none absolute inset-0 -z-10 overflow-hidden';
-
-  const commonHaloClass = 'absolute rounded-full mix-blend-screen';
-
-  const commonStyle: React.CSSProperties = {
-    filter: `blur(${blurPx}px)`,
-    opacity,
-    willChange: 'transform, opacity',
-  };
-
-  // Convert speed multiplier into duration scale: lower speed => longer duration
-  const durationScale = Math.max(0.01, speed);
-
-  return (
-    <div className={[containerClass, className].filter(Boolean).join(' ')}>
-      {/* Orange halo */}
-      <motion.div
-        aria-hidden
-        className={[commonHaloClass].join(' ')}
-        style={{
-          ...commonStyle,
-          width: '44rem',
-          height: '44rem',
-          left: '-10%',
-          top: '-20%',
-          // soft radial gradient for smoother merging
-          background:
-            'radial-gradient(closest-side, rgba(255,237,213,0.9), rgba(255,237,213,0.45), rgba(255,237,213,0.0) 60%)',
-        }}
-        initial={{ x: 0, y: 0, scale: 1, rotate: 0 }}
-        animate={{
-          x: [0, 80, -40, 0],
-          y: [0, -60, 40, 0],
-          scale: [1, 1.1, 0.95, 1],
-          rotate: [0, 10, -8, 0],
-        }}
-        transition={{
-          duration: 28 / durationScale,
-          repeat: Infinity,
-          ease: 'easeInOut',
-        }}
-      />
-
-      {/* Red halo */}
-      <motion.div
-        aria-hidden
-        className={[commonHaloClass].join(' ')}
-        style={{
-          ...commonStyle,
-          width: '36rem',
-          height: '36rem',
-          right: '-12%',
-          top: '10%',
-          background:
-            'radial-gradient(closest-side, rgba(254,226,226,0.9), rgba(254,226,226,0.45), rgba(254,226,226,0.0) 70%)',
-        }}
-        initial={{ x: 0, y: 0, scale: 1, rotate: 0 }}
-        animate={{
-          x: [0, -70, 60, 0],
-          y: [0, 40, -50, 0],
-          scale: [1, 0.9, 1.05, 1],
-          rotate: [0, -12, 6, 0],
-        }}
-        transition={{
-          duration: 32 / durationScale,
-          repeat: Infinity,
-          ease: 'easeInOut',
-        }}
-      />
-
-      {/* Emerald halo */}
-      <motion.div
-        aria-hidden
-        className={[commonHaloClass].join(' ')}
-        style={{
-          ...commonStyle,
-          width: '50rem',
-          height: '50rem',
-          left: '10%',
-          bottom: '-18%',
-          background:
-            'radial-gradient(closest-side, rgba(209,250,229,0.9), rgba(209,250,229,0.45), rgba(209,250,229,0.0) 40%)',
-        }}
-        initial={{ x: 0, y: 0, scale: 1, rotate: 0 }}
-        animate={{
-          x: [0, 40, -60, 0],
-          y: [0, -30, 50, 0],
-          scale: [1, 1.08, 0.92, 1],
-          rotate: [0, 8, -10, 0],
-        }}
-        transition={{
-          duration: 36 / durationScale,
-          repeat: Infinity,
-          ease: 'easeInOut',
-        }}
-      />
-    </div>
-  );
-};
-
-export default Halo;
diff --git a/src/components/HistorySidebar/SearchInput.tsx b/src/components/HistorySidebar/SearchInput.tsx
index 4e58389ee..06ab8f9fb 100644
--- a/src/components/HistorySidebar/SearchInput.tsx
+++ b/src/components/HistorySidebar/SearchInput.tsx
@@ -44,7 +44,9 @@ export default function SearchInput({
         onChange={onChange}
         placeholder={placeholder ?? t('layout.search')}
         leadingIcon={
-          leadingIcon ?? <Search className="h-5 w-5 text-icon-secondary" />
+          leadingIcon ?? (
+            <Search className="h-5 w-5 text-ds-icon-neutral-muted-default" />
+          )
         }
       />
     </div>
diff --git a/src/components/HistorySidebar/index.tsx b/src/components/HistorySidebar/index.tsx
index 501df6759..0b657439b 100644
--- a/src/components/HistorySidebar/index.tsx
+++ b/src/components/HistorySidebar/index.tsx
@@ -13,25 +13,29 @@
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
 import { proxyFetchDelete } from '@/api/http';
-import { Sparkle } from '@/components/animate-ui/icons/sparkle';
+import tokenDarkIcon from '@/assets/token-dark.svg';
+import tokenLightIcon from '@/assets/token-light.svg';
+import { formatTokenCount } from '@/components/ChatBox/MessageItem/TokenUtils';
 import { Button } from '@/components/ui/button';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+import { useHost } from '@/host';
 import { loadProjectFromHistory } from '@/lib';
 import { share } from '@/lib/share';
 import { fetchGroupedHistoryTasks } from '@/service/historyApi';
-import { getAuthStore } from '@/store/authStore';
+import { getAuthStore, useAuthStore } from '@/store/authStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { ChatTaskStatus } from '@/types/constants';
 import { HistoryTask, ProjectGroup } from '@/types/history';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
   Ellipsis,
-  Hash,
-  Pin,
+  FolderCheck,
+  FolderClock,
+  ListChecks,
   Plus,
   Share,
-  Sparkles,
   Trash2,
+  Zap,
 } from 'lucide-react';
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -47,8 +51,47 @@ import { Tag } from '../ui/tag';
 import { TooltipSimple } from '../ui/tooltip';
 import SearchInput from './SearchInput';
 
+const compactCountFormatter = new Intl.NumberFormat('en', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 0,
+});
+
+const formatCompactCount = (value?: number) =>
+  compactCountFormatter.format(value || 0);
+
+const toFiniteNumber = (value: unknown): number | null => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : null;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value.replace(/,/g, '').trim());
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+};
+
+const resolveProjectTokenCount = (
+  project: Pick<ProjectGroup, 'total_tokens' | 'tasks'>
+): number => {
+  const direct = toFiniteNumber(project.total_tokens as unknown);
+  if (direct !== null) {
+    return direct;
+  }
+
+  return (project.tasks || []).reduce(
+    (sum, task) =>
+      sum + (toFiniteNumber((task as { tokens?: unknown }).tokens) ?? 0),
+    0
+  );
+};
+
 export default function HistorySidebar() {
   const { t } = useTranslation();
+  const host = useHost();
+  const ipcRenderer = host?.ipcRenderer;
+  const { appearance } = useAuthStore();
+  const tokenIcon = appearance === 'dark' ? tokenDarkIcon : tokenLightIcon;
   const { isOpen, close } = useSidebarStore();
   const navigate = useNavigate();
   //Get Chatstore for the active project's task
@@ -67,7 +110,7 @@ export default function HistorySidebar() {
   useEffect(() => {
     if (!chatStore) return;
     fetchGroupedHistoryTasks(setHistoryTasks);
-  }, [chatStore?.updateCount]);
+  }, [chatStore, chatStore?.updateCount]);
 
   // Group ongoing tasks by project
   const ongoingProjects = useMemo(() => {
@@ -112,6 +155,9 @@ export default function HistorySidebar() {
           tasks: [],
           task_count: taskCount,
           total_tokens: totalTokens,
+          total_triggers:
+            historyTasks.find((item) => item.project_id === project.id)
+              ?.total_triggers || 0,
           last_prompt: lastPrompt,
           isOngoing: true,
         });
@@ -119,7 +165,7 @@ export default function HistorySidebar() {
     });
 
     return Array.from(projectMap.values());
-  }, [projectStore, chatStore]);
+  }, [projectStore, chatStore, historyTasks]);
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value) {
@@ -197,11 +243,11 @@ export default function HistorySidebar() {
       const history = project.tasks.find(
         (item: HistoryTask) => String(item.id) === historyId
       );
-      if (history?.task_id && (window as any).ipcRenderer) {
+      if (history?.task_id && ipcRenderer) {
         try {
           //TODO(file): rename endpoint to use project_id
           //TODO(history): make sure to sync to projectId when updating endpoint
-          await (window as any).ipcRenderer.invoke(
+          await ipcRenderer.invoke(
             'delete-task-files',
             email,
             history.task_id,
@@ -245,9 +291,9 @@ export default function HistorySidebar() {
 
             // Also delete local files for this task if available (via Electron IPC)
             const { email } = getAuthStore();
-            if (history.task_id && (window as any).ipcRenderer) {
+            if (history.task_id && ipcRenderer) {
               try {
-                await (window as any).ipcRenderer.invoke(
+                await ipcRenderer.invoke(
                   'delete-task-files',
                   email,
                   history.task_id,
@@ -303,11 +349,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 (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);
       }
     };
 
@@ -347,7 +422,7 @@ export default function HistorySidebar() {
             className="fixed inset-0 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,7 +430,7 @@ 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="fixed z-50 flex max-h-[80vh] w-[360px] flex-col overflow-hidden rounded-xl bg-ds-bg-neutral-subtle-default p-2 shadow-perfect"
             style={{
               left: anchorStyle.left,
               top: anchorStyle.top,
@@ -365,7 +440,7 @@ export default function HistorySidebar() {
               {/* 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="h-8 w-8 text-ds-icon-neutral-muted-default transition-all duration-300 group-hover:text-ds-icon-neutral-default-default" />
               </Button>
             </div>
             <div className="scrollbar-hide mt-2 min-h-0 flex-1 overflow-y-auto">
@@ -389,24 +464,21 @@ 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="relative flex w-full max-w-full cursor-pointer items-center justify-between gap-sm rounded-xl border border-solid border-ds-border-neutral-subtle-default bg-ds-bg-neutral-default-default px-4 py-3 shadow-history-item transition-all duration-300 hover:bg-ds-bg-neutral-default-hover"
                     >
-                      <Sparkles
-                        size={20}
-                        className="flex-shrink-0 text-icon-information"
-                      />
+                      <FolderClock className="h-5 w-5 flex-shrink-0 text-ds-icon-status-running-default-default" />
 
                       <div className="flex min-w-0 flex-1 flex-col gap-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="pointer-events-auto w-[300px] select-text text-wrap break-words bg-ds-bg-neutral-default-default p-2 text-label-xs shadow-perfect"
                           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="block overflow-hidden text-ellipsis whitespace-nowrap text-body-sm font-semibold text-ds-text-neutral-default-default">
                             {project.project_name || t('layout.new-project')}
                           </span>
                         </TooltipSimple>
@@ -414,19 +486,48 @@ export default function HistorySidebar() {
 
                       <div className="flex flex-shrink-0 items-center gap-2">
                         <TooltipSimple content={t('chat.token')}>
-                          <Tag variant="info" size="sm">
-                            <Hash className="h-3.5 w-3.5" />
-                            <span className="text-xs">
-                              {(project.total_tokens || 0).toLocaleString()}
+                          <Tag
+                            variant="primary"
+                            tone="information"
+                            emphasis="default"
+                            size="xs"
+                            className="gap-1.5"
+                          >
+                            <img src={tokenIcon} alt="" className="h-3 w-3" />
+                            <span className="text-label-xs">
+                              {formatTokenCount(
+                                resolveProjectTokenCount(project)
+                              )}
+                            </span>
+                          </Tag>
+                        </TooltipSimple>
+
+                        <TooltipSimple content={t('layout.tasks')}>
+                          <Tag
+                            variant="primary"
+                            tone="default"
+                            emphasis="default"
+                            size="xs"
+                            className="gap-1.5"
+                          >
+                            <ListChecks className="h-3 w-3" />
+                            <span className="text-label-xs">
+                              {formatCompactCount(project.task_count)}
                             </span>
                           </Tag>
                         </TooltipSimple>
 
-                        <TooltipSimple content="Tasks">
-                          <Tag variant="default" size="sm">
-                            <Pin className="h-3.5 w-3.5" />
-                            <span className="text-xs">
-                              {project.task_count}
+                        <TooltipSimple content="Triggers">
+                          <Tag
+                            variant="primary"
+                            tone="warning"
+                            emphasis="default"
+                            size="xs"
+                            className="gap-1.5"
+                          >
+                            <Zap className="h-3 w-3" />
+                            <span className="text-label-xs">
+                              {formatCompactCount(project.total_triggers)}
                             </span>
                           </Tag>
                         </TooltipSimple>
@@ -440,10 +541,13 @@ export default function HistorySidebar() {
                             variant="ghost"
                             className="flex-shrink-0"
                           >
-                            <Ellipsis size={16} className="text-text-primary" />
+                            <Ellipsis
+                              size={16}
+                              className="text-ds-text-neutral-default-default"
+                            />
                           </Button>
                         </PopoverTrigger>
-                        <PopoverContent className="w-[98px] rounded-[12px] border border-solid border-dropdown-border bg-dropdown-bg p-sm">
+                        <PopoverContent className="w-[98px] rounded-[12px] border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default p-sm">
                           <div className="space-y-1">
                             <PopoverClose asChild>
                               <Button
@@ -472,7 +576,7 @@ export default function HistorySidebar() {
                               >
                                 <Trash2
                                   size={16}
-                                  className="text-icon-primary group-hover:text-icon-cuation"
+                                  className="text-ds-icon-neutral-default-default group-hover:text-ds-icon-status-error-default-default"
                                 />
                                 {t('layout.delete')}
                               </Button>
@@ -504,17 +608,14 @@ 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="relative flex w-full max-w-full cursor-pointer items-center justify-between gap-sm rounded-xl border border-solid border-ds-border-neutral-subtle-default bg-ds-bg-neutral-default-default px-4 py-3 shadow-history-item transition-all duration-300 hover:bg-ds-bg-neutral-default-hover"
                     >
-                      <Sparkle
-                        size={20}
-                        className="flex-shrink-0 text-icon-secondary"
-                      />
+                      <FolderCheck className="h-5 w-5 flex-shrink-0 text-ds-icon-neutral-subtle-default" />
 
                       <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="pointer-events-auto w-[300px] select-text text-wrap break-words bg-ds-bg-neutral-default-default p-2 text-label-xs shadow-perfect"
                           content={
                             <div>
                               {project.last_prompt ||
@@ -523,7 +624,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="block overflow-hidden text-ellipsis whitespace-nowrap text-body-sm font-semibold text-ds-text-neutral-default-default">
                             {project.last_prompt ||
                               project.project_name ||
                               t('layout.new-project')}
@@ -533,19 +634,48 @@ export default function HistorySidebar() {
 
                       <div className="flex flex-shrink-0 items-center gap-2">
                         <TooltipSimple content={t('chat.token')}>
-                          <Tag variant="info" size="sm">
-                            <Hash className="h-3.5 w-3.5" />
-                            <span className="text-xs">
-                              {(project.total_tokens || 0).toLocaleString()}
+                          <Tag
+                            variant="primary"
+                            tone="information"
+                            emphasis="default"
+                            size="xs"
+                            className="gap-1.5"
+                          >
+                            <img src={tokenIcon} alt="" className="h-3 w-3" />
+                            <span className="text-label-xs">
+                              {formatTokenCount(
+                                resolveProjectTokenCount(project)
+                              )}
+                            </span>
+                          </Tag>
+                        </TooltipSimple>
+
+                        <TooltipSimple content={t('layout.tasks')}>
+                          <Tag
+                            variant="primary"
+                            tone="default"
+                            emphasis="default"
+                            size="xs"
+                            className="gap-1.5"
+                          >
+                            <ListChecks className="h-3 w-3" />
+                            <span className="text-label-xs">
+                              {formatCompactCount(project.task_count)}
                             </span>
                           </Tag>
                         </TooltipSimple>
 
-                        <TooltipSimple content="Tasks">
-                          <Tag variant="default" size="sm">
-                            <Pin className="h-3.5 w-3.5" />
-                            <span className="text-xs">
-                              {project.task_count}
+                        <TooltipSimple content="Triggers">
+                          <Tag
+                            variant="primary"
+                            tone="warning"
+                            emphasis="default"
+                            size="xs"
+                            className="gap-1.5"
+                          >
+                            <Zap className="h-3 w-3" />
+                            <span className="text-label-xs">
+                              {formatCompactCount(project.total_triggers)}
                             </span>
                           </Tag>
                         </TooltipSimple>
@@ -559,10 +689,13 @@ export default function HistorySidebar() {
                             variant="ghost"
                             className="flex-shrink-0"
                           >
-                            <Ellipsis size={16} className="text-text-primary" />
+                            <Ellipsis
+                              size={16}
+                              className="text-ds-text-neutral-default-default"
+                            />
                           </Button>
                         </PopoverTrigger>
-                        <PopoverContent className="w-[98px] rounded-[12px] border border-solid border-dropdown-border bg-dropdown-bg p-sm">
+                        <PopoverContent className="w-[98px] rounded-[12px] border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default p-sm">
                           <div className="space-y-1">
                             <PopoverClose asChild>
                               <Button
@@ -591,7 +724,7 @@ export default function HistorySidebar() {
                               >
                                 <Trash2
                                   size={16}
-                                  className="text-icon-primary group-hover:text-icon-cuation"
+                                  className="text-ds-icon-neutral-default-default group-hover:text-ds-icon-status-error-default-default"
                                 />
                                 {t('layout.delete')}
                               </Button>
diff --git a/src/components/InstallStep/Carousel.tsx b/src/components/InstallStep/Carousel.tsx
index 04cca8aed..3d60c6d61 100644
--- a/src/components/InstallStep/Carousel.tsx
+++ b/src/components/InstallStep/Carousel.tsx
@@ -152,8 +152,8 @@ 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="mb-md text-heading-sm font-bold text-text-heading">
+      <div className="min-h-0 flex h-full w-full flex-col">
+        <div className="mb-md text-heading-sm font-bold text-ds-text-neutral-default-default">
           {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,16 +212,16 @@ 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}
               onMouseEnter={() => handleIndicatorHover(index)}
               className={`h-1 w-32 cursor-pointer rounded-full transition-all duration-300 ${
                 index === currentSlide
-                  ? 'bg-fill-fill-secondary'
-                  : 'bg-fill-fill-tertiary hover:bg-fill-fill-secondary'
+                  ? 'bg-ds-bg-neutral-default-default'
+                  : 'bg-ds-bg-neutral-subtle-default hover:bg-ds-bg-neutral-default-default'
               }`}
             ></div>
           ))}
@@ -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/InstallStep/InstallDependencies.tsx b/src/components/InstallStep/InstallDependencies.tsx
index c7b34b255..3ccf03272 100644
--- a/src/components/InstallStep/InstallDependencies.tsx
+++ b/src/components/InstallStep/InstallDependencies.tsx
@@ -22,9 +22,9 @@ export const InstallDependencies: React.FC = () => {
     useInstallationUI();
 
   return (
-    <div className="fixed inset-0 !z-[100] flex h-full w-full items-center justify-center overflow-hidden px-2 pb-2 pt-10">
-      <div className="flex h-full w-full flex-row justify-center gap-lg rounded-2xl border-solid border-border-tertiary bg-surface-secondary p-md">
-        <div className="flex h-full w-1/3 pt-6">
+    <div className="inset-0 px-1 pb-1 pt-10 fixed !z-[100] flex h-full w-full items-center justify-center overflow-hidden">
+      <div className="gap-lg rounded-2xl bg-ds-bg-neutral-subtle-default p-4 flex h-full w-full flex-row justify-center">
+        <div className="pt-6 flex h-full w-1/3">
           {/* {isInstalling.toString()} */}
           <div className="flex w-full flex-col">
             <ProgressInstall
@@ -35,16 +35,16 @@ export const InstallDependencies: React.FC = () => {
               }
               className="mb-4 w-full"
             />
-            <div className="mt-2 flex w-full flex-col items-start justify-between gap-4">
+            <div className="mt-2 gap-4 flex w-full flex-col items-start justify-between">
               <div className="flex w-full flex-row items-start justify-between">
-                <div className="text-body-sm font-medium leading-normal text-text-heading">
+                <div className="text-body-sm font-medium leading-normal text-ds-text-neutral-default-default">
                   {isInstalling
                     ? 'System Installing ...'
                     : installationState === 'waiting-backend'
                       ? 'Starting up... First launch may take a minute.'
                       : ''}
                 </div>
-                <div className="text-body-sm font-medium leading-normal text-text-heading">
+                <div className="text-body-sm font-medium leading-normal text-ds-text-neutral-default-default">
                   {Math.round(
                     (isInstalling || installationState === 'waiting-backend'
                       ? progress
@@ -53,13 +53,13 @@ export const InstallDependencies: React.FC = () => {
                   %
                 </div>
               </div>
-              <div className="w-full text-body-sm font-normal leading-normal text-text-label">
+              <div className="text-body-sm font-normal leading-normal text-ds-text-neutral-muted-default w-full">
                 {latestLog?.data}
               </div>
             </div>
           </div>
         </div>
-        <div className="flex h-full w-2/3 rounded-2xl bg-surface-tertiary p-md">
+        <div className="rounded-2xl bg-ds-bg-neutral-default-default p-md flex h-full w-2/3">
           <CarouselStep />
         </div>
       </div>
diff --git a/src/components/InstallStep/InstallationErrorDialog/InstallationErrorDialog.tsx b/src/components/InstallStep/InstallationErrorDialog/InstallationErrorDialog.tsx
index a1c610dd2..e5bf6c02f 100644
--- a/src/components/InstallStep/InstallationErrorDialog/InstallationErrorDialog.tsx
+++ b/src/components/InstallStep/InstallationErrorDialog/InstallationErrorDialog.tsx
@@ -44,9 +44,11 @@ const InstallationErrorDialog = ({
         <DialogContent size="sm">
           <DialogHeader title={t('layout.backend-startup-failed')} />
           <DialogContentSection>
-            <div className="text-xs font-normal leading-normal text-text-label">
+            <div className="text-body-sm font-normal leading-normal text-ds-text-neutral-muted-default">
               <div className="mb-1">
-                <span className="text-text-label">{backendError}</span>
+                <span className="text-ds-text-neutral-muted-default">
+                  {backendError}
+                </span>
               </div>
             </div>
           </DialogContentSection>
@@ -65,9 +67,11 @@ const InstallationErrorDialog = ({
       <DialogContent size="sm">
         <DialogHeader title={t('layout.installation-failed')} />
         <DialogContentSection>
-          <div className="text-xs font-normal leading-normal text-text-label">
+          <div className="text-body-sm font-normal leading-normal text-ds-text-neutral-muted-default">
             <div className="mb-1">
-              <span className="text-text-label">{error}</span>
+              <span className="text-ds-text-neutral-muted-default">
+                {error}
+              </span>
             </div>
           </div>
         </DialogContentSection>
diff --git a/src/components/AnimationJson.tsx b/src/components/Layout/AnimationJson.tsx
similarity index 94%
rename from src/components/AnimationJson.tsx
rename to src/components/Layout/AnimationJson.tsx
index 92fffe46c..fd7417284 100644
--- a/src/components/AnimationJson.tsx
+++ b/src/components/Layout/AnimationJson.tsx
@@ -43,7 +43,7 @@ export function AnimationJson({
   return (
     <div
       id="lottie-container"
-      className="fixed inset-0 z-[9999] h-full w-full bg-white-100%"
+      className="inset-0 bg-ds-bg-neutral-subtle-default fixed z-[9999] h-full w-full"
     ></div>
   );
 }
diff --git a/src/components/Layout/ThemeProvider.tsx b/src/components/Layout/ThemeProvider.tsx
new file mode 100644
index 000000000..101b0f75f
--- /dev/null
+++ b/src/components/Layout/ThemeProvider.tsx
@@ -0,0 +1,152 @@
+// ========= 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 {
+  applyThemeContractV2,
+  createDefaultThemeContractV2,
+} from '@/lib/themeTokens';
+import { DEFAULT_THEME_CATALOG } from '@/lib/themeTokens/catalog';
+import type { Mode } from '@/lib/themeTokens/types';
+import { useAuthStore } from '@/store/authStore';
+import { useEffect, useMemo, useState } from 'react';
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const {
+    appearance,
+    appearanceMode,
+    lightColorThemeId,
+    darkColorThemeId,
+    customThemeCatalog,
+    themeContrast,
+    setResolvedAppearance,
+  } = useAuthStore();
+
+  const [systemMode, setSystemMode] = useState<Mode>(() => {
+    if (typeof window === 'undefined') return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light';
+  });
+
+  useEffect(() => {
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const update = () => {
+      setSystemMode(media.matches ? 'dark' : 'light');
+    };
+    update();
+
+    if (typeof media.addEventListener === 'function') {
+      media.addEventListener('change', update);
+    } else {
+      media.addListener(update);
+    }
+    return () => {
+      if (typeof media.removeEventListener === 'function') {
+        media.removeEventListener('change', update);
+      } else {
+        media.removeListener(update);
+      }
+    };
+  }, []);
+
+  const resolvedMode: Mode =
+    appearanceMode === 'system' ? systemMode : appearanceMode;
+  const colorThemeId =
+    resolvedMode === 'dark' ? darkColorThemeId : lightColorThemeId;
+  const mergedCatalog = useMemo(
+    () => ({
+      light: {
+        ...DEFAULT_THEME_CATALOG.light,
+        ...customThemeCatalog.light,
+      },
+      dark: {
+        ...DEFAULT_THEME_CATALOG.dark,
+        ...customThemeCatalog.dark,
+      },
+    }),
+    [customThemeCatalog.dark, customThemeCatalog.light]
+  );
+
+  useEffect(() => {
+    if (appearance !== resolvedMode) {
+      setResolvedAppearance(resolvedMode);
+    }
+  }, [appearance, resolvedMode, setResolvedAppearance]);
+
+  useEffect(() => {
+    const root = document.documentElement;
+
+    root.setAttribute('data-theme', resolvedMode);
+    root.setAttribute('data-theme-mode', appearanceMode);
+    root.setAttribute('data-color-theme', colorThemeId);
+    root.style.setProperty('color-scheme', resolvedMode);
+    root.style.setProperty('--ds-theme-contrast', String(themeContrast));
+
+    applyThemeContractV2(
+      createDefaultThemeContractV2(resolvedMode, {
+        themeId: colorThemeId,
+        contrast: themeContrast,
+      }),
+      root,
+      mergedCatalog
+    );
+  }, [
+    appearanceMode,
+    colorThemeId,
+    mergedCatalog,
+    resolvedMode,
+    themeContrast,
+  ]);
+
+  useEffect(() => {
+    if (!import.meta.env.DEV) return;
+
+    const api = {
+      listThemes(mode?: Mode) {
+        if (mode) {
+          return Object.keys(mergedCatalog[mode] ?? {});
+        }
+        return {
+          light: Object.keys(mergedCatalog.light ?? {}),
+          dark: Object.keys(mergedCatalog.dark ?? {}),
+        };
+      },
+      setTheme(mode: Mode, themeId: string) {
+        useAuthStore.getState().setColorThemeForMode(mode, themeId);
+      },
+      setContrast(contrast: number) {
+        useAuthStore.getState().setThemeContrast(contrast);
+      },
+      getState() {
+        const state = useAuthStore.getState();
+        return {
+          appearance: state.appearance,
+          appearanceMode: state.appearanceMode,
+          lightColorThemeId: state.lightColorThemeId,
+          darkColorThemeId: state.darkColorThemeId,
+          themeContrast: state.themeContrast,
+          customThemeCatalog: state.customThemeCatalog,
+        };
+      },
+    };
+
+    (
+      window as Window & {
+        __eigentThemeV2?: typeof api;
+      }
+    ).__eigentThemeV2 = api;
+  }, [mergedCatalog]);
+
+  return <>{children}</>;
+}
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index c8ee26336..27ffaf3fe 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -13,8 +13,8 @@
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
 import animationData from '@/assets/animation/onboarding_success.json';
-import { AnimationJson } from '@/components/AnimationJson';
 import { InstallDependencies } from '@/components/InstallStep/InstallDependencies';
+import { AnimationJson } from '@/components/Layout/AnimationJson';
 import TopBar from '@/components/TopBar';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
 import { useInstallationSetup } from '@/hooks/useInstallationSetup';
@@ -92,9 +92,9 @@ const Layout = () => {
   }
 
   return (
-    <div className="relative flex h-full flex-col overflow-hidden">
+    <div className="bg-ds-bg-neutral-muted-default relative flex h-full flex-col overflow-hidden">
       <TopBar />
-      <div className="relative h-full min-h-0 flex-1 overflow-hidden">
+      <div className="min-h-0 relative h-full flex-1 overflow-hidden">
         {/* Onboarding animation */}
         {shouldShowOnboarding && (
           <AnimationJson
diff --git a/src/components/Layout/tokenAliases.ts b/src/components/Layout/tokenAliases.ts
new file mode 100644
index 000000000..84556d256
--- /dev/null
+++ b/src/components/Layout/tokenAliases.ts
@@ -0,0 +1,60 @@
+// ========= 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 React from 'react';
+
+type CssVarMap = React.CSSProperties & Record<`--${string}`, string>;
+
+function asCssVarMap(map: Record<`--${string}`, string>): CssVarMap {
+  return map as CssVarMap;
+}
+
+export function mergeLayoutAliasStyles(
+  base: CssVarMap,
+  style?: React.CSSProperties
+): React.CSSProperties {
+  return style ? ({ ...base, ...style } as React.CSSProperties) : base;
+}
+
+// Shared layout-level aliases for TopBar, HistorySidebar, and ProjectPageSidebar.
+export const productLayoutTokenAliases = asCssVarMap({
+  '--border-secondary': 'var(--ds-border-neutral-default-default)',
+  '--border-disabled': 'var(--ds-border-neutral-subtle-default)',
+
+  '--text-heading': 'var(--ds-text-neutral-default-default)',
+  '--text-body': 'var(--ds-text-neutral-default-default)',
+  '--text-label': 'var(--ds-text-neutral-muted-default)',
+  '--text-primary': 'var(--ds-text-neutral-default-default)',
+  '--text-secondary': 'var(--ds-text-neutral-muted-default)',
+  '--text-information': 'var(--ds-text-status-splitting-strong-default)',
+  '--text-error': 'var(--ds-text-status-error-strong-default)',
+
+  '--icon-primary': 'var(--ds-icon-neutral-default-default)',
+  '--icon-secondary': 'var(--ds-icon-neutral-muted-default)',
+  '--icon-information': 'var(--ds-icon-status-splitting-default-default)',
+  '--icon-success': 'var(--ds-icon-status-completed-default-default)',
+  '--icon-warning': 'var(--ds-icon-status-pending-default-default)',
+  '--icon-caution': 'var(--ds-icon-status-error-default-default)',
+
+  '--project-surface': 'var(--ds-bg-neutral-default-default)',
+  '--project-surface-hover': 'var(--ds-bg-neutral-default-hover)',
+
+  '--dropdown-bg': 'var(--ds-bg-neutral-strong-default)',
+  '--dropdown-border': 'var(--ds-border-neutral-default-default)',
+
+  '--button-transparent-fill-default': 'transparent',
+  '--button-transparent-fill-hover': 'var(--ds-bg-neutral-default-hover)',
+  '--button-transparent-fill-active': 'var(--ds-bg-neutral-default-active)',
+  '--button-transparent-text-default': 'var(--ds-text-neutral-default-default)',
+});
diff --git a/src/components/MenuButton/MenuButton.tsx b/src/components/MenuButton/MenuButton.tsx
deleted file mode 100644
index 6cbfd17b0..000000000
--- a/src/components/MenuButton/MenuButton.tsx
+++ /dev/null
@@ -1,220 +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 { AnimateIcon as AnimateIconProvider } from '@/components/animate-ui/icons/icon';
-import { cn } from '@/lib/utils';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-const menuButtonVariants = cva(
-  'relative inline-flex items-center justify-center select-none transition-colors duration-200 ease-in-out outline-none disabled:opacity-30 disabled:pointer-events-none bg-menubutton-fill-default hover:bg-menubutton-fill-hover hover:text-text-primary focus:text-text-primary data-[state=on]:bg-menubutton-fill-active data-[state=on]:text-text-primary text-text-secondary disabled:text-text-disabled cursor-pointer data-[state=on]:shadow-button-shadow rounded-lg',
-  {
-    variants: {
-      variant: {
-        default:
-          'border border-solid text-text-body border-menubutton-border-default hover:border-menubutton-border-hover focus:bg-menubutton-fill-active focus:border-menubutton-border-active data-[state=on]:border-menubutton-border-active data-[state=on]:shadow-button-shadow',
-        clear:
-          'border border-solid text-text-body border-menubutton-border-default hover:border-menubutton-border-hover focus:bg-menubutton-fill-active focus:border-menubutton-border-default data-[state=on]:shadow-button-shadow',
-        info: 'text-text-body !font-medium hover:bg-menubutton-fill-active focus:bg-menubutton-fill-active data-[state=on]:text-text-body data-[state=on]:!font-bold',
-      },
-      size: {
-        xs: 'px-2 py-1 text-label-sm font-bold [&_svg]:size-[16px] rounded-lg',
-        sm: 'p-2 gap-1 text-label-sm font-bold [&_svg]:size-[20px] rounded-lg',
-        md: 'w-10 h-10 text-label-md font-bold [&_svg]:size-[24px] rounded-xl',
-        iconxs: 'w-8 h-8 gap-1 font-bold [&_svg]:size-[16px] rounded-lg',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'md',
-    },
-  }
-);
-
-type MenuToggleContextValue = VariantProps<typeof menuButtonVariants>;
-
-const MenuToggleGroupContext = React.createContext<MenuToggleContextValue>({
-  variant: 'default',
-  size: 'md',
-});
-
-type MenuToggleGroupProps = React.ComponentPropsWithoutRef<
-  typeof ToggleGroupPrimitive.Root
-> &
-  VariantProps<typeof menuButtonVariants>;
-
-export const MenuToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  MenuToggleGroupProps
->(
-  (
-    { className, variant, size, children, orientation = 'vertical', ...props },
-    ref
-  ) => (
-    <ToggleGroupPrimitive.Root
-      ref={ref}
-      orientation={orientation}
-      className={cn(
-        'flex items-center justify-center',
-        orientation === 'vertical' ? 'flex-col' : 'flex-row',
-        className
-      )}
-      {...props}
-    >
-      <MenuToggleGroupContext.Provider value={{ variant, size }}>
-        {children}
-      </MenuToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  )
-);
-
-MenuToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-
-type MenuToggleItemProps = React.ComponentPropsWithoutRef<
-  typeof ToggleGroupPrimitive.Item
-> &
-  VariantProps<typeof menuButtonVariants> & {
-    icon?: React.ReactNode;
-    subIcon?: React.ReactNode;
-    showSubIcon?: boolean;
-    disableIconAnimation?: boolean;
-    iconAnimateOnHover?: boolean | string;
-    rightElement?: React.ReactNode;
-  };
-
-export const MenuToggleItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  MenuToggleItemProps
->(
-  (
-    {
-      className,
-      children,
-      size,
-      icon,
-      variant,
-      subIcon,
-      showSubIcon = false,
-      disableIconAnimation = false,
-      iconAnimateOnHover = true,
-      rightElement,
-      ...props
-    },
-    ref
-  ) => {
-    const context = React.useContext(MenuToggleGroupContext);
-    const [isSelected, setIsSelected] = React.useState(false);
-    const itemRef = React.useRef<HTMLButtonElement | null>(null);
-
-    const combinedRef = React.useCallback(
-      (node: HTMLButtonElement | null) => {
-        itemRef.current = node;
-        if (typeof ref === 'function') {
-          ref(node);
-        } else if (ref) {
-          // Use Object.defineProperty to bypass readonly restriction
-          Object.defineProperty(ref, 'current', {
-            writable: true,
-            value: node,
-          });
-        }
-      },
-      [ref]
-    );
-
-    React.useEffect(() => {
-      const checkSelected = () => {
-        if (itemRef.current) {
-          const selected = itemRef.current.getAttribute('data-state') === 'on';
-          setIsSelected(selected);
-        }
-      };
-
-      checkSelected();
-      const observer = new MutationObserver(checkSelected);
-      if (itemRef.current) {
-        observer.observe(itemRef.current, {
-          attributes: true,
-          attributeFilter: ['data-state'],
-        });
-      }
-
-      return () => observer.disconnect();
-    }, []);
-
-    const currentVariant = context.variant || variant;
-    const isInfoVariant = currentVariant === 'info';
-
-    const iconNode =
-      React.isValidElement(icon) && isInfoVariant
-        ? React.cloneElement(icon as React.ReactElement<any>, {
-            strokeWidth: isSelected ? 2.5 : 2,
-          })
-        : icon;
-
-    return (
-      <AnimateIconProvider
-        animateOnHover={
-          disableIconAnimation
-            ? false
-            : (iconAnimateOnHover as unknown as string | boolean)
-        }
-        asChild
-      >
-        <ToggleGroupPrimitive.Item
-          ref={combinedRef}
-          className={cn(
-            'group',
-            menuButtonVariants({
-              variant: currentVariant,
-              size: context.size || size,
-            }),
-            className
-          )}
-          {...props}
-        >
-          <span
-            className={cn(
-              'flex h-full w-full items-center',
-              rightElement ? 'justify-between' : 'justify-center'
-            )}
-          >
-            <span className="inline-flex items-center gap-1">
-              {iconNode}
-              {children}
-            </span>
-            {rightElement && (
-              <span
-                className="pointer-events-auto inline-flex items-center justify-center"
-                onClick={(e) => e.stopPropagation()}
-              >
-                {rightElement}
-              </span>
-            )}
-          </span>
-          {showSubIcon && subIcon && (
-            <span className="absolute right-1 top-1 inline-flex items-center justify-center [&_svg]:shrink-0">
-              {subIcon}
-            </span>
-          )}
-        </ToggleGroupPrimitive.Item>
-      </AnimateIconProvider>
-    );
-  }
-);
-
-MenuToggleItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-export { menuButtonVariants };
diff --git a/src/components/Notification/index.tsx b/src/components/Notification/index.tsx
new file mode 100644
index 000000000..90e41e6ac
--- /dev/null
+++ b/src/components/Notification/index.tsx
@@ -0,0 +1,73 @@
+// ========= 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 { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type NotificationPanelProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export default function NotificationPanel({
+  open,
+  onOpenChange,
+}: NotificationPanelProps) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onOpenChange(false);
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [open, onOpenChange]);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className="inset-0 fixed z-40 cursor-default bg-transparent backdrop-blur-[1px]"
+        aria-label={t('layout.notification-panel-dismiss', {
+          defaultValue: 'Dismiss',
+        })}
+        onClick={() => onOpenChange(false)}
+      />
+      <div
+        id="notification-panel"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="notification-panel-heading"
+        className="right-2 top-10 bottom-2 min-h-0 ease-out animate-in fade-in-0 slide-in-from-right-2 rounded-2xl bg-ds-bg-neutral-default-default fixed z-50 flex w-[300px] max-w-[calc(100vw-1.5rem)] flex-col overflow-hidden duration-200"
+      >
+        <div className="min-h-0 pl-3 pr-1.5 py-3 flex flex-1 flex-col overflow-y-auto">
+          <span
+            id="notification-panel-heading"
+            className="text-ds-text-neutral-default-default text-body-md font-bold shrink-0"
+          >
+            {t('layout.notifications')}
+          </span>
+          <p className="text-ds-text-neutral-muted-default text-body-sm mt-3">
+            {t('layout.notifications-empty')}
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/ProjectPageSidebar/BottomAction.tsx b/src/components/ProjectPageSidebar/BottomAction.tsx
new file mode 100644
index 000000000..1ebffb5be
--- /dev/null
+++ b/src/components/ProjectPageSidebar/BottomAction.tsx
@@ -0,0 +1,103 @@
+// ========= 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 { motion } from 'framer-motion';
+import { Power } from 'lucide-react';
+
+import {
+  PROJECT_SIDEBAR_FOLD_SPRING,
+  SIDEBAR_TOOLTIP_CONTENT_CLASS,
+} from './constants';
+import { WORKSPACE_TAB_LABEL_CLASS, workspaceTabButtonClass } from './NavTab';
+
+export interface BottomActionProps {
+  /** When false, the bottom rail is omitted entirely. */
+  showEndProject: boolean;
+  endProjectLabel: string;
+  endProjectAriaLabel: string;
+  /** Tooltip content; defaults to {@link endProjectLabel}. */
+  endProjectTooltip?: string;
+  onEndProjectClick: () => void;
+  /** Icon-only rail: fade label; keep Power icon fixed. */
+  folded?: boolean;
+}
+
+/** Bottom rail: end project — same layout as the former help row (icon + label, workspace tab button styles). */
+export function BottomAction({
+  showEndProject,
+  endProjectLabel,
+  endProjectAriaLabel,
+  endProjectTooltip,
+  onEndProjectClick,
+  folded = false,
+}: BottomActionProps) {
+  const tooltipText = endProjectTooltip ?? endProjectLabel;
+
+  if (!showEndProject) {
+    return null;
+  }
+
+  return (
+    <div className="pt-2 mt-auto w-full shrink-0">
+      <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">
+          <TooltipSimple
+            content={tooltipText}
+            side="right"
+            align="center"
+            enabled={folded}
+            className={SIDEBAR_TOOLTIP_CONTENT_CLASS}
+          >
+            <button
+              type="button"
+              onClick={onEndProjectClick}
+              className={cn(
+                workspaceTabButtonClass(false),
+                'bg-ds-bg-error-subtle-default hover:bg-ds-bg-status-error-subtle-hover active:bg-ds-bg-status-error-subtle-active',
+                folded && 'gap-0'
+              )}
+              aria-label={endProjectAriaLabel}
+            >
+              <Power
+                className="h-4 w-4 !text-ds-icon-error-default-default shrink-0"
+                aria-hidden
+              />
+              <motion.span
+                className="min-w-0 flex-1 overflow-hidden"
+                initial={false}
+                animate={{
+                  opacity: folded ? 0 : 1,
+                  maxWidth: folded ? 0 : 1600,
+                }}
+                transition={PROJECT_SIDEBAR_FOLD_SPRING}
+                aria-hidden={folded}
+              >
+                <span
+                  className={cn(
+                    WORKSPACE_TAB_LABEL_CLASS,
+                    'font-medium text-body-sm !text-ds-text-error-default-default'
+                  )}
+                >
+                  {endProjectLabel}
+                </span>
+              </motion.span>
+            </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..964631d3b
--- /dev/null
+++ b/src/components/ProjectPageSidebar/HeaderAction.tsx
@@ -0,0 +1,243 @@
+// ========= 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 {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { usePageTabStore } from '@/store/pageTabStore';
+import { motion } from 'framer-motion';
+import { PenLine, ScrollText } from 'lucide-react';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { PROJECT_SIDEBAR_FOLD_SPRING } from './constants';
+import { WORKSPACE_TAB_LABEL_CLASS, workspaceTabButtonClass } from './NavTab';
+
+const MEMORY_STORAGE_KEY = 'eigent-sidebar-instructions-memory-on';
+const INSTRUCTIONS_ACCORDION_STORAGE_KEY =
+  'eigent-sidebar-instructions-accordion-open';
+
+function readMemoryInitial(): boolean {
+  if (typeof window === 'undefined') return true;
+  const v = window.localStorage.getItem(MEMORY_STORAGE_KEY);
+  if (v === null) return true;
+  return v === 'true';
+}
+
+function readInstructionsAccordionPreference(): string | undefined {
+  if (typeof window === 'undefined') return 'instructions';
+  const v = window.localStorage.getItem(INSTRUCTIONS_ACCORDION_STORAGE_KEY);
+  if (v === null) return 'instructions';
+  return v === 'true' ? 'instructions' : undefined;
+}
+
+const accordionItemClass = cn(
+  'border-none rounded-xl transition-colors',
+  'data-[state=open]:bg-ds-bg-neutral-subtle-default'
+);
+
+const accordionTriggerClass = cn(
+  workspaceTabButtonClass(false),
+  'hover:no-underline',
+  'hover:bg-ds-bg-neutral-subtle-default',
+  'py-0 min-h-8',
+  '[&>svg:last-child]:text-ds-icon-neutral-muted-default [&>svg:last-child]:shrink-0'
+);
+
+/** Project sidebar: Instructions accordion (NavTab-aligned). */
+export function HeaderAction() {
+  const { t } = useTranslation();
+  const setActiveWorkspaceTab = usePageTabStore((s) => s.setActiveWorkspaceTab);
+  const requestWorkspaceChatFocus = usePageTabStore(
+    (s) => s.requestWorkspaceChatFocus
+  );
+  const projectSidebarFolded = usePageTabStore((s) => s.projectSidebarFolded);
+  const setProjectSidebarFolded = usePageTabStore(
+    (s) => s.setProjectSidebarFolded
+  );
+  const openInstructionsAfterExpandRef = useRef(false);
+  const [memoryOn, setMemoryOn] = useState(readMemoryInitial);
+  const [instructionsOpen, setInstructionsOpen] = useState<string | undefined>(
+    readInstructionsAccordionPreference
+  );
+
+  useLayoutEffect(() => {
+    if (projectSidebarFolded) {
+      setInstructionsOpen(undefined);
+    } else if (openInstructionsAfterExpandRef.current) {
+      openInstructionsAfterExpandRef.current = false;
+      setInstructionsOpen('instructions');
+    } else {
+      setInstructionsOpen(readInstructionsAccordionPreference());
+    }
+  }, [projectSidebarFolded]);
+
+  useEffect(() => {
+    window.localStorage.setItem(MEMORY_STORAGE_KEY, String(memoryOn));
+  }, [memoryOn]);
+
+  useEffect(() => {
+    if (projectSidebarFolded) return;
+    window.localStorage.setItem(
+      INSTRUCTIONS_ACCORDION_STORAGE_KEY,
+      instructionsOpen === 'instructions' ? 'true' : 'false'
+    );
+  }, [instructionsOpen, projectSidebarFolded]);
+
+  const handleImportWorkforceTemplate = useCallback(() => {
+    setActiveWorkspaceTab('workforce');
+  }, [setActiveWorkspaceTab]);
+
+  const handleEditInstructions = useCallback(() => {
+    requestWorkspaceChatFocus();
+  }, [requestWorkspaceChatFocus]);
+
+  const instructionsLabel = t('layout.instructions', {
+    defaultValue: 'Instructions',
+  });
+  const instructionsHint = t('layout.instructions-rules-tone', {
+    defaultValue: 'Rules & Tone',
+  });
+  const memoryLabel = t('layout.memory', { defaultValue: 'Memory' });
+  const memoryOnLabel = t('layout.memory-on', { defaultValue: 'On' });
+  const memoryOffLabel = t('layout.memory-off', { defaultValue: 'Off' });
+  const workforceSettingLabel = t('layout.workforce-setting', {
+    defaultValue: 'Workforce Setting',
+  });
+  const selectLabel = t('layout.select', { defaultValue: 'Select' });
+  const editInstructionsLabel = t('layout.edit-instructions', {
+    defaultValue: 'Edit instructions',
+  });
+
+  return (
+    <div className="min-w-0 flex items-stretch">
+      <div className="no-drag min-w-0 w-full overflow-hidden">
+        <Accordion
+          type="single"
+          collapsible
+          value={instructionsOpen ?? ''}
+          onValueChange={(v) => {
+            if (projectSidebarFolded) return;
+            const next = v || undefined;
+            setInstructionsOpen(next);
+          }}
+          className="w-full"
+        >
+          <AccordionItem value="instructions" className={accordionItemClass}>
+            <AccordionTrigger
+              className={cn(
+                accordionTriggerClass,
+                projectSidebarFolded && '[&>svg:last-child]:hidden'
+              )}
+              title={
+                projectSidebarFolded ? String(instructionsLabel) : undefined
+              }
+              onClick={(e) => {
+                if (!projectSidebarFolded) return;
+                openInstructionsAfterExpandRef.current = true;
+                setProjectSidebarFolded(false);
+                e.preventDefault();
+              }}
+            >
+              <span
+                className={cn(
+                  'min-w-0 flex flex-1 items-center overflow-hidden',
+                  projectSidebarFolded ? 'gap-0' : 'gap-3'
+                )}
+              >
+                <ScrollText
+                  className="h-4 w-4 text-ds-icon-neutral-muted-default shrink-0"
+                  aria-hidden
+                />
+                <motion.span
+                  className={cn(WORKSPACE_TAB_LABEL_CLASS, 'min-w-0 flex-1')}
+                  initial={false}
+                  animate={{
+                    opacity: projectSidebarFolded ? 0 : 1,
+                    maxWidth: projectSidebarFolded ? 0 : 1600,
+                  }}
+                  transition={PROJECT_SIDEBAR_FOLD_SPRING}
+                  aria-hidden={projectSidebarFolded}
+                >
+                  {instructionsLabel}
+                </motion.span>
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="px-3 py-3">
+              <div className="-mr-1 gap-3 pl-7 flex flex-col">
+                <div className="min-w-0 gap-2 rounded-lg hover:bg-ds-bg-neutral-subtle-default hover:ring-ds-bg-neutral-subtle-default hover:ring-offset-ds-bg-neutral-subtle-default flex items-center justify-between hover:ring-2 hover:ring-offset-2">
+                  <span className="min-w-0 text-body-sm font-medium text-ds-text-neutral-muted-default flex-1">
+                    {instructionsHint}
+                  </span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="xs"
+                    buttonContent="icon-only"
+                    className="no-drag shrink-0"
+                    aria-label={editInstructionsLabel}
+                    onClick={handleEditInstructions}
+                  >
+                    <PenLine className="h-4 w-4 shrink-0" aria-hidden />
+                  </Button>
+                </div>
+                <div className="min-w-0 gap-2 rounded-lg hover:bg-ds-bg-neutral-subtle-default hover:ring-ds-bg-neutral-subtle-default hover:ring-offset-ds-bg-neutral-subtle-default flex items-center justify-between hover:ring-2 hover:ring-offset-2">
+                  <span className="min-w-0 text-body-sm font-medium text-ds-text-neutral-muted-default">
+                    {memoryLabel}
+                  </span>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    size="xs"
+                    className="no-drag shrink-0"
+                    onClick={() => setMemoryOn((v) => !v)}
+                    aria-pressed={memoryOn}
+                    aria-label={`${memoryLabel}: ${memoryOn ? memoryOnLabel : memoryOffLabel}`}
+                  >
+                    {memoryOn ? memoryOnLabel : memoryOffLabel}
+                  </Button>
+                </div>
+                <div className="min-w-0 gap-2 rounded-lg hover:bg-ds-bg-neutral-subtle-default hover:ring-ds-bg-neutral-subtle-default hover:ring-offset-ds-bg-neutral-subtle-default flex items-center justify-between hover:ring-2 hover:ring-offset-2">
+                  <span className="min-w-0 text-body-sm font-medium text-ds-text-neutral-muted-default">
+                    {workforceSettingLabel}
+                  </span>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    size="xs"
+                    className="no-drag shrink-0"
+                    onClick={handleImportWorkforceTemplate}
+                    aria-label={`${workforceSettingLabel}: ${selectLabel}`}
+                  >
+                    {selectLabel}
+                  </Button>
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ProjectPageSidebar/NavList.tsx b/src/components/ProjectPageSidebar/NavList.tsx
new file mode 100644
index 000000000..54f7ff852
--- /dev/null
+++ b/src/components/ProjectPageSidebar/NavList.tsx
@@ -0,0 +1,147 @@
+// ========= 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 { TooltipSimple } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { LayoutGrid, Plus } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { SIDEBAR_TOOLTIP_CONTENT_CLASS } from './constants';
+import { NavListSessionRows, type NavListSession } from './NavListSessionRows';
+import { NavTab, workspaceTabButtonClass } from './NavTab';
+
+export {
+  NAV_LIST_SESSIONS_RECENT_MAX,
+  NavListSessionRows,
+  type NavListSession,
+} from './NavListSessionRows';
+
+export interface NavListProps {
+  sessions: NavListSession[];
+  activeSessionId?: string | null;
+  onSessionClick?: (sessionId: string) => void;
+  onDeleteSession?: (sessionId: string) => void;
+  /** Top row: workspace tab — switches to workforce view. */
+  workspaceActive: boolean;
+  onWorkspaceClick: () => void;
+  /** Trailing + control (e.g. create task + focus session). */
+  onNewSession: () => void;
+  /** Icon-only rail: match other sidebar `NavTab`s. */
+  folded: boolean;
+  className?: string;
+}
+
+/** Workspace row (split: tab + new session) and a flat scrollable session column. */
+export function NavList({
+  sessions,
+  activeSessionId,
+  onSessionClick,
+  onDeleteSession,
+  workspaceActive,
+  onWorkspaceClick,
+  onNewSession,
+  folded,
+  className,
+}: NavListProps) {
+  const { t } = useTranslation();
+  const workspaceLabel = t('triggers.workspace');
+
+  const newSessionLabel = t('layout.sessions-start-new', {
+    defaultValue: 'Start new session',
+  });
+
+  return (
+    <div
+      className={cn(
+        'min-h-0 min-w-0 flex w-full flex-col overflow-hidden',
+        className
+      )}
+    >
+      <div className="min-w-0 gap-2 flex w-full flex-col">
+        <NavTab
+          layout="split"
+          active={workspaceActive}
+          onClick={onWorkspaceClick}
+          leading={<LayoutGrid className="h-4 w-4 shrink-0" aria-hidden />}
+          label={workspaceLabel}
+          endAction={
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              buttonContent="icon-only"
+              className={cn(
+                'no-drag mr-1 rounded-xl hover:bg-ds-bg-neutral-strong-default shrink-0',
+                'focus-visible:ring-ds-border-neutral-default-default focus-visible:z-10 focus-visible:ring-2 focus-visible:outline-none'
+              )}
+              aria-label={newSessionLabel}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onNewSession();
+              }}
+            >
+              <Plus
+                className="h-4 w-4 text-ds-icon-neutral-muted-default"
+                aria-hidden
+              />
+            </Button>
+          }
+          tooltip={workspaceLabel}
+          tooltipEnabledWhenCollapsed={!folded}
+          folded={folded}
+          ariaLabel={workspaceLabel}
+          ariaCurrentPage={workspaceActive}
+        />
+
+        {folded ? (
+          <TooltipSimple
+            content={newSessionLabel}
+            side="right"
+            align="center"
+            enabled
+            className={SIDEBAR_TOOLTIP_CONTENT_CLASS}
+          >
+            <button
+              type="button"
+              onClick={onNewSession}
+              className={cn(workspaceTabButtonClass(false), 'gap-0 w-full')}
+              aria-label={newSessionLabel}
+            >
+              <Plus
+                className="h-4 w-4 text-ds-icon-neutral-muted-default shrink-0"
+                aria-hidden
+              />
+            </button>
+          </TooltipSimple>
+        ) : null}
+      </div>
+
+      <div
+        className={cn(
+          'm-0 min-h-0 min-w-0 gap-0.5 p-0 pb-1 flex flex-1 flex-col overflow-y-auto',
+          folded ? 'mt-0.5' : 'mt-1'
+        )}
+      >
+        <NavListSessionRows
+          sessions={sessions}
+          activeSessionId={activeSessionId}
+          onSessionClick={onSessionClick}
+          onDeleteSession={onDeleteSession}
+          folded={folded}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ProjectPageSidebar/NavListSessionRows.tsx b/src/components/ProjectPageSidebar/NavListSessionRows.tsx
new file mode 100644
index 000000000..154627163
--- /dev/null
+++ b/src/components/ProjectPageSidebar/NavListSessionRows.tsx
@@ -0,0 +1,217 @@
+// ========= 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 {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import type { SessionNavLeadPresentation } from '@/lib/sessionNavLead';
+import { cn } from '@/lib/utils';
+import { MoreHorizontal } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { SIDEBAR_TOOLTIP_CONTENT_CLASS } from './constants';
+import { workspaceTabButtonClass } from './NavTab';
+
+export interface NavListSession {
+  id: string;
+  title: string;
+  /** Leading icon + color from `getSessionNavLeadPresentation`. */
+  sessionLead: SessionNavLeadPresentation;
+  /** e.g. relative time, shown before the row menu. */
+  trailing?: string;
+}
+
+export interface NavListSessionRowsProps {
+  sessions: NavListSession[];
+  activeSessionId?: string | null;
+  onSessionClick?: (sessionId: string) => void;
+  onDeleteSession?: (sessionId: string) => void;
+  /** Icon rail: one icon per row. */
+  folded: boolean;
+  /** If set, only the first N sessions are rendered. */
+  maxItems?: number;
+  /**
+   * Main-panel session lists (workspace recent, all-sessions) use the default
+   * neutral hover fill; sidebar keeps the subtle fill.
+   */
+  panelListHover?: boolean;
+  /** When false, hide the trailing ⋯ row menu (workspace recent: time only). */
+  showRowMenu?: boolean;
+}
+
+/**
+ * Renders the same session rows as the project sidebar; cap with `maxItems` for
+ * recency-prefixed UIs.
+ */
+export const NAV_LIST_SESSIONS_RECENT_MAX = 5;
+
+export function NavListSessionRows({
+  sessions,
+  activeSessionId,
+  onSessionClick,
+  onDeleteSession,
+  folded,
+  maxItems,
+  panelListHover = false,
+  showRowMenu = true,
+}: NavListSessionRowsProps) {
+  const { t } = useTranslation();
+  const deleteLabel = t('layout.sessions-delete-session', {
+    defaultValue: 'Delete session',
+  });
+  const sessionMenuAria = t('layout.sessions-session-menu', {
+    defaultValue: 'Session options',
+  });
+  const list = maxItems != null ? sessions.slice(0, maxItems) : sessions;
+
+  return (
+    <>
+      {list.map((session) => {
+        const active = activeSessionId === session.id;
+        const LeadIcon = session.sessionLead.Icon;
+        const leadClassName = cn(
+          'h-4 w-4 shrink-0',
+          session.sessionLead.iconClassName,
+          session.sessionLead.spin && 'animate-spin'
+        );
+        if (folded) {
+          return (
+            <div key={session.id} className="min-w-0">
+              <TooltipSimple
+                content={session.title}
+                side="right"
+                align="center"
+                enabled
+                className={SIDEBAR_TOOLTIP_CONTENT_CLASS}
+              >
+                <button
+                  type="button"
+                  onClick={() => onSessionClick?.(session.id)}
+                  className={cn(
+                    workspaceTabButtonClass(active),
+                    'gap-0 min-w-0 w-full'
+                  )}
+                  aria-label={session.title}
+                  aria-current={active ? 'true' : undefined}
+                >
+                  <LeadIcon className={leadClassName} aria-hidden />
+                </button>
+              </TooltipSimple>
+            </div>
+          );
+        }
+        return (
+          <div key={session.id} className="min-w-0">
+            <div
+              className={cn(
+                'group/session-item min-w-0 h-8 gap-1 rounded-xl pl-3 relative flex w-full items-center overflow-hidden',
+                showRowMenu ? 'pr-1' : 'pr-3',
+                'transition-colors duration-150',
+                active
+                  ? panelListHover
+                    ? 'bg-ds-bg-neutral-muted-default hover:bg-ds-bg-neutral-default-default'
+                    : 'bg-ds-bg-neutral-subtle-default hover:bg-ds-bg-neutral-subtle-default'
+                  : !panelListHover
+                    ? 'hover:bg-ds-bg-neutral-subtle-default bg-transparent'
+                    : 'hover:bg-ds-bg-neutral-default-default bg-transparent'
+              )}
+            >
+              <button
+                type="button"
+                onClick={() => onSessionClick?.(session.id)}
+                className={cn(
+                  'no-drag min-h-0 min-w-0 gap-3 py-1 px-0 relative z-0 flex flex-1 items-center overflow-hidden text-left outline-none',
+                  'focus-visible:ring-ds-ring-neutral-subtle-default focus-visible:ring-2 focus-visible:outline-none'
+                )}
+              >
+                <LeadIcon className={leadClassName} aria-hidden />
+                <span
+                  className="min-w-0 text-body-sm font-medium text-ds-text-neutral-muted-default flex-1 truncate"
+                  title={session.title}
+                >
+                  {session.title}
+                </span>
+                {session.trailing ? (
+                  <span className="text-ds-text-neutral-muted-default text-body-xs pl-1 shrink-0 tabular-nums">
+                    {session.trailing}
+                  </span>
+                ) : null}
+              </button>
+
+              {showRowMenu ? (
+                <>
+                  <span
+                    className={cn(
+                      'top-0 bottom-0 right-7 w-14 pointer-events-none absolute z-[1] bg-gradient-to-l to-transparent',
+                      active
+                        ? panelListHover
+                          ? 'from-ds-bg-neutral-muted-default group-hover/session-item:from-ds-bg-neutral-default-default'
+                          : 'from-ds-bg-neutral-subtle-default'
+                        : [
+                            'from-transparent',
+                            panelListHover
+                              ? 'group-hover/session-item:from-ds-bg-neutral-default-default'
+                              : 'group-hover/session-item:from-ds-bg-neutral-subtle-default',
+                          ]
+                    )}
+                    aria-hidden
+                  />
+
+                  <div className="relative z-[2] shrink-0">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <button
+                          type="button"
+                          className={cn(
+                            'no-drag h-7 w-7 rounded-lg text-ds-icon-neutral-muted-default flex shrink-0 items-center justify-center transition-opacity duration-150 outline-none',
+                            active
+                              ? panelListHover
+                                ? 'bg-transparent opacity-100'
+                                : 'bg-ds-bg-neutral-subtle-default hover:bg-ds-bg-neutral-subtle-default opacity-100'
+                              : [
+                                  'md:opacity-0 bg-transparent opacity-100',
+                                  'md:group-hover/session-item:opacity-100',
+                                  'md:group-focus-within/session-item:opacity-100',
+                                  'data-[state=open]:opacity-100',
+                                ],
+                            'focus-visible:ring-ds-ring-neutral-subtle-default focus-visible:ring-2 focus-visible:outline-none'
+                          )}
+                          aria-label={sessionMenuAria}
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <MoreHorizontal className="h-4 w-4" aria-hidden />
+                        </button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end" className="min-w-[9rem]">
+                        <DropdownMenuItem
+                          className="text-ds-text-error-default-default focus:text-ds-text-error-default-default cursor-pointer"
+                          onClick={() => onDeleteSession?.(session.id)}
+                        >
+                          {deleteLabel}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </>
+              ) : null}
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+}
diff --git a/src/components/ProjectPageSidebar/NavTab.tsx b/src/components/ProjectPageSidebar/NavTab.tsx
new file mode 100644
index 000000000..bac6dbec0
--- /dev/null
+++ b/src/components/ProjectPageSidebar/NavTab.tsx
@@ -0,0 +1,333 @@
+// ========= 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 { motion } from 'framer-motion';
+import { RefreshCw } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+import {
+  PROJECT_SIDEBAR_FOLD_SPRING,
+  SIDEBAR_TOOLTIP_CONTENT_CLASS,
+} from './constants';
+
+/** 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 ease-in-out flex items-center justify-start gap-3 px-3 text-left outline-none overflow-hidden transition-colors duration-200',
+    'text-ds-text-neutral-muted-default',
+    'hover:bg-ds-bg-neutral-subtle-default focus-visible:ring-ds-ring-neutral-subtle-default focus-visible:ring-2 focus-visible:outline-none',
+    active && 'bg-ds-bg-neutral-subtle-default'
+  );
+}
+
+export const WORKSPACE_TAB_LABEL_CLASS =
+  'min-w-0 flex-1 truncate text-ds-text-neutral-muted-default text-body-sm font-medium';
+
+const SPLIT_MAIN_BUTTON_CLASS =
+  'no-drag min-h-8 min-w-0 gap-3 rounded-xl py-0 px-3 relative flex flex-1 items-center text-left outline-none text-ds-text-neutral-muted-default focus-visible:ring-ds-ring-neutral-subtle-default 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-ds-icon-neutral-muted-default';
+    case 'connecting':
+      return 'text-ds-icon-status-warning-default animate-pulse';
+    case 'unhealthy':
+      return 'text-ds-icon-status-error-default';
+    case 'disconnected':
+    default:
+      return 'text-ds-icon-neutral-muted-default';
+  }
+}
+
+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 h-8 w-8 rounded-xl text-ds-icon-neutral-muted-default hover:bg-ds-bg-neutral-subtle-default flex shrink-0 items-center justify-center transition-colors outline-none',
+            'focus-visible:ring-ds-ring-neutral-subtle-default 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-ds-text-neutral-default-default">
+            {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;
+  /** Split only: extra control after `suffix`; shown when the tab row is hovered (or focused within). */
+  endAction?: ReactNode;
+  tooltip: string;
+  /** When true, tooltips are hidden (labels are visible in the fixed-width sidebar). */
+  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;
+  /** Icon-only rail: fade/shrink label, trailing, and dot; keep leading icon fixed. */
+  folded?: boolean;
+}
+
+function tabMainInner({
+  leading,
+  label,
+  trailing,
+  showNotificationDot,
+  notificationDotClassName,
+  notificationDotTone = 'default',
+  folded = false,
+}: Pick<
+  NavTabProps,
+  | 'leading'
+  | 'label'
+  | 'trailing'
+  | 'showNotificationDot'
+  | 'notificationDotClassName'
+  | 'notificationDotTone'
+  | 'folded'
+>): ReactNode {
+  return (
+    <>
+      {leading}
+      <motion.div
+        className="min-w-0 gap-3 flex flex-1 items-center overflow-hidden"
+        initial={false}
+        animate={{
+          opacity: folded ? 0 : 1,
+          maxWidth: folded ? 0 : 1600,
+        }}
+        transition={PROJECT_SIDEBAR_FOLD_SPRING}
+        aria-hidden={folded}
+        style={{ pointerEvents: folded ? 'none' : undefined }}
+      >
+        <span className={WORKSPACE_TAB_LABEL_CLASS}>{label}</span>
+        {trailing}
+        {showNotificationDot && (
+          <span
+            className={cn(
+              'shrink-0 rounded-full transition-all duration-300',
+              notificationDotTone === 'attention'
+                ? 'bg-ds-text-status-error-strong-default'
+                : 'bg-ds-bg-brand-default-default',
+              notificationDotClassName
+            )}
+            aria-hidden
+          />
+        )}
+      </motion.div>
+    </>
+  );
+}
+
+/**
+ * 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,
+  tooltip,
+  tooltipEnabledWhenCollapsed = false,
+  ariaLabel,
+  ariaCurrentPage,
+  className,
+  mainButtonClassName,
+  folded = false,
+  endAction,
+}: NavTabProps) {
+  const inner = tabMainInner({
+    leading,
+    label,
+    trailing,
+    showNotificationDot,
+    notificationDotClassName,
+    notificationDotTone,
+    folded,
+  });
+
+  const tooltipEnabled = folded || !tooltipEnabledWhenCollapsed;
+
+  if (layout === 'split') {
+    return (
+      <TooltipSimple
+        content={tooltip}
+        side="right"
+        align="center"
+        enabled={tooltipEnabled}
+        className={SIDEBAR_TOOLTIP_CONTENT_CLASS}
+      >
+        <div
+          className={cn(
+            workspaceTabButtonClass(active),
+            SPLIT_OUTER_EXTRA_CLASS,
+            'group',
+            className
+          )}
+        >
+          <button
+            type="button"
+            onClick={onClick}
+            className={cn(
+              SPLIT_MAIN_BUTTON_CLASS,
+              folded && '!gap-0',
+              mainButtonClassName
+            )}
+            aria-label={ariaLabel}
+            aria-current={ariaCurrentPage ? 'page' : undefined}
+          >
+            {inner}
+          </button>
+          {suffix || endAction ? (
+            <motion.div
+              className="min-h-8 min-w-0 flex items-stretch overflow-hidden"
+              initial={false}
+              animate={{
+                opacity: folded ? 0 : 1,
+                maxWidth: folded ? 0 : 160,
+              }}
+              transition={PROJECT_SIDEBAR_FOLD_SPRING}
+              aria-hidden={folded}
+              style={{ pointerEvents: folded ? 'none' : undefined }}
+            >
+              {suffix}
+              {endAction ? (
+                <div
+                  className={cn(
+                    'max-w-0 ease-out flex shrink-0 items-center justify-end overflow-hidden opacity-0 transition-[max-width,opacity] duration-150',
+                    'group-hover:max-w-10 pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100',
+                    'focus-within:max-w-10 focus-within:pointer-events-auto focus-within:opacity-100'
+                  )}
+                >
+                  {endAction}
+                </div>
+              ) : null}
+            </motion.div>
+          ) : null}
+        </div>
+      </TooltipSimple>
+    );
+  }
+
+  return (
+    <TooltipSimple
+      content={tooltip}
+      side="right"
+      align="center"
+      enabled={tooltipEnabled}
+      className={SIDEBAR_TOOLTIP_CONTENT_CLASS}
+    >
+      <button
+        type="button"
+        onClick={onClick}
+        className={cn(
+          workspaceTabButtonClass(active),
+          folded && 'gap-0',
+          className
+        )}
+        aria-label={ariaLabel}
+        aria-current={ariaCurrentPage ? 'page' : undefined}
+      >
+        {inner}
+      </button>
+    </TooltipSimple>
+  );
+}
diff --git a/src/components/ProjectPageSidebar/constants.ts b/src/components/ProjectPageSidebar/constants.ts
new file mode 100644
index 000000000..06de9611d
--- /dev/null
+++ b/src/components/ProjectPageSidebar/constants.ts
@@ -0,0 +1,33 @@
+// ========= 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 { Transition } from 'framer-motion';
+
+/** Keep in sync with `HOME_MAIN_LAYOUT_SPRING` in `pages/Home.tsx`. */
+export const PROJECT_SIDEBAR_FOLD_SPRING: Transition = {
+  type: 'spring',
+  stiffness: 380,
+  damping: 38,
+  mass: 0.85,
+};
+
+/**
+ * Icon rail width: `px-3` horizontal padding (12+12) + 16px icon = 40px.
+ * Matches workspace tab leading column (`NavTab` / `workspaceTabButtonClass`).
+ */
+export const PROJECT_SIDEBAR_RAIL_WIDTH_PX = 40;
+
+/** Radix tooltip content: cap width so long labels (e.g. session titles) wrap. */
+export const SIDEBAR_TOOLTIP_CONTENT_CLASS =
+  'max-w-[400px] break-words whitespace-normal';
diff --git a/src/components/ProjectPageSidebar/index.tsx b/src/components/ProjectPageSidebar/index.tsx
new file mode 100644
index 000000000..6fad58a8b
--- /dev/null
+++ b/src/components/ProjectPageSidebar/index.tsx
@@ -0,0 +1,438 @@
+// ========= 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 { fetchDelete, fetchPut, proxyFetchDelete } from '@/api/http';
+import EndNoticeDialog from '@/components/Dialog/EndNotice';
+import { GlobalSearchDialog } from '@/components/GlobalSearch';
+import { Button } from '@/components/ui/button';
+import { useHost } from '@/host';
+import { getSessionNavLeadPresentation } from '@/lib/sessionNavLead';
+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 { useTriggerStore } from '@/store/triggerStore';
+import { ChatTaskStatus } from '@/types/constants';
+import { Inbox, Plus, Zap, ZapOff } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import { HeaderAction } from './HeaderAction';
+import { NavList } from './NavList';
+import {
+  NavTab,
+  NavTabReconnectSuffix,
+  triggerListenerLeadIconClass,
+} from './NavTab';
+
+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;
+}
+
+export interface ProjectPageSidebarProps {
+  chatStore: ChatStore;
+  className?: string;
+}
+
+export default function ProjectPageSidebar({
+  chatStore,
+  className,
+}: ProjectPageSidebarProps) {
+  const activeWorkspaceTab = usePageTabStore((s) => s.activeWorkspaceTab);
+  const setActiveWorkspaceTab = usePageTabStore((s) => s.setActiveWorkspaceTab);
+  const requestOpenTriggerAddDialog = usePageTabStore(
+    (s) => s.requestOpenTriggerAddDialog
+  );
+  const projectSidebarFolded = usePageTabStore((s) => s.projectSidebarFolded);
+  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 { t } = useTranslation();
+  const navigate = useNavigate();
+  const [globalSearchOpen, setGlobalSearchOpen] = useState(false);
+  const [endDialogOpen, setEndDialogOpen] = useState(false);
+  const [endProjectLoading, setEndProjectLoading] = useState(false);
+
+  const triggersTabTooltip = 'Scheduled';
+
+  const triggersTabAriaLabel = useMemo(() => {
+    const base = 'Scheduled';
+    if (triggersListenerConnected) return base;
+    if (wsConnectionStatus === 'connecting') {
+      return `${base}, ${t('layout.triggers-connecting')}`;
+    }
+    return `${base}, ${t('layout.triggers-disconnected')}`;
+  }, [t, triggersListenerConnected, wsConnectionStatus]);
+
+  const email = useAuthStore((s) => s.email);
+  const host = useHost();
+  const electronAPI = host?.electronAPI;
+
+  const [resolvedDefaultFolderPath, setResolvedDefaultFolderPath] = useState<
+    string | null
+  >(null);
+
+  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(() => {
+    let cancelled = false;
+    if (!email || !activeProjectId) {
+      setResolvedDefaultFolderPath(null);
+      return;
+    }
+    if (typeof electronAPI?.getProjectFolderPath !== 'function') {
+      setResolvedDefaultFolderPath(null);
+      return;
+    }
+    void electronAPI
+      .getProjectFolderPath(email, activeProjectId)
+      .then((p: string) => {
+        if (!cancelled) setResolvedDefaultFolderPath(p || null);
+      })
+      .catch(() => {
+        if (!cancelled) setResolvedDefaultFolderPath(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [email, activeProjectId, electronAPI]);
+
+  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 handleEndProject = async () => {
+    const taskId = chatStore.activeTaskId;
+    const projectId = projectStore.activeProjectId;
+
+    if (!taskId) {
+      toast.error(t('layout.no-active-project-to-end'));
+      return;
+    }
+
+    const historyId = projectId ? projectStore.getHistoryId(projectId) : null;
+
+    setEndProjectLoading(true);
+    try {
+      const task = chatStore.tasks[taskId];
+
+      if (task && task.status === ChatTaskStatus.RUNNING) {
+        await fetchPut(`/task/${taskId}/take-control`, {
+          action: 'stop',
+        });
+      }
+
+      try {
+        await fetchDelete(`/chat/${projectId}`);
+      } catch {
+        /* Backend may already have removed the chat */
+      }
+
+      if (historyId && task.status !== ChatTaskStatus.FINISHED) {
+        try {
+          await proxyFetchDelete(`/api/v1/chat/history/${historyId}`);
+          chatStore.removeTask(taskId);
+        } catch {
+          /* History may already be deleted */
+        }
+      } else {
+        console.warn(
+          'No historyId found for project or task finished, skipping history deletion'
+        );
+      }
+
+      projectStore.createProject('new project');
+      navigate('/', { replace: true });
+
+      toast.success(t('layout.project-ended-successfully'), {
+        closeButton: true,
+      });
+    } catch (error) {
+      console.error('Failed to end project:', error);
+      toast.error(t('layout.failed-to-end-project'), {
+        closeButton: true,
+      });
+    } finally {
+      setEndProjectLoading(false);
+      setEndDialogOpen(false);
+    }
+  };
+
+  const activeTask = chatStore.activeTaskId
+    ? chatStore.tasks[chatStore.activeTaskId as string]
+    : undefined;
+  const showEndProject = Boolean(
+    chatStore.activeTaskId &&
+    activeTask &&
+    ((activeTask.messages?.length || 0) > 0 ||
+      activeTask.hasMessages ||
+      activeTask.status !== ChatTaskStatus.PENDING)
+  );
+
+  const navSessions = useMemo(
+    () =>
+      Object.entries(chatStore.tasks)
+        .filter(([, task]) => {
+          const hasStarted =
+            (task.messages?.length || 0) > 0 ||
+            task.hasMessages ||
+            task.status !== ChatTaskStatus.PENDING;
+          return hasStarted;
+        })
+        .map(([id, task]) => ({
+          id,
+          title:
+            task.summaryTask?.trim() ||
+            t('layout.sessions-untitled', { defaultValue: 'Untitled session' }),
+          sessionLead: getSessionNavLeadPresentation(task),
+        })),
+    [chatStore.tasks, t]
+  );
+
+  const handleDeleteSession = useCallback(
+    (sessionId: string) => {
+      if (!window.confirm(t('layout.delete-task-confirmation'))) return;
+      const otherIds = Object.keys(chatStore.tasks).filter(
+        (id) => id !== sessionId
+      );
+      const wasActive = chatStore.activeTaskId === sessionId;
+      chatStore.removeTask(sessionId);
+      if (wasActive) {
+        if (otherIds.length > 0) {
+          chatStore.setActiveTaskId(otherIds[0]);
+        } else {
+          chatStore.create();
+        }
+      }
+    },
+    [chatStore, t]
+  );
+
+  const handleNewSession = useCallback(() => {
+    chatStore.create();
+    setActiveWorkspaceTab('session');
+  }, [chatStore, setActiveWorkspaceTab]);
+
+  return (
+    <>
+      <GlobalSearchDialog
+        open={globalSearchOpen}
+        onOpenChange={setGlobalSearchOpen}
+      />
+
+      <aside
+        className={cn(
+          'min-h-0 min-w-0 py-1.5 box-border flex h-full w-full shrink-0 flex-col items-start overflow-hidden',
+          className
+        )}
+      >
+        <div className="min-h-0 min-w-0 flex h-full w-full max-w-full flex-col overflow-x-hidden">
+          <div className="min-h-0 min-w-0 flex flex-1 flex-col overflow-hidden">
+            <div className="gap-2 flex w-full shrink-0 flex-col">
+              <HeaderAction />
+
+              <div className="gap-2 min-w-0 flex w-full flex-col">
+                <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 shrink-0" aria-hidden />
+                      {folderTabHasUnviewedFiles ? (
+                        <span
+                          className="-right-1 -top-1 h-2 w-2 bg-ds-text-error-default-default ease-in-out absolute shrink-0 rounded-full"
+                          aria-hidden
+                        />
+                      ) : null}
+                    </span>
+                  }
+                  label="Context"
+                  trailing={
+                    <span
+                      className="rounded-md px-1.5 font-medium leading-tight bg-ds-bg-neutral-default-default text-ds-text-neutral-subtle-default text-body-xs py-0.5 max-w-[5.5rem] shrink-0 truncate"
+                      title={
+                        customFolderPath &&
+                        folderSettingTagLabel !== t('layout.default')
+                          ? customFolderPath
+                          : (resolvedDefaultFolderPath ?? undefined)
+                      }
+                    >
+                      {folderSettingTagLabel}
+                    </span>
+                  }
+                  tooltip="Context"
+                  tooltipEnabledWhenCollapsed={!projectSidebarFolded}
+                  folded={projectSidebarFolded}
+                  ariaLabel={`Context, ${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="Scheduled"
+                  trailing={
+                    showTriggersDisconnectedTag ? (
+                      <span className="rounded-md px-1.5 font-medium leading-tight bg-ds-bg-neutral-default-default text-ds-text-status-error-strong-default max-w-[5.5rem] shrink-0 truncate py-px text-[10px]">
+                        {t('layout.triggers-disconnected')}
+                      </span>
+                    ) : undefined
+                  }
+                  showNotificationDot={unviewedTabs.has('triggers')}
+                  notificationDotTone="attention"
+                  notificationDotClassName="h-2 w-2"
+                  suffix={
+                    wsConnectionStatus !== 'connected' ? (
+                      <NavTabReconnectSuffix
+                        wsConnectionStatus={wsConnectionStatus}
+                        reconnectHint={t('layout.triggers-reconnect-hint')}
+                        reconnectButtonLabel={t(
+                          'layout.triggers-listener-reconnect'
+                        )}
+                        onReconnect={triggerReconnect}
+                      />
+                    ) : undefined
+                  }
+                  endAction={
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      buttonContent="icon-only"
+                      className={cn(
+                        'no-drag mr-1 rounded-xl hover:bg-ds-bg-neutral-strong-default shrink-0',
+                        'focus-visible:ring-ds-border-neutral-default-default focus-visible:z-10 focus-visible:ring-2 focus-visible:outline-none'
+                      )}
+                      aria-label={t('triggers.add-trigger')}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        requestOpenTriggerAddDialog();
+                      }}
+                    >
+                      <Plus
+                        className="h-4 w-4 text-ds-icon-neutral-muted-default"
+                        aria-hidden
+                      />
+                    </Button>
+                  }
+                  tooltip={triggersTabTooltip}
+                  tooltipEnabledWhenCollapsed={!projectSidebarFolded}
+                  folded={projectSidebarFolded}
+                  ariaLabel={triggersTabAriaLabel}
+                  ariaCurrentPage={activeWorkspaceTab === 'triggers'}
+                />
+              </div>
+            </div>
+
+            <div className="min-h-0 min-w-0 flex flex-1 flex-col overflow-hidden">
+              <NavList
+                className={cn(
+                  'min-h-0 flex flex-1 flex-col',
+                  projectSidebarFolded ? 'mt-2' : 'mt-6'
+                )}
+                sessions={navSessions}
+                activeSessionId={
+                  activeWorkspaceTab === 'session'
+                    ? chatStore.activeTaskId
+                    : null
+                }
+                onSessionClick={(id) => {
+                  chatStore.setActiveTaskId(id);
+                  setActiveWorkspaceTab('session');
+                }}
+                onDeleteSession={handleDeleteSession}
+                workspaceActive={activeWorkspaceTab === 'workforce'}
+                onWorkspaceClick={() => setActiveWorkspaceTab('workforce')}
+                onNewSession={handleNewSession}
+                folded={projectSidebarFolded}
+              />
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <EndNoticeDialog
+        open={endDialogOpen}
+        onOpenChange={setEndDialogOpen}
+        onConfirm={handleEndProject}
+        loading={endProjectLoading}
+      />
+    </>
+  );
+}
diff --git a/src/components/Session/HeaderBox/ChatTimeline.tsx b/src/components/Session/HeaderBox/ChatTimeline.tsx
new file mode 100644
index 000000000..a0402cc9b
--- /dev/null
+++ b/src/components/Session/HeaderBox/ChatTimeline.tsx
@@ -0,0 +1,253 @@
+// ========= 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-ds-bg-splitting-subtle-default hover:brightness-[0.98]',
+  success: 'bg-ds-bg-completed-subtle-default hover:brightness-[0.98]',
+  caution: 'bg-ds-bg-error-subtle-default hover:brightness-[0.98]',
+  idle: 'bg-transparent hover:bg-ds-bg-neutral-default-hover',
+} 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(
+        'min-w-0 text-ds-text-neutral-muted-default 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 (session chrome `useState` should match). */
+export const CHAT_TIMELINE_DEFAULT_COLLAPSED = true;
+
+/** Below this chat column width, the timeline uses a header dropdown instead of the left rail. */
+export const CHAT_TIMELINE_BREAKPOINT_PX = 600;
+
+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="min-w-0 text-xs font-semibold text-ds-text-neutral-muted-default 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="px-3 text-xs text-ds-text-neutral-muted-default 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/Session/HeaderBox/index.tsx b/src/components/Session/HeaderBox/index.tsx
new file mode 100644
index 000000000..6afba0f76
--- /dev/null
+++ b/src/components/Session/HeaderBox/index.tsx
@@ -0,0 +1,74 @@
+// ========= 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 tokenDarkIcon from '@/assets/token-dark.svg';
+import tokenLightIcon from '@/assets/token-light.svg';
+import { AnimatedTokenNumber } from '@/components/ChatBox/MessageItem/TokenUtils';
+import { Button } from '@/components/ui/button';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import { useAuthStore } from '@/store/authStore';
+import { usePageTabStore } from '@/store/pageTabStore';
+import { ArrowLeft } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+export interface HeaderBoxProps {
+  /** Total token count for the current project */
+  totalTokens?: number;
+  /** Optional extra class names for the outer container */
+  className?: string;
+}
+
+export function HeaderBox({ totalTokens = 0, className }: HeaderBoxProps) {
+  const { t } = useTranslation();
+  const { appearance } = useAuthStore();
+  const setActiveWorkspaceTab = usePageTabStore((s) => s.setActiveWorkspaceTab);
+  const tokenIcon = appearance === 'dark' ? tokenDarkIcon : tokenLightIcon;
+  const backToWorkspaceTooltip = t('layout.back-to-workspace-tooltip', {
+    defaultValue: 'Back to workspace',
+  });
+
+  return (
+    <div
+      className={`px-3 flex h-[44px] w-full flex-row items-center justify-between ${className || ''}`}
+    >
+      {/* Left: return to project workspace */}
+      <div className="gap-2 flex items-center">
+        <TooltipSimple content={backToWorkspaceTooltip}>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            buttonContent="icon-only"
+            onClick={() => setActiveWorkspaceTab('workforce')}
+            className="no-drag text-ds-text-neutral-muted-default hover:bg-ds-bg-neutral-strong-default shrink-0"
+            aria-label={backToWorkspaceTooltip}
+          >
+            <ArrowLeft className="h-4 w-4" aria-hidden />
+          </Button>
+        </TooltipSimple>
+      </div>
+
+      {/* Right: project total token count */}
+      <div className="gap-2 text-ds-text-neutral-muted-default 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>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Session/SessionGroup.tsx b/src/components/Session/SessionGroup.tsx
new file mode 100644
index 000000000..7d0bb022f
--- /dev/null
+++ b/src/components/Session/SessionGroup.tsx
@@ -0,0 +1,123 @@
+// ========= 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 {
+  NavListSessionRows,
+  type NavListSession,
+} from '@/components/ProjectPageSidebar/NavList';
+import { Button } from '@/components/ui/button';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import { taskIdToCreatedMs } from '@/lib/chatTaskIdTime';
+import { getSessionNavLeadPresentation } from '@/lib/sessionNavLead';
+import { cn } from '@/lib/utils';
+import type { ChatStore } from '@/store/chatStore';
+import { usePageTabStore } from '@/store/pageTabStore';
+import { ChatTaskStatus } from '@/types/constants';
+import { ArrowLeft } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export { default as SessionWorkspace } from '.';
+
+type SessionsProps = {
+  className?: string;
+  tasks: ChatStore['tasks'];
+  activeSessionId?: string | null;
+  onSelectSession: (sessionId: string) => void;
+  onDeleteSession: (sessionId: string) => void;
+};
+
+export default function Sessions({
+  className,
+  tasks,
+  activeSessionId,
+  onSelectSession,
+  onDeleteSession,
+}: SessionsProps) {
+  const { t } = useTranslation();
+  const setActiveWorkspaceTab = usePageTabStore((s) => s.setActiveWorkspaceTab);
+  const backToWorkspaceTooltip = t('layout.back-to-workspace-tooltip', {
+    defaultValue: 'Back to workspace',
+  });
+
+  const sessions: NavListSession[] = useMemo(() => {
+    const entries = Object.entries(tasks)
+      .filter(([, task]) => {
+        const hasStarted =
+          (task.messages?.length || 0) > 0 ||
+          task.hasMessages ||
+          task.status !== ChatTaskStatus.PENDING;
+        return hasStarted;
+      })
+      .map(([id, task]) => ({
+        id,
+        title:
+          task.summaryTask?.trim() ||
+          t('layout.sessions-untitled', { defaultValue: 'Untitled session' }),
+        sessionLead: getSessionNavLeadPresentation(task),
+      }));
+    entries.sort((a, b) => taskIdToCreatedMs(b.id) - taskIdToCreatedMs(a.id));
+    return entries;
+  }, [tasks, t]);
+
+  return (
+    <div
+      className={cn(
+        'min-h-0 min-w-0 flex h-full w-full flex-col overflow-hidden',
+        className
+      )}
+    >
+      <div className="gap-2 px-2 py-2 border-ds-border-neutral-subtle-default flex w-full shrink-0 items-center border-x-0 border-t-0 border-b-1 border-solid">
+        <TooltipSimple content={backToWorkspaceTooltip}>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            buttonContent="icon-only"
+            onClick={() => setActiveWorkspaceTab('workforce')}
+            className="no-drag text-ds-text-neutral-muted-default hover:bg-ds-bg-neutral-strong-default shrink-0"
+            aria-label={backToWorkspaceTooltip}
+          >
+            <ArrowLeft className="h-4 w-4" aria-hidden />
+          </Button>
+        </TooltipSimple>
+        <div className="text-ds-text-neutral-default-default min-w-0 gap-2 px-1 text-body-md font-bold flex flex-1 items-center">
+          <span className="truncate">
+            {t('layout.sessions-full-title', {
+              defaultValue: 'All sessions',
+            })}
+          </span>
+        </div>
+      </div>
+      <div className="m-0 min-h-0 gap-0.5 p-2 mx-auto flex w-full max-w-[800px] flex-1 flex-col overflow-y-auto">
+        {sessions.length === 0 ? (
+          <p className="text-ds-text-neutral-muted-default m-0 px-3 py-6 text-body-sm text-center">
+            {t('layout.sessions-create-task-hint', {
+              defaultValue: 'Create a task to start a session',
+            })}
+          </p>
+        ) : (
+          <NavListSessionRows
+            sessions={sessions}
+            activeSessionId={activeSessionId}
+            onSessionClick={onSelectSession}
+            onDeleteSession={onDeleteSession}
+            folded={false}
+            panelListHover
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Session/SessionSidePanel.tsx b/src/components/Session/SessionSidePanel.tsx
new file mode 100644
index 000000000..2e50ad1c9
--- /dev/null
+++ b/src/components/Session/SessionSidePanel.tsx
@@ -0,0 +1,129 @@
+// ========= 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 { SessionSidePanelHeader } from '@/components/Session/SessionSidePanelHeader';
+import { SingleAgentSidePanel } from '@/components/Session/SingleAgent/SingleAgentSidePanel';
+import { WorkforceSidePanel } from '@/components/Session/Workforce/WorkforceSidePanel';
+import { WorkforceSidePanelHeaderEnd } from '@/components/Session/Workforce/WorkforceSidePanelHeaderEnd';
+import { SESSION_SIDE_PANEL_CONTENT_WIDTH_CLASS } from '@/components/Session/sessionSidePanelLayout';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { SessionMode, type SessionModeType } from '@/types/constants';
+import { ChevronLeft } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+export interface SessionSidePanelProps {
+  mode: SessionModeType;
+  workforcePanelKey: string;
+  hasAnyMessages: boolean;
+  isSidePanelVisible: boolean;
+  onToggleSidePanel: () => void;
+  isExpandedOverlayOpen: boolean;
+  onToggleExpandedOverlay: () => void;
+  onCloseExpandedOverlay: () => void;
+}
+
+export function SessionSidePanel({
+  mode,
+  workforcePanelKey,
+  hasAnyMessages,
+  isSidePanelVisible,
+  onToggleSidePanel,
+  isExpandedOverlayOpen,
+  onToggleExpandedOverlay,
+  onCloseExpandedOverlay,
+}: SessionSidePanelProps) {
+  const { t } = useTranslation();
+  const isFolded = !isSidePanelVisible;
+
+  const headerTitle =
+    mode === SessionMode.WORKFORCE
+      ? t('layout.aiWorkforce')
+      : t('layout.workspace-session-single-agent');
+
+  const expandFoldedTooltip =
+    mode === SessionMode.WORKFORCE
+      ? t('layout.show-workforce-panel', {
+          defaultValue: 'Show workforce panel',
+        })
+      : t('layout.show-side-panel', {
+          defaultValue: 'Show side panel',
+        });
+
+  return (
+    <div className="group min-h-0 relative h-full w-full overflow-hidden">
+      {/* Full logical width; outer #session-side-panel clips to 40px when folded */}
+      <div
+        className={cn(
+          'min-h-0 flex h-full flex-shrink-0 flex-col overflow-hidden',
+          SESSION_SIDE_PANEL_CONTENT_WIDTH_CLASS,
+          isFolded &&
+            'pointer-events-none opacity-40 transition-opacity duration-200 group-hover:opacity-80'
+        )}
+      >
+        <SessionSidePanelHeader
+          title={headerTitle}
+          mode={mode}
+          isSidePanelVisible={isSidePanelVisible}
+          onToggle={onToggleSidePanel}
+          end={
+            mode === SessionMode.WORKFORCE ? (
+              <WorkforceSidePanelHeaderEnd
+                isExpandedOverlayOpen={isExpandedOverlayOpen}
+                onToggleExpandedOverlay={onToggleExpandedOverlay}
+              />
+            ) : null
+          }
+        />
+
+        {mode === SessionMode.WORKFORCE ? (
+          <WorkforceSidePanel
+            workforcePanelKey={workforcePanelKey}
+            hasAnyMessages={hasAnyMessages}
+            isSidePanelVisible={isSidePanelVisible}
+            onToggleSidePanel={onToggleSidePanel}
+            isExpandedOverlayOpen={isExpandedOverlayOpen}
+            onToggleExpandedOverlay={onToggleExpandedOverlay}
+            onCloseExpandedOverlay={onCloseExpandedOverlay}
+          />
+        ) : (
+          <SingleAgentSidePanel />
+        )}
+      </div>
+
+      {isFolded && (
+        <TooltipSimple content={expandFoldedTooltip} side="left">
+          <button
+            type="button"
+            onClick={onToggleSidePanel}
+            aria-label={expandFoldedTooltip}
+            aria-expanded={isSidePanelVisible}
+            aria-controls="session-side-panel"
+            className={cn(
+              'focus-visible:ring-ds-border-neutral-strong-default inset-0 absolute z-20 flex items-center justify-center',
+              'p-0 cursor-pointer border-0 bg-transparent outline-none',
+              'focus-visible:ring-offset-ds-bg-neutral-default-default focus-visible:ring-2 focus-visible:ring-offset-1',
+              'text-ds-text-neutral-default-default'
+            )}
+          >
+            <ChevronLeft
+              className="h-4 w-4 pointer-events-none shrink-0"
+              aria-hidden
+            />
+          </button>
+        </TooltipSimple>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Session/SessionSidePanelFoldButton.tsx b/src/components/Session/SessionSidePanelFoldButton.tsx
new file mode 100644
index 000000000..518fa2198
--- /dev/null
+++ b/src/components/Session/SessionSidePanelFoldButton.tsx
@@ -0,0 +1,75 @@
+// ========= 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 { TooltipSimple } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import type { SessionModeType } from '@/types/constants';
+import { PanelRight, PanelRightClose } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+export interface SessionSidePanelFoldButtonProps {
+  sessionSidePanelMode: SessionModeType;
+  isSidePanelVisible: boolean;
+  onToggle: () => void;
+  className?: string;
+}
+
+export function SessionSidePanelFoldButton({
+  sessionSidePanelMode,
+  isSidePanelVisible,
+  onToggle,
+  className,
+}: SessionSidePanelFoldButtonProps) {
+  const { t } = useTranslation();
+  const sessionSidePanelTooltip =
+    sessionSidePanelMode === 'single-agent'
+      ? isSidePanelVisible
+        ? t('layout.hide-side-panel', {
+            defaultValue: 'Hide side panel',
+          })
+        : t('layout.show-side-panel', {
+            defaultValue: 'Show side panel',
+          })
+      : isSidePanelVisible
+        ? t('layout.hide-workforce-panel', {
+            defaultValue: 'Hide workforce panel',
+          })
+        : t('layout.show-workforce-panel');
+
+  return (
+    <TooltipSimple content={sessionSidePanelTooltip}>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        buttonContent="icon-only"
+        onClick={onToggle}
+        aria-expanded={isSidePanelVisible}
+        aria-controls="session-side-panel"
+        className={cn(
+          'no-drag text-ds-text-neutral-muted-default hover:bg-ds-bg-neutral-strong-default shrink-0',
+          className
+        )}
+        aria-label={sessionSidePanelTooltip}
+      >
+        {isSidePanelVisible ? (
+          <PanelRightClose className="h-4 w-4" aria-hidden />
+        ) : (
+          <PanelRight className="h-4 w-4" aria-hidden />
+        )}
+      </Button>
+    </TooltipSimple>
+  );
+}
diff --git a/src/components/Session/SessionSidePanelHeader.tsx b/src/components/Session/SessionSidePanelHeader.tsx
new file mode 100644
index 000000000..1b6c64ed0
--- /dev/null
+++ b/src/components/Session/SessionSidePanelHeader.tsx
@@ -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 { SessionSidePanelFoldButton } from '@/components/Session/SessionSidePanelFoldButton';
+import type { SessionModeType } from '@/types/constants';
+import type { ReactNode } from 'react';
+
+export interface SessionSidePanelHeaderProps {
+  title: string;
+  mode: SessionModeType;
+  isSidePanelVisible: boolean;
+  onToggle: () => void;
+  /** Optional right-side content (e.g. workforce expand overlay) */
+  end?: ReactNode;
+}
+
+export function SessionSidePanelHeader({
+  title,
+  mode,
+  isSidePanelVisible,
+  onToggle,
+  end,
+}: SessionSidePanelHeaderProps) {
+  return (
+    <div className="py-2 pl-2 pr-4 min-w-0 relative z-50 flex w-full shrink-0 items-center">
+      <div className="min-w-0 flex flex-1 items-center justify-start">
+        <SessionSidePanelFoldButton
+          sessionSidePanelMode={mode}
+          isSidePanelVisible={isSidePanelVisible}
+          onToggle={onToggle}
+        />
+      </div>
+      <div className="min-w-0 px-1 flex flex-1 items-center justify-center">
+        <span className="text-ds-text-neutral-default-default min-w-0 text-body-md font-semibold max-w-full truncate text-center">
+          {title}
+        </span>
+      </div>
+      <div className="min-w-0 flex flex-1 items-center justify-end">
+        {end != null ? (
+          <div className="gap-1 flex items-center">{end}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Session/SidePanelAccordionBox.tsx b/src/components/Session/SidePanelAccordionBox.tsx
new file mode 100644
index 000000000..226b5bfe7
--- /dev/null
+++ b/src/components/Session/SidePanelAccordionBox.tsx
@@ -0,0 +1,119 @@
+// ========= 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 { ChevronDown } from 'lucide-react';
+import { type ReactNode, useState } from 'react';
+
+const CONTENT_EASE: [number, number, number, number] = [0.32, 0.72, 0, 1];
+const LAYOUT_TRANSITION = {
+  layout: { duration: 0.28, ease: CONTENT_EASE },
+} as const;
+
+export type SidePanelAccordionRenderArgs = { open: boolean };
+
+export type SidePanelAccordionChildren =
+  | ReactNode
+  | ((state: SidePanelAccordionRenderArgs) => ReactNode);
+
+export function SidePanelAccordionBox({
+  title,
+  titleSuffix,
+  collapsedPreview,
+  children,
+  defaultOpen = true,
+}: {
+  title: string;
+  /** Small adornment rendered right after the title (e.g. count pill). */
+  titleSuffix?: ReactNode;
+  /**
+   * Compact content below the header when collapsed (static `children` only;
+   * render-prop children control their own open/closed layout).
+   */
+  collapsedPreview?: ReactNode;
+  /**
+   * Static: classic accordion — body hidden when closed.
+   * Render prop: body stays in one region; switch layout by `open` (e.g. summary vs full list).
+   */
+  children: SidePanelAccordionChildren;
+  defaultOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const isRenderProp = typeof children === 'function';
+  const dynamicBody = isRenderProp
+    ? (children as (s: SidePanelAccordionRenderArgs) => ReactNode)({ open })
+    : null;
+
+  return (
+    <div className="rounded-xl bg-ds-bg-neutral-default-default border-ds-border-neutral-subtle-disabled min-w-0 z-10 flex shrink-0 flex-col overflow-hidden border border-solid">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="hover:bg-ds-bg-neutral-default-hover gap-2 px-3 py-2.5 flex w-full shrink-0 items-center justify-between text-left transition-colors"
+        aria-expanded={open}
+      >
+        <div className="gap-2 min-w-0 flex items-center">
+          <span className="text-ds-text-neutral-default-default text-body-sm font-semibold">
+            {title}
+          </span>
+          {titleSuffix ? (
+            <span className="flex shrink-0 items-center">{titleSuffix}</span>
+          ) : null}
+        </div>
+        <ChevronDown
+          className={cn(
+            'text-ds-text-neutral-muted-default h-4 w-4 ease-out shrink-0 transition-transform duration-200',
+            open ? 'rotate-0' : '-rotate-90'
+          )}
+          aria-hidden
+        />
+      </button>
+
+      {!open && collapsedPreview && !isRenderProp ? (
+        <div className="px-2 pb-3 w-full">{collapsedPreview}</div>
+      ) : null}
+
+      {isRenderProp ? (
+        <motion.div
+          layout
+          transition={LAYOUT_TRANSITION}
+          className="min-h-0 w-full overflow-hidden"
+        >
+          {dynamicBody != null ? (
+            <div className="px-2 pb-3 w-full">{dynamicBody}</div>
+          ) : null}
+        </motion.div>
+      ) : (
+        <AnimatePresence initial={false}>
+          {open ? (
+            <motion.div
+              key="static-content"
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: 'auto', opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{
+                height: { duration: 0.22, ease: CONTENT_EASE },
+                opacity: { duration: 0.16, ease: CONTENT_EASE },
+              }}
+              className="overflow-hidden"
+            >
+              <div className="px-2 pb-3 w-full">{children as ReactNode}</div>
+            </motion.div>
+          ) : null}
+        </AnimatePresence>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Session/SidePanelSections/AgentFolderSection.tsx b/src/components/Session/SidePanelSections/AgentFolderSection.tsx
new file mode 100644
index 000000000..b3356267d
--- /dev/null
+++ b/src/components/Session/SidePanelSections/AgentFolderSection.tsx
@@ -0,0 +1,143 @@
+// ========= 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 { SidePanelAccordionBox } from '@/components/Session/SidePanelAccordionBox';
+import { SidePanelListRow } from '@/components/Session/SidePanelSections/primitives';
+import { cn } from '@/lib/utils';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  File,
+  FileArchive,
+  FileAudio,
+  FileCode,
+  FileImage,
+  FileSpreadsheet,
+  FileText,
+  FileVideo,
+  type LucideIcon,
+} from 'lucide-react';
+import { useMemo } from 'react';
+
+const EXT_MAP: Record<string, LucideIcon> = {
+  // images
+  png: FileImage,
+  jpg: FileImage,
+  jpeg: FileImage,
+  gif: FileImage,
+  webp: FileImage,
+  svg: FileImage,
+  // video
+  mp4: FileVideo,
+  mov: FileVideo,
+  webm: FileVideo,
+  // audio
+  mp3: FileAudio,
+  wav: FileAudio,
+  m4a: FileAudio,
+  // archive
+  zip: FileArchive,
+  tar: FileArchive,
+  gz: FileArchive,
+  // spreadsheet
+  csv: FileSpreadsheet,
+  xlsx: FileSpreadsheet,
+  xls: FileSpreadsheet,
+  // code
+  ts: FileCode,
+  tsx: FileCode,
+  js: FileCode,
+  jsx: FileCode,
+  py: FileCode,
+  json: FileCode,
+  html: FileCode,
+  // docs
+  md: FileText,
+  txt: FileText,
+  pdf: FileText,
+  doc: FileText,
+  docx: FileText,
+};
+
+function iconFor(file: FileInfo): LucideIcon {
+  const name = (file.name || file.path || '').toLowerCase();
+  const idx = name.lastIndexOf('.');
+  const ext = idx >= 0 ? name.slice(idx + 1) : '';
+  return EXT_MAP[ext] ?? File;
+}
+
+interface AgentFolderSectionProps {
+  title: string;
+  files: FileInfo[];
+  /** Opens the Folder workspace tab and selects this file (parent supplies navigation). */
+  onOpenFile: (file: FileInfo) => void;
+}
+
+export function AgentFolderSection({
+  title,
+  files,
+  onOpenFile,
+}: AgentFolderSectionProps) {
+  const unique = useMemo(() => {
+    const seen = new Set<string>();
+    const out: FileInfo[] = [];
+    for (const f of files) {
+      const key = f.path || f.name;
+      if (!key || seen.has(key)) continue;
+      seen.add(key);
+      out.push(f);
+    }
+    return out;
+  }, [files]);
+
+  return (
+    <SidePanelAccordionBox title={title}>
+      {unique.length === 0 ? (
+        <div className="text-ds-text-neutral-subtle-default text-body-sm px-1 py-1 opacity-60">
+          Files the agent writes or updates during this task appear here so you
+          can open them.
+        </div>
+      ) : (
+        <motion.ul layout className="p-0 m-0 space-y-0.5 list-none">
+          <AnimatePresence initial={false}>
+            {unique.map((file) => {
+              const Icon = iconFor(file);
+              return (
+                <motion.li
+                  key={file.path || file.name}
+                  layout
+                  initial={{ opacity: 0, y: -4 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -4 }}
+                  transition={{ duration: 0.2, ease: 'easeOut' }}
+                >
+                  <SidePanelListRow
+                    leading={
+                      <Icon
+                        size={16}
+                        className={cn('text-ds-icon-neutral-default-default')}
+                      />
+                    }
+                    onClick={() => onOpenFile(file)}
+                  >
+                    {file.name || file.path}
+                  </SidePanelListRow>
+                </motion.li>
+              );
+            })}
+          </AnimatePresence>
+        </motion.ul>
+      )}
+    </SidePanelAccordionBox>
+  );
+}
diff --git a/src/components/Session/SidePanelSections/AgentPoolSection.tsx b/src/components/Session/SidePanelSections/AgentPoolSection.tsx
new file mode 100644
index 000000000..92f9647f5
--- /dev/null
+++ b/src/components/Session/SidePanelSections/AgentPoolSection.tsx
@@ -0,0 +1,380 @@
+// ========= 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 { SidePanelAccordionBox } from '@/components/Session/SidePanelAccordionBox';
+import ShinyText from '@/components/ui/ShinyText/ShinyText';
+import { agentMap, type WorkflowAgentType } from '@/components/WorkFlow/agents';
+import { getToolkitIcon } from '@/lib/toolkitIcons';
+import { cn } from '@/lib/utils';
+import { AgentStatusValue } from '@/types/constants';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Bird, Bot, CodeXml, FileText, Globe, Image } from 'lucide-react';
+import {
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
+
+function hasWork(agent: Agent) {
+  return Array.isArray(agent.tasks) && agent.tasks.length > 0;
+}
+
+function agentHasAnyToolkitsSeen(agent: Agent): boolean {
+  for (const task of agent.tasks ?? []) {
+    for (const tk of task.toolkits ?? []) {
+      if (tk.toolkitName && tk.toolkitName !== 'notice') return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Mirrors `Workspace/index.tsx` ordering: agents with assigned tasks come
+ * first, preserving their insertion order within each bucket.
+ */
+function sortByAssigned(agents: Agent[]): Agent[] {
+  return [...agents].sort((a, b) => {
+    const aHas = hasWork(a);
+    const bHas = hasWork(b);
+    if (aHas && !bHas) return -1;
+    if (!aHas && bHas) return 1;
+    return 0;
+  });
+}
+
+function getAgentSubIcon(agentType: string): ReactNode {
+  const key = agentType as WorkflowAgentType;
+  const preset = agentMap[key];
+  if (!preset) return null;
+  const iconClass = cn('!h-[10px] !w-[10px] shrink-0', preset.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 AgentLeadingIcon({ agentType }: { agentType: string }) {
+  const subIcon = getAgentSubIcon(agentType);
+  return (
+    <div className="h-6 w-6 text-ds-text-neutral-muted-default bg-ds-bg-neutral-subtle-default rounded-md relative inline-flex shrink-0 items-center justify-center self-center">
+      <Bot className="h-5 w-5" strokeWidth={2} aria-hidden />
+      {subIcon != null && (
+        <span className="-right-0.5 -top-0.5 absolute inline-flex items-center justify-center [&_svg]:shrink-0">
+          {subIcon}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Minimum on-screen time for any toolkit that went RUNNING, so fast tools
+ * (e.g. Screenshot, Search) remain observable even when they flip to
+ * COMPLETED within a few milliseconds.
+ */
+export const TOOLKIT_MIN_DISPLAY_MS = 1500;
+
+/** How long each toolkit stays focused before rotating to the next. */
+export const TOOLKIT_ROTATION_MS = 2000;
+
+type ToolkitEntry = {
+  /** Unique per activation — from `toolkitId` in the store. */
+  id: string;
+  name: string;
+  firstSeenAt: number;
+  /** Epoch ms when the entry should be dropped; `null` while RUNNING. */
+  expireAt: number | null;
+};
+
+type ToolkitState = {
+  entries: Map<string, ToolkitEntry>;
+  timers: Map<string, ReturnType<typeof setTimeout>>;
+  /** Ids that have already been shown and evicted — never re-add. */
+  retired: Set<string>;
+};
+
+function readToolkitEvents(
+  agent: Pick<Agent, 'tasks'> | undefined
+): Array<{ id: string; name: string; status: string | undefined }> {
+  const out: Array<{ id: string; name: string; status: string | undefined }> =
+    [];
+  for (const task of agent?.tasks ?? []) {
+    for (const tk of task.toolkits ?? []) {
+      if (!tk.toolkitName || tk.toolkitName === 'notice') continue;
+      const id = String(
+        (tk as { toolkitId?: string }).toolkitId ??
+          `${tk.toolkitName}:${tk.toolkitMethods}`
+      );
+      out.push({ id, name: tk.toolkitName, status: tk.toolkitStatus });
+    }
+  }
+  return out;
+}
+
+/**
+ * Exported for unit tests. Reconciles a single pass of toolkit events against
+ * the component's local `ToolkitState`, arming timers via the injected
+ * scheduler when a toolkit flips from RUNNING → anything else.
+ *
+ * Returns the ordered, deduped toolkit names currently eligible for display.
+ */
+export function reconcileToolkitState(
+  state: ToolkitState,
+  events: Array<{ id: string; name: string; status: string | undefined }>,
+  opts: {
+    now: number;
+    minDisplayMs: number;
+    schedule: (id: string, delayMs: number) => ReturnType<typeof setTimeout>;
+    cancel: (handle: ReturnType<typeof setTimeout>) => void;
+  }
+): string[] {
+  for (const event of events) {
+    if (state.retired.has(event.id)) continue;
+    let entry = state.entries.get(event.id);
+    if (!entry) {
+      entry = {
+        id: event.id,
+        name: event.name,
+        firstSeenAt: opts.now,
+        expireAt: null,
+      };
+      state.entries.set(event.id, entry);
+    }
+    if (event.status === AgentStatusValue.RUNNING) {
+      if (entry.expireAt !== null) {
+        entry.expireAt = null;
+        const t = state.timers.get(event.id);
+        if (t) {
+          opts.cancel(t);
+          state.timers.delete(event.id);
+        }
+      }
+    } else if (entry.expireAt === null) {
+      const expireAt = Math.max(
+        opts.now,
+        entry.firstSeenAt + opts.minDisplayMs
+      );
+      entry.expireAt = expireAt;
+      const delay = Math.max(0, expireAt - opts.now);
+      state.timers.set(event.id, opts.schedule(event.id, delay));
+    }
+  }
+
+  // Collect names — dedupe preserving first-seen order, drop ones whose
+  // timers have already fired and removed them.
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const entry of state.entries.values()) {
+    if (entry.expireAt !== null && entry.expireAt <= opts.now) continue;
+    if (!seen.has(entry.name)) {
+      seen.add(entry.name);
+      out.push(entry.name);
+    }
+  }
+  return out;
+}
+
+/**
+ * Returns the list of toolkit names to display for an agent, honoring a
+ * minimum display time so short-lived toolkits (< a few hundred ms) remain
+ * observable. Recomputes on every parent render (cheap) because the store
+ * mutates `agent.tasks[*].toolkits` in place.
+ */
+export function useLiveToolkits(
+  agent: Agent,
+  minDisplayMs: number = TOOLKIT_MIN_DISPLAY_MS
+): string[] {
+  const [, bump] = useReducer((n: number) => n + 1, 0);
+  const stateRef = useRef<ToolkitState>({
+    entries: new Map(),
+    timers: new Map(),
+    retired: new Set(),
+  });
+
+  const events = readToolkitEvents(agent);
+  const names = reconcileToolkitState(stateRef.current, events, {
+    // Wall-clock read during render is intentional: the reconcile needs
+    // `now` to filter entries whose min-display window has elapsed, and the
+    // setTimeout scheduled below forces a re-render exactly when that
+    // boundary passes — so the result stays consistent across renders.
+    // eslint-disable-next-line react-hooks/purity
+    now: Date.now(),
+    minDisplayMs,
+    schedule: (id, delay) =>
+      setTimeout(() => {
+        stateRef.current.entries.delete(id);
+        stateRef.current.timers.delete(id);
+        stateRef.current.retired.add(id);
+        bump();
+      }, delay),
+    cancel: clearTimeout,
+  });
+
+  useEffect(() => {
+    const state = stateRef.current;
+    return () => {
+      state.timers.forEach(clearTimeout);
+      state.timers.clear();
+    };
+  }, []);
+
+  return names;
+}
+
+/** Single-tag strip that rotates through live toolkits with a roll animation. */
+function AgentToolkitTag({ names }: { names: string[] }) {
+  const [focusIndex, setFocusIndex] = useState(0);
+
+  useEffect(() => {
+    if (names.length <= 1) {
+      setFocusIndex(0);
+      return;
+    }
+    const id = window.setInterval(() => {
+      setFocusIndex((i) => (i + 1) % names.length);
+    }, TOOLKIT_ROTATION_MS);
+    return () => window.clearInterval(id);
+  }, [names.length]);
+
+  const focused =
+    names.length > 0 ? names[Math.min(focusIndex, names.length - 1)] : null;
+
+  return (
+    <div className="h-6 min-w-0 inline-flex shrink-0 items-center overflow-hidden">
+      <AnimatePresence initial={false} mode="popLayout">
+        {focused && (
+          <motion.div
+            key={focused}
+            initial={{ y: -18, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: 18, opacity: 0 }}
+            transition={{ duration: 0.28, ease: [0.2, 0, 0.2, 1] }}
+            className={cn(
+              'gap-1 px-1.5 py-0.5 rounded-md inline-flex max-w-full items-center opacity-80',
+              'bg-ds-bg-neutral-muted-default'
+            )}
+            data-testid="agent-toolkit-tag"
+          >
+            <span className="text-ds-text-neutral-default-default [&_svg]:h-4 [&_svg]:w-4 inline-flex shrink-0 items-center">
+              {getToolkitIcon(focused, 16, '')}
+            </span>
+            <ShinyText
+              text={focused}
+              speed={2.5}
+              className="text-label-xs font-medium max-w-[140px] truncate"
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+function AgentRow({ agent }: { agent: Agent }) {
+  const display = agentMap[agent.type as WorkflowAgentType];
+  const active = hasWork(agent);
+  const name = display?.name ?? agent.name;
+  const liveToolkits = useLiveToolkits(agent);
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg bg-ds-bg-neutral-subtle-default px-1.5 py-1.5',
+        'gap-2 min-w-0 flex items-center',
+        !active && 'opacity-50'
+      )}
+    >
+      <AgentLeadingIcon agentType={agent.type} />
+      <span
+        className={cn(
+          'min-w-0 !text-body-sm font-medium text-ds-text-neutral-default-default flex-1 truncate',
+          display?.textColor
+        )}
+      >
+        {name}
+      </span>
+      <AgentToolkitTag names={liveToolkits} />
+    </div>
+  );
+}
+
+function AgentList({ agents }: { agents: Agent[] }) {
+  return (
+    <motion.ul layout className="gap-2 p-0 m-0 flex list-none flex-col">
+      <AnimatePresence initial={false} mode="popLayout">
+        {agents.map((agent) => (
+          <motion.li
+            key={agent.agent_id}
+            layout
+            initial={{ opacity: 0, y: -4 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -4 }}
+            transition={{ duration: 0.2, ease: 'easeOut' }}
+          >
+            <AgentRow agent={agent} />
+          </motion.li>
+        ))}
+      </AnimatePresence>
+    </motion.ul>
+  );
+}
+
+interface AgentPoolSectionProps {
+  title: string;
+  agents: Agent[];
+}
+
+export function AgentPoolSection({ title, agents }: AgentPoolSectionProps) {
+  const ordered = useMemo(() => sortByAssigned(agents), [agents]);
+  const activeAgents = useMemo(() => ordered.filter(hasWork), [ordered]);
+  const toolingAgents = useMemo(
+    () => ordered.filter(agentHasAnyToolkitsSeen),
+    [ordered]
+  );
+
+  const emptyState = (
+    <div className="text-ds-text-neutral-subtle-default text-body-sm px-1 py-1">
+      No agents yet
+    </div>
+  );
+
+  return (
+    <SidePanelAccordionBox title={title} defaultOpen={false}>
+      {({ open }) => {
+        if (ordered.length === 0) {
+          return open ? emptyState : null;
+        }
+        if (!open) {
+          const collapsed =
+            toolingAgents.length > 0 ? toolingAgents : activeAgents;
+          return collapsed.length > 0 ? <AgentList agents={collapsed} /> : null;
+        }
+        return <AgentList agents={ordered} />;
+      }}
+    </SidePanelAccordionBox>
+  );
+}
diff --git a/src/components/Session/SidePanelSections/ExecutionContextSection.tsx b/src/components/Session/SidePanelSections/ExecutionContextSection.tsx
new file mode 100644
index 000000000..838e1dd39
--- /dev/null
+++ b/src/components/Session/SidePanelSections/ExecutionContextSection.tsx
@@ -0,0 +1,101 @@
+// ========= 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 { SidePanelAccordionBox } from '@/components/Session/SidePanelAccordionBox';
+import {
+  CategoryLabel,
+  SidePanelListRow,
+} from '@/components/Session/SidePanelSections/primitives';
+import { AnimatePresence, motion } from 'framer-motion';
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
+
+export type ContextCategory = 'skill' | 'connector' | 'file';
+
+export interface ContextItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  category: ContextCategory;
+  onClick?: () => void;
+}
+
+const CATEGORY_ORDER: ContextCategory[] = ['skill', 'connector', 'file'];
+const CATEGORY_LABEL: Record<ContextCategory, string> = {
+  skill: 'Skills',
+  connector: 'MCP Tools',
+  file: 'Referenced Files',
+};
+
+interface ExecutionContextSectionProps {
+  title: string;
+  items: ContextItem[];
+}
+
+export function ExecutionContextSection({
+  title,
+  items,
+}: ExecutionContextSectionProps) {
+  const grouped = useMemo(() => {
+    const map = new Map<ContextCategory, ContextItem[]>();
+    for (const item of items) {
+      if (!map.has(item.category)) map.set(item.category, []);
+      map.get(item.category)!.push(item);
+    }
+    return CATEGORY_ORDER.filter((c) => map.has(c)).map((c) => ({
+      category: c,
+      items: map.get(c)!,
+    }));
+  }, [items]);
+
+  return (
+    <SidePanelAccordionBox title={title}>
+      {items.length === 0 ? (
+        <div className="text-ds-text-neutral-subtle-default text-body-sm px-1 py-1 opacity-60">
+          Track skills, MCPs and referenced files used in this task.
+        </div>
+      ) : (
+        <div className="flex flex-col">
+          {grouped.map(({ category, items: groupItems }) => (
+            <div key={category} className="flex flex-col">
+              <CategoryLabel>{CATEGORY_LABEL[category]}</CategoryLabel>
+              <motion.ul layout className="p-0 m-0 space-y-0.5 list-none">
+                <AnimatePresence initial={false}>
+                  {groupItems.map((item) => (
+                    <motion.li
+                      key={item.id}
+                      layout
+                      initial={{ opacity: 0, y: -4 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -4 }}
+                      transition={{ duration: 0.2, ease: 'easeOut' }}
+                    >
+                      <SidePanelListRow
+                        leading={item.icon}
+                        onClick={item.onClick}
+                        interactiveHover
+                      >
+                        {item.label}
+                      </SidePanelListRow>
+                    </motion.li>
+                  ))}
+                </AnimatePresence>
+              </motion.ul>
+            </div>
+          ))}
+        </div>
+      )}
+    </SidePanelAccordionBox>
+  );
+}
diff --git a/src/components/Session/SidePanelSections/ProgressSection.tsx b/src/components/Session/SidePanelSections/ProgressSection.tsx
new file mode 100644
index 000000000..57414fd91
--- /dev/null
+++ b/src/components/Session/SidePanelSections/ProgressSection.tsx
@@ -0,0 +1,101 @@
+// ========= 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 { SidePanelAccordionBox } from '@/components/Session/SidePanelAccordionBox';
+import {
+  CountPill,
+  ProgressCircle,
+  ProgressConnector,
+  SidePanelListRow,
+} from '@/components/Session/SidePanelSections/primitives';
+import { TaskStatus } from '@/types/constants';
+import { AnimatePresence, motion } from 'framer-motion';
+
+function isDone(task: TaskInfo) {
+  return task.status === TaskStatus.COMPLETED;
+}
+
+interface ProgressSectionProps {
+  title: string;
+  subtasks: TaskInfo[];
+}
+
+export function ProgressSection({ title, subtasks }: ProgressSectionProps) {
+  const count = subtasks.length;
+
+  const collapsedStrip =
+    count > 0 ? (
+      <div className="gap-1 min-w-0 mx-1 flex items-center overflow-hidden">
+        <AnimatePresence initial={false}>
+          {subtasks.map((task, idx) => (
+            <motion.span
+              key={task.id}
+              layout
+              initial={{ opacity: 0, scale: 0.6 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.6 }}
+              transition={{ duration: 0.18, ease: 'easeOut' }}
+              className="gap-1 min-w-0 flex items-center"
+            >
+              <ProgressCircle done={isDone(task)} />
+              {idx < subtasks.length - 1 ? <ProgressConnector /> : null}
+            </motion.span>
+          ))}
+        </AnimatePresence>
+      </div>
+    ) : null;
+
+  return (
+    <SidePanelAccordionBox
+      title={title}
+      titleSuffix={count > 0 ? <CountPill count={count} /> : null}
+    >
+      {({ open }) => {
+        if (!open) {
+          return collapsedStrip;
+        }
+        if (count === 0) {
+          return (
+            <div className="text-ds-text-neutral-subtle-default text-body-sm px-1 py-1 opacity-60">
+              Follow each plan step and its status as this task runs.
+            </div>
+          );
+        }
+        return (
+          <motion.ul layout className="p-0 m-0 space-y-0.5 list-none">
+            <AnimatePresence initial={false}>
+              {subtasks.map((task) => (
+                <motion.li
+                  key={task.id}
+                  layout
+                  initial={{ opacity: 0, y: -4 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -4 }}
+                  transition={{ duration: 0.2, ease: 'easeOut' }}
+                >
+                  <SidePanelListRow
+                    className="hover:bg-ds-bg-neutral-subtle-default cursor-pointer"
+                    leading={<ProgressCircle done={isDone(task)} />}
+                  >
+                    {task.content}
+                  </SidePanelListRow>
+                </motion.li>
+              ))}
+            </AnimatePresence>
+          </motion.ul>
+        );
+      }}
+    </SidePanelAccordionBox>
+  );
+}
diff --git a/src/components/Session/SidePanelSections/buildContextItems.ts b/src/components/Session/SidePanelSections/buildContextItems.ts
new file mode 100644
index 000000000..26a95edf3
--- /dev/null
+++ b/src/components/Session/SidePanelSections/buildContextItems.ts
@@ -0,0 +1,163 @@
+// ========= 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 { getToolkitIcon } from '@/lib/toolkitIcons';
+import { FileText } from 'lucide-react';
+import { createElement } from 'react';
+import type { ContextItem } from './ExecutionContextSection';
+
+function addHint(set: Set<string>, raw: string) {
+  const t = raw.trim().toLowerCase();
+  if (!t) return;
+  set.add(t);
+  const noToolkit = t.replace(/\s+toolkit\s*$/i, '').trim();
+  if (noToolkit && noToolkit !== t) set.add(noToolkit);
+}
+
+function collectWorkerHintSets(agents: Agent[]) {
+  const skillHints = new Set<string>();
+  const connectorHints = new Set<string>();
+
+  for (const agent of agents) {
+    const info = agent.workerInfo;
+    if (!info) continue;
+
+    const mcp: unknown = info.mcp_tools;
+    if (mcp && typeof mcp === 'object') {
+      const servers = (mcp as { mcpServers?: Record<string, unknown> })
+        .mcpServers;
+      if (servers && typeof servers === 'object') {
+        for (const name of Object.keys(servers)) {
+          addHint(connectorHints, name);
+        }
+      }
+    }
+
+    const selected: unknown = info.selectedTools;
+    if (!Array.isArray(selected)) continue;
+    for (const raw of selected) {
+      if (!raw || typeof raw !== 'object') continue;
+      const item = raw as {
+        name?: string;
+        key?: string;
+        toolkit?: string;
+        category?: { name?: string };
+      };
+      const label = item.name ?? item.key ?? item.toolkit;
+      if (!label) continue;
+      const categoryName = item.category?.name?.toLowerCase() ?? '';
+      const hints = categoryName === 'skill' ? skillHints : connectorHints;
+      addHint(hints, label);
+      if (item.toolkit) addHint(hints, item.toolkit);
+    }
+  }
+
+  return { skillHints, connectorHints };
+}
+
+function runtimeCategoryForToolkit(
+  toolkitName: string,
+  skillHints: Set<string>,
+  connectorHints: Set<string>
+): ContextItem['category'] | null {
+  const tn = toolkitName.trim().toLowerCase();
+  if (/\bskill\b/i.test(tn)) return 'skill';
+  if (/\bmcp\b/i.test(tn)) return 'connector';
+  if (skillHints.has(tn)) return 'skill';
+  const noTk = tn.replace(/\s+toolkit\s*$/i, '').trim();
+  if (skillHints.has(noTk)) return 'skill';
+  if (connectorHints.has(tn)) return 'connector';
+  if (connectorHints.has(noTk)) return 'connector';
+  return null;
+}
+
+function forEachRuntimeToolkit(
+  agents: Agent[],
+  taskRunning: TaskInfo[] | undefined,
+  fn: (toolkitName: string) => void
+) {
+  for (const agent of agents) {
+    for (const task of agent.tasks ?? []) {
+      for (const tk of task.toolkits ?? []) {
+        const name = tk.toolkitName;
+        if (!name || name === 'notice') continue;
+        fn(name);
+      }
+    }
+  }
+  for (const task of taskRunning ?? []) {
+    for (const tk of task.toolkits ?? []) {
+      const name = tk.toolkitName;
+      if (!name || name === 'notice') continue;
+      fn(name);
+    }
+  }
+}
+
+/**
+ * Derive a flat, deduplicated list of context items (skills / MCP tools)
+ * from runtime toolkit usage on subtasks of the active task.
+ *
+ * - `task.toolkits` / `taskRunning[].toolkits` from ACTIVATE_TOOLKIT are
+ *   treated as the source of truth for "currently used" context.
+ * - `workerInfo` is used only as a hint to classify runtime toolkit names as
+ *   skill vs connector.
+ */
+export function buildContextItems(
+  agents: Agent[],
+  taskRunning?: TaskInfo[],
+  uploadedFiles: File[] = []
+): ContextItem[] {
+  const seen = new Set<string>();
+  const out: ContextItem[] = [];
+
+  const push = (item: ContextItem) => {
+    const key = `${item.category}:${item.id}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    out.push(item);
+  };
+
+  const { skillHints, connectorHints } = collectWorkerHintSets(agents);
+
+  forEachRuntimeToolkit(agents, taskRunning, (toolkitName) => {
+    const category = runtimeCategoryForToolkit(
+      toolkitName,
+      skillHints,
+      connectorHints
+    );
+    if (!category) return;
+    push({
+      id: toolkitName,
+      label: toolkitName,
+      category,
+      icon: getToolkitIcon(toolkitName, 16),
+    });
+  });
+
+  for (const file of uploadedFiles) {
+    const filePath = file.filePath?.trim();
+    if (!filePath) continue;
+    const fallbackName = filePath.split('/').pop() || filePath;
+    const label = file.fileName?.trim() || fallbackName;
+    push({
+      id: filePath,
+      label,
+      category: 'file',
+      icon: createElement(FileText, { size: 16 }),
+    });
+  }
+
+  return out;
+}
diff --git a/src/components/Session/SidePanelSections/collectSidePanelOutputFiles.ts b/src/components/Session/SidePanelSections/collectSidePanelOutputFiles.ts
new file mode 100644
index 000000000..15a5e8d4c
--- /dev/null
+++ b/src/components/Session/SidePanelSections/collectSidePanelOutputFiles.ts
@@ -0,0 +1,59 @@
+// ========= 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. =========
+
+/**
+ * Output files from agent runs can arrive from multiple places:
+ * `taskAssigning[].tasks[].fileList` for WRITE_FILE events, `messages[].fileList`
+ * for final-summary extraction, and occasionally task-level mirrors.
+ * The chat task's top-level `fileList` is not kept in sync, so the side panel
+ * must aggregate every known source.
+ */
+function fileInfoDedupKey(f: FileInfo): string {
+  const rel = (f.relativePath ?? '').trim();
+  if (rel) return rel;
+  const p = (f.path ?? '').trim();
+  if (p) return p;
+  return (f.name ?? '').trim();
+}
+
+export function collectSidePanelOutputFiles(
+  task:
+    | {
+        taskAssigning?: Agent[];
+        taskInfo?: TaskInfo[];
+        taskRunning?: TaskInfo[];
+        fileList?: FileInfo[];
+        messages?: Pick<Message, 'fileList'>[];
+      }
+    | null
+    | undefined
+): FileInfo[] {
+  if (!task) return [];
+  const assigned = (task.taskAssigning ?? []).flatMap((agent) =>
+    (agent.tasks ?? []).flatMap((t) => t.fileList ?? [])
+  );
+  const planned = (task.taskInfo ?? []).flatMap((t) => t.fileList ?? []);
+  const running = (task.taskRunning ?? []).flatMap((t) => t.fileList ?? []);
+  const messages = (task.messages ?? []).flatMap((m) => m.fileList ?? []);
+  const top = task.fileList ?? [];
+  const seen = new Set<string>();
+  const out: FileInfo[] = [];
+  for (const f of [...top, ...assigned, ...planned, ...running, ...messages]) {
+    const k = fileInfoDedupKey(f);
+    if (!k || seen.has(k)) continue;
+    seen.add(k);
+    out.push(f);
+  }
+  return out;
+}
diff --git a/src/components/Session/SidePanelSections/primitives.tsx b/src/components/Session/SidePanelSections/primitives.tsx
new file mode 100644
index 000000000..516b47b15
--- /dev/null
+++ b/src/components/Session/SidePanelSections/primitives.tsx
@@ -0,0 +1,172 @@
+// ========= 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 { Check } from 'lucide-react';
+import { type ReactNode, forwardRef } from 'react';
+
+/**
+ * Small round count/label pill used next to accordion titles.
+ */
+export function CountPill({ count }: { count: number }) {
+  return (
+    <span className="bg-ds-bg-neutral-subtle-default text-ds-text-neutral-subtle-default text-label-xs font-bold px-1.5 inline-flex items-center justify-center rounded-full">
+      {count}
+    </span>
+  );
+}
+
+/**
+ * Small muted category label for grouping list items.
+ */
+export function CategoryLabel({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'text-ds-text-neutral-muted-default text-body-sm px-1 pb-1 pt-2 first:pt-0',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+type SidePanelListRowProps = {
+  leading?: ReactNode;
+  children: ReactNode;
+  trailing?: ReactNode;
+  disabled?: boolean;
+  onClick?: () => void;
+  /**
+   * Pointer + subtle hover/active backgrounds without an action (e.g. read-only list rows).
+   * When `onClick` is set, focus ring is included; for hover-only rows it is omitted.
+   */
+  interactiveHover?: boolean;
+  className?: string;
+};
+
+/**
+ * Row primitive used across Agent Pool / Execution Context / Agent Folder sections.
+ * Rendered as a button when `onClick` is provided, otherwise a div.
+ */
+export const SidePanelListRow = forwardRef<HTMLElement, SidePanelListRowProps>(
+  (
+    {
+      leading,
+      children,
+      trailing,
+      disabled,
+      onClick,
+      interactiveHover,
+      className,
+    },
+    ref
+  ) => {
+    const showAffordance = Boolean(onClick || interactiveHover);
+    const base = cn(
+      'group gap-2 px-1.5 py-1.5 rounded-md min-w-0 w-full flex items-center',
+      'text-ds-text-neutral-default-default text-body-sm text-left',
+      'transition-colors',
+      disabled
+        ? 'opacity-50 pointer-events-none'
+        : showAffordance
+          ? cn(
+              'cursor-pointer hover:bg-ds-bg-neutral-subtle-default active:bg-ds-bg-neutral-subtle-hover',
+              onClick &&
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-ring-brand-default-focus/40'
+            )
+          : '',
+      className
+    );
+
+    const content = (
+      <>
+        {leading ? (
+          <span className="flex shrink-0 items-center">{leading}</span>
+        ) : null}
+        <span className="min-w-0 flex-1 truncate">{children}</span>
+        {trailing ? (
+          <span className="flex shrink-0 items-center">{trailing}</span>
+        ) : null}
+      </>
+    );
+
+    if (onClick) {
+      return (
+        <button
+          ref={ref as React.Ref<HTMLButtonElement>}
+          type="button"
+          onClick={onClick}
+          disabled={disabled}
+          className={base}
+        >
+          {content}
+        </button>
+      );
+    }
+
+    return (
+      <div ref={ref as React.Ref<HTMLDivElement>} className={base}>
+        {content}
+      </div>
+    );
+  }
+);
+SidePanelListRow.displayName = 'SidePanelListRow';
+
+/**
+ * Progress circle. Incomplete: neutral subtle fill so the ring reads on any
+ * panel background. Complete: success subtle fill, strong border and check.
+ */
+export function ProgressCircle({
+  done,
+  size = 14,
+}: {
+  done: boolean;
+  size?: number;
+}) {
+  return (
+    <span
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center rounded-full border-[0.5px] border-solid',
+        done
+          ? 'bg-ds-bg-success-subtle-default border-ds-border-success-strong-default text-ds-text-success-strong-default'
+          : 'border-ds-border-neutral-default-default bg-ds-bg-neutral-subtle-default'
+      )}
+      style={{ width: size, height: size }}
+      aria-hidden
+    >
+      {done ? <Check size={Math.max(8, size - 6)} strokeWidth={4} /> : null}
+    </span>
+  );
+}
+
+/**
+ * Thin connector line between two progress circles in the folded strip view.
+ */
+export function ProgressConnector() {
+  return (
+    <span
+      className="bg-ds-border-neutral-default-default h-px min-w-[6px] flex-1"
+      aria-hidden
+    />
+  );
+}
diff --git a/src/components/Session/SingleAgent/SingleAgentSidePanel.tsx b/src/components/Session/SingleAgent/SingleAgentSidePanel.tsx
new file mode 100644
index 000000000..2256886bb
--- /dev/null
+++ b/src/components/Session/SingleAgent/SingleAgentSidePanel.tsx
@@ -0,0 +1,111 @@
+// ========= 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 { AgentFolderSection } from '@/components/Session/SidePanelSections/AgentFolderSection';
+import { ExecutionContextSection } from '@/components/Session/SidePanelSections/ExecutionContextSection';
+import { ProgressSection } from '@/components/Session/SidePanelSections/ProgressSection';
+import { buildContextItems } from '@/components/Session/SidePanelSections/buildContextItems';
+import { collectSidePanelOutputFiles } from '@/components/Session/SidePanelSections/collectSidePanelOutputFiles';
+import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+import { cn } from '@/lib/utils';
+import { usePageTabStore } from '@/store/pageTabStore';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function SingleAgentSidePanel() {
+  const { t } = useTranslation();
+  const { chatStore, projectStore } = useChatStoreAdapter();
+  const setActiveWorkspaceTab = usePageTabStore((s) => s.setActiveWorkspaceTab);
+
+  const activeTask = chatStore?.activeTaskId
+    ? chatStore.tasks[chatStore.activeTaskId]
+    : undefined;
+
+  const agents = activeTask?.taskAssigning ?? [];
+  /** Prefer live `taskRunning` status (updated on TASK_STATE), keep plan order/text from agent tasks or taskInfo. */
+  const subtasks = useMemo(() => {
+    const base = agents[0]?.tasks ?? activeTask?.taskInfo ?? [];
+    const taskRunning = activeTask?.taskRunning ?? [];
+    if (taskRunning.length === 0) return base;
+    return base.map((t) => {
+      const live = taskRunning.find((r) => r.id === t.id);
+      if (!live) return t;
+      return { ...t, ...live, content: t.content || live.content };
+    });
+  }, [agents, activeTask?.taskInfo, activeTask?.taskRunning]);
+  const files = useMemo(
+    () => collectSidePanelOutputFiles(activeTask),
+    [activeTask]
+  );
+  const uploadedFiles = useMemo(() => {
+    if (!activeTask) return [];
+    const all = [
+      ...(activeTask.messages ?? [])
+        .filter((m) => m.role === 'user')
+        .flatMap((m) => m.attaches ?? []),
+      ...(activeTask.attaches ?? []),
+    ];
+    const seen = new Set<string>();
+    return all.filter((file) => {
+      const key = file.filePath;
+      if (!key || seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    });
+  }, [activeTask]);
+  const contextItems = useMemo(
+    () => buildContextItems(agents, activeTask?.taskRunning, uploadedFiles),
+    [agents, activeTask?.taskRunning, uploadedFiles]
+  );
+
+  const handleOpenAgentFile = useCallback(
+    (file: FileInfo) => {
+      if (!chatStore?.activeTaskId) return;
+      chatStore.setSelectedFile(chatStore.activeTaskId, file);
+      setActiveWorkspaceTab('inbox', {
+        clearInboxForProjectId: projectStore.activeProjectId ?? null,
+      });
+    },
+    [chatStore, projectStore.activeProjectId, setActiveWorkspaceTab]
+  );
+
+  return (
+    <div
+      className={cn(
+        'min-w-0 min-h-0 flex w-full flex-1 flex-col overflow-hidden',
+        'relative'
+      )}
+    >
+      <div className="gap-2 px-2 pb-2 min-h-0 min-w-0 flex flex-1 flex-col overflow-x-hidden overflow-y-auto">
+        <ProgressSection
+          title={t('layout.workforce-progress', { defaultValue: 'Progress' })}
+          subtasks={subtasks}
+        />
+        <ExecutionContextSection
+          title={t('layout.execution-context', {
+            defaultValue: 'Execution Context',
+          })}
+          items={contextItems}
+        />
+        <AgentFolderSection
+          title={t('layout.workforce-agent-folder', {
+            defaultValue: 'Agent Folder',
+          })}
+          files={files}
+          onOpenFile={handleOpenAgentFile}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Session/SingleAgent/index.tsx b/src/components/Session/SingleAgent/index.tsx
new file mode 100644
index 000000000..65ac8a972
--- /dev/null
+++ b/src/components/Session/SingleAgent/index.tsx
@@ -0,0 +1,15 @@
+// ========= 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. =========
+
+export { SingleAgentSidePanel } from './SingleAgentSidePanel';
diff --git a/src/components/Session/Workforce/ExpandedOverlay.tsx b/src/components/Session/Workforce/ExpandedOverlay.tsx
new file mode 100644
index 000000000..b4db8ce5e
--- /dev/null
+++ b/src/components/Session/Workforce/ExpandedOverlay.tsx
@@ -0,0 +1,251 @@
+// ========= 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 WorkforceMenu from '@/components/WorkforceMenu';
+import { Button } from '@/components/ui/button';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+import { useHost } from '@/host';
+import { AnimatePresence, motion } from 'framer-motion';
+import { X } from 'lucide-react';
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+
+const EDGE_PADDING_PX = 32;
+
+export interface ExpandedOverlayProps {
+  open: boolean;
+  onClose: () => void;
+  workforcePanelKey: string;
+  onToggleSidePanel: () => void;
+  isSidePanelVisible: boolean;
+}
+
+function WorkforceOverlayCanvas() {
+  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="backdrop-blur-sm inset-0 rounded-xl bg-ds-bg-neutral-default-default 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="backdrop-blur-sm inset-0 rounded-xl bg-ds-bg-neutral-default-default 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="backdrop-blur-sm inset-0 rounded-xl bg-ds-bg-neutral-default-default pointer-events-none absolute"></div>
+            <div className="relative z-10 h-full w-full">
+              <Folder />
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default function ExpandedOverlay({
+  open,
+  onClose,
+  workforcePanelKey,
+  onToggleSidePanel,
+  isSidePanelVisible,
+}: ExpandedOverlayProps) {
+  const { t } = useTranslation();
+  const host = useHost();
+  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, '');
+    host?.electronAPI?.hideAllWebview?.();
+  }, [open, chatStore, host]);
+
+  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;
+
+  const titleLabel = t('layout.aiWorkforce');
+  const backdropDismissLabel = t('layout.close');
+
+  return createPortal(
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          key="workforce-expanded-overlay"
+          className="inset-0 backdrop-blur-sm bg-dialog-overlay-scrim fixed z-[200] flex items-stretch justify-stretch"
+          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-ds-border-neutral-inverse-default bg-ds-bg-neutral-muted-default 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">
+              <div className="min-w-0 gap-3 flex flex-1 items-center overflow-hidden">
+                <span className="text-ds-text-neutral-default-default px-1 text-body-md font-semibold shrink-0">
+                  {titleLabel}
+                </span>
+              </div>
+              <div className="gap-1 flex shrink-0 items-center">
+                <TooltipSimple
+                  content={backdropDismissLabel}
+                  delayDuration={300}
+                  side="bottom"
+                >
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    buttonContent="icon-only"
+                    buttonRadius="lg"
+                    className="shrink-0"
+                    onClick={onClose}
+                    aria-pressed={true}
+                    aria-label={backdropDismissLabel}
+                  >
+                    <X 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={`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"
+                >
+                  <WorkforceOverlayCanvas />
+                </motion.div>
+              </AnimatePresence>
+            </div>
+            <div className="relative z-50 shrink-0">
+              <div className="pointer-events-auto">
+                <WorkforceMenu
+                  onToggleChatBox={onToggleSidePanel}
+                  isChatBoxVisible={!isSidePanelVisible}
+                />
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>,
+    document.body
+  );
+}
diff --git a/src/components/Session/Workforce/FoldedPanel/AgentDetailPane.tsx b/src/components/Session/Workforce/FoldedPanel/AgentDetailPane.tsx
new file mode 100644
index 000000000..5777eb422
--- /dev/null
+++ b/src/components/Session/Workforce/FoldedPanel/AgentDetailPane.tsx
@@ -0,0 +1,606 @@
+// ========= 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 { useHost } from '@/host';
+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 host = useHost();
+  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);
+    host?.electronAPI?.hideAllWebview?.();
+  }, [chatStore, host, agent.agent_id]);
+
+  if (!chatStore) {
+    return null;
+  }
+
+  return (
+    <div className="min-h-0 min-w-0 bg-ds-bg-neutral-strong-default rounded-xl flex h-full w-full flex-col overflow-hidden">
+      <div
+        className={cn(
+          'bg-ds-bg-neutral-strong-default 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-ds-text-neutral-default-default'
+          )}
+        >
+          {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-ds-text-neutral-muted-default"
+            innerClassName="text-xs font-normal leading-tight text-ds-text-neutral-muted-default"
+          />
+        </div>
+        {agent.tasks && agent.tasks.length > 0 && (
+          <div className="gap-1 border-ds-border-neutral-default-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-ds-bg-neutral-subtle-default 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-ds-bg-neutral-subtle-default 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-ds-bg-status-blocked-subtle-default'
+                        : task.status === TaskStatus.COMPLETED
+                          ? 'bg-ds-bg-status-completed-subtle-default'
+                          : task.status === TaskStatus.FAILED
+                            ? 'bg-ds-bg-status-error-subtle-default'
+                            : task.status === TaskStatus.RUNNING
+                              ? 'bg-ds-bg-status-running-subtle-default'
+                              : task.status === TaskStatus.BLOCKED
+                                ? 'bg-ds-bg-status-blocked-subtle-default'
+                                : task.status === TaskStatus.SKIPPED ||
+                                    task.status === TaskStatus.WAITING ||
+                                    task.status === TaskStatus.EMPTY
+                                  ? 'bg-ds-bg-status-pending-subtle-default'
+                                  : 'bg-ds-bg-status-running-subtle-default',
+                      task.status === TaskStatus.COMPLETED
+                        ? 'hover:border-ds-border-status-completed-default-focus'
+                        : task.status === TaskStatus.FAILED
+                          ? 'hover:border-ds-border-status-error-default-focus'
+                          : task.status === TaskStatus.RUNNING
+                            ? 'hover:border-ds-border-neutral-strong-default'
+                            : task.status === TaskStatus.BLOCKED
+                              ? 'hover:border-ds-border-status-blocked-default-focus'
+                              : task.status === TaskStatus.SKIPPED ||
+                                  task.status === TaskStatus.WAITING ||
+                                  task.status === TaskStatus.EMPTY
+                                ? 'hover:border-ds-border-status-pending-default-hover'
+                                : 'hover:border-ds-border-neutral-default-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-ds-icon-status-pending-default-default"
+                            />
+                          ) : (
+                            <>
+                              {task.status === TaskStatus.RUNNING && (
+                                <LoaderCircle
+                                  size={16}
+                                  className={cn(
+                                    'text-ds-icon-status-splitting-default-default',
+                                    activeTaskId &&
+                                      chatStore.tasks[activeTaskId]?.status ===
+                                        ChatTaskStatus.RUNNING &&
+                                      'animate-spin'
+                                  )}
+                                />
+                              )}
+                              {task.status === TaskStatus.SKIPPED && (
+                                <LoaderCircle
+                                  size={16}
+                                  className="text-ds-icon-status-pending-default-default"
+                                />
+                              )}
+                              {task.status === TaskStatus.COMPLETED && (
+                                <CircleCheckBig
+                                  size={16}
+                                  className="text-ds-icon-status-completed-default-default"
+                                />
+                              )}
+                              {task.status === TaskStatus.FAILED && (
+                                <CircleSlash
+                                  size={16}
+                                  className="text-ds-icon-status-error-default-default"
+                                />
+                              )}
+                              {task.status === TaskStatus.BLOCKED && (
+                                <TriangleAlert
+                                  size={16}
+                                  className="text-ds-icon-status-pending-default-default"
+                                />
+                              )}
+                              {(task.status === TaskStatus.EMPTY ||
+                                task.status === TaskStatus.WAITING) && (
+                                <Circle
+                                  size={16}
+                                  className="text-ds-icon-status-pending-default-default"
+                                />
+                              )}
+                            </>
+                          )}
+                        </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-ds-text-neutral-default-default shrink-0">
+                            No. {getTaskIdDisplay(task.id)}
+                          </span>
+                          {task.reAssignTo ? (
+                            <div className="rounded-lg bg-ds-bg-document-subtle-default px-1 py-0.5 text-xs font-bold text-ds-text-warning-strong-default 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-ds-bg-status-error-subtle-default text-ds-text-status-error-strong-default'
+                                    : task.status === TaskStatus.COMPLETED
+                                      ? 'text-ds-text-status-completed-strong-default bg-ds-bg-neutral-default-default'
+                                      : 'bg-ds-bg-neutral-default-hover text-ds-text-neutral-muted-default'
+                                )}
+                              >
+                                Attempt {task.failure_count}
+                              </div>
+                            )
+                          )}
+                        </div>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="xxs"
+                        buttonContent="icon-only"
+                        buttonRadius="lg"
+                        className="text-ds-icon-neutral-muted-default 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-ds-text-status-error-strong-default'
+                          : task.status === TaskStatus.BLOCKED
+                            ? 'text-ds-text-neutral-default-default'
+                            : 'text-ds-text-neutral-default-default'
+                      )}
+                    >
+                      <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-ds-text-neutral-default-default 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-ds-text-neutral-default-default 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-ds-bg-neutral-strong-default 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-ds-icon-neutral-muted-default 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-ds-text-neutral-default-default 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/Session/Workforce/FoldedPanel/index.tsx b/src/components/Session/Workforce/FoldedPanel/index.tsx
new file mode 100644
index 000000000..a00d94e87
--- /dev/null
+++ b/src/components/Session/Workforce/FoldedPanel/index.tsx
@@ -0,0 +1,521 @@
+// ========= 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 { StreamingTaskList } from '@/components/ChatBox/TaskBox/StreamingTaskList';
+import { TaskCard } from '@/components/ChatBox/TaskBox/TaskCard';
+import { TypeCardSkeleton } from '@/components/ChatBox/TaskBox/TypeCardSkeleton';
+import { BASE_WORKFLOW_AGENTS } from '@/components/WorkFlow/baseWorkers';
+import {
+  FoldedAgentCard,
+  isBaseWorkflowAgent,
+} from '@/components/Workspace/FoldedAgentCard';
+import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+import { useHost } from '@/host';
+import { useAuthStore, useWorkerList } from '@/store/authStore';
+import { AgentStep, ChatTaskStatus, TaskStatus } from '@/types/constants';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+
+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;
+}
+
+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 { t } = useTranslation();
+  const host = useHost();
+  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);
+    host?.electronAPI?.hideAllWebview?.();
+  }, [
+    isTaskLiveLayout,
+    manualFollowPaused,
+    sortedAgents,
+    activeTask?.activeAgent,
+    activeTask?.activeWorkspace,
+    chatStore,
+    activeTaskId,
+    pauseAgentWorkspaceSync,
+    host,
+  ]);
+
+  const onSelectAgent = useCallback(
+    (agentId: string) => {
+      if (!chatStore?.activeTaskId) return;
+      chatStore.setActiveWorkspace(chatStore.activeTaskId, agentId);
+      chatStore.setActiveAgent(chatStore.activeTaskId, agentId);
+      host?.electronAPI?.hideAllWebview?.();
+    },
+    [chatStore, host]
+  );
+
+  if (!chatStore) {
+    return null;
+  }
+
+  const activeAgentId = activeTask?.activeAgent;
+
+  return (
+    <div
+      className="bg-ds-bg-neutral-default-default 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 flex flex-1 flex-col overflow-hidden">
+                {detailAgent ? (
+                  <AgentDetailPane
+                    agent={detailAgent}
+                    onTakeManualFollowControl={() =>
+                      setManualFollowPaused(true)
+                    }
+                  />
+                ) : (
+                  <div className="text-ds-text-neutral-muted-default p-3 text-body-sm">
+                    {t('chat.select-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/Session/Workforce/WorkforceSidePanel.tsx b/src/components/Session/Workforce/WorkforceSidePanel.tsx
new file mode 100644
index 000000000..56d73a805
--- /dev/null
+++ b/src/components/Session/Workforce/WorkforceSidePanel.tsx
@@ -0,0 +1,151 @@
+// ========= 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 { AgentFolderSection } from '@/components/Session/SidePanelSections/AgentFolderSection';
+import { AgentPoolSection } from '@/components/Session/SidePanelSections/AgentPoolSection';
+import { buildContextItems } from '@/components/Session/SidePanelSections/buildContextItems';
+import { collectSidePanelOutputFiles } from '@/components/Session/SidePanelSections/collectSidePanelOutputFiles';
+import { ExecutionContextSection } from '@/components/Session/SidePanelSections/ExecutionContextSection';
+import { ProgressSection } from '@/components/Session/SidePanelSections/ProgressSection';
+import ExpandedOverlay from '@/components/Session/Workforce/ExpandedOverlay';
+import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+import { cn } from '@/lib/utils';
+import { usePageTabStore } from '@/store/pageTabStore';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+/** Main column under `SessionSidePanel` header: fills remaining height in flex parent */
+export const WORKFORCE_MAIN_SURFACE_CLASS =
+  'min-w-0 flex w-full min-h-0 flex-1 flex-col overflow-hidden';
+
+export interface WorkforceSidePanelProps {
+  workforcePanelKey: string;
+  hasAnyMessages: boolean;
+  isSidePanelVisible: boolean;
+  onToggleSidePanel: () => void;
+  /** Controlled: whether the full-screen workforce overlay is open. */
+  isExpandedOverlayOpen: boolean;
+  onToggleExpandedOverlay: () => void;
+  onCloseExpandedOverlay: () => void;
+}
+
+export function WorkforceSidePanel({
+  workforcePanelKey,
+  hasAnyMessages: _hasAnyMessages,
+  isSidePanelVisible,
+  onToggleSidePanel,
+  isExpandedOverlayOpen,
+  onToggleExpandedOverlay,
+  onCloseExpandedOverlay,
+}: WorkforceSidePanelProps) {
+  const { t } = useTranslation();
+  const { chatStore, projectStore } = useChatStoreAdapter();
+  const setActiveWorkspaceTab = usePageTabStore((s) => s.setActiveWorkspaceTab);
+  const activeTask = chatStore?.activeTaskId
+    ? chatStore.tasks[chatStore.activeTaskId]
+    : undefined;
+
+  const agents = activeTask?.taskAssigning ?? [];
+  /** Subtask status is updated in `taskRunning` (e.g. TASK_STATE); `taskInfo` keeps plan text/order. */
+  const subtasks = useMemo(() => {
+    const taskInfo = activeTask?.taskInfo ?? [];
+    const taskRunning = activeTask?.taskRunning ?? [];
+    if (taskRunning.length === 0) return taskInfo;
+    const runById = new Map(
+      taskRunning.map((r) => [r.id, r] as [string, TaskInfo])
+    );
+    return taskInfo.map((t) => {
+      const live = runById.get(t.id);
+      if (!live) return t;
+      return { ...t, ...live, content: t.content || live.content };
+    });
+  }, [activeTask?.taskInfo, activeTask?.taskRunning]);
+  const files = useMemo(
+    () => collectSidePanelOutputFiles(activeTask),
+    [activeTask]
+  );
+  const uploadedFiles = useMemo(() => {
+    if (!activeTask) return [];
+    const all = [
+      ...(activeTask.messages ?? [])
+        .filter((m) => m.role === 'user')
+        .flatMap((m) => m.attaches ?? []),
+      ...(activeTask.attaches ?? []),
+    ];
+    const seen = new Set<string>();
+    return all.filter((file) => {
+      const key = file.filePath;
+      if (!key || seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    });
+  }, [activeTask]);
+  const contextItems = useMemo(
+    () => buildContextItems(agents, activeTask?.taskRunning, uploadedFiles),
+    [agents, activeTask?.taskRunning, uploadedFiles]
+  );
+
+  const handleOpenAgentFile = useCallback(
+    (file: FileInfo) => {
+      if (!chatStore?.activeTaskId) return;
+      chatStore.setSelectedFile(chatStore.activeTaskId, file);
+      setActiveWorkspaceTab('inbox', {
+        clearInboxForProjectId: projectStore.activeProjectId ?? null,
+      });
+    },
+    [chatStore, projectStore.activeProjectId, setActiveWorkspaceTab]
+  );
+
+  return (
+    <>
+      <div className={cn(WORKFORCE_MAIN_SURFACE_CLASS, 'relative')}>
+        <div className="gap-2 px-2 pb-2 min-h-0 min-w-0 flex flex-1 flex-col overflow-x-hidden overflow-y-auto">
+          <AgentPoolSection
+            title={t('layout.workforce-agent-pool', {
+              defaultValue: 'Agent Pool',
+            })}
+            agents={agents}
+          />
+          <ProgressSection
+            title={t('layout.workforce-progress', {
+              defaultValue: 'Progress',
+            })}
+            subtasks={subtasks}
+          />
+          <ExecutionContextSection
+            title={t('layout.execution-context', {
+              defaultValue: 'Execution Context',
+            })}
+            items={contextItems}
+          />
+          <AgentFolderSection
+            title={t('layout.workforce-agent-folder', {
+              defaultValue: 'Agent Folder',
+            })}
+            files={files}
+            onOpenFile={handleOpenAgentFile}
+          />
+        </div>
+      </div>
+
+      <ExpandedOverlay
+        open={isExpandedOverlayOpen}
+        onClose={onCloseExpandedOverlay}
+        workforcePanelKey={workforcePanelKey}
+        onToggleSidePanel={onToggleSidePanel}
+        isSidePanelVisible={isSidePanelVisible}
+      />
+    </>
+  );
+}
diff --git a/src/components/Session/Workforce/WorkforceSidePanelHeaderEnd.tsx b/src/components/Session/Workforce/WorkforceSidePanelHeaderEnd.tsx
new file mode 100644
index 000000000..b4dad0e74
--- /dev/null
+++ b/src/components/Session/Workforce/WorkforceSidePanelHeaderEnd.tsx
@@ -0,0 +1,66 @@
+// ========= 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 { TooltipSimple } from '@/components/ui/tooltip';
+import { Maximize2, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+export interface WorkforceSidePanelHeaderEndProps {
+  isExpandedOverlayOpen: boolean;
+  onToggleExpandedOverlay: () => void;
+}
+
+export function WorkforceSidePanelHeaderEnd({
+  isExpandedOverlayOpen,
+  onToggleExpandedOverlay,
+}: WorkforceSidePanelHeaderEndProps) {
+  const { t } = useTranslation();
+  return (
+    <TooltipSimple
+      content={
+        isExpandedOverlayOpen
+          ? t('layout.close')
+          : t('layout.expand-workforce', {
+              defaultValue: 'Expand workforce',
+            })
+      }
+      delayDuration={300}
+      side="bottom"
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        buttonContent="icon-only"
+        buttonRadius="lg"
+        className="shrink-0"
+        onClick={onToggleExpandedOverlay}
+        aria-pressed={isExpandedOverlayOpen}
+        aria-label={
+          isExpandedOverlayOpen
+            ? t('layout.close')
+            : t('layout.expand-workforce', {
+                defaultValue: 'Expand workforce',
+              })
+        }
+      >
+        {isExpandedOverlayOpen ? (
+          <X className="h-4 w-4" />
+        ) : (
+          <Maximize2 className="h-4 w-4" />
+        )}
+      </Button>
+    </TooltipSimple>
+  );
+}
diff --git a/src/components/Session/index.tsx b/src/components/Session/index.tsx
new file mode 100644
index 000000000..57ea0ea0f
--- /dev/null
+++ b/src/components/Session/index.tsx
@@ -0,0 +1,149 @@
+// ========= 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 ChatBox from '@/components/ChatBox';
+import { HeaderBox } from '@/components/Session/HeaderBox';
+import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+import { cn } from '@/lib/utils';
+import { usePageTabStore } from '@/store/pageTabStore';
+import { ChatTaskStatus, SessionMode } from '@/types/constants';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { SessionSidePanel } from './SessionSidePanel';
+import {
+  SESSION_SIDE_PANEL_EXPANDED_OUTER_CLASS,
+  SESSION_SIDE_PANEL_FOLDED_OUTER_CLASS,
+} from './sessionSidePanelLayout';
+
+/**
+ * Active session: header + chat (left) and a mode-dependent side panel (right).
+ * The side panel is selected by `sessionSidePanelMode` in the page tab store
+ * (Workspace toggle: Single Agent vs Workforce).
+ */
+export default function Session() {
+  const { chatStore, projectStore } = useChatStoreAdapter();
+  const activeWorkspaceTab = usePageTabStore((s) => s.activeWorkspaceTab);
+  const setActiveWorkspaceTab = usePageTabStore((s) => s.setActiveWorkspaceTab);
+  const sessionMode = usePageTabStore(
+    (s) => s.sessionSidePanelMode ?? SessionMode.WORKFORCE
+  );
+
+  const [isSidePanelVisible, setIsSidePanelVisible] = useState(true);
+  const [isExpandedOverlayOpen, setIsExpandedOverlayOpen] = useState(false);
+
+  const getAllChatStoresMemoized = useMemo(() => {
+    if (!projectStore.activeProjectId) return [];
+    return projectStore.getAllChatStores(projectStore.activeProjectId);
+  }, [projectStore]);
+
+  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]);
+
+  const workforcePanelKey = chatStore?.activeTaskId ?? '';
+
+  const hasSessionStarted = useMemo(() => {
+    if (!chatStore) return false;
+    return Object.values(chatStore.tasks).some((task) => {
+      const started =
+        (task.messages?.length || 0) > 0 ||
+        task.hasMessages ||
+        task.status !== ChatTaskStatus.PENDING;
+      return started;
+    });
+  }, [chatStore]);
+
+  useEffect(() => {
+    if (!hasSessionStarted) {
+      setActiveWorkspaceTab('workforce');
+    }
+  }, [hasSessionStarted, setActiveWorkspaceTab]);
+
+  useEffect(() => {
+    setIsExpandedOverlayOpen(false);
+  }, [projectStore.activeProjectId]);
+
+  useEffect(() => {
+    if (activeWorkspaceTab !== 'session') {
+      setIsExpandedOverlayOpen(false);
+    }
+  }, [activeWorkspaceTab]);
+
+  const toggleSidePanel = useCallback(() => {
+    setIsSidePanelVisible((prev) => !prev);
+  }, []);
+
+  const toggleExpandedOverlay = useCallback(() => {
+    setIsExpandedOverlayOpen((prev) => !prev);
+  }, []);
+
+  const closeExpandedOverlay = useCallback(() => {
+    setIsExpandedOverlayOpen(false);
+  }, []);
+
+  if (!chatStore) {
+    return null;
+  }
+
+  return (
+    <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 flex flex-1 flex-col overflow-hidden">
+        {chatStore.activeTaskId && hasAnyMessages && (
+          <HeaderBox
+            totalTokens={chatStore.tasks[chatStore.activeTaskId]?.tokens || 0}
+          />
+        )}
+        <ChatBox />
+      </div>
+
+      <div
+        id="session-side-panel"
+        className={cn(
+          'min-h-0 ease-out flex shrink-0 flex-col overflow-hidden transition-[width] duration-200',
+          isSidePanelVisible
+            ? SESSION_SIDE_PANEL_EXPANDED_OUTER_CLASS
+            : cn(SESSION_SIDE_PANEL_FOLDED_OUTER_CLASS, 'rounded-l-xl')
+        )}
+      >
+        <SessionSidePanel
+          mode={sessionMode}
+          workforcePanelKey={workforcePanelKey}
+          hasAnyMessages={hasAnyMessages}
+          isSidePanelVisible={isSidePanelVisible}
+          onToggleSidePanel={toggleSidePanel}
+          isExpandedOverlayOpen={isExpandedOverlayOpen}
+          onToggleExpandedOverlay={toggleExpandedOverlay}
+          onCloseExpandedOverlay={closeExpandedOverlay}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Session/sessionSidePanelLayout.ts b/src/components/Session/sessionSidePanelLayout.ts
new file mode 100644
index 000000000..64c7748cb
--- /dev/null
+++ b/src/components/Session/sessionSidePanelLayout.ts
@@ -0,0 +1,24 @@
+// ========= 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. =========
+
+/** Full logical width of the session side panel content (clipped by the outer when folded to 40px). */
+export const SESSION_SIDE_PANEL_CONTENT_WIDTH_CLASS =
+  'w-[min(360px,40vw)] max-w-[400px]';
+
+/** Outer `#session-side-panel` when expanded (same as content width; no extra clip). */
+export const SESSION_SIDE_PANEL_EXPANDED_OUTER_CLASS =
+  SESSION_SIDE_PANEL_CONTENT_WIDTH_CLASS;
+
+/** Outer shell when folded: fixed 40px; content layer keeps `SESSION_SIDE_PANEL_CONTENT_WIDTH_CLASS`. */
+export const SESSION_SIDE_PANEL_FOLDED_OUTER_CLASS = 'w-[40px]';
diff --git a/src/components/SideBar/index.tsx b/src/components/SideBar/index.tsx
deleted file mode 100644
index 4c00b2df3..000000000
--- a/src/components/SideBar/index.tsx
+++ /dev/null
@@ -1,120 +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 {
-  MenuToggleGroup,
-  MenuToggleItem,
-} from '@/components/MenuButton/MenuButton';
-import { TooltipSimple } from '@/components/ui/tooltip';
-import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
-import {
-  FileDown,
-  Inbox,
-  LayoutGrid,
-  Network,
-  PinIcon,
-  Settings2Icon,
-  ZapIcon,
-} from 'lucide-react';
-
-// Icons - you can replace these with actual icon components
-const HomeIcon = () => <LayoutGrid />;
-
-const WorkflowIcon = () => <Network />;
-
-const InboxIcon = () => <Inbox />;
-
-const SettingsIcon = () => <Settings2Icon />;
-
-const BugIcon = () => <FileDown />;
-
-// Red dot notification indicator
-const RedDotIcon = () => (
-  <div className="h-2 w-2 shrink-0 rounded-full bg-red-500" />
-);
-
-interface SideBarProps {
-  className?: string;
-  activeTab: string;
-  onTabChange: (tab: string) => void;
-}
-
-export default function SideBar({
-  className,
-  activeTab,
-  onTabChange,
-}: SideBarProps) {
-  const { chatStore } = useChatStoreAdapter();
-
-  const menuItems = [
-    { id: 'tasks', icon: <PinIcon />, label: 'Tasks' },
-    { id: 'trigger', icon: <ZapIcon />, label: 'Trigger' },
-    { id: 'inbox', icon: <InboxIcon />, label: 'Inbox' },
-  ];
-
-  // Check if there are new files
-  const nuwFileNum = chatStore?.activeTaskId
-    ? chatStore.tasks[chatStore.activeTaskId]?.nuwFileNum || 0
-    : 0;
-
-  const hasNewFiles = nuwFileNum > 0;
-
-  // Handle tab change and reset notification when inbox is clicked
-  const handleTabChange = (tab: string) => {
-    if (tab === 'inbox' && chatStore?.activeTaskId) {
-      // Reset the new file counter when user views inbox
-      chatStore.setNuwFileNum(chatStore.activeTaskId, 0);
-    }
-    onTabChange(tab);
-  };
-
-  return (
-    <div
-      className={`flex h-full flex-col items-center gap-1 pr-1 pt-2 ${className}`}
-    >
-      {/* Main menu items */}
-      <div className="flex flex-col gap-1">
-        <MenuToggleGroup
-          type="single"
-          orientation="vertical"
-          value={activeTab}
-          onValueChange={handleTabChange}
-        >
-          {menuItems.map((item) => (
-            <TooltipSimple
-              key={item.id}
-              content={item.label}
-              side="right"
-              delayDuration={0}
-            >
-              <span>
-                <MenuToggleItem
-                  value={item.id}
-                  size="iconxs"
-                  icon={item.icon}
-                  subIcon={
-                    item.id === 'inbox' && hasNewFiles ? (
-                      <RedDotIcon />
-                    ) : undefined
-                  }
-                  showSubIcon={item.id === 'inbox' && hasNewFiles}
-                />
-              </span>
-            </TooltipSimple>
-          ))}
-        </MenuToggleGroup>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/TaskState/index.tsx b/src/components/TaskState/index.tsx
index 2ff5e0150..7385a11c7 100644
--- a/src/components/TaskState/index.tsx
+++ b/src/components/TaskState/index.tsx
@@ -13,7 +13,12 @@
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
-import { CircleCheckBig, CircleSlash2, LoaderCircle } from 'lucide-react';
+import {
+  Circle,
+  CircleCheckBig,
+  CircleSlash2,
+  LoaderCircle,
+} from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 export type TaskStateType =
@@ -70,16 +75,18 @@ export const TaskState = ({
 
   return (
     <div>
-      <div className="flex w-auto flex-wrap items-center gap-1 bg-transparent">
+      <div className="gap-1 flex w-auto flex-wrap items-center bg-transparent">
         {/* All */}
         {all && (forceVisible || all > 0) ? (
           <div
-            className={`group flex items-center gap-xs px-2 py-0.5 transition-all duration-200 hover:bg-tag-surface ${
-              isSelected('all') ? 'bg-tag-surface' : 'bg-transparent'
+            className={`group gap-xs rounded-md px-2 py-0.5 hover:bg-ds-bg-neutral-subtle-default flex items-center transition-all duration-200 ${
+              isSelected('all')
+                ? 'bg-ds-bg-neutral-subtle-default'
+                : 'bg-transparent'
             } ${clickable ? 'cursor-pointer' : ''}`}
             onClick={() => handleStateClick('all')}
           >
-            <span className="text-xs font-normal text-text-body">
+            <span className="text-xs font-normal text-ds-text-neutral-default-default">
               {t('chat.all')} <span className={numberClass}>{all}</span>
             </span>
           </div>
@@ -88,21 +95,23 @@ export const TaskState = ({
         {/* Done */}
         {done && (forceVisible || done > 0) ? (
           <div
-            className={`group flex items-center gap-xs px-0.5 py-0.5 transition-all duration-200 hover:bg-tag-surface ${
-              isSelected('done') && 'bg-tag-surface'
+            className={`group gap-xs rounded-md px-0.5 py-0.5 hover:bg-ds-bg-neutral-subtle-default flex items-center transition-all duration-200 ${
+              isSelected('done') && 'bg-ds-bg-neutral-subtle-default'
             } ${
               clickable && 'cursor-pointer transition-opacity hover:opacity-80'
             }`}
             onClick={() => handleStateClick('done')}
           >
             <CircleCheckBig
-              className={`h-[10px] w-[10px] text-icon-secondary group-hover:text-icon-success ${
-                (isSelected('done') || forceVisible) && '!text-icon-success'
+              className={`text-ds-icon-neutral-muted-default group-hover:text-ds-icon-status-completed-default-default h-[10px] w-[10px] ${
+                (isSelected('done') || forceVisible) &&
+                '!text-ds-icon-status-completed-default-default'
               }`}
             />
             <span
-              className={`text-xs font-normal leading-tight text-text-label transition-all duration-200 group-hover:text-text-success ${
-                (isSelected('done') || forceVisible) && '!text-text-success'
+              className={`text-xs font-normal leading-tight text-ds-text-neutral-muted-default group-hover:text-ds-text-status-completed-strong-default transition-all duration-200 ${
+                (isSelected('done') || forceVisible) &&
+                '!text-ds-text-status-completed-strong-default'
               }`}
             >
               {t('chat.done')} <span className={numberClass}>{done}</span>
@@ -113,23 +122,23 @@ export const TaskState = ({
         {/* Reassigned */}
         {reAssignTo && (forceVisible || reAssignTo > 0) ? (
           <div
-            className={`group flex items-center gap-xs px-0.5 py-0.5 transition-all duration-200 hover:bg-tag-surface ${
-              isSelected('reassigned') && 'bg-tag-surface'
+            className={`group gap-xs rounded-md px-0.5 py-0.5 hover:bg-ds-bg-neutral-subtle-default flex items-center transition-all duration-200 ${
+              isSelected('reassigned') && 'bg-ds-bg-neutral-subtle-default'
             } ${
               clickable && 'cursor-pointer transition-opacity hover:opacity-80'
             }`}
             onClick={() => handleStateClick('reassigned')}
           >
             <CircleSlash2
-              className={`h-[10px] w-[10px] text-icon-secondary group-hover:text-icon-warning ${
+              className={`text-ds-icon-neutral-muted-default group-hover:text-ds-icon-status-pending-default-default h-[10px] w-[10px] ${
                 (isSelected('reassigned') || forceVisible) &&
-                '!text-icon-warning'
+                '!text-ds-icon-status-pending-default-default'
               }`}
             />
             <span
-              className={`text-xs font-normal leading-tight text-text-label transition-all duration-200 group-hover:text-text-warning ${
+              className={`text-xs font-normal leading-tight text-ds-text-neutral-muted-default group-hover:text-ds-text-warning-strong-default transition-all duration-200 ${
                 (isSelected('reassigned') || forceVisible) &&
-                '!text-text-warning'
+                '!text-ds-text-warning-strong-default'
               }`}
             >
               {t('chat.reassigned')}{' '}
@@ -141,26 +150,26 @@ export const TaskState = ({
         {/* Ongoing */}
         {progress && (forceVisible || progress > 0) ? (
           <div
-            className={`group flex items-center gap-xs px-0.5 py-0.5 hover:bg-tag-surface ${
-              isSelected('ongoing') && 'bg-tag-surface'
+            className={`group gap-xs rounded-md px-0.5 py-0.5 hover:bg-ds-bg-neutral-subtle-default flex items-center ${
+              isSelected('ongoing') && 'bg-ds-bg-neutral-subtle-default'
             } ${
               clickable && 'cursor-pointer transition-opacity hover:opacity-80'
             }`}
             onClick={() => handleStateClick('ongoing')}
           >
             <LoaderCircle
-              className={`h-[10px] w-[10px] text-icon-secondary group-hover:text-icon-information ${
+              className={`text-ds-icon-neutral-muted-default group-hover:text-ds-icon-status-splitting-default-default h-[10px] w-[10px] ${
                 (isSelected('ongoing') || forceVisible) &&
-                '!text-icon-information'
+                '!text-ds-icon-status-splitting-default-default'
               } ${
                 chatStore.tasks[chatStore.activeTaskId as string]?.status ===
                   'running' && 'animate-spin'
               }`}
             />
             <span
-              className={`text-xs font-normal leading-tight text-text-label transition-all duration-200 group-hover:text-text-information ${
+              className={`text-xs font-normal leading-tight text-ds-text-neutral-muted-default group-hover:text-ds-text-status-splitting-strong-default transition-all duration-200 ${
                 (isSelected('ongoing') || forceVisible) &&
-                '!text-text-information'
+                '!text-ds-text-status-splitting-strong-default'
               }`}
             >
               {t('chat.ongoing')}{' '}
@@ -172,21 +181,23 @@ export const TaskState = ({
         {/* Failed */}
         {failed && (forceVisible || failed > 0) ? (
           <div
-            className={`group flex items-center gap-xs px-0.5 py-0.5 transition-all duration-200 hover:bg-tag-surface ${
-              isSelected('failed') && 'bg-tag-surface'
+            className={`group gap-xs rounded-md px-0.5 py-0.5 hover:bg-ds-bg-neutral-subtle-default flex items-center transition-all duration-200 ${
+              isSelected('failed') && 'bg-ds-bg-neutral-subtle-default'
             } ${
               clickable && 'cursor-pointer transition-opacity hover:opacity-80'
             }`}
             onClick={() => handleStateClick('failed')}
           >
             <CircleSlash2
-              className={`h-[10px] w-[10px] text-icon-secondary group-hover:text-icon-cuation ${
-                (isSelected('failed') || forceVisible) && '!text-icon-cuation'
+              className={`text-ds-icon-neutral-muted-default group-hover:text-ds-icon-status-error-default-default h-[10px] w-[10px] ${
+                (isSelected('failed') || forceVisible) &&
+                '!text-ds-icon-status-error-default-default'
               }`}
             />
             <span
-              className={`text-xs font-normal leading-tight text-text-label transition-all duration-200 group-hover:!text-icon-cuation ${
-                (isSelected('failed') || forceVisible) && '!text-text-cuation'
+              className={`text-xs font-normal leading-tight text-ds-text-neutral-muted-default group-hover:text-ds-text-status-error-strong-default transition-all duration-200 ${
+                (isSelected('failed') || forceVisible) &&
+                '!text-ds-text-status-error-strong-default'
               }`}
             >
               {t('chat.failed')} <span className={numberClass}>{failed}</span>
@@ -196,23 +207,25 @@ export const TaskState = ({
         {/* Pending */}
         {skipped && (forceVisible || skipped > 0) ? (
           <div
-            className={`group flex items-center gap-xs px-0.5 py-0.5 hover:bg-tag-surface ${
-              isSelected('pending') ? 'bg-tag-surface' : 'bg-transparent'
+            className={`group gap-xs rounded-md px-0.5 py-0.5 hover:bg-ds-bg-status-pending-subtle-hover flex items-center ${
+              isSelected('pending')
+                ? 'bg-ds-bg-status-pending-subtle-default'
+                : 'bg-transparent'
             } ${
               clickable && 'cursor-pointer transition-opacity hover:opacity-80'
             }`}
             onClick={() => handleStateClick('pending')}
           >
-            <LoaderCircle
-              className={`group-hover:text-primary-foreground h-[10px] w-[10px] text-icon-secondary ${
+            <Circle
+              className={`text-ds-icon-neutral-muted-default group-hover:text-ds-icon-status-pending-default-default h-[10px] w-[10px] ${
                 (isSelected('pending') || forceVisible) &&
-                'text-primary-foreground'
+                'text-ds-icon-status-pending-default-default'
               }`}
             />
             <span
-              className={`group-hover:text-primary-foreground text-xs font-normal leading-tight text-text-label ${
+              className={`text-xs font-normal leading-tight text-ds-text-neutral-muted-default group-hover:text-ds-text-status-pending-strong-default ${
                 (isSelected('pending') || forceVisible) &&
-                'text-primary-foreground'
+                'text-ds-text-status-pending-strong-default'
               }`}
             >
               {t('chat.pending')} <span className={numberClass}>{skipped}</span>
diff --git a/src/components/Terminal/index.tsx b/src/components/Terminal/index.tsx
index 7fdbbc59c..fed46495b 100644
--- a/src/components/Terminal/index.tsx
+++ b/src/components/Terminal/index.tsx
@@ -131,9 +131,9 @@ export default function TerminalComponent({
     const terminal = new Terminal({
       theme: {
         background: 'transparent', // transparent background
-        foreground: '#ffffff', // white foreground
-        cursor: '#00ff00', // green cursor
-        cursorAccent: '#00ff00', // cursor accent
+        foreground: '#ffffff',
+        cursor: '#00ff00',
+        cursorAccent: '#00ff00',
       },
       fontFamily: '"Courier New", Courier, monospace', // monospace font
       fontSize: 12, // font size
@@ -354,16 +354,16 @@ export default function TerminalComponent({
   return (
     <div
       ref={terminalContainerRef}
-      className="relative flex h-full w-full flex-col overflow-hidden rounded-2xl border border-solid border-border-subtle-strong"
+      className="rounded-2xl relative flex h-full w-full flex-col overflow-hidden"
       style={{ fontFamily: '"Courier New", Courier, monospace' }}
     >
       {/* background blur effect */}
-      <div className="blur-bg pointer-events-none absolute inset-0 rounded-xl bg-black-100%"></div>
+      <div className="blur-bg inset-0 rounded-xl bg-terminal-viewport-surface pointer-events-none absolute"></div>
 
       {/* terminal container */}
       <div
         ref={terminalRef}
-        className="absolute inset-0 z-10"
+        className="inset-0 absolute z-10"
         style={{
           margin: '16px',
           width: 'calc(100% - 32px)',
diff --git a/src/components/TerminalAgentWorkspace/index.tsx b/src/components/TerminalAgentWorkspace/index.tsx
index 266dbf30e..b25aabd1e 100644
--- a/src/components/TerminalAgentWorkspace/index.tsx
+++ b/src/components/TerminalAgentWorkspace/index.tsx
@@ -63,43 +63,51 @@ export default function TerminalAgentWorkspace() {
   const agentMap = {
     developer_agent: {
       name: 'Developer Agent',
-      icon: <CodeXml size={16} className="text-text-primary" />,
+      icon: (
+        <CodeXml size={16} className="text-ds-text-neutral-default-default" />
+      ),
       textColor: 'text-emerald-700',
-      bgColor: 'bg-bg-fill-coding-active',
-      shapeColor: 'bg-bg-fill-coding-default',
-      borderColor: 'border-bg-fill-coding-active',
+      bgColor: 'bg-ds-bg-terminal-default-default',
+      shapeColor: 'bg-ds-bg-terminal-subtle-default',
+      borderColor: 'border-ds-border-terminal-default-default',
       bgColorLight: 'bg-emerald-200',
     },
     browser_agent: {
       name: 'Browser Agent',
-      icon: <Globe size={16} className="text-text-primary" />,
+      icon: (
+        <Globe size={16} className="text-ds-text-neutral-default-default" />
+      ),
       textColor: 'text-blue-700',
-      bgColor: 'bg-bg-fill-browser-active',
-      shapeColor: 'bg-bg-fill-browser-default',
-      borderColor: 'border-bg-fill-browser-active',
+      bgColor: 'bg-ds-bg-browser-default-default',
+      shapeColor: 'bg-ds-bg-browser-subtle-default',
+      borderColor: 'border-ds-border-browser-default-default',
       bgColorLight: 'bg-blue-200',
     },
     document_agent: {
       name: 'Document Agent',
-      icon: <FileText size={16} className="text-text-primary" />,
+      icon: (
+        <FileText size={16} className="text-ds-text-neutral-default-default" />
+      ),
       textColor: 'text-yellow-700',
-      bgColor: 'bg-bg-fill-writing-active',
-      shapeColor: 'bg-bg-fill-writing-default',
-      borderColor: 'border-bg-fill-writing-active',
+      bgColor: 'bg-ds-bg-document-default-default',
+      shapeColor: 'bg-ds-bg-document-subtle-default',
+      borderColor: 'border-ds-border-document-default-default',
       bgColorLight: 'bg-yellow-200',
     },
     multi_modal_agent: {
       name: 'Multi Modal Agent',
-      icon: <Image size={16} className="text-text-primary" />,
+      icon: (
+        <Image size={16} className="text-ds-text-neutral-default-default" />
+      ),
       textColor: 'text-fuchsia-700',
-      bgColor: 'bg-bg-fill-multimodal-active',
-      shapeColor: 'bg-bg-fill-multimodal-default',
-      borderColor: 'border-bg-fill-multimodal-active',
+      bgColor: 'bg-ds-bg-neutral-default-default',
+      shapeColor: 'bg-ds-bg-neutral-subtle-default',
+      borderColor: 'border-ds-border-neutral-default-default',
       bgColorLight: 'bg-fuchsia-200',
     },
     social_media_agent: {
       name: 'Social Media Agent',
-      icon: <Bird size={16} className="text-text-primary" />,
+      icon: <Bird size={16} className="text-ds-text-neutral-default-default" />,
       textColor: 'text-purple-700',
       bgColor: 'bg-violet-700',
       shapeColor: 'bg-violet-300',
@@ -116,9 +124,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-ds-border-status-completed-default-default bg-ds-bg-neutral-strong-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-ds-border-neutral-strong-default p-1 rounded-full border border-solid bg-transparent">
           <Button
             size="sm"
             variant="success"
@@ -131,8 +139,11 @@ export default function TerminalAgentWorkspace() {
             }}
             className="rounded-full"
           >
-            <ChevronLeft size={16} className="text-text-inverse-primary" />
-            <span className="text-sm font-bold leading-13 text-text-inverse-primary">
+            <ChevronLeft
+              size={16}
+              className="text-ds-text-neutral-inverse-default"
+            />
+            <span className="text-sm font-bold leading-13 text-ds-text-neutral-inverse-default">
               {t('chat.give-back-to-agent')}
             </span>
           </Button>
@@ -142,13 +153,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="backdrop-blur-sm rounded-xl bg-ds-bg-neutral-default-default 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(
@@ -160,14 +172,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" />
+              <Bot className="h-4 w-4 text-ds-icon-neutral-default-default" />
               <div
-                className={`text-[10px] font-bold leading-17 ${
+                className={`font-bold leading-17 text-[10px] ${
                   agentMap[activeAgent?.type as keyof typeof agentMap]
                     ?.textColor
                 }`}
@@ -175,7 +187,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-ds-text-neutral-muted-default text-[10px]">
               {
                 activeAgent?.tasks?.filter(
                   (task) => task.status && task.status !== 'running'
@@ -184,7 +196,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>
@@ -202,7 +214,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}
@@ -212,10 +224,10 @@ export default function TerminalAgentWorkspace() {
                     )[0].terminal
                   }
                 />
-                {/* <div className=" flex justify-center items-center opacity-0  transition-all group-hover:opacity-100 rounded-b-lg absolute inset-0 w-full h-full bg-black/20 pointer-events-none">
-									<Button className="cursor-pointer px-md py-sm h-auto flex gap-sm rounded-full bg-bg-fill-primary">
-										<Hand size={24} className="text-icon-inverse-primary" />
-										<span className="text-base leading-9 font-medium text-text-inverse-primary">
+                {/* <div className=" flex justify-center items-center opacity-0  transition-all group-hover:opacity-[0.67] rounded-b-lg absolute inset-0 w-full h-full bg-dialog-overlay-dark pointer-events-none">
+									<Button className="cursor-pointer px-md py-sm h-auto flex gap-sm rounded-full bg-ds-bg-brand-default-default">
+										<Hand size={24} className="text-ds-icon-neutral-inverse-default" />
+										<span className="text-base leading-9 font-medium text-ds-text-neutral-inverse-default">
 											Take Control
 										</span>
 									</Button>
@@ -231,7 +243,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)
@@ -239,7 +251,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)]'
@@ -248,14 +260,14 @@ export default function TerminalAgentWorkspace() {
                       <Terminal instanceId={task.id} content={task.terminal} />
                       {/* <div
 												onClick={() => handleTakeControl(task.id)}
-												className="flex justify-center items-center opacity-0  transition-all group-hover:opacity-100 rounded-lg absolute inset-0 w-full h-full bg-black/20 pointer-events-none"
+												className="flex justify-center items-center opacity-0  transition-all group-hover:opacity-[0.67] rounded-lg absolute inset-0 w-full h-full bg-dialog-overlay-dark pointer-events-none"
 											>
-												<Button className="cursor-pointer px-md py-sm h-auto flex gap-sm rounded-full bg-bg-fill-primary">
+												<Button className="cursor-pointer px-md py-sm h-auto flex gap-sm rounded-full bg-ds-bg-brand-default-default">
 													<Hand
 														size={24}
-														className="text-icon-inverse-primary"
+														className="text-ds-icon-neutral-inverse-default"
 													/>
-													<span className="text-base leading-9 font-medium text-text-inverse-primary">
+													<span className="text-base leading-9 font-medium text-ds-text-neutral-inverse-default">
 														Take Control
 													</span>
 												</Button>
@@ -269,10 +281,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-ds-border-neutral-strong-default bg-ds-bg-neutral-strong-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) {
@@ -298,7 +311,8 @@ export default function TerminalAgentWorkspace() {
             )}
             {isSingleMode && (
               <Button
-                size="icon"
+                size="xs"
+                buttonContent="icon-only"
                 variant="ghost"
                 onClick={() => {
                   if (scrollContainerRef.current) {
@@ -320,7 +334,8 @@ export default function TerminalAgentWorkspace() {
               </Button>
             )}
             <Button
-              size="icon"
+              size="xs"
+              buttonContent="icon-only"
               variant="ghost"
               onClick={() => {
                 setIsSingleMode(!isSingleMode);
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
deleted file mode 100644
index b6800d2d2..000000000
--- a/src/components/ThemeProvider.tsx
+++ /dev/null
@@ -1,61 +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 { useAuthStore } from '@/store/authStore';
-import { useEffect } from 'react';
-
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const { appearance } = useAuthStore();
-
-  useEffect(() => {
-    // set data-theme attribute based on appearance
-    const root = document.documentElement;
-
-    // remove all possible data-theme attributes
-    root.removeAttribute('data-theme');
-
-    switch (appearance) {
-      case 'transparent':
-        root.setAttribute('data-theme', 'transparent');
-        break;
-      case 'light':
-        root.setAttribute('data-theme', 'light');
-        break;
-      case 'dark':
-        root.setAttribute('data-theme', 'dark');
-        break;
-      default:
-        root.setAttribute('data-theme', 'light');
-    }
-  }, [appearance]);
-
-  // initialize theme
-  useEffect(() => {
-    const root = document.documentElement;
-    const currentTheme = root.getAttribute('data-theme');
-
-    if (!currentTheme) {
-      if (appearance === 'transparent') {
-        root.setAttribute('data-theme', 'transparent');
-      } else if (appearance === 'dark') {
-        root.setAttribute('data-theme', 'dark');
-      } else {
-        root.setAttribute('data-theme', 'light');
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // only execute once when the component is mounted
-
-  return <>{children}</>;
-}
diff --git a/src/components/TopBar/index.tsx b/src/components/TopBar/index.tsx
index 529056cf2..55d024ead 100644
--- a/src/components/TopBar/index.tsx
+++ b/src/components/TopBar/index.tsx
@@ -18,10 +18,13 @@ 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 eigentAppIconBlack from '@/assets/logo/icon_black.svg';
+import eigentAppIconWhite from '@/assets/logo/icon_white.svg';
 import EndNoticeDialog from '@/components/Dialog/EndNotice';
+import ReportBugDialog from '@/components/Dialog/ReportBugDialog';
+import NotificationPanel from '@/components/Notification';
 import { Button } from '@/components/ui/button';
 import { TooltipSimple } from '@/components/ui/tooltip';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
@@ -31,25 +34,96 @@ import { share } from '@/lib/share';
 import { useAuthStore } from '@/store/authStore';
 import { useInstallationUI } from '@/store/installationStore';
 import { usePageTabStore } from '@/store/pageTabStore';
+import { useProjectStore } from '@/store/projectStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { ChatTaskStatus } from '@/types/constants';
+import { AnimatePresence, motion } from 'framer-motion';
 import {
-  ChevronDown,
+  Archive,
+  Bell,
   ChevronLeft,
-  FileDown,
-  House,
+  ChevronRight,
+  CircleHelp,
   Minus,
+  PanelLeft,
+  PanelLeftClose,
   Plus,
-  Power,
   Settings,
+  Share,
   Square,
   X,
 } from 'lucide-react';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, 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;
+}
+
+const topBarCrossfade = {
+  duration: 0.2,
+  ease: [0.4, 0, 0.2, 1] as const,
+};
+
 function HeaderWin() {
   const { t } = useTranslation();
   const host = useHost();
@@ -58,55 +132,87 @@ function HeaderWin() {
   const [platform, setPlatform] = useState<string>('');
   const navigate = useNavigate();
   const location = useLocation();
-  //Get Chatstore for the active project's task
-  const { chatStore, projectStore } = useChatStoreAdapter();
-  const { toggle } = useSidebarStore();
-  const { chatPanelPosition, setChatPanelPosition } = usePageTabStore();
-  const appearance = useAuthStore((state) => state.appearance);
+  const { canGoBack, canGoForward } = useStackNavigationBounds();
+  const [reportBugOpen, setReportBugOpen] = useState(false);
   const [endDialogOpen, setEndDialogOpen] = useState(false);
   const [endProjectLoading, setEndProjectLoading] = useState(false);
+  //Get Chatstore for the active project's task
+  const { chatStore } = useChatStoreAdapter();
+  const projectStore = useProjectStore();
+  const setActiveWorkspaceTab = usePageTabStore((s) => s.setActiveWorkspaceTab);
+  const projectSidebarFolded = usePageTabStore((s) => s.projectSidebarFolded);
+  const toggleProjectSidebarFolded = usePageTabStore(
+    (s) => s.toggleProjectSidebarFolded
+  );
+  const historySidebarOpen = useSidebarStore((s) => s.isOpen);
+  const toggleHistorySidebar = useSidebarStore((s) => s.toggle);
+  const appearance = useAuthStore((state) => state.appearance);
+  const [notificationPanelOpen, setNotificationPanelOpen] = useState(false);
+  const [packageUpdateAvailable, setPackageUpdateAvailable] = useState(false);
+  const ipcRenderer = host?.ipcRenderer;
   const { isInstalling, installationState } = useInstallationUI();
   const _isInstallationActive =
     isInstalling || installationState === 'waiting-backend';
 
   useEffect(() => {
-    setPlatform(host?.electronAPI?.getPlatform?.() ?? 'web');
+    if (!host?.electronAPI?.getPlatform) return;
+    const p = host.electronAPI.getPlatform();
+    setPlatform(p);
   }, [host]);
-  const exportLog = async () => {
-    if (!host?.electronAPI?.exportLog) return;
-    try {
-      const response = await host.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 as Error).message);
-    }
-  };
+  useEffect(() => {
+    const ipc = ipcRenderer;
+    if (!ipc) return;
 
-  // create new project handler reused by plus icon and label
-  const createNewProject = () => {
-    //Handles refocusing id & nonduplicate internally
-    projectStore.createProject('new project');
-    navigate('/');
-  };
+    const onUpdateCanAvailable = (
+      _event: Electron.IpcRendererEvent,
+      info: VersionInfo
+    ) => {
+      setPackageUpdateAvailable(Boolean(info.update));
+    };
+
+    const onUpdateDownloaded = () => {
+      setPackageUpdateAvailable(false);
+    };
+
+    ipc.on('update-can-available', onUpdateCanAvailable);
+    ipc.on('update-downloaded', onUpdateDownloaded);
+    void ipc.invoke('check-update');
+
+    return () => {
+      ipc.off('update-can-available', onUpdateCanAvailable);
+      ipc.off('update-downloaded', onUpdateDownloaded);
+    };
+  }, [ipcRenderer]);
+
+  const handleStartDownload = useCallback(() => {
+    void ipcRenderer?.invoke('start-download');
+  }, [ipcRenderer]);
+
+  const isHistoryRoute = useMemo(() => {
+    const path = location.pathname.replace(/\/$/, '') || '/';
+    return path === '/history' || path.endsWith('/history');
+  }, [location.pathname]);
+
+  const isHomeRoute = location.pathname === '/';
+
+  const handleExitHistoryOrSettings = useCallback(() => {
+    if (canGoBack) {
+      navigate(-1);
+    } else {
+      navigate('/');
+    }
+  }, [canGoBack, navigate]);
 
   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]);
 
   if (!chatStore) {
     return <div>Loading...</div>;
@@ -128,7 +234,21 @@ function HeaderWin() {
     }
   };
 
-  //TODO: Mark ChatStore details as completed
+  const handleShare = async (taskId: string) => {
+    share(taskId);
+  };
+
+  const activeTask = chatStore.activeTaskId
+    ? chatStore.tasks[chatStore.activeTaskId as string]
+    : undefined;
+  const showEndProject = Boolean(
+    chatStore.activeTaskId &&
+    activeTask &&
+    ((activeTask.messages?.length || 0) > 0 ||
+      activeTask.hasMessages ||
+      activeTask.status !== ChatTaskStatus.PENDING)
+  );
+
   const handleEndProject = async () => {
     const taskId = chatStore.activeTaskId;
     const projectId = projectStore.activeProjectId;
@@ -144,28 +264,24 @@ function HeaderWin() {
     try {
       const task = chatStore.tasks[taskId];
 
-      // Stop the task if it's running (use projectId - task_lock is keyed by project)
       if (task && task.status === ChatTaskStatus.RUNNING) {
-        await fetchPut(`/task/${projectId}/take-control`, {
+        await fetchPut(`/task/${taskId}/take-control`, {
           action: 'stop',
         });
       }
 
-      // Stop Workforce
       try {
         await fetchDelete(`/chat/${projectId}`);
-      } catch (error) {
-        console.log('Task may not exist on backend:', error);
+      } catch {
+        /* Backend may already have removed the chat */
       }
 
-      // Delete from history using historyId
       if (historyId && task.status !== ChatTaskStatus.FINISHED) {
         try {
           await proxyFetchDelete(`/api/v1/chat/history/${historyId}`);
-          // Remove from local store
           chatStore.removeTask(taskId);
-        } catch (error) {
-          console.log('History may not exist:', error);
+        } catch {
+          /* History may already be deleted */
         }
       } else {
         console.warn(
@@ -173,11 +289,7 @@ function HeaderWin() {
         );
       }
 
-      // Create a completely new project instead of just a new task
-      // This ensures we start fresh without any residual state
       projectStore.createProject('new project');
-
-      // Navigate to home with replace to force refresh
       navigate('/', { replace: true });
 
       toast.success(t('layout.project-ended-successfully'), {
@@ -194,259 +306,434 @@ function HeaderWin() {
     }
   };
 
-  const handleShare = async (taskId: string) => {
-    share(taskId);
-  };
-
   if (!chatStore) {
     return <div>Loading...</div>;
   }
 
   return (
     <div
-      className={`drag absolute left-0 right-0 top-0 z-50 flex !h-9 items-center justify-between py-1 ${
-        platform === 'darwin' ? 'pl-16' : 'pl-2'
+      className={`drag left-0 right-0 top-0 !h-10 py-1 min-w-0 absolute z-50 flex items-center ${
+        platform === 'darwin' ? 'pr-[2px] pl-[68px]' : '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">
-            Eigent
-          </span>
-        )}
-      </div>
-
-      {/* center */}
-      <div className="drag flex h-full flex-1 items-center justify-between pr-2">
-        <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="flex items-center">
-              <TooltipSimple
-                content={t('layout.home')}
-                side="bottom"
-                align="center"
-              >
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="no-drag rounded-full"
-                  onClick={() => navigate('/history')}
-                >
-                  <House className="h-4 w-4" />
-                </Button>
-              </TooltipSimple>
-              <TooltipSimple
-                content={t('layout.new-project')}
-                side="bottom"
-                align="center"
-              >
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="no-drag rounded-full"
-                  onClick={createNewProject}
-                >
-                  <Plus className="h-4 w-4" />
-                </Button>
-              </TooltipSimple>
-            </div>
-          )}
-          {location.pathname !== '/history' && (
-            <>
-              {activeTaskTitle === t('layout.new-project') ? (
-                <TooltipSimple
-                  content={t('layout.new-project')}
-                  side="bottom"
-                  align="center"
+      {/* Leading: home ↔ dashboard / new project */}
+      <div className="no-drag flex shrink-0 items-center justify-center">
+        <TooltipSimple
+          content={
+            isHistoryRoute ? t('layout.new-project') : t('layout.dashboard')
+          }
+          side="bottom"
+          align="center"
+        >
+          <Button
+            variant="ghost"
+            size="sm"
+            buttonContent="text"
+            textWeight="bold"
+            className="no-drag gap-1.5 rounded-full"
+            onClick={() => {
+              if (isHistoryRoute) {
+                projectStore.createProject('new project');
+                setActiveWorkspaceTab('workforce');
+                navigate('/');
+              } else {
+                navigate('/history');
+              }
+            }}
+            aria-label={
+              isHistoryRoute ? t('layout.new-project') : t('layout.home')
+            }
+          >
+            <AnimatePresence mode="popLayout" initial={false}>
+              {isHistoryRoute ? (
+                <motion.span
+                  key="leading-history"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={topBarCrossfade}
+                  className="gap-1.5 min-w-0 flex items-center"
                 >
-                  <Button
-                    id="active-task-title-btn"
-                    variant="ghost"
-                    className="no-drag rounded-full text-base font-bold"
-                    onClick={toggle}
-                    size="sm"
-                  >
-                    <span className="inline-block max-w-[300px] overflow-hidden text-ellipsis whitespace-nowrap align-middle">
-                      {t('layout.new-project')}
-                    </span>
-                    <ChevronDown />
-                  </Button>
-                </TooltipSimple>
+                  <img
+                    src={
+                      appearance === 'dark'
+                        ? eigentAppIconWhite
+                        : eigentAppIconBlack
+                    }
+                    alt=""
+                    className="h-6 w-6 mt-[2px] select-none"
+                    width={16}
+                    height={16}
+                    draggable={false}
+                  />
+                  {t('layout.new-project')}
+                  <Plus
+                    className="h-4 w-4 text-ds-icon-neutral-muted-default ml-1 shrink-0"
+                    aria-hidden
+                  />
+                </motion.span>
               ) : (
-                <TooltipSimple
-                  content={activeTaskTitle}
-                  side="bottom"
-                  align="center"
+                <motion.span
+                  key="leading-home"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={topBarCrossfade}
+                  className="gap-1.5 min-w-0 flex items-center"
                 >
-                  <Button
-                    id="active-task-title-btn"
-                    variant="ghost"
-                    size="sm"
-                    className="no-drag text-base font-bold"
-                    onClick={toggle}
-                  >
-                    <span className="inline-block max-w-[300px] overflow-hidden text-ellipsis whitespace-nowrap align-middle">
-                      {activeTaskTitle}
-                    </span>
-                    <ChevronDown />
-                  </Button>
-                </TooltipSimple>
+                  <img
+                    src={
+                      appearance === 'dark'
+                        ? eigentAppIconWhite
+                        : eigentAppIconBlack
+                    }
+                    alt=""
+                    className="h-6 w-6 mt-[2px] select-none"
+                    width={16}
+                    height={16}
+                    draggable={false}
+                  />
+                  {t('layout.home')}
+                </motion.span>
               )}
-            </>
+            </AnimatePresence>
+          </Button>
+        </TooltipSimple>
+      </div>
+
+      {/* Middle: full width on project home only (/) — left: nav + title; right: project + utilities */}
+      <div className="min-h-0 min-w-0 relative z-0 flex h-full flex-1">
+        <AnimatePresence initial={false}>
+          {isHomeRoute && (
+            <motion.div
+              key="home-middle"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={topBarCrossfade}
+              className="drag inset-0 min-w-0 gap-2 absolute z-10 flex items-center justify-between"
+            >
+              <div className="min-w-0 min-h-0 relative z-50 flex h-full items-center">
+                <div className="no-drag min-w-0 flex items-center">
+                  <TooltipSimple
+                    content={
+                      projectSidebarFolded
+                        ? t('layout.expand-project-sidebar', {
+                            defaultValue: 'Expand sidebar',
+                          })
+                        : t('layout.fold-project-sidebar', {
+                            defaultValue: 'Fold sidebar',
+                          })
+                    }
+                    side="bottom"
+                    align="center"
+                  >
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      buttonContent="icon-only"
+                      className="no-drag shrink-0 rounded-full"
+                      onClick={() => toggleProjectSidebarFolded()}
+                      aria-pressed={!projectSidebarFolded}
+                      aria-label={
+                        projectSidebarFolded
+                          ? t('layout.expand-project-sidebar', {
+                              defaultValue: 'Expand sidebar',
+                            })
+                          : t('layout.fold-project-sidebar', {
+                              defaultValue: 'Fold sidebar',
+                            })
+                      }
+                    >
+                      {projectSidebarFolded ? (
+                        <PanelLeft className="h-4 w-4" aria-hidden />
+                      ) : (
+                        <PanelLeftClose className="h-4 w-4" aria-hidden />
+                      )}
+                    </Button>
+                  </TooltipSimple>
+                  <TooltipSimple
+                    content={t('layout.back')}
+                    side="bottom"
+                    align="center"
+                  >
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      buttonContent="icon-only"
+                      className="no-drag shrink-0 rounded-full"
+                      disabled={!canGoBack}
+                      onClick={() => navigate(-1)}
+                      aria-label={t('layout.back')}
+                    >
+                      <ChevronLeft aria-hidden />
+                    </Button>
+                  </TooltipSimple>
+                  <TooltipSimple
+                    content={t('layout.forward')}
+                    side="bottom"
+                    align="center"
+                  >
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      buttonContent="icon-only"
+                      className="no-drag shrink-0 rounded-full"
+                      disabled={!canGoForward}
+                      onClick={() => navigate(1)}
+                      aria-label={t('layout.forward')}
+                    >
+                      <ChevronRight aria-hidden />
+                    </Button>
+                  </TooltipSimple>
+                  <div className="min-w-0 flex-1 overflow-hidden rounded-full">
+                    <TooltipSimple
+                      content={
+                        activeTaskTitle === t('layout.new-project')
+                          ? t('layout.new-project')
+                          : activeTaskTitle
+                      }
+                      side="bottom"
+                      align="center"
+                    >
+                      <button
+                        id="active-task-title-btn"
+                        type="button"
+                        className="no-drag min-w-0 px-2 text-label-sm font-bold !text-ds-text-neutral-default-default focus-visible:ring-ds-ring-brand-default-focus/50 hover:bg-ds-bg-neutral-default-hover active:bg-ds-bg-neutral-default-active 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="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
+                          {activeTaskTitle}
+                        </span>
+                      </button>
+                    </TooltipSimple>
+                  </div>
+                </div>
+              </div>
+
+              <div className="no-drag gap-0 z-50 flex h-full shrink-0 items-center">
+                <div className="gap-1 pr-2 border-ds-border-neutral-subtle-default flex items-center border-y-0 border-r border-l-0 border-solid">
+                  {showEndProject && (
+                    <TooltipSimple
+                      content={t('layout.achieve-project')}
+                      side="bottom"
+                      align="end"
+                    >
+                      <Button
+                        type="button"
+                        onClick={() => setEndDialogOpen(true)}
+                        variant="ghost"
+                        size="sm"
+                        buttonContent="icon-only"
+                        buttonRadius="full"
+                        tone="error"
+                        aria-label={t('layout.achieve-project')}
+                      >
+                        <Archive aria-hidden />
+                      </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="sm"
+                          buttonContent="icon-only"
+                          buttonRadius="full"
+                          tone="information"
+                          aria-label={t('layout.share')}
+                        >
+                          <Share aria-hidden />
+                        </Button>
+                      </TooltipSimple>
+                    )}
+                </div>
+                <div className="gap-1 pl-2 flex items-center">
+                  <TooltipSimple
+                    content={t('layout.notifications')}
+                    side="bottom"
+                    align="end"
+                  >
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="no-drag rounded-full"
+                      aria-label={t('layout.notifications')}
+                      aria-expanded={notificationPanelOpen}
+                      aria-controls="notification-panel"
+                      onClick={() => setNotificationPanelOpen((open) => !open)}
+                      buttonContent="icon-only"
+                    >
+                      <Bell aria-hidden />
+                    </Button>
+                  </TooltipSimple>
+                  <TooltipSimple
+                    content={t('layout.support')}
+                    side="bottom"
+                    align="end"
+                  >
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="no-drag rounded-full"
+                      aria-label={t('layout.support')}
+                      onClick={() => setReportBugOpen(true)}
+                      buttonContent="icon-only"
+                    >
+                      <CircleHelp aria-hidden />
+                    </Button>
+                  </TooltipSimple>
+                  <TooltipSimple
+                    content={t('layout.refer-friends')}
+                    side="bottom"
+                    align="end"
+                  >
+                    <Button
+                      onClick={getReferFriendsLink}
+                      variant="ghost"
+                      size="sm"
+                      className="no-drag rounded-full"
+                      buttonContent="icon-only"
+                    >
+                      <img
+                        src={appearance === 'dark' ? giftWhiteIcon : giftIcon}
+                        alt="gift-icon"
+                        width={16}
+                        height={16}
+                      />
+                    </Button>
+                  </TooltipSimple>
+                </div>
+              </div>
+            </motion.div>
           )}
-        </div>
+        </AnimatePresence>
+        {!isHomeRoute && (
+          <div className="drag min-h-0 min-w-0 flex-1" aria-hidden />
+        )}
+      </div>
 
-        {/* right */}
-        {location.pathname !== '/history' && (
-          <div
-            className={`${
-              platform === 'darwin' && 'pr-2'
-            } no-drag relative z-50 flex h-full items-center gap-1`}
+      {/* Trailing: update + settings (home) or back (history) — always at the end */}
+      <div
+        className={`${
+          platform === 'darwin' && 'px-1'
+        } no-drag gap-1 relative z-50 flex h-full shrink-0 items-center`}
+      >
+        {packageUpdateAvailable && (
+          <TooltipSimple
+            content={t('layout.update', { defaultValue: 'Update' })}
+            side="bottom"
+            align="end"
           >
-            {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 && (
+            <Button
+              type="button"
+              variant="primary"
+              size="sm"
+              className="no-drag px-3 shrink-0 rounded-full"
+              onClick={handleStartDownload}
+              aria-label={t('layout.update', { defaultValue: 'Update' })}
+            >
+              {t('layout.update', { defaultValue: 'Update' })}
+            </Button>
+          </TooltipSimple>
+        )}
+        <div className="flex h-full shrink-0 items-center">
+          <AnimatePresence mode="wait" initial={false}>
+            {isHomeRoute ? (
+              <motion.div
+                key="trailing-settings"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={topBarCrossfade}
+                className="flex"
+              >
                 <TooltipSimple
-                  content={t('layout.share')}
+                  content={t('layout.settings')}
                   side="bottom"
                   align="end"
                 >
                   <Button
-                    onClick={() =>
-                      handleShare(chatStore.activeTaskId as string)
-                    }
+                    onClick={() => navigate('/history?tab=settings')}
                     variant="ghost"
-                    size="xs"
-                    className="no-drag rounded-full bg-surface-information !text-text-information"
+                    buttonContent="icon-only"
+                    size="sm"
+                    className="no-drag rounded-full"
+                    aria-label={t('layout.settings')}
                   >
-                    {t('layout.share')}
+                    <Settings aria-hidden />
                   </Button>
                 </TooltipSimple>
-              )}
-            {host?.electronAPI &&
-              chatStore.activeTaskId &&
-              chatStore.tasks[chatStore.activeTaskId as string] && (
+              </motion.div>
+            ) : (
+              <motion.div
+                key="trailing-back"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={topBarCrossfade}
+                className="flex"
+              >
                 <TooltipSimple
-                  content={t('layout.report-bug')}
+                  content={t('layout.back', { defaultValue: 'Back' })}
                   side="bottom"
                   align="end"
                 >
                   <Button
-                    onClick={exportLog}
+                    type="button"
+                    onClick={handleExitHistoryOrSettings}
                     variant="ghost"
-                    size="icon"
+                    buttonContent="icon-only"
+                    size="sm"
                     className="no-drag rounded-full"
+                    aria-label={t('layout.back', { defaultValue: 'Back' })}
                   >
-                    <FileDown className="h-4 w-4" />
+                    <X className="h-4 w-4" aria-hidden />
                   </Button>
                 </TooltipSimple>
-              )}
-            <TooltipSimple
-              content={t('layout.refer-friends')}
-              side="bottom"
-              align="end"
-            >
-              <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"
-            >
-              <Button
-                onClick={() => navigate('/history?tab=settings')}
-                variant="ghost"
-                size="icon"
-                className="no-drag rounded-full"
-              >
-                <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>
-        )}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
       </div>
-      {/* Custom window controls only for Linux. Web: hidden. */}
-      {host?.electronAPI && platform !== 'darwin' && platform !== 'win32' && (
+
+      {/* Custom window controls: Linux Electron only (macOS/Win use native chrome; web has no platform from getPlatform) */}
+      {platform === 'linux' && (
         <div
           className="no-drag flex h-full items-center"
           id="window-controls"
           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-ds-bg-neutral-default-hover flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center"
             onClick={() => host?.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-ds-bg-neutral-default-hover flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center"
             onClick={() => host?.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"
-            onClick={() => host?.electronAPI?.closeWindow()}
+            className="leading-5 hover:bg-ds-bg-neutral-default-hover flex h-full w-[35px] flex-1 cursor-pointer items-center justify-center text-center"
+            onClick={() => host?.electronAPI?.closeWindow(false)}
           >
             <X className="h-4 w-4" />
           </div>
@@ -458,6 +745,11 @@ function HeaderWin() {
         onConfirm={handleEndProject}
         loading={endProjectLoading}
       />
+      <NotificationPanel
+        open={notificationPanelOpen}
+        onOpenChange={setNotificationPanelOpen}
+      />
+      <ReportBugDialog open={reportBugOpen} onOpenChange={setReportBugOpen} />
     </div>
   );
 }
diff --git a/src/components/Trigger/ActivityLogItem.tsx b/src/components/Trigger/ActivityLogItem.tsx
index 58f3baabf..3ceed820e 100644
--- a/src/components/Trigger/ActivityLogItem.tsx
+++ b/src/components/Trigger/ActivityLogItem.tsx
@@ -12,6 +12,7 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
+import { AlarmClockIcon } from '@/components/ui/animate-ui/icons/alarm-clock';
 import { formatRelativeTime } from '@/lib/utils';
 import { ActivityLog, ActivityType } from '@/store/activityLogStore';
 import { motion } from 'framer-motion';
@@ -27,7 +28,6 @@ import {
   Zap,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { AlarmClockIcon } from '../animate-ui/icons/alarm-clock';
 
 // Helper function to get status icon for activity type (left side status lead)
 const getStatusIcon = (activityType: ActivityType) => {
@@ -152,20 +152,22 @@ export function ActivityLogItem({
   // Status lead icon styles
   const statusIconBgClass =
     statusType === 'error'
-      ? 'bg-surface-cuation'
+      ? 'bg-ds-bg-status-error-subtle-default'
       : statusType === 'success'
-        ? 'bg-surface-success'
-        : 'bg-surface-tertiary';
+        ? 'bg-ds-bg-status-completed-subtle-default'
+        : 'bg-ds-bg-neutral-strong-default';
   const statusIconColorClass =
     statusType === 'error'
-      ? 'text-icon-cuation'
+      ? 'text-ds-icon-status-error-default-default'
       : statusType === 'success'
-        ? 'text-icon-success'
-        : 'text-icon-information';
+        ? 'text-ds-icon-status-completed-default-default'
+        : 'text-ds-icon-status-splitting-default-default';
 
   // Trigger type icon styles
   const typeIconColorClass =
-    triggerTypeStatus === 'error' ? 'text-icon-cuation' : 'text-icon-success';
+    triggerTypeStatus === 'error'
+      ? 'text-ds-icon-status-error-default-default'
+      : 'text-ds-icon-status-completed-default-default';
 
   const TriggerTypeIcon = triggerType === 'webhook' ? Globe : AlarmClockIcon;
 
@@ -175,46 +177,48 @@ export function ActivityLogItem({
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
       transition={{ duration: 0.2 }}
-      className="relative flex items-start px-4"
+      className="px-4 relative flex items-start"
     >
       {/* Left side: Status Lead Icon */}
       <div className="flex flex-col items-center self-stretch">
         <div
-          className={`relative flex h-6 w-6 items-center justify-center rounded-full ${statusIconBgClass} flex-shrink-0`}
+          className={`h-6 w-6 relative flex items-center justify-center rounded-full ${statusIconBgClass} flex-shrink-0`}
         >
           <StatusIcon className={`h-4 w-4 ${statusIconColorClass}`} />
         </div>
-        <div className="w-[1px] flex-1 bg-border-secondary" />
+        <div className="bg-ds-border-neutral-default-default w-[1px] flex-1" />
       </div>
 
       {/* Right side: Content */}
-      <div className="mb-4 flex min-w-0 flex-1 flex-col">
+      <div className="mb-4 min-w-0 flex flex-1 flex-col">
         {/* Top row: Trigger type icon + timestamp */}
-        <div className="mb-2 flex items-center justify-between px-1">
+        <div className="mb-2 px-1 flex items-center justify-between">
           <div
-            className={`flex h-6 w-6 flex-shrink-0 items-center justify-center`}
+            className={`h-6 w-6 flex flex-shrink-0 items-center justify-center`}
           >
             <TriggerTypeIcon className={`h-4 w-4 ${typeIconColorClass}`} />
           </div>
-          <span className="text-label-xs text-text-label">{timeAgo}</span>
+          <span className="text-label-xs text-ds-text-neutral-muted-default">
+            {timeAgo}
+          </span>
         </div>
 
         {/* Bottom row: Accordion */}
-        <div className="flex cursor-pointer flex-col items-center justify-center rounded-md bg-surface-secondary px-2 py-1 transition-colors duration-150 hover:bg-surface-tertiary">
+        <div className="rounded-md bg-ds-bg-neutral-default-default px-2 py-1 hover:bg-ds-bg-neutral-strong-default flex cursor-pointer flex-col items-center justify-center transition-colors duration-150">
           <button
             onClick={onToggleExpanded}
-            className="flex w-full cursor-pointer items-center justify-between border-none bg-transparent p-0 text-left"
+            className="p-0 flex w-full cursor-pointer items-center justify-between border-none bg-transparent text-left"
           >
-            <div className="flex flex-row gap-2">
-              <span className="text-label-sm font-medium text-text-heading">
+            <div className="gap-2 flex flex-row">
+              <span className="text-label-sm font-medium text-ds-text-neutral-default-default">
                 {t('triggers.trigger-label')} {triggerNumber}
               </span>
-              <span className="text-label-sm font-normal text-text-label">
+              <span className="text-label-sm font-normal text-ds-text-neutral-muted-default">
                 {stateText}
               </span>
             </div>
             <ChevronDown
-              className={`h-4 w-4 text-text-label opacity-30 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
+              className={`h-4 w-4 text-ds-text-neutral-muted-default opacity-30 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
             />
           </button>
 
@@ -228,9 +232,9 @@ export function ActivityLogItem({
             transition={{ duration: 0.2 }}
             className="overflow-hidden"
           >
-            <div className="min-h-[32px] px-2 py-2">
+            <div className="px-2 py-2 min-h-[32px]">
               {log.metadata && Object.keys(log.metadata).length > 0 ? (
-                <div className="space-y-0.5 text-label-sm text-text-label">
+                <div className="space-y-0.5 text-label-sm text-ds-text-neutral-muted-default">
                   {Object.entries(log.metadata)
                     .filter(
                       ([, value]) =>
@@ -257,8 +261,8 @@ export function ActivityLogItem({
                         displayValue = String(value);
                       }
                       return (
-                        <div key={key} className="flex gap-2">
-                          <span className="font-medium text-text-secondary">
+                        <div key={key} className="gap-2 flex">
+                          <span className="font-medium text-ds-text-neutral-muted-default">
                             {displayKey}:
                           </span>
                           <span>{displayValue}</span>
@@ -267,7 +271,7 @@ export function ActivityLogItem({
                     })}
                 </div>
               ) : (
-                <div className="text-label-xs text-text-disabled">
+                <div className="text-label-xs text-ds-text-neutral-muted-disabled">
                   {/* Empty content box */}
                 </div>
               )}
diff --git a/src/components/Trigger/DynamicTriggerConfig.tsx b/src/components/Trigger/DynamicTriggerConfig.tsx
index 78a110c4c..92db7e2db 100644
--- a/src/components/Trigger/DynamicTriggerConfig.tsx
+++ b/src/components/Trigger/DynamicTriggerConfig.tsx
@@ -239,7 +239,7 @@ const TextInputField: React.FC<FieldProps> = ({
         {label}
         {isRequired && <span className="ml-1 text-red-500">*</span>}
       </Label>
-      <div className="flex gap-2">
+      <div className="gap-2 flex">
         <div className="relative flex-1">
           <Input
             type={isSecret && !showSecret ? 'password' : 'text'}
@@ -254,7 +254,7 @@ const TextInputField: React.FC<FieldProps> = ({
             <button
               type="button"
               onClick={handleToggleSecret}
-              className="hover:text-icon-hover absolute right-3 top-1/2 -translate-y-1/2 text-icon-primary"
+              className="hover:text-ds-icon-neutral-default-hover right-3 text-ds-icon-neutral-default-default absolute top-1/2 -translate-y-1/2"
             >
               {showSecret ? (
                 <EyeOff className="h-4 w-4" />
@@ -288,12 +288,14 @@ const TextInputField: React.FC<FieldProps> = ({
         )}
       </div>
       {showError && (
-        <p className="flex items-center gap-1 text-xs text-red-500">
+        <p className="gap-1 text-xs text-red-500 flex items-center">
           <CircleAlert className="h-3 w-3" />
           {validationError}
         </p>
       )}
-      {notice && <p className="text-xs text-text-label">{notice}</p>}
+      {notice && (
+        <p className="text-xs text-ds-text-neutral-muted-default">{notice}</p>
+      )}
     </div>
   );
 };
@@ -320,7 +322,9 @@ const SwitchField: React.FC<FieldProps> = ({
           {label}
           {isRequired && <span className="ml-1 text-red-500">*</span>}
         </Label>
-        {notice && <p className="text-xs text-text-label">{notice}</p>}
+        {notice && (
+          <p className="text-xs text-ds-text-neutral-muted-default">{notice}</p>
+        )}
       </div>
       <Switch
         size="sm"
@@ -402,14 +406,14 @@ const MultiSelectField: React.FC<FieldProps> = ({
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger
           disabled={disabled || requiresCredentials}
-          className="w-full justify-between font-normal"
+          className="font-normal w-full justify-between"
         >
           {requiresCredentials ? (
-            <span className="text-text-label">
+            <span className="text-ds-text-neutral-muted-default">
               {t('triggers.dynamic.save-credentials-first')}
             </span>
           ) : isLoading ? (
-            <span className="flex items-center gap-2">
+            <span className="gap-2 flex items-center">
               <Loader2 className="h-4 w-4 animate-spin" />
               {t('triggers.dynamic.loading')}
             </span>
@@ -417,7 +421,7 @@ const MultiSelectField: React.FC<FieldProps> = ({
             <span>{getDisplayLabel()}</span>
           )}
         </PopoverTrigger>
-        <PopoverContent className="w-full p-0" align="start">
+        <PopoverContent className="p-0 w-full" align="start">
           <Command>
             <CommandInput placeholder={t('triggers.dynamic.search')} />
             <CommandList>
@@ -431,7 +435,7 @@ const MultiSelectField: React.FC<FieldProps> = ({
                   >
                     <div
                       className={cn(
-                        'border-primary mr-2 flex h-4 w-4 items-center justify-center rounded-sm border',
+                        'border-primary mr-2 h-4 w-4 rounded-sm flex items-center justify-center border',
                         selectedValues.includes(option.value)
                           ? 'bg-primary text-primary-foreground'
                           : 'opacity-50'
@@ -450,23 +454,25 @@ const MultiSelectField: React.FC<FieldProps> = ({
         </PopoverContent>
       </Popover>
       {showError && (
-        <p className="flex items-center gap-1 text-xs text-red-500">
+        <p className="gap-1 text-xs text-red-500 flex items-center">
           <CircleAlert className="h-3 w-3" />
           {errorMessage}
         </p>
       )}
-      {notice && <p className="text-xs text-text-label">{notice}</p>}
+      {notice && (
+        <p className="text-xs text-ds-text-neutral-muted-default">{notice}</p>
+      )}
 
       {/* Selected badges */}
       {selectedValues.length > 0 && (
-        <div className="mt-2 flex flex-wrap gap-1">
+        <div className="mt-2 gap-1 flex flex-wrap">
           {selectedValues.map((val) => {
             const opt = options.find((o) => o.value === val);
             return (
               <Badge
                 key={val}
                 variant="secondary"
-                className="hover:bg-destructive/20 cursor-pointer text-xs"
+                className="text-xs hover:bg-ds-bg-status-error-subtle-default/50 cursor-pointer"
                 onClick={() => handleToggle(val)}
               >
                 {opt?.label || val}
@@ -552,7 +558,7 @@ const MultiTextInputField: React.FC<FieldProps> = ({
         {label}
         {isRequired && <span className="ml-1 text-red-500">*</span>}
       </Label>
-      <div className="flex gap-2">
+      <div className="gap-2 flex">
         <Input
           value={newValue}
           onChange={(e) => setNewValue(e.target.value)}
@@ -575,26 +581,28 @@ const MultiTextInputField: React.FC<FieldProps> = ({
         </Button>
       </div>
       {itemError && (
-        <p className="flex items-center gap-1 text-xs text-red-500">
+        <p className="gap-1 text-xs text-red-500 flex items-center">
           <CircleAlert className="h-3 w-3" />
           {itemError}
         </p>
       )}
       {showError && !itemError && (
-        <p className="flex items-center gap-1 text-xs text-red-500">
+        <p className="gap-1 text-xs text-red-500 flex items-center">
           <CircleAlert className="h-3 w-3" />
           {validationError}
         </p>
       )}
-      {notice && <p className="text-xs text-text-label">{notice}</p>}
+      {notice && (
+        <p className="text-xs text-ds-text-neutral-muted-default">{notice}</p>
+      )}
 
       {values.length > 0 && (
-        <div className="mt-2 flex flex-wrap gap-1">
+        <div className="mt-2 gap-1 flex flex-wrap">
           {values.map((val) => (
             <Badge
               key={val}
               variant="secondary"
-              className="hover:bg-destructive/20 cursor-pointer text-xs"
+              className="text-xs hover:bg-ds-bg-status-error-subtle-default/50 cursor-pointer"
               onClick={() => handleRemove(val)}
             >
               {val}
@@ -686,12 +694,14 @@ const NumberInputField: React.FC<FieldProps> = ({
         className={showError ? 'border-red-500' : ''}
       />
       {showError && (
-        <p className="flex items-center gap-1 text-xs text-red-500">
+        <p className="gap-1 text-xs text-red-500 flex items-center">
           <CircleAlert className="h-3 w-3" />
           {validationError}
         </p>
       )}
-      {notice && <p className="text-xs text-text-label">{notice}</p>}
+      {notice && (
+        <p className="text-xs text-ds-text-neutral-muted-default">{notice}</p>
+      )}
     </div>
   );
 };
@@ -1113,9 +1123,9 @@ export const DynamicTriggerConfig: React.FC<DynamicTriggerConfigProps> = ({
 
   if (isLoadingSchema) {
     return (
-      <div className="flex items-center justify-center py-8">
-        <Loader2 className="h-6 w-6 animate-spin text-text-label" />
-        <span className="ml-2 text-text-label">
+      <div className="py-8 flex items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-ds-text-neutral-muted-default" />
+        <span className="ml-2 text-ds-text-neutral-muted-default">
           {t('triggers.dynamic.loading-config')}
         </span>
       </div>
@@ -1124,7 +1134,7 @@ export const DynamicTriggerConfig: React.FC<DynamicTriggerConfigProps> = ({
 
   if (!schema) {
     return (
-      <div className="py-8 text-center text-text-label">
+      <div className="py-8 text-ds-text-neutral-muted-default text-center">
         {t('triggers.dynamic.no-config-available')}
       </div>
     );
@@ -1138,21 +1148,21 @@ export const DynamicTriggerConfig: React.FC<DynamicTriggerConfigProps> = ({
       {credentials.length > 0 && (
         <div className="space-y-4">
           {showSectionTitles && (
-            <div className="flex items-center gap-2">
-              <Label className="text-sm font-bold text-text-heading">
+            <div className="gap-2 flex items-center">
+              <Label className="text-sm font-bold text-ds-text-neutral-default-default">
                 {t('triggers.dynamic.credentials')}
               </Label>
               <TooltipSimple content={t('triggers.dynamic.credentials-notice')}>
-                <CircleAlert className="h-4 w-4 cursor-pointer text-icon-primary" />
+                <CircleAlert className="h-4 w-4 text-ds-icon-neutral-default-default cursor-pointer" />
               </TooltipSimple>
             </div>
           )}
           {credentials.map(([key, prop]) => renderField(key, prop))}
 
           {hasAllCredentialsSaved() && (
-            <div className="bg-surface-success/20 flex items-center gap-2 rounded-lg p-2">
-              <Check className="h-4 w-4 text-text-success" />
-              <span className="text-sm text-text-success">
+            <div className="bg-ds-bg-status-completed-subtle-default/20 gap-2 rounded-lg p-2 flex items-center">
+              <Check className="h-4 w-4 text-ds-icon-status-completed-default-default" />
+              <span className="text-sm text-ds-text-status-completed-strong-default">
                 {t('triggers.dynamic.credentials-saved')}
               </span>
             </div>
@@ -1162,9 +1172,9 @@ export const DynamicTriggerConfig: React.FC<DynamicTriggerConfigProps> = ({
 
       {/* Configuration Section */}
       {config.length > 0 && (
-        <div className="space-y-4 border-t border-border-secondary pt-4">
+        <div className="space-y-4 border-ds-border-neutral-default-default pt-4 border-t">
           {showSectionTitles && (
-            <Label className="text-sm font-bold text-text-heading">
+            <Label className="text-sm font-bold text-ds-text-neutral-default-default">
               {t('triggers.dynamic.configuration')}
             </Label>
           )}
@@ -1174,9 +1184,9 @@ export const DynamicTriggerConfig: React.FC<DynamicTriggerConfigProps> = ({
 
       {/* Behavior Settings Section */}
       {behavior.length > 0 && (
-        <div className="space-y-4 border-t border-border-secondary pt-4">
+        <div className="space-y-4 border-ds-border-neutral-default-default pt-4 border-t">
           {showSectionTitles && (
-            <Label className="text-sm font-bold text-text-heading">
+            <Label className="text-sm font-bold text-ds-text-neutral-default-default">
               {t('triggers.dynamic.behavior-settings')}
             </Label>
           )}
diff --git a/src/components/Trigger/ExecutionLogs.tsx b/src/components/Trigger/ExecutionLogs.tsx
index 4b81a5178..d751c5e8d 100644
--- a/src/components/Trigger/ExecutionLogs.tsx
+++ b/src/components/Trigger/ExecutionLogs.tsx
@@ -137,42 +137,56 @@ const transformToLogEntry = (
 const getStatusIcon = (status: ExecutionLogEntry['status']) => {
   switch (status) {
     case 'success':
-      return <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />;
+      return (
+        <CheckCircle2 className="h-3.5 w-3.5 text-ds-icon-status-completed-default-default" />
+      );
     case 'error':
-      return <XCircle className="h-3.5 w-3.5 text-red-500" />;
+      return (
+        <XCircle className="h-3.5 w-3.5 text-ds-icon-status-error-default-default" />
+      );
     case 'running':
-      return <Play className="h-3.5 w-3.5 animate-pulse text-blue-500" />;
+      return (
+        <Play className="h-3.5 w-3.5 animate-pulse text-ds-icon-status-running-default-default" />
+      );
     case 'pending':
-      return <Clock className="h-3.5 w-3.5 text-amber-500" />;
+      return (
+        <Clock className="h-3.5 w-3.5 text-ds-icon-status-pending-default-default" />
+      );
     case 'cancelled':
-      return <XCircle className="h-3.5 w-3.5 text-gray-500" />;
+      return (
+        <XCircle className="h-3.5 w-3.5 text-ds-icon-neutral-muted-default" />
+      );
     default:
-      return <AlertTriangle className="h-3.5 w-3.5 text-gray-500" />;
+      return (
+        <AlertTriangle className="h-3.5 w-3.5 text-ds-icon-neutral-muted-default" />
+      );
   }
 };
 
 const getStatusColor = (status: ExecutionLogEntry['status']) => {
   switch (status) {
     case 'success':
-      return 'border-l-emerald-500';
+      return 'border-l-ds-border-status-completed-default-default';
     case 'error':
-      return 'border-l-red-500';
+      return 'border-l-ds-border-status-error-default-default';
     case 'running':
-      return 'border-l-blue-500';
+      return 'border-l-ds-border-status-running-default-default';
     case 'pending':
-      return 'border-l-amber-500';
+      return 'border-l-ds-border-status-pending-default-default';
     case 'cancelled':
-      return 'border-l-gray-500';
+      return 'border-l-ds-border-neutral-muted-default';
     default:
-      return 'border-l-gray-500';
+      return 'border-l-ds-border-neutral-muted-default';
   }
 };
 
 const getSuccessRateColorClass = (rate: number | null): string => {
-  if (rate === null) return 'text-text-label';
-  if (rate >= SUCCESS_CRITERIA_EXCELLENT) return 'text-icon-success';
-  if (rate >= SUCCESS_CRITERIA_ACCEPTABLE) return 'text-icon-warning';
-  return 'text-icon-caution';
+  if (rate === null) return 'text-ds-text-neutral-muted-default';
+  if (rate >= SUCCESS_CRITERIA_EXCELLENT)
+    return 'text-ds-icon-status-completed-default-default';
+  if (rate >= SUCCESS_CRITERIA_ACCEPTABLE)
+    return 'text-ds-icon-status-pending-default-default';
+  return 'text-ds-icon-status-error-default-default';
 };
 
 interface ExecutionLogsProps {
@@ -252,7 +266,7 @@ export function ExecutionLogs({ triggerId }: ExecutionLogsProps) {
 
   if (loading) {
     return (
-      <div className="flex h-full flex-col items-center justify-center text-text-label">
+      <div className="text-ds-text-neutral-muted-default flex h-full flex-col items-center justify-center">
         <Loader2 className="mb-2 h-8 w-8 animate-spin" />
         <span className="text-sm">{t('triggers.loading-executions')}</span>
       </div>
@@ -261,7 +275,7 @@ export function ExecutionLogs({ triggerId }: ExecutionLogsProps) {
 
   if (error || !trigger) {
     return (
-      <div className="flex h-full flex-col items-center justify-center text-text-label">
+      <div className="text-ds-text-neutral-muted-default flex h-full flex-col items-center justify-center">
         <Terminal className="mb-2 h-8 w-8 opacity-50" />
         <span className="text-sm">
           {error || t('triggers.no-execution-data')}
@@ -296,15 +310,15 @@ export function ExecutionLogs({ triggerId }: ExecutionLogsProps) {
   return (
     <div className="flex h-full flex-col">
       {/* Stats */}
-      <div className="flex flex-col items-start justify-start overflow-hidden bg-surface-tertiary px-4 pb-4">
+      <div className="px-4 pb-4 border-ds-border-neutral-subtle-default flex flex-col items-start justify-start overflow-hidden border-x-0 border-t-0 border-b-1 border-solid">
         <div className="mb-4 flex w-full flex-row items-center justify-between">
           <span
-            className="max-w-[150px] truncate text-label-sm font-medium text-text-heading"
+            className="text-label-sm font-medium text-ds-text-neutral-default-default max-w-[150px] truncate"
             title={trigger.name}
           >
             {trigger.name}
           </span>
-          <span className="text-label-xs text-text-label">
+          <span className="text-label-xs text-ds-text-neutral-muted-default">
             {trigger.trigger_type === 'schedule'
               ? t('triggers.schedule-trigger')
               : trigger.trigger_type === 'webhook'
@@ -315,21 +329,21 @@ export function ExecutionLogs({ triggerId }: ExecutionLogsProps) {
           </span>
         </div>
         <div className="flex flex-row">
-          <div className="border-r-1 mr-4 flex flex-col border-y-0 border-l-0 border-solid border-border-tertiary pr-4">
-            <span className="text-label-sm font-medium text-text-heading">
+          <div className="mr-4 border-ds-border-neutral-subtle-default pr-4 flex flex-col border-y-0 border-r-1 border-l-0 border-solid">
+            <span className="text-label-sm font-medium text-ds-text-neutral-default-default">
               {trigger.execution_count || 0}
             </span>
-            <span className="text-label-xs text-text-label">
+            <span className="text-label-xs text-ds-text-neutral-muted-default">
               {t('triggers.total-runs')}
             </span>
           </div>
-          <div className="border-r-1 mr-4 flex flex-col border-y-0 border-l-0 border-solid border-border-tertiary pr-4">
+          <div className="mr-4 border-ds-border-neutral-subtle-default pr-4 flex flex-col border-y-0 border-r-1 border-l-0 border-solid">
             <span
               className={`text-label-sm font-medium ${getSuccessRateColorClass(successRate)}`}
             >
               {successRate !== null ? `${successRate}%` : '-'}
             </span>
-            <span className="text-label-xs text-text-label">
+            <span className="text-label-xs text-ds-text-neutral-muted-default">
               {t('triggers.success-rate')}
             </span>
           </div>
@@ -339,39 +353,39 @@ export function ExecutionLogs({ triggerId }: ExecutionLogsProps) {
       {/* Log Entries */}
       <div className="scrollbar flex-1 overflow-y-auto">
         {logs.length === 0 ? (
-          <div className="flex h-full flex-col items-center justify-center py-8 text-text-label">
+          <div className="py-8 text-ds-text-neutral-muted-default flex h-full flex-col items-center justify-center">
             <Terminal className="mb-2 h-8 w-8 opacity-50" />
             <span className="text-sm">{t('triggers.no-executions-yet')}</span>
           </div>
         ) : (
-          <div className="divide-y divide-border-tertiary">
+          <div className="divide-ds-border-neutral-subtle-default divide-y">
             {logs.map((log) => (
               <div
                 key={log.id}
-                className={`hover:bg-surface-tertiary-hover flex items-start gap-2.5 px-4 py-2.5 transition-colors ${getStatusColor(log.status)}`}
+                className={`hover:bg-ds-bg-neutral-strong-hover gap-2.5 px-4 py-2.5 flex items-start transition-colors ${getStatusColor(log.status)}`}
               >
                 <div className="mt-0.5 flex-shrink-0">
                   {getStatusIcon(log.status)}
                 </div>
                 <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-2">
-                    <span className="font-mono text-label-xs text-text-label">
+                  <div className="gap-2 flex items-center">
+                    <span className="font-mono text-label-xs text-ds-text-neutral-muted-default">
                       {log.timestamp}
                     </span>
                     {log.duration && (
                       <>
-                        <ArrowRight className="h-3 w-3 text-text-label" />
-                        <span className="text-label-xs text-text-label">
+                        <ArrowRight className="h-3 w-3 text-ds-text-neutral-muted-default" />
+                        <span className="text-label-xs text-ds-text-neutral-muted-default">
                           {log.duration}
                         </span>
                       </>
                     )}
                   </div>
-                  <div className="mt-0.5 text-label-xs text-text-body">
+                  <div className="mt-0.5 text-label-xs text-ds-text-neutral-default-default">
                     {log.message}
                   </div>
                   {log.details && (
-                    <div className="mt-0.5 font-mono text-label-xs text-text-label">
+                    <div className="mt-0.5 font-mono text-label-xs text-ds-text-neutral-muted-default">
                       {log.details}
                     </div>
                   )}
@@ -383,8 +397,8 @@ export function ExecutionLogs({ triggerId }: ExecutionLogsProps) {
       </div>
 
       {/* Footer */}
-      <div className="flex flex-row items-center justify-start px-4 py-2">
-        <span className="text-label-xs text-text-label">
+      <div className="px-4 py-2 flex flex-row items-center justify-start">
+        <span className="text-label-xs text-ds-text-neutral-muted-default">
           {t('triggers.last-run-label')}:{' '}
           {formatRelativeTime(trigger.last_executed_at)}
         </span>
diff --git a/src/components/Trigger/SchedulePicker.tsx b/src/components/Trigger/SchedulePicker.tsx
index 539ea54e3..51bd08e3e 100644
--- a/src/components/Trigger/SchedulePicker.tsx
+++ b/src/components/Trigger/SchedulePicker.tsx
@@ -736,7 +736,7 @@ export const SchedulePicker: React.FC<SchedulePickerProps> = ({
   }, []);
 
   return (
-    <div className="flex h-full w-full flex-col space-y-4">
+    <div className="space-y-4 flex h-full w-full flex-col">
       <Tabs
         value={frequency}
         onValueChange={(value) => setFrequency(value as FrequencyType)}
@@ -778,7 +778,7 @@ export const SchedulePicker: React.FC<SchedulePickerProps> = ({
                 : undefined
             }
           />
-          <div className="flex items-end gap-3">
+          <div className="gap-3 flex items-end">
             <div className="flex-1">
               <InputSelect
                 value={hour}
@@ -807,7 +807,7 @@ export const SchedulePicker: React.FC<SchedulePickerProps> = ({
         </TabsContent>
 
         <TabsContent value="daily" className="mt-4 space-y-3">
-          <div className="flex items-end gap-3">
+          <div className="gap-3 flex items-end">
             <div className="flex-1">
               <InputSelect
                 value={hour}
@@ -850,7 +850,7 @@ export const SchedulePicker: React.FC<SchedulePickerProps> = ({
         </TabsContent>
 
         <TabsContent value="weekly" className="mt-4 space-y-3">
-          <div className="flex items-end gap-3">
+          <div className="gap-3 flex items-end">
             <div className="flex-1">
               <InputSelect
                 value={hour}
@@ -877,7 +877,7 @@ export const SchedulePicker: React.FC<SchedulePickerProps> = ({
             </div>
           </div>
           <div>
-            <div className="mb-1.5 text-body-sm font-bold text-text-heading">
+            <div className="mb-1.5 text-body-sm font-bold text-ds-text-neutral-default-default">
               {t('triggers.schedule-weekdays')} *
             </div>
             <ToggleGroup
@@ -892,7 +892,7 @@ export const SchedulePicker: React.FC<SchedulePickerProps> = ({
                   // This prevents having no weekdays selected
                 }
               }}
-              className="flex flex-wrap gap-2"
+              className="gap-2 flex flex-wrap"
             >
               <ToggleGroupItem
                 value="0"
@@ -945,7 +945,7 @@ export const SchedulePicker: React.FC<SchedulePickerProps> = ({
               </ToggleGroupItem>
             </ToggleGroup>
             {showErrors && weekdays.length === 0 && (
-              <div className="mt-1 text-xs text-text-cuation">
+              <div className="mt-1 text-xs text-ds-text-status-error-strong-default">
                 {t('triggers.weekday-required')}
               </div>
             )}
@@ -977,7 +977,7 @@ export const SchedulePicker: React.FC<SchedulePickerProps> = ({
             required
             state={showErrors && !dayOfMonth ? 'error' : undefined}
           />
-          <div className="flex items-end gap-3">
+          <div className="gap-3 flex items-end">
             <div className="flex-1">
               <InputSelect
                 value={hour}
@@ -1040,19 +1040,19 @@ export const SchedulePicker: React.FC<SchedulePickerProps> = ({
       {/* Scheduled Times Preview */}
       <Accordion type="single" collapsible className="mt-auto w-full">
         <AccordionItem value="scheduled-times" className="border-none">
-          <AccordionTrigger className="bg-transparent py-2 hover:no-underline">
-            <span className="text-sm font-bold text-text-heading">
+          <AccordionTrigger className="py-2 bg-transparent hover:no-underline">
+            <span className="text-sm font-bold text-ds-text-neutral-default-default">
               {t('triggers.preview-scheduled-times')}
             </span>
           </AccordionTrigger>
           <AccordionContent>
-            <div className="space-y-2 rounded-lg bg-surface-primary p-4">
+            <div className="space-y-2 rounded-lg bg-ds-bg-neutral-subtle-default p-4">
               {nextScheduledTimes.map((time, index) => (
                 <div
                   key={index}
-                  className="flex items-center gap-2 text-label-sm text-text-body"
+                  className="gap-2 text-label-sm text-ds-text-neutral-default-default flex items-center"
                 >
-                  <span className="w-5 font-mono text-xs text-text-label">
+                  <span className="w-5 font-mono text-xs text-ds-text-neutral-muted-default">
                     {String(index + 1).padStart(2, '0')}
                   </span>
                   <span>{formatScheduledTime(time)}</span>
diff --git a/src/components/Trigger/TriggerDialog.tsx b/src/components/Trigger/TriggerDialog.tsx
index 98374d844..fd82ecbe4 100644
--- a/src/components/Trigger/TriggerDialog.tsx
+++ b/src/components/Trigger/TriggerDialog.tsx
@@ -421,7 +421,7 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
       selectedTrigger?.config?.authentication_required;
 
     return (
-      <div className="flex w-full flex-col gap-6 py-6 pl-6 pr-4">
+      <div className="gap-6 py-6 pl-6 pr-4 flex w-full flex-col">
         {/* Trigger Name */}
         <Input
           id="name"
@@ -478,15 +478,12 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
               // Don't change trigger_type when switching to app tab
               // The actual type will be set when user selects an app
             }}
-            className="w-full rounded-2xl bg-surface-disabled"
+            className="rounded-2xl bg-ds-bg-neutral-muted-disabled w-full"
           >
-            <TabsList
-              variant="outline"
-              className="w-full rounded-t-2xl border-x-0 border-b-[0.5px] border-t-0 border-solid border-border-secondary px-4"
-            >
+            <TabsList appearance="default" className="w-full">
               <TabsTrigger
                 value="schedule"
-                className="flex-1"
+                className="text-body-sm gap-2 flex-1"
                 disabled={!!selectedTrigger}
               >
                 <AlarmClockIcon className="h-4 w-4" />
@@ -494,7 +491,7 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
               </TabsTrigger>
               <TabsTrigger
                 value="app"
-                className="flex-1"
+                className="text-body-sm gap-2 flex-1"
                 disabled={!!selectedTrigger}
               >
                 <CableIcon className="h-4 w-4" />
@@ -521,9 +518,9 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
                   <Label className="text-sm font-bold">
                     {t('triggers.select-app')}
                   </Label>
-                  <div className="grid grid-cols-2 gap-3">
+                  <div className="gap-3 grid grid-cols-2">
                     <Card
-                      className="relative flex h-24 cursor-pointer flex-col items-center justify-center gap-2 border-border-tertiary bg-surface-primary transition-colors hover:border-border-secondary"
+                      className="h-24 gap-2 border-ds-border-neutral-subtle-default bg-ds-bg-neutral-subtle-default hover:border-ds-border-neutral-default-default relative flex cursor-pointer flex-col items-center justify-center transition-colors"
                       onClick={() => {
                         setSelectedApp('slack');
                         setFormData({
@@ -536,12 +533,12 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
                       }}
                     >
                       <img src={slackIcon} alt="Slack" className="h-8 w-8" />
-                      <span className="text-body-md font-semibold text-text-heading">
+                      <span className="text-body-md font-semibold text-ds-text-neutral-default-default">
                         Slack
                       </span>
                     </Card>
                     <Card
-                      className="relative flex h-24 cursor-pointer flex-col items-center justify-center gap-2 border-border-tertiary bg-surface-primary transition-colors hover:border-border-secondary"
+                      className="h-24 gap-2 border-ds-border-neutral-subtle-default bg-ds-bg-neutral-subtle-default hover:border-ds-border-neutral-default-default relative flex cursor-pointer flex-col items-center justify-center transition-colors"
                       onClick={() => {
                         setSelectedApp('webhook');
                         setFormData({
@@ -554,26 +551,26 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
                       }}
                     >
                       <WebhookIcon className="h-5 w-5" />
-                      <span className="text-body-md font-semibold text-text-heading">
+                      <span className="text-body-md font-semibold text-ds-text-neutral-default-default">
                         Webhook
                       </span>
                     </Card>
-                    <Card className="relative flex h-24 cursor-not-allowed flex-col items-center justify-center gap-2 border-border-tertiary bg-surface-primary opacity-50 transition-colors hover:border-border-secondary">
+                    <Card className="h-24 gap-2 border-ds-border-neutral-subtle-default bg-ds-bg-neutral-subtle-default hover:border-ds-border-neutral-default-default relative flex cursor-not-allowed flex-col items-center justify-center opacity-50 transition-colors">
                       <Badge
                         variant="secondary"
-                        className="absolute right-2 top-2 text-xs"
+                        className="right-2 top-2 text-xs absolute"
                       >
                         Coming Soon
                       </Badge>
                       <img src={larkIcon} alt="Lark" className="h-8 w-8" />
-                      <span className="text-body-md font-semibold text-text-heading">
+                      <span className="text-body-md font-semibold text-ds-text-neutral-default-default">
                         Lark
                       </span>
                     </Card>
-                    <Card className="relative flex h-24 cursor-not-allowed flex-col items-center justify-center gap-2 border-border-tertiary bg-surface-primary opacity-50 transition-colors hover:border-border-secondary">
+                    <Card className="h-24 gap-2 border-ds-border-neutral-subtle-default bg-ds-bg-neutral-subtle-default hover:border-ds-border-neutral-default-default relative flex cursor-not-allowed flex-col items-center justify-center opacity-50 transition-colors">
                       <Badge
                         variant="secondary"
-                        className="absolute right-2 top-2 text-xs"
+                        className="right-2 top-2 text-xs absolute"
                       >
                         Coming Soon
                       </Badge>
@@ -582,7 +579,7 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
                         alt="Telegram"
                         className="h-8 w-8"
                       />
-                      <span className="text-body-md font-semibold text-text-heading">
+                      <span className="text-body-md font-semibold text-ds-text-neutral-default-default">
                         Telegram
                       </span>
                     </Card>
@@ -591,7 +588,7 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
               ) : (
                 <div className="space-y-4">
                   <div className="mb-4 flex items-center justify-between">
-                    <div className="flex items-center gap-2">
+                    <div className="gap-2 flex items-center">
                       {selectedApp === 'slack' && <Slack className="h-5 w-5" />}
                       {selectedApp === 'webhook' && (
                         <WebhookIcon className="h-5 w-5" />
@@ -618,19 +615,19 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
                     )}
                   </div>
                   {!selectedTrigger || !formData.webhook_url ? (
-                    <div className="rounded-lg bg-surface-secondary p-3 text-sm text-text-label">
+                    <div className="rounded-lg bg-ds-bg-neutral-default-default p-3 text-sm text-ds-text-neutral-muted-default">
                       {t('triggers.webhook-url-after-creation')}
                     </div>
                   ) : (
                     <div
-                      className={`flex flex-row items-center justify-start gap-4 rounded-xl bg-surface-primary p-4 ${needsAuth ? 'border border-yellow-500' : ''}`}
+                      className={`gap-4 rounded-xl bg-ds-bg-neutral-subtle-default p-4 flex flex-row items-center justify-start ${needsAuth ? 'border-yellow-500 border' : ''}`}
                     >
-                      <div className="flex w-full items-center gap-2 break-all font-mono text-sm text-text-body">
+                      <div className="gap-2 font-mono text-sm text-ds-text-neutral-default-default flex w-full items-center break-all">
                         {needsAuth && (
                           <TooltipSimple
                             content={t('triggers.verification-required')}
                           >
-                            <AlertTriangle className="h-4 w-4 flex-shrink-0 text-yellow-600" />
+                            <AlertTriangle className="h-4 w-4 text-yellow-600 flex-shrink-0" />
                           </TooltipSimple>
                         )}
                         {`${import.meta.env.VITE_PROXY_URL}/api${formData.webhook_url || createdWebhookUrl}`}
@@ -684,13 +681,13 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
                           value="extra-settings"
                           className="border-none"
                         >
-                          <AccordionTrigger className="bg-transparent py-2 hover:no-underline">
-                            <span className="text-sm font-bold text-text-heading">
+                          <AccordionTrigger className="py-2 bg-transparent hover:no-underline">
+                            <span className="text-sm font-bold text-ds-text-neutral-default-default">
                               {t('triggers.extra-settings')}
                             </span>
                           </AccordionTrigger>
                           <AccordionContent>
-                            <div className="flex flex-col gap-4 rounded-xl bg-surface-tertiary p-4 pt-2">
+                            <div className="gap-4 rounded-xl bg-ds-bg-neutral-strong-default p-4 pt-2 flex flex-col">
                               <DynamicTriggerConfig
                                 triggerType={TriggerType.Webhook}
                                 value={triggerConfig}
@@ -714,14 +711,14 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
         {formData?.trigger_type !== TriggerType.Schedule && (
           <Accordion type="single" collapsible className="w-full">
             <AccordionItem value="execution-settings" className="border-none">
-              <AccordionTrigger className="bg-transparent py-2 hover:no-underline">
-                <span className="text-sm font-bold text-text-heading">
+              <AccordionTrigger className="py-2 bg-transparent hover:no-underline">
+                <span className="text-sm font-bold text-ds-text-neutral-default-default">
                   {t('triggers.execution-settings')}
                 </span>
               </AccordionTrigger>
               <AccordionContent>
-                <div className="flex flex-col gap-4 rounded-lg bg-surface-disabled p-4 pt-2">
-                  <div className="flex items-center gap-2">
+                <div className="gap-4 rounded-lg bg-ds-bg-neutral-muted-disabled p-4 pt-2 flex flex-col">
+                  <div className="gap-2 flex items-center">
                     <Input
                       id="max_per_hour"
                       title={t('triggers.max-per-hour')}
@@ -773,7 +770,7 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
   const renderFooter = () => {
     return (
       <DialogFooter>
-        <div className="flex w-full justify-end gap-2">
+        <div className="gap-2 flex w-full justify-end">
           {selectedTrigger && (
             <Button variant="ghost" onClick={handleClose} disabled={isLoading}>
               {t('triggers.cancel')}
@@ -805,9 +802,10 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
           showCloseButton={true}
           onClose={handleClose}
           aria-describedby={undefined}
+          className="min-h-0 h-[min(90vh,100dvh)] max-h-[min(90vh,100dvh)]"
         >
           <DialogHeader title={getDialogTitle()} />
-          <DialogContentSection className="scrollbar-overlay min-h-0 flex-1 p-0">
+          <DialogContentSection className="scrollbar-overlay min-h-0 p-0 flex-1">
             {renderCreateContent()}
           </DialogContentSection>
           {renderFooter()}
@@ -826,21 +824,21 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
           aria-describedby={undefined}
         >
           <DialogHeader
-            className="!rounded-t-xl border-b border-border-secondary !bg-popup-surface p-md"
+            className="!rounded-t-xl border-ds-border-neutral-default-default !bg-ds-bg-neutral-strong-default p-md border-b"
             title={t('triggers.webhook-created-title')}
           />
 
           {/* Trigger Details Section */}
-          <div className="flex flex-col items-center justify-center gap-2 p-4">
-            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-surface-success shadow-sm">
-              <Zap className="h-8 w-8 text-text-success" />
+          <div className="gap-2 p-4 flex flex-col items-center justify-center">
+            <div className="h-16 w-16 bg-ds-bg-status-completed-subtle-default shadow-sm flex items-center justify-center rounded-full">
+              <Zap className="h-8 w-8 text-ds-icon-status-completed-default-default" />
             </div>
-            <div className="flex flex-col gap-2 px-4 pt-2">
-              <div className="text-lg font-bold text-text-heading">
+            <div className="gap-2 px-4 pt-2 flex flex-col">
+              <div className="text-lg font-bold text-ds-text-neutral-default-default">
                 {formData.name}
               </div>
               {formData.description && (
-                <div className="line-clamp-2 max-w-md text-sm text-text-label">
+                <div className="max-w-md text-sm text-ds-text-neutral-muted-default line-clamp-2">
                   {formData.description}
                 </div>
               )}
@@ -849,21 +847,21 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
           </div>
 
           {/* Webhook URL Section */}
-          <div className="flex flex-col p-4">
-            <div className="mb-4 flex items-center justify-start gap-2">
-              <Label className="text-sm font-semibold text-text-heading">
+          <div className="p-4 flex flex-col">
+            <div className="mb-4 gap-2 flex items-center justify-start">
+              <Label className="text-sm font-semibold text-ds-text-neutral-default-default">
                 {t('triggers.your-webhook-url')}
               </Label>
               <TooltipSimple content={t('triggers.webhook-instructions')}>
                 <CircleAlert
-                  className="h-4 w-4 cursor-pointer text-icon-primary"
+                  className="h-4 w-4 text-ds-icon-neutral-default-default cursor-pointer"
                   onClick={(e) => e.stopPropagation()}
                 />
               </TooltipSimple>
             </div>
 
-            <div className="flex flex-row items-center justify-start gap-4 rounded-xl bg-surface-primary p-4">
-              <div className="w-full break-all font-mono text-sm text-text-body">
+            <div className="gap-4 rounded-xl bg-ds-bg-neutral-subtle-default p-4 flex flex-row items-center justify-start">
+              <div className="font-mono text-sm text-ds-text-neutral-default-default w-full break-all">
                 {`${import.meta.env.VITE_PROXY_URL}/api${createdWebhookUrl}`}
               </div>
               <Button
@@ -879,13 +877,13 @@ export const TriggerDialog: React.FC<TriggerDialogProps> = ({
 
           {/* Info Tip Section */}
           {/* <div className="flex flex-col p-4">
-                        <div className="flex flex-row items-start justify-start bg-surface-information rounded-xl p-4">
-                            <Globe className="w-5 h-5 text-text-information" />
+                        <div className="flex flex-row items-start justify-start bg-ds-bg-status-splitting-subtle-default rounded-xl p-4">
+                            <Globe className="w-5 h-5 text-ds-text-status-splitting-strong-default" />
                             <div className="flex flex-col items-start justify-start gap-2 pl-4">
-                                <div className="text-label-sm font-semibold text-text-information">
+                                <div className="text-label-sm font-semibold text-ds-text-status-splitting-strong-default">
                                     {t("triggers.webhook-tip-title")}
                                 </div>
-                                <div className="text-label-sm text-text-information opacity-60 leading-relaxed">
+                                <div className="text-label-sm text-ds-text-status-splitting-strong-default opacity-60 leading-relaxed">
                                     {t("triggers.webhook-tip-description")}
                                 </div>
                             </div>
diff --git a/src/components/Trigger/TriggerListItem.tsx b/src/components/Trigger/TriggerListItem.tsx
index 02273f53c..dab482f53 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-ds-bg-neutral-default-default rounded-xl flex cursor-pointer items-center border transition-all duration-200 ${
+        isSelected
+          ? 'border-ds-border-brand-default-default'
+          : needsAuth
+            ? 'border-ds-border-warning-default-default hover:border-ds-border-warning-default-hover hover:bg-ds-bg-neutral-strong-default'
+            : 'border-ds-border-neutral-subtle-default hover:border-ds-border-neutral-default-default hover:bg-ds-bg-neutral-strong-default'
+      }`}
+    >
+      {/* 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-ds-icon-neutral-default-default" />
+      </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-ds-text-neutral-default-default group-hover:text-ds-text-brand-default-hover 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-ds-text-neutral-muted-default 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-ds-text-neutral-muted-default 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-ds-text-error-default-default focus:text-ds-text-error-strong-default"
+            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 66%
rename from src/pages/Project/Triggers.tsx
rename to src/components/Trigger/Triggers.tsx
index 33402d7d1..856f30c03 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);
@@ -105,7 +119,6 @@ export default function Overview() {
         const response = await proxyFetchProjectTriggers(
           projectStore.activeProjectId
         );
-        console.log('Fetched triggers:', response);
 
         setTriggers(response.items || []);
       } catch (error) {
@@ -117,51 +130,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 =
@@ -171,13 +145,11 @@ export default function Overview() {
     const isActivating = newStatus === TriggerStatus.Active;
 
     try {
-      const response = isActivating
-        ? await proxyActivateTrigger(trigger.id)
-        : await proxyDeactivateTrigger(trigger.id);
-      console.log(
-        `Trigger ${isActivating ? 'activation' : 'deactivation'} response:`,
-        response
-      );
+      if (isActivating) {
+        await proxyActivateTrigger(trigger.id);
+      } else {
+        await proxyDeactivateTrigger(trigger.id);
+      }
 
       updateTrigger(trigger.id, { status: newStatus });
       toast.success(
@@ -220,11 +192,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 +218,8 @@ export default function Overview() {
       deleteTrigger(deletingTrigger.id);
 
       if (selectedTriggerId === deletingTrigger.id) {
-        setSelectedTriggerId(null);
-        setIsExecutionLogsOpen(false);
+        onSelectedTriggerIdChange(null);
+        onExecutionLogsOpenChange(false);
       }
 
       // Add activity log
@@ -300,79 +272,11 @@ 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="pl-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="scrollbar-always-visible pt-2 mx-auto flex h-full w-full max-w-[800px] flex-col overflow-auto">
             <div className="gap-2 flex flex-col">
               {sortedTriggers.length === 0 ? (
                 <div
@@ -380,16 +284,16 @@ export default function Overview() {
                     setEditingTrigger(null);
                     setEditDialogOpen(true);
                   }}
-                  className="group gap-3 rounded-xl border-border-tertiary bg-surface-primary p-3 hover:border-border-secondary hover:bg-surface-tertiary flex cursor-pointer items-center justify-center border transition-all duration-200"
+                  className="group gap-3 rounded-xl bg-ds-bg-neutral-default-default p-3 flex cursor-pointer items-center justify-center transition-all duration-200 hover:opacity-60"
                 >
                   {/* Zap Icon */}
-                  <div className="bg-amber-500/10 h-10 w-10 rounded-lg flex flex-shrink-0 items-center justify-center">
-                    <Plus className="h-5 w-5 text-icon-primary" />
+                  <div className="bg-ds-bg-neutral-subtle-default h-10 w-10 rounded-lg flex flex-shrink-0 items-center justify-center">
+                    <Plus className="h-5 w-5 text-ds-icon-neutral-default-default" />
                   </div>
 
                   {/* Create Trigger Text */}
                   <div className="w-full flex-1">
-                    <div className="text-sm font-semibold text-text-heading group-hover:text-text-action truncate transition-colors">
+                    <div className="text-sm font-semibold text-ds-text-neutral-muted-default group-hover:text-ds-text-brand-default-hover truncate transition-colors">
                       {t('triggers.create-hint')}
                     </div>
                   </div>
@@ -440,15 +344,15 @@ export default function Overview() {
             damping: 34,
             mass: 0.9,
           }}
-          className={`mb-2 rounded-xl bg-surface-primary flex h-full flex-col overflow-hidden ${
+          className={`mb-2 bg-ds-bg-neutral-subtle-default border-ds-border-neutral-subtle-default flex h-full flex-col overflow-hidden border border-y-0 border-r-0 border-l-1 border-solid ${
             selectedTriggerId && isExecutionLogsOpen
               ? ''
               : 'pointer-events-none'
           }`}
         >
           <div className="min-h-0 flex h-full flex-col">
-            <div className="bg-surface-tertiary px-3 py-3 relative flex flex-row items-center justify-start">
-              <span className="text-label-sm font-bold text-text-body">
+            <div className="bg-ds-bg-neutral-muted-default px-3 py-3 relative flex flex-row items-center justify-start">
+              <span className="text-label-sm font-bold text-ds-text-neutral-default-default">
                 {t('triggers.execution-logs')}
               </span>
             </div>
@@ -480,7 +384,7 @@ export default function Overview() {
         >
           <DialogHeader title={t('triggers.delete-trigger')} />
           <DialogContentSection className="space-y-4">
-            <p className="text-sm text-text-body">
+            <p className="text-sm text-ds-text-neutral-default-default">
               {t('triggers.confirm-delete-message', {
                 name: deletingTrigger?.name,
               })}
@@ -498,7 +402,7 @@ export default function Overview() {
             <Button
               size="md"
               onClick={handleConfirmDelete}
-              variant="cuation"
+              variant="caution"
               disabled={isDeleting}
             >
               {isDeleting
diff --git a/src/components/Trigger/index.tsx b/src/components/Trigger/index.tsx
new file mode 100644
index 000000000..6e7c9f168
--- /dev/null
+++ b/src/components/Trigger/index.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 { 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 { cn } from '@/lib/utils';
+import { useTriggerStore } from '@/store/triggerStore';
+import {
+  ArrowUpDown,
+  Plus,
+  SquareChevronRight,
+  SquareCode,
+} from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import Overview, { sortTriggersList, type TriggerSortKey } from './Triggers';
+
+type TriggerPanelProps = {
+  className?: string;
+  sortBy: TriggerSortKey;
+  onSortByChange: (sortBy: TriggerSortKey) => void;
+  selectedTriggerId: number | null;
+  onSelectedTriggerIdChange: (id: number | null) => void;
+  isExecutionLogsOpen: boolean;
+  onExecutionLogsOpenChange: (open: boolean) => void;
+  isDialogOpen: boolean;
+  onDialogOpenChange: (open: boolean) => void;
+};
+
+export default function TriggerPanel({
+  className,
+  sortBy,
+  onSortByChange,
+  selectedTriggerId,
+  onSelectedTriggerIdChange,
+  isExecutionLogsOpen,
+  onExecutionLogsOpenChange,
+  isDialogOpen,
+  onDialogOpenChange,
+}: TriggerPanelProps) {
+  const { t } = useTranslation();
+  const { wsConnectionStatus, triggers } = useTriggerStore();
+
+  const sortedTriggersForHeader = useMemo(
+    () => sortTriggersList(triggers, sortBy),
+    [triggers, sortBy]
+  );
+
+  const triggerSortLabel = useMemo(() => {
+    switch (sortBy) {
+      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');
+    }
+  }, [sortBy, t]);
+
+  return (
+    <div
+      className={cn(
+        'min-h-0 min-w-0 flex h-full w-full flex-col overflow-hidden',
+        className
+      )}
+    >
+      <div className="gap-2 px-2 py-2 border-ds-border-neutral-subtle-default flex w-full shrink-0 items-center justify-between border-x-0 border-t-0 border-b-1 border-solid">
+        <div className="text-ds-text-neutral-muted-default 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="ghost"
+                buttonContent="text"
+                size="sm"
+                className="rounded-lg"
+              >
+                {triggerSortLabel}
+                <ArrowUpDown />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => onSortByChange('createdAt')}>
+                {t('triggers.created-time')}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => onSortByChange('lastExecutionTime')}
+              >
+                {t('triggers.last-execution-label')}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Button
+            variant="primary"
+            size="sm"
+            className="rounded-lg items-center justify-center"
+            onClick={() => onDialogOpenChange(true)}
+          >
+            <Plus />
+            {t('triggers.create')}
+          </Button>
+          <TooltipSimple
+            content={
+              isExecutionLogsOpen
+                ? t('triggers.fold-execution-logs')
+                : t('triggers.open-execution-logs')
+            }
+            delayDuration={300}
+            side="bottom"
+          >
+            <Button
+              variant="ghost"
+              size="icon"
+              className="opacity-70"
+              disabled={sortedTriggersForHeader.length === 0}
+              onClick={() => {
+                if (isExecutionLogsOpen) {
+                  onExecutionLogsOpenChange(false);
+                  return;
+                }
+
+                if (!selectedTriggerId && sortedTriggersForHeader.length > 0) {
+                  onSelectedTriggerIdChange(sortedTriggersForHeader[0].id);
+                }
+
+                onExecutionLogsOpenChange(true);
+              }}
+            >
+              {isExecutionLogsOpen ? (
+                <SquareChevronRight className="h-4 w-4" />
+              ) : (
+                <SquareCode className="h-4 w-4" />
+              )}
+            </Button>
+          </TooltipSimple>
+          <TriggerDialog
+            selectedTrigger={null}
+            isOpen={isDialogOpen}
+            onOpenChange={onDialogOpenChange}
+          />
+        </div>
+      </div>
+      <div
+        className={cn(
+          'min-h-0 w-full flex-1',
+          wsConnectionStatus === 'disconnected' &&
+            'pointer-events-none opacity-50 grayscale'
+        )}
+      >
+        <Overview
+          sortBy={sortBy}
+          selectedTriggerId={selectedTriggerId}
+          onSelectedTriggerIdChange={onSelectedTriggerIdChange}
+          isExecutionLogsOpen={isExecutionLogsOpen}
+          onExecutionLogsOpenChange={onExecutionLogsOpenChange}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/WorkFlow/MarkDown.tsx b/src/components/WorkFlow/MarkDown.tsx
index 8b11132a7..3ca7948ba 100644
--- a/src/components/WorkFlow/MarkDown.tsx
+++ b/src/components/WorkFlow/MarkDown.tsx
@@ -72,8 +72,8 @@ export const MarkDown = ({
       .join('\n')
       .trim();
     return (
-      <div className="prose prose-sm markdown-container pointer-events-auto w-full select-text overflow-x-auto">
-        <pre className="overflow-x-auto whitespace-pre-wrap rounded bg-code-surface p-2 font-mono text-xs">
+      <div className="prose prose-sm markdown-container pointer-events-auto w-full overflow-x-auto select-text">
+        <pre className="rounded bg-code-surface p-2 font-mono text-xs overflow-x-auto whitespace-pre-wrap">
           <code>{formattedHtml}</code>
         </pre>
       </div>
@@ -81,35 +81,35 @@ export const MarkDown = ({
   }
 
   return (
-    <div className="prose prose-sm markdown-container pointer-events-auto w-full select-text overflow-x-auto">
+    <div className="prose prose-sm markdown-container pointer-events-auto w-full overflow-x-auto select-text">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{
           h1: ({ children }) => (
-            <h1 className="text-primary mb-1 break-words text-label-sm font-bold">
+            <h1 className="text-ds-text-neutral-default-default mb-1 text-label-sm font-bold break-words">
               {children}
             </h1>
           ),
           h2: ({ children }) => (
-            <h2 className="text-primary mb-1 break-words text-label-sm font-semibold">
+            <h2 className="text-ds-text-neutral-default-default mb-1 text-label-sm font-semibold break-words">
               {children}
             </h2>
           ),
           h3: ({ children }) => (
-            <h3 className="text-primary mb-1 break-words text-label-sm font-medium">
+            <h3 className="text-ds-text-neutral-default-default mb-1 text-label-sm font-medium break-words">
               {children}
             </h3>
           ),
           p: ({ children }) => (
             <p
-              className={`m-0 ${pTextSize} text-primary whitespace-pre-line break-words font-inter text-label-xs font-medium`}
+              className={`m-0 ${pTextSize} text-ds-text-neutral-default-default font-inter text-label-xs font-medium break-words whitespace-pre-line`}
             >
               {children}
             </p>
           ),
           ul: ({ children }) => (
             <ul
-              className={`text-primary mb-1 list-disc pl-4 text-label-xs ${olPadding}`}
+              className={`text-ds-text-neutral-default-default mb-1 pl-4 text-label-xs list-disc ${olPadding}`}
             >
               {children}
             </ul>
@@ -127,7 +127,7 @@ export const MarkDown = ({
           a: ({ children, href }) => (
             <a
               href={href}
-              className="break-all underline hover:text-text-link-hover"
+              className="text-ds-text-neutral-default-default hover:text-ds-text-neutral-default-hover break-all underline"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -140,30 +140,30 @@ export const MarkDown = ({
             </code>
           ),
           pre: ({ children }) => (
-            <pre className="overflow-x-auto whitespace-pre-wrap rounded bg-code-surface p-2 font-mono text-xs">
+            <pre className="rounded bg-code-surface p-2 font-mono text-xs overflow-x-auto whitespace-pre-wrap">
               {children}
             </pre>
           ),
           blockquote: ({ children }) => (
-            <blockquote className="text-primary border-l-4 border-border-subtle-strong pl-3 text-xs italic">
+            <blockquote className="text-ds-text-neutral-default-default border-ds-border-neutral-strong-default pl-3 text-xs border-l-4 italic">
               {children}
             </blockquote>
           ),
           strong: ({ children }) => (
-            <strong className="text-primary text-xs font-semibold">
+            <strong className="text-ds-text-neutral-default-default text-xs font-semibold">
               {children}
             </strong>
           ),
           em: ({ children }) => (
-            <em className="text-primary text-xs italic">{children}</em>
+            <em className="text-ds-text-neutral-default-default text-xs italic">
+              {children}
+            </em>
           ),
           table: ({ children }) => (
             <div className="w-full max-w-full overflow-x-auto">
               <table
-                className="mb-4 !table w-full min-w-0"
+                className="mb-4 min-w-0 border-ds-border-neutral-default-default !table w-full border-collapse border"
                 style={{
-                  borderCollapse: 'collapse',
-                  border: '1px solid #d1d5db',
                   borderSpacing: 0,
                 }}
               >
@@ -172,7 +172,7 @@ export const MarkDown = ({
             </div>
           ),
           thead: ({ children }) => (
-            <thead className="!table-header-group bg-code-surface">
+            <thead className="bg-code-surface !table-header-group">
               {children}
             </thead>
           ),
@@ -181,26 +181,12 @@ export const MarkDown = ({
           ),
           tr: ({ children }) => <tr className="!table-row">{children}</tr>,
           th: ({ children }) => (
-            <th
-              className="text-primary !table-cell text-left text-[10px] font-semibold"
-              style={{
-                border: '1px solid #d1d5db',
-                padding: '2px 5px',
-                borderCollapse: 'collapse',
-              }}
-            >
+            <th className="text-ds-text-neutral-default-default border-ds-border-neutral-default-default font-semibold py-0.5 !table-cell border px-[5px] text-left text-[10px]">
               {children}
             </th>
           ),
           td: ({ children }) => (
-            <td
-              className="text-primary !table-cell text-[10px]"
-              style={{
-                border: '1px solid #d1d5db',
-                padding: '2px 5px',
-                borderCollapse: 'collapse',
-              }}
-            >
+            <td className="text-ds-text-neutral-default-default border-ds-border-neutral-default-default py-0.5 !table-cell border px-[5px] text-[10px]">
               {children}
             </td>
           ),
diff --git a/src/components/WorkFlow/TaskLogPanelContent.tsx b/src/components/WorkFlow/TaskLogPanelContent.tsx
new file mode 100644
index 000000000..6a5e40303
--- /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 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-ds-text-neutral-default-default 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-ds-text-neutral-default-default text-nowrap">
+                        {toolkit.toolkitMethods
+                          ? toolkit.toolkitMethods.charAt(0).toUpperCase() +
+                            toolkit.toolkitMethods.slice(1)
+                          : ''}
+                      </div>
+                      <div
+                        className={`text-label-xs font-normal text-ds-text-neutral-default-default 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-ds-border-neutral-default-default bg-ds-bg-neutral-strong-default 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-ds-bg-neutral-subtle-default relative flex w-full flex-col"
+        >
+          <div className="top-0 rounded-lg bg-ds-bg-neutral-subtle-default py-2 pl-2 pr-2 sticky z-10 flex items-center justify-between">
+            <div className="text-label-sm font-bold text-ds-text-neutral-default-default">
+              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-ds-icon-neutral-muted-default" />
+              <span className="text-ds-icon-neutral-muted-default">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/agents.tsx b/src/components/WorkFlow/agents.tsx
index 07744269f..54c99fc91 100644
--- a/src/components/WorkFlow/agents.tsx
+++ b/src/components/WorkFlow/agents.tsx
@@ -32,46 +32,65 @@ export interface AgentDisplayInfo {
   bgColorLight: string;
 }
 
+/**
+ * Classes for the small top-right role badge on agent tiles. Must be full literal
+ * strings (including `!`) so Tailwind emits them, and `!text-*` beats
+ * `button .lucide` in `src/style/index.css`.
+ */
+export const WORKFLOW_AGENT_SUB_ICON_CLASS: Record<WorkflowAgentType, string> =
+  {
+    developer_agent:
+      '!h-[10px] !w-[10px] shrink-0 !text-ds-text-terminal-default-default',
+    browser_agent: '!h-[10px] !w-[10px] shrink-0 !text-blue-700',
+    document_agent: '!h-[10px] !w-[10px] shrink-0 !text-yellow-700',
+    multi_modal_agent: '!h-[10px] !w-[10px] shrink-0 !text-fuchsia-700',
+    social_media_agent: '!h-[10px] !w-[10px] shrink-0 !text-purple-700',
+  };
+
 export const agentMap: Record<WorkflowAgentType, AgentDisplayInfo> = {
   developer_agent: {
     name: 'Developer Agent',
-    icon: <CodeXml size={16} className="text-text-primary" />,
-    textColor: 'text-text-developer',
-    bgColor: 'bg-bg-fill-coding-active',
-    shapeColor: 'bg-bg-fill-coding-default',
-    borderColor: 'border-bg-fill-coding-active',
+    icon: (
+      <CodeXml size={16} className="text-ds-text-neutral-default-default" />
+    ),
+    textColor: 'text-ds-text-terminal-default-default',
+    bgColor: 'bg-ds-bg-terminal-default-default',
+    shapeColor: 'bg-ds-bg-terminal-subtle-default',
+    borderColor: 'border-ds-border-terminal-default-default',
     bgColorLight: 'bg-emerald-200',
   },
   browser_agent: {
     name: 'Browser Agent',
-    icon: <Globe size={16} className="text-text-primary" />,
+    icon: <Globe size={16} className="text-ds-text-neutral-default-default" />,
     textColor: 'text-blue-700',
-    bgColor: 'bg-bg-fill-browser-active',
-    shapeColor: 'bg-bg-fill-browser-default',
-    borderColor: 'border-bg-fill-browser-active',
+    bgColor: 'bg-ds-bg-browser-default-default',
+    shapeColor: 'bg-ds-bg-browser-subtle-default',
+    borderColor: 'border-ds-border-browser-default-default',
     bgColorLight: 'bg-blue-200',
   },
   document_agent: {
     name: 'Document Agent',
-    icon: <FileText size={16} className="text-text-primary" />,
+    icon: (
+      <FileText size={16} className="text-ds-text-neutral-default-default" />
+    ),
     textColor: 'text-yellow-700',
-    bgColor: 'bg-bg-fill-writing-active',
-    shapeColor: 'bg-bg-fill-writing-default',
-    borderColor: 'border-bg-fill-writing-active',
+    bgColor: 'bg-ds-bg-document-default-default',
+    shapeColor: 'bg-ds-bg-document-subtle-default',
+    borderColor: 'border-ds-border-document-default-default',
     bgColorLight: 'bg-yellow-200',
   },
   multi_modal_agent: {
     name: 'Multi Modal Agent',
-    icon: <Image size={16} className="text-text-primary" />,
+    icon: <Image size={16} className="text-ds-text-neutral-default-default" />,
     textColor: 'text-fuchsia-700',
-    bgColor: 'bg-bg-fill-multimodal-active',
-    shapeColor: 'bg-bg-fill-multimodal-default',
-    borderColor: 'border-bg-fill-multimodal-active',
+    bgColor: 'bg-ds-bg-neutral-default-default',
+    shapeColor: 'bg-ds-bg-neutral-subtle-default',
+    borderColor: 'border-ds-border-neutral-default-default',
     bgColorLight: 'bg-fuchsia-200',
   },
   social_media_agent: {
     name: 'Social Media Agent',
-    icon: <Bird size={16} className="text-text-primary" />,
+    icon: <Bird size={16} className="text-ds-text-neutral-default-default" />,
     textColor: 'text-purple-700',
     bgColor: 'bg-violet-700',
     shapeColor: 'bg-violet-300',
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 ceba002ef..7d1301e8d 100644
--- a/src/components/WorkFlow/node.tsx
+++ b/src/components/WorkFlow/node.tsx
@@ -30,7 +30,6 @@ import {
   CircleCheckBig,
   CircleSlash,
   CircleSlash2,
-  Copy,
   Ellipsis,
   LoaderCircle,
   SquareChevronLeft,
@@ -49,9 +48,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;
@@ -342,26 +341,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 = '';
@@ -372,13 +351,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
@@ -428,17 +401,18 @@ export function Node({ id, data }: NodeProps) {
               : 'w-[342px]'
         } ${
           data.isEditMode ? 'h-full' : 'max-h-[calc(100vh-200px)]'
-        } flex overflow-hidden rounded-xl border border-solid border-worker-border-default bg-worker-surface-primary ${
+        } rounded-xl border-ds-border-neutral-subtle-default shadow-sm bg-ds-bg-neutral-subtle-default flex overflow-hidden border border-solid ${
           getCurrentTask()?.activeAgent === id
             ? `${agentMap[data.type]?.borderColor} z-50`
-            : 'z-10 border-worker-border-default'
-        } transition-all duration-300 ease-in-out ${
+            : 'border-ds-border-neutral-default-default z-10'
+        } ease-in-out transition-all duration-300 ${
           (data.agent?.tasks?.length ?? 0) === 0 && 'opacity-30'
         }`}
       >
-        <div className="flex w-[342px] shrink-0 flex-col border-y-0 border-l-0 border-r-[0.5px] border-solid border-border-secondary">
-          <div className="flex items-center justify-between gap-sm px-3 pb-1 pt-2">
-            <div className="flex items-center justify-between gap-md">
+        <div className="border-ds-border-neutral-default-default flex w-[342px] shrink-0 flex-col border-y-0 border-r-[0.5px] border-l-0 border-solid">
+          {/* header */}
+          <div className="gap-sm px-3 pb-1 pt-2 flex items-center justify-between">
+            <div className="gap-md flex items-center justify-between">
               <div
                 className={`text-base font-bold leading-relaxed ${
                   agentMap[data.type]?.textColor
@@ -447,8 +421,13 @@ export function Node({ id, data }: NodeProps) {
                 {agentMap[data.type]?.name || data.agent?.name}
               </div>
             </div>
-            <div className="flex items-center gap-xs">
-              <Button onClick={handleShowLog} variant="ghost" size="icon">
+            <div className="gap-xs flex items-center">
+              <Button
+                onClick={handleShowLog}
+                variant="ghost"
+                size="xs"
+                buttonContent="icon-only"
+              >
                 {isExpanded ? <SquareChevronLeft /> : <SquareCode />}
               </Button>
               {!Object.keys(agentMap).find((key) => key === data.type) &&
@@ -458,12 +437,13 @@ export function Node({ id, data }: NodeProps) {
                       <Button
                         onClick={(e) => e.stopPropagation()}
                         variant="ghost"
-                        size="icon"
+                        size="xs"
+                        buttonContent="icon-only"
                       >
                         <Ellipsis />
                       </Button>
                     </PopoverTrigger>
-                    <PopoverContent className="w-[98px] rounded-[12px] border border-solid border-dropdown-border bg-dropdown-bg p-sm">
+                    <PopoverContent className="border-ds-border-neutral-default-default bg-ds-bg-neutral-strong-default p-sm w-[98px] rounded-[12px] border border-solid">
                       <div className="space-y-1">
                         <PopoverClose asChild>
                           <AddWorker
@@ -475,7 +455,7 @@ export function Node({ id, data }: NodeProps) {
                           <Button
                             variant="ghost"
                             size="sm"
-                            className="w-full justify-start gap-2"
+                            className="gap-2 w-full justify-start"
                             onClick={(e) => {
                               e.stopPropagation();
                               const newWorkerList = workerList.filter(
@@ -486,7 +466,7 @@ export function Node({ id, data }: NodeProps) {
                           >
                             <Trash2
                               size={16}
-                              className="text-icon-primary group-hover:text-icon-cuation"
+                              className="text-ds-icon-neutral-default-default group-hover:text-ds-icon-status-error-default-default"
                             />
                             Delete
                           </Button>
@@ -497,9 +477,10 @@ export function Node({ id, data }: NodeProps) {
                 )}
             </div>
           </div>
+          {/* tools */}
           <div
             ref={toolsRef}
-            className="mb-sm flex min-h-4 flex-shrink-0 flex-wrap px-3 text-xs font-normal leading-tight text-text-label"
+            className="mb-sm min-h-4 px-3 text-xs font-normal leading-tight text-ds-text-neutral-muted-default flex flex-shrink-0 flex-wrap"
           >
             {/* {JSON.stringify(data.agent)} */}
             {toolkitLabels.map((toolkit, index) => (
@@ -508,8 +489,9 @@ export function Node({ id, data }: NodeProps) {
               </span>
             ))}
           </div>
+          {/* workspace */}
           <div
-            className="mb-2 max-h-[180px] px-3"
+            className="mb-2 px-3 max-h-[180px]"
             onClick={() => {
               chatStore.setActiveWorkspace(
                 chatStore.activeTaskId as string,
@@ -521,15 +503,15 @@ export function Node({ id, data }: NodeProps) {
           >
             {browserImages.length > 0 && (
               <div
-                className={`grid h-[180px] w-full gap-1 overflow-hidden ${browserImageGridClass}`}
+                className={`gap-1 grid h-[180px] w-full overflow-hidden ${browserImageGridClass}`}
               >
                 {browserImages.map((img, index) => (
                   <div
                     key={`${img.img}-${index}`}
-                    className="relative h-full w-full overflow-hidden rounded-lg"
+                    className="rounded-lg relative h-full w-full overflow-hidden"
                   >
                     <img
-                      className="absolute left-0 top-0 h-[250%] w-[250%] origin-top-left scale-[0.4] object-cover"
+                      className="left-0 top-0 absolute h-[250%] w-[250%] origin-top-left scale-[0.4] object-cover"
                       src={img.img}
                       alt={data.type}
                     />
@@ -539,7 +521,7 @@ export function Node({ id, data }: NodeProps) {
                   (_, index) => (
                     <div
                       key={`browser-placeholder-${index}`}
-                      className="h-full w-full rounded-sm bg-surface-primary"
+                      className="rounded-sm bg-ds-bg-neutral-subtle-default h-full w-full"
                     />
                   )
                 )}
@@ -548,8 +530,8 @@ export function Node({ id, data }: NodeProps) {
             {data.type === 'document_agent' &&
               data?.agent?.tasks &&
               data.agent.tasks.length > 0 && (
-                <div className="relative h-[180px] w-full overflow-hidden rounded-sm">
-                  <div className="absolute left-0 top-0 h-[500px] w-[900px] origin-top-left scale-[0.36]">
+                <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={data.agent as Agent} />
                   </div>
                 </div>
@@ -557,14 +539,14 @@ export function Node({ id, data }: NodeProps) {
 
             {data.type === 'developer_agent' && terminalTasks.length > 0 && (
               <div
-                className={`grid h-[180px] w-full gap-1 overflow-hidden ${terminalGridClass}`}
+                className={`gap-1 grid h-[180px] w-full overflow-hidden ${terminalGridClass}`}
               >
                 {terminalTasks.map((task) => (
                   <div
                     key={task.id}
-                    className="relative h-full w-full overflow-hidden rounded-lg object-cover"
+                    className="rounded-lg relative h-full w-full overflow-hidden object-cover"
                   >
-                    <div className="absolute left-0 top-0 h-[250%] w-[250%] origin-top-left scale-[0.4]">
+                    <div className="left-0 top-0 absolute h-[250%] w-[250%] origin-top-left scale-[0.4]">
                       <Terminal content={task.terminal} />
                     </div>
                   </div>
@@ -573,15 +555,16 @@ export function Node({ id, data }: NodeProps) {
                   (_, index) => (
                     <div
                       key={`terminal-placeholder-${index}`}
-                      className="h-full w-full rounded-lg bg-surface-primary"
+                      className="rounded-lg bg-ds-bg-neutral-subtle-default h-full w-full"
                     />
                   )
                 )}
               </div>
             )}
           </div>
+          {/* subtasks */}
           {data.agent?.tasks && data.agent?.tasks.length > 0 && (
-            <div className="flex flex-col items-start justify-between gap-1 border-[0px] border-t border-solid border-task-border-default px-3 py-sm">
+            <div className="gap-1 border-ds-border-neutral-default-default px-3 py-sm flex flex-col items-start justify-between border-[0px] border-t border-solid">
               {/* <div className="font-bold leading-tight text-xs">Subtasks</div> */}
               <div className="flex flex-1 justify-end">
                 <TaskState
@@ -633,7 +616,7 @@ export function Node({ id, data }: NodeProps) {
             onWheel={(e) => {
               e.stopPropagation();
             }}
-            className="scrollbar scrollbar-always-visible flex flex-col gap-2 overflow-y-auto px-3 pb-2 duration-500 ease-out animate-in fade-in-0 slide-in-from-bottom-4"
+            className="scrollbar scrollbar-always-visible gap-2 px-3 pb-2 ease-out animate-in fade-in-0 slide-in-from-bottom-4 flex flex-col overflow-y-auto duration-500"
             style={{
               maxHeight:
                 data.img && data.img.length > 0
@@ -646,6 +629,35 @@ export function Node({ id, data }: NodeProps) {
                 const lastActiveToolkit = task.toolkits
                   ?.filter((tool: any) => tool.toolkitName !== 'notice')
                   .at(-1);
+                const taskRowBgHover =
+                  task.reAssignTo || task.status === TaskStatus.BLOCKED
+                    ? 'bg-ds-bg-status-blocked-subtle-default hover:bg-ds-bg-status-blocked-subtle-hover'
+                    : task.status === TaskStatus.COMPLETED
+                      ? 'bg-ds-bg-status-completed-subtle-default hover:bg-ds-bg-status-completed-subtle-hover'
+                      : task.status === TaskStatus.FAILED
+                        ? 'bg-ds-bg-status-error-subtle-default hover:bg-ds-bg-status-error-subtle-hover'
+                        : task.status === TaskStatus.RUNNING
+                          ? 'bg-ds-bg-status-running-subtle-default hover:bg-ds-bg-status-running-subtle-hover'
+                          : task.status === TaskStatus.SKIPPED ||
+                              task.status === TaskStatus.WAITING ||
+                              task.status === TaskStatus.EMPTY
+                            ? 'bg-ds-bg-status-pending-subtle-default hover:bg-ds-bg-status-pending-subtle-hover'
+                            : 'bg-ds-bg-status-running-subtle-default hover:bg-ds-bg-status-running-subtle-hover';
+                const taskTextClass = task.reAssignTo
+                  ? 'text-ds-text-status-blocked-default-default'
+                  : task.status === TaskStatus.COMPLETED
+                    ? 'text-ds-text-status-completed-default-default'
+                    : task.status === TaskStatus.FAILED
+                      ? 'text-ds-text-status-error-default-default'
+                      : task.status === TaskStatus.RUNNING
+                        ? 'text-ds-text-status-running-default-default'
+                        : task.status === TaskStatus.BLOCKED
+                          ? 'text-ds-text-status-blocked-default-default'
+                          : task.status === TaskStatus.SKIPPED ||
+                              task.status === TaskStatus.WAITING ||
+                              task.status === TaskStatus.EMPTY
+                            ? 'text-ds-text-status-pending-default-default'
+                            : 'text-ds-text-status-running-default-default';
                 return (
                   <div
                     onClick={() => {
@@ -665,53 +677,48 @@ export function Node({ id, data }: NodeProps) {
                       }
                     }}
                     key={`taskList-${task.id}-${task.failure_count}`}
-                    className={`flex gap-2 rounded-xl px-sm py-sm transition-all duration-300 ease-in-out animate-in fade-in-0 slide-in-from-left-2 ${
-                      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'
-                    } cursor-pointer border border-solid border-transparent ${
+                    className={`gap-2 rounded-xl px-sm py-sm ease-in-out animate-in fade-in-0 slide-in-from-left-2 flex transition-all duration-300 ${taskRowBgHover} cursor-pointer border border-solid border-transparent ${
                       task.status === TaskStatus.COMPLETED
-                        ? 'hover:border-task-border-focus-success'
+                        ? 'hover:border-ds-border-status-completed-subtle-focus'
                         : task.status === TaskStatus.FAILED
-                          ? 'hover:border-task-border-focus-error'
+                          ? 'hover:border-ds-border-status-error-subtle-focus'
                           : task.status === TaskStatus.RUNNING
-                            ? 'hover:border-border-primary'
+                            ? 'hover:border-ds-border-neutral-subtle-default'
                             : task.status === TaskStatus.BLOCKED
-                              ? 'hover:border-task-border-focus-warning'
-                              : 'hover:border-task-border-focus'
+                              ? 'hover:border-ds-border-status-blocked-subtle-focus'
+                              : 'hover:border-ds-border-neutral-subtle-focus'
                     } ${
                       selectedTask?.id === task.id
                         ? task.status === TaskStatus.COMPLETED
-                          ? '!border-task-border-focus-success'
+                          ? '!border-ds-border-status-completed-subtle-focus'
                           : task.status === TaskStatus.FAILED
-                            ? '!border-task-border-focus-error'
+                            ? '!border-ds-border-status-error-subtle-focus'
                             : task.status === TaskStatus.RUNNING
-                              ? '!border-border-primary'
+                              ? '!border-ds-border-neutral-subtle-focus'
                               : task.status === TaskStatus.BLOCKED
-                                ? '!border-task-border-focus-warning'
-                                : '!border-task-border-focus'
+                                ? '!border-ds-border-status-blocked-subtle-focus'
+                                : task.status === TaskStatus.SKIPPED ||
+                                    task.status === TaskStatus.WAITING ||
+                                    task.status === TaskStatus.EMPTY
+                                  ? '!border-ds-border-status-pending-default-hover'
+                                  : '!border-ds-border-neutral-subtle-focus'
                         : 'border-transparent'
                     }`}
                   >
                     <div className="">
                       {task.reAssignTo ? (
                         //  reassign to other agent
-                        <CircleSlash2 size={16} className="text-icon-warning" />
+                        <CircleSlash2
+                          size={16}
+                          className="text-ds-icon-status-blocked-default-default"
+                        />
                       ) : (
                         // normal task
                         <>
                           {task.status === TaskStatus.RUNNING && (
                             <LoaderCircle
                               size={16}
-                              className={`text-icon-information ${
+                              className={`text-ds-icon-status-running-default-default ${
                                 chatStore.tasks[
                                   chatStore.activeTaskId as string
                                 ].status === ChatTaskStatus.RUNNING &&
@@ -722,50 +729,49 @@ export function Node({ id, data }: NodeProps) {
                           {task.status === TaskStatus.SKIPPED && (
                             <LoaderCircle
                               size={16}
-                              className={`text-icon-secondary`}
+                              className="text-ds-icon-status-pending-default-default"
                             />
                           )}
                           {task.status === TaskStatus.COMPLETED && (
                             <CircleCheckBig
                               size={16}
-                              className="text-icon-success"
+                              className="text-ds-icon-status-completed-default-default"
                             />
                           )}
                           {task.status === TaskStatus.FAILED && (
                             <CircleSlash
                               size={16}
-                              className="text-icon-cuation"
+                              className="text-ds-icon-status-error-default-default"
                             />
                           )}
                           {task.status === TaskStatus.BLOCKED && (
                             <TriangleAlert
                               size={16}
-                              className="text-icon-warning"
+                              className="text-ds-icon-status-blocked-default-default"
                             />
                           )}
                           {(task.status === TaskStatus.EMPTY ||
                             task.status === TaskStatus.WAITING) && (
-                            <Circle size={16} className="text-slate-400" />
+                            <Circle
+                              size={16}
+                              className="text-ds-icon-status-pending-default-default"
+                            />
                           )}
                         </>
                       )}
                     </div>
                     <div className="flex flex-1 flex-col items-start justify-center">
                       <div
-                        className={`w-full flex-grow-0 ${
-                          task.status === TaskStatus.FAILED
-                            ? 'text-text-cuation-default'
-                            : task.status === TaskStatus.BLOCKED
-                              ? 'text-text-body'
-                              : 'text-text-primary'
-                        } pointer-events-auto select-text whitespace-pre-line text-wrap break-all text-xs font-medium leading-13`}
+                        className={`w-full flex-grow-0 ${taskTextClass} text-xs font-medium leading-13 pointer-events-auto text-wrap break-all whitespace-pre-line select-text`}
                       >
-                        <div className="flex items-center gap-sm">
-                          <div className="text-xs font-bold leading-13 text-text-body">
+                        <div className="gap-sm flex items-center">
+                          <div
+                            className={`text-xs font-bold leading-13 ${taskTextClass}`}
+                          >
                             No. {getTaskId(task.id)}
                           </div>
                           {task.reAssignTo ? (
-                            <div className="rounded-lg bg-tag-fill-document px-1 py-0.5 text-xs font-bold leading-none text-text-warning">
+                            <div className="rounded-lg bg-ds-bg-document-subtle-default px-1 py-0.5 text-xs font-bold text-ds-text-document-default-default hover:bg-ds-bg-document-subtle-hover leading-none">
                               Reassigned to {task.reAssignTo}
                             </div>
                           ) : (
@@ -773,10 +779,10 @@ export function Node({ id, data }: NodeProps) {
                               <div
                                 className={`${
                                   task.status === TaskStatus.FAILED
-                                    ? 'bg-surface-error-subtle text-text-cuation'
+                                    ? 'bg-ds-bg-status-error-subtle-default text-ds-text-status-error-default-default hover:bg-ds-bg-status-error-subtle-hover'
                                     : task.status === TaskStatus.COMPLETED
-                                      ? 'text-text-success-default bg-tag-fill-developer'
-                                      : 'bg-tag-surface-hover text-text-label'
+                                      ? 'text-ds-text-status-completed-default-default bg-ds-bg-neutral-subtle-default'
+                                      : 'text-ds-text-neutral-default-default bg-ds-bg-neutral-subtle-default hover:bg-ds-bg-neutral-subtle-hover'
                                 } rounded-lg px-1 py-0.5 text-xs font-bold leading-none`}
                               >
                                 Attempt {task.failure_count}
@@ -787,11 +793,11 @@ export function Node({ id, data }: NodeProps) {
                         <div>{task.content}</div>
                       </div>
                       {task?.status === TaskStatus.RUNNING && (
-                        <div className="duration-400 mt-xs flex items-center gap-2 animate-in fade-in-0 slide-in-from-bottom-2">
+                        <div className="mt-xs gap-2 animate-in fade-in-0 slide-in-from-bottom-2 flex items-center duration-400">
                           {/* active toolkit */}
                           {lastActiveToolkit?.toolkitStatus ===
                             AgentStatusValue.RUNNING && (
-                            <div className="flex min-w-0 flex-1 items-center justify-start gap-sm duration-300 animate-in fade-in-0 slide-in-from-right-2">
+                            <div className="min-w-0 gap-sm animate-in fade-in-0 slide-in-from-right-2 flex flex-1 items-center justify-start duration-300">
                               {getToolkitIcon(
                                 lastActiveToolkit.toolkitName ?? ''
                               )}
@@ -802,11 +808,11 @@ export function Node({ id, data }: NodeProps) {
                                   ].activeWorkspace
                                     ? '!w-[100px]'
                                     : '!w-[500px]'
-                                } min-w-0 flex-shrink-0 flex-grow-0 overflow-hidden text-ellipsis whitespace-nowrap pt-1 text-xs leading-17 text-text-primary`}
+                                } min-w-0 pt-1 text-xs leading-17 text-ds-text-status-running-default-default flex-shrink-0 flex-grow-0 overflow-hidden text-ellipsis whitespace-nowrap`}
                               >
                                 <ShinyText
                                   text={task.toolkits?.[0].toolkitName}
-                                  className="pointer-events-auto w-full select-text overflow-hidden text-ellipsis whitespace-nowrap text-xs font-bold leading-17 text-text-primary"
+                                  className="text-xs font-bold leading-17 text-ds-text-status-running-default-default pointer-events-auto w-full overflow-hidden text-ellipsis whitespace-nowrap select-text"
                                 />
                               </div>
                             </div>
@@ -827,14 +833,14 @@ export function Node({ id, data }: NodeProps) {
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: 24 }}
               transition={{ duration: 0.3, ease: 'easeIn' }}
-              className="flex w-[342px] shrink-0 flex-col gap-sm overflow-hidden rounded-r-xl bg-worker-surface-secondary py-2 pl-sm"
+              className="gap-sm rounded-r-xl bg-ds-bg-neutral-subtle-default py-2 pl-sm flex w-[342px] shrink-0 flex-col overflow-hidden"
             >
               <div
                 ref={logRef}
                 onWheel={(e) => {
                   e.stopPropagation();
                 }}
-                className="scrollbar scrollbar-always-visible max-h-[calc(100vh-200px)] overflow-y-scroll pr-sm"
+                className="scrollbar scrollbar-always-visible pr-sm rounded-xl max-h-[calc(100vh-200px)] overflow-y-scroll"
               >
                 <AnimatePresence mode="wait">
                   {selectedTask && (
@@ -844,166 +850,14 @@ export function Node({ id, data }: NodeProps) {
                       animate={{ opacity: 1, x: 0 }}
                       exit={{ opacity: 0, x: -16 }}
                       transition={{ duration: 0.25, ease: 'easeIn' }}
-                      className="flex w-full flex-col gap-sm"
+                      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="flex w-full flex-col gap-sm px-2 py-1"
-                                >
-                                  <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="flex flex-col items-start justify-center gap-1 rounded-lg bg-log-default p-1 px-2 transition-all duration-300 hover:opacity-50"
-                                    >
-                                      {/* first row: icon + toolkit name */}
-                                      <div className="flex w-full items-center justify-start gap-sm">
-                                        {toolkit.toolkitStatus ===
-                                        AgentStatusValue.RUNNING ? (
-                                          <LoaderCircle
-                                            size={16}
-                                            className={`${
-                                              chatStore.tasks[
-                                                chatStore.activeTaskId as string
-                                              ].status ===
-                                                ChatTaskStatus.RUNNING &&
-                                              'animate-spin'
-                                            }`}
-                                          />
-                                        ) : (
-                                          getToolkitIcon(toolkit.toolkitName)
-                                        )}
-                                        <span className="flex items-center gap-sm text-nowrap text-label-xs font-bold text-text-primary">
-                                          {toolkit.toolkitName}
-                                        </span>
-                                      </div>
-                                      {/* second row: method + message */}
-                                      <div className="pointer-events-auto flex w-full select-text items-start justify-center gap-sm overflow-hidden pl-6">
-                                        <div className="text-nowrap text-label-xs font-bold text-text-primary">
-                                          {toolkit.toolkitMethods
-                                            ? toolkit.toolkitMethods
-                                                .charAt(0)
-                                                .toUpperCase() +
-                                              toolkit.toolkitMethods.slice(1)
-                                            : ''}
-                                        </div>
-                                        <div
-                                          className={`max-w-full flex-1 truncate text-label-xs font-normal text-text-primary ${
-                                            data.isEditMode
-                                              ? 'overflow-hidden'
-                                              : 'overflow-hidden truncate'
-                                          }`}
-                                        >
-                                          {toolkit.message}
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </TooltipTrigger>
-                                  {toolkit.message && (
-                                    <TooltipContent
-                                      align="start"
-                                      className="scrollbar pointer-events-auto !fixed left-6 z-[9999] max-h-[200px] w-max max-w-[296px] select-text overflow-y-auto text-wrap break-words rounded-lg border border-solid border-task-border-default bg-surface-tertiary p-2 text-label-xs"
-                                      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 relative my-2 flex w-full flex-col rounded-lg bg-surface-primary"
-                        >
-                          <div className="sticky top-0 z-10 flex items-center justify-between rounded-lg bg-surface-primary py-2 pl-2 pr-2">
-                            <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/WorkspaceMenu/index.tsx b/src/components/WorkforceMenu/index.tsx
similarity index 67%
rename from src/components/WorkspaceMenu/index.tsx
rename to src/components/WorkforceMenu/index.tsx
index 7353fe3b9..8712b6751 100644
--- a/src/components/WorkspaceMenu/index.tsx
+++ b/src/components/WorkforceMenu/index.tsx
@@ -12,11 +12,8 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-import {
-  MenuToggleGroup,
-  MenuToggleItem,
-} from '@/components/MenuButton/MenuButton';
 import { Button } from '@/components/ui/button';
+import { MenuToggleGroup, MenuToggleItem } from '@/components/ui/menu-button';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
 import { useHost } from '@/host';
 import { useWorkerList } from '@/store/authStore';
@@ -35,15 +32,15 @@ import {
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-interface WorkSpaceMenuProps {
+export interface WorkforceMenuProps {
   onToggleChatBox?: () => void;
   isChatBoxVisible?: boolean;
 }
 
-export function WorkSpaceMenu({
-  onToggleChatBox,
-  isChatBoxVisible = true,
-}: WorkSpaceMenuProps) {
+export default function WorkforceMenu({
+  onToggleChatBox: _onToggleChatBox,
+  isChatBoxVisible: _isChatBoxVisible = true,
+}: WorkforceMenuProps) {
   const { t } = useTranslation();
   const host = useHost();
   const { chatStore } = useChatStoreAdapter();
@@ -256,43 +253,51 @@ export function WorkSpaceMenu({
   const agentMap = {
     developer_agent: {
       name: t('layout.developer-agent'),
-      icon: <CodeXml size={16} className="text-text-primary" />,
-      textColor: 'text-text-developer',
-      bgColor: 'bg-bg-fill-coding-active',
-      shapeColor: 'bg-bg-fill-coding-default',
-      borderColor: 'border-bg-fill-coding-active',
+      icon: (
+        <CodeXml size={16} className="text-ds-text-neutral-default-default" />
+      ),
+      textColor: 'text-ds-text-terminal-default-default',
+      bgColor: 'bg-ds-bg-terminal-default-default',
+      shapeColor: 'bg-ds-bg-terminal-subtle-default',
+      borderColor: 'border-ds-border-terminal-default-default',
       bgColorLight: 'bg-emerald-200',
     },
     browser_agent: {
       name: t('layout.browser-agent'),
-      icon: <Globe size={16} className="text-text-primary" />,
+      icon: (
+        <Globe size={16} className="text-ds-text-neutral-default-default" />
+      ),
       textColor: 'text-blue-700',
-      bgColor: 'bg-bg-fill-browser-active',
-      shapeColor: 'bg-bg-fill-browser-default',
-      borderColor: 'border-bg-fill-browser-active',
+      bgColor: 'bg-ds-bg-browser-default-default',
+      shapeColor: 'bg-ds-bg-browser-subtle-default',
+      borderColor: 'border-ds-border-browser-default-default',
       bgColorLight: 'bg-blue-200',
     },
     document_agent: {
       name: t('layout.document-agent'),
-      icon: <FileText size={16} className="text-text-primary" />,
+      icon: (
+        <FileText size={16} className="text-ds-text-neutral-default-default" />
+      ),
       textColor: 'text-yellow-700',
-      bgColor: 'bg-bg-fill-writing-active',
-      shapeColor: 'bg-bg-fill-writing-default',
-      borderColor: 'border-bg-fill-writing-active',
+      bgColor: 'bg-ds-bg-document-default-default',
+      shapeColor: 'bg-ds-bg-document-subtle-default',
+      borderColor: 'border-ds-border-document-default-default',
       bgColorLight: 'bg-yellow-200',
     },
     multi_modal_agent: {
       name: t('layout.multi-modal-agent'),
-      icon: <Image size={16} className="text-text-primary" />,
+      icon: (
+        <Image size={16} className="text-ds-text-neutral-default-default" />
+      ),
       textColor: 'text-fuchsia-700',
-      bgColor: 'bg-bg-fill-multimodal-active',
-      shapeColor: 'bg-bg-fill-multimodal-default',
-      borderColor: 'border-bg-fill-multimodal-active',
+      bgColor: 'bg-ds-bg-neutral-default-default',
+      shapeColor: 'bg-ds-bg-neutral-subtle-default',
+      borderColor: 'border-ds-border-neutral-default-default',
       bgColorLight: 'bg-fuchsia-200',
     },
     social_media_agent: {
       name: t('layout.social-media-agent'),
-      icon: <Bird size={16} className="text-text-primary" />,
+      icon: <Bird size={16} className="text-ds-text-neutral-default-default" />,
       textColor: 'text-purple-700',
       bgColor: 'bg-violet-700',
       shapeColor: 'bg-violet-300',
@@ -343,85 +348,91 @@ export function WorkSpaceMenu({
   };
 
   return (
-    <div className="w-full">
-      <div className="relative flex h-full w-full flex-row items-center justify-center">
-        {/* activeAgent */}
-        <AnimatePresence>
-          {agentList.length > 0 && (
-            <motion.div
-              initial={{ opacity: 0, x: -30 }}
-              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`}
-            >
-              <MenuToggleGroup
-                type="single"
-                size="md"
-                orientation="horizontal"
-                value={getCurrentTask()?.activeWorkspace as string}
-                onValueChange={onValueChange}
-                className="flex w-full items-center gap-2 pb-2"
+    <div className="h-12 pt-2 relative z-50 flex items-center justify-center">
+      <div className="w-full">
+        <div className="relative flex h-full w-full flex-row items-center justify-center">
+          {/* activeAgent */}
+          <AnimatePresence>
+            {agentList.length > 0 && (
+              <motion.div
+                initial={{ opacity: 0, x: -30 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -30 }}
+                transition={{ duration: 0.3, ease: 'easeInOut' }}
+                className={`gap-2 pl-2 flex w-fit flex-row`}
+              >
+                <MenuToggleGroup
+                  type="single"
+                  size="md"
+                  orientation="horizontal"
+                  value={getCurrentTask()?.activeWorkspace as string}
+                  onValueChange={onValueChange}
+                  className="gap-2 pb-2 flex w-full items-center"
+                >
+                  <AnimatePresence mode="popLayout">
+                    {agentList.map((agent) => (
+                      <motion.div
+                        key={agent.agent_id}
+                        initial={{ opacity: 0, scale: 0.8, x: -20 }}
+                        animate={{ opacity: 1, scale: 1, x: 0 }}
+                        exit={{ opacity: 0, scale: 0.8, x: 20 }}
+                        transition={{
+                          duration: 0.3,
+                          ease: 'easeInOut',
+                        }}
+                        layout
+                      >
+                        <MenuToggleItem
+                          disabled={
+                            ![
+                              'developer_agent',
+                              'browser_agent',
+                              'document_agent',
+                              'multi_modal_agent',
+                            ].includes(agent.type as AgentNameType) ||
+                            agent.tasks.length === 0
+                          }
+                          value={agent.agent_id}
+                          icon={<Bot />}
+                          subIcon={
+                            agentIconMap[
+                              agent.type as keyof typeof agentIconMap
+                            ]
+                          }
+                          showSubIcon={true}
+                          className={
+                            agent.tasks.length === 0 ? 'opacity-30' : ''
+                          }
+                        />
+                      </motion.div>
+                    ))}
+                  </AnimatePresence>
+                </MenuToggleGroup>
+              </motion.div>
+            )}
+          </AnimatePresence>
+          {/* Viewport Navigation Buttons */}
+          {(moveLeft || moveRight) && (
+            <div className="right-2 pb-2 absolute flex items-center">
+              <Button
+                variant="ghost"
+                size="sm"
+                buttonContent="icon-only"
+                onClick={moveLeft || undefined}
+              >
+                <ChevronLeft />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                buttonContent="icon-only"
+                onClick={moveRight || undefined}
               >
-                <AnimatePresence mode="popLayout">
-                  {agentList.map((agent) => (
-                    <motion.div
-                      key={agent.agent_id}
-                      initial={{ opacity: 0, scale: 0.8, x: -20 }}
-                      animate={{ opacity: 1, scale: 1, x: 0 }}
-                      exit={{ opacity: 0, scale: 0.8, x: 20 }}
-                      transition={{
-                        duration: 0.3,
-                        ease: 'easeInOut',
-                      }}
-                      layout
-                    >
-                      <MenuToggleItem
-                        disabled={
-                          ![
-                            'developer_agent',
-                            'browser_agent',
-                            'document_agent',
-                            'multi_modal_agent',
-                          ].includes(agent.type as AgentNameType) ||
-                          agent.tasks.length === 0
-                        }
-                        value={agent.agent_id}
-                        icon={<Bot />}
-                        subIcon={
-                          agentIconMap[agent.type as keyof typeof agentIconMap]
-                        }
-                        showSubIcon={true}
-                        className={agent.tasks.length === 0 ? 'opacity-30' : ''}
-                      />
-                    </motion.div>
-                  ))}
-                </AnimatePresence>
-              </MenuToggleGroup>
-            </motion.div>
+                <ChevronRight />
+              </Button>
+            </div>
           )}
-        </AnimatePresence>
-        {/* Viewport Navigation Buttons */}
-        {(moveLeft || moveRight) && (
-          <div className="absolute right-2 flex items-center pb-2">
-            <Button
-              variant="ghost"
-              size="md"
-              className="px-2"
-              onClick={moveLeft || undefined}
-            >
-              <ChevronLeft />
-            </Button>
-            <Button
-              variant="ghost"
-              size="md"
-              className="px-2"
-              onClick={moveRight || undefined}
-            >
-              <ChevronRight />
-            </Button>
-          </div>
-        )}
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/Workspace/FoldedAgentCard.tsx b/src/components/Workspace/FoldedAgentCard.tsx
new file mode 100644
index 000000000..0976ffadf
--- /dev/null
+++ b/src/components/Workspace/FoldedAgentCard.tsx
@@ -0,0 +1,354 @@
+// ========= 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 {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { HoverScrollText } from '@/components/ui/HoverScrollText';
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import {
+  agentMap,
+  WORKFLOW_AGENT_SUB_ICON_CLASS,
+  type WorkflowAgentType,
+} from '@/components/WorkFlow/agents';
+import { getAgentToolkitLabels } from '@/components/WorkFlow/agentToolkitLabels';
+import { BASE_WORKFLOW_AGENTS } from '@/components/WorkFlow/baseWorkers';
+import { cn } from '@/lib/utils';
+import {
+  Bird,
+  Bot,
+  CodeXml,
+  Copy,
+  Ellipsis,
+  FileText,
+  Globe,
+  Image,
+  Info,
+  Trash2,
+} from 'lucide-react';
+import { type ReactNode, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+/** Sub icons aligned with `WorkforceMenu` / `ui/menu-button` → `MenuToggleItem` (top-right badge, 10px). */
+function getWorkforceMenuStyleSubIcon(agentType: string): ReactNode {
+  const key = agentType as WorkflowAgentType;
+  const iconClass = WORKFLOW_AGENT_SUB_ICON_CLASS[key];
+  if (!iconClass) return null;
+  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 = getWorkforceMenuStyleSubIcon(agentType);
+  return (
+    <div className="h-6 w-6 text-ds-text-neutral-muted-default 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>
+  );
+}
+
+export function isBaseWorkflowAgent(agent: Agent): boolean {
+  return BASE_WORKFLOW_AGENTS.some((b) => b.agent_id === agent.agent_id);
+}
+
+export function FoldedAgentCard({
+  agent,
+  isActive,
+  dimmed,
+  compactMode,
+  onSelect,
+  showUserAgentOverflow,
+  onDeleteUserAgent,
+  borderless = false,
+  compactContextMenu,
+}: {
+  agent: Agent;
+  isActive: boolean;
+  dimmed: boolean;
+  compactMode: boolean;
+  onSelect: () => void;
+  showUserAgentOverflow?: boolean;
+  onDeleteUserAgent?: (agentId: string) => void;
+  /** No border (e.g. workspace grid). */
+  borderless?: boolean;
+  /** Compact icon card: click opens a menu instead of calling `onSelect` directly. */
+  compactContextMenu?: {
+    onDetail: () => void;
+    onDuplicate: () => void;
+    onDelete: () => void;
+    duplicateEnabled?: boolean;
+    deleteEnabled?: boolean;
+  };
+}) {
+  const { t } = useTranslation();
+  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-ds-bg-neutral-strong-default focus-within:ring-ds-ring-neutral-default-focus ease-in-out overflow-hidden transition-all duration-200 focus-within:ring-2',
+    borderless ? 'border-0' : 'border border-solid',
+    compactMode
+      ? borderless
+        ? cn('border-0', !isActive && 'opacity-80')
+        : cn(
+            'border-ds-border-neutral-default-default hover:border-ds-border-neutral-subtle-default',
+            isActive &&
+              (preset?.borderColor ??
+                'border-ds-border-neutral-subtle-default'),
+            !isActive && 'opacity-80'
+          )
+      : cn(
+          borderless
+            ? 'border-0'
+            : 'border-transparent hover:border-transparent',
+          !isActive && 'opacity-80'
+        ),
+    iconOnly ? 'inline-flex' : 'group relative w-full min-w-0 max-w-full',
+    dimmed && (borderless ? 'opacity-50' : 'border-transparent opacity-50')
+  );
+
+  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-ds-text-neutral-default-default'
+          )}
+        >
+          {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-ds-text-neutral-muted-default"
+            innerClassName="text-xs font-normal leading-tight text-ds-text-neutral-muted-default"
+          />
+        </div>
+      </div>
+    </div>
+  );
+
+  const compactIconButtonClass = cn(
+    shellClass,
+    'focus-visible:ring-ds-ring-neutral-default-focus p-2 inline-flex items-center justify-center text-left focus-visible:ring-2 focus-visible:outline-none'
+  );
+
+  const button = iconOnly ? (
+    compactContextMenu ? (
+      <DropdownMenu>
+        <TooltipSimple
+          content={agentLabel}
+          side="top"
+          sideOffset={8}
+          delayDuration={300}
+        >
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              aria-label={agentLabel}
+              aria-haspopup="menu"
+              className={compactIconButtonClass}
+            >
+              <FoldedAgentLeadingIcon agentType={agent.type} />
+            </button>
+          </DropdownMenuTrigger>
+        </TooltipSimple>
+        <DropdownMenuContent align="start" side="bottom" sideOffset={8}>
+          <DropdownMenuItem
+            className="gap-2 cursor-pointer"
+            onSelect={(e) => {
+              e.preventDefault();
+              compactContextMenu.onDetail();
+            }}
+          >
+            <Info
+              className="h-4 w-4 text-ds-icon-neutral-default-default shrink-0"
+              aria-hidden
+            />
+            {t('workforce.detail', { defaultValue: 'Detail' })}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="gap-2 cursor-pointer"
+            disabled={compactContextMenu.duplicateEnabled === false}
+            onSelect={(e) => {
+              e.preventDefault();
+              if (compactContextMenu.duplicateEnabled !== false) {
+                compactContextMenu.onDuplicate();
+              }
+            }}
+          >
+            <Copy
+              className="h-4 w-4 text-ds-icon-neutral-default-default shrink-0"
+              aria-hidden
+            />
+            {t('workforce.duplicate', { defaultValue: 'Duplicate' })}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="gap-2 text-ds-text-error-default-default cursor-pointer"
+            disabled={compactContextMenu.deleteEnabled === false}
+            onSelect={(e) => {
+              e.preventDefault();
+              if (compactContextMenu.deleteEnabled !== false) {
+                compactContextMenu.onDelete();
+              }
+            }}
+          >
+            <Trash2
+              className="h-4 w-4 text-ds-icon-error-default-default shrink-0"
+              aria-hidden
+            />
+            {t('workforce.delete', { defaultValue: 'Delete' })}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ) : (
+      <button
+        type="button"
+        onClick={onSelect}
+        aria-label={agentLabel}
+        className={compactIconButtonClass}
+      >
+        <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-ds-ring-neutral-default-focus 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-ds-text-neutral-muted-default shrink-0"
+              aria-label={`More actions for ${agentLabel}`}
+            >
+              <Ellipsis className="h-4 w-4" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            align="end"
+            className="border-ds-border-neutral-default-default bg-ds-bg-neutral-strong-default 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-ds-icon-neutral-default-default group-hover:text-ds-icon-status-error-default-default"
+                  />
+                  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-ds-ring-neutral-default-focus 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 && !compactContextMenu) {
+    return (
+      <TooltipSimple
+        content={agentLabel}
+        side="top"
+        sideOffset={8}
+        delayDuration={300}
+      >
+        {button}
+      </TooltipSimple>
+    );
+  }
+
+  return button;
+}
diff --git a/src/components/Workspace/SingleAgentList.tsx b/src/components/Workspace/SingleAgentList.tsx
new file mode 100644
index 000000000..605880434
--- /dev/null
+++ b/src/components/Workspace/SingleAgentList.tsx
@@ -0,0 +1,32 @@
+// ========= 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 { Bot } from 'lucide-react';
+
+/**
+ * Workspace single-agent mode placeholder (visual only until wired).
+ */
+export function SingleAgentList() {
+  return (
+    <div
+      className="rounded-xl bg-ds-bg-neutral-strong-default p-2 inline-flex"
+      aria-hidden
+    >
+      <Bot
+        className="h-6 w-6 text-ds-text-neutral-muted-default shrink-0"
+        strokeWidth={2}
+      />
+    </div>
+  );
+}
diff --git a/src/components/Workspace/WorkforceAgentList.tsx b/src/components/Workspace/WorkforceAgentList.tsx
new file mode 100644
index 000000000..813b87624
--- /dev/null
+++ b/src/components/Workspace/WorkforceAgentList.tsx
@@ -0,0 +1,105 @@
+// ========= 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 {
+  FoldedAgentCard,
+  isBaseWorkflowAgent,
+} from '@/components/Workspace/FoldedAgentCard';
+import { cn } from '@/lib/utils';
+import { Plus } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+export interface WorkforceAgentListProps {
+  sortedAgents: Agent[];
+  activeAgentId: string | undefined;
+  onSelectAgent: (agentId: string) => void;
+  onAgentDetailFromMenu: (agentId: string) => void;
+  onDuplicateUserAgent: (agent: Agent) => void;
+  onDeleteUserAgent: (agentId: string) => void;
+  onAddWorker: () => void;
+}
+
+/**
+ * Workspace workforce mode: centered horizontal row of agents with add-worker.
+ */
+export function WorkforceAgentList({
+  sortedAgents,
+  activeAgentId,
+  onSelectAgent,
+  onAgentDetailFromMenu,
+  onDuplicateUserAgent,
+  onDeleteUserAgent,
+  onAddWorker,
+}: WorkforceAgentListProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="min-w-0 flex w-full justify-center">
+      <div className="min-w-0 gap-2 inline-flex max-w-full items-center">
+        <div
+          role="list"
+          aria-label={t('layout.aiWorkforce')}
+          className="min-w-0 max-w-[min(100%,calc(100vw-3rem))] overflow-x-auto"
+        >
+          <div className="gap-2 flex flex-row flex-nowrap items-center justify-center">
+            {sortedAgents.map((agent) => (
+              <div key={agent.agent_id} className="shrink-0" role="listitem">
+                <FoldedAgentCard
+                  agent={agent}
+                  isActive={activeAgentId === agent.agent_id}
+                  dimmed={false}
+                  compactMode
+                  borderless
+                  onSelect={() => onSelectAgent(agent.agent_id)}
+                  showUserAgentOverflow={false}
+                  compactContextMenu={{
+                    onDetail: () => onAgentDetailFromMenu(agent.agent_id),
+                    onDuplicate: () => onDuplicateUserAgent(agent),
+                    onDelete: () => onDeleteUserAgent(agent.agent_id),
+                    duplicateEnabled: !isBaseWorkflowAgent(agent),
+                    deleteEnabled: !isBaseWorkflowAgent(agent),
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col justify-center">
+          <TooltipSimple
+            content={t('triggers.add')}
+            side="top"
+            sideOffset={8}
+            delayDuration={300}
+          >
+            <button
+              type="button"
+              className={cn(
+                'rounded-xl bg-ds-bg-neutral-default-default border-0',
+                'p-2 inline-flex items-center justify-center',
+                'text-ds-text-neutral-muted-default transition-all duration-200',
+                'hover:text-ds-text-neutral-default-default opacity-80 hover:opacity-100',
+                'focus-visible:ring-ds-ring-brand-default-focus focus-visible:ring-2 focus-visible:outline-none'
+              )}
+              onClick={onAddWorker}
+              aria-label={t('triggers.add')}
+            >
+              <Plus className="h-6 w-6 shrink-0" strokeWidth={2} aria-hidden />
+            </button>
+          </TooltipSimple>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Workspace/WorkspaceExamplePrompts.tsx b/src/components/Workspace/WorkspaceExamplePrompts.tsx
new file mode 100644
index 000000000..03a83a8bf
--- /dev/null
+++ b/src/components/Workspace/WorkspaceExamplePrompts.tsx
@@ -0,0 +1,90 @@
+// ========= 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 { useTranslation } from 'react-i18next';
+
+/**
+ * Example workspace prompts; `titleKey` / `messageKey` use `layout.*` i18n keys.
+ */
+const WORKSPACE_EXAMPLE_PROMPTS: readonly {
+  id: string;
+  titleKey: string;
+  titleDefault: string;
+  messageKey: string;
+  messageDefault: string;
+}[] = [
+  {
+    id: 'it-ticket-creation',
+    titleKey: 'layout.it-ticket-creation',
+    titleDefault: 'Help me complete an online form',
+    messageKey: 'layout.it-ticket-creation-message',
+    messageDefault:
+      'Access the ticket management system at https://eiti.eigent.ai/ and add a new ticket into our system with Browser Agent:\n\nAffected User: Alice Johnson\nAssignment Group: Software Services Team\nAssigned To: Michael Brown\nPriority: 4 – Low | Urgency: 3 – Medium | Impact: 4 – Low\nAffected Service: Software Services\nIssue: Application Performance Degradation\nDescription:\nThe affected user reports slow response times and intermittent timeouts when accessing internal software applications during normal business hours.\n\nOnce done, navigate to the "In Progress" tickets list view and extract the visible ticket data from the list (Number, User, Priority, State, Issue columns). Use browser console JavaScript to capture the table data if no export button is available. Save the extracted data as a CSV file.\n\nFinally, generate a statistical report based on the extracted data:\n1. Analyze ticket distribution by Priority level (Critical/High/Moderate/Low)\n2. Parse any dollar amounts mentioned in the Issue text (e.g., "$50M", "$3.2M") as estimated financial impact\n3. Create an HTML report with bar charts showing:\n   - Ticket count by Priority\n   - Estimated financial impact by Priority (parsed from Issue text)\nInclude a "Data Notes" section explaining that financial impact values were parsed from Issue description text since no dedicated financial field exists in the system.',
+  },
+  {
+    id: 'bank-transfer-csv-analysis',
+    titleKey: 'layout.bank-transfer-csv-analysis',
+    titleDefault: 'Bank Transfer CSV Analysis and Visualization',
+    messageKey: 'layout.bank-transfer-csv-analysis-message',
+    messageDefault:
+      'Create a mock bank transfer CSV file include 10 columns and 10 rows. Read the generated CSV file and summarize the data, generate a chart to visualize relevant trends or insights from the data.',
+  },
+  {
+    id: 'find-duplicate-files',
+    titleKey: 'layout.find-duplicate-files',
+    titleDefault: 'Please Help Organize My Desktop',
+    messageKey: 'layout.find-duplicate-files-message',
+    messageDefault: 'Please help organize my desktop.',
+  },
+];
+
+export interface WorkspaceExamplePromptsProps {
+  onSelectPrompt: (prompt: string) => void;
+  /** When true, cards do not respond to clicks (e.g. no model configured). */
+  disabled?: boolean;
+}
+
+/**
+ * Full-width (max 900px) grid of starter prompt cards for the workspace landing.
+ */
+export function WorkspaceExamplePrompts({
+  onSelectPrompt,
+  disabled = false,
+}: WorkspaceExamplePromptsProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="pb-4 mx-auto flex min-h-full w-full max-w-[600px] flex-col">
+      <div className="gap-5 sm:grid-cols-2 lg:grid-cols-3 grid w-full grid-cols-1">
+        {WORKSPACE_EXAMPLE_PROMPTS.map((item) => (
+          <button
+            key={item.id}
+            type="button"
+            onClick={() =>
+              onSelectPrompt(
+                t(item.messageKey, { defaultValue: item.messageDefault })
+              )
+            }
+            disabled={disabled}
+            className="rounded-xl border-ds-border-neutral-subtle-default bg-ds-bg-neutral-strong-default p-3 hover:bg-ds-bg-neutral-strong-default/40 focus-visible:ring-ds-ring-neutral-default-focus border border-solid text-center opacity-50 transition-opacity duration-200 hover:opacity-100 focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-30"
+          >
+            <span className="text-ds-text-neutral-default-default text-body-sm font-semibold leading-snug block">
+              {t(item.titleKey, { defaultValue: item.titleDefault })}
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Workspace/WorkspaceProjectPicker.tsx b/src/components/Workspace/WorkspaceProjectPicker.tsx
new file mode 100644
index 000000000..4b76c51a9
--- /dev/null
+++ b/src/components/Workspace/WorkspaceProjectPicker.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 { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+import { loadProjectFromHistory } from '@/lib';
+import { fetchGroupedHistoryTasks } from '@/service/historyApi';
+import { usePageTabStore } from '@/store/pageTabStore';
+import type { ProjectGroup } from '@/types/history';
+import {
+  ChevronDown,
+  FolderKanban,
+  FolderOpen,
+  PlusCircle,
+} from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * Project / task switcher for the workspace landing: opens the agent folder
+ * tab, or picks a history project from a nested submenu (same data path as
+ * HistorySidebar).
+ */
+export function WorkspaceProjectPicker() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { chatStore, projectStore } = useChatStoreAdapter();
+  const setActiveWorkspaceTab = usePageTabStore((s) => s.setActiveWorkspaceTab);
+
+  const [historyTasks, setHistoryTasks] = useState<ProjectGroup[]>([]);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  useEffect(() => {
+    if (!chatStore) return;
+    fetchGroupedHistoryTasks(setHistoryTasks);
+  }, [chatStore, chatStore?.updateCount]);
+
+  const summaryTask =
+    chatStore?.tasks[chatStore?.activeTaskId as string]?.summaryTask;
+
+  const activeTaskTitle = useMemo(() => {
+    const defaultLabel = t('layout.workspace-select-project', {
+      defaultValue: 'Select a project',
+    });
+    if (!chatStore) return defaultLabel;
+    if (chatStore.activeTaskId && summaryTask) {
+      return summaryTask.split('|')[0];
+    }
+    return defaultLabel;
+  }, [chatStore, summaryTask, t]);
+
+  const handleLoadProject = async (
+    projectId: string,
+    question: string,
+    historyId: string
+  ) => {
+    setMenuOpen(false);
+    const project = historyTasks.find((p) => p.project_id === projectId);
+    const taskIdsList = project?.tasks.map((task) => task.task_id) || [
+      projectId,
+    ];
+
+    if (!taskIdsList || taskIdsList.length === 0) {
+      projectStore.createProject(
+        project?.project_name || 'Project',
+        'Project with triggers but no tasks',
+        projectId
+      );
+      navigate('/');
+      return;
+    }
+
+    await loadProjectFromHistory(
+      projectStore,
+      navigate,
+      projectId,
+      question,
+      historyId,
+      taskIdsList,
+      project?.project_name
+    );
+  };
+
+  const handleSetActive = (
+    projectId: string,
+    question: string,
+    historyId: string
+  ) => {
+    const project = projectStore.getProjectById(projectId);
+    if (project) {
+      projectStore.setHistoryId(projectId, historyId);
+      projectStore.setActiveProject(projectId);
+      navigate(`/`);
+      setMenuOpen(false);
+    } else {
+      void handleLoadProject(projectId, question, historyId);
+    }
+  };
+
+  const onSelectHistoryProject = (project: ProjectGroup) => {
+    const historyId =
+      project.tasks[0] != null ? String(project.tasks[0].id) : '';
+    const question = project.last_prompt || project.project_name || '';
+    if (!historyId) {
+      void handleLoadProject(project.project_id, question, project.project_id);
+      return;
+    }
+    handleSetActive(project.project_id, question, historyId);
+  };
+
+  const handleStartFromScratch = () => {
+    projectStore.createProject('new project');
+    navigate('/');
+    setMenuOpen(false);
+  };
+
+  const openAgentFolderTab = () => {
+    const pid = projectStore.activeProjectId;
+    setActiveWorkspaceTab('inbox', {
+      clearInboxForProjectId: pid ?? undefined,
+    });
+    setMenuOpen(false);
+  };
+
+  if (!chatStore) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          id="workspace-project-picker-trigger"
+          type="button"
+          variant="ghost"
+          size="md"
+          buttonContent="text"
+          buttonRadius="full"
+          className="no-drag bg-ds-bg-neutral-subtle-default px-3 py-1 font-semibold shadow-soft hover:bg-ds-bg-neutral-default-hover inline-flex h-auto w-fit max-w-[300px] justify-between"
+          aria-expanded={menuOpen}
+          aria-haspopup="menu"
+        >
+          <span className="text-ds-text-neutral-default-default min-w-0 text-label-sm truncate">
+            {activeTaskTitle}
+          </span>
+          <ChevronDown
+            className="text-ds-icon-neutral-muted-default h-2.5 w-2.5 shrink-0 opacity-80"
+            aria-hidden
+          />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-[min(100vw-2rem,180px)]"
+        align="end"
+        sideOffset={6}
+      >
+        <DropdownMenuItem
+          className="gap-2 cursor-pointer"
+          onSelect={(e) => {
+            e.preventDefault();
+            handleStartFromScratch();
+          }}
+        >
+          <PlusCircle className="h-4 w-4 shrink-0" aria-hidden />
+          {t('layout.workspace-start-from-scratch', {
+            defaultValue: 'Start from scratch',
+          })}
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          className="gap-2 cursor-pointer"
+          onSelect={(e) => {
+            e.preventDefault();
+            openAgentFolderTab();
+          }}
+        >
+          <FolderOpen className="h-4 w-4 shrink-0" aria-hidden />
+          {t('layout.workspace-select-folder', {
+            defaultValue: 'Select a folder',
+          })}
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator className="bg-ds-border-neutral-default-default" />
+
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger className="gap-2">
+            <FolderKanban className="h-4 w-4 shrink-0" aria-hidden />
+            {t('layout.workspace-project-submenu', {
+              defaultValue: 'Project',
+            })}
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent
+            className="max-h-64 p-1 w-[min(100vw-2rem,280px)] overflow-y-auto"
+            sideOffset={6}
+            alignOffset={-4}
+          >
+            {historyTasks.length === 0 ? (
+              <div className="text-ds-text-neutral-muted-default px-2 py-3 text-body-sm text-center">
+                {t('layout.workspace-no-history-projects', {
+                  defaultValue: 'No history projects yet',
+                })}
+              </div>
+            ) : (
+              historyTasks.map((project) => (
+                <DropdownMenuItem
+                  key={project.project_id}
+                  className="min-h-9 gap-0.5 py-2 cursor-pointer flex-col items-start"
+                  onSelect={(e) => {
+                    e.preventDefault();
+                    onSelectHistoryProject(project);
+                  }}
+                >
+                  <span className="text-body-sm font-medium leading-tight text-ds-text-neutral-default-default">
+                    {project.project_name || t('layout.new-project')}
+                  </span>
+                </DropdownMenuItem>
+              ))
+            )}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/components/Workspace/WorkspaceRecentSessions.tsx b/src/components/Workspace/WorkspaceRecentSessions.tsx
new file mode 100644
index 000000000..2116c4b16
--- /dev/null
+++ b/src/components/Workspace/WorkspaceRecentSessions.tsx
@@ -0,0 +1,144 @@
+// ========= 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 {
+  NAV_LIST_SESSIONS_RECENT_MAX,
+  NavListSessionRows,
+  type NavListSession,
+} from '@/components/ProjectPageSidebar/NavList';
+import { taskIdToCreatedMs } from '@/lib/chatTaskIdTime';
+import { getSessionNavLeadPresentation } from '@/lib/sessionNavLead';
+import type { ChatStore } from '@/store/chatStore';
+import { ChatTaskStatus } from '@/types/constants';
+import { ArrowRight } from 'lucide-react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function formatSessionStartedAgo(
+  startedAtMs: number,
+  t: (key: string, o?: { count?: number; defaultValue: string }) => string
+): string {
+  if (!startedAtMs) {
+    return '';
+  }
+  const d = Date.now() - startedAtMs;
+  if (d < 60_000) {
+    return t('layout.workspace-recent-session-now', { defaultValue: 'Now' });
+  }
+  if (d < 3600_000) {
+    const m = Math.floor(d / 60_000);
+    return t('layout.workspace-recent-session-minutes', {
+      count: m,
+      defaultValue: `${m} min`,
+    });
+  }
+  if (d < 86400_000) {
+    const h = Math.floor(d / 3600_000);
+    return t('layout.workspace-recent-session-hours', {
+      count: h,
+      defaultValue: `${h}h`,
+    });
+  }
+  const days = Math.floor(d / 86400_000);
+  return t('layout.workspace-recent-session-days', {
+    count: days,
+    defaultValue: `${days}d`,
+  });
+}
+
+export interface WorkspaceRecentSessionsProps {
+  tasks: ChatStore['tasks'];
+  activeTaskId: string | null;
+  onSelectSession: (sessionId: string) => void;
+  onOpenAllSessions: () => void;
+}
+
+/**
+ * When example prompts are hidden, show the five most recent started sessions
+ * (same row UI as the project sidebar, capped by {@link NAV_LIST_SESSIONS_RECENT_MAX}).
+ */
+export function WorkspaceRecentSessions({
+  tasks,
+  activeTaskId,
+  onSelectSession,
+  onOpenAllSessions,
+}: WorkspaceRecentSessionsProps) {
+  const { t } = useTranslation();
+
+  const sessions: NavListSession[] = useMemo(() => {
+    const entries = Object.entries(tasks)
+      .filter(([, task]) => {
+        const hasStarted =
+          (task.messages?.length || 0) > 0 ||
+          task.hasMessages ||
+          task.status !== ChatTaskStatus.PENDING;
+        return hasStarted;
+      })
+      .map(([id, task]) => {
+        const startedMs = taskIdToCreatedMs(id);
+        return {
+          id,
+          title:
+            task.summaryTask?.trim() ||
+            t('layout.sessions-untitled', { defaultValue: 'Untitled session' }),
+          sessionLead: getSessionNavLeadPresentation(task),
+          trailing: formatSessionStartedAgo(startedMs, t) || undefined,
+        };
+      });
+    entries.sort((a, b) => taskIdToCreatedMs(b.id) - taskIdToCreatedMs(a.id));
+    return entries;
+  }, [tasks, t]);
+
+  if (sessions.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="pb-4 mx-auto flex min-h-full w-full max-w-[600px] flex-col">
+      <div className="text-ds-text-neutral-muted-default mb-3 gap-2 px-3 min-w-0 flex w-full items-center justify-between">
+        <h2 className="min-w-0 text-body-sm font-semibold text-left">
+          {t('layout.workspace-recent-sessions-heading', {
+            defaultValue: 'Recent',
+          })}
+        </h2>
+        <button
+          type="button"
+          onClick={onOpenAllSessions}
+          className="text-ds-text-neutral-muted-default group text-body-sm font-medium gap-0.5 focus-visible:ring-ds-ring-neutral-default-focus focus-visible:rounded inline-flex shrink-0 items-center transition-colors outline-none hover:underline focus-visible:ring-2"
+        >
+          {t('layout.sessions-full-title', {
+            defaultValue: 'All sessions',
+          })}
+          <span
+            className="max-w-0 ease-out group-hover:max-w-4 inline-flex overflow-hidden transition-[max-width] duration-200"
+            aria-hidden
+          >
+            <ArrowRight className="h-3.5 w-3.5 shrink-0" />
+          </span>
+        </button>
+      </div>
+      <div className="m-0 min-h-0 gap-0.5 p-0 flex w-full flex-col">
+        <NavListSessionRows
+          sessions={sessions}
+          activeSessionId={activeTaskId}
+          onSessionClick={onSelectSession}
+          folded={false}
+          maxItems={NAV_LIST_SESSIONS_RECENT_MAX}
+          panelListHover
+          showRowMenu={false}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Workspace/WorkspaceSessionModeToggle.tsx b/src/components/Workspace/WorkspaceSessionModeToggle.tsx
new file mode 100644
index 000000000..168e22465
--- /dev/null
+++ b/src/components/Workspace/WorkspaceSessionModeToggle.tsx
@@ -0,0 +1,191 @@
+// ========= 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 type { SessionModeType } from '@/types/constants';
+import { SessionMode } from '@/types/constants';
+import { AnimatePresence, motion, useAnimationControls } from 'framer-motion';
+import {
+  ChevronDown,
+  ChevronUp,
+  GamepadDirectional,
+  Joystick,
+} from 'lucide-react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ROLL = {
+  initial: { y: 14, opacity: 0 },
+  animate: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      type: 'spring' as const,
+      stiffness: 420,
+      damping: 32,
+      mass: 0.35,
+    },
+  },
+  exit: {
+    y: -14,
+    opacity: 0,
+    transition: { duration: 0.16, ease: [0.4, 0, 1, 1] as const },
+  },
+};
+
+const CHEVRON_TAP = {
+  type: 'spring' as const,
+  stiffness: 520,
+  damping: 22,
+  mass: 0.35,
+};
+
+const CHEVRON_RELEASE = {
+  type: 'spring' as const,
+  stiffness: 400,
+  damping: 28,
+  mass: 0.35,
+};
+
+export interface WorkspaceSessionModeToggleProps {
+  value: SessionModeType;
+  onValueChange: (mode: SessionModeType) => void;
+  className?: string;
+  /**
+   * When true, only the current mode is shown (no switching). Used in session chat input.
+   * Uses a transparent background to match the session input bar (see model read-only chip).
+   */
+  readOnly?: boolean;
+}
+
+export function WorkspaceSessionModeToggle({
+  value,
+  onValueChange,
+  className,
+  readOnly = false,
+}: WorkspaceSessionModeToggleProps) {
+  const { t } = useTranslation();
+  const chevronScale = useAnimationControls();
+
+  const labelSingle = t('layout.workspace-session-single-agent', {
+    defaultValue: 'Single Agent',
+  });
+  const labelWorkforce = t('layout.workspace-session-workforce', {
+    defaultValue: 'Workforce',
+  });
+
+  const modeAriaLabel = t('layout.workspace-session-mode-label', {
+    defaultValue: 'Session mode',
+  });
+
+  const isSingle = value === SessionMode.SINGLE_AGENT;
+  const nextMode = isSingle ? SessionMode.WORKFORCE : SessionMode.SINGLE_AGENT;
+  const label = isSingle ? labelSingle : labelWorkforce;
+
+  const toggle = () => onValueChange(nextMode);
+
+  const pulseChevrons = useCallback(() => {
+    void (async () => {
+      await chevronScale.start({ scale: 1.22, transition: CHEVRON_TAP });
+      await chevronScale.start({ scale: 1, transition: CHEVRON_RELEASE });
+    })();
+  }, [chevronScale]);
+
+  const LeadingIcon = isSingle ? Joystick : GamepadDirectional;
+
+  const shellClass = cn(
+    'rounded-xl px-2 py-1 inline-flex items-center gap-1.5',
+    'bg-ds-bg-neutral-default-default text-ds-text-neutral-default-default',
+    className
+  );
+
+  const chevronClass = 'size-3 shrink-0 opacity-80';
+
+  const endChevrons = (
+    <span
+      className="gap-0 inline-flex shrink-0 flex-col items-center justify-center leading-none"
+      aria-hidden
+    >
+      <ChevronUp className={cn(chevronClass, '-mb-1')} strokeWidth={2} />
+      <ChevronDown className={chevronClass} strokeWidth={2} />
+    </span>
+  );
+
+  if (readOnly) {
+    return (
+      <div
+        role="status"
+        aria-label={modeAriaLabel}
+        className={cn(shellClass, 'pointer-events-none bg-transparent')}
+      >
+        <span className="gap-1.5 inline-flex min-h-[1.25rem] items-center overflow-hidden">
+          <LeadingIcon
+            className="size-3.5 shrink-0"
+            strokeWidth={2}
+            aria-hidden
+          />
+          <span className="!text-label-xs font-semibold">{label}</span>
+        </span>
+      </div>
+    );
+  }
+
+  const cycleHint = t('layout.workspace-session-mode-cycle-hint', {
+    defaultValue: 'Click to switch session mode',
+  });
+
+  return (
+    <motion.button
+      type="button"
+      aria-label={`${modeAriaLabel}: ${label}. ${cycleHint}`}
+      className={cn(
+        shellClass,
+        'cursor-pointer border-0 text-left',
+        'focus-visible:ring-ds-border-neutral-strong-default focus-visible:ring-offset-ds-bg-neutral-default-default focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none'
+      )}
+      onPointerDown={pulseChevrons}
+      onClick={toggle}
+    >
+      <span className="min-w-0 relative inline-flex min-h-[1.25rem] flex-1 items-center overflow-hidden">
+        <AnimatePresence mode="wait" initial={false}>
+          <motion.span
+            key={value}
+            className="gap-1.5 inline-flex items-center will-change-transform"
+            variants={ROLL}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+          >
+            <LeadingIcon
+              className="size-3.5 shrink-0"
+              strokeWidth={2}
+              aria-hidden
+            />
+            <span className="!text-label-xs font-semibold whitespace-nowrap">
+              {label}
+            </span>
+          </motion.span>
+        </AnimatePresence>
+      </span>
+
+      <motion.span
+        className="inline-flex origin-center will-change-transform"
+        initial={{ scale: 1 }}
+        animate={chevronScale}
+      >
+        {endChevrons}
+      </motion.span>
+    </motion.button>
+  );
+}
diff --git a/src/components/Workspace/index.tsx b/src/components/Workspace/index.tsx
new file mode 100644
index 000000000..c911a11fb
--- /dev/null
+++ b/src/components/Workspace/index.tsx
@@ -0,0 +1,540 @@
+// ========= 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 larkIcon from '@/assets/icon/lark.png';
+import telegramIcon from '@/assets/icon/telegram.svg';
+import whatsappIcon from '@/assets/icon/whatsapp.svg';
+import { AddWorker } from '@/components/AddWorker';
+import BottomBox from '@/components/ChatBox/BottomBox';
+import { Button } from '@/components/ui/button';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import { BASE_WORKFLOW_AGENTS } from '@/components/WorkFlow/baseWorkers';
+import { isBaseWorkflowAgent } from '@/components/Workspace/FoldedAgentCard';
+import { SingleAgentList } from '@/components/Workspace/SingleAgentList';
+import { WorkforceAgentList } from '@/components/Workspace/WorkforceAgentList';
+import { WorkspaceExamplePrompts } from '@/components/Workspace/WorkspaceExamplePrompts';
+import { WorkspaceProjectPicker } from '@/components/Workspace/WorkspaceProjectPicker';
+import { WorkspaceRecentSessions } from '@/components/Workspace/WorkspaceRecentSessions';
+import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+import { useHost } from '@/host';
+import { useAuthStore, useWorkerList } from '@/store/authStore';
+import { usePageTabStore } from '@/store/pageTabStore';
+import { useProjectStore } from '@/store/projectStore';
+import { SessionMode } from '@/types/constants';
+import { Cast, MonitorSmartphone } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+
+const EMPTY_TASK_ASSIGNING: Agent[] = [];
+
+/**
+ * Workspace tab: project landing with a centered task input.
+ * After the user starts a task, it switches to the session tab.
+ */
+export default function Workspace() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const host = useHost();
+  const { chatStore, projectStore } = useChatStoreAdapter();
+  const activeProjectId = useProjectStore((s) => s.activeProjectId);
+  const activeProject = useProjectStore((s) =>
+    s.activeProjectId ? s.projects[s.activeProjectId] : null
+  );
+  const isEmptyProject = useProjectStore((s) => s.isEmptyProject);
+  const customAgentFolderPath = usePageTabStore((s) =>
+    activeProjectId
+      ? s.customAgentFolderPathByProjectId[activeProjectId]
+      : undefined
+  );
+  const showWorkspaceExamplePrompts = useMemo(() => {
+    if (!activeProject) return false;
+    if (customAgentFolderPath) return false;
+    if (!isEmptyProject(activeProject)) return false;
+    if (activeProject.metadata?.historyId) return false;
+    if (activeProject.metadata?.tags?.includes('replay')) return false;
+    return true;
+  }, [activeProject, customAgentFolderPath, isEmptyProject]);
+  const setActiveWorkspaceTab = usePageTabStore((s) => s.setActiveWorkspaceTab);
+  const sessionSidePanelMode = usePageTabStore(
+    (s) => s.sessionSidePanelMode ?? SessionMode.WORKFORCE
+  );
+  const setSessionSidePanelMode = usePageTabStore(
+    (s) => s.setSessionSidePanelMode
+  );
+  const workerList = useWorkerList();
+  const { modelType, setWorkerList } = useAuthStore();
+
+  const [message, setMessage] = useState('');
+  const [hasModel, setHasModel] = useState(false);
+  const [useCloudModelInDev, setUseCloudModelInDev] = useState(false);
+  const [addWorkerDialogOpen, setAddWorkerDialogOpen] = useState(false);
+  const [workspaceWorkWithPanelOpen, setWorkspaceWorkWithPanelOpen] =
+    useState(false);
+  const textareaRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!workspaceWorkWithPanelOpen) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setWorkspaceWorkWithPanelOpen(false);
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [workspaceWorkWithPanelOpen]);
+
+  const checkModelConfig = useCallback(async () => {
+    try {
+      if (modelType === 'cloud') {
+        const res = await proxyFetchGet('/api/v1/user/key');
+        setHasModel(!!res.value);
+      } else if (modelType === 'local' || modelType === 'custom') {
+        const res = await proxyFetchGet('/api/v1/providers', { prefer: true });
+        const providerList = res.items || [];
+        setHasModel(providerList.length > 0);
+      } else {
+        setHasModel(false);
+      }
+    } catch (err) {
+      console.error('Failed to check model config:', err);
+      setHasModel(false);
+    }
+  }, [modelType]);
+
+  useEffect(() => {
+    if (
+      import.meta.env.VITE_USE_LOCAL_PROXY === 'true' &&
+      modelType === 'cloud'
+    ) {
+      setUseCloudModelInDev(true);
+    } else {
+      setUseCloudModelInDev(false);
+    }
+  }, [modelType]);
+
+  useEffect(() => {
+    checkModelConfig();
+  }, [modelType, checkModelConfig]);
+
+  useEffect(() => {
+    if (location.pathname === '/') {
+      checkModelConfig();
+    }
+  }, [location.pathname, checkModelConfig]);
+
+  const handleSend = async () => {
+    if (
+      !message.trim() ||
+      !chatStore?.activeTaskId ||
+      !projectStore.activeProjectId
+    ) {
+      return;
+    }
+
+    if (!hasModel) {
+      toast.error('Please select a model first.');
+      navigate('/history?tab=agents');
+      return;
+    }
+
+    const taskId = chatStore.activeTaskId;
+    chatStore.setHasMessages(taskId, true);
+    const attachesToSend =
+      JSON.parse(JSON.stringify(chatStore.tasks[taskId]?.attaches)) || [];
+
+    // Enter the live session immediately; task startup continues in the background.
+    setActiveWorkspaceTab('session');
+
+    try {
+      await chatStore.startTask(
+        taskId,
+        undefined,
+        undefined,
+        undefined,
+        message.trim(),
+        attachesToSend,
+        undefined
+      );
+      chatStore.setHasWaitComfirm(taskId, true);
+      chatStore.setAttaches(taskId, []);
+      setMessage('');
+    } catch (err: unknown) {
+      setActiveWorkspaceTab('workforce');
+      console.error('Failed to start task:', err);
+      toast.error(
+        err instanceof Error
+          ? err.message
+          : t('layout.failed-to-start-task', {
+              defaultValue:
+                'Failed to start task. Please check your model configuration.',
+            })
+      );
+    }
+  };
+
+  const handleFileSelect = useCallback(async () => {
+    if (!chatStore?.activeTaskId) return;
+    try {
+      const result = await host?.electronAPI?.selectFile({
+        title: t('chat.select-file'),
+        filters: [{ name: t('chat.all-files'), extensions: ['*'] }],
+      });
+
+      if (result.success && result.files && result.files.length > 0) {
+        const taskId = chatStore.activeTaskId as string;
+        const files = [
+          ...(chatStore.tasks[taskId].attaches || []),
+          ...result.files.filter(
+            (r: File) =>
+              !chatStore.tasks[taskId].attaches?.some(
+                (f: File) => f.filePath === r.filePath
+              )
+          ),
+        ];
+        chatStore.setAttaches(taskId, files);
+      }
+    } catch (error) {
+      console.error('Select File Error:', error);
+    }
+  }, [chatStore, host, t]);
+
+  const taskAssigning =
+    chatStore?.activeTaskId != null
+      ? (chatStore.tasks[chatStore.activeTaskId]?.taskAssigning ??
+        EMPTY_TASK_ASSIGNING)
+      : EMPTY_TASK_ASSIGNING;
+
+  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 onSelectAgent = useCallback(
+    (agentId: string) => {
+      if (!chatStore?.activeTaskId) return;
+      chatStore.setActiveWorkspace(chatStore.activeTaskId, agentId);
+      chatStore.setActiveAgent(chatStore.activeTaskId, agentId);
+      host?.electronAPI?.hideAllWebview?.();
+    },
+    [chatStore, host]
+  );
+
+  const onAgentDetailFromMenu = useCallback(
+    (agentId: string) => {
+      onSelectAgent(agentId);
+      setActiveWorkspaceTab('session');
+    },
+    [onSelectAgent, setActiveWorkspaceTab]
+  );
+
+  const onDuplicateUserAgent = useCallback(
+    (agent: Agent) => {
+      if (isBaseWorkflowAgent(agent)) return;
+      const baseName = agent.workerInfo?.name ?? agent.name;
+      const taken = new Set<string>();
+      workerList.forEach((w) => {
+        taken.add(w.agent_id);
+        taken.add(w.name);
+      });
+      let newName = `${baseName} copy`;
+      let n = 2;
+      while (taken.has(newName)) {
+        newName = `${baseName} copy ${n++}`;
+      }
+      const raw = JSON.parse(JSON.stringify(agent)) as Agent;
+      const duplicate: Agent = {
+        ...raw,
+        agent_id: newName,
+        name: newName,
+        type: newName as AgentNameType,
+        tasks: [],
+        log: [],
+        activeWebviewIds: [],
+        workerInfo: raw.workerInfo
+          ? { ...raw.workerInfo, name: newName }
+          : undefined,
+      };
+      setWorkerList([...workerList, duplicate]);
+    },
+    [workerList, setWorkerList]
+  );
+
+  const onDeleteUserAgent = useCallback(
+    (agentId: string) => {
+      setWorkerList(workerList.filter((w) => w.agent_id !== agentId));
+    },
+    [workerList, setWorkerList]
+  );
+
+  if (!chatStore?.activeTaskId) {
+    return null;
+  }
+
+  const activeAgentId = chatStore.tasks[chatStore.activeTaskId]?.activeAgent;
+
+  const workWithPanelToggleLabel = workspaceWorkWithPanelOpen
+    ? t('layout.workspace-work-with-panel-hide', {
+        defaultValue: 'Hide Work with panel',
+      })
+    : t('layout.workspace-work-with-panel-show', {
+        defaultValue: 'Show Work with panel',
+      });
+
+  return (
+    <div className="min-h-0 relative flex h-full w-full flex-col">
+      <div className="px-3 relative z-50 flex h-[44px] w-full shrink-0 flex-row items-center justify-start">
+        <TooltipSimple content={workWithPanelToggleLabel} delayDuration={300}>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            buttonContent="icon-only"
+            onClick={() => setWorkspaceWorkWithPanelOpen((open) => !open)}
+            aria-expanded={workspaceWorkWithPanelOpen}
+            aria-controls="workspace-work-with-panel"
+            className="no-drag text-ds-text-neutral-muted-default hover:bg-ds-bg-neutral-strong-default shrink-0"
+            aria-label={workWithPanelToggleLabel}
+          >
+            <Cast className="h-4 w-4" aria-hidden />
+          </Button>
+        </TooltipSimple>
+      </div>
+      <div className="min-h-0 relative z-0 flex w-full flex-1 flex-col items-stretch overflow-hidden">
+        <div className="min-h-0 px-3 flex w-full flex-1 flex-col">
+          <div className="mx-auto flex w-full max-w-[600px] shrink-0 flex-col">
+            <div className="min-w-0 flex min-h-[50vh] w-full flex-col justify-end">
+              <div className="mb-8 flex w-full justify-center">
+                <WorkspaceProjectPicker />
+              </div>
+              <span className="mb-8 text-ds-text-neutral-default-default text-heading-lg font-bold w-full text-center">
+                {sessionSidePanelMode === SessionMode.SINGLE_AGENT
+                  ? t('layout.workspace-cowork-single-agent', {
+                      defaultValue: 'Cowork with Single Agent',
+                    })
+                  : t('layout.workspace-cowork-workforce', {
+                      defaultValue: 'Cowork with Workforce',
+                    })}
+              </span>
+              <div className="px-5 mb-8 flex w-full justify-center">
+                {sessionSidePanelMode === SessionMode.SINGLE_AGENT ? (
+                  <SingleAgentList />
+                ) : (
+                  <WorkforceAgentList
+                    sortedAgents={sortedAgents}
+                    activeAgentId={activeAgentId}
+                    onSelectAgent={onSelectAgent}
+                    onAgentDetailFromMenu={onAgentDetailFromMenu}
+                    onDuplicateUserAgent={onDuplicateUserAgent}
+                    onDeleteUserAgent={onDeleteUserAgent}
+                    onAddWorker={() => setAddWorkerDialogOpen(true)}
+                  />
+                )}
+              </div>
+              <div className="w-full">
+                <BottomBox
+                  state="input"
+                  queuedMessages={[]}
+                  onRemoveQueuedMessage={() => {}}
+                  noModelOverlay={!hasModel}
+                  onSelectModel={() => navigate('/history?tab=agents')}
+                  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: !hasModel,
+                    textareaRef,
+                    allowDragDrop: true,
+                    useCloudModelInDev,
+                    placeholder: t('layout.project-task-placeholder', {
+                      defaultValue: 'Describe what you want to accomplish...',
+                    }),
+                    sessionMode: sessionSidePanelMode,
+                    onSessionModeChange: setSessionSidePanelMode,
+                    sessionModeSelectInteractive: true,
+                  }}
+                />
+              </div>
+              <AddWorker
+                isOpen={addWorkerDialogOpen}
+                onOpenChange={setAddWorkerDialogOpen}
+              />
+            </div>
+          </div>
+
+          <div
+            className="min-h-0 pt-6 flex w-full flex-1 flex-col overflow-y-auto"
+            id="workspace-bottom-group"
+          >
+            {showWorkspaceExamplePrompts ? (
+              <WorkspaceExamplePrompts
+                onSelectPrompt={setMessage}
+                disabled={!hasModel}
+              />
+            ) : (
+              <WorkspaceRecentSessions
+                tasks={chatStore.tasks}
+                activeTaskId={chatStore.activeTaskId}
+                onSelectSession={(id) => {
+                  chatStore.setActiveTaskId(id);
+                  setActiveWorkspaceTab('session');
+                }}
+                onOpenAllSessions={() => setActiveWorkspaceTab('sessions')}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+
+      {workspaceWorkWithPanelOpen ? (
+        <>
+          <button
+            type="button"
+            className="inset-0 absolute z-40 cursor-default bg-transparent backdrop-blur-[1px]"
+            aria-label={t('layout.workspace-work-with-dismiss-overlay', {
+              defaultValue: 'Dismiss',
+            })}
+            onClick={() => setWorkspaceWorkWithPanelOpen(false)}
+          />
+          <div
+            id="workspace-work-with-panel"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="workspace-work-with-heading"
+            className="left-0 top-8 ease-out animate-in fade-in-0 slide-in-from-left-2 absolute z-50 flex max-h-[calc(100%-2.75rem)] w-[300px] flex-col overflow-y-auto duration-200"
+          >
+            <div className="gap-3 p-3 flex flex-col">
+              <div className="rounded-xl border-ds-border-neutral-subtle-default bg-ds-bg-neutral-subtle-default min-w-0 p-3 flex flex-col border border-solid">
+                <span
+                  id="workspace-work-with-heading"
+                  className="text-ds-text-neutral-default-default text-body-sm font-semibold"
+                >
+                  {t('layout.workspace-work-with-title', {
+                    defaultValue: 'Work with',
+                  })}
+                </span>
+                <div className="mt-3 gap-1 flex flex-col">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    tone="default"
+                    emphasis="default"
+                    size="sm"
+                    buttonContent="text"
+                    className="no-drag gap-2 justify-start"
+                  >
+                    <MonitorSmartphone
+                      className="text-ds-text-neutral-muted-default h-4 w-4 shrink-0"
+                      aria-hidden
+                    />
+                    {t('layout.workspace-work-with-remote-control', {
+                      defaultValue: 'Remote control',
+                    })}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    tone="default"
+                    emphasis="default"
+                    size="sm"
+                    buttonContent="text"
+                    className="no-drag gap-2 justify-start"
+                    aria-label={t('layout.channels-telegram', {
+                      defaultValue: 'Telegram',
+                    })}
+                  >
+                    <img
+                      src={telegramIcon}
+                      alt=""
+                      className="h-4 w-4 shrink-0 object-contain"
+                      aria-hidden
+                    />
+                    {t('layout.channels-telegram', {
+                      defaultValue: 'Telegram',
+                    })}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    tone="default"
+                    emphasis="default"
+                    size="sm"
+                    buttonContent="text"
+                    className="no-drag gap-2 justify-start"
+                    aria-label={t('layout.channels-lark', {
+                      defaultValue: 'Lark',
+                    })}
+                  >
+                    <img
+                      src={larkIcon}
+                      alt=""
+                      className="h-4 w-4 rounded-lg shrink-0 object-contain"
+                      aria-hidden
+                    />
+                    {t('layout.channels-lark', { defaultValue: 'Lark' })}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    tone="default"
+                    emphasis="default"
+                    size="sm"
+                    buttonContent="text"
+                    className="no-drag gap-2 justify-start"
+                    aria-label={t('layout.channels-whatsapp', {
+                      defaultValue: 'WhatsApp',
+                    })}
+                  >
+                    <img
+                      src={whatsappIcon}
+                      alt=""
+                      className="h-4 w-4 shrink-0 object-contain"
+                      aria-hidden
+                    />
+                    {t('layout.channels-whatsapp', {
+                      defaultValue: 'WhatsApp',
+                    })}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}
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/accordion.tsx b/src/components/ui/accordion.tsx
index 7cd0ce701..9878ca7bc 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -40,13 +40,13 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        'flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        'py-4 text-sm font-medium flex flex-1 items-center justify-between text-left transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
         className
       )}
       {...props}
     >
       {children}
-      <ChevronDown className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
+      <ChevronDown className="h-4 w-4 text-ds-text-neutral-muted-default shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
@@ -58,7 +58,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down text-sm overflow-hidden"
     {...props}
   >
     <div className={cn('p-0', className)}>{children}</div>
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 52a0b6cbc..ee4a55b71 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -16,34 +16,84 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import {
+  normalizeUiTone,
+  type UiTone,
+  type UiToneInput,
+} from './semanticProps';
 
-const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background text-foreground',
-        destructive:
-          'border-destructive/50 text-text-cuation dark:border-destructive [&>svg]:text-destructive',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
+const alertBase =
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7';
+
+const alertVariants = cva(alertBase, {
+  variants: {
+    tone: {
+      neutral:
+        'border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default text-ds-text-neutral-default-default [&>svg]:text-ds-text-neutral-default-default',
+      error:
+        'border-ds-border-status-error-default-default/50 text-ds-text-status-error-strong-default [&>svg]:text-ds-text-status-error-strong-default',
+      success:
+        'border-ds-border-status-completed-default-default/50 text-ds-text-status-completed-strong-default [&>svg]:text-ds-text-status-completed-strong-default',
+      warning:
+        'border-ds-border-status-pending-default-default/50 text-ds-text-status-pending-strong-default [&>svg]:text-ds-text-status-pending-strong-default',
+      information:
+        'border-ds-border-status-splitting-default-default/50 text-ds-text-status-splitting-strong-default [&>svg]:text-ds-text-status-splitting-strong-default',
     },
+  },
+  defaultVariants: {
+    tone: 'neutral',
+  },
+});
+
+/**
+ * @deprecated Use `Alert` with `tone` (see {@link AlertToneInput}). `default` and
+ * `destructive` map to `tone="neutral"` and `tone="error"` for compatibility.
+ */
+export type AlertVariant = 'default' | 'destructive';
+
+export type AlertToneInput = UiToneInput;
+
+function resolveAlertTone(
+  tone: UiToneInput | undefined,
+  /**
+   * @deprecated Use `tone` instead
+   */
+  variant: AlertVariant | undefined
+): UiTone {
+  if (tone !== undefined) {
+    return normalizeUiTone(tone);
   }
-);
+  if (variant === 'destructive') {
+    return 'error';
+  }
+  return 'neutral';
+}
 
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-));
+export type AlertProps = React.HTMLAttributes<HTMLDivElement> &
+  Omit<VariantProps<typeof alertVariants>, 'tone'> & {
+    /** Semantic palette; aligns with `semanticProps` / `Button` `tone`. */
+    tone?: AlertToneInput;
+    /**
+     * @deprecated Use `tone="error"` instead of `variant="destructive"`, and
+     * `tone="neutral"` (or omit) instead of `variant="default"`.
+     */
+    variant?: AlertVariant;
+  };
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, tone: toneProp, variant: variantProp, ...props }, ref) => {
+    const effectiveTone = resolveAlertTone(toneProp, variantProp);
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        data-tone={effectiveTone}
+        className={cn(alertVariants({ tone: effectiveTone }), className)}
+        {...props}
+      />
+    );
+  }
+);
 Alert.displayName = 'Alert';
 
 const AlertTitle = React.forwardRef<
@@ -52,7 +102,7 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h5
     ref={ref}
-    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    className={cn('mb-1 font-medium tracking-tight leading-none', className)}
     {...props}
   />
 ));
@@ -70,4 +120,4 @@ const AlertDescription = React.forwardRef<
 ));
 AlertDescription.displayName = 'AlertDescription';
 
-export { Alert, AlertDescription, AlertTitle };
+export { Alert, AlertDescription, AlertTitle, alertVariants };
diff --git a/src/components/ui/alertDialog.tsx b/src/components/ui/alertDialog.tsx
index 0ddc7cfa7..a0233ea11 100644
--- a/src/components/ui/alertDialog.tsx
+++ b/src/components/ui/alertDialog.tsx
@@ -12,18 +12,14 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-import { Button } from '@/components/ui/button';
+import {
+  Button,
+  type ButtonLegacyVariant,
+  type ButtonVariant,
+} from '@/components/ui/button';
 import { AnimatePresence, motion } from 'framer-motion';
 
-type ButtonVariant =
-  | 'primary'
-  | 'secondary'
-  | 'outline'
-  | 'ghost'
-  | 'success'
-  | 'cuation'
-  | 'information'
-  | 'warning';
+type ConfirmVariant = ButtonVariant | ButtonLegacyVariant;
 
 interface ConfirmModalProps {
   isOpen: boolean;
@@ -33,7 +29,7 @@ interface ConfirmModalProps {
   message?: string;
   confirmText?: string;
   cancelText?: string;
-  confirmVariant?: ButtonVariant;
+  confirmVariant?: ConfirmVariant;
 }
 
 export default function ConfirmModal({
@@ -44,7 +40,7 @@ export default function ConfirmModal({
   message = 'Confirm content?',
   confirmText = 'Confirm',
   cancelText = 'Cancel',
-  confirmVariant = 'cuation',
+  confirmVariant = 'caution',
 }: ConfirmModalProps) {
   return (
     <AnimatePresence>
@@ -55,8 +51,7 @@ export default function ConfirmModal({
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="alert-dialog bg-black/20 fixed inset-0 z-[99]"
-            style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}
+            className="alert-dialog bg-dialog-overlay-scrim inset-0 fixed z-[99]"
             onClick={onClose}
           />
 
@@ -65,15 +60,17 @@ export default function ConfirmModal({
             initial={{ opacity: 0, scale: 0.9, y: 20 }}
             animate={{ opacity: 1, scale: 1, y: 0 }}
             exit={{ opacity: 0, scale: 0.9, y: 20 }}
-            className="alert-dialog-wrapper fixed left-1/2 top-1/2 z-[100] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl"
+            className="alert-dialog-wrapper max-w-md rounded-xl fixed top-1/2 left-1/2 z-[100] -translate-x-1/2 -translate-y-1/2"
           >
-            <div className="rounded-xl border border-popup-border bg-surface-tertiary p-6 shadow-perfect">
-              <span className="mb-2 text-body-lg font-bold text-text-primary">
+            <div className="rounded-xl border-ds-border-neutral-default-default bg-ds-bg-neutral-strong-default p-6 shadow-perfect border">
+              <span className="mb-2 text-body-lg font-bold text-ds-text-neutral-default-default">
                 {title}
               </span>
-              <p className="mb-6 text-label-md text-text-label">{message}</p>
+              <p className="mb-6 text-label-md text-ds-text-neutral-muted-default">
+                {message}
+              </p>
 
-              <div className="flex justify-end gap-3">
+              <div className="gap-3 flex justify-end">
                 <Button variant="ghost" onClick={onClose}>
                   {cancelText}
                 </Button>
diff --git a/src/components/animate-ui/icons/alarm-clock.tsx b/src/components/ui/animate-ui/icons/alarm-clock.tsx
similarity index 99%
rename from src/components/animate-ui/icons/alarm-clock.tsx
rename to src/components/ui/animate-ui/icons/alarm-clock.tsx
index 85ab1546c..ede1c3800 100644
--- a/src/components/animate-ui/icons/alarm-clock.tsx
+++ b/src/components/ui/animate-ui/icons/alarm-clock.tsx
@@ -21,7 +21,7 @@ import {
   IconWrapper,
   useAnimateIconContext,
   type IconProps,
-} from '@/components/animate-ui/icons/icon';
+} from '@/components/ui/animate-ui/icons/icon';
 
 type AlarmClockProps = IconProps<keyof typeof animations>;
 
diff --git a/src/components/ui/animate-ui/icons/blocks.tsx b/src/components/ui/animate-ui/icons/blocks.tsx
new file mode 100644
index 000000000..e18fcc75e
--- /dev/null
+++ b/src/components/ui/animate-ui/icons/blocks.tsx
@@ -0,0 +1,174 @@
+// ========= 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. =========
+
+'use client';
+
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  IconWrapper,
+  useAnimateIconContext,
+  type IconProps,
+} from '@/components/ui/animate-ui/icons/icon';
+
+type BlocksProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    path1: {
+      initial: {
+        x: 0,
+        y: 0,
+        d: 'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',
+        strokeLinejoin: 'round',
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: 2,
+        y: -2,
+        d: 'M10 22V6H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-6H2',
+        strokeLinejoin: 'miter',
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          d: { duration: 0, delay: 0.3 },
+          strokeLinejoin: { duration: 0, delay: 0.3 },
+        },
+      },
+    },
+    path2: {
+      initial: {
+        x: 0,
+        y: 0,
+        d: 'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: -2,
+        y: 2,
+        d: 'M15 2 H20 A2 2 0 0 1 22 4 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  'default-loop': {
+    path1: {
+      initial: {
+        x: 0,
+        y: 0,
+        d: 'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',
+        strokeLinejoin: 'round',
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: [0, 2, 0],
+        y: [0, -2, 0],
+        d: [
+          'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',
+          'M10 22V6H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-6H2',
+          'M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2',
+        ],
+        strokeLinejoin: ['round', 'miter', 'round'],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+          d: { duration: 0, delay: 0.3 },
+          strokeLinejoin: { duration: 0, delay: 0.3 },
+        },
+      },
+    },
+    path2: {
+      initial: {
+        x: 0,
+        y: 0,
+        d: 'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+      animate: {
+        x: [0, -2, 0],
+        y: [0, 2, 0],
+        d: [
+          'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',
+          'M15 2 H20 A2 2 0 0 1 22 4 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',
+          'M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z',
+        ],
+        transition: {
+          duration: 0.8,
+          ease: 'easeInOut',
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: BlocksProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.path
+        d="M10 22V7c0-.6-.4-1-1-1H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-5c0-.6-.4-1-1-1H2"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M15 2 H21 A1 1 0 0 1 22 3 V9 A1 1 0 0 1 21 10 H15 A1 1 0 0 1 14 9 V3 A1 1 0 0 1 15 2 Z"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function Blocks(props: BlocksProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  Blocks,
+  Blocks as BlocksIcon,
+  type BlocksProps as BlocksIconProps,
+  type BlocksProps,
+};
diff --git a/src/components/animate-ui/icons/bot.tsx b/src/components/ui/animate-ui/icons/bot.tsx
similarity index 98%
rename from src/components/animate-ui/icons/bot.tsx
rename to src/components/ui/animate-ui/icons/bot.tsx
index 7a52df9d8..606fcb86b 100644
--- a/src/components/animate-ui/icons/bot.tsx
+++ b/src/components/ui/animate-ui/icons/bot.tsx
@@ -21,7 +21,7 @@ import {
   IconWrapper,
   useAnimateIconContext,
   type IconProps,
-} from '@/components/animate-ui/icons/icon';
+} from '@/components/ui/animate-ui/icons/icon';
 
 type BotProps = IconProps<keyof typeof animations>;
 
diff --git a/src/components/ui/animate-ui/icons/clipboard-list.tsx b/src/components/ui/animate-ui/icons/clipboard-list.tsx
new file mode 100644
index 000000000..0c3a65dc9
--- /dev/null
+++ b/src/components/ui/animate-ui/icons/clipboard-list.tsx
@@ -0,0 +1,174 @@
+// ========= 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. =========
+
+'use client';
+
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  IconWrapper,
+  useAnimateIconContext,
+  type IconProps,
+} from '@/components/ui/animate-ui/icons/icon';
+
+type ClipboardListProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    rect: {},
+    path1: {},
+    path2: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+        },
+      },
+    },
+    path3: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.2,
+        },
+      },
+    },
+    path4: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.5,
+        },
+      },
+    },
+    path5: {
+      initial: {
+        pathLength: 1,
+        opacity: 1,
+        scale: 1,
+      },
+      animate: {
+        pathLength: [0, 1],
+        opacity: [0, 1],
+        scale: [1.1, 1],
+        transition: {
+          duration: 0.4,
+          ease: 'easeInOut',
+          delay: 0.7,
+        },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: ClipboardListProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.rect
+        width="8"
+        height="4"
+        x="8"
+        y="2"
+        rx="1"
+        ry="1"
+        variants={variants.rect}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+        variants={variants.path1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 11h.01"
+        variants={variants.path2}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M12 11h4"
+        variants={variants.path3}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M8 16h.01"
+        variants={variants.path4}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.path
+        d="M12 16h4"
+        variants={variants.path5}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function ClipboardList(props: ClipboardListProps) {
+  return <IconWrapper icon={IconComponent} {...props} />;
+}
+
+export {
+  animations,
+  ClipboardList,
+  ClipboardList as ClipboardListIcon,
+  type ClipboardListProps as ClipboardListIconProps,
+  type ClipboardListProps,
+};
diff --git a/src/components/animate-ui/icons/compass.tsx b/src/components/ui/animate-ui/icons/compass.tsx
similarity index 98%
rename from src/components/animate-ui/icons/compass.tsx
rename to src/components/ui/animate-ui/icons/compass.tsx
index fa96a0efd..61d702324 100644
--- a/src/components/animate-ui/icons/compass.tsx
+++ b/src/components/ui/animate-ui/icons/compass.tsx
@@ -21,7 +21,7 @@ import {
   IconWrapper,
   useAnimateIconContext,
   type IconProps,
-} from '@/components/animate-ui/icons/icon';
+} from '@/components/ui/animate-ui/icons/icon';
 
 type CompassProps = IconProps<keyof typeof animations>;
 
diff --git a/src/components/animate-ui/icons/hammer.tsx b/src/components/ui/animate-ui/icons/hammer.tsx
similarity index 98%
rename from src/components/animate-ui/icons/hammer.tsx
rename to src/components/ui/animate-ui/icons/hammer.tsx
index 9735cc936..165b4e3b2 100644
--- a/src/components/animate-ui/icons/hammer.tsx
+++ b/src/components/ui/animate-ui/icons/hammer.tsx
@@ -21,7 +21,7 @@ import {
   IconWrapper,
   useAnimateIconContext,
   type IconProps,
-} from '@/components/animate-ui/icons/icon';
+} from '@/components/ui/animate-ui/icons/icon';
 
 type HammerProps = IconProps<keyof typeof animations>;
 
diff --git a/src/components/animate-ui/icons/icon.tsx b/src/components/ui/animate-ui/icons/icon.tsx
similarity index 99%
rename from src/components/animate-ui/icons/icon.tsx
rename to src/components/ui/animate-ui/icons/icon.tsx
index 05c7e09f0..4515d6a6e 100644
--- a/src/components/animate-ui/icons/icon.tsx
+++ b/src/components/ui/animate-ui/icons/icon.tsx
@@ -28,7 +28,7 @@ import * as React from 'react';
 import {
   Slot,
   type WithAsChild,
-} from '@/components/animate-ui/primitives/animate/slot';
+} from '@/components/ui/animate-ui/primitives/animate/slot';
 import { useIsInView } from '@/hooks/use-is-in-view';
 import { cn } from '@/lib/utils';
 
diff --git a/src/components/animate-ui/icons/orbit.tsx b/src/components/ui/animate-ui/icons/orbit.tsx
similarity index 98%
rename from src/components/animate-ui/icons/orbit.tsx
rename to src/components/ui/animate-ui/icons/orbit.tsx
index b8b1e01f1..dbdbd90b8 100644
--- a/src/components/animate-ui/icons/orbit.tsx
+++ b/src/components/ui/animate-ui/icons/orbit.tsx
@@ -21,7 +21,7 @@ import {
   IconWrapper,
   useAnimateIconContext,
   type IconProps,
-} from '@/components/animate-ui/icons/icon';
+} from '@/components/ui/animate-ui/icons/icon';
 
 type OrbitProps = IconProps<keyof typeof animations>;
 
diff --git a/src/components/animate-ui/icons/pin.tsx b/src/components/ui/animate-ui/icons/pin.tsx
similarity index 98%
rename from src/components/animate-ui/icons/pin.tsx
rename to src/components/ui/animate-ui/icons/pin.tsx
index 42baafa79..efc0ab491 100644
--- a/src/components/animate-ui/icons/pin.tsx
+++ b/src/components/ui/animate-ui/icons/pin.tsx
@@ -21,7 +21,7 @@ import {
   IconWrapper,
   useAnimateIconContext,
   type IconProps,
-} from '@/components/animate-ui/icons/icon';
+} from '@/components/ui/animate-ui/icons/icon';
 
 type PinProps = IconProps<keyof typeof animations>;
 
diff --git a/src/components/animate-ui/icons/radio.tsx b/src/components/ui/animate-ui/icons/radio.tsx
similarity index 98%
rename from src/components/animate-ui/icons/radio.tsx
rename to src/components/ui/animate-ui/icons/radio.tsx
index c2eec333d..af2407f6a 100644
--- a/src/components/animate-ui/icons/radio.tsx
+++ b/src/components/ui/animate-ui/icons/radio.tsx
@@ -21,7 +21,7 @@ import {
   IconWrapper,
   useAnimateIconContext,
   type IconProps,
-} from '@/components/animate-ui/icons/icon';
+} from '@/components/ui/animate-ui/icons/icon';
 
 type RadioProps = IconProps<keyof typeof animations>;
 
diff --git a/src/components/animate-ui/icons/settings.tsx b/src/components/ui/animate-ui/icons/settings.tsx
similarity index 98%
rename from src/components/animate-ui/icons/settings.tsx
rename to src/components/ui/animate-ui/icons/settings.tsx
index 07b34c683..0200c76a3 100644
--- a/src/components/animate-ui/icons/settings.tsx
+++ b/src/components/ui/animate-ui/icons/settings.tsx
@@ -21,7 +21,7 @@ import {
   IconWrapper,
   useAnimateIconContext,
   type IconProps,
-} from '@/components/animate-ui/icons/icon';
+} from '@/components/ui/animate-ui/icons/icon';
 
 type SettingsProps = IconProps<keyof typeof animations>;
 
diff --git a/src/components/animate-ui/icons/sparkle.tsx b/src/components/ui/animate-ui/icons/sparkle.tsx
similarity index 98%
rename from src/components/animate-ui/icons/sparkle.tsx
rename to src/components/ui/animate-ui/icons/sparkle.tsx
index e0d638ed8..f24081288 100644
--- a/src/components/animate-ui/icons/sparkle.tsx
+++ b/src/components/ui/animate-ui/icons/sparkle.tsx
@@ -21,7 +21,7 @@ import {
   IconWrapper,
   useAnimateIconContext,
   type IconProps,
-} from '@/components/animate-ui/icons/icon';
+} from '@/components/ui/animate-ui/icons/icon';
 
 type SparkleProps = IconProps<keyof typeof animations>;
 
diff --git a/src/components/animate-ui/primitives/animate/slot.tsx b/src/components/ui/animate-ui/primitives/animate/slot.tsx
similarity index 100%
rename from src/components/animate-ui/primitives/animate/slot.tsx
rename to src/components/ui/animate-ui/primitives/animate/slot.tsx
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 7cedad7da..c6b70f58c 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -12,40 +12,198 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import {
+  DEFAULT_EMPHASIS_BY_VARIANT,
+  normalizeUiTone,
+  type UiEmphasis,
+  type UiTone,
+  type UiToneInput,
+  type UiVariant,
+} from './semanticProps';
 
-const badgeVariants = cva(
-  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+const badgeBase = cva(
+  'inline-flex items-center rounded-md border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ds-ring-brand-default-focus focus:ring-offset-2 focus:ring-offset-ds-bg-neutral-subtle-default',
   {
     variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
-        outline: 'text-foreground',
+      size: {
+        xs: 'gap-0.5 px-1 py-0 !text-label-xs',
+        default: 'px-2 py-1 !text-label-sm',
+        sm: 'gap-1 px-2 py-1 !text-label-sm',
       },
     },
     defaultVariants: {
-      variant: 'default',
+      size: 'default',
     },
   }
 );
 
-export interface BadgeProps
-  extends
-    React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+type BadgeLegacyVariant = 'default' | 'secondary' | 'destructive' | 'outline';
+type BadgeStyleVariant = UiVariant | 'inverse';
+type BadgeTone = UiTone;
 
-function Badge({ className, variant, ...props }: BadgeProps) {
+const BADGE_PRIMARY: Record<BadgeTone, string> = {
+  neutral:
+    'border-transparent bg-ds-bg-brand-default-default text-ds-text-brand-inverse-default',
+  success:
+    'border-transparent bg-ds-bg-success-default-default text-ds-text-success-strong-default',
+  error:
+    'border-transparent bg-ds-bg-error-default-default text-ds-text-error-strong-default',
+  information:
+    'border-transparent bg-ds-bg-information-default-default text-ds-text-information-strong-default',
+  warning:
+    'border-transparent bg-ds-bg-warning-default-default text-ds-text-warning-strong-default',
+};
+
+const BADGE_SECONDARY: Record<BadgeTone, string> = {
+  neutral:
+    'border-transparent bg-ds-bg-neutral-subtle-default text-ds-text-neutral-default-default',
+  success:
+    'border-transparent bg-ds-bg-success-subtle-default text-ds-text-success-strong-default',
+  error:
+    'border-transparent bg-ds-bg-error-subtle-default text-ds-text-error-strong-default',
+  information:
+    'border-transparent bg-ds-bg-information-subtle-default text-ds-text-information-strong-default',
+  warning:
+    'border-transparent bg-ds-bg-warning-subtle-default text-ds-text-warning-strong-default',
+};
+
+const BADGE_OUTLINE: Record<BadgeTone, string> = {
+  neutral:
+    'bg-transparent border-ds-border-neutral-default-default text-ds-text-neutral-default-default',
+  success:
+    'bg-transparent border-ds-border-success-default-default text-ds-text-success-strong-default',
+  error:
+    'bg-transparent border-ds-border-error-default-default text-ds-text-error-strong-default',
+  information:
+    'bg-transparent border-ds-border-information-default-default text-ds-text-information-strong-default',
+  warning:
+    'bg-transparent border-ds-border-warning-default-default text-ds-text-warning-strong-default',
+};
+
+const BADGE_GHOST: Record<BadgeTone, string> = {
+  neutral:
+    'border-transparent bg-transparent text-ds-text-neutral-default-default',
+  success:
+    'border-transparent bg-transparent text-ds-text-success-strong-default',
+  error: 'border-transparent bg-transparent text-ds-text-error-strong-default',
+  information:
+    'border-transparent bg-transparent text-ds-text-information-strong-default',
+  warning:
+    'border-transparent bg-transparent text-ds-text-warning-strong-default',
+};
+
+const BADGE_INVERSE =
+  'border-transparent bg-ds-bg-neutral-inverse-default text-ds-text-neutral-inverse-default';
+
+function resolveBadgeVisual(
+  variant: UiVariant | BadgeLegacyVariant | undefined,
+  tone: UiToneInput | undefined,
+  emphasis: UiEmphasis | undefined
+): {
+  styleVariant: BadgeStyleVariant;
+  tone: BadgeTone;
+  emphasis: UiEmphasis;
+  publicVariant: UiVariant;
+} {
+  const v = variant ?? 'primary';
+  const normalizedTone = normalizeUiTone(tone);
+
+  if (v === 'default') {
+    return {
+      styleVariant: 'primary',
+      tone: normalizedTone,
+      emphasis: emphasis ?? DEFAULT_EMPHASIS_BY_VARIANT.primary,
+      publicVariant: 'primary',
+    };
+  }
+  if (v === 'destructive') {
+    return {
+      styleVariant: 'primary',
+      tone: tone ? normalizedTone : 'error',
+      emphasis: emphasis ?? DEFAULT_EMPHASIS_BY_VARIANT.primary,
+      publicVariant: 'primary',
+    };
+  }
+
+  const baseVariant = v as UiVariant;
+  const resolvedEmphasis = emphasis ?? DEFAULT_EMPHASIS_BY_VARIANT[baseVariant];
+
+  if (resolvedEmphasis === 'inverse') {
+    return {
+      styleVariant: 'inverse',
+      tone: normalizedTone,
+      emphasis: resolvedEmphasis,
+      publicVariant: baseVariant,
+    };
+  }
+  if (
+    (baseVariant === 'primary' &&
+      (resolvedEmphasis === 'subtle' || resolvedEmphasis === 'muted')) ||
+    (baseVariant === 'secondary' && resolvedEmphasis === 'strong')
+  ) {
+    return {
+      styleVariant: baseVariant === 'primary' ? 'secondary' : 'primary',
+      tone: normalizedTone,
+      emphasis: resolvedEmphasis,
+      publicVariant: baseVariant,
+    };
+  }
+
+  return {
+    styleVariant: baseVariant,
+    tone: normalizedTone,
+    emphasis: resolvedEmphasis,
+    publicVariant: baseVariant,
+  };
+}
+
+function badgeToneClasses(
+  styleVariant: BadgeStyleVariant,
+  tone: BadgeTone
+): string {
+  if (styleVariant === 'inverse') return BADGE_INVERSE;
+  if (styleVariant === 'primary') return BADGE_PRIMARY[tone];
+  if (styleVariant === 'secondary') return BADGE_SECONDARY[tone];
+  if (styleVariant === 'outline') return BADGE_OUTLINE[tone];
+  return BADGE_GHOST[tone];
+}
+
+export type BadgeSize = 'xs' | 'default' | 'sm';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: UiVariant | BadgeLegacyVariant;
+  emphasis?: UiEmphasis;
+  tone?: UiToneInput;
+  size?: BadgeSize;
+}
+
+function Badge({
+  className,
+  variant,
+  emphasis,
+  tone,
+  size = 'default',
+  ...props
+}: BadgeProps) {
+  const resolved = resolveBadgeVisual(variant, tone, emphasis);
   return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    <div
+      data-variant={resolved.publicVariant}
+      data-tone={resolved.tone}
+      data-emphasis={resolved.emphasis}
+      data-size={size === 'default' ? undefined : size}
+      className={cn(
+        badgeBase({ size }),
+        badgeToneClasses(resolved.styleVariant, resolved.tone),
+        className
+      )}
+      {...props}
+    />
   );
 }
 
-export { Badge, badgeVariants };
+export { Badge, badgeBase as badgeVariants };
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index e0175999a..a9325b7fc 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -17,64 +17,568 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import {
+  DEFAULT_EMPHASIS_BY_VARIANT,
+  normalizeUiTone,
+  type UiEmphasis,
+  type UiTone,
+  type UiToneInput,
+  type UiVariant,
+} from './semanticProps';
+import { buttonTokenAliases, mergeAliasStyles } from './tokenAliases';
+
+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';
+
+/** Semantic tone; use `neutral` (preferred) instead of the legacy `default`. */
+export type ButtonTone = UiTone;
+export type ButtonToneInput = UiToneInput;
+export type ButtonEmphasis = UiEmphasis;
+
+/** Visual chrome style axis. */
+export type ButtonVariant = UiVariant;
+type ButtonStyleVariant = UiVariant | 'inverse';
+
+/**
+ * @deprecated Map to `variant` + `tone` (+ optional `emphasis`) instead:
+ * - success → variant="primary" tone="success"
+ * - warning → variant="primary" tone="warning"
+ * - caution → variant="primary" tone="error"
+ * - information → variant="primary" tone="information"
+ * - inverse → variant="primary" emphasis="inverse"
+ */
+export type ButtonLegacyVariant =
+  | 'inverse'
+  | 'success'
+  | 'warning'
+  | 'caution'
+  | 'information';
+
+const LEGACY_VARIANT_TO_TONE: Record<
+  Exclude<ButtonLegacyVariant, 'inverse'>,
+  { variant: ButtonVariant; tone: ButtonTone }
+> = {
+  success: { variant: 'primary', tone: 'success' },
+  warning: { variant: 'primary', tone: 'warning' },
+  caution: { variant: 'primary', tone: 'error' },
+  information: { variant: 'primary', tone: 'information' },
+};
+
+type ButtonToneForStyles = 'default' | Exclude<ButtonTone, 'neutral'>;
+
+function toStyleTone(tone: ButtonTone): ButtonToneForStyles {
+  return tone === 'neutral' ? 'default' : tone;
+}
+
+function resolveVariantToneAndEmphasis(
+  variant: ButtonVariant | ButtonLegacyVariant | undefined,
+  tone: ButtonToneInput | undefined,
+  emphasis: ButtonEmphasis | undefined
+): {
+  variant: ButtonVariant;
+  styleVariant: ButtonStyleVariant;
+  tone: ButtonTone;
+  styleTone: ButtonToneForStyles;
+  emphasis: ButtonEmphasis;
+} {
+  const v = variant ?? 'primary';
+
+  // Deprecated one-word variants remain valid while we move call sites.
+  if (v === 'inverse') {
+    const normalizedTone = normalizeUiTone(tone);
+    return {
+      variant: 'primary',
+      styleVariant: 'inverse',
+      tone: normalizedTone,
+      styleTone: toStyleTone(normalizedTone),
+      emphasis: 'inverse',
+    };
+  }
+
+  if (
+    v === 'success' ||
+    v === 'warning' ||
+    v === 'caution' ||
+    v === 'information'
+  ) {
+    const mapped = LEGACY_VARIANT_TO_TONE[v];
+    const normalizedTone = normalizeUiTone(tone ?? mapped.tone);
+    const resolvedEmphasis = emphasis ?? DEFAULT_EMPHASIS_BY_VARIANT.primary;
+    return {
+      variant: mapped.variant,
+      styleVariant:
+        resolvedEmphasis === 'inverse'
+          ? 'inverse'
+          : resolvedEmphasis === 'subtle' || resolvedEmphasis === 'muted'
+            ? 'secondary'
+            : 'primary',
+      tone: normalizedTone,
+      styleTone: toStyleTone(normalizedTone),
+      emphasis: resolvedEmphasis,
+    };
+  }
+
+  const baseVariant = v as ButtonVariant;
+  const normalizedTone = normalizeUiTone(tone);
+  const resolvedEmphasis = emphasis ?? DEFAULT_EMPHASIS_BY_VARIANT[baseVariant];
+
+  if (resolvedEmphasis === 'inverse') {
+    return {
+      variant: baseVariant,
+      styleVariant: 'inverse',
+      tone: normalizedTone,
+      styleTone: toStyleTone(normalizedTone),
+      emphasis: resolvedEmphasis,
+    };
+  }
+
+  if (baseVariant === 'primary') {
+    return {
+      variant: baseVariant,
+      styleVariant:
+        resolvedEmphasis === 'subtle' || resolvedEmphasis === 'muted'
+          ? 'secondary'
+          : 'primary',
+      tone: normalizedTone,
+      styleTone: toStyleTone(normalizedTone),
+      emphasis: resolvedEmphasis,
+    };
+  }
+
+  if (baseVariant === 'secondary') {
+    return {
+      variant: baseVariant,
+      styleVariant: resolvedEmphasis === 'strong' ? 'primary' : 'secondary',
+      tone: normalizedTone,
+      styleTone: toStyleTone(normalizedTone),
+      emphasis: resolvedEmphasis,
+    };
+  }
+
+  return {
+    variant: baseVariant,
+    styleVariant: baseVariant,
+    tone: normalizedTone,
+    styleTone: toStyleTone(normalizedTone),
+    emphasis: resolvedEmphasis,
+  };
+}
+
+/** 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 FOCUS_RING =
+  'focus-visible:ring-2 focus-visible:ring-gray-4 focus-visible:ring-offset-2';
+
+/** Filled styles: full background; border matches background. */
+const TONE_PRIMARY: Record<ButtonToneForStyles, string> = {
+  default: [
+    'bg-ds-bg-brand-default-default border-ds-bg-brand-default-default !text-ds-text-brand-inverse-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-brand-default-hover hover:border-ds-bg-brand-default-hover',
+    'active:bg-ds-bg-brand-default-active active:border-ds-bg-brand-default-active',
+    `focus:bg-ds-bg-brand-default-hover focus:border-ds-bg-brand-default-hover ${FOCUS_RING}`,
+  ].join(' '),
+  success: [
+    'bg-ds-bg-success-default-default border-ds-bg-success-default-default !text-ds-text-success-inverse-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-success-default-hover hover:border-ds-bg-success-default-hover',
+    'active:bg-ds-bg-success-default-active active:border-ds-bg-success-default-active',
+    `focus:bg-ds-bg-success-default-hover focus:border-ds-bg-success-default-hover ${FOCUS_RING}`,
+  ].join(' '),
+  error: [
+    'bg-ds-bg-error-default-default border-ds-bg-error-default-default !text-ds-text-error-inverse-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-error-default-hover hover:border-ds-bg-error-default-hover',
+    'active:bg-ds-bg-error-default-active active:border-ds-bg-error-default-active',
+    `focus:bg-ds-bg-error-default-hover focus:border-ds-bg-error-default-hover ${FOCUS_RING}`,
+  ].join(' '),
+  information: [
+    'bg-ds-bg-information-default-default border-ds-bg-information-default-default !text-ds-text-information-inverse-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-information-default-hover hover:border-ds-bg-information-default-hover',
+    'active:bg-ds-bg-information-default-active active:border-ds-bg-information-default-active',
+    `focus:bg-ds-bg-information-default-hover focus:border-ds-bg-information-default-hover ${FOCUS_RING}`,
+  ].join(' '),
+  warning: [
+    'bg-ds-bg-warning-default-default border-ds-bg-warning-default-default !text-ds-text-warning-inverse-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-warning-default-hover hover:border-ds-bg-warning-default-hover',
+    'active:bg-ds-bg-warning-default-active active:border-ds-bg-warning-default-active',
+    `focus:bg-ds-bg-warning-default-hover focus:border-ds-bg-warning-default-hover ${FOCUS_RING}`,
+  ].join(' '),
+};
+
+/** Lighter fill than primary; border matches background. */
+const TONE_SECONDARY: Record<ButtonToneForStyles, string> = {
+  default: [
+    'bg-ds-bg-neutral-subtle-default border-ds-bg-neutral-subtle-default !text-ds-text-neutral-default-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-neutral-subtle-hover hover:border-ds-bg-neutral-subtle-hover',
+    'active:bg-ds-bg-neutral-subtle-active active:border-ds-bg-neutral-subtle-active',
+    `focus:bg-ds-bg-neutral-subtle-hover focus:border-ds-bg-neutral-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+  success: [
+    'bg-ds-bg-success-subtle-default border-ds-bg-success-subtle-default !text-ds-text-neutral-inverse-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-status-completed-subtle-hover hover:border-ds-bg-status-completed-subtle-hover',
+    'active:bg-ds-bg-status-completed-subtle-active active:border-ds-bg-status-completed-subtle-active',
+    `focus:bg-ds-bg-status-completed-subtle-hover focus:border-ds-bg-status-completed-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+  error: [
+    'bg-ds-bg-status-error-subtle-default border-ds-bg-status-error-subtle-default !text-ds-text-status-error-strong-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-status-error-subtle-hover hover:border-ds-bg-status-error-subtle-hover',
+    'active:bg-ds-bg-status-error-subtle-active active:border-ds-bg-status-error-subtle-active',
+    `focus:bg-ds-bg-status-error-subtle-hover focus:border-ds-bg-status-error-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+  information: [
+    'bg-ds-bg-status-splitting-subtle-default border-ds-bg-status-splitting-subtle-default !text-ds-text-status-splitting-strong-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-status-splitting-subtle-hover hover:border-ds-bg-status-splitting-subtle-hover',
+    'active:bg-ds-bg-status-splitting-subtle-active active:border-ds-bg-status-splitting-subtle-active',
+    `focus:bg-ds-bg-status-splitting-subtle-hover focus:border-ds-bg-status-splitting-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+  warning: [
+    'bg-ds-bg-status-pending-subtle-default border-ds-bg-status-pending-subtle-default !text-ds-text-status-pending-strong-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-status-pending-subtle-hover hover:border-ds-bg-status-pending-subtle-hover',
+    'active:bg-ds-bg-status-pending-subtle-active active:border-ds-bg-status-pending-subtle-active',
+    `focus:bg-ds-bg-status-pending-subtle-hover focus:border-ds-bg-status-pending-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+};
+
+/** Border-only chrome; transparent fill. */
+const TONE_OUTLINE: Record<ButtonToneForStyles, string> = {
+  default: [
+    'bg-transparent border-ds-border-neutral-strong-default !text-ds-text-neutral-default-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-neutral-subtle-hover hover:border-ds-border-neutral-strong-hover',
+    'active:bg-ds-bg-neutral-default-active active:border-ds-border-neutral-strong-default',
+    `focus:bg-ds-bg-neutral-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+  success: [
+    'bg-transparent border-ds-border-status-completed-default-default !text-ds-text-status-completed-strong-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-status-completed-subtle-hover hover:border-ds-border-status-completed-default-hover',
+    'active:bg-ds-bg-status-completed-subtle-active',
+    `focus:bg-ds-bg-status-completed-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+  error: [
+    'bg-transparent border-ds-border-status-error-default-default !text-ds-text-status-error-strong-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-status-error-subtle-hover hover:border-ds-border-status-error-default-hover',
+    'active:bg-ds-bg-status-error-subtle-active',
+    `focus:bg-ds-bg-status-error-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+  information: [
+    'bg-transparent border-ds-border-status-splitting-default-default !text-ds-text-status-splitting-strong-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-status-splitting-subtle-hover hover:border-ds-border-status-splitting-default-hover',
+    'active:bg-ds-bg-status-splitting-subtle-active',
+    `focus:bg-ds-bg-status-splitting-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+  warning: [
+    'bg-transparent border-ds-border-status-pending-default-default !text-ds-text-status-pending-strong-default',
+    'shadow-button-shadow',
+    'hover:bg-ds-bg-status-pending-subtle-hover hover:border-ds-border-status-pending-default-hover',
+    'active:bg-ds-bg-status-pending-subtle-active',
+    `focus:bg-ds-bg-status-pending-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+};
+
+/** No fill; border transparent but still occupies layout as a border. */
+const TONE_GHOST: Record<ButtonToneForStyles, string> = {
+  default: [
+    'bg-transparent border-transparent !text-ds-text-neutral-default-default',
+    'hover:bg-ds-bg-neutral-default-hover active:bg-ds-bg-neutral-default-active',
+    `focus:bg-ds-bg-neutral-default-hover ${FOCUS_RING}`,
+  ].join(' '),
+  success: [
+    'bg-transparent border-transparent !text-ds-text-status-completed-strong-default',
+    'hover:bg-ds-bg-status-completed-subtle-hover active:bg-ds-bg-status-completed-subtle-active',
+    `focus:bg-ds-bg-status-completed-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+  error: [
+    'bg-transparent border-transparent !text-ds-text-status-error-strong-default',
+    'hover:bg-ds-bg-status-error-subtle-hover active:bg-ds-bg-status-error-subtle-active',
+    `focus:bg-ds-bg-status-error-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+  information: [
+    'bg-transparent border-transparent !text-ds-text-status-splitting-strong-default',
+    'hover:bg-ds-bg-status-splitting-subtle-hover active:bg-ds-bg-status-splitting-subtle-active',
+    `focus:bg-ds-bg-status-splitting-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+  warning: [
+    'bg-transparent border-transparent !text-ds-text-status-pending-strong-default',
+    'hover:bg-ds-bg-status-pending-subtle-hover active:bg-ds-bg-status-pending-subtle-active',
+    `focus:bg-ds-bg-status-pending-subtle-hover ${FOCUS_RING}`,
+  ].join(' '),
+};
+
+/**
+ * Canvas-colored control: `bg.neutral.subtle` tracks the theme background seed;
+ * text uses ink (`text.neutral.default`). Border matches the fill. Same for every `tone`.
+ */
+const INVERSE = [
+  'bg-ds-bg-neutral-subtle-default border-ds-bg-neutral-subtle-default !text-ds-text-neutral-default-default',
+  'shadow-button-shadow',
+  'hover:bg-ds-bg-neutral-subtle-selected hover:border-ds-bg-neutral-subtle-selected',
+  'active:bg-ds-bg-neutral-default-active active:border-ds-bg-neutral-default-active',
+  `focus:bg-ds-bg-neutral-subtle-selected focus:border-ds-bg-neutral-subtle-selected ${FOCUS_RING}`,
+].join(' ');
 
 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 border border-solid transition-all duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:!text-inherit outline-none focus-visible:border-ds-border-brand-default-focus focus-visible:ring-ds-ring-brand-default-focus/50 focus-visible:ring-[3px] aria-invalid:ring-ds-ring-error-default-default/20 aria-invalid:border-ds-border-status-error-default-default shrink-0 cursor-pointer',
   {
     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 ',
-        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:
-          'bg-button-tertiery-fill-default !text-button-tertiery-text-default font-bold rounded-xs shadow-button-shadow hover:bg-button-tertiery-fill-hover active:bg-button-tertiery-fill-active focus:bg-button-tertiery-hover focus:ring-2 focus:ring-gray-4 focus:ring-offset-2 cursor-pointer',
-        ghost:
-          'bg-button-transparent-fill-default !text-button-transparent-text-default font-bold rounded-xs hover:bg-button-transparent-fill-hover active:bg-button-transparent-fill-active focus:bg-button-transparent-fill-hover focus:ring-2 focus:ring-gray-4 focus:ring-offset-2 cursor-pointer',
-        success:
-          'bg-button-fill-success !text-button-fill-success-foreground font-bold rounded-xs shadow-button-shadow hover:bg-fill-fill-success-hover active:bg-fill-fill-success-active focus:bg-fill-fill-success-hover focus:ring-2 focus:ring-gray-4 focus:ring-offset-2 cursor-pointer',
-        cuation:
-          'bg-button-fill-cuation !text-button-fill-cuation-foreground font-bold rounded-xs shadow-button-shadow focus:ring-2 focus:ring-gray-4 focus:ring-offset-2 cursor-pointer',
-        information:
-          'bg-button-fill-information !text-button-fill-information-foreground font-bold rounded-xs shadow-button-shadow focus:ring-2 focus:ring-gray-4 focus:ring-offset-2 cursor-pointer',
-        warning:
-          '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',
+        primary: '',
+        secondary: '',
+        outline: '',
+        ghost: '',
+        inverse: '',
+      },
+      tone: {
+        default: '',
+        success: '',
+        error: '',
+        information: '',
+        warning: '',
       },
       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: [
+      { variant: 'primary', tone: 'default', class: TONE_PRIMARY.default },
+      { variant: 'primary', tone: 'success', class: TONE_PRIMARY.success },
+      { variant: 'primary', tone: 'error', class: TONE_PRIMARY.error },
+      {
+        variant: 'primary',
+        tone: 'information',
+        class: TONE_PRIMARY.information,
+      },
+      { variant: 'primary', tone: 'warning', class: TONE_PRIMARY.warning },
+
+      { variant: 'secondary', tone: 'default', class: TONE_SECONDARY.default },
+      { variant: 'secondary', tone: 'success', class: TONE_SECONDARY.success },
+      { variant: 'secondary', tone: 'error', class: TONE_SECONDARY.error },
+      {
+        variant: 'secondary',
+        tone: 'information',
+        class: TONE_SECONDARY.information,
+      },
+      { variant: 'secondary', tone: 'warning', class: TONE_SECONDARY.warning },
+
+      { variant: 'outline', tone: 'default', class: TONE_OUTLINE.default },
+      { variant: 'outline', tone: 'success', class: TONE_OUTLINE.success },
+      { variant: 'outline', tone: 'error', class: TONE_OUTLINE.error },
+      {
+        variant: 'outline',
+        tone: 'information',
+        class: TONE_OUTLINE.information,
+      },
+      { variant: 'outline', tone: 'warning', class: TONE_OUTLINE.warning },
+
+      { variant: 'ghost', tone: 'default', class: TONE_GHOST.default },
+      { variant: 'ghost', tone: 'success', class: TONE_GHOST.success },
+      { variant: 'ghost', tone: 'error', class: TONE_GHOST.error },
+      { variant: 'ghost', tone: 'information', class: TONE_GHOST.information },
+      { variant: 'ghost', tone: 'warning', class: TONE_GHOST.warning },
+
+      { variant: 'inverse', tone: 'default', class: INVERSE },
+      { variant: 'inverse', tone: 'success', class: INVERSE },
+      { variant: 'inverse', tone: 'error', class: INVERSE },
+      { variant: 'inverse', tone: 'information', class: INVERSE },
+      { variant: 'inverse', tone: 'warning', class: INVERSE },
+      {
+        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',
+      tone: 'default',
       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';
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
-      {...props}
-    >
-      {children}
-      {/* {variant === "primary" && <div />} */}
-    </Comp>
-  );
-});
+export type ButtonProps = React.ComponentProps<'button'> &
+  Omit<
+    VariantProps<typeof buttonVariants>,
+    'layout' | 'size' | 'variant' | 'tone'
+  > & {
+    asChild?: boolean;
+    /** Component chrome pattern. */
+    variant?: ButtonVariant | ButtonLegacyVariant;
+    /** Visual intensity axis. `inverse` is the replacement for legacy `variant="inverse"`. */
+    emphasis?: ButtonEmphasis;
+    /** Semantic palette. Prefer `neutral` over legacy `default`. */
+    tone?: ButtonToneInput;
+    /** 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';
+  };
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant: variantProp,
+      emphasis: emphasisProp,
+      tone: toneProp,
+      size: sizeProp = 'md',
+      buttonContent,
+      textWeight,
+      buttonRadius,
+      asChild = false,
+      children,
+      style,
+      ...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';
+
+    const {
+      variant: resolvedVariant,
+      styleVariant,
+      tone: resolvedTone,
+      styleTone,
+      emphasis: resolvedEmphasis,
+    } = resolveVariantToneAndEmphasis(variantProp, toneProp, emphasisProp);
+
+    return (
+      <Comp
+        data-slot="button"
+        data-variant={resolvedVariant}
+        data-tone={resolvedTone}
+        data-emphasis={resolvedEmphasis}
+        className={cn(
+          buttonVariants({
+            variant: styleVariant,
+            tone: styleTone,
+            size: resolvedSize,
+            layout: resolvedLayout,
+          }),
+          textWeight ? TEXT_WEIGHT_CLASSES[textWeight] : null,
+          buttonRadius ? RADIUS_CLASSES[buttonRadius] : null,
+          className
+        )}
+        style={mergeAliasStyles(buttonTokenAliases, style)}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  }
+);
 
 Button.displayName = 'Button';
 
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 4d4d83527..9941478ca 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -34,7 +34,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    className={cn('space-y-1.5 p-6 flex flex-col', className)}
     {...props}
   />
 ));
@@ -46,7 +46,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('font-semibold leading-none tracking-tight', className)}
+    className={cn('font-semibold tracking-tight leading-none', className)}
     {...props}
   />
 ));
@@ -58,7 +58,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn('text-ds-text-neutral-muted-default text-sm', className)}
     {...props}
   />
 ));
@@ -78,7 +78,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('flex items-center p-6 pt-0', className)}
+    className={cn('p-6 pt-0 flex items-center', className)}
     {...props}
   />
 ));
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/checkbox.tsx b/src/components/ui/checkbox.tsx
index 7c8a78ba0..3b4244233 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -17,23 +17,34 @@ import { Check } from 'lucide-react';
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import { checkboxTokenAliases, mergeAliasStyles } from './tokenAliases';
+
+export type CheckboxProps = React.ComponentPropsWithoutRef<
+  typeof CheckboxPrimitives.Root
+> & {
+  iconClassName?: string;
+};
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitives.Root>
->(({ className, ...props }, ref) => (
+  CheckboxProps
+>(({ className, style, iconClassName, ...props }, ref) => (
   <CheckboxPrimitives.Root
     ref={ref}
     className={cn(
-      'focus-visible:ring-ring peer h-4 w-4 shrink-0 rounded border border-solid border-input-border-default bg-input-bg-default transition-colors hover:border-input-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-switch-on-fill-track-fill data-[state=checked]:bg-switch-on-fill-track-fill data-[state=checked]:text-switch-on-fill-thumb-fill',
+      'group/checkbox focus-visible:ring-ds-ring-brand-default-focus peer h-4 w-4 rounded border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default hover:border-ds-border-neutral-strong-default data-[state=checked]:border-ds-border-status-completed-default-default data-[state=checked]:bg-ds-bg-success-default-default shrink-0 border border-solid transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
       className
     )}
+    style={mergeAliasStyles(checkboxTokenAliases, style)}
     {...props}
   >
-    <CheckboxPrimitives.Indicator
-      className={cn('flex items-center justify-center text-current')}
-    >
-      <Check className="h-3.5 w-3.5" />
+    <CheckboxPrimitives.Indicator className="flex items-center justify-center">
+      <Check
+        className={cn(
+          'h-3.5 w-3.5 group-data-[state=checked]/checkbox:text-ds-text-brand-inverse-default shrink-0',
+          iconClassName
+        )}
+      />
     </CheckboxPrimitives.Indicator>
   </CheckboxPrimitives.Root>
 ));
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index a828027fb..4a1099d6e 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-ds-text-neutral-default-default rounded-md bg-ds-bg-neutral-inverse-default flex h-full w-full flex-col overflow-hidden',
       className
     )}
     {...props}
@@ -35,11 +35,34 @@ 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-ds-bg-neutral-inverse-default p-0 overflow-hidden',
+          contentClassName
+        )}
+        overlayClassName={overlayClassName}
+      >
+        <Command
+          className={cn(
+            '[&_[cmdk-group-heading]]:text-ds-text-neutral-muted-default [&_[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 +75,14 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div
-    className="flex items-center border-b px-3"
+    className="border-ds-border-neutral-default-default 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-ds-text-neutral-muted-default 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 +98,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 +111,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 +125,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-ds-text-neutral-default-default [&_[cmdk-group-heading]]:text-ds-text-neutral-muted-default 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}
@@ -117,7 +140,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn('bg-border -mx-1 h-px', className)}
+    className={cn('-mx-1 bg-ds-border-neutral-default-default h-px', className)}
     {...props}
   />
 ));
@@ -130,7 +153,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-ds-bg-neutral-default-hover data-[selected=true]:text-ds-text-neutral-default-default gap-2 rounded-sm px-2 py-1.5 text-sm hover:border-ds-border-status-completed-default-focus [&_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 +169,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
+        'text-ds-text-neutral-muted-default text-xs tracking-widest ml-auto',
         className
       )}
       {...props}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index d6267f997..0b7bb5cca 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',
+      '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 bg-transparent',
       className
     )}
     {...props}
@@ -46,11 +46,17 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-export type DialogOverlayVariant = 'default' | 'dark';
+/**
+ * - `default` — transparent overlay (backdrop blur only).
+ * - `light` — pure white @ 30% opacity scrim.
+ * - `dark` — pure black @ 30% opacity scrim.
+ * - `dimmed` — `--dialog-overlay-scrim` from the token engine (black ~30% when app mode is light, white ~30% when dark; ThemeProvider reapplies vars — no Tailwind `dark:`).
+ */
+export type DialogOverlayVariant = 'default' | 'light' | 'dark' | 'dimmed';
 
 // Size variants for dialog content
 const dialogContentVariants = cva(
-  'fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-0 border border-solid border-popup-border bg-popup-bg shadow-perfect duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl max-h-[90vh] flex flex-col overflow-hidden',
+  'fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-0 border border-solid border-ds-border-neutral-default-default bg-ds-bg-neutral-subtle-default shadow-perfect duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl max-h-[90vh] flex flex-col overflow-hidden',
   {
     variants: {
       size: {
@@ -74,8 +80,10 @@ interface DialogContentProps
   closeButtonClassName?: string;
   closeButtonIcon?: React.ReactNode;
   onClose?: () => void;
-  /** Overlay behind the dialog: 'default' (transparent) or 'dark' (black overlay) */
+  /** Overlay scrim: see {@link DialogOverlayVariant}. */
   overlayVariant?: DialogOverlayVariant;
+  /** Merged onto the overlay (e.g. `backdrop-blur-none` to disable default blur) */
+  overlayClassName?: string;
 }
 
 const DialogContent = React.forwardRef<
@@ -92,24 +100,25 @@ const DialogContent = React.forwardRef<
       closeButtonIcon,
       onClose,
       overlayVariant = 'default',
+      overlayClassName,
       ...props
     },
     ref
   ) => (
     <DialogPortal>
       <DialogOverlay
-        className={overlayVariant === 'dark' ? 'bg-black/40' : undefined}
-        style={
-          overlayVariant === 'dark'
-            ? { backgroundColor: 'rgba(0, 0, 0, 0.4)' }
-            : undefined
-        }
+        className={cn(
+          overlayVariant === 'light' && 'bg-dialog-overlay-light',
+          overlayVariant === 'dark' && 'bg-dialog-overlay-dark',
+          overlayVariant === 'dimmed' && 'bg-dialog-overlay-scrim',
+          overlayClassName
+        )}
       />
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
           dialogContentVariants({ size }),
-          overlayVariant === 'dark' && 'z-[51]',
+          overlayVariant !== 'default' && 'z-[51]',
           className
         )}
         {...props}
@@ -119,9 +128,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,40 +175,41 @@ 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-ds-bg-neutral-strong-default 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" />
+            <ChevronLeft className="h-4 w-4 text-ds-icon-neutral-default-default" />
           </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-ds-text-neutral-default-default my-[1px]">
                   {title}
                 </span>
               </DialogPrimitive.Title>
               {showTooltip && tooltip && (
                 <TooltipSimple content={tooltip}>
-                  <AlertCircle className="h-4 w-4 text-icon-primary" />
+                  <AlertCircle className="h-4 w-4 text-ds-icon-neutral-default-default" />
                 </TooltipSimple>
               )}
             </div>
           )}
           {subtitle && (
             <DialogPrimitive.Description asChild>
-              <span className="mt-1 text-label-sm font-extralight text-text-label">
+              <span className="mt-1 text-label-sm font-extralight text-ds-text-neutral-muted-default">
                 {subtitle}
               </span>
             </DialogPrimitive.Description>
@@ -216,7 +227,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';
 
@@ -234,7 +245,7 @@ interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
     | 'outline'
     | 'ghost'
     | 'success'
-    | 'cuation'
+    | 'caution'
     | 'information'
     | 'warning';
   cancelButtonVariant?:
@@ -243,7 +254,7 @@ interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
     | 'outline'
     | 'ghost'
     | 'success'
-    | 'cuation'
+    | 'caution'
     | 'information'
     | 'warning';
   confirmButtonDisabled?: boolean;
@@ -328,9 +339,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-ds-border-neutral-default-default border-x-0 border-t-[0.5px] border-b-0 border-solid',
           className
         )}
         {...props}
@@ -369,7 +380,10 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn('text-body-sm font-bold text-text-heading', className)}
+    className={cn(
+      'text-body-sm font-bold text-ds-text-neutral-default-default',
+      className
+    )}
     {...props}
   />
 ));
@@ -382,7 +396,10 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-label-sm text-text-label', className)}
+    className={cn(
+      'text-label-sm text-ds-text-neutral-muted-default',
+      className
+    )}
     {...props}
   />
 ));
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 6ae777ea4..2b398599d 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-xl px-2 py-1.5 text-sm hover:bg-ds-bg-neutral-subtle-hover focus:bg-ds-bg-neutral-subtle-hover data-[state=open]:bg-ds-bg-neutral-subtle-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-ds-text-neutral-default-default rounded-xl border-ds-border-neutral-subtle-default bg-ds-bg-neutral-subtle-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,21 +71,17 @@ 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-ds-text-neutral-default-default rounded-xl border-ds-border-neutral-subtle-default bg-ds-bg-neutral-subtle-default p-xs shadow-md z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-x-hidden overflow-y-auto border border-solid',
+        '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={style}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
@@ -101,7 +97,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-ds-bg-neutral-default-hover focus:text-ds-text-neutral-default-default gap-2 rounded-xl px-2 py-1.5 text-sm hover:bg-ds-bg-neutral-default-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 +113,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-ds-bg-neutral-default-hover focus:text-ds-text-neutral-default-default 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 +137,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-ds-bg-neutral-default-hover focus:text-ds-text-neutral-default-default 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>
@@ -180,7 +176,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    className={cn('bg-ds-bg-neutral-muted-default -mx-1 my-1 h-px', className)}
     {...props}
   />
 ));
@@ -192,7 +188,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/formFieldSurface.ts b/src/components/ui/formFieldSurface.ts
new file mode 100644
index 000000000..8abc5e0ad
--- /dev/null
+++ b/src/components/ui/formFieldSurface.ts
@@ -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. =========
+
+/**
+ * Shared height/typography and validation chrome for `Input`, `Textarea` (enhanced),
+ * `Select` trigger, and `InputSelect` — separate from `UiVariant` (buttons/tags).
+ */
+
+export type FormFieldSize = 'default' | 'sm';
+
+/** Same union as `Input` `state` (field wrapper, not `UiTone`). */
+export type FormFieldInputState =
+  | 'default'
+  | 'hover'
+  | 'input'
+  | 'error'
+  | 'success'
+  | 'disabled';
+
+export const formFieldSizeClasses: Record<FormFieldSize, string> = {
+  default: 'h-10 text-body-sm md:text-sm',
+  sm: 'h-8 text-body-sm',
+};
+
+/** Select trigger: same vertical rhythm, no `md:` breakpoint on body text. */
+export const formFieldSelectSizeClasses: Record<FormFieldSize, string> = {
+  default: 'h-10 text-body-sm',
+  sm: 'h-8 text-body-sm',
+};
+
+export const formFieldInputSelectSizeClasses: Record<FormFieldSize, string> = {
+  default: 'h-10 text-body-sm',
+  sm: 'h-8 text-body-sm',
+};
+
+export type TextareaFormFieldState =
+  | 'default'
+  | 'hover'
+  | 'input'
+  | 'error'
+  | 'success'
+  | 'disabled';
+
+export const formFieldTextareaSizeClasses: Record<FormFieldSize, string> = {
+  default: 'min-h-[60px] text-body-sm md:text-sm',
+  sm: 'min-h-[40px] text-body-sm',
+};
+
+export function formFieldInputStateClasses(
+  state: FormFieldInputState | undefined
+): {
+  container: string;
+  field: string;
+  input: string;
+  placeholder: string;
+} {
+  if (state === 'disabled') {
+    return {
+      container: 'opacity-50 cursor-not-allowed',
+      field:
+        'border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default',
+      input: 'text-ds-text-neutral-default-default',
+      placeholder: 'placeholder-input-label-default',
+    };
+  }
+  if (state === 'hover') {
+    return {
+      container: '',
+      field:
+        'border-ds-border-neutral-strong-default bg-ds-bg-neutral-subtle-default',
+      input: 'text-ds-text-neutral-default-default',
+      placeholder: 'placeholder-input-label-default',
+    };
+  }
+  if (state === 'input') {
+    return {
+      container: '',
+      field:
+        'border-ds-border-brand-default-focus bg-ds-bg-neutral-subtle-default',
+      input: 'text-ds-text-neutral-default-default',
+      placeholder: 'placeholder-input-label-default',
+    };
+  }
+  if (state === 'error') {
+    return {
+      container: '',
+      field:
+        'border-ds-border-status-error-default-default bg-ds-bg-neutral-default-default',
+      input: 'text-ds-text-neutral-default-default',
+      placeholder: 'placeholder-input-label-default',
+    };
+  }
+  if (state === 'success') {
+    return {
+      container: '',
+      field:
+        'border-ds-border-status-completed-default-default bg-ds-bg-status-completed-subtle-default',
+      input: 'text-ds-text-neutral-default-default',
+      placeholder: 'placeholder-input-label-default',
+    };
+  }
+  return {
+    container: '',
+    field:
+      'border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default',
+    input: 'text-ds-text-neutral-default-default',
+    placeholder: 'placeholder-input-label-default/10',
+  };
+}
+
+export function formFieldTextareaStateClasses(
+  state: TextareaFormFieldState | undefined
+): {
+  container: string;
+  field: string;
+  placeholder: string;
+} {
+  if (state === 'disabled') {
+    return {
+      container: 'opacity-50 cursor-not-allowed',
+      field:
+        'border-transparent bg-ds-bg-neutral-default-default text-ds-text-neutral-default-default',
+      placeholder: 'text-ds-text-neutral-muted-default',
+    };
+  }
+  if (state === 'hover') {
+    return {
+      container: '',
+      field:
+        'border-transparent bg-ds-bg-neutral-subtle-default text-ds-text-neutral-default-default',
+      placeholder: 'text-ds-text-neutral-muted-default',
+    };
+  }
+  if (state === 'input') {
+    return {
+      container: '',
+      field:
+        'border-transparent bg-ds-bg-neutral-subtle-default text-ds-text-neutral-default-default',
+      placeholder: 'text-ds-text-neutral-muted-default',
+    };
+  }
+  if (state === 'error') {
+    return {
+      container: '',
+      field:
+        'border-ds-border-status-error-default-default bg-ds-bg-neutral-default-default text-ds-text-neutral-default-default',
+      placeholder: 'text-ds-text-neutral-muted-default',
+    };
+  }
+  if (state === 'success') {
+    return {
+      container: '',
+      field:
+        'border-ds-border-status-completed-default-default bg-ds-bg-status-completed-subtle-default text-ds-text-neutral-default-default',
+      placeholder: 'text-ds-text-neutral-muted-default',
+    };
+  }
+  return {
+    container: '',
+    field:
+      'border-transparent bg-ds-bg-neutral-default-default text-ds-text-neutral-default-default',
+    placeholder: 'text-ds-text-neutral-muted-default/10',
+  };
+}
+
+export type FormFieldSelectValidation = 'error' | 'success';
+
+export function formFieldSelectTriggerState(
+  state: FormFieldSelectValidation | undefined,
+  disabled: boolean
+): {
+  wrapper: string;
+  trigger: string;
+  note: string;
+} {
+  if (disabled) {
+    return {
+      wrapper: 'opacity-50 cursor-not-allowed',
+      trigger: 'border-transparent',
+      note: 'text-ds-text-neutral-muted-default',
+    };
+  }
+  if (state === 'error') {
+    return {
+      wrapper: '',
+      trigger:
+        'border-ds-border-error-default-default bg-ds-bg-error-default-default',
+      note: 'text-ds-text-error-strong-default',
+    };
+  }
+  if (state === 'success') {
+    return {
+      wrapper: '',
+      trigger:
+        'border-ds-border-success-default-default bg-ds-bg-success-subtle-default',
+      note: 'text-ds-text-status-completed-strong-default',
+    };
+  }
+  return {
+    wrapper: '',
+    trigger: 'border-transparent',
+    note: 'text-ds-text-neutral-muted-default',
+  };
+}
+
+export function formFieldInputSelectState(
+  state: FormFieldSelectValidation | undefined,
+  disabled: boolean
+): {
+  wrapper: string;
+  container: string;
+  note: string;
+} {
+  if (disabled) {
+    return {
+      wrapper: 'opacity-50 cursor-not-allowed',
+      container: 'border-transparent bg-ds-bg-neutral-default-default',
+      note: 'text-ds-text-neutral-muted-default',
+    };
+  }
+  if (state === 'error') {
+    return {
+      wrapper: '',
+      container:
+        'border-ds-border-status-error-default-default bg-ds-bg-neutral-default-default',
+      note: 'text-ds-text-status-error-strong-default',
+    };
+  }
+  if (state === 'success') {
+    return {
+      wrapper: '',
+      container:
+        'border-ds-border-status-completed-default-default bg-ds-bg-status-completed-subtle-default',
+      note: 'text-ds-text-status-completed-strong-default',
+    };
+  }
+  return {
+    wrapper: '',
+    container: 'border-transparent bg-ds-bg-neutral-default-default',
+    note: 'text-ds-text-neutral-muted-default',
+  };
+}
+
+/**
+ * Note/helper line under a field: HTML `note` in Input/Textarea, plain text in Select.
+ */
+export function formFieldNoteTextClassName(
+  validation: 'error' | 'success' | 'default'
+): string {
+  if (validation === 'error') {
+    return 'text-ds-text-status-error-strong-default';
+  }
+  if (validation === 'success') {
+    return 'text-ds-text-status-completed-strong-default';
+  }
+  return 'text-ds-text-neutral-muted-default';
+}
diff --git a/src/components/ui/input-select.tsx b/src/components/ui/input-select.tsx
index d8fec3558..d6c3032ca 100644
--- a/src/components/ui/input-select.tsx
+++ b/src/components/ui/input-select.tsx
@@ -1,84 +1,69 @@
-import * as React from "react"
-import { Check, ChevronDown, CircleAlert } from "lucide-react"
-import { cn } from "@/lib/utils"
-import { TooltipSimple } from "@/components/ui/tooltip"
-
-export type InputSelectSize = "default" | "sm"
-export type InputSelectState = "error" | "success"
+// ========= 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 { Check, ChevronDown, CircleAlert } from 'lucide-react';
+import * as React from 'react';
+import {
+  formFieldInputSelectSizeClasses,
+  formFieldInputSelectState,
+} from './formFieldSurface';
+import { formControlTokenAliases } from './tokenAliases';
+
+export type InputSelectSize = 'default' | 'sm';
+export type InputSelectState = 'error' | 'success';
 
 type InputSelectOption = {
-  value: string
-  label: string
-}
+  value: string;
+  label: string;
+};
 
 type InputSelectProps = {
-  value: string
-  onChange: (value: string) => void
-  options: InputSelectOption[]
-  placeholder?: string
-  title?: string
-  tooltip?: string
-  note?: string
-  errorNote?: string
-  required?: boolean
-  disabled?: boolean
-  size?: InputSelectSize
-  state?: InputSelectState
-  leadingIcon?: React.ReactNode
-  className?: string
-  maxDropdownHeight?: number
+  value: string;
+  onChange: (value: string) => void;
+  options: InputSelectOption[];
+  placeholder?: string;
+  title?: string;
+  tooltip?: string;
+  note?: string;
+  errorNote?: string;
+  required?: boolean;
+  disabled?: boolean;
+  size?: InputSelectSize;
+  state?: InputSelectState;
+  leadingIcon?: React.ReactNode;
+  className?: string;
+  maxDropdownHeight?: number;
   /**
    * Called when an option is selected from the dropdown
    */
-  onOptionSelect?: (option: InputSelectOption) => void
+  onOptionSelect?: (option: InputSelectOption) => void;
   /**
    * Custom validation function for the input value
    * Returns true if valid, false if invalid
    * If returns false, component will show error state
    */
-  validateInput?: (value: string) => boolean
+  validateInput?: (value: string) => boolean;
   /**
    * Called when input loses focus or dropdown closes
    * Use this to transform/normalize the input value
    * Return the normalized value, or undefined to keep as-is
    * Return false to indicate validation failure (will show error state)
    */
-  onInputCommit?: (value: string) => string | false | void
-}
-
-const sizeClasses: Record<InputSelectSize, string> = {
-  default: "h-10 text-body-sm",
-  sm: "h-8 text-body-sm",
-}
-
-function resolveStateClasses(state: InputSelectState | undefined, disabled: boolean) {
-  if (disabled) {
-    return {
-      wrapper: "opacity-50 cursor-not-allowed",
-      container: "border-transparent bg-input-bg-default",
-      note: "text-text-label",
-    }
-  }
-  if (state === "error") {
-    return {
-      wrapper: "",
-      container: "border-input-border-cuation bg-input-bg-default",
-      note: "text-text-cuation",
-    }
-  }
-  if (state === "success") {
-    return {
-      wrapper: "",
-      container: "border-input-border-success bg-input-bg-confirm",
-      note: "text-text-success",
-    }
-  }
-  return {
-    wrapper: "",
-    container: "border-transparent bg-input-bg-default",
-    note: "text-text-label",
-  }
-}
+  onInputCommit?: (value: string) => string | false | void;
+};
 
 const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
   (
@@ -93,7 +78,7 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
       errorNote,
       required = false,
       disabled = false,
-      size = "default",
+      size = 'default',
       state,
       leadingIcon,
       className,
@@ -104,214 +89,226 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
     },
     ref
   ) => {
-    const [isOpen, setIsOpen] = React.useState(false)
+    const [isOpen, setIsOpen] = React.useState(false);
     const [inputValue, setInputValue] = React.useState(() => {
-      const option = options.find((opt) => opt.value === value)
-      return option ? option.label : value
-    })
-    const [hasError, setHasError] = React.useState(false)
-    const containerRef = React.useRef<HTMLDivElement>(null)
-    const inputRef = React.useRef<HTMLInputElement>(null)
-    const dropdownRef = React.useRef<HTMLDivElement>(null)
-    const isCommittingRef = React.useRef(false)
-    const optionSelectedRef = React.useRef(false)
-    const inputValueRef = React.useRef(inputValue)
+      const option = options.find((opt) => opt.value === value);
+      return option ? option.label : value;
+    });
+    const [hasError, setHasError] = React.useState(false);
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const dropdownRef = React.useRef<HTMLDivElement>(null);
+    const isCommittingRef = React.useRef(false);
+    const optionSelectedRef = React.useRef(false);
+    const inputValueRef = React.useRef(inputValue);
 
     // Merge refs
-    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)
+    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
 
     // Keep inputValueRef in sync with inputValue
     React.useEffect(() => {
-      inputValueRef.current = inputValue
-    }, [inputValue])
+      inputValueRef.current = inputValue;
+    }, [inputValue]);
 
     // Sync input value with external value
     React.useEffect(() => {
-      const option = options.find((opt) => opt.value === value)
-      setInputValue(option ? option.label : value)
-      setHasError(false) // Clear error when external value changes
-    }, [value, options])
+      const option = options.find((opt) => opt.value === value);
+      setInputValue(option ? option.label : value);
+      setHasError(false); // Clear error when external value changes
+    }, [value, options]);
 
     // Commit value function - validates and saves input
     const commitValue = React.useCallback(() => {
       // Skip commit if an option was just selected (it handles its own update)
       if (optionSelectedRef.current) {
-        optionSelectedRef.current = false
-        return
+        optionSelectedRef.current = false;
+        return;
       }
 
       // Prevent double commits
-      if (isCommittingRef.current) return
-      isCommittingRef.current = true
+      if (isCommittingRef.current) return;
+      isCommittingRef.current = true;
 
       // Use ref to get the latest inputValue (avoids stale closure issue)
-      const currentInputValue = inputValueRef.current
-      let finalValue = currentInputValue
+      const currentInputValue = inputValueRef.current;
+      let finalValue = currentInputValue;
 
       // Run custom commit handler if provided
       if (onInputCommit) {
-        const result = onInputCommit(currentInputValue)
+        const result = onInputCommit(currentInputValue);
         if (result === false) {
           // Validation failed - show error state
-          setHasError(true)
-          isCommittingRef.current = false
-          return
+          setHasError(true);
+          isCommittingRef.current = false;
+          return;
         }
-        if (typeof result === "string") {
-          finalValue = result
-          setInputValue(result)
+        if (typeof result === 'string') {
+          finalValue = result;
+          setInputValue(result);
         }
       }
 
       // Validate if validator is provided
       if (validateInput && !validateInput(finalValue)) {
-        setHasError(true)
-        isCommittingRef.current = false
-        return
+        setHasError(true);
+        isCommittingRef.current = false;
+        return;
       }
 
       // Validation passed - clear error and update value
-      setHasError(false)
+      setHasError(false);
       if (finalValue !== value) {
-        onChange(finalValue)
+        onChange(finalValue);
       }
 
-      isCommittingRef.current = false
-    }, [value, onInputCommit, validateInput, onChange])
+      isCommittingRef.current = false;
+    }, [value, onInputCommit, validateInput, onChange]);
 
     // Handle click outside to close dropdown
     React.useEffect(() => {
-      if (!isOpen) return
+      if (!isOpen) return;
 
       const handleClickOutside = (event: MouseEvent) => {
-        const target = event.target as Node
+        const target = event.target as Node;
         if (
           containerRef.current &&
           !containerRef.current.contains(target) &&
           dropdownRef.current &&
           !dropdownRef.current.contains(target)
         ) {
-          commitValue()
-          setIsOpen(false)
+          commitValue();
+          setIsOpen(false);
         }
-      }
+      };
 
       const handleEscape = (event: KeyboardEvent) => {
-        if (event.key === "Escape") {
-          setInputValue(value) // Reset to original value
-          setIsOpen(false)
-          inputRef.current?.blur()
+        if (event.key === 'Escape') {
+          setInputValue(value); // Reset to original value
+          setIsOpen(false);
+          inputRef.current?.blur();
         }
-      }
+      };
 
       // Use capture phase to handle events before they bubble
-      document.addEventListener("mousedown", handleClickOutside, true)
-      document.addEventListener("keydown", handleEscape, true)
+      document.addEventListener('mousedown', handleClickOutside, true);
+      document.addEventListener('keydown', handleEscape, true);
 
       return () => {
-        document.removeEventListener("mousedown", handleClickOutside, true)
-        document.removeEventListener("keydown", handleEscape, true)
-      }
-    }, [isOpen, value, commitValue])
+        document.removeEventListener('mousedown', handleClickOutside, true);
+        document.removeEventListener('keydown', handleEscape, true);
+      };
+    }, [isOpen, value, commitValue]);
 
     // Handle scroll within dropdown - prevent parent scroll only when necessary
-    const handleDropdownWheel = React.useCallback((e: React.WheelEvent<HTMLDivElement>) => {
-      const target = e.currentTarget
-      const { scrollTop, scrollHeight, clientHeight } = target
-      const hasScrollableContent = scrollHeight > clientHeight
-
-      if (!hasScrollableContent) {
-        // No scrollable content, prevent all scroll and stop propagation
-        e.preventDefault()
-        e.stopPropagation()
-        return
-      }
+    const handleDropdownWheel = React.useCallback(
+      (e: React.WheelEvent<HTMLDivElement>) => {
+        const target = e.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        const hasScrollableContent = scrollHeight > clientHeight;
+
+        if (!hasScrollableContent) {
+          // No scrollable content, prevent all scroll and stop propagation
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
 
-      const isAtTop = scrollTop <= 0
-      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1 // -1 for rounding
+        const isAtTop = scrollTop <= 0;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1; // -1 for rounding
 
-      // If at boundary and trying to scroll past it, prevent default to stop parent from scrolling
-      if ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0)) {
-        e.preventDefault()
-      }
+        // If at boundary and trying to scroll past it, prevent default to stop parent from scrolling
+        if ((isAtTop && e.deltaY < 0) || (isAtBottom && e.deltaY > 0)) {
+          e.preventDefault();
+        }
 
-      // Always stop propagation to prevent parent dialog from scrolling
-      e.stopPropagation()
-    }, [])
+        // Always stop propagation to prevent parent dialog from scrolling
+        e.stopPropagation();
+      },
+      []
+    );
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      setInputValue(e.target.value)
+      setInputValue(e.target.value);
       // Clear error when user starts typing again
       if (hasError) {
-        setHasError(false)
+        setHasError(false);
       }
-    }
+    };
 
     const handleInputFocus = () => {
       if (!disabled) {
-        setIsOpen(true)
+        setIsOpen(true);
       }
-    }
+    };
 
     const handleInputBlur = () => {
       // Use setTimeout to allow option clicks to process first
       // If user clicks an option, the option handler will update the value
       // If user clicks outside, we commit the current input value
       setTimeout(() => {
-        commitValue()
-        setIsOpen(false)
-      }, 150)
-    }
+        commitValue();
+        setIsOpen(false);
+      }, 150);
+    };
 
     const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === "Enter") {
-        e.preventDefault()
-        commitValue()
-        setIsOpen(false)
-        inputRef.current?.blur()
-      } else if (e.key === "ArrowDown" && !isOpen) {
-        e.preventDefault()
-        setIsOpen(true)
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        commitValue();
+        setIsOpen(false);
+        inputRef.current?.blur();
+      } else if (e.key === 'ArrowDown' && !isOpen) {
+        e.preventDefault();
+        setIsOpen(true);
       }
-    }
+    };
 
     const handleOptionClick = (option: InputSelectOption) => {
       // Mark that an option was selected so blur handler skips commit
-      optionSelectedRef.current = true
-      setInputValue(option.label)
-      inputValueRef.current = option.label // Update ref immediately
-      setHasError(false) // Clear error when selecting an option
-      onChange(option.value)
-      onOptionSelect?.(option)
-      setIsOpen(false)
-    }
+      optionSelectedRef.current = true;
+      setInputValue(option.label);
+      inputValueRef.current = option.label; // Update ref immediately
+      setHasError(false); // Clear error when selecting an option
+      onChange(option.value);
+      onOptionSelect?.(option);
+      setIsOpen(false);
+    };
 
     const handleContainerClick = () => {
       if (!disabled) {
-        inputRef.current?.focus()
-        setIsOpen(true)
+        inputRef.current?.focus();
+        setIsOpen(true);
       }
-    }
+    };
 
     // Use internal error state if no external state is provided
-    const effectiveState = hasError ? "error" : state
-    const stateCls = resolveStateClasses(effectiveState, disabled)
+    const effectiveState = hasError ? 'error' : state;
+    const stateCls = formFieldInputSelectState(effectiveState, disabled);
 
     // Determine which note to show
-    const displayNote = effectiveState === "error" && errorNote ? errorNote : note
+    const displayNote =
+      effectiveState === 'error' && errorNote ? errorNote : note;
 
     // Find the currently selected option
-    const selectedOption = options.find((opt) => opt.value === value)
+    const selectedOption = options.find((opt) => opt.value === value);
 
     return (
-      <div className={cn("w-full relative", stateCls.wrapper, className)}>
+      <div
+        className={cn('relative w-full', stateCls.wrapper, className)}
+        style={formControlTokenAliases}
+      >
         {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-ds-text-neutral-default-default flex items-center">
             <span>{title}</span>
-            {required && <span className="text-text-body">*</span>}
+            {required && (
+              <span className="text-ds-text-neutral-default-default">*</span>
+            )}
             {tooltip && (
               <TooltipSimple content={tooltip}>
-                <CircleAlert size={16} className="text-icon-primary" />
+                <CircleAlert
+                  size={16}
+                  className="text-ds-icon-neutral-default-default"
+                />
               </TooltipSimple>
             )}
           </div>
@@ -322,20 +319,22 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
           ref={containerRef}
           onClick={handleContainerClick}
           className={cn(
-            "relative flex w-full items-center rounded-lg border border-solid shadow-sm outline-none transition-all px-3 gap-2 text-text-body cursor-text",
-            sizeClasses[size],
+            'rounded-lg shadow-sm px-3 gap-2 text-ds-text-neutral-default-default relative flex w-full cursor-text items-center border border-solid transition-all outline-none',
+            formFieldInputSelectSizeClasses[size],
             stateCls.container,
             !disabled &&
-            state !== "error" &&
-            state !== "success" && [
-              "hover:bg-input-bg-hover hover:ring-1 hover:ring-input-border-hover hover:ring-offset-0",
-              isOpen &&
-              "bg-input-bg-input ring-1 ring-input-border-focus ring-offset-0",
-            ]
+              state !== 'error' &&
+              state !== 'success' && [
+                'hover:bg-ds-bg-neutral-default-hover hover:ring-ds-ring-neutral-strong-default hover:ring-1 hover:ring-offset-0',
+                isOpen &&
+                  'bg-ds-bg-neutral-strong-default ring-ds-ring-brand-default-focus ring-1 ring-offset-0',
+              ]
           )}
         >
           {leadingIcon && (
-            <span className="flex-shrink-0 h-4 w-4 text-icon-primary">{leadingIcon}</span>
+            <span className="h-4 w-4 text-ds-icon-neutral-default-default flex-shrink-0">
+              {leadingIcon}
+            </span>
           )}
           <input
             ref={inputRef}
@@ -347,12 +346,12 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
             onKeyDown={handleInputKeyDown}
             placeholder={placeholder}
             disabled={disabled}
-            className="flex-1 bg-transparent outline-none placeholder:text-text-label/20 min-w-0"
+            className="placeholder:text-ds-text-neutral-muted-default/20 min-w-0 flex-1 bg-transparent outline-none"
           />
           <ChevronDown
             className={cn(
-              "h-4 w-4 text-icon-primary flex-shrink-0 transition-transform",
-              isOpen && "rotate-180"
+              'h-4 w-4 text-ds-icon-neutral-default-default flex-shrink-0 transition-transform',
+              isOpen && 'rotate-180'
             )}
           />
         </div>
@@ -361,10 +360,10 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
         {isOpen && (
           <div
             ref={dropdownRef}
-            className="absolute left-0 right-0 top-full mt-1 z-50 bg-input-bg-default rounded-lg border border-solid border-transparent shadow-md overflow-hidden"
+            className="left-0 right-0 mt-1 bg-ds-bg-neutral-default-default rounded-lg shadow-md absolute top-full z-50 overflow-hidden border border-solid border-transparent"
           >
             <div
-              className="overflow-y-auto overflow-x-hidden p-1 overscroll-contain"
+              className="p-1 overflow-x-hidden overflow-y-auto overscroll-contain"
               style={{ maxHeight: maxDropdownHeight }}
               onWheel={handleDropdownWheel}
             >
@@ -373,14 +372,14 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
                   key={option.value}
                   onClick={() => handleOptionClick(option)}
                   className={cn(
-                    "relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-menutabs-fill-hover transition-colors",
+                    'rounded-lg py-1.5 pl-2 pr-8 text-sm hover:bg-ds-bg-neutral-default-hover relative flex w-full cursor-pointer items-center transition-colors outline-none select-none',
                     selectedOption?.value === option.value &&
-                    "bg-menutabs-fill-hover"
+                      'bg-ds-bg-neutral-default-hover'
                   )}
                 >
                   {option.label}
                   {selectedOption?.value === option.value && (
-                    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+                    <span className="right-2 h-3.5 w-3.5 absolute flex items-center justify-center">
                       <Check className="h-4 w-4" />
                     </span>
                   )}
@@ -391,13 +390,13 @@ const InputSelect = React.forwardRef<HTMLInputElement, InputSelectProps>(
         )}
 
         {displayNote && (
-          <div className={cn("mt-1 text-xs", stateCls.note)}>{displayNote}</div>
+          <div className={cn('mt-1 text-xs', stateCls.note)}>{displayNote}</div>
         )}
       </div>
-    )
+    );
   }
-)
+);
 
-InputSelect.displayName = "InputSelect"
+InputSelect.displayName = 'InputSelect';
 
-export { InputSelect, type InputSelectOption }
+export { InputSelect, type InputSelectOption };
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index e23e46faf..23fbbf9c5 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -17,6 +17,13 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { CircleAlert } from 'lucide-react';
 import { Button } from './button';
+import {
+  type FormFieldInputState,
+  formFieldInputStateClasses,
+  formFieldNoteTextClassName,
+  formFieldSizeClasses,
+} from './formFieldSurface';
+import { formControlTokenAliases } from './tokenAliases';
 import { TooltipSimple } from './tooltip';
 
 export type InputSize = 'default' | 'sm';
@@ -43,60 +50,6 @@ type BaseInputProps = Omit<React.ComponentProps<'input'>, 'size'> & {
   onEnter?: () => void;
 };
 
-const sizeClasses: Record<InputSize, string> = {
-  default: 'h-10 text-body-sm md:text-sm',
-  sm: 'h-8 text-body-sm',
-};
-
-function resolveStateClasses(state: InputState | undefined) {
-  if (state === 'disabled') {
-    return {
-      container: 'opacity-50 cursor-not-allowed',
-      field: 'border-input-border-default bg-input-bg-default',
-      input: 'text-text-heading',
-      placeholder: 'placeholder-input-label-default',
-    };
-  }
-  if (state === 'hover') {
-    return {
-      container: '',
-      field: 'border-input-border-hover bg-input-bg-default',
-      input: 'text-text-heading',
-      placeholder: 'placeholder-input-label-default',
-    };
-  }
-  if (state === 'input') {
-    return {
-      container: '',
-      field: 'border-input-border-focus bg-input-bg-input',
-      input: 'text-text-heading',
-      placeholder: 'placeholder-input-label-default',
-    };
-  }
-  if (state === 'error') {
-    return {
-      container: '',
-      field: 'border-input-border-cuation bg-input-bg-default',
-      input: 'text-text-heading',
-      placeholder: 'placeholder-input-label-default',
-    };
-  }
-  if (state === 'success') {
-    return {
-      container: '',
-      field: 'border-input-border-success bg-input-bg-confirm',
-      input: 'text-text-heading',
-      placeholder: 'placeholder-input-label-default',
-    };
-  }
-  return {
-    container: '',
-    field: 'border-input-border-default bg-input-bg-default',
-    input: 'text-text-heading',
-    placeholder: 'placeholder-input-label-default/10',
-  };
-}
-
 const Input = React.forwardRef<HTMLInputElement, BaseInputProps>(
   (
     {
@@ -121,24 +74,34 @@ const Input = React.forwardRef<HTMLInputElement, BaseInputProps>(
     ref
   ) => {
     const { onKeyDown, ...inputProps } = props;
-    const stateCls = resolveStateClasses(disabled ? 'disabled' : state);
+    const stateCls = formFieldInputStateClasses(
+      disabled ? 'disabled' : (state as FormFieldInputState)
+    );
     const hasLeft = Boolean(leadingIcon);
     const hasRight = Boolean(backIcon) || Boolean(trailingButton);
 
     return (
-      <div className={cn('w-full', stateCls.container)}>
+      <div
+        className={cn('w-full', stateCls.container)}
+        style={formControlTokenAliases}
+      >
         {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-ds-text-neutral-default-default flex items-center">
             <span>{title}</span>
-            {required && <span className="text-text-body">*</span>}
+            {required && (
+              <span className="text-ds-text-neutral-default-default">*</span>
+            )}
             {optional && (
-              <span className="rounded bg-surface-disabled px-1.5 py-0.5 text-xs font-normal text-text-label">
+              <span className="rounded bg-ds-bg-neutral-muted-disabled px-1.5 py-0.5 text-xs font-normal text-ds-text-neutral-muted-default">
                 (optional)
               </span>
             )}
             {tooltip && (
               <TooltipSimple content={tooltip}>
-                <CircleAlert size={16} className="text-icon-primary" />
+                <CircleAlert
+                  size={16}
+                  className="text-ds-icon-neutral-default-default"
+                />
               </TooltipSimple>
             )}
           </div>
@@ -146,17 +109,21 @@ const Input = React.forwardRef<HTMLInputElement, BaseInputProps>(
 
         <div
           className={cn(
-            'relative flex items-center rounded-lg border border-solid shadow-sm 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',
+            'rounded-xl shadow-sm relative flex items-center border border-solid transition-colors',
             stateCls.field,
-            sizeClasses[size]
+            formFieldSizeClasses[size],
+            // After field base so hover / focus background wins; subtle surface on interaction
+            state !== 'error' &&
+              state !== 'success' && [
+                'hover:bg-ds-bg-neutral-subtle-default',
+                'focus-within:bg-ds-bg-neutral-subtle-default',
+                'focus-within:ring-ds-ring-brand-default-focus hover:ring-ds-ring-neutral-strong-default',
+                'focus-within:ring-1 focus-within:ring-offset-0 hover:ring-1 hover:ring-offset-0',
+              ]
           )}
         >
           {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-ds-icon-neutral-default-default pointer-events-none absolute inline-flex items-center justify-center">
               {leadingIcon}
             </span>
           ) : null}
@@ -167,7 +134,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 +154,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-ds-icon-neutral-default-default absolute inline-flex items-center justify-center rounded-full focus:ring-0 disabled:opacity-50"
               disabled={disabled}
               onClick={onBackIconClick}
             >
@@ -198,7 +166,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}
@@ -208,16 +176,18 @@ const Input = React.forwardRef<HTMLInputElement, BaseInputProps>(
           <div
             className={cn(
               'mt-1.5 !text-body-xs',
-              state === 'error'
-                ? 'text-text-cuation'
-                : state === 'success'
-                  ? 'text-text-success'
-                  : 'text-text-label'
+              formFieldNoteTextClassName(
+                state === 'error'
+                  ? 'error'
+                  : state === 'success'
+                    ? 'success'
+                    : 'default'
+              )
             )}
             dangerouslySetInnerHTML={{
               __html: note.replace(
                 /(https?:\/\/[^\s]+)/g,
-                '<a href="$1" target="_blank" rel="noopener noreferrer" class="underline text-text-information hover:opacity-70 cursor-pointer transition-opacity duration-200">$1</a>'
+                '<a href="$1" target="_blank" rel="noopener noreferrer" class="underline text-ds-text-status-splitting-strong-default hover:opacity-70 cursor-pointer transition-opacity duration-200">$1</a>'
               ),
             }}
           />
diff --git a/src/components/ui/menu-button.tsx b/src/components/ui/menu-button.tsx
new file mode 100644
index 000000000..8aad2ad2b
--- /dev/null
+++ b/src/components/ui/menu-button.tsx
@@ -0,0 +1,302 @@
+// ========= 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 { AnimateIcon as AnimateIconProvider } from '@/components/ui/animate-ui/icons/icon';
+import { cn } from '@/lib/utils';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+/**
+ * Bordered or soft chrome for a menu item (not the full `UiVariant` set).
+ * @deprecated `info` — use `variant="default"` (or `clear`) with `tone="information"`.
+ */
+export type MenuButtonVariant = 'default' | 'clear' | 'info';
+export type MenuButtonTone = 'default' | 'information';
+
+const menuButtonVariants = cva(
+  'relative inline-flex items-center justify-center select-none transition-colors duration-200 ease-in-out outline-none disabled:opacity-30 disabled:pointer-events-none bg-ds-bg-neutral-subtle-default hover:bg-ds-bg-neutral-default-hover hover:text-ds-text-neutral-default-default focus:text-ds-text-neutral-default-default data-[state=on]:bg-ds-bg-neutral-default-default data-[state=on]:text-ds-text-neutral-default-default text-ds-text-neutral-muted-default disabled:text-ds-text-neutral-muted-disabled cursor-pointer data-[state=on]:shadow-button-shadow rounded-lg',
+  {
+    variants: {
+      look: {
+        default:
+          'border border-solid text-ds-text-neutral-default-default border-ds-border-neutral-default-default hover:border-ds-border-neutral-strong-default focus:bg-ds-bg-neutral-default-default focus:border-ds-border-brand-default-focus data-[state=on]:border-ds-border-brand-default-focus data-[state=on]:shadow-button-shadow',
+        clear:
+          'border border-solid text-ds-text-neutral-default-default border-ds-border-neutral-default-default hover:border-ds-border-neutral-strong-default focus:bg-ds-bg-neutral-default-default focus:border-ds-border-neutral-default-default data-[state=on]:shadow-button-shadow',
+        info: 'text-ds-text-neutral-default-default !font-medium hover:bg-ds-bg-neutral-default-default focus:bg-ds-bg-neutral-default-default data-[state=on]:text-ds-text-neutral-default-default data-[state=on]:!font-bold',
+        clearInfo:
+          'border border-solid text-ds-text-neutral-default-default border-ds-border-neutral-default-default hover:border-ds-border-neutral-strong-default focus:bg-ds-bg-neutral-default-default focus:border-ds-border-neutral-default-default data-[state=on]:shadow-button-shadow !font-medium data-[state=on]:!font-bold',
+      },
+      size: {
+        xs: 'px-2 py-1 text-label-sm font-bold [&_svg]:size-[16px] rounded-lg',
+        sm: 'p-2 gap-1 text-label-sm font-bold [&_svg]:size-[20px] rounded-lg',
+        md: 'w-10 h-10 text-label-md font-bold [&_svg]:size-[24px] rounded-xl',
+        iconxs: 'w-8 h-8 gap-1 font-bold [&_svg]:size-[16px] rounded-lg',
+      },
+    },
+    defaultVariants: {
+      look: 'default',
+      size: 'md',
+    },
+  }
+);
+
+type MenuButtonLook = NonNullable<
+  VariantProps<typeof menuButtonVariants>['look']
+>;
+type MenuButtonSize = NonNullable<
+  VariantProps<typeof menuButtonVariants>['size']
+>;
+
+type MenuContextChrome = {
+  /** `default` | `clear` — never `info`; use `tone` for emphasis. */
+  variant: 'default' | 'clear';
+  tone: MenuButtonTone;
+  size: MenuButtonSize;
+};
+
+const MenuToggleGroupContext = React.createContext<MenuContextChrome>({
+  variant: 'default',
+  tone: 'default',
+  size: 'md',
+});
+
+function normalizeGroupVariantTone(
+  variant: MenuButtonVariant | undefined,
+  tone: MenuButtonTone | undefined
+): Pick<MenuContextChrome, 'variant' | 'tone'> {
+  if (variant === 'info') {
+    return { variant: 'default', tone: 'information' };
+  }
+  return {
+    variant: variant === 'clear' ? 'clear' : 'default',
+    tone: tone === 'information' ? 'information' : 'default',
+  };
+}
+
+/**
+ * Resolves to internal `look` for CVA. `info` (legacy) always maps to the former
+ * `variant="info"` style.
+ */
+function resolveMenuItemLook(
+  itemVariant: MenuButtonVariant | undefined,
+  itemTone: MenuButtonTone | undefined,
+  context: MenuContextChrome
+): MenuButtonLook {
+  if (itemVariant === 'info') {
+    return 'info';
+  }
+  const mergedV: 'default' | 'clear' =
+    itemVariant !== undefined
+      ? itemVariant === 'clear'
+        ? 'clear'
+        : 'default'
+      : context.variant;
+  const mergedT: MenuButtonTone =
+    itemTone !== undefined ? itemTone : context.tone;
+  if (mergedT === 'information') {
+    return mergedV === 'clear' ? 'clearInfo' : 'info';
+  }
+  return mergedV;
+}
+
+type MenuToggleGroupProps = React.ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Root
+> & {
+  variant?: MenuButtonVariant;
+  tone?: MenuButtonTone;
+  size?: MenuButtonSize;
+};
+
+export const MenuToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  MenuToggleGroupProps
+>(
+  (
+    {
+      className,
+      variant: variantProp,
+      tone: toneProp,
+      size: sizeProp = 'md',
+      children,
+      orientation = 'vertical',
+      ...props
+    },
+    ref
+  ) => {
+    const { variant, tone } = normalizeGroupVariantTone(variantProp, toneProp);
+    return (
+      <ToggleGroupPrimitive.Root
+        ref={ref}
+        orientation={orientation}
+        className={cn(
+          'flex items-center justify-center',
+          orientation === 'vertical' ? 'flex-col' : 'flex-row',
+          className
+        )}
+        {...props}
+      >
+        <MenuToggleGroupContext.Provider
+          value={{ variant, tone, size: sizeProp }}
+        >
+          {children}
+        </MenuToggleGroupContext.Provider>
+      </ToggleGroupPrimitive.Root>
+    );
+  }
+);
+
+MenuToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+type MenuToggleItemProps = React.ComponentPropsWithoutRef<
+  typeof ToggleGroupPrimitive.Item
+> & {
+  variant?: MenuButtonVariant;
+  tone?: MenuButtonTone;
+  size?: MenuButtonSize;
+  icon?: React.ReactNode;
+  subIcon?: React.ReactNode;
+  showSubIcon?: boolean;
+  disableIconAnimation?: boolean;
+  iconAnimateOnHover?: boolean | string;
+  rightElement?: React.ReactNode;
+};
+
+export const MenuToggleItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  MenuToggleItemProps
+>(
+  (
+    {
+      className,
+      children,
+      size,
+      icon,
+      variant: itemVariant,
+      tone: itemTone,
+      subIcon,
+      showSubIcon = false,
+      disableIconAnimation = false,
+      iconAnimateOnHover = true,
+      rightElement,
+      ...props
+    },
+    ref
+  ) => {
+    const context = React.useContext(MenuToggleGroupContext);
+    const [isSelected, setIsSelected] = React.useState(false);
+    const itemRef = React.useRef<HTMLButtonElement | null>(null);
+
+    const look = resolveMenuItemLook(itemVariant, itemTone, context);
+    const isInformationLook = look === 'info' || look === 'clearInfo';
+    const resolvedSize = (size ?? context.size) as MenuButtonSize;
+
+    const combinedRef = React.useCallback(
+      (node: HTMLButtonElement | null) => {
+        itemRef.current = node;
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          Object.defineProperty(ref, 'current', {
+            writable: true,
+            value: node,
+          });
+        }
+      },
+      [ref]
+    );
+
+    React.useEffect(() => {
+      const checkSelected = () => {
+        if (itemRef.current) {
+          const selected = itemRef.current.getAttribute('data-state') === 'on';
+          setIsSelected(selected);
+        }
+      };
+
+      checkSelected();
+      const observer = new MutationObserver(checkSelected);
+      if (itemRef.current) {
+        observer.observe(itemRef.current, {
+          attributes: true,
+          attributeFilter: ['data-state'],
+        });
+      }
+
+      return () => observer.disconnect();
+    }, []);
+
+    const iconNode =
+      React.isValidElement(icon) && isInformationLook
+        ? React.cloneElement(icon as React.ReactElement, {
+            strokeWidth: isSelected ? 2.5 : 2,
+          })
+        : icon;
+
+    return (
+      <AnimateIconProvider
+        animateOnHover={
+          disableIconAnimation
+            ? false
+            : (iconAnimateOnHover as unknown as string | boolean)
+        }
+        asChild
+      >
+        <ToggleGroupPrimitive.Item
+          ref={combinedRef}
+          className={cn(
+            'group',
+            menuButtonVariants({
+              look,
+              size: resolvedSize,
+            }),
+            className
+          )}
+          data-look={look}
+          data-menu-tone={isInformationLook ? 'information' : 'default'}
+          {...props}
+        >
+          <span
+            className={cn(
+              'flex h-full w-full items-center',
+              rightElement ? 'justify-between' : 'justify-center'
+            )}
+          >
+            <span className="gap-1 inline-flex items-center">
+              {iconNode}
+              {children}
+            </span>
+            {rightElement && (
+              <span
+                className="pointer-events-auto inline-flex items-center justify-center"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {rightElement}
+              </span>
+            )}
+          </span>
+          {showSubIcon && subIcon && (
+            <span className="right-1 top-1 absolute inline-flex items-center justify-center [&_svg]:shrink-0">
+              {subIcon}
+            </span>
+          )}
+        </ToggleGroupPrimitive.Item>
+      </AnimateIconProvider>
+    );
+  }
+);
+
+MenuToggleItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { menuButtonVariants };
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index a6ff2ae32..d6f2d0b51 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -35,27 +35,29 @@ function resolveStateClasses(
     return {
       wrapper: 'opacity-50 cursor-not-allowed',
       trigger: 'border-transparent',
-      note: 'text-text-label',
+      note: 'text-ds-text-neutral-muted-default',
     };
   }
   if (state === 'error') {
     return {
       wrapper: '',
-      trigger: 'border-input-border-cuation bg-input-bg-default',
-      note: 'text-text-cuation',
+      trigger:
+        'border-ds-border-status-error-default-default bg-ds-bg-neutral-default-default',
+      note: 'text-ds-text-status-error-strong-default',
     };
   }
   if (state === 'success') {
     return {
       wrapper: '',
-      trigger: 'border-input-border-success bg-input-bg-confirm',
-      note: 'text-text-success',
+      trigger:
+        'border-ds-border-status-completed-default-default bg-ds-bg-status-completed-subtle-default',
+      note: 'text-ds-text-status-completed-strong-default',
     };
   }
   return {
     wrapper: '',
     trigger: 'border-transparent',
-    note: 'text-text-label',
+    note: 'text-ds-text-neutral-muted-default',
   };
 }
 
@@ -128,12 +130,17 @@ const PopoverTrigger = React.forwardRef<
     return (
       <div className={cn('w-full', stateCls.wrapper)}>
         {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-ds-text-neutral-default-default flex items-center">
             <span>{title}</span>
-            {required && <span className="text-text-body">*</span>}
+            {required && (
+              <span className="text-ds-text-neutral-default-default">*</span>
+            )}
             {tooltip && (
               <TooltipSimple content={tooltip}>
-                <CircleAlert size={16} className="text-icon-primary" />
+                <CircleAlert
+                  size={16}
+                  className="text-ds-icon-neutral-default-default"
+                />
               </TooltipSimple>
             )}
           </div>
@@ -143,35 +150,35 @@ const PopoverTrigger = React.forwardRef<
           disabled={disabled}
           className={cn(
             // Base styles
-            'relative flex w-full items-center justify-between gap-2 rounded-lg border border-solid px-3 text-text-body outline-none transition-all',
+            'gap-2 rounded-lg px-3 text-ds-text-neutral-default-default relative flex w-full items-center justify-between border border-solid transition-all outline-none',
             sizeClasses[size],
             'whitespace-nowrap [&>span]:line-clamp-1',
             // Default state (when no error/success)
-            !state && 'bg-input-bg-default',
+            !state && 'bg-ds-bg-neutral-default-default',
             // Interactive states (only when no error/success state)
             state !== 'error' &&
               state !== 'success' && [
-                'hover:bg-input-bg-hover hover:ring-1 hover:ring-input-border-hover hover:ring-offset-0',
-                'focus-visible:ring-1 focus-visible:ring-input-border-focus focus-visible:ring-offset-0 data-[state=open]:bg-input-bg-input data-[state=open]:ring-1 data-[state=open]:ring-input-border-focus data-[state=open]:ring-offset-0',
+                'hover:bg-ds-bg-neutral-default-hover hover:ring-ds-ring-neutral-strong-default hover:ring-1 hover:ring-offset-0',
+                'focus-visible:ring-ds-ring-brand-default-focus data-[state=open]:bg-ds-bg-neutral-strong-default data-[state=open]:ring-ds-ring-brand-default-focus focus-visible:ring-1 focus-visible:ring-offset-0 data-[state=open]:ring-1 data-[state=open]:ring-offset-0',
               ],
             // Validation states (override defaults)
             stateCls.trigger,
             // Placeholder styling
-            'data-[placeholder]:text-input-label-default/50',
+            'data-[placeholder]:text-ds-text-neutral-muted-default/50',
             className
           )}
           {...props}
         >
-          <div className="flex min-w-0 flex-1 items-center gap-2">
+          <div className="min-w-0 gap-2 flex flex-1 items-center">
             {leadingIcon && (
-              <span className="flex-shrink-0 text-icon-primary">
+              <span className="text-ds-icon-neutral-default-default flex-shrink-0">
                 {leadingIcon}
               </span>
             )}
             <span className="truncate">{children}</span>
           </div>
           {showChevron && (
-            <ChevronDown className="h-4 w-4 flex-shrink-0 text-icon-primary" />
+            <ChevronDown className="h-4 w-4 text-ds-icon-neutral-default-default flex-shrink-0" />
           )}
         </PopoverPrimitive.Trigger>
         {note ? (
@@ -267,8 +274,8 @@ const PopoverContent = React.forwardRef<
           onOpenAutoFocus={handleOpenAutoFocus}
           onInteractOutside={handleInteractOutside}
           className={cn(
-            'text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded-lg border border-solid border-transparent bg-input-bg-default shadow-md',
-            'origin-[--radix-popover-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-[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-ds-text-neutral-default-default rounded-lg bg-ds-bg-neutral-default-default shadow-md relative z-50 min-w-[8rem] overflow-hidden border border-solid border-transparent',
+            'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 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-popover-content-transform-origin]',
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
             'w-[var(--radix-popover-trigger-width)]',
             className
@@ -291,15 +298,15 @@ const PopoverItem = React.forwardRef<HTMLDivElement, PopoverItemProps>(
     <div
       ref={ref}
       className={cn(
-        'relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-menutabs-fill-hover',
+        'rounded-lg py-1.5 pl-2 pr-8 text-sm hover:bg-ds-bg-neutral-default-hover relative flex w-full cursor-pointer items-center outline-none select-none',
         disabled && 'pointer-events-none opacity-50',
-        selected && 'bg-menutabs-fill-hover',
+        selected && 'bg-ds-bg-neutral-default-hover',
         className
       )}
       {...props}
     >
       {selected && (
-        <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+        <span className="right-2 h-3.5 w-3.5 absolute flex items-center justify-center">
           <Check className="h-4 w-4" />
         </span>
       )}
@@ -317,7 +324,7 @@ const PopoverViewport = React.forwardRef<HTMLDivElement, PopoverViewportProps>(
   ({ className, maxHeight = 200, style, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('overflow-y-auto overflow-x-hidden p-1', className)}
+      className={cn('p-1 overflow-x-hidden overflow-y-auto', className)}
       style={{
         maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
         ...style,
diff --git a/src/components/ui/progress-install.tsx b/src/components/ui/progress-install.tsx
index 7514783a9..5dd750b06 100644
--- a/src/components/ui/progress-install.tsx
+++ b/src/components/ui/progress-install.tsx
@@ -24,7 +24,7 @@ const ProgressInstall = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
-      'relative h-3 w-full overflow-hidden rounded-full bg-surface-tertiary',
+      'h-3 bg-ds-bg-neutral-strong-default relative w-full overflow-hidden rounded-full',
       className
     )}
     {...props}
@@ -39,7 +39,7 @@ const ProgressInstall = React.forwardRef<
       style={{
         transform: `translateX(-${100 - (value || 0)}%)`,
         background:
-          'linear-gradient(90deg, var(--colors-blue-300, #8EC5FF) 0%, var(--colors-emerald-300, #5EE9B5) 17.79%, var(--colors-fuchsia-300, #F4A8FF) 36.06%, var(--colors-orange-300, #FFB86A) 53.37%, var(--colors-red-300, #FFA2A2) 68.27%, var(--colors-yellow-300, #FFDF20) 80.29%, var(--colors-amber-300, #FFD230) 89.42%, var(--colors-indigo-300, #A3B3FF) 98.44%)',
+          'linear-gradient(90deg, var(--colors-blue-300) 0%, var(--colors-emerald-300) 17.79%, var(--colors-fuchsia-300) 36.06%, var(--colors-orange-300) 53.37%, var(--colors-red-300) 68.27%, var(--colors-yellow-300) 80.29%, var(--colors-amber-300) 89.42%, var(--colors-indigo-300) 98.44%)',
       }}
     />
   </ProgressPrimitive.Root>
diff --git a/src/components/ui/resizable.tsx b/src/components/ui/resizable.tsx
index 27557997e..42a3af061 100644
--- a/src/components/ui/resizable.tsx
+++ b/src/components/ui/resizable.tsx
@@ -20,12 +20,13 @@ import * as ResizablePrimitive from 'react-resizable-panels';
 
 import { cn } from '@/lib/utils';
 
-function ResizablePanelGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+const ResizablePanelGroup = React.forwardRef<
+  React.ComponentRef<typeof ResizablePrimitive.PanelGroup>,
+  React.ComponentPropsWithoutRef<typeof ResizablePrimitive.PanelGroup>
+>(function ResizablePanelGroup({ className, ...props }, ref) {
   return (
     <ResizablePrimitive.PanelGroup
+      ref={ref}
       data-slot="resizable-panel-group"
       className={cn(
         'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
@@ -34,13 +35,21 @@ function ResizablePanelGroup({
       {...props}
     />
   );
-}
+});
+ResizablePanelGroup.displayName = '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 +62,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-ds-border-neutral-default-default after:inset-y-0 after:w-1 focus-visible:ring-ds-ring-brand-default-focus focus-visible:ring-offset-ds-bg-neutral-subtle-default 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="h-4 w-3 rounded-xs border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default z-10 flex items-center justify-center border">
           <GripVerticalIcon className="size-2.5" />
         </div>
       )}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 9f0502e45..8dff641e2 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -18,63 +18,51 @@ import * as React from 'react';
 
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
+import {
+  formFieldSelectSizeClasses,
+  formFieldSelectTriggerState,
+} from './formFieldSurface';
+import { formControlTokenAliases, mergeAliasStyles } from './tokenAliases';
 import { TooltipSimple } from './tooltip';
 
 export type SelectSize = 'default' | 'sm';
+/** Primary: default surface. Secondary: subtle surface for nested or lower-emphasis fields. */
+export type SelectVariant = 'primary' | 'secondary';
 // Only keep controllable states; hover/focus/default are automatic
 export type SelectState = 'error' | 'success';
 
+const variantTriggerBase: Record<SelectVariant, string> = {
+  primary: 'bg-ds-bg-neutral-default-default',
+  secondary: 'bg-ds-bg-neutral-subtle-default',
+};
+
+const variantTriggerInteractive: Record<SelectVariant, [string, string]> = {
+  primary: [
+    'hover:bg-ds-bg-neutral-default-hover hover:ring-ds-ring-neutral-strong-default hover:ring-1 hover:ring-offset-0',
+    'focus-visible:ring-ds-ring-brand-default-focus data-[state=open]:bg-ds-bg-neutral-strong-default data-[state=open]:ring-ds-ring-brand-default-focus focus-visible:ring-1 focus-visible:ring-offset-0 data-[state=open]:ring-1 data-[state=open]:ring-offset-0',
+  ],
+  secondary: [
+    'hover:bg-ds-bg-neutral-subtle-hover hover:ring-ds-ring-neutral-strong-default hover:ring-1 hover:ring-offset-0',
+    'focus-visible:ring-ds-ring-brand-default-focus data-[state=open]:bg-ds-bg-neutral-default-default data-[state=open]:ring-ds-ring-brand-default-focus focus-visible:ring-1 focus-visible:ring-offset-0 data-[state=open]:ring-1 data-[state=open]:ring-offset-0',
+  ],
+};
+
 const Select = SelectPrimitive.Root;
 
 const SelectGroup = SelectPrimitive.Group;
 
 const SelectValue = SelectPrimitive.Value;
 
-// Local copies to mirror Input behavior for size/state without importing internal helpers
-const sizeClasses: Record<SelectSize, string> = {
-  default: 'h-10 text-body-sm',
-  sm: 'h-8 text-body-sm',
-};
-
-function resolveStateClasses(
-  state: SelectState | undefined,
-  disabled: boolean
-) {
-  if (disabled) {
-    return {
-      wrapper: 'opacity-50 cursor-not-allowed',
-      trigger: 'border-transparent',
-      note: 'text-text-label',
-    };
-  }
-  if (state === 'error') {
-    return {
-      wrapper: '',
-      trigger: 'border-input-border-cuation bg-input-bg-default',
-      note: 'text-text-cuation',
-    };
-  }
-  if (state === 'success') {
-    return {
-      wrapper: '',
-      trigger: 'border-input-border-success bg-input-bg-confirm',
-      note: 'text-text-success',
-    };
-  }
-  return {
-    wrapper: '',
-    trigger: 'border-transparent',
-    note: 'text-text-label',
-  };
-}
-
 type SelectTriggerExtraProps = {
   size?: SelectSize;
+  variant?: SelectVariant;
   state?: SelectState;
   title?: string;
   note?: string;
   tooltip?: string;
   required?: boolean;
+  /** Outer wrapper width; default `w-fit` keeps intrinsic width for inline selects. */
+  wrapperClassName?: string;
 };
 
 const SelectTrigger = React.forwardRef<
@@ -87,26 +75,34 @@ const SelectTrigger = React.forwardRef<
       className,
       children,
       size = 'default',
+      variant = 'primary',
       state,
       title,
       note,
       disabled,
       tooltip,
       required = false,
+      wrapperClassName,
+      style,
       ...props
     },
     ref
   ) => {
-    const stateCls = resolveStateClasses(state, Boolean(disabled));
+    const stateCls = formFieldSelectTriggerState(state, Boolean(disabled));
     return (
-      <div className={cn('w-fit', stateCls.wrapper)}>
+      <div className={cn(wrapperClassName ?? 'w-fit', stateCls.wrapper)}>
         {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-ds-text-neutral-default-default flex items-center">
             <span>{title}</span>
-            {required && <span className="text-text-body">*</span>}
+            {required && (
+              <span className="text-ds-text-neutral-default-default">*</span>
+            )}
             {tooltip && (
               <TooltipSimple content={tooltip}>
-                <CircleAlert size={16} className="text-icon-primary" />
+                <CircleAlert
+                  size={16}
+                  className="text-ds-icon-neutral-default-default"
+                />
               </TooltipSimple>
             )}
           </div>
@@ -116,28 +112,27 @@ const SelectTrigger = React.forwardRef<
           disabled={disabled}
           className={cn(
             // Base styles
-            'relative flex w-full items-center justify-between gap-2 rounded-lg border border-solid px-3 text-text-body outline-none transition-all',
-            sizeClasses[size],
+            'gap-2 rounded-xl px-3 text-ds-text-neutral-default-default relative flex w-full items-center justify-between border border-solid transition-all outline-none',
+            formFieldSelectSizeClasses[size],
             'whitespace-nowrap [&>span]:line-clamp-1',
-            // Default state (when no error/success)
-            !state && 'bg-input-bg-default',
+            // Default surface (when no error/success)
+            !state && variantTriggerBase[variant],
             // Interactive states (only when no error/success state)
             state !== 'error' &&
-              state !== 'success' && [
-                'hover:bg-input-bg-hover hover:ring-1 hover:ring-input-border-hover hover:ring-offset-0',
-                'focus-visible:ring-1 focus-visible:ring-input-border-focus focus-visible:ring-offset-0 data-[state=open]:bg-input-bg-input data-[state=open]:ring-1 data-[state=open]:ring-input-border-focus data-[state=open]:ring-offset-0',
-              ],
+              state !== 'success' &&
+              variantTriggerInteractive[variant],
             // Validation states (override defaults)
             stateCls.trigger,
             // Placeholder styling
-            'data-[placeholder]:text-input-label-default/50',
+            'data-[placeholder]:text-ds-text-neutral-muted-default/50',
             className
           )}
+          style={mergeAliasStyles(formControlTokenAliases, style)}
           {...props}
         >
           {children}
           <SelectPrimitive.Icon asChild>
-            <ChevronDown className="h-4 w-4 text-icon-primary" />
+            <ChevronDown className="h-4 w-4 text-ds-icon-neutral-default-default" />
           </SelectPrimitive.Icon>
         </SelectPrimitive.Trigger>
         {note ? (
@@ -156,7 +151,7 @@ const SelectScrollUpButton = React.forwardRef<
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
-      'flex cursor-default items-center justify-center py-1',
+      'py-1 flex cursor-default items-center justify-center',
       className
     )}
     {...props}
@@ -173,7 +168,7 @@ const SelectScrollDownButton = React.forwardRef<
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
-      'flex cursor-default items-center justify-center py-1',
+      'py-1 flex cursor-default items-center justify-center',
       className
     )}
     {...props}
@@ -187,17 +182,18 @@ SelectScrollDownButton.displayName =
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
+>(({ className, children, position = 'popper', style, ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'text-popover-foreground relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] origin-[--radix-select-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-lg border border-solid border-transparent bg-input-bg-default shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 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-ds-text-neutral-default-default rounded-xl bg-ds-bg-neutral-subtle-default shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 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 relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] origin-[--radix-select-content-transform-origin] overflow-x-hidden overflow-y-auto border border-solid border-transparent',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className
       )}
       position={position}
+      style={mergeAliasStyles(formControlTokenAliases, style)}
       {...props}
     >
       <SelectScrollUpButton />
@@ -235,12 +231,12 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-menutabs-fill-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-ds-bg-neutral-default-hover focus:text-ds-text-neutral-default-default rounded-xl py-1.5 pl-2 pr-8 text-sm hover:bg-ds-bg-neutral-default-hover relative flex w-full cursor-pointer items-center outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
   >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="right-2 h-3.5 w-3.5 absolute flex items-center justify-center">
       <SelectPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
@@ -256,7 +252,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    className={cn('bg-ds-bg-neutral-muted-default -mx-1 my-1 h-px', className)}
     {...props}
   />
 ));
@@ -292,12 +288,12 @@ const SelectItemWithButton = React.forwardRef<
       value={value}
       disabled={!enabled}
       className={cn(
-        'focus:bg-accent focus:text-accent-foreground group relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-menutabs-fill-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'focus:bg-ds-bg-neutral-default-hover focus:text-ds-text-neutral-default-default group rounded-lg py-1.5 pl-2 pr-8 text-sm hover:bg-ds-bg-neutral-default-hover relative flex w-full cursor-pointer items-center outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className
       )}
       {...props}
     >
-      <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <span className="right-2 h-3.5 w-3.5 absolute flex items-center justify-center">
         <SelectPrimitive.ItemIndicator>
           <Check className="h-4 w-4" />
         </SelectPrimitive.ItemIndicator>
diff --git a/src/components/ui/semanticProps.ts b/src/components/ui/semanticProps.ts
new file mode 100644
index 000000000..e9e57b0b6
--- /dev/null
+++ b/src/components/ui/semanticProps.ts
@@ -0,0 +1,61 @@
+// ========= 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. =========
+
+/**
+ * Shared semantic color/chrome contract for reusable UI components.
+ *
+ * Axes:
+ * - `variant`: component chrome pattern
+ * - `emphasis`: visual intensity
+ * - `tone`: semantic meaning
+ *
+ * ## Glossary: what `variant` means in this codebase
+ *
+ * - **`UiVariant` (this file)** — Filled / outline / ghost *chrome* for buttons, badges,
+ *   tags, and similar. Combine with `tone` and `emphasis` for the full look.
+ * - **Layout / placement (not `UiVariant`)** — Some primitives use different prop names
+ *   for placement: e.g. `dialog.tsx` uses `size` for max-width, `sheet.tsx` uses `side`,
+ *   `tabs.tsx` uses `appearance` for tab strip style (avoids clashing with
+ *   `UiVariant.outline`). Read those as *layout* or *chrome role*, not as `UiVariant`.
+ * - **shadcn legacy `variant` strings** — e.g. `default`, `destructive`, or one-word
+ *   “semantic” button variants. Prefer mapping to `UiVariant` + `tone` + `emphasis`
+ *   (see `button.tsx` deprecations and resolvers) when touching call sites.
+ */
+export type UiVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+
+export type UiEmphasis = 'subtle' | 'muted' | 'default' | 'strong' | 'inverse';
+
+export type UiTone =
+  | 'neutral'
+  | 'success'
+  | 'error'
+  | 'information'
+  | 'warning';
+
+/**
+ * Compatibility alias for older API surfaces that used `tone="default"`.
+ * New code should prefer `tone="neutral"`.
+ */
+export type UiToneInput = UiTone | 'default';
+
+export const DEFAULT_EMPHASIS_BY_VARIANT: Record<UiVariant, UiEmphasis> = {
+  primary: 'default',
+  secondary: 'subtle',
+  outline: 'default',
+  ghost: 'muted',
+};
+
+export function normalizeUiTone(tone?: UiToneInput): UiTone {
+  return !tone || tone === 'default' ? 'neutral' : tone;
+}
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
index c46e47767..0b4099347 100644
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -30,7 +30,7 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        'bg-border shrink-0',
+        'bg-ds-border-neutral-default-default shrink-0',
         orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
         className
       )}
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index e86cef4f3..c1f0f1f4c 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -35,7 +35,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      'bg-black/80 fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'inset-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-dialog-overlay-scrim fixed z-50',
       className
     )}
     {...props}
@@ -45,7 +45,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+  'fixed z-50 gap-4 bg-ds-bg-neutral-subtle-default p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
   {
     variants: {
       side: {
@@ -79,7 +79,7 @@ const SheetContent = React.forwardRef<
       className={cn(sheetVariants({ side }), className)}
       {...props}
     >
-      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <SheetPrimitive.Close className="right-4 top-4 rounded-sm ring-offset-ds-bg-neutral-subtle-default focus:ring-ds-ring-brand-default-focus data-[state=open]:bg-ds-bg-neutral-strong-default absolute opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -95,7 +95,7 @@ const SheetHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
+      'space-y-2 sm:text-left flex flex-col text-center',
       className
     )}
     {...props}
@@ -109,7 +109,7 @@ const SheetFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      'sm:flex-row sm:justify-end sm:space-x-2 flex flex-col-reverse',
       className
     )}
     {...props}
@@ -123,7 +123,10 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn('text-foreground text-lg font-semibold', className)}
+    className={cn(
+      'text-lg font-semibold text-ds-text-neutral-default-default',
+      className
+    )}
     {...props}
   />
 ));
@@ -135,7 +138,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn('text-sm text-ds-text-neutral-muted-default', className)}
     {...props}
   />
 ));
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index 9961f514d..369e6fa35 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -159,7 +159,7 @@ const SidebarProvider = React.forwardRef<
               } as React.CSSProperties
             }
             className={cn(
-              'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',
+              'group/sidebar-wrapper has-[[data-variant=inset]]:bg-ds-bg-neutral-strong-default flex min-h-svh w-full',
               className
             )}
             ref={ref}
@@ -199,7 +199,7 @@ const Sidebar = React.forwardRef<
       return (
         <div
           className={cn(
-            'bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col',
+            'bg-ds-bg-neutral-strong-default text-ds-text-neutral-default-default flex h-full w-[--sidebar-width] flex-col',
             className
           )}
           ref={ref}
@@ -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-ds-bg-neutral-strong-default text-ds-text-neutral-default-default 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-ds-text-neutral-default-default 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-ds-bg-neutral-strong-default group-data-[variant=floating]:border-ds-border-neutral-default-default 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,10 +323,10 @@ 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-ds-border-neutral-default-default 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',
+        'group-data-[collapsible=offcanvas]:hover:bg-ds-bg-neutral-strong-default group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
         '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
         '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
         className
@@ -344,7 +345,7 @@ const SidebarInset = React.forwardRef<
     <main
       ref={ref}
       className={cn(
-        'bg-background relative flex w-full flex-1 flex-col',
+        'bg-ds-bg-neutral-subtle-default relative flex w-full flex-1 flex-col',
         'md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
         className
       )}
@@ -363,7 +364,7 @@ const SidebarInput = React.forwardRef<
       ref={ref}
       data-sidebar="input"
       className={cn(
-        'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',
+        'bg-ds-bg-neutral-subtle-default focus-visible:ring-ds-ring-brand-default-focus h-8 w-full shadow-none focus-visible:ring-2',
         className
       )}
       {...props}
@@ -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}
     />
   );
@@ -410,7 +411,10 @@ const SidebarSeparator = React.forwardRef<
     <Separator
       ref={ref}
       data-sidebar="separator"
-      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      className={cn(
+        'bg-ds-border-neutral-default-default mx-2 w-auto',
+        className
+      )}
       {...props}
     />
   );
@@ -426,7 +430,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 +447,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 +465,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-ds-text-neutral-muted-default ring-ds-ring-brand-default-focus 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 +486,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-ds-text-neutral-default-default ring-ds-ring-brand-default-focus hover:bg-ds-bg-neutral-default-hover hover:text-ds-text-neutral-default-default 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 +505,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 +518,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}
   />
 ));
@@ -534,13 +538,14 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = 'SidebarMenuItem';
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-ds-ring-brand-default-focus transition-[width,height,padding] hover:bg-ds-bg-neutral-default-hover hover:text-ds-text-neutral-default-default focus-visible:ring-2 active:bg-ds-bg-neutral-default-hover active:text-ds-text-neutral-default-default disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-ds-bg-neutral-default-hover data-[active=true]:font-medium data-[active=true]:text-ds-text-neutral-default-default data-[state=open]:hover:bg-ds-bg-neutral-default-hover data-[state=open]:hover:text-ds-text-neutral-default-default group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        default:
+          'hover:bg-ds-bg-neutral-default-hover hover:text-ds-text-neutral-default-default',
         outline:
-          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+          'bg-ds-bg-neutral-subtle-default shadow-[0_0_0_1px_theme(colors.ds-border-neutral-default-default)] hover:bg-ds-bg-neutral-default-hover hover:text-ds-text-neutral-default-default hover:shadow-[0_0_0_1px_theme(colors.ds-bg-neutral-default-hover)]',
       },
       size: {
         default: 'h-8 text-sm',
@@ -628,15 +633,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-ds-text-neutral-default-default ring-ds-ring-brand-default-focus hover:bg-ds-bg-neutral-default-hover hover:text-ds-text-neutral-default-default peer-hover/menu-button:text-ds-text-neutral-default-default 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-ds-text-neutral-default-default md:opacity-0 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100',
         className
       )}
       {...props}
@@ -653,8 +658,8 @@ 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',
-      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'text-ds-text-neutral-default-default 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-ds-text-neutral-default-default peer-data-[active=true]/menu-button:text-ds-text-neutral-default-default',
       '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',
@@ -681,7 +686,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 +717,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-ds-border-neutral-default-default 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,8 +749,8 @@ 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',
-        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        'text-ds-text-neutral-default-default ring-ds-ring-brand-default-focus hover:bg-ds-bg-neutral-default-hover hover:text-ds-text-neutral-default-default active:bg-ds-bg-neutral-default-hover active:text-ds-text-neutral-default-default [&>svg]:text-ds-text-neutral-default-default 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-ds-bg-neutral-default-hover data-[active=true]:text-ds-text-neutral-default-default',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',
         'group-data-[collapsible=icon]:hidden',
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
index 1ea6d865d..b41eb18ec 100644
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -20,7 +20,10 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('bg-primary/10 animate-pulse rounded-md', className)}
+      className={cn(
+        'bg-ds-bg-neutral-muted-default/30 animate-pulse rounded-md',
+        className
+      )}
       {...props}
     />
   );
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 528ec81a8..be8610d2a 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -27,12 +27,12 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast:
-            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
-          description: 'group-[.toast]:text-muted-foreground',
+            'group toast group-[.toaster]:bg-ds-bg-neutral-subtle-default group-[.toaster]:text-ds-text-neutral-default-default group-[.toaster]:border-ds-border-neutral-default-default group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-ds-text-neutral-muted-default',
           actionButton:
-            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+            'group-[.toast]:bg-ds-bg-brand-default-default group-[.toast]:text-ds-text-brand-inverse-default',
           cancelButton:
-            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+            'group-[.toast]:bg-ds-bg-neutral-muted-default group-[.toast]:text-ds-text-neutral-muted-default',
         },
       }}
       {...props}
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index 6e329fbc9..f9a7f0286 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -16,6 +16,7 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import { mergeAliasStyles, switchTokenAliases } from './tokenAliases';
 
 export type SwitchSize = 'default' | 'sm';
 
@@ -39,19 +40,20 @@ const sizeClasses = {
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   SwitchProps
->(({ className, size = 'default', ...props }, ref) => (
+>(({ className, size = 'default', style, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'focus-visible:ring-ring focus-visible:ring-offset-background peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-switch-on-fill-track-fill data-[state=unchecked]:bg-switch-off-fill-track-fill',
+      'peer focus-visible:ring-ds-ring-brand-default-focus focus-visible:ring-offset-ds-bg-neutral-subtle-default data-[state=checked]:bg-ds-bg-status-completed-default-default data-[state=unchecked]:bg-ds-bg-neutral-subtle-default shadow-sm inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
       sizeClasses[size].root,
       className
     )}
+    style={mergeAliasStyles(switchTokenAliases, style)}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block rounded-full bg-switch-on-fill-thumb-fill shadow-none ring-0 transition-transform data-[state=unchecked]:translate-x-0',
+        'bg-ds-text-brand-inverse-default data-[state=unchecked]:translate-x-0 shadow-lg pointer-events-none block rounded-full ring-0 transition-transform',
         sizeClasses[size].thumb
       )}
     />
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index 4bb1545bf..fe13143f9 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,6 +1,20 @@
-import * as React from "react"
+// ========= 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 * as React from 'react';
+
+import { cn } from '@/lib/utils';
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -9,20 +23,20 @@ const Table = React.forwardRef<
   <div className="relative w-full overflow-auto">
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn('text-sm w-full caption-bottom', className)}
       {...props}
     />
   </div>
-))
-Table.displayName = "Table"
+));
+Table.displayName = 'Table';
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -30,11 +44,11 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={cn('[&_tr:last-child]:border-0', className)}
     {...props}
   />
-))
-TableBody.displayName = "TableBody"
+));
+TableBody.displayName = 'TableBody';
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -43,13 +57,13 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      'bg-ds-bg-neutral-muted-default/50 font-medium border-t [&>tr]:last:border-b-0',
       className
     )}
     {...props}
   />
-))
-TableFooter.displayName = "TableFooter"
+));
+TableFooter.displayName = 'TableFooter';
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
@@ -58,13 +72,13 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      'hover:bg-ds-bg-neutral-muted-default/50 data-[state=selected]:bg-ds-bg-neutral-muted-default border-b transition-colors',
       className
     )}
     {...props}
   />
-))
-TableRow.displayName = "TableRow"
+));
+TableRow.displayName = 'TableRow';
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -73,13 +87,13 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      'h-10 px-2 font-medium text-ds-text-neutral-muted-default [&:has([role=checkbox])]:pr-0 text-left align-middle [&>[role=checkbox]]:translate-y-[2px]',
       className
     )}
     {...props}
   />
-))
-TableHead.displayName = "TableHead"
+));
+TableHead.displayName = 'TableHead';
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -88,13 +102,13 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      'p-2 [&:has([role=checkbox])]:pr-0 align-middle [&>[role=checkbox]]:translate-y-[2px]',
       className
     )}
     {...props}
   />
-))
-TableCell.displayName = "TableCell"
+));
+TableCell.displayName = 'TableCell';
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
@@ -102,19 +116,19 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={cn('mt-4 text-sm text-ds-text-neutral-muted-default', className)}
     {...props}
   />
-))
-TableCaption.displayName = "TableCaption"
+));
+TableCaption.displayName = 'TableCaption';
 
 export {
   Table,
-  TableHeader,
   TableBody,
+  TableCaption,
+  TableCell,
   TableFooter,
   TableHead,
+  TableHeader,
   TableRow,
-  TableCell,
-  TableCaption,
-}
\ No newline at end of file
+};
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 77d93166e..903e28a07 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -18,155 +18,243 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
-// Context for variant
-const TabsContext = React.createContext<{ variant?: 'default' | 'outline' }>({
-  variant: 'default',
+/** Visual style of the tab strip (not `UiVariant` / `Button` chrome). */
+export type TabsAppearance = 'default' | 'outline' | 'border';
+
+/**
+ * @deprecated Use {@link TabsAppearance} and the `appearance` prop instead of
+ * `variant` on `TabsList` / `TabsTrigger` to avoid confusion with `UiVariant`.
+ */
+export type TabsVariant = TabsAppearance;
+
+// Context for tab strip appearance
+const TabsContext = React.createContext<{ appearance?: TabsAppearance }>({
+  appearance: 'default',
 });
 
+/** Shared trigger styles — default and outline use the same dimensions. */
+const tabsTriggerClassName =
+  'ring-offset-ds-bg-neutral-subtle-default focus-visible:ring-ds-ring-brand-default-focus gap-1 rounded-xl bg-ds-bg-neutral-strong-default px-2 py-1 text-body-sm font-semibold text-ds-text-neutral-default-default data-[state=active]:bg-ds-bg-neutral-subtle-default data-[state=active]:text-ds-text-neutral-default-default data-[state=active]:shadow-sm inline-flex items-center justify-center whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:text-ds-icon-neutral-default-default';
+
+/**
+ * Transparent triggers + hover chip (HistoryTabsNav); active selection is shown
+ * by the animated bar under the tab row (TabsList), not a border on the trigger.
+ */
+const tabsTriggerBorderClassName =
+  'ring-offset-ds-bg-neutral-default-default focus-visible:ring-ds-ring-brand-default-focus inline-flex h-8 min-h-8 shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-lg border border-solid border-transparent bg-transparent px-2 text-label-sm font-bold text-ds-text-neutral-muted-default transition-colors hover:bg-ds-bg-neutral-subtle-default hover:text-ds-text-neutral-default-default hover:shadow-[inset_0_1px_0_var(--colors-white-10)] hover:ring-1 hover:ring-ds-border-neutral-default-default focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none data-[state=active]:bg-transparent data-[state=active]:text-ds-text-neutral-default-default data-[state=active]:shadow-none data-[state=active]:ring-0 data-[state=active]:hover:bg-ds-bg-neutral-subtle-default disabled:pointer-events-none disabled:opacity-50 [&_svg]:text-ds-icon-neutral-default-default';
+
+/** Gap (px) between tab row and underline — matches HistoryTabsNav. */
+const BORDER_TAB_UNDERLINE_GAP_PX = 8;
+
 const Tabs = TabsPrimitive.Root;
 
 type TabsListProps = React.ComponentPropsWithoutRef<
   typeof TabsPrimitive.List
 > & {
-  variant?: 'default' | 'outline';
+  appearance?: TabsAppearance;
+  /** @deprecated Use `appearance`. */
+  variant?: TabsAppearance;
 };
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   TabsListProps
->(({ className, variant = 'default', ...props }, ref) => {
-  const tabsListRef = React.useRef<React.ElementRef<
-    typeof TabsPrimitive.List
-  > | null>(null) as React.MutableRefObject<React.ElementRef<
-    typeof TabsPrimitive.List
-  > | null>;
-  const [sliderStyle, setSliderStyle] = React.useState({ left: 0, width: 0 });
-
-  // Update slider position when active tab changes
-  React.useLayoutEffect(() => {
-    if (variant !== 'outline' || !tabsListRef.current) return;
-
-    const updateSlider = () => {
-      // Use requestAnimationFrame to ensure DOM has updated
-      requestAnimationFrame(() => {
-        const activeTab = tabsListRef.current?.querySelector(
-          '[data-state="active"][data-variant="outline"]'
-        ) as HTMLElement;
-
-        if (activeTab && tabsListRef.current) {
-          const containerRect = tabsListRef.current.getBoundingClientRect();
-          const tabRect = activeTab.getBoundingClientRect();
-
-          setSliderStyle({
-            left: tabRect.left - containerRect.left,
-            width: tabRect.width,
-          });
-        }
-      });
-    };
-
-    // Initial update
-    updateSlider();
-
-    // Watch for changes
-    const observer = new MutationObserver(updateSlider);
-    if (tabsListRef.current) {
-      observer.observe(tabsListRef.current, {
-        attributes: true,
-        attributeFilter: ['data-state'],
-        subtree: true,
-      });
-    }
-
-    // Also listen for resize
-    window.addEventListener('resize', updateSlider);
-
-    return () => {
-      observer.disconnect();
-      window.removeEventListener('resize', updateSlider);
-    };
-  }, [variant]);
-
-  const combinedRef = React.useCallback(
-    (node: React.ElementRef<typeof TabsPrimitive.List> | null) => {
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref && 'current' in ref) {
-        (
-          ref as React.MutableRefObject<React.ElementRef<
-            typeof TabsPrimitive.List
-          > | null>
-        ).current = node;
+>(
+  (
+    { className, appearance: appearanceProp, variant: variantProp, ...props },
+    ref
+  ) => {
+    const appearance = appearanceProp ?? variantProp ?? 'default';
+    const wrapperRef = React.useRef<HTMLDivElement>(null);
+    const tabsListRef = React.useRef<React.ElementRef<
+      typeof TabsPrimitive.List
+    > | null>(null) as React.MutableRefObject<React.ElementRef<
+      typeof TabsPrimitive.List
+    > | null>;
+    const [sliderStyle, setSliderStyle] = React.useState({ left: 0, width: 0 });
+    const [borderBarStyle, setBorderBarStyle] = React.useState({
+      left: 0,
+      top: 0,
+      width: 0,
+    });
+
+    // Update underline position when active tab changes (outline: inside list; border: below row, HistoryTabsNav-style)
+    React.useLayoutEffect(() => {
+      if (
+        !tabsListRef.current ||
+        (appearance !== 'outline' && appearance !== 'border')
+      ) {
+        return;
       }
-      tabsListRef.current = node;
-    },
-    [ref]
-  );
 
-  return (
-    <TabsContext.Provider value={{ variant }}>
-      <div className="relative">
-        <TabsPrimitive.List
-          ref={combinedRef}
-          className={cn(
-            variant === 'outline'
-              ? 'relative inline-flex items-center justify-center gap-0 bg-surface-disabled p-0'
-              : 'inline-flex items-center justify-center rounded-xl border border-solid border-menutabs-border-default bg-menutabs-bg-default p-0.5',
-            'data-[orientation=vertical]:flex data-[orientation=vertical]:h-full data-[orientation=vertical]:w-full data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:justify-start',
-            className
-          )}
-          data-variant={variant}
-          {...props}
-        />
-        {variant === 'outline' && sliderStyle.width > 0 && (
-          <motion.div
-            className="absolute bottom-0 z-10 h-[1.5px] bg-text-heading"
-            initial={false}
-            animate={{
-              left: sliderStyle.left,
-              width: sliderStyle.width,
-            }}
-            transition={{
-              type: 'spring',
-              stiffness: 300,
-              damping: 30,
-            }}
+      const updateSlider = () => {
+        requestAnimationFrame(() => {
+          const list = tabsListRef.current;
+          const wrap = wrapperRef.current;
+          if (!list) return;
+
+          if (appearance === 'outline') {
+            const activeTab = list.querySelector(
+              '[data-state="active"][data-tabs-appearance="outline"]'
+            ) as HTMLElement | null;
+            if (activeTab) {
+              const containerRect = list.getBoundingClientRect();
+              const tabRect = activeTab.getBoundingClientRect();
+              setSliderStyle({
+                left: tabRect.left - containerRect.left,
+                width: tabRect.width,
+              });
+            }
+            return;
+          }
+
+          const activeTab = list.querySelector(
+            '[data-state="active"][data-tabs-appearance="border"]'
+          ) as HTMLElement | null;
+          if (activeTab && wrap) {
+            const wr = wrap.getBoundingClientRect();
+            const tabRect = activeTab.getBoundingClientRect();
+            setBorderBarStyle({
+              left: tabRect.left - wr.left,
+              top: tabRect.bottom - wr.top + BORDER_TAB_UNDERLINE_GAP_PX,
+              width: tabRect.width,
+            });
+          }
+        });
+      };
+
+      updateSlider();
+
+      const observer = new MutationObserver(updateSlider);
+      if (tabsListRef.current) {
+        observer.observe(tabsListRef.current, {
+          attributes: true,
+          attributeFilter: ['data-state'],
+          subtree: true,
+        });
+      }
+
+      window.addEventListener('resize', updateSlider);
+
+      return () => {
+        observer.disconnect();
+        window.removeEventListener('resize', updateSlider);
+      };
+    }, [appearance]);
+
+    const combinedRef = React.useCallback(
+      (node: React.ElementRef<typeof TabsPrimitive.List> | null) => {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref && 'current' in ref) {
+          (
+            ref as React.MutableRefObject<React.ElementRef<
+              typeof TabsPrimitive.List
+            > | null>
+          ).current = node;
+        }
+        tabsListRef.current = node;
+      },
+      [ref]
+    );
+
+    return (
+      <TabsContext.Provider value={{ appearance }}>
+        <div
+          ref={wrapperRef}
+          className={cn('relative', appearance === 'border' && 'pb-2')}
+        >
+          <TabsPrimitive.List
+            ref={combinedRef}
+            className={cn(
+              'inline-flex items-center justify-center',
+              appearance === 'border' &&
+                'gap-2 p-0 rounded-none border-0 border-solid bg-transparent shadow-none',
+              appearance === 'outline' &&
+                'rounded-xl border-ds-border-neutral-default-default bg-ds-bg-neutral-strong-default p-0.5 relative border border-solid',
+              appearance === 'default' &&
+                'rounded-xl bg-ds-bg-neutral-strong-default p-0.5 border-ds-bg-neutral-strong-default border border-solid',
+              'data-[orientation=vertical]:flex data-[orientation=vertical]:h-full data-[orientation=vertical]:w-full data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:justify-start',
+              className
+            )}
+            data-tabs-appearance={appearance}
+            {...props}
           />
-        )}
-      </div>
-    </TabsContext.Provider>
-  );
-});
+          {appearance === 'outline' && sliderStyle.width > 0 && (
+            <motion.div
+              className="bottom-0 bg-text-heading absolute z-10 h-[1.5px]"
+              initial={false}
+              animate={{
+                left: sliderStyle.left,
+                width: sliderStyle.width,
+              }}
+              transition={{
+                type: 'spring',
+                stiffness: 300,
+                damping: 30,
+              }}
+            />
+          )}
+          {appearance === 'border' && borderBarStyle.width > 0 && (
+            <motion.div
+              aria-hidden
+              className="bg-ds-bg-brand-default-default h-0.5 pointer-events-none absolute z-10 rounded-full"
+              initial={false}
+              animate={{
+                left: borderBarStyle.left,
+                top: borderBarStyle.top,
+                width: borderBarStyle.width,
+              }}
+              transition={{
+                type: 'spring',
+                stiffness: 420,
+                damping: 34,
+                mass: 0.55,
+              }}
+            />
+          )}
+        </div>
+      </TabsContext.Provider>
+    );
+  }
+);
 TabsList.displayName = TabsPrimitive.List.displayName;
 
 type TabsTriggerProps = React.ComponentPropsWithoutRef<
   typeof TabsPrimitive.Trigger
 > & {
-  variant?: 'default' | 'outline';
+  appearance?: TabsAppearance;
+  /** @deprecated Use `appearance`. */
+  variant?: TabsAppearance;
 };
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   TabsTriggerProps
->(({ className, variant: propVariant, ...props }, ref) => {
-  const { variant: contextVariant } = React.useContext(TabsContext);
-  const variant = propVariant || contextVariant || 'default';
+>(
+  (
+    { className, appearance: appearanceProp, variant: variantProp, ...props },
+    ref
+  ) => {
+    const { appearance: contextAppearance } = React.useContext(TabsContext);
+    const appearance =
+      appearanceProp ?? variantProp ?? contextAppearance ?? 'default';
+    const triggerBase =
+      appearance === 'border'
+        ? tabsTriggerBorderClassName
+        : tabsTriggerClassName;
 
-  return (
-    <TabsPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        variant === 'outline'
-          ? 'relative flex cursor-pointer flex-row items-center justify-center gap-2 bg-transparent px-4 py-3 !text-body-sm !font-semibold text-text-label transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface-disabled data-[state=active]:!font-bold data-[state=active]:text-text-heading'
-          : 'ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-xl bg-menutabs-fill-default px-2 py-1 text-body-sm font-semibold transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-menutabs-fill-active data-[state=active]:text-menutabs-text-active data-[state=active]:shadow-sm',
-        className
-      )}
-      data-variant={variant}
-      data-value={props.value}
-      {...props}
-    />
-  );
-});
+    return (
+      <TabsPrimitive.Trigger
+        ref={ref}
+        className={cn(triggerBase, className)}
+        data-tabs-appearance={appearance}
+        data-value={props.value}
+        {...props}
+      />
+    );
+  }
+);
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
@@ -177,7 +265,7 @@ const TabsContent = React.forwardRef<
     <TabsPrimitive.Content
       ref={ref}
       className={cn(
-        'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'ring-offset-ds-bg-neutral-subtle-default focus-visible:ring-ds-ring-brand-default-focus mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
         className
       )}
       {...props}
@@ -189,7 +277,7 @@ const TabsContent = React.forwardRef<
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ duration: 0.2 }}
-          className="flex flex-col gap-4"
+          className="gap-4 flex flex-col"
         >
           {children}
         </motion.div>
diff --git a/src/components/ui/tag.tsx b/src/components/ui/tag.tsx
index 7bde7b4f2..2c9afd5f3 100644
--- a/src/components/ui/tag.tsx
+++ b/src/components/ui/tag.tsx
@@ -17,36 +17,326 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import {
+  DEFAULT_EMPHASIS_BY_VARIANT,
+  type UiEmphasis,
+  type UiTone,
+  type UiToneInput,
+  type UiVariant,
+} from './semanticProps';
+import { mergeAliasStyles, tagTokenAliases } from './tokenAliases';
+
+/** User-friendly tone aliases map to {@link UiTone}. */
+export type TagToneInput = UiToneInput | 'info' | 'caution';
+
+export type TagVariant = UiVariant;
+export type TagTone = UiTone;
+export type TagEmphasis = UiEmphasis;
+
+type TagStyleTone = 'default' | 'success' | 'error' | 'information' | 'warning';
+type TagEmphasisMatrix = 'subtle' | 'muted' | 'default' | 'strong';
+
+const TAG_INVERSE =
+  'border-transparent bg-ds-bg-neutral-subtle-default !text-ds-text-neutral-default-default';
+
+export function normalizeTagTone(tone?: TagToneInput): UiTone {
+  if (!tone || tone === 'default') return 'neutral';
+  if (tone === 'info') return 'information';
+  if (tone === 'caution') return 'error';
+  return tone;
+}
+
+function toStyleTone(tone: UiTone): TagStyleTone {
+  return tone === 'neutral' ? 'default' : tone;
+}
+
+function resolveTagAxes(
+  variant: TagVariant | undefined,
+  tone: TagToneInput | undefined,
+  emphasis: TagEmphasis | undefined
+): {
+  variant: UiVariant;
+  tone: UiTone;
+  emphasis: TagEmphasis;
+} {
+  const base = variant ?? 'primary';
+  return {
+    variant: base,
+    tone: normalizeTagTone(tone),
+    emphasis: emphasis ?? DEFAULT_EMPHASIS_BY_VARIANT[base],
+  };
+}
+
+/** Filled chips — emphasis ramps from quiet surface to solid semantic fill. */
+const TAG_PRIMARY: Record<TagStyleTone, Record<TagEmphasisMatrix, string>> = {
+  default: {
+    subtle:
+      'border-transparent bg-ds-bg-neutral-subtle-default !text-ds-text-neutral-default-default',
+    muted:
+      'border-transparent bg-ds-bg-neutral-subtle-default !text-ds-text-neutral-muted-default',
+    default:
+      'border-transparent bg-ds-bg-neutral-default-default !text-ds-text-neutral-default-default',
+    strong:
+      'border-transparent bg-ds-bg-brand-default-default !text-ds-text-brand-inverse-default',
+  },
+  success: {
+    subtle:
+      'border-transparent bg-ds-bg-status-completed-subtle-default !text-ds-text-status-completed-muted-default',
+    muted:
+      'border-transparent bg-ds-bg-neutral-subtle-default !text-ds-text-success-strong-default',
+    default:
+      'border-transparent bg-ds-bg-success-subtle-default !text-ds-text-success-strong-default',
+    strong:
+      'border-transparent bg-ds-bg-success-default-default !text-ds-text-success-inverse-default',
+  },
+  error: {
+    subtle:
+      'border-transparent bg-ds-bg-status-error-subtle-default !text-ds-text-status-error-muted-default',
+    muted:
+      'border-transparent bg-ds-bg-neutral-subtle-default !text-ds-text-error-strong-default',
+    default:
+      'border-transparent bg-ds-bg-error-subtle-default !text-ds-text-error-strong-default',
+    strong:
+      'border-transparent bg-ds-bg-error-default-default !text-ds-text-error-inverse-default',
+  },
+  information: {
+    subtle:
+      'border-transparent bg-ds-bg-status-splitting-subtle-default !text-ds-text-status-splitting-muted-default',
+    muted:
+      'border-transparent bg-ds-bg-neutral-subtle-default !text-ds-text-information-strong-default',
+    default:
+      'border-transparent bg-ds-bg-information-subtle-default !text-ds-text-information-strong-default',
+    strong:
+      'border-transparent bg-ds-bg-information-default-default !text-ds-text-information-inverse-default',
+  },
+  warning: {
+    subtle:
+      'border-transparent bg-ds-bg-status-pending-subtle-default !text-ds-text-status-pending-muted-default',
+    muted:
+      'border-transparent bg-ds-bg-neutral-subtle-default !text-ds-text-warning-strong-default',
+    default:
+      'border-transparent bg-ds-bg-warning-subtle-default !text-ds-text-warning-strong-default',
+    strong:
+      'border-transparent bg-ds-bg-warning-default-default !text-ds-text-warning-inverse-default',
+  },
+};
+
+/** Softer bordered / filled secondary surface. */
+const TAG_SECONDARY: Record<TagStyleTone, Record<TagEmphasisMatrix, string>> = {
+  default: {
+    subtle:
+      'border-ds-border-neutral-muted-default bg-ds-bg-neutral-subtle-default !text-ds-text-neutral-muted-default',
+    muted:
+      'border-transparent bg-ds-bg-neutral-default-default !text-ds-text-neutral-muted-default',
+    default:
+      'border-ds-border-neutral-default-default bg-ds-bg-neutral-subtle-default !text-ds-text-neutral-default-default',
+    strong:
+      'border-ds-border-neutral-strong-default bg-ds-bg-neutral-default-default !text-ds-text-neutral-default-default',
+  },
+  success: {
+    subtle:
+      'border-ds-border-success-muted-default bg-ds-bg-success-subtle-default !text-ds-text-status-completed-muted-default',
+    muted:
+      'border-transparent bg-ds-bg-neutral-subtle-default !text-ds-text-success-strong-default',
+    default:
+      'border-ds-border-success-default-default bg-ds-bg-success-subtle-default !text-ds-text-success-strong-default',
+    strong:
+      'border-ds-border-success-default-default bg-ds-bg-success-default-default !text-ds-text-success-inverse-default',
+  },
+  error: {
+    subtle:
+      'border-ds-border-error-muted-default bg-ds-bg-error-subtle-default !text-ds-text-status-error-muted-default',
+    muted:
+      'border-transparent bg-ds-bg-neutral-subtle-default !text-ds-text-error-strong-default',
+    default:
+      'border-ds-border-error-default-default bg-ds-bg-error-subtle-default !text-ds-text-error-strong-default',
+    strong:
+      'border-ds-border-error-default-default bg-ds-bg-error-default-default !text-ds-text-error-inverse-default',
+  },
+  information: {
+    subtle:
+      'border-ds-border-information-muted-default bg-ds-bg-information-subtle-default !text-ds-text-status-splitting-muted-default',
+    muted:
+      'border-transparent bg-ds-bg-neutral-subtle-default !text-ds-text-information-strong-default',
+    default:
+      'border-ds-border-information-default-default bg-ds-bg-information-subtle-default !text-ds-text-information-strong-default',
+    strong:
+      'border-ds-border-information-default-default bg-ds-bg-information-default-default !text-ds-text-information-inverse-default',
+  },
+  warning: {
+    subtle:
+      'border-ds-border-warning-muted-default bg-ds-bg-warning-subtle-default !text-ds-text-status-pending-muted-default',
+    muted:
+      'border-transparent bg-ds-bg-neutral-subtle-default !text-ds-text-warning-strong-default',
+    default:
+      'border-ds-border-warning-default-default bg-ds-bg-warning-subtle-default !text-ds-text-warning-strong-default',
+    strong:
+      'border-ds-border-warning-default-default bg-ds-bg-warning-default-default !text-ds-text-warning-inverse-default',
+  },
+};
+
+/** Transparent fill; semantic border. */
+const TAG_OUTLINE: Record<TagStyleTone, Record<TagEmphasisMatrix, string>> = {
+  default: {
+    subtle:
+      'border-ds-border-neutral-muted-default bg-transparent !text-ds-text-neutral-muted-default',
+    muted:
+      'border-ds-border-neutral-muted-default bg-transparent !text-ds-text-neutral-muted-default',
+    default:
+      'border-ds-border-neutral-strong-default bg-transparent !text-ds-text-neutral-default-default',
+    strong:
+      'border-ds-border-neutral-strong-default bg-transparent !text-ds-text-neutral-default-default font-semibold',
+  },
+  success: {
+    subtle:
+      'border-ds-border-success-muted-default bg-transparent !text-ds-text-status-completed-muted-default',
+    muted:
+      'border-ds-border-neutral-default-default bg-transparent !text-ds-text-success-strong-default',
+    default:
+      'border-ds-border-success-default-default bg-transparent !text-ds-text-success-strong-default',
+    strong:
+      'border-ds-border-success-strong-default bg-transparent !text-ds-text-success-strong-default font-semibold',
+  },
+  error: {
+    subtle:
+      'border-ds-border-error-muted-default bg-transparent !text-ds-text-status-error-muted-default',
+    muted:
+      'border-ds-border-neutral-default-default bg-transparent !text-ds-text-error-strong-default',
+    default:
+      'border-ds-border-error-default-default bg-transparent !text-ds-text-error-strong-default',
+    strong:
+      'border-ds-border-error-strong-default bg-transparent !text-ds-text-error-strong-default font-semibold',
+  },
+  information: {
+    subtle:
+      'border-ds-border-information-muted-default bg-transparent !text-ds-text-status-splitting-muted-default',
+    muted:
+      'border-ds-border-neutral-default-default bg-transparent !text-ds-text-information-strong-default',
+    default:
+      'border-ds-border-information-default-default bg-transparent !text-ds-text-information-strong-default',
+    strong:
+      'border-ds-border-information-strong-default bg-transparent !text-ds-text-information-strong-default font-semibold',
+  },
+  warning: {
+    subtle:
+      'border-ds-border-warning-muted-default bg-transparent !text-ds-text-status-pending-muted-default',
+    muted:
+      'border-ds-border-neutral-default-default bg-transparent !text-ds-text-warning-strong-default',
+    default:
+      'border-ds-border-warning-default-default bg-transparent !text-ds-text-warning-strong-default',
+    strong:
+      'border-ds-border-warning-strong-default bg-transparent !text-ds-text-warning-strong-default font-semibold',
+  },
+};
+
+/** No border; text-first. */
+const TAG_GHOST: Record<TagStyleTone, Record<TagEmphasisMatrix, string>> = {
+  default: {
+    subtle:
+      'border-transparent bg-transparent !text-ds-text-neutral-muted-default',
+    muted:
+      'border-transparent bg-transparent !text-ds-text-neutral-muted-default',
+    default:
+      'border-transparent bg-transparent !text-ds-text-neutral-default-default',
+    strong:
+      'border-transparent bg-transparent !text-ds-text-neutral-default-default font-semibold',
+  },
+  success: {
+    subtle:
+      'border-transparent bg-transparent !text-ds-text-status-completed-muted-default',
+    muted:
+      'border-transparent bg-transparent opacity-80 !text-ds-text-success-strong-default',
+    default:
+      'border-transparent bg-transparent !text-ds-text-success-strong-default',
+    strong:
+      'border-transparent bg-transparent !text-ds-text-success-strong-default font-semibold',
+  },
+  error: {
+    subtle:
+      'border-transparent bg-transparent !text-ds-text-status-error-muted-default',
+    muted:
+      'border-transparent bg-transparent opacity-80 !text-ds-text-error-strong-default',
+    default:
+      'border-transparent bg-transparent !text-ds-text-error-strong-default',
+    strong:
+      'border-transparent bg-transparent !text-ds-text-error-strong-default font-semibold',
+  },
+  information: {
+    subtle:
+      'border-transparent bg-transparent !text-ds-text-status-splitting-muted-default',
+    muted:
+      'border-transparent bg-transparent opacity-80 !text-ds-text-information-strong-default',
+    default:
+      'border-transparent bg-transparent !text-ds-text-information-strong-default',
+    strong:
+      'border-transparent bg-transparent !text-ds-text-information-strong-default font-semibold',
+  },
+  warning: {
+    subtle:
+      'border-transparent bg-transparent !text-ds-text-status-pending-muted-default',
+    muted:
+      'border-transparent bg-transparent opacity-80 !text-ds-text-warning-strong-default',
+    default:
+      'border-transparent bg-transparent !text-ds-text-warning-strong-default',
+    strong:
+      'border-transparent bg-transparent !text-ds-text-warning-strong-default font-semibold',
+  },
+};
+
+const TAG_BY_VARIANT: Record<
+  UiVariant,
+  Record<TagStyleTone, Record<TagEmphasisMatrix, string>>
+> = {
+  primary: TAG_PRIMARY,
+  secondary: TAG_SECONDARY,
+  outline: TAG_OUTLINE,
+  ghost: TAG_GHOST,
+};
+
+function tagChromeClasses(
+  variant: UiVariant,
+  styleTone: TagStyleTone,
+  emphasis: TagEmphasis
+): string {
+  if (emphasis === 'inverse') {
+    return TAG_INVERSE;
+  }
+  const em = emphasis as TagEmphasisMatrix;
+  return TAG_BY_VARIANT[variant][styleTone][em];
+}
 
 const tagVariants = cva(
-  'inline-flex justify-start items-center leading-relaxed',
+  'inline-flex justify-start items-center border border-solid leading-relaxed transition-colors duration-150',
   {
     variants: {
-      variant: {
-        primary: 'bg-tag-fill-info text-[var(--tag-foreground-info)]',
-        info: 'bg-tag-fill-info !text-[var(--tag-foreground-info)]',
-        success: 'bg-tag-fill-success !text-[var(--tag-foreground-success)]',
-        cuation: 'bg-tag-fill-cuation !text-[var(--tag-foreground-cuation)]',
-        warning: 'bg-tag-fill-warning !text-[var(--tag-foreground-warning)]',
-        default: 'bg-tag-fill-default !text-[var(--tag-foreground-default)]',
-        ghost: 'bg-transparent !text-[var(--tag-foreground-default)]',
-      },
       size: {
-        xs: 'px-2 py-0.5 gap-1 text-body-xs font-bold leading-tight [&_svg]:size-[10px] rounded-full',
-        sm: 'px-2 py-1.5 gap-1 text-body-xs font-bold leading-tight [&_svg]:size-[16px] rounded-full',
-        md: 'px-3 py-1.5 gap-2 text-body-md font-semibold leading-relaxed [&_svg]:size-[20px] rounded-xl',
+        xxs: 'gap-0.5 rounded-full px-1.5 py-px text-label-xs font-medium [&_svg]:size-[12px]',
+        xs: 'gap-1 rounded-full px-2 py-0.5 text-label-xs font-medium [&_svg]:size-[14px]',
+        sm: 'gap-1 rounded-full px-2 py-1 text-label-sm font-medium [&_svg]:size-[16px]',
+        md: 'gap-1.5 rounded-full px-2.5 py-1 text-label-md font-medium [&_svg]:size-[18px]',
+        lg: 'gap-2 rounded-full px-3 py-1.5 text-label-md font-semibold [&_svg]:size-[20px]',
       },
     },
     defaultVariants: {
-      variant: 'primary',
       size: 'sm',
     },
   }
 );
 
-interface TagProps
-  extends React.ComponentProps<'div'>, VariantProps<typeof tagVariants> {
+type TagSize = NonNullable<VariantProps<typeof tagVariants>['size']>;
+
+interface TagProps extends React.ComponentProps<'div'> {
   asChild?: boolean;
+  /** Chrome pattern: filled, softer fill, outline, or text-only. */
+  variant?: TagVariant;
+  /** Visual weight within the chosen `variant`. */
+  emphasis?: TagEmphasis;
+  /**
+   * Semantic palette. Shorthands: `info` → information, `caution` → error; `default` → neutral.
+   * Omitted tone reads as neutral.
+   */
+  tone?: TagToneInput;
+  size?: TagSize;
   text?: string;
   icon?: React.ReactNode;
 }
@@ -55,24 +345,37 @@ const Tag = React.forwardRef<HTMLDivElement, TagProps>(
   (
     {
       className,
-      variant,
+      variant: variantProp,
+      emphasis: emphasisProp,
+      tone: toneProp,
       size,
       asChild = false,
       text,
       icon,
       children,
+      style,
       ...props
     },
     ref
   ) => {
     const Comp = asChild ? Slot : 'div';
+    const { variant, tone, emphasis } = resolveTagAxes(
+      variantProp,
+      toneProp,
+      emphasisProp
+    );
+    const styleTone = toStyleTone(tone);
+    const chrome = tagChromeClasses(variant, styleTone, emphasis);
 
-    // When asChild is true, just pass through the child without wrapping
     if (asChild) {
       return (
         <Comp
           ref={ref}
-          className={cn(tagVariants({ variant, size, className }))}
+          data-variant={variant}
+          data-tone={tone}
+          data-emphasis={emphasis}
+          className={cn(tagVariants({ size }), chrome, className)}
+          style={mergeAliasStyles(tagTokenAliases, style)}
           {...props}
         >
           {children}
@@ -80,11 +383,14 @@ const Tag = React.forwardRef<HTMLDivElement, TagProps>(
       );
     }
 
-    // Normal rendering when asChild is false
     return (
       <Comp
         ref={ref}
-        className={cn(tagVariants({ variant, size, className }))}
+        data-variant={variant}
+        data-tone={tone}
+        data-emphasis={emphasis}
+        className={cn(tagVariants({ size }), chrome, className)}
+        style={mergeAliasStyles(tagTokenAliases, style)}
         {...props}
       >
         {icon && <span className="flex-shrink-0">{icon}</span>}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index f7043a85f..50877a59f 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -17,6 +17,13 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { CircleAlert } from 'lucide-react';
 import { Button } from './button';
+import {
+  formFieldNoteTextClassName,
+  formFieldTextareaSizeClasses,
+  formFieldTextareaStateClasses,
+  type TextareaFormFieldState,
+} from './formFieldSurface';
+import { formControlTokenAliases, mergeAliasStyles } from './tokenAliases';
 import { TooltipSimple } from './tooltip';
 
 export type TextareaVariant = 'none' | 'enhanced';
@@ -44,54 +51,6 @@ type BaseTextareaProps = Omit<React.ComponentProps<'textarea'>, 'size'> & {
   onEnter?: () => void;
 };
 
-const sizeClasses: Record<TextareaSize, string> = {
-  default: 'min-h-[60px] text-body-sm md:text-sm',
-  sm: 'min-h-[40px] text-body-sm',
-};
-
-function resolveStateClasses(state: TextareaState | undefined) {
-  if (state === 'disabled') {
-    return {
-      container: 'opacity-50 cursor-not-allowed',
-      field: 'border-transparent bg-input-bg-default text-input-text-default',
-      placeholder: 'text-input-label-default',
-    };
-  }
-  if (state === 'hover') {
-    return {
-      container: '',
-      field: 'border-transparent bg-input-bg-default text-input-text-default',
-      placeholder: 'text-input-label-default',
-    };
-  }
-  if (state === 'input') {
-    return {
-      container: '',
-      field: 'border-transparent bg-input-bg-input text-input-text-focus',
-      placeholder: 'text-input-label-default',
-    };
-  }
-  if (state === 'error') {
-    return {
-      container: '',
-      field: 'border-input-border-cuation bg-input-bg-default text-text-body',
-      placeholder: 'text-input-label-default',
-    };
-  }
-  if (state === 'success') {
-    return {
-      container: '',
-      field: 'border-input-border-success bg-input-bg-confirm text-text-body',
-      placeholder: 'text-input-label-default',
-    };
-  }
-  return {
-    container: '',
-    field: 'border-transparent bg-input-bg-default text-input-text-default',
-    placeholder: 'text-input-label-default/10',
-  };
-}
-
 const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
   (
     {
@@ -121,12 +80,16 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
       return (
         <>
           <textarea
+            {...textareaProps}
             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-ds-border-neutral-default-default placeholder:text-ds-text-neutral-muted-default/20 focus-visible:ring-ds-ring-brand-default-focus 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) }}
+            style={mergeAliasStyles(formControlTokenAliases, {
+              paddingRight: '4px',
+              ...(style as React.CSSProperties),
+            })}
             ref={ref}
             disabled={disabled}
             placeholder={placeholder}
@@ -139,16 +102,15 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
               }
               onKeyDown?.(e);
             }}
-            {...textareaProps}
           />
           <style>{`
             /* Firefox */
             [data-scrollbar="ui-textarea"] { scrollbar-width: thin; }
             /* Ensure 4px track in Firefox (thin is ~6px, so tighten via colors) */
-            [data-scrollbar="ui-textarea"] { scrollbar-color: var(--scrollbar-thumb, rgba(0,0,0,0.3)) transparent; }
+            [data-scrollbar="ui-textarea"] { scrollbar-color: var(--scrollbar-thumb, var(--colors-black-30)) transparent; }
             /* WebKit */
             [data-scrollbar="ui-textarea"]::-webkit-scrollbar { width: 4px; height: 4px; }
-            [data-scrollbar="ui-textarea"]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb, rgba(0,0,0,0.3)); border-radius: 9999px; }
+            [data-scrollbar="ui-textarea"]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb, var(--colors-black-30)); border-radius: 9999px; }
             [data-scrollbar="ui-textarea"]::-webkit-scrollbar-track { background: transparent; }
           `}</style>
         </>
@@ -156,20 +118,30 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
     }
 
     // Enhanced variant with input-like functionality
-    const stateCls = resolveStateClasses(disabled ? 'disabled' : state);
+    const stateCls = formFieldTextareaStateClasses(
+      disabled ? 'disabled' : (state as TextareaFormFieldState)
+    );
     const hasLeft = Boolean(leadingIcon);
     const hasRight = Boolean(backIcon) || Boolean(trailingButton);
 
     return (
       <>
-        <div className={cn('w-full', stateCls.container)}>
+        <div
+          className={cn('w-full', stateCls.container)}
+          style={formControlTokenAliases}
+        >
           {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-ds-text-neutral-default-default flex items-center">
               <span>{title}</span>
-              {required && <span className="text-text-body">*</span>}
+              {required && (
+                <span className="text-ds-text-neutral-default-default">*</span>
+              )}
               {tooltip && (
                 <TooltipSimple content={tooltip}>
-                  <CircleAlert size={16} className="text-icon-primary" />
+                  <CircleAlert
+                    size={16}
+                    className="text-ds-icon-neutral-default-default"
+                  />
                 </TooltipSimple>
               )}
             </div>
@@ -177,22 +149,26 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
 
           <div
             className={cn(
-              'relative flex items-start rounded-lg border border-solid shadow-sm 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',
+              'rounded-lg shadow-sm relative flex items-start border border-solid transition-all',
               stateCls.field,
-              sizeClasses[size]
+              formFieldTextareaSizeClasses[size],
+              state !== 'error' &&
+                state !== 'success' && [
+                  'hover:bg-ds-bg-neutral-subtle-default',
+                  'focus-within:bg-ds-bg-neutral-subtle-default',
+                  'focus-within:ring-ds-ring-brand-default-focus hover:ring-ds-ring-neutral-strong-default',
+                  'focus-within:ring-1 focus-within:ring-offset-0 hover:ring-1 hover:ring-offset-0',
+                ]
             )}
           >
             {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-ds-icon-neutral-default-default pointer-events-none absolute inline-flex items-center justify-center">
                 {leadingIcon}
               </span>
             ) : null}
 
             <textarea
+              {...textareaProps}
               data-scrollbar="ui-textarea"
               ref={ref}
               disabled={disabled}
@@ -215,13 +191,13 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
                 }
                 onKeyDown?.(e);
               }}
-              {...textareaProps}
             />
 
             {backIcon ? (
               <Button
                 variant="ghost"
-                size="icon"
+                size="xs"
+                buttonContent="icon-only"
                 type="button"
                 tabIndex={-1}
                 disabled={disabled}
@@ -234,7 +210,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
             {trailingButton ? (
               <div
                 className={cn(
-                  'absolute right-2 top-2',
+                  'right-2 top-2 absolute',
                   backIcon ? '-mr-7' : ''
                 )}
               >
@@ -247,16 +223,18 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
             <div
               className={cn(
                 'mt-1.5 !text-body-xs',
-                state === 'error'
-                  ? 'text-text-cuation'
-                  : state === 'success'
-                    ? 'text-text-success'
-                    : 'text-text-label'
+                formFieldNoteTextClassName(
+                  state === 'error'
+                    ? 'error'
+                    : state === 'success'
+                      ? 'success'
+                      : 'default'
+                )
               )}
               dangerouslySetInnerHTML={{
                 __html: note.replace(
                   /(https?:\/\/[^\s]+)/g,
-                  '<a href="$1" target="_blank" rel="noopener noreferrer" class="underline text-text-information hover:opacity-70 cursor-pointer transition-opacity duration-200">$1</a>'
+                  '<a href="$1" target="_blank" rel="noopener noreferrer" class="underline text-ds-text-status-splitting-strong-default hover:opacity-70 cursor-pointer transition-opacity duration-200">$1</a>'
                 ),
               }}
             />
@@ -266,10 +244,10 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, BaseTextareaProps>(
           /* Firefox */
           [data-scrollbar="ui-textarea"] { scrollbar-width: thin; }
           /* Ensure 4px track in Firefox (thin is ~6px, so tighten via colors) */
-          [data-scrollbar="ui-textarea"] { scrollbar-color: var(--scrollbar-thumb, rgba(0,0,0,0.3)) transparent; }
+          [data-scrollbar="ui-textarea"] { scrollbar-color: var(--scrollbar-thumb, var(--colors-black-30)) transparent; }
           /* WebKit */
           [data-scrollbar="ui-textarea"]::-webkit-scrollbar { width: 4px; height: 4px; }
-          [data-scrollbar="ui-textarea"]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb, rgba(0,0,0,0.3)); border-radius: 9999px; }
+          [data-scrollbar="ui-textarea"]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb, var(--colors-black-30)); border-radius: 9999px; }
           [data-scrollbar="ui-textarea"]::-webkit-scrollbar-track { background: transparent; }
         `}</style>
       </>
diff --git a/src/components/ui/toggle-group.tsx b/src/components/ui/toggle-group.tsx
index 8d82438f8..b2df6eeaf 100644
--- a/src/components/ui/toggle-group.tsx
+++ b/src/components/ui/toggle-group.tsx
@@ -33,7 +33,7 @@ const ToggleGroup = React.forwardRef<
 >(({ className, variant, size, children, ...props }, ref) => (
   <ToggleGroupPrimitive.Root
     ref={ref}
-    className={cn('flex items-center justify-center gap-1', className)}
+    className={cn('gap-1 flex items-center justify-center', className)}
     {...props}
   >
     <ToggleGroupContext.Provider value={{ variant, size }}>
@@ -59,7 +59,7 @@ const ToggleGroupItem = React.forwardRef<
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        'border-border-disabled bg-surface-primary data-[state=on]:border-border-secondary data-[state=on]:bg-surface-tertiary',
+        'border-ds-border-neutral-muted-disabled bg-ds-bg-neutral-subtle-default data-[state=on]:border-ds-border-neutral-default-default data-[state=on]:bg-ds-bg-neutral-strong-default',
         className
       )}
       {...props}
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
index e55bac98e..853865431 100644
--- a/src/components/ui/toggle.tsx
+++ b/src/components/ui/toggle.tsx
@@ -21,13 +21,13 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 
 const toggleVariants = cva(
-  'inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-colors border border-transparent border-solid hover:bg-menubutton-fill-active focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:border-menubutton-border-active data-[state=on]:bg-menubutton-fill-active data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-colors border border-transparent border-solid hover:bg-ds-bg-neutral-default-default focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ds-ring-brand-default-focus disabled:pointer-events-none disabled:opacity-50 data-[state=on]:border-ds-border-brand-default-focus data-[state=on]:bg-ds-bg-neutral-default-default data-[state=on]:text-ds-text-neutral-default-default [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
         default: 'bg-transparent',
         outline:
-          'border border-input bg-transparent shadow-sm hover:bg-white-100% hover:text-accent-foreground',
+          'border border-ds-border-neutral-default-default bg-transparent shadow-sm hover:bg-ds-bg-neutral-inverse-default hover:text-ds-text-neutral-default-default',
       },
       size: {
         default: 'h-9 px-2 min-w-9',
@@ -49,7 +49,7 @@ const Toggle = React.forwardRef<
 >(({ className, variant, size, ...props }, ref) => (
   <TogglePrimitive.Root
     ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
+    className={cn(toggleVariants({ variant, size }), className)}
     {...props}
   />
 ));
diff --git a/src/components/ui/tokenAliases.ts b/src/components/ui/tokenAliases.ts
new file mode 100644
index 000000000..efedb8e6b
--- /dev/null
+++ b/src/components/ui/tokenAliases.ts
@@ -0,0 +1,141 @@
+// ========= 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 React from 'react';
+
+type CssVarMap = React.CSSProperties & Record<`--${string}`, string>;
+
+function asCssVarMap(map: Record<`--${string}`, string>): CssVarMap {
+  return map as CssVarMap;
+}
+
+export function mergeAliasStyles(
+  base: CssVarMap,
+  style?: React.CSSProperties
+): React.CSSProperties {
+  return style ? ({ ...base, ...style } as React.CSSProperties) : base;
+}
+
+export const formControlTokenAliases = asCssVarMap({
+  '--input-bg-default': 'var(--ds-bg-neutral-default-default)',
+  '--input-bg-hover': 'var(--ds-bg-neutral-default-hover)',
+  '--input-bg-input': 'var(--ds-bg-neutral-strong-default)',
+  '--input-bg-confirm': 'var(--ds-bg-status-completed-subtle-default)',
+  '--input-border-default': 'var(--ds-border-neutral-default-default)',
+  '--input-border-hover': 'var(--ds-border-neutral-strong-default)',
+  '--input-border-focus': 'var(--ds-border-brand-default-focus)',
+  '--input-border-success': 'var(--ds-border-status-completed-default-default)',
+  '--input-border-caution': 'var(--ds-border-status-error-default-default)',
+  '--input-text-default': 'var(--ds-text-neutral-default-default)',
+  '--input-text-focus': 'var(--ds-text-neutral-default-default)',
+  '--input-label-default': 'var(--ds-text-neutral-muted-default)',
+  '--text-heading': 'var(--ds-text-neutral-default-default)',
+  '--text-body': 'var(--ds-text-neutral-default-default)',
+  '--text-label': 'var(--ds-text-neutral-muted-default)',
+  '--text-success': 'var(--ds-text-status-completed-strong-default)',
+  '--text-caution': 'var(--ds-text-status-error-strong-default)',
+  '--text-information': 'var(--ds-text-status-splitting-strong-default)',
+  '--icon-primary': 'var(--ds-icon-neutral-default-default)',
+  '--menutabs-fill-hover': 'var(--ds-bg-neutral-default-hover)',
+});
+
+export const buttonTokenAliases = asCssVarMap({
+  '--button-primary-fill-default': 'var(--ds-bg-brand-default-default)',
+  '--button-primary-fill-hover': 'var(--ds-bg-brand-default-hover)',
+  '--button-primary-fill-active': 'var(--ds-bg-brand-default-active)',
+  '--button-primary-fill-disabled': 'var(--ds-bg-neutral-muted-disabled)',
+  '--button-primary-text-default': 'var(--ds-text-brand-inverse-default)',
+  '--button-primary-text-hover': 'var(--ds-text-brand-inverse-default)',
+  '--button-primary-text-active': 'var(--ds-text-brand-inverse-default)',
+  '--button-primary-text-disabled': 'var(--ds-text-neutral-muted-disabled)',
+
+  '--button-secondary-fill-default': 'var(--ds-bg-neutral-default-default)',
+  '--button-secondary-fill-hover': 'var(--ds-bg-neutral-default-hover)',
+  '--button-secondary-fill-active': 'var(--ds-bg-neutral-default-active)',
+  '--button-secondary-fill-disabled': 'var(--ds-bg-neutral-muted-disabled)',
+  '--button-secondary-text-default': 'var(--ds-text-neutral-default-default)',
+  '--button-secondary-text-hover': 'var(--ds-text-neutral-default-default)',
+  '--button-secondary-text-active': 'var(--ds-text-neutral-default-default)',
+  '--button-secondary-text-disabled': 'var(--ds-text-neutral-muted-disabled)',
+
+  '--button-tertiary-fill-default': 'var(--ds-bg-neutral-subtle-default)',
+  '--button-tertiary-fill-hover': 'var(--ds-bg-neutral-default-hover)',
+  '--button-tertiary-fill-active': 'var(--ds-bg-neutral-default-active)',
+  '--button-tertiary-fill-disabled': 'var(--ds-bg-neutral-muted-disabled)',
+  '--button-tertiary-text-default': 'var(--ds-text-neutral-default-default)',
+  '--button-tertiary-text-hover': 'var(--ds-text-neutral-default-default)',
+  '--button-tertiary-text-active': 'var(--ds-text-neutral-default-default)',
+  '--button-tertiary-text-disabled': 'var(--ds-text-neutral-muted-disabled)',
+
+  '--button-transparent-fill-default': 'transparent',
+  '--button-transparent-fill-hover': 'var(--ds-bg-neutral-default-hover)',
+  '--button-transparent-fill-active': 'var(--ds-bg-neutral-default-active)',
+  '--button-transparent-fill-disabled': 'transparent',
+  '--button-transparent-text-default': 'var(--ds-text-neutral-default-default)',
+  '--button-transparent-text-hover': 'var(--ds-text-neutral-default-default)',
+  '--button-transparent-text-active': 'var(--ds-text-neutral-default-default)',
+  '--button-transparent-text-disabled': 'var(--ds-text-neutral-muted-disabled)',
+
+  '--button-fill-success': 'var(--ds-bg-status-completed-default-default)',
+  '--button-fill-success-foreground':
+    'var(--ds-text-status-completed-strong-default)',
+  '--fill-fill-success-hover': 'var(--ds-bg-status-completed-subtle-hover)',
+  '--fill-fill-success-active': 'var(--ds-bg-status-completed-default-default)',
+
+  '--button-fill-caution': 'var(--ds-bg-status-error-default-default)',
+  '--button-fill-caution-foreground':
+    'var(--ds-text-status-error-strong-default)',
+
+  '--button-fill-information': 'var(--ds-bg-status-splitting-default-default)',
+  '--button-fill-information-foreground':
+    'var(--ds-text-status-splitting-strong-default)',
+
+  '--button-fill-warning': 'var(--ds-bg-status-pending-default-default)',
+  '--button-fill-warning-foreground':
+    'var(--ds-text-status-pending-strong-default)',
+});
+
+export const tagTokenAliases = asCssVarMap({
+  '--tag-fill-info': 'var(--ds-bg-status-splitting-subtle-default)',
+  '--tag-foreground-info': 'var(--ds-text-status-splitting-strong-default)',
+  '--tag-fill-success': 'var(--ds-bg-status-completed-subtle-default)',
+  '--tag-foreground-success': 'var(--ds-text-status-completed-strong-default)',
+  '--tag-fill-warning': 'var(--ds-bg-status-pending-subtle-default)',
+  '--tag-foreground-warning': 'var(--ds-text-status-pending-strong-default)',
+  '--tag-fill-caution': 'var(--ds-bg-status-error-subtle-default)',
+  '--tag-foreground-caution': 'var(--ds-text-status-error-strong-default)',
+  '--tag-fill-default': 'var(--ds-bg-neutral-default-default)',
+  '--tag-foreground-default': 'var(--ds-text-neutral-default-default)',
+});
+
+export const checkboxTokenAliases = asCssVarMap({
+  '--input-border-default': 'var(--ds-border-neutral-default-default)',
+  '--input-bg-default': 'var(--ds-bg-neutral-default-default)',
+  '--input-border-hover': 'var(--ds-border-neutral-strong-default)',
+  '--switch-on-fill-track-fill':
+    'var(--ds-bg-status-completed-default-default)',
+  '--switch-on-fill-thumb-fill': 'var(--ds-text-brand-inverse-default)',
+});
+
+export const switchTokenAliases = asCssVarMap({
+  '--switch-on-fill-track-fill':
+    'var(--ds-bg-status-completed-default-default)',
+  '--switch-off-fill-track-fill': 'var(--ds-bg-neutral-subtle-default)',
+  '--switch-on-fill-thumb-fill': 'var(--ds-text-brand-inverse-default)',
+});
+
+export const tooltipTokenAliases = asCssVarMap({
+  '--border-secondary': 'var(--ds-border-neutral-default-default)',
+  '--text-primary': 'var(--ds-text-neutral-default-default)',
+});
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 579402653..221181b77 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -16,6 +16,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import { mergeAliasStyles, tooltipTokenAliases } from './tokenAliases';
 
 const TooltipProvider = TooltipPrimitive.Provider;
 
@@ -26,15 +27,16 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 4, style, ...props }, ref) => (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-md border border-border-secondary bg-surface-tertiary px-2 py-1.5 text-xs text-text-primary shadow-md backdrop-blur-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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',
+        'rounded-md border-ds-border-neutral-default-default bg-ds-bg-neutral-strong-default px-2 py-1.5 text-xs text-ds-text-neutral-default-default shadow-md backdrop-blur-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-[100] origin-[--radix-tooltip-content-transform-origin] overflow-hidden border',
         className
       )}
+      style={mergeAliasStyles(tooltipTokenAliases, style)}
       {...props}
     />
   </TooltipPrimitive.Portal>
@@ -97,6 +99,7 @@ const TooltipSimple = React.forwardRef<
     );
   }
 );
+TooltipSimple.displayName = 'TooltipSimple';
 
 export {
   Tooltip,
diff --git a/src/components/update/index.tsx b/src/components/update/index.tsx
index ea0fbd984..447caa981 100644
--- a/src/components/update/index.tsx
+++ b/src/components/update/index.tsx
@@ -20,38 +20,21 @@ import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 
 const Update = () => {
-  const host = useHost();
-  const ipcRenderer = host?.ipcRenderer;
   const [downloadProgress, setDownloadProgress] = useState<number>(0);
   const [isDownloading, setIsDownloading] = useState<boolean>(false);
   const { t } = useTranslation();
+  const host = useHost();
+  const ipc = host?.ipcRenderer;
 
   const checkUpdate = useCallback(() => {
-    ipcRenderer?.invoke('check-update');
-  }, [ipcRenderer]);
-
-  const onUpdateCanAvailable = useCallback(
-    (_event: Electron.IpcRendererEvent, info: VersionInfo) => {
-      if (info.update) {
-        toast(t('update.new-version-available'), {
-          description: `v${info.version} → v${info.newVersion}`,
-          action: {
-            label: t('update.download'),
-            onClick: () => {
-              setIsDownloading(true);
-              setDownloadProgress(0);
-              host?.ipcRenderer?.invoke('start-download');
-            },
-          },
-          duration: Infinity,
-        });
-      }
-    },
-    [host?.ipcRenderer, t]
-  );
+    void ipc?.invoke('check-update');
+  }, [ipc]);
 
   const onUpdateError = useCallback(
     (_event: Electron.IpcRendererEvent, err: ErrorType) => {
+      toast.dismiss('download-progress');
+      setIsDownloading(false);
+      setDownloadProgress(0);
       toast.error(t('update.update-error'), {
         description: err.message,
       });
@@ -61,7 +44,7 @@ const Update = () => {
 
   const onDownloadProgress = useCallback(
     (_event: Electron.IpcRendererEvent, progress: ProgressInfo) => {
-      console.log('Download progress received:', progress);
+      setIsDownloading(true);
       setDownloadProgress(progress.percent ?? 0);
     },
     []
@@ -72,7 +55,7 @@ const Update = () => {
     if (isDownloading) {
       toast.custom(
         (_toastId) => (
-          <div className="w-[300px] rounded-lg bg-white-100% p-4 shadow-lg">
+          <div className="rounded-lg bg-ds-bg-neutral-inverse-default p-4 shadow-lg w-[300px]">
             <div className="mb-2 text-sm font-medium">
               {t('update.downloading-update')}
             </div>
@@ -85,6 +68,7 @@ const Update = () => {
         {
           id: 'download-progress',
           duration: Infinity,
+          position: 'bottom-right',
         }
       );
     }
@@ -98,40 +82,31 @@ const Update = () => {
         description: t('update.click-to-install-update'),
         action: {
           label: t('update.install'),
-          onClick: () => ipcRenderer?.invoke('quit-and-install'),
+          onClick: () => void ipc?.invoke('quit-and-install'),
         },
         duration: Infinity,
       });
     },
-    [ipcRenderer, t]
+    [t, ipc]
   );
 
   useEffect(() => {
-    if (!ipcRenderer || sessionStorage.getItem('updateElectronShown')) {
+    if (sessionStorage.getItem('updateElectronShown')) {
       return;
     }
     sessionStorage.setItem('updateElectronShown', '1');
 
-    ipcRenderer.on('update-can-available', onUpdateCanAvailable);
-    ipcRenderer.on('update-error', onUpdateError);
-    ipcRenderer.on('download-progress', onDownloadProgress);
-    ipcRenderer.on('update-downloaded', onUpdateDownloaded);
+    ipc?.on('update-error', onUpdateError);
+    ipc?.on('download-progress', onDownloadProgress);
+    ipc?.on('update-downloaded', onUpdateDownloaded);
     checkUpdate();
 
     return () => {
-      ipcRenderer.off('update-can-available', onUpdateCanAvailable);
-      ipcRenderer.off('update-error', onUpdateError);
-      ipcRenderer.off('download-progress', onDownloadProgress);
-      ipcRenderer.off('update-downloaded', onUpdateDownloaded);
+      ipc?.off('update-error', onUpdateError);
+      ipc?.off('download-progress', onDownloadProgress);
+      ipc?.off('update-downloaded', onUpdateDownloaded);
     };
-  }, [
-    checkUpdate,
-    ipcRenderer,
-    onUpdateCanAvailable,
-    onUpdateError,
-    onDownloadProgress,
-    onUpdateDownloaded,
-  ]);
+  }, [ipc, onUpdateError, onDownloadProgress, onUpdateDownloaded, checkUpdate]);
 
   return null;
 };
diff --git a/src/hooks/use-app-version.tsx b/src/hooks/use-app-version.tsx
index a034953e6..241aa7dff 100644
--- a/src/hooks/use-app-version.tsx
+++ b/src/hooks/use-app-version.tsx
@@ -12,17 +12,20 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
+import { useHost } from '@/host';
 import { useEffect, useState } from 'react';
 
 export default function useAppVersion() {
   const [version, setVersion] = useState('');
+  const host = useHost();
+  const ipcRenderer = host?.ipcRenderer;
 
   useEffect(() => {
-    window?.ipcRenderer
+    ipcRenderer
       ?.invoke('get-app-version')
       .then((v: string) => setVersion(v))
       .catch(() => setVersion('Unknown'));
-  }, []);
+  }, [ipcRenderer]);
 
   return version;
 }
diff --git a/src/hooks/use-is-in-view.tsx b/src/hooks/use-is-in-view.tsx
index 73bd19534..4012fe146 100644
--- a/src/hooks/use-is-in-view.tsx
+++ b/src/hooks/use-is-in-view.tsx
@@ -24,7 +24,7 @@ interface UseIsInViewOptions {
 function useIsInView<T extends HTMLElement = HTMLElement>(
   ref: React.Ref<T>,
   options: UseIsInViewOptions = {}
-): { ref: React.MutableRefObject<T | null>; isInView: boolean } {
+) {
   const { inView, inViewOnce = false, inViewMargin = '0px' } = options;
   const localRef = React.useRef<T>(null);
   React.useImperativeHandle(ref, () => localRef.current as T);
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..3f0d76420 100644
--- a/src/i18n/locales/ar/agents.json
+++ b/src/i18n/locales/ar/agents.json
@@ -37,6 +37,7 @@
   "upload": "رفع",
   "invalid-file-type": "نوع ملف غير صالح. يرجى رفع ملف .skill أو .md أو .txt أو .json.",
   "file-too-large": "الملف كبير جداً. الحد الأقصى للحجم هو 1 ميجابايت.",
+  "zip-import-too-large": "ملف ZIP كبير جداً. الحد الأقصى 50 ميجابايت.",
   "file-read-error": "فشل في قراءة الملف. يرجى المحاولة مرة أخرى.",
   "reupload-file": "إعادة رفع ملف",
   "upload-error-invalid-format": "يجب أن يكون الملف .zip أو حزمة مهارة (.skill أو .md).",
@@ -46,5 +47,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..a75cce553 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": "بحث",
@@ -39,6 +47,7 @@
   "reassigned": "إعادة تعيين",
   "ongoing": "قيد التقدم",
   "pending": "قيد الانتظار",
+  "preparing-to-execute-tasks": "جارٍ التحضير لتنفيذ المهام",
   "failed": "فاشل",
   "all": "كل",
   "in-progress": "قيد التقدم",
@@ -53,19 +62,34 @@
   "new-project": "مشروع جديد",
   "no-reply-received-task-continue": "لم يتم استلام رد، تستمر المهمة",
   "splitting-tasks": "تقسيم المهام",
+  "working-on-tasks-for": "العمل على المهام لمدة <elapsed>{{time}}</elapsed>",
+  "worked-for": "عُمل لمدة <elapsed>{{time}}</elapsed>",
   "start-task": "بدء المهمة",
   "message-cannot-be-empty": "لا يمكن أن تكون الرسالة فارغة",
   "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..79cbe403b 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,10 +47,42 @@
   "browser": "المتصفح",
   "settings": "الإعدادات",
   "general": "عام",
-  "workers": "العمال",
+  "aiWorkforce": "قوة عمل الذكاء الاصطناعي",
+  "expand-workforce": "توسيع منطقة العمل",
+  "minimize-workforce": "تصغير منطقة العمل",
+  "show-workforce-panel": "إظهار لوحة القوى العاملة",
+  "hide-workforce-panel": "إخفاء لوحة القوى العاملة",
+  "show-side-panel": "إظهار اللوحة الجانبية",
+  "hide-side-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": "تنزيل السجلات",
+  "notifications": "الإشعارات",
+  "notifications-empty": "لا توجد إشعارات بعد.",
+  "support": "الدعم",
+  "log-file-empty": "ملف السجل فارغ",
   "new-project": "مشروع جديد",
   "welcome": "أهلاً وسهلاً",
+  "greeting-morning": "صباح",
+  "greeting-afternoon": "بعد الظهر",
+  "greeting-evening": "مساء",
   "delete-task": "حذف المهمة",
   "delete-task-confirmation": "هل أنت متأكد من أنك تريد حذف هذه المهمة؟ لا يمكن التراجع عن هذا الإجراء.",
   "delete": "حذف",
@@ -59,6 +92,10 @@
   "save": "حفظ",
   "not-found": "غير موجود",
   "tasks": "المهام",
+  "chat-history-title": "سجل الدردشة",
+  "chat-history-tooltip": "سجل الدردشة",
+  "back-to-workspace-tooltip": "العودة إلى مساحة العمل",
+  "task-list-add-hint": "فتح مساحة العمل والتركيز على الدردشة",
   "ongoing": "قيد التقدم",
   "token": "# الرمز",
   "configuring": "جاري التكوين...",
@@ -91,6 +128,7 @@
   "task-running": "تشغيل المهام",
   "task-completed": "اكتملت المهمة",
   "add-new-task": "إضافة مهمة جديدة",
+  "achieve-project": "إنجاز المشروع",
   "end-project": "إنهاء المشروع",
   "ending-this-project-will-stop": "إنهاء هذا المشروع سيتوقف عن أي مهام قيد التشغيل، وإزالته من السجل، وإنشاء مشروع فارغ جديد. هل أنت متأكد من أنك تريد المتابعة؟",
   "yes-end-project": "نعم، إنهاء المشروع",
@@ -101,6 +139,7 @@
   "are-you-sure-you-want-to-delete": "هل أنت متأكد من أنك تريد حذف هذه المهمة؟ لا يمكن التراجع عن هذا الإجراء.",
   "share": "مشاركة",
   "home": "الرئيسية",
+  "dashboard": "لوحة التحكم",
   "developer-agent": "وكيل المطور",
   "browser-agent": "وكيل المتصفح",
   "document-agent": "وكيل المستندات",
@@ -116,6 +155,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 +194,7 @@
   "no-cookies-saved-yet": "لم يتم حفظ ملفات تعريف الارتباط بعد",
   "no-cookies-saved-yet-description": "انقر فوق \"فتح المتصفح\" أعلاه لتسجيل الدخول إلى المواقع وحفظ ملفات تعريف الارتباط الخاصة بها للمهام المستقبلية.",
   "back": "رجوع",
+  "forward": "إلى الأمام",
   "total-tokens": "إجمالي الرموز",
   "total-tasks": "إجمالي المهام",
   "edit": "تعديل",
@@ -175,6 +216,26 @@
   "delete-project": "حذف المشروع",
   "delete-project-confirmation": "هل أنت متأكد من أنك تريد حذف هذا المشروع وجميع مهامه؟ لا يمكن التراجع عن هذا الإجراء.",
   "please-select-model": "يرجى اختيار نموذج في الوكلاء > النماذج للمتابعة.",
+  "select-model-cta": "اختر نموذجًا",
+  "sessions-section-caption": "الجلسات",
+  "projects-heading": "المشاريع",
+  "sessions-heading": "الجلسات",
+  "tasks-heading": "المهام",
+  "sessions-show-all": "عرض الكل",
+  "sessions-delete-session": "حذف الجلسة",
+  "sessions-expand-list": "توسيع قائمة الجلسات",
+  "sessions-collapse-list": "طي قائمة الجلسات",
+  "sessions-session-menu": "خيارات الجلسة",
+  "sessions-untitled": "جلسة بلا عنوان",
+  "workspace-lets-do-this": "لنبدأ",
+  "workspace-work-in-project": "العمل في مشروع",
+  "workspace-select-folder": "اختر مجلدًا",
+  "workspace-history-projects": "مشاريع سابقة",
+  "workspace-no-history-projects": "لا توجد مشاريع سابقة بعد",
+  "workspace-session-single-agent": "وكيل واحد",
+  "workspace-session-workforce": "القوى العاملة",
+  "workspace-get-things-done-with-eigent": "أنجِز مهامك مع Eigent",
+  "project-task-placeholder": "صِف ما تريد إنجازه...",
   "cdp-browser-connection": "اتصال متصفح CDP",
   "cdp-browser-connection-description": "الاتصال بمتصفح Chrome مع تمكين التصحيح عن بُعد",
   "current-port": "المنفذ الحالي:",
@@ -243,5 +304,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..4162f87bd 100644
--- a/src/i18n/locales/ar/setting.json
+++ b/src/i18n/locales/ar/setting.json
@@ -4,6 +4,16 @@
   "privacy": "خصوصية",
   "models": "نماذج",
   "mcp": "MCP الأدوات",
+  "mcps-and-tools": "MCP والأدوات",
+  "mcp-sidebar-web": "الويب",
+  "mcp-sidebar-not-connected": "غير متصل",
+  "mcp-configuration": "تكوين MCP",
+  "connectors": "الموصلات",
+  "disconnect": "قطع الاتصال",
+  "mcp-select-connection": "اختر اتصالاً لعرض التفاصيل",
+  "mcp-custom-server-tools": "أمر الخادم",
+  "mcp-add": "إضافة",
+  "disable": "تعطيل",
   "eigent-cloud": "Eigent Cloud",
   "default": "افتراضي",
   "profile": "الملف الشخصي",
@@ -19,6 +29,22 @@
   "light": "فاتح",
   "transparent": "شفاف",
 
+  "workspace-main-background": "خلفية مساحة العمل",
+  "workspace-main-background-description": "تُطبَّق على لوحتي Workforce وSession الرئيسيتين فقط.",
+  "workspace-main-background-empty": "فارغ",
+  "workspace-main-background-dots": "نقاط",
+  "workspace-main-background-blocks": "شبكة",
+  "workspace-main-background-ruled": "أسطر كاملة",
+  "workspace-main-background-dotted": "أسطر منقطة",
+  "workspace-main-background-dashed": "أسطر مُقطّعة",
+
+  "appearance-tab": "المظهر",
+  "color-mode": "وضع الألوان",
+  "accent-palette": "لوحة الألوان المميزة",
+  "accent-palette-description": "سمات ألوان جاهزة للواجهة. تُحفظ بشكل منفصل للوضعين الفاتح والداكن.",
+  "accent-for-light": "الوضع الفاتح",
+  "accent-for-dark": "الوضع الداكن",
+
   "data-privacy": "خصوصية البيانات",
   "data-privacy-description": "يعتمد أيجنت على الوضع المحلي الجديد ويضمن خصوصيتك. تبقى بياناتك على جهازك افتراضيًا. أذونات السحابة اختيارية، ويُستخدم حد البيانات لأغراض العمل فقط",
   "privacy-policy": "سياسة الخصوصية",
@@ -198,6 +224,22 @@
   "light": "فاتح",
   "transparent": "شفاف",
 
+  "workspace-main-background": "خلفية مساحة العمل",
+  "workspace-main-background-description": "تُطبَّق على لوحتي Workforce وSession الرئيسيتين فقط.",
+  "workspace-main-background-empty": "فارغ",
+  "workspace-main-background-dots": "نقاط",
+  "workspace-main-background-blocks": "شبكة",
+  "workspace-main-background-ruled": "أسطر كاملة",
+  "workspace-main-background-dotted": "أسطر منقطة",
+  "workspace-main-background-dashed": "أسطر مُقطّعة",
+
+  "appearance-tab": "المظهر",
+  "color-mode": "وضع الألوان",
+  "accent-palette": "لوحة الألوان المميزة",
+  "accent-palette-description": "سمات ألوان جاهزة للواجهة. تُحفظ بشكل منفصل للوضعين الفاتح والداكن.",
+  "accent-for-light": "الوضع الفاتح",
+  "accent-for-dark": "الوضع الداكن",
+
   "data-privacy": "خصوصية البيانات",
   "data-privacy-description": "يعتمد أيجنت على الوضع المحلي الجديد ويضمن خصوصيتك. تبقى بياناتك على جهازك افتراضيًا. أذونات السحابة اختيارية، ويُستخدم حد البيانات لأغراض العمل فقط",
   "privacy-policy": "سياسة الخصوصية",
@@ -336,9 +378,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/ar/workforce.json b/src/i18n/locales/ar/workforce.json
index 9273391c5..5dceedbf4 100644
--- a/src/i18n/locales/ar/workforce.json
+++ b/src/i18n/locales/ar/workforce.json
@@ -8,6 +8,7 @@
   "save-changes": "حفظ التغييرات",
   "description-optional": "الوصف (اختياري)",
   "agent-tool": "أداة الوكيل",
+  "agent-tool-tooltip": "اختر الأدوات والتكاملات لوكيلك",
   "share": "مشاركة",
   "advanced-model-config": "إعدادات النموذج المتقدمة",
   "use-custom-model": "استخدام إعدادات نموذج مخصصة",
@@ -16,5 +17,8 @@
   "model-type": "نوع النموذج",
   "model-type-placeholder": "مثال: gpt-4o-mini",
   "worker-name-cannot-be-empty": "لا يمكن أن يكون اسم العامل فارغًا",
-  "worker-name-already-exists": "اسم العامل موجود بالفعل"
+  "worker-name-already-exists": "اسم العامل موجود بالفعل",
+  "detail": "التفاصيل",
+  "duplicate": "تكرار",
+  "delete": "حذف"
 }
diff --git a/src/i18n/locales/de/agents.json b/src/i18n/locales/de/agents.json
index 18bc2dd25..94000ea7c 100644
--- a/src/i18n/locales/de/agents.json
+++ b/src/i18n/locales/de/agents.json
@@ -37,6 +37,7 @@
   "upload": "Hochladen",
   "invalid-file-type": "Ungültiger Dateityp. Bitte laden Sie eine .skill, .md, .txt oder .json Datei hoch.",
   "file-too-large": "Datei ist zu groß. Maximale Größe ist 1MB.",
+  "zip-import-too-large": "ZIP ist zu groß. Maximale Größe ist 50 MB.",
   "file-read-error": "Datei konnte nicht gelesen werden. Bitte versuchen Sie es erneut.",
   "reupload-file": "Datei erneut hochladen",
   "upload-error-invalid-format": "Datei muss ein .zip- oder Skill-Paket (.skill oder .md) sein.",
@@ -46,5 +47,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..fecf7364c 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",
@@ -39,6 +47,7 @@
   "reassigned": "Neuzuweisung",
   "ongoing": "In Bearbeitung",
   "pending": "Ausstehend",
+  "preparing-to-execute-tasks": "Aufgaben werden vorbereitet",
   "failed": "Fehlgeschlagen",
   "all": "Alle",
   "in-progress": "In Bearbeitung",
@@ -53,19 +62,34 @@
   "new-project": "Neues Projekt",
   "no-reply-received-task-continue": "Keine Antwort erhalten, Aufgabe wird fortgesetzt",
   "splitting-tasks": "Aufgaben teilen",
+  "working-on-tasks-for": "Arbeitet an Aufgaben seit <elapsed>{{time}}</elapsed>",
+  "worked-for": "Gearbeitet für <elapsed>{{time}}</elapsed>",
   "start-task": "Aufgabe starten",
   "message-cannot-be-empty": "Nachricht darf nicht leer sein",
   "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..5116fe990 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,10 +47,42 @@
   "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",
+  "hide-workforce-panel": "Workforce-Bereich ausblenden",
+  "show-side-panel": "Seitenbereich einblenden",
+  "hide-side-panel": "Seitenbereich ausblenden",
+  "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",
+  "notifications": "Benachrichtigungen",
+  "notifications-empty": "Noch keine Benachrichtigungen.",
+  "support": "Support",
+  "log-file-empty": "Protokolldatei ist leer",
   "new-project": "Neues Projekt",
   "welcome": "Willkommen",
+  "greeting-morning": "Morgen",
+  "greeting-afternoon": "Guten Nachmittag",
+  "greeting-evening": "Abend",
   "delete-task": "Aufgabe löschen",
   "delete-task-confirmation": "Sind Sie sicher, dass Sie diese Aufgabe löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
   "delete": "Löschen",
@@ -59,6 +92,10 @@
   "save": "Speichern",
   "not-found": "Nicht gefunden",
   "tasks": "AUFGABEN",
+  "chat-history-title": "Chat-Verlauf",
+  "chat-history-tooltip": "Chat-Verlauf",
+  "back-to-workspace-tooltip": "Zurück zum Arbeitsbereich",
+  "task-list-add-hint": "Workspace öffnen und Chat fokussieren",
   "ongoing": "Laufend",
   "token": "# Token",
   "configuring": "Konfiguration...",
@@ -91,6 +128,7 @@
   "task-running": "Aufgabe wird ausgeführt",
   "task-completed": "Aufgabe abgeschlossen",
   "add-new-task": "Neue Aufgabe hinzufügen",
+  "achieve-project": "Projekt abschließen",
   "end-project": "Projekt beenden",
   "ending-this-project-will-stop": "Das Beenden dieses Projekts wird alle laufenden Aufgaben stoppen, es aus dem Verlauf entfernen und ein neues leeres Projekt erstellen. Sind Sie sicher, dass Sie fortfahren möchten?",
   "yes-end-project": "Ja, Projekt beenden",
@@ -101,6 +139,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 +155,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 +194,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",
@@ -175,6 +216,26 @@
   "delete-project": "Projekt löschen",
   "delete-project-confirmation": "Sind Sie sicher, dass Sie dieses Projekt und alle seine Aufgaben löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
   "please-select-model": "Bitte wählen Sie ein Modell unter Agenten > Modelle aus, um fortzufahren.",
+  "select-model-cta": "Modell auswählen",
+  "sessions-section-caption": "Sitzungen",
+  "projects-heading": "Projekte",
+  "sessions-heading": "Sitzungen",
+  "tasks-heading": "Aufgaben",
+  "sessions-show-all": "Alle anzeigen",
+  "sessions-delete-session": "Sitzung löschen",
+  "sessions-expand-list": "Sitzungsliste ausklappen",
+  "sessions-collapse-list": "Sitzungsliste einklappen",
+  "sessions-session-menu": "Sitzungsoptionen",
+  "sessions-untitled": "Unbenannte Sitzung",
+  "workspace-lets-do-this": "Los geht's",
+  "workspace-work-in-project": "In einem Projekt arbeiten",
+  "workspace-select-folder": "Ordner auswählen",
+  "workspace-history-projects": "Verlaufsprojekte",
+  "workspace-no-history-projects": "Noch keine Verlaufsprojekte",
+  "workspace-session-single-agent": "Einzelagent",
+  "workspace-session-workforce": "Workforce",
+  "workspace-get-things-done-with-eigent": "Erledige Aufgaben mit Eigent",
+  "project-task-placeholder": "Beschreiben Sie, was Sie erreichen möchten...",
   "cdp-browser-connection": "CDP-Browser-Verbindung",
   "cdp-browser-connection-description": "Verbindung zu einem Chrome-Browser mit aktiviertem Remote-Debugging herstellen",
   "current-port": "Aktueller Port:",
@@ -243,5 +304,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..199c20bf2 100644
--- a/src/i18n/locales/de/setting.json
+++ b/src/i18n/locales/de/setting.json
@@ -4,6 +4,16 @@
   "privacy": "Datenschutz",
   "models": "Modelle",
   "mcp": "MCP & Tools",
+  "mcps-and-tools": "MCPs & Tools",
+  "mcp-sidebar-web": "Web",
+  "mcp-sidebar-not-connected": "Nicht verbunden",
+  "mcp-configuration": "MCP-Konfiguration",
+  "connectors": "Konnektoren",
+  "disconnect": "Trennen",
+  "mcp-select-connection": "Wählen Sie eine Verbindung, um Details anzuzeigen",
+  "mcp-custom-server-tools": "Serverbefehl",
+  "mcp-add": "Hinzufügen",
+  "disable": "Deaktivieren",
   "eigent-cloud": "Eigent Cloud",
   "default": "Standard",
   "profile": "Profil",
@@ -19,6 +29,22 @@
   "light": "Hell",
   "transparent": "Transparent",
 
+  "workspace-main-background": "Arbeitsbereich-Hintergrund",
+  "workspace-main-background-description": "Nur für die Hauptbereiche von Workforce und Session.",
+  "workspace-main-background-empty": "Leer",
+  "workspace-main-background-dots": "Punktmuster",
+  "workspace-main-background-blocks": "Raster",
+  "workspace-main-background-ruled": "Liniert",
+  "workspace-main-background-dotted": "Gestrichelte Linien",
+  "workspace-main-background-dashed": "Strichlinien",
+
+  "appearance-tab": "Darstellung",
+  "color-mode": "Farbmodus",
+  "accent-palette": "Akzentfarben",
+  "accent-palette-description": "Vordefinierte Farbthemen für die Oberfläche. Getrennt gespeichert für Hell- und Dunkelmodus.",
+  "accent-for-light": "Hellmodus",
+  "accent-for-dark": "Dunkelmodus",
+
   "data-privacy": "Datenschutz",
   "data-privacy-description": "Eigent basiert auf einem Local-First-Prinzip, um Ihre Privatsphäre zu gewährleisten. Ihre Daten verbleiben standardmäßig auf Ihrem Gerät. Cloud-Funktionen sind optional und verwenden nur die minimal erforderlichen Daten, um zu funktionieren. Für vollständige Details besuchen Sie bitte unsere",
   "privacy-policy": "Datenschutzrichtlinie",
@@ -80,6 +106,22 @@
   "light": "Hell",
   "transparent": "Transparent",
 
+  "workspace-main-background": "Arbeitsbereich-Hintergrund",
+  "workspace-main-background-description": "Nur für die Hauptbereiche von Workforce und Session.",
+  "workspace-main-background-empty": "Leer",
+  "workspace-main-background-dots": "Punktmuster",
+  "workspace-main-background-blocks": "Raster",
+  "workspace-main-background-ruled": "Liniert",
+  "workspace-main-background-dotted": "Gestrichelte Linien",
+  "workspace-main-background-dashed": "Strichlinien",
+
+  "appearance-tab": "Darstellung",
+  "color-mode": "Farbmodus",
+  "accent-palette": "Akzentfarben",
+  "accent-palette-description": "Vordefinierte Farbthemen für die Oberfläche. Getrennt gespeichert für Hell- und Dunkelmodus.",
+  "accent-for-light": "Hellmodus",
+  "accent-for-dark": "Dunkelmodus",
+
   "data-privacy": "Datenschutz",
   "data-privacy-description": "Eigent basiert auf einem Local-First-Prinzip, um Ihre Privatsphäre zu gewährleisten. Ihre Daten verbleiben standardmäßig auf Ihrem Gerät. Cloud-Funktionen sind optional und verwenden nur die minimal erforderlichen Daten, um zu funktionieren. Für vollständige Details besuchen Sie bitte unsere",
   "privacy-policy": "Datenschutzrichtlinie",
@@ -210,6 +252,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 +313,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/de/workforce.json b/src/i18n/locales/de/workforce.json
index 5145c5773..729301b7d 100644
--- a/src/i18n/locales/de/workforce.json
+++ b/src/i18n/locales/de/workforce.json
@@ -8,6 +8,7 @@
   "save-changes": "Änderungen speichern",
   "description-optional": "Beschreibung (Optional)",
   "agent-tool": "Agent-Tool",
+  "agent-tool-tooltip": "Wählen Sie Tools und Integrationen für Ihren Agenten",
   "share": "Teilen",
   "advanced-model-config": "Erweiterte Modellkonfiguration",
   "use-custom-model": "Benutzerdefinierte Modellkonfiguration verwenden",
@@ -16,5 +17,8 @@
   "model-type": "Modelltyp",
   "model-type-placeholder": "z.B. gpt-4o-mini",
   "worker-name-cannot-be-empty": "Der Worker-Name darf nicht leer sein",
-  "worker-name-already-exists": "Der Worker-Name existiert bereits"
+  "worker-name-already-exists": "Der Worker-Name existiert bereits",
+  "detail": "Detail",
+  "duplicate": "Duplizieren",
+  "delete": "Löschen"
 }
diff --git a/src/i18n/locales/en-us/agents.json b/src/i18n/locales/en-us/agents.json
index 13f215331..16ed28c22 100644
--- a/src/i18n/locales/en-us/agents.json
+++ b/src/i18n/locales/en-us/agents.json
@@ -37,6 +37,7 @@
   "upload": "Upload",
   "invalid-file-type": "Invalid file type. Please upload a .skill, .md, .txt, or .json file.",
   "file-too-large": "File is too large. Maximum size is 1MB.",
+  "zip-import-too-large": "ZIP is too large. Maximum size is 50 MB.",
   "file-read-error": "Failed to read file. Please try again.",
   "reupload-file": "Click to reupload a file",
   "upload-error-invalid-format": "File must be a .zip or skill package (.skill or .md).",
@@ -46,5 +47,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..e86423679 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",
@@ -39,6 +47,7 @@
   "reassigned": "Reassigned",
   "ongoing": "Ongoing",
   "pending": "Pending",
+  "preparing-to-execute-tasks": "Preparing to execute tasks",
   "failed": "Failed",
   "all": "All",
   "in-progress": "In Progress",
@@ -53,19 +62,34 @@
   "new-project": "Untitled Project",
   "no-reply-received-task-continue": "No reply received, task continue",
   "splitting-tasks": "Splitting Tasks",
+  "working-on-tasks-for": "Working on tasks for <elapsed>{{time}}</elapsed>",
+  "worked-for": "Worked for <elapsed>{{time}}</elapsed>",
   "start-task": "Start Task",
   "message-cannot-be-empty": "Message cannot be empty",
   "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..d358352e3 100644
--- a/src/i18n/locales/en-us/layout.json
+++ b/src/i18n/locales/en-us/layout.json
@@ -1,5 +1,22 @@
 {
   "report-bug": "Report a bug",
+  "report-bug-dialog-title": "Report a bug",
+  "report-bug-footer-hint": "We will save a ZIP of app logs, then open your email app. Attach the saved ZIP to the message before sending.",
+  "report-bug-field-description": "What went wrong?",
+  "report-bug-field-description-placeholder": "Describe the problem…",
+  "report-bug-field-steps": "Steps to reproduce (optional)",
+  "report-bug-field-steps-placeholder": "1. … 2. …",
+  "report-bug-meta": "Version {{version}} · {{os}} ({{arch}})",
+  "report-bug-description-required": "Please describe what went wrong.",
+  "report-bug-submit": "Save diagnostics and open email",
+  "report-bug-diagnostics-saved": "Diagnostics saved. Attach the ZIP in your email, then send.",
+  "report-bug-mail-subject": "[Eigent] Bug report",
+  "report-bug-mail-body-intro": "Please attach the diagnostics ZIP file you just saved to this message.",
+  "report-bug-mail-body-path": "ZIP saved to: {{path}}",
+  "report-bug-mail-body-meta": "App version: {{version}} | OS: {{os}} ({{arch}})",
+  "report-bug-mail-body-desc": "Description:",
+  "report-bug-mail-body-steps": "Steps to reproduce:",
+  "report-bug-mail-body-truncated": "The email body was shortened because of length limits. See bug_report.txt inside the ZIP for the full text.",
   "refer-friends": "Refer friends",
   "retry": "Retry",
   "please-enter-email-address": "Please enter email address",
@@ -47,10 +64,42 @@
   "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",
+  "hide-workforce-panel": "Hide workforce panel",
+  "show-side-panel": "Show side panel",
+  "hide-side-panel": "Hide side 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",
+  "notifications": "Notifications",
+  "notifications-empty": "No notifications yet.",
+  "support": "Support",
+  "log-file-empty": "Log file is empty",
   "new-project": "New Project",
   "welcome": "Welcome",
+  "greeting-morning": "Morning",
+  "greeting-afternoon": "Good Afternoon",
+  "greeting-evening": "Evening",
   "delete-task": "Delete Task",
   "delete-task-confirmation": "Are you sure you want to delete this task? This action cannot be undone.",
   "delete": "Delete",
@@ -60,6 +109,10 @@
   "save": "Save",
   "not-found": "Not Found",
   "tasks": "TASKS",
+  "chat-history-title": "Chat history",
+  "chat-history-tooltip": "Chat history",
+  "back-to-workspace-tooltip": "Back to workspace",
+  "task-list-add-hint": "Open workspace and focus chat",
   "ongoing": "Ongoing",
   "token": "# Token",
   "configuring": "Configuring...",
@@ -92,6 +145,7 @@
   "task-running": "Task Running",
   "task-completed": "Task Completed",
   "add-new-task": "Add new task",
+  "achieve-project": "Achieve Project",
   "end-project": "End project",
   "ending-this-project-will-stop": "Ending this project will stop any running tasks, remove it from history, and create a new empty project. Are you sure you want to proceed?",
   "yes-end-project": "Yes, end project",
@@ -102,7 +156,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",
@@ -138,6 +194,11 @@
   "ask-placeholder": "Ask me anything...",
   "new-task": "New Task",
   "projects-hub": "Projects Hub",
+  "project-page-tab-project": "Project",
+  "project-page-tab-tasks": "Tasks",
+  "project-page-all-tasks": "All tasks",
+  "project-page-status-pending": "Pending",
+  "no-tasks": "No tasks",
   "browser-management": "Browser Management",
   "browser-management-description": "The browser cookies are stored locally on your device, used only for tasks on those same sites, and can be cleared or disabled at any time.",
   "browser-connections": "Connections",
@@ -177,6 +238,7 @@
   "delete-project": "Delete Project",
   "delete-project-confirmation": "Are you sure you want to delete this project and all its tasks? This action cannot be undone.",
   "please-select-model": "Please select a model in Agents > Models to continue.",
+  "select-model-cta": "Select a model",
   "cdp-browser-connection": "CDP Browser Connection",
   "cdp-browser-connection-description": "Connect to a Chrome browser with remote debugging enabled",
   "current-port": "Current Electron Port:",
@@ -245,5 +307,31 @@
   "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",
+  "sessions-section-caption": "sessions",
+  "projects-heading": "Projects",
+  "sessions-heading": "Sessions",
+  "tasks-heading": "Tasks",
+  "sessions-show-all": "Show all",
+  "sessions-delete-session": "Delete session",
+  "sessions-expand-list": "Expand sessions list",
+  "sessions-collapse-list": "Collapse sessions list",
+  "sessions-session-menu": "Session options",
+  "sessions-untitled": "Untitled session",
+  "workspace-lets-do-this": "Let's do this",
+  "workspace-work-in-project": "Work in a project",
+  "workspace-select-project": "Select a project",
+  "workspace-select-folder": "Select a folder",
+  "workspace-history-projects": "History projects",
+  "workspace-no-history-projects": "No history projects yet",
+  "workspace-session-single-agent": "Single Agent",
+  "workspace-session-workforce": "Workforce",
+  "workspace-get-things-done-with-eigent": "Get things done with Eigent",
+  "workspace-cowork-single-agent": "Cowork with Single Agent",
+  "workspace-cowork-workforce": "Cowork with Workforce",
+  "execution-context": "Execution Context",
+  "project-task-placeholder": "Describe what you want to accomplish..."
 }
diff --git a/src/i18n/locales/en-us/setting.json b/src/i18n/locales/en-us/setting.json
index 11f0485c2..f940bde2c 100644
--- a/src/i18n/locales/en-us/setting.json
+++ b/src/i18n/locales/en-us/setting.json
@@ -4,6 +4,16 @@
   "privacy": "Privacy",
   "models": "Models",
   "mcp": "MCP & Tools",
+  "mcps-and-tools": "MCPs & Tools",
+  "mcp-sidebar-web": "Web",
+  "mcp-sidebar-not-connected": "Not connected",
+  "mcp-configuration": "MCP configuration",
+  "connectors": "Connectors",
+  "disconnect": "Disconnect",
+  "mcp-select-connection": "Select a connection to view details",
+  "mcp-custom-server-tools": "Server command",
+  "mcp-add": "Add",
+  "disable": "Disable",
   "eigent-cloud": "Eigent Cloud",
   "default": "Default",
   "profile": "Profile",
@@ -19,6 +29,22 @@
   "light": "Light",
   "transparent": "Transparent",
 
+  "workspace-main-background": "Workspace background",
+  "workspace-main-background-description": "Pattern for the Workforce and Session main panels only.",
+  "workspace-main-background-empty": "Empty",
+  "workspace-main-background-dots": "Dot pattern",
+  "workspace-main-background-blocks": "Grid pattern",
+  "workspace-main-background-ruled": "Ruled lines",
+  "workspace-main-background-dotted": "Dotted lines",
+  "workspace-main-background-dashed": "Dashed lines",
+
+  "appearance-tab": "Appearance",
+  "color-mode": "Color mode",
+  "accent-palette": "Accent palette",
+  "accent-palette-description": "Preset color themes for the interface. Choices are saved separately for light and dark mode.",
+  "accent-for-light": "Light mode",
+  "accent-for-dark": "Dark mode",
+
   "data-privacy": "Data Privacy",
   "data-privacy-description": "Eigent is built on a local-first principle to ensure your privacy. Your data remains on your device by default. Cloud features are optional and only use the minimum data necessary to function. For full details, visit our",
   "privacy-policy": "Privacy Policy",
@@ -226,6 +252,22 @@
   "light": "Light",
   "transparent": "Transparent",
 
+  "workspace-main-background": "Workspace background",
+  "workspace-main-background-description": "Pattern for the Workforce and Session main panels only.",
+  "workspace-main-background-empty": "Empty",
+  "workspace-main-background-dots": "Dot pattern",
+  "workspace-main-background-blocks": "Grid pattern",
+  "workspace-main-background-ruled": "Ruled lines",
+  "workspace-main-background-dotted": "Dotted lines",
+  "workspace-main-background-dashed": "Dashed lines",
+
+  "appearance-tab": "Appearance",
+  "color-mode": "Color mode",
+  "accent-palette": "Accent palette",
+  "accent-palette-description": "Preset color themes for the interface. Choices are saved separately for light and dark mode.",
+  "accent-for-light": "Light mode",
+  "accent-for-dark": "Dark mode",
+
   "data-privacy": "Data Privacy",
   "data-privacy-description": "Eigent is built on a local-first principle to ensure your privacy. Your data remains on your device by default. Cloud features are optional and only use the minimum data necessary to function. For full details, visit our",
   "privacy-policy": "Privacy Policy",
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/en-us/workforce.json b/src/i18n/locales/en-us/workforce.json
index 85a239665..ce7093ce0 100644
--- a/src/i18n/locales/en-us/workforce.json
+++ b/src/i18n/locales/en-us/workforce.json
@@ -8,6 +8,7 @@
   "save-changes": "Save changes",
   "description-optional": "Description (Optional)",
   "agent-tool": "Agent Tool",
+  "agent-tool-tooltip": "Select tools and integrations for your agent",
   "share": "Share",
   "advanced-model-config": "Advanced Model Configuration",
   "use-custom-model": "Use custom model configuration",
@@ -16,5 +17,8 @@
   "model-type": "Model Type",
   "model-type-placeholder": "e.g., gpt-4o-mini",
   "worker-name-cannot-be-empty": "Worker name cannot be empty",
-  "worker-name-already-exists": "Worker name already exists"
+  "worker-name-already-exists": "Worker name already exists",
+  "detail": "Detail",
+  "duplicate": "Duplicate",
+  "delete": "Delete"
 }
diff --git a/src/i18n/locales/es/agents.json b/src/i18n/locales/es/agents.json
index c16ad29b1..83912715c 100644
--- a/src/i18n/locales/es/agents.json
+++ b/src/i18n/locales/es/agents.json
@@ -37,6 +37,7 @@
   "upload": "Cargar",
   "invalid-file-type": "Tipo de archivo no válido. Por favor cargue un archivo .skill, .md, .txt o .json.",
   "file-too-large": "El archivo es demasiado grande. El tamaño máximo es 1MB.",
+  "zip-import-too-large": "El ZIP es demasiado grande. El tamaño máximo es 50 MB.",
   "file-read-error": "Error al leer el archivo. Por favor intente de nuevo.",
   "reupload-file": "Volver a subir un archivo",
   "upload-error-invalid-format": "El archivo debe ser un .zip o paquete de habilidad (.skill o .md).",
@@ -46,5 +47,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..579e6d8e9 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",
@@ -39,6 +47,7 @@
   "reassigned": "Reasignado",
   "ongoing": "En progreso",
   "pending": "En espera",
+  "preparing-to-execute-tasks": "Preparando la ejecución de tareas",
   "failed": "Falló",
   "all": "Todos",
   "in-progress": "En progreso",
@@ -53,19 +62,34 @@
   "new-project": "Nuevo proyecto",
   "no-reply-received-task-continue": "No se recibió respuesta, la tarea continúa",
   "splitting-tasks": "Dividiendo tareas",
+  "working-on-tasks-for": "Trabajando en tareas durante <elapsed>{{time}}</elapsed>",
+  "worked-for": "Trabajó durante <elapsed>{{time}}</elapsed>",
   "start-task": "Iniciar tarea",
   "message-cannot-be-empty": "El mensaje no puede estar vacío",
   "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..25966a348 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,10 +47,42 @@
   "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",
+  "hide-workforce-panel": "Ocultar panel de workforce",
+  "show-side-panel": "Mostrar panel lateral",
+  "hide-side-panel": "Ocultar panel lateral",
+  "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",
+  "notifications": "Notificaciones",
+  "notifications-empty": "Aún no hay notificaciones.",
+  "support": "Soporte",
+  "log-file-empty": "El archivo de registro está vacío",
   "new-project": "Nuevo Proyecto",
   "welcome": "Bienvenido",
+  "greeting-morning": "Día",
+  "greeting-afternoon": "Buenas Tardes",
+  "greeting-evening": "Noche",
   "delete-task": "Eliminar Tarea",
   "delete-task-confirmation": "¿Estás seguro de que quieres eliminar esta tarea? Esta acción no se puede deshacer.",
   "delete": "Eliminar",
@@ -59,6 +92,10 @@
   "save": "Guardar",
   "not-found": "No encontrado",
   "tasks": "TAREAS",
+  "chat-history-title": "Historial del chat",
+  "chat-history-tooltip": "Historial del chat",
+  "back-to-workspace-tooltip": "Volver al espacio de trabajo",
+  "task-list-add-hint": "Abrir el espacio de trabajo y enfocar el chat",
   "ongoing": "En progreso",
   "token": "# Token",
   "configuring": "Configurando...",
@@ -91,6 +128,7 @@
   "task-running": "Ejecutando Tarea",
   "task-completed": "Tarea Completada",
   "add-new-task": "Agregar nueva tarea",
+  "achieve-project": "Completar proyecto",
   "end-project": "Finalizar proyecto",
   "ending-this-project-will-stop": "Finalizar este proyecto detendrá cualquier tarea en ejecución, la eliminará del historial y creará un nuevo proyecto vacío. ¿Estás seguro de que quieres continuar?",
   "yes-end-project": "Sí, finalizar proyecto",
@@ -101,6 +139,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 +155,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 +194,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",
@@ -175,6 +216,26 @@
   "delete-project": "Eliminar Proyecto",
   "delete-project-confirmation": "¿Estás seguro de que quieres eliminar este proyecto y todas sus tareas? Esta acción no se puede deshacer.",
   "please-select-model": "Por favor, selecciona un modelo en Agentes > Modelos para continuar.",
+  "select-model-cta": "Seleccionar un modelo",
+  "sessions-section-caption": "sesiones",
+  "projects-heading": "Proyectos",
+  "sessions-heading": "Sesiones",
+  "tasks-heading": "Tareas",
+  "sessions-show-all": "Ver todo",
+  "sessions-delete-session": "Eliminar sesión",
+  "sessions-expand-list": "Expandir lista de sesiones",
+  "sessions-collapse-list": "Contraer lista de sesiones",
+  "sessions-session-menu": "Opciones de sesión",
+  "sessions-untitled": "Sesión sin título",
+  "workspace-lets-do-this": "Vamos a ello",
+  "workspace-work-in-project": "Trabajar en un proyecto",
+  "workspace-select-folder": "Seleccionar una carpeta",
+  "workspace-history-projects": "Proyectos del historial",
+  "workspace-no-history-projects": "Aún no hay proyectos en el historial",
+  "workspace-session-single-agent": "Agente único",
+  "workspace-session-workforce": "Workforce",
+  "workspace-get-things-done-with-eigent": "Haz cosas con Eigent",
+  "project-task-placeholder": "Describe lo que quieres lograr...",
   "cdp-browser-connection": "Conexión de navegador CDP",
   "cdp-browser-connection-description": "Conectar a un navegador Chrome con depuración remota habilitada",
   "current-port": "Puerto actual:",
@@ -243,5 +304,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..20c642c8d 100644
--- a/src/i18n/locales/es/setting.json
+++ b/src/i18n/locales/es/setting.json
@@ -4,6 +4,16 @@
   "privacy": "Privacidad",
   "models": "Modelos",
   "mcp": "MCP & Herramientas",
+  "mcps-and-tools": "MCP y herramientas",
+  "mcp-sidebar-web": "Web",
+  "mcp-sidebar-not-connected": "No conectado",
+  "mcp-configuration": "Configuración de MCP",
+  "connectors": "Conectores",
+  "disconnect": "Desconectar",
+  "mcp-select-connection": "Selecciona una conexión para ver los detalles",
+  "mcp-custom-server-tools": "Comando del servidor",
+  "mcp-add": "Añadir",
+  "disable": "Desactivar",
   "eigent-cloud": "Eigent Cloud",
   "default": "Predeterminado",
   "profile": "Perfil",
@@ -19,6 +29,22 @@
   "light": "Claro",
   "transparent": "Transparente",
 
+  "workspace-main-background": "Fondo del espacio de trabajo",
+  "workspace-main-background-description": "Solo para los paneles principales de Workforce y Session.",
+  "workspace-main-background-empty": "Vacío",
+  "workspace-main-background-dots": "Puntos",
+  "workspace-main-background-blocks": "Cuadrícula",
+  "workspace-main-background-ruled": "Líneas continuas",
+  "workspace-main-background-dotted": "Líneas punteadas",
+  "workspace-main-background-dashed": "Líneas a trazos",
+
+  "appearance-tab": "Apariencia",
+  "color-mode": "Modo de color",
+  "accent-palette": "Paleta de acento",
+  "accent-palette-description": "Temas de color predefinidos para la interfaz. Se guardan por separado para los modos claro y oscuro.",
+  "accent-for-light": "Modo claro",
+  "accent-for-dark": "Modo oscuro",
+
   "data-privacy": "Privacidad de datos",
   "data-privacy-description": "Eigent está construido sobre un principio local-first para garantizar tu privacidad. Tus datos permanecen en tu dispositivo por defecto. Las características en la nube son opcionales y solo utilizan los datos mínimos necesarios para funcionar. Para obtener más detalles, visita nuestra",
   "privacy-policy": "Política de privacidad",
@@ -80,6 +106,22 @@
   "light": "Claro",
   "transparent": "Transparente",
 
+  "workspace-main-background": "Fondo del espacio de trabajo",
+  "workspace-main-background-description": "Solo para los paneles principales de Workforce y Session.",
+  "workspace-main-background-empty": "Vacío",
+  "workspace-main-background-dots": "Puntos",
+  "workspace-main-background-blocks": "Cuadrícula",
+  "workspace-main-background-ruled": "Líneas continuas",
+  "workspace-main-background-dotted": "Líneas punteadas",
+  "workspace-main-background-dashed": "Líneas a trazos",
+
+  "appearance-tab": "Apariencia",
+  "color-mode": "Modo de color",
+  "accent-palette": "Paleta de acento",
+  "accent-palette-description": "Temas de color predefinidos para la interfaz. Se guardan por separado para los modos claro y oscuro.",
+  "accent-for-light": "Modo claro",
+  "accent-for-dark": "Modo oscuro",
+
   "data-privacy": "Privacidad de datos",
   "data-privacy-description": "Eigent está construido sobre un principio local-first para garantizar tu privacidad. Tus datos permanecen en tu dispositivo por defecto. Las características en la nube son opcionales y solo utilizan los datos mínimos necesarios para funcionar. Para obtener más detalles, visita nuestra",
   "privacy-policy": "Política de privacidad",
@@ -210,6 +252,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 +313,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/es/workforce.json b/src/i18n/locales/es/workforce.json
index 0908fe1ac..0f4c57727 100644
--- a/src/i18n/locales/es/workforce.json
+++ b/src/i18n/locales/es/workforce.json
@@ -8,6 +8,7 @@
   "save-changes": "Guardar cambios",
   "description-optional": "Descripción (Opcional)",
   "agent-tool": "Herramienta de Agent",
+  "agent-tool-tooltip": "Selecciona herramientas e integraciones para tu agente",
   "share": "Compartir",
   "advanced-model-config": "Configuración Avanzada del Modelo",
   "use-custom-model": "Usar configuración de modelo personalizada",
@@ -16,5 +17,8 @@
   "model-type": "Tipo de Modelo",
   "model-type-placeholder": "ej. gpt-4o-mini",
   "worker-name-cannot-be-empty": "El nombre del worker no puede estar vacío",
-  "worker-name-already-exists": "El nombre del worker ya existe"
+  "worker-name-already-exists": "El nombre del worker ya existe",
+  "detail": "Detalle",
+  "duplicate": "Duplicar",
+  "delete": "Eliminar"
 }
diff --git a/src/i18n/locales/fr/agents.json b/src/i18n/locales/fr/agents.json
index 45a457600..0531b495b 100644
--- a/src/i18n/locales/fr/agents.json
+++ b/src/i18n/locales/fr/agents.json
@@ -37,6 +37,7 @@
   "upload": "Télécharger",
   "invalid-file-type": "Type de fichier non valide. Veuillez télécharger un fichier .skill, .md, .txt ou .json.",
   "file-too-large": "Le fichier est trop volumineux. La taille maximale est de 1 Mo.",
+  "zip-import-too-large": "Le fichier ZIP est trop volumineux. La taille maximale est de 50 Mo.",
   "file-read-error": "Échec de la lecture du fichier. Veuillez réessayer.",
   "reupload-file": "Téléverser à nouveau un fichier",
   "upload-error-invalid-format": "Le fichier doit être un .zip ou un package de compétence (.skill ou .md).",
@@ -46,5 +47,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..fba570cee 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",
@@ -39,6 +47,7 @@
   "reassigned": "Reassigné",
   "ongoing": "En cours",
   "pending": "En attente",
+  "preparing-to-execute-tasks": "Préparation de l'exécution des tâches",
   "failed": "Échoué",
   "all": "Tous",
   "in-progress": "En cours",
@@ -53,19 +62,34 @@
   "new-project": "Nouveau projet",
   "no-reply-received-task-continue": "Aucune réponse reçue, la tâche continue",
   "splitting-tasks": "Division des tâches",
+  "working-on-tasks-for": "Travaille sur les tâches depuis <elapsed>{{time}}</elapsed>",
+  "worked-for": "A travaillé pendant <elapsed>{{time}}</elapsed>",
   "start-task": "Démarrer la tâche",
   "message-cannot-be-empty": "Le message ne peut pas être vide",
   "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..1a86785de 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,10 +47,42 @@
   "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",
+  "hide-workforce-panel": "Masquer le panneau Workforce",
+  "show-side-panel": "Afficher le panneau latéral",
+  "hide-side-panel": "Masquer le panneau latéral",
+  "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",
+  "notifications": "Notifications",
+  "notifications-empty": "Aucune notification pour le moment.",
+  "support": "Assistance",
+  "log-file-empty": "Le fichier journal est vide",
   "new-project": "Nouveau Projet",
   "welcome": "Bienvenue",
+  "greeting-morning": "Matin",
+  "greeting-afternoon": "Bon Après-midi",
+  "greeting-evening": "Soir",
   "delete-task": "Supprimer la Tâche",
   "delete-task-confirmation": "Êtes-vous sûr de vouloir supprimer cette tâche ? Cette action ne peut pas être annulée.",
   "delete": "Supprimer",
@@ -59,6 +92,10 @@
   "save": "Enregistrer",
   "not-found": "Non trouvé",
   "tasks": "TÂCHES",
+  "chat-history-title": "Historique du chat",
+  "chat-history-tooltip": "Historique du chat",
+  "back-to-workspace-tooltip": "Retour à l’espace de travail",
+  "task-list-add-hint": "Ouvrir l’espace de travail et focus sur le chat",
   "ongoing": "En cours",
   "token": "# Token",
   "configuring": "Configuration...",
@@ -91,6 +128,7 @@
   "task-running": "Exécution des Tâches",
   "task-completed": "Tâche Terminée",
   "add-new-task": "Ajouter une nouvelle tâche",
+  "achieve-project": "Finaliser le projet",
   "end-project": "Terminer le projet",
   "ending-this-project-will-stop": "Terminer ce projet arrêtera toutes les tâches en cours, le supprimera de l'historique et créera un nouveau projet vide. Êtes-vous sûr de vouloir continuer ?",
   "yes-end-project": "Oui, terminer le projet",
@@ -101,6 +139,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 +155,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 +194,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",
@@ -175,6 +216,26 @@
   "delete-project": "Supprimer le Projet",
   "delete-project-confirmation": "Êtes-vous sûr de vouloir supprimer ce projet et toutes ses tâches ? Cette action ne peut pas être annulée.",
   "please-select-model": "Veuillez sélectionner un modèle dans Agents > Modèles pour continuer.",
+  "select-model-cta": "Choisir un modèle",
+  "sessions-section-caption": "sessions",
+  "projects-heading": "Projets",
+  "sessions-heading": "Sessions",
+  "tasks-heading": "Tâches",
+  "sessions-show-all": "Tout afficher",
+  "sessions-delete-session": "Supprimer la session",
+  "sessions-expand-list": "Développer la liste des sessions",
+  "sessions-collapse-list": "Réduire la liste des sessions",
+  "sessions-session-menu": "Options de session",
+  "sessions-untitled": "Session sans titre",
+  "workspace-lets-do-this": "C'est parti",
+  "workspace-work-in-project": "Travailler dans un projet",
+  "workspace-select-folder": "Choisir un dossier",
+  "workspace-history-projects": "Projets récents",
+  "workspace-no-history-projects": "Aucun projet récent pour l'instant",
+  "workspace-session-single-agent": "Agent unique",
+  "workspace-session-workforce": "Workforce",
+  "workspace-get-things-done-with-eigent": "Accomplissez vos tâches avec Eigent",
+  "project-task-placeholder": "Décrivez ce que vous souhaitez accomplir...",
   "cdp-browser-connection": "Connexion navigateur CDP",
   "cdp-browser-connection-description": "Se connecter à un navigateur Chrome avec le débogage à distance activé",
   "current-port": "Port actuel :",
@@ -243,5 +304,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..989f70132 100644
--- a/src/i18n/locales/fr/setting.json
+++ b/src/i18n/locales/fr/setting.json
@@ -4,6 +4,16 @@
   "privacy": "Privacy",
   "models": "Models",
   "mcp": "MCP & Tools",
+  "mcps-and-tools": "MCP et outils",
+  "mcp-sidebar-web": "Web",
+  "mcp-sidebar-not-connected": "Non connecté",
+  "mcp-configuration": "Configuration MCP",
+  "connectors": "Connecteurs",
+  "disconnect": "Déconnecter",
+  "mcp-select-connection": "Sélectionnez une connexion pour afficher les détails",
+  "mcp-custom-server-tools": "Commande du serveur",
+  "mcp-add": "Ajouter",
+  "disable": "Désactiver",
   "eigent-cloud": "Eigent Cloud",
   "default": "Par défaut",
   "profile": "Profil",
@@ -19,6 +29,22 @@
   "light": "Light",
   "transparent": "Transparent",
 
+  "workspace-main-background": "Arrière-plan de l’espace de travail",
+  "workspace-main-background-description": "Motif appliqué uniquement aux panneaux principaux Workforce et Session.",
+  "workspace-main-background-empty": "Vide",
+  "workspace-main-background-dots": "Points",
+  "workspace-main-background-blocks": "Grille",
+  "workspace-main-background-ruled": "Lignes pleines",
+  "workspace-main-background-dotted": "Lignes pointillées",
+  "workspace-main-background-dashed": "Lignes en tirets",
+
+  "appearance-tab": "Apparence",
+  "color-mode": "Mode couleur",
+  "accent-palette": "Palette d'accentuation",
+  "accent-palette-description": "Thèmes de couleur prédéfinis pour l'interface. Enregistrés séparément pour les modes clair et sombre.",
+  "accent-for-light": "Mode clair",
+  "accent-for-dark": "Mode sombre",
+
   "data-privacy": "Data Privacy",
   "data-privacy-description": "Eigent is built on a local-first principle to ensure your privacy. Your data remains on your device by default. Cloud features are optional and only use the minimum data necessary to function. For full details, visit our",
   "privacy-policy": "Privacy Policy",
@@ -80,6 +106,22 @@
   "light": "Light",
   "transparent": "Transparent",
 
+  "workspace-main-background": "Arrière-plan de l’espace de travail",
+  "workspace-main-background-description": "Motif appliqué uniquement aux panneaux principaux Workforce et Session.",
+  "workspace-main-background-empty": "Vide",
+  "workspace-main-background-dots": "Points",
+  "workspace-main-background-blocks": "Grille",
+  "workspace-main-background-ruled": "Lignes pleines",
+  "workspace-main-background-dotted": "Lignes pointillées",
+  "workspace-main-background-dashed": "Lignes en tirets",
+
+  "appearance-tab": "Apparence",
+  "color-mode": "Mode couleur",
+  "accent-palette": "Palette d'accentuation",
+  "accent-palette-description": "Thèmes de couleur prédéfinis pour l'interface. Enregistrés séparément pour les modes clair et sombre.",
+  "accent-for-light": "Mode clair",
+  "accent-for-dark": "Mode sombre",
+
   "data-privacy": "Data Privacy",
   "data-privacy-description": "Eigent is built on a local-first principle to ensure your privacy. Your data remains on your device by default. Cloud features are optional and only use the minimum data necessary to function. For full details, visit our",
   "privacy-policy": "Privacy Policy",
@@ -170,8 +212,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 +252,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 +313,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/fr/workforce.json b/src/i18n/locales/fr/workforce.json
index d688ef16d..618d11b67 100644
--- a/src/i18n/locales/fr/workforce.json
+++ b/src/i18n/locales/fr/workforce.json
@@ -8,6 +8,7 @@
   "save-changes": "Enregistrer les modifications",
   "description-optional": "Description (facultatif)",
   "agent-tool": "Outil d'agent",
+  "agent-tool-tooltip": "Sélectionnez les outils et intégrations pour votre agent",
   "share": "Partager",
   "advanced-model-config": "Configuration Avancée du Modèle",
   "use-custom-model": "Utiliser une configuration de modèle personnalisée",
@@ -16,5 +17,8 @@
   "model-type": "Type de Modèle",
   "model-type-placeholder": "ex. gpt-4o-mini",
   "worker-name-cannot-be-empty": "Le nom du travailleur ne peut pas être vide",
-  "worker-name-already-exists": "Le nom du travailleur existe déjà"
+  "worker-name-already-exists": "Le nom du travailleur existe déjà",
+  "detail": "Détail",
+  "duplicate": "Dupliquer",
+  "delete": "Supprimer"
 }
diff --git a/src/i18n/locales/it/agents.json b/src/i18n/locales/it/agents.json
index b9855f585..71b20c774 100644
--- a/src/i18n/locales/it/agents.json
+++ b/src/i18n/locales/it/agents.json
@@ -37,6 +37,7 @@
   "upload": "Carica",
   "invalid-file-type": "Tipo di file non valido. Carica un file .skill, .md, .txt o .json.",
   "file-too-large": "Il file è troppo grande. La dimensione massima è 1MB.",
+  "zip-import-too-large": "Il file ZIP è troppo grande. La dimensione massima è 50 MB.",
   "file-read-error": "Impossibile leggere il file. Riprova.",
   "reupload-file": "Carica di nuovo un file",
   "upload-error-invalid-format": "Il file deve essere un .zip o un pacchetto skill (.skill o .md).",
@@ -46,5 +47,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..695dc066d 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",
@@ -39,6 +47,7 @@
   "reassigned": "Reassegnato",
   "ongoing": "In corso",
   "pending": "In attesa",
+  "preparing-to-execute-tasks": "Preparazione dell'esecuzione delle attività",
   "failed": "Fallito",
   "all": "Tutti",
   "in-progress": "In Corso",
@@ -53,19 +62,34 @@
   "new-project": "Nuovo Progetto",
   "no-reply-received-task-continue": "Nessuna risposta ricevuta, il compito continua",
   "splitting-tasks": "Suddivisione dei compiti",
+  "working-on-tasks-for": "Lavoro alle attività da <elapsed>{{time}}</elapsed>",
+  "worked-for": "Ha lavorato per <elapsed>{{time}}</elapsed>",
   "start-task": "Avvia compito",
   "message-cannot-be-empty": "Il messaggio non può essere vuoto",
   "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..bb0e9b074 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,10 +47,42 @@
   "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",
+  "hide-workforce-panel": "Nascondi pannello Workforce",
+  "show-side-panel": "Mostra pannello laterale",
+  "hide-side-panel": "Nascondi pannello laterale",
+  "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",
+  "notifications": "Notifiche",
+  "notifications-empty": "Nessuna notifica.",
+  "support": "Supporto",
+  "log-file-empty": "Il file di log è vuoto",
   "new-project": "Nuovo Progetto",
   "welcome": "Benvenuto",
+  "greeting-morning": "Mattina",
+  "greeting-afternoon": "Buon Pomeriggio",
+  "greeting-evening": "Sera",
   "delete-task": "Elimina Attività",
   "delete-task-confirmation": "Sei sicuro di voler eliminare questa attività? Questa azione non può essere annullata.",
   "delete": "Elimina",
@@ -59,6 +92,10 @@
   "save": "Salva",
   "not-found": "Non trovato",
   "tasks": "ATTIVITÀ",
+  "chat-history-title": "Cronologia chat",
+  "chat-history-tooltip": "Cronologia chat",
+  "back-to-workspace-tooltip": "Torna all’area di lavoro",
+  "task-list-add-hint": "Apri workspace e metti a fuoco la chat",
   "ongoing": "In corso",
   "token": "# Token",
   "configuring": "Configurazione...",
@@ -91,6 +128,7 @@
   "task-running": "Esecuzione Attività",
   "task-completed": "Attività Completata",
   "add-new-task": "Aggiungi nuova attività",
+  "achieve-project": "Completa progetto",
   "end-project": "Termina progetto",
   "ending-this-project-will-stop": "Terminare questo progetto fermerà tutte le attività in esecuzione, lo rimuoverà dalla cronologia e creerà un nuovo progetto vuoto. Sei sicuro di voler continuare?",
   "yes-end-project": "Sì, termina progetto",
@@ -101,6 +139,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 +155,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 +194,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",
@@ -175,6 +216,26 @@
   "delete-project": "Elimina Progetto",
   "delete-project-confirmation": "Sei sicuro di voler eliminare questo progetto e tutte le sue attività? Questa azione non può essere annullata.",
   "please-select-model": "Seleziona un modello in Agenti > Modelli per continuare.",
+  "select-model-cta": "Seleziona un modello",
+  "sessions-section-caption": "sessioni",
+  "projects-heading": "Progetti",
+  "sessions-heading": "Sessioni",
+  "tasks-heading": "Attività",
+  "sessions-show-all": "Mostra tutto",
+  "sessions-delete-session": "Elimina sessione",
+  "sessions-expand-list": "Espandi elenco sessioni",
+  "sessions-collapse-list": "Comprimi elenco sessioni",
+  "sessions-session-menu": "Opzioni sessione",
+  "sessions-untitled": "Sessione senza titolo",
+  "workspace-lets-do-this": "Iniziamo",
+  "workspace-work-in-project": "Lavora in un progetto",
+  "workspace-select-folder": "Seleziona una cartella",
+  "workspace-history-projects": "Progetti recenti",
+  "workspace-no-history-projects": "Nessun progetto recente",
+  "workspace-session-single-agent": "Agente singolo",
+  "workspace-session-workforce": "Workforce",
+  "workspace-get-things-done-with-eigent": "Porta a termine le cose con Eigent",
+  "project-task-placeholder": "Descrivi cosa vuoi ottenere...",
   "cdp-browser-connection": "Connessione browser CDP",
   "cdp-browser-connection-description": "Connetti a un browser Chrome con il debug remoto abilitato",
   "current-port": "Porta attuale:",
@@ -243,5 +304,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..d399a4179 100644
--- a/src/i18n/locales/it/setting.json
+++ b/src/i18n/locales/it/setting.json
@@ -4,6 +4,16 @@
   "privacy": "Privacy",
   "models": "Modelli",
   "mcp": "MCP e Strumenti",
+  "mcps-and-tools": "MCP e strumenti",
+  "mcp-sidebar-web": "Web",
+  "mcp-sidebar-not-connected": "Non connesso",
+  "mcp-configuration": "Configurazione MCP",
+  "connectors": "Connettori",
+  "disconnect": "Disconnetti",
+  "mcp-select-connection": "Seleziona una connessione per vedere i dettagli",
+  "mcp-custom-server-tools": "Comando del server",
+  "mcp-add": "Aggiungi",
+  "disable": "Disattiva",
   "eigent-cloud": "Eigent Cloud",
   "default": "Predefinito",
   "profile": "Profilo",
@@ -19,6 +29,22 @@
   "light": "Chiaro",
   "transparent": "Trasparente",
 
+  "workspace-main-background": "Sfondo dell’area di lavoro",
+  "workspace-main-background-description": "Solo per i pannelli principali Workforce e Session.",
+  "workspace-main-background-empty": "Vuoto",
+  "workspace-main-background-dots": "Punti",
+  "workspace-main-background-blocks": "Griglia",
+  "workspace-main-background-ruled": "Righe continue",
+  "workspace-main-background-dotted": "Righe puntinate",
+  "workspace-main-background-dashed": "Righe a tratti",
+
+  "appearance-tab": "Aspetto",
+  "color-mode": "Modalità colore",
+  "accent-palette": "Palette di accento",
+  "accent-palette-description": "Temi colore predefiniti per l'interfaccia. Salvati separatamente per le modalità chiara e scura.",
+  "accent-for-light": "Modalità chiara",
+  "accent-for-dark": "Modalità scura",
+
   "data-privacy": "Privacy dei dati",
   "data-privacy-description": "Eigent è costruito su un principio local-first per garantire la tua privacy. I tuoi dati rimangono sul tuo dispositivo per impostazione predefinita. Le funzionalità cloud sono opzionali e utilizzano solo i dati minimi necessari per funzionare. Per tutti i dettagli, visita la nostra",
   "privacy-policy": "Informativa sulla privacy",
@@ -80,6 +106,22 @@
   "light": "Chiaro",
   "transparent": "Trasparente",
 
+  "workspace-main-background": "Sfondo dell’area di lavoro",
+  "workspace-main-background-description": "Solo per i pannelli principali Workforce e Session.",
+  "workspace-main-background-empty": "Vuoto",
+  "workspace-main-background-dots": "Punti",
+  "workspace-main-background-blocks": "Griglia",
+  "workspace-main-background-ruled": "Righe continue",
+  "workspace-main-background-dotted": "Righe puntinate",
+  "workspace-main-background-dashed": "Righe a tratti",
+
+  "appearance-tab": "Aspetto",
+  "color-mode": "Modalità colore",
+  "accent-palette": "Palette di accento",
+  "accent-palette-description": "Temi colore predefiniti per l'interfaccia. Salvati separatamente per le modalità chiara e scura.",
+  "accent-for-light": "Modalità chiara",
+  "accent-for-dark": "Modalità scura",
+
   "data-privacy": "Privacy dei dati",
   "data-privacy-description": "Eigent è costruito su un principio local-first per garantire la tua privacy. I tuoi dati rimangono sul tuo dispositivo per impostazione predefinita. Le funzionalità cloud sono opzionali e utilizzano solo i dati minimi necessari per funzionare. Per tutti i dettagli, visita la nostra",
   "privacy-policy": "Informativa sulla privacy",
@@ -210,6 +252,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 +313,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/it/workforce.json b/src/i18n/locales/it/workforce.json
index d2aa6f90b..a1881b525 100644
--- a/src/i18n/locales/it/workforce.json
+++ b/src/i18n/locales/it/workforce.json
@@ -8,6 +8,7 @@
   "save-changes": "Salva modifiche",
   "description-optional": "Descrizione (Opzionale)",
   "agent-tool": "Strumento Agente",
+  "agent-tool-tooltip": "Seleziona strumenti e integrazioni per il tuo agente",
   "share": "Condividi",
   "advanced-model-config": "Configurazione Avanzata del Modello",
   "use-custom-model": "Usa configurazione modello personalizzata",
@@ -16,5 +17,8 @@
   "model-type": "Tipo di Modello",
   "model-type-placeholder": "es. gpt-4o-mini",
   "worker-name-cannot-be-empty": "Il nome del worker non può essere vuoto",
-  "worker-name-already-exists": "Il nome del worker esiste già"
+  "worker-name-already-exists": "Il nome del worker esiste già",
+  "detail": "Dettaglio",
+  "duplicate": "Duplica",
+  "delete": "Elimina"
 }
diff --git a/src/i18n/locales/ja/agents.json b/src/i18n/locales/ja/agents.json
index eef61ac5a..656bbbe89 100644
--- a/src/i18n/locales/ja/agents.json
+++ b/src/i18n/locales/ja/agents.json
@@ -37,6 +37,7 @@
   "upload": "アップロード",
   "invalid-file-type": "無効なファイル形式です。.skill、.md、.txt、または .json ファイルをアップロードしてください。",
   "file-too-large": "ファイルが大きすぎます。最大サイズは 1MB です。",
+  "zip-import-too-large": "ZIP が大きすぎます。最大サイズは 50 MB です。",
   "file-read-error": "ファイルの読み込みに失敗しました。もう一度お試しください。",
   "reupload-file": "ファイルを再アップロード",
   "upload-error-invalid-format": "ファイルは .zip またはスキルパッケージ（.skill または .md）である必要があります。",
@@ -46,5 +47,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..525e520eb 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": "検索",
@@ -39,6 +47,7 @@
   "reassigned": "再割り当て",
   "ongoing": "進行中",
   "pending": "待ち",
+  "preparing-to-execute-tasks": "タスクの実行を準備しています",
   "failed": "失敗",
   "all": "すべて",
   "in-progress": "進行中",
@@ -53,19 +62,34 @@
   "new-project": "新規プロジェクト",
   "no-reply-received-task-continue": "応答がないため、タスクを続行します",
   "splitting-tasks": "タスク分割",
+  "working-on-tasks-for": "タスクを実行中 · <elapsed>{{time}}</elapsed>",
+  "worked-for": "作業時間 <elapsed>{{time}}</elapsed>",
   "start-task": "タスク開始",
   "message-cannot-be-empty": "メッセージは空にできません",
   "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..1fe6fa319 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,10 +47,42 @@
   "browser": "ブラウザ",
   "settings": "設定",
   "general": "一般",
-  "workers": "ワーカー",
+  "aiWorkforce": "AIワークフォース",
+  "expand-workforce": "ワークフォース表示領域を広げる",
+  "minimize-workforce": "ワークフォース表示領域を狭める",
+  "show-workforce-panel": "ワークフォースパネルを表示",
+  "hide-workforce-panel": "ワークフォースパネルを非表示",
+  "show-side-panel": "サイドパネルを表示",
+  "hide-side-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": "ログをダウンロード",
+  "notifications": "通知",
+  "notifications-empty": "通知はありません。",
+  "support": "サポート",
+  "log-file-empty": "ログファイルが空です",
   "new-project": "新規プロジェクト",
   "welcome": "ようこそ",
+  "greeting-morning": "朝",
+  "greeting-afternoon": "良い午後",
+  "greeting-evening": "夜",
   "delete-task": "タスクを削除",
   "delete-task-confirmation": "このタスクを削除してもよろしいですか？この操作は元に戻せません。",
   "delete": "削除",
@@ -59,6 +92,10 @@
   "save": "保存",
   "not-found": "見つかりません",
   "tasks": "タスク",
+  "chat-history-title": "チャット履歴",
+  "chat-history-tooltip": "チャット履歴",
+  "back-to-workspace-tooltip": "ワークスペースに戻る",
+  "task-list-add-hint": "ワークスペースを開きチャット入力にフォーカス",
   "ongoing": "進行中",
   "token": "# トークン",
   "configuring": "設定中...",
@@ -91,6 +128,7 @@
   "task-running": "タスク実行中",
   "task-completed": "タスク完了",
   "add-new-task": "新しいタスクを追加",
+  "achieve-project": "プロジェクトを達成",
   "end-project": "プロジェクトを終了",
   "ending-this-project-will-stop": "このプロジェクトを終了すると、実行中のタスクが停止し、履歴から削除され、新しい空のプロジェクトが作成されます。続行してもよろしいですか？",
   "yes-end-project": "はい、プロジェクトを終了",
@@ -101,6 +139,7 @@
   "are-you-sure-you-want-to-delete": "このタスクを削除してもよろしいですか？この操作は元に戻せません。",
   "share": "共有",
   "home": "ホーム",
+  "dashboard": "ダッシュボード",
   "developer-agent": "開発者エージェント",
   "browser-agent": "ブラウザエージェント",
   "document-agent": "ドキュメントエージェント",
@@ -116,6 +155,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 +194,7 @@
   "no-cookies-saved-yet": "まだCookieが保存されていません",
   "no-cookies-saved-yet-description": "上記の「ブラウザを開く」をクリックして、ウェブサイトにログインし、将来のタスクのためにCookieを保存します。",
   "back": "戻る",
+  "forward": "進む",
   "total-tokens": "合計トークン",
   "total-tasks": "合計タスク",
   "edit": "編集",
@@ -175,6 +216,26 @@
   "delete-project": "プロジェクトを削除",
   "delete-project-confirmation": "このプロジェクトとそのすべてのタスクを削除してもよろしいですか？この操作は元に戻せません。",
   "please-select-model": "続行するには、エージェント > モデルでモデルを選択してください。",
+  "select-model-cta": "モデルを選択",
+  "sessions-section-caption": "セッション",
+  "projects-heading": "プロジェクト",
+  "sessions-heading": "セッション",
+  "tasks-heading": "タスク",
+  "sessions-show-all": "すべて表示",
+  "sessions-delete-session": "セッションを削除",
+  "sessions-expand-list": "セッション一覧を展開",
+  "sessions-collapse-list": "セッション一覧を折りたたむ",
+  "sessions-session-menu": "セッションのオプション",
+  "sessions-untitled": "無題のセッション",
+  "workspace-lets-do-this": "さあ、始めましょう",
+  "workspace-work-in-project": "プロジェクトで作業",
+  "workspace-select-folder": "フォルダを選択",
+  "workspace-history-projects": "履歴のプロジェクト",
+  "workspace-no-history-projects": "まだ履歴プロジェクトはありません",
+  "workspace-session-single-agent": "シングルエージェント",
+  "workspace-session-workforce": "ワークフォース",
+  "workspace-get-things-done-with-eigent": "Eigentでタスクを進めよう",
+  "project-task-placeholder": "達成したいことを説明してください...",
   "cdp-browser-connection": "CDP ブラウザ接続",
   "cdp-browser-connection-description": "リモートデバッグが有効な Chrome ブラウザに接続",
   "current-port": "現在のポート：",
@@ -243,5 +304,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..15117d0f7 100644
--- a/src/i18n/locales/ja/setting.json
+++ b/src/i18n/locales/ja/setting.json
@@ -4,6 +4,16 @@
   "privacy": "プライバシー",
   "models": "モデル",
   "mcp": "MCP & ツール",
+  "mcps-and-tools": "MCP とツール",
+  "mcp-sidebar-web": "Web",
+  "mcp-sidebar-not-connected": "未接続",
+  "mcp-configuration": "MCP 設定",
+  "connectors": "コネクタ",
+  "disconnect": "切断",
+  "mcp-select-connection": "詳細を表示する接続を選択してください",
+  "mcp-custom-server-tools": "サーバーコマンド",
+  "mcp-add": "追加",
+  "disable": "無効化",
   "eigent-cloud": "Eigent Cloud",
   "default": "デフォルト",
   "profile": "プロフィール",
@@ -19,6 +29,22 @@
   "light": "ライト",
   "transparent": "透明",
 
+  "workspace-main-background": "ワークスペースの背景",
+  "workspace-main-background-description": "Workforce と Session のメインパネルにのみ適用されます。",
+  "workspace-main-background-empty": "なし",
+  "workspace-main-background-dots": "ドット",
+  "workspace-main-background-blocks": "グリッド",
+  "workspace-main-background-ruled": "罫線",
+  "workspace-main-background-dotted": "点線",
+  "workspace-main-background-dashed": "破線",
+
+  "appearance-tab": "外観",
+  "color-mode": "カラーモード",
+  "accent-palette": "アクセントの配色",
+  "accent-palette-description": "UIのプリセット配色です。ライトモードとダークモードで別々に保存されます。",
+  "accent-for-light": "ライトモード",
+  "accent-for-dark": "ダークモード",
+
   "data-privacy": "データプライバシー",
   "data-privacy-description": "Eigentはプライバシーを確保するためにローカルファーストの原則に基づいて構築されています。デフォルトでは、データはお客様のデバイスに残ります。クラウド機能はオプションであり、機能するために必要な最小限のデータのみを使用します。詳細については、当社の",
   "privacy-policy": "プライバシーポリシー",
@@ -80,6 +106,22 @@
   "light": "ライト",
   "transparent": "透明",
 
+  "workspace-main-background": "ワークスペースの背景",
+  "workspace-main-background-description": "Workforce と Session のメインパネルにのみ適用されます。",
+  "workspace-main-background-empty": "なし",
+  "workspace-main-background-dots": "ドット",
+  "workspace-main-background-blocks": "グリッド",
+  "workspace-main-background-ruled": "罫線",
+  "workspace-main-background-dotted": "点線",
+  "workspace-main-background-dashed": "破線",
+
+  "appearance-tab": "外観",
+  "color-mode": "カラーモード",
+  "accent-palette": "アクセントの配色",
+  "accent-palette-description": "UIのプリセット配色です。ライトモードとダークモードで別々に保存されます。",
+  "accent-for-light": "ライトモード",
+  "accent-for-dark": "ダークモード",
+
   "data-privacy": "データプライバシー",
   "data-privacy-description": "Eigentはプライバシーを確保するためにローカルファーストの原則に基づいて構築されています。デフォルトでは、データはお客様のデバイスに残ります。クラウド機能はオプションであり、機能するために必要な最小限のデータのみを使用します。詳細については、当社の",
   "privacy-policy": "プライバシーポリシー",
@@ -211,6 +253,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 +314,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/ja/workforce.json b/src/i18n/locales/ja/workforce.json
index bea7c9f37..505f7eafe 100644
--- a/src/i18n/locales/ja/workforce.json
+++ b/src/i18n/locales/ja/workforce.json
@@ -8,6 +8,7 @@
   "save-changes": "変更を保存",
   "description-optional": "説明（任意）",
   "agent-tool": "エージェントツール",
+  "agent-tool-tooltip": "エージェントのツールと統合を選択",
   "share": "共有",
   "advanced-model-config": "高度なモデル設定",
   "use-custom-model": "カスタムモデル設定を使用",
@@ -16,5 +17,8 @@
   "model-type": "モデルタイプ",
   "model-type-placeholder": "例：gpt-4o-mini",
   "worker-name-cannot-be-empty": "ワーカー名は空にできません",
-  "worker-name-already-exists": "ワーカー名は既に存在します"
+  "worker-name-already-exists": "ワーカー名は既に存在します",
+  "detail": "詳細",
+  "duplicate": "複製",
+  "delete": "削除"
 }
diff --git a/src/i18n/locales/ko/agents.json b/src/i18n/locales/ko/agents.json
index 5649fb6d1..d87a0722d 100644
--- a/src/i18n/locales/ko/agents.json
+++ b/src/i18n/locales/ko/agents.json
@@ -37,6 +37,7 @@
   "upload": "업로드",
   "invalid-file-type": "잘못된 파일 유형입니다. .skill, .md, .txt 또는 .json 파일을 업로드해 주세요.",
   "file-too-large": "파일이 너무 큽니다. 최대 크기는 1MB입니다.",
+  "zip-import-too-large": "ZIP 파일이 너무 큽니다. 최대 크기는 50MB입니다.",
   "file-read-error": "파일 읽기에 실패했습니다. 다시 시도해 주세요.",
   "reupload-file": "파일 다시 업로드",
   "upload-error-invalid-format": "파일은 .zip 또는 스킬 패키지(.skill 또는 .md)여야 합니다.",
@@ -46,5 +47,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..76be551b9 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": "검색",
@@ -39,6 +47,7 @@
   "reassigned": "재할당",
   "ongoing": "진행 중",
   "pending": "대기 중",
+  "preparing-to-execute-tasks": "작업 실행 준비 중",
   "failed": "실패",
   "all": "모두",
   "in-progress": "진행 중",
@@ -53,17 +62,34 @@
   "new-project": "새 프로젝트",
   "no-reply-received-task-continue": "응답이 없으므로 작업을 계속합니다.",
   "splitting-tasks": "작업 분할",
+  "working-on-tasks-for": "작업 진행 중 · <elapsed>{{time}}</elapsed>",
+  "worked-for": "작업 시간 <elapsed>{{time}}</elapsed>",
   "start-task": "작업 시작",
   "message-cannot-be-empty": "메시지는 비워둘 수 없습니다",
   "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..a8b07ba90 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,10 +47,42 @@
   "browser": "브라우저",
   "settings": "설정",
   "general": "일반",
-  "workers": "작업자",
+  "aiWorkforce": "AI 워크포스",
+  "expand-workforce": "워크포스 영역 넓히기",
+  "minimize-workforce": "워크포스 영역 줄이기",
+  "show-workforce-panel": "워크포스 패널 표시",
+  "hide-workforce-panel": "워크포스 패널 숨기기",
+  "show-side-panel": "사이드 패널 표시",
+  "hide-side-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": "로그 다운로드",
+  "notifications": "알림",
+  "notifications-empty": "알림이 없습니다.",
+  "support": "지원",
+  "log-file-empty": "로그 파일이 비어 있습니다",
   "new-project": "새 프로젝트",
   "welcome": "환영",
+  "greeting-morning": "아침",
+  "greeting-afternoon": "좋은 오후",
+  "greeting-evening": "저녁",
   "delete-task": "작업 삭제",
   "delete-task-confirmation": "이 작업을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
   "delete": "삭제",
@@ -59,6 +92,10 @@
   "save": "저장",
   "not-found": "찾을 수 없음",
   "tasks": "작업",
+  "chat-history-title": "채팅 기록",
+  "chat-history-tooltip": "채팅 기록",
+  "back-to-workspace-tooltip": "작업 공간으로 돌아가기",
+  "task-list-add-hint": "워크스페이스를 열고 채팅 입력에 포커스",
   "ongoing": "진행 중",
   "token": "# 토큰",
   "configuring": "구성 중...",
@@ -91,6 +128,7 @@
   "task-running": "작업 실행",
   "task-completed": "작업 완료",
   "add-new-task": "새 작업 추가",
+  "achieve-project": "프로젝트 달성",
   "end-project": "프로젝트 종료",
   "ending-this-project-will-stop": "이 프로젝트를 종료하면 실행 중인 모든 작업이 중지되고, 기록에서 제거되며, 새로운 빈 프로젝트가 생성됩니다. 계속하시겠습니까?",
   "yes-end-project": "예, 프로젝트 종료",
@@ -101,6 +139,7 @@
   "are-you-sure-you-want-to-delete": "이 작업을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
   "share": "공유",
   "home": "홈",
+  "dashboard": "대시보드",
   "developer-agent": "개발자 에이전트",
   "browser-agent": "브라우저 에이전트",
   "document-agent": "문서 에이전트",
@@ -116,6 +155,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 +194,7 @@
   "no-cookies-saved-yet": "아직 쿠키가 저장되지 않았습니다",
   "no-cookies-saved-yet-description": "위의 \"브라우저 열기\"를 클릭하여 웹사이트에 로그인하고 향후 작업을 위해 쿠키를 저장하세요.",
   "back": "뒤로",
+  "forward": "앞으로",
   "total-tokens": "총 토큰",
   "total-tasks": "총 작업",
   "edit": "편집",
@@ -175,6 +216,26 @@
   "delete-project": "프로젝트 삭제",
   "delete-project-confirmation": "이 프로젝트와 모든 작업을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
   "please-select-model": "계속하려면 에이전트 > 모델에서 모델을 선택하세요.",
+  "select-model-cta": "모델 선택",
+  "sessions-section-caption": "세션",
+  "projects-heading": "프로젝트",
+  "sessions-heading": "세션",
+  "tasks-heading": "작업",
+  "sessions-show-all": "모두 보기",
+  "sessions-delete-session": "세션 삭제",
+  "sessions-expand-list": "세션 목록 펼치기",
+  "sessions-collapse-list": "세션 목록 접기",
+  "sessions-session-menu": "세션 옵션",
+  "sessions-untitled": "제목 없는 세션",
+  "workspace-lets-do-this": "시작해요",
+  "workspace-work-in-project": "프로젝트에서 작업",
+  "workspace-select-folder": "폴더 선택",
+  "workspace-history-projects": "기록 프로젝트",
+  "workspace-no-history-projects": "아직 기록 프로젝트가 없습니다",
+  "workspace-session-single-agent": "단일 에이전트",
+  "workspace-session-workforce": "워크포스",
+  "workspace-get-things-done-with-eigent": "Eigent로 일을 처리하세요",
+  "project-task-placeholder": "달성하고 싶은 내용을 설명하세요...",
   "cdp-browser-connection": "CDP 브라우저 연결",
   "cdp-browser-connection-description": "원격 디버깅이 활성화된 Chrome 브라우저에 연결",
   "current-port": "현재 포트:",
@@ -243,5 +304,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..6ba374709 100644
--- a/src/i18n/locales/ko/setting.json
+++ b/src/i18n/locales/ko/setting.json
@@ -4,6 +4,16 @@
   "privacy": "개인정보",
   "models": "모델",
   "mcp": "MCP 및 도구",
+  "mcps-and-tools": "MCP 및 도구",
+  "mcp-sidebar-web": "웹",
+  "mcp-sidebar-not-connected": "연결 안 됨",
+  "mcp-configuration": "MCP 구성",
+  "connectors": "커넥터",
+  "disconnect": "연결 해제",
+  "mcp-select-connection": "세부정보를 보려면 연결을 선택하세요",
+  "mcp-custom-server-tools": "서버 명령",
+  "mcp-add": "추가",
+  "disable": "비활성화",
   "eigent-cloud": "Eigent Cloud",
   "default": "기본값",
   "profile": "프로필",
@@ -19,6 +29,22 @@
   "light": "라이트",
   "transparent": "투명",
 
+  "workspace-main-background": "작업 영역 배경",
+  "workspace-main-background-description": "Workforce 및 Session 메인 패널에만 적용됩니다.",
+  "workspace-main-background-empty": "빈 화면",
+  "workspace-main-background-dots": "도트",
+  "workspace-main-background-blocks": "격자",
+  "workspace-main-background-ruled": "줄 눈금",
+  "workspace-main-background-dotted": "점선",
+  "workspace-main-background-dashed": "대시선",
+
+  "appearance-tab": "모양",
+  "color-mode": "색상 모드",
+  "accent-palette": "강조 색상 테마",
+  "accent-palette-description": "인터페이스용 사전 정의 색상 테마입니다. 라이트 모드와 다크 모드에 각각 저장됩니다.",
+  "accent-for-light": "라이트 모드",
+  "accent-for-dark": "다크 모드",
+
   "data-privacy": "데이터 개인정보 보호",
   "data-privacy-description": "Eigent는 개인정보 보호를 위해 로컬 우선 원칙을 기반으로 구축되었습니다. 기본적으로 데이터는 사용자의 기기에 남아 있습니다. 클라우드 기능은 선택 사항이며 작동에 필요한 최소한의 데이터만 사용합니다. 자세한 내용은 당사의",
   "privacy-policy": "개인정보 처리방침",
@@ -80,6 +106,22 @@
   "light": "라이트",
   "transparent": "투명",
 
+  "workspace-main-background": "작업 영역 배경",
+  "workspace-main-background-description": "Workforce 및 Session 메인 패널에만 적용됩니다.",
+  "workspace-main-background-empty": "빈 화면",
+  "workspace-main-background-dots": "도트",
+  "workspace-main-background-blocks": "격자",
+  "workspace-main-background-ruled": "줄 눈금",
+  "workspace-main-background-dotted": "점선",
+  "workspace-main-background-dashed": "대시선",
+
+  "appearance-tab": "모양",
+  "color-mode": "색상 모드",
+  "accent-palette": "강조 색상 테마",
+  "accent-palette-description": "인터페이스용 사전 정의 색상 테마입니다. 라이트 모드와 다크 모드에 각각 저장됩니다.",
+  "accent-for-light": "라이트 모드",
+  "accent-for-dark": "다크 모드",
+
   "data-privacy": "데이터 개인정보 보호",
   "data-privacy-description": "Eigent는 개인정보 보호를 위해 로컬 우선 원칙을 기반으로 구축되었습니다. 기본적으로 데이터는 사용자의 기기에 남아 있습니다. 클라우드 기능은 선택 사항이며 작동에 필요한 최소한의 데이터만 사용합니다. 자세한 내용은 당사의",
   "privacy-policy": "개인정보 처리방침",
@@ -211,6 +253,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 +314,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/ko/workforce.json b/src/i18n/locales/ko/workforce.json
index f6efa602f..43761b48a 100644
--- a/src/i18n/locales/ko/workforce.json
+++ b/src/i18n/locales/ko/workforce.json
@@ -8,6 +8,7 @@
   "save-changes": "변경 사항 저장",
   "description-optional": "설명 (선택 사항)",
   "agent-tool": "에이전트 도구",
+  "agent-tool-tooltip": "에이전트를 위한 도구 및 통합 선택",
   "share": "공유",
   "advanced-model-config": "고급 모델 구성",
   "use-custom-model": "사용자 지정 모델 구성 사용",
@@ -16,5 +17,8 @@
   "model-type": "모델 유형",
   "model-type-placeholder": "예: gpt-4o-mini",
   "worker-name-cannot-be-empty": "작업자 이름은 비워둘 수 없습니다",
-  "worker-name-already-exists": "작업자 이름이 이미 존재합니다"
+  "worker-name-already-exists": "작업자 이름이 이미 존재합니다",
+  "detail": "상세",
+  "duplicate": "복제",
+  "delete": "삭제"
 }
diff --git a/src/i18n/locales/ru/agents.json b/src/i18n/locales/ru/agents.json
index ef7c027f3..c6784b021 100644
--- a/src/i18n/locales/ru/agents.json
+++ b/src/i18n/locales/ru/agents.json
@@ -37,6 +37,7 @@
   "upload": "Загрузить",
   "invalid-file-type": "Неверный тип файла. Пожалуйста, загрузите файл .skill, .md, .txt или .json.",
   "file-too-large": "Файл слишком большой. Максимальный размер 1MB.",
+  "zip-import-too-large": "ZIP слишком большой. Максимальный размер — 50 МБ.",
   "file-read-error": "Не удалось прочитать файл. Пожалуйста, попробуйте снова.",
   "reupload-file": "Загрузить файл снова",
   "upload-error-invalid-format": "Файл должен быть .zip или пакетом навыка (.skill или .md).",
@@ -46,5 +47,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..5c3957a03 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": "Поиск",
@@ -39,6 +47,7 @@
   "reassigned": "Переназначено",
   "ongoing": "В процессе",
   "pending": "Ожидает",
+  "preparing-to-execute-tasks": "Подготовка к выполнению задач",
   "failed": "Неудачно",
   "all": "Все",
   "in-progress": "В процессе",
@@ -53,19 +62,34 @@
   "new-project": "Новый проект",
   "no-reply-received-task-continue": "Ответ не получен, задача продолжается",
   "splitting-tasks": "Разделение задач",
+  "working-on-tasks-for": "Работа над задачами · <elapsed>{{time}}</elapsed>",
+  "worked-for": "Работал <elapsed>{{time}}</elapsed>",
   "start-task": "Начать задачу",
   "message-cannot-be-empty": "Сообщение не может быть пустым",
   "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..0f67b841d 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,10 +47,42 @@
   "browser": "Браузер",
   "settings": "Настройки",
   "general": "Общие",
-  "workers": "Работники",
+  "aiWorkforce": "Рабочая сила ИИ",
+  "expand-workforce": "Расширить рабочую область",
+  "minimize-workforce": "Сузить рабочую область",
+  "show-workforce-panel": "Показать панель Workforce",
+  "hide-workforce-panel": "Скрыть панель Workforce",
+  "show-side-panel": "Показать боковую панель",
+  "hide-side-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",
+  "email-copied": "Email скопирован в буфер обмена",
+  "copy-failed": "Не удалось скопировать email",
+  "download-logs": "Скачать журналы",
+  "notifications": "Уведомления",
+  "notifications-empty": "Пока нет уведомлений.",
+  "support": "Поддержка",
+  "log-file-empty": "Файл журнала пуст",
   "new-project": "Новый проект",
   "welcome": "Добро пожаловать",
+  "greeting-morning": "Утро",
+  "greeting-afternoon": "Добрый День",
+  "greeting-evening": "Вечер",
   "delete-task": "Удалить задачу",
   "delete-task-confirmation": "Вы уверены, что хотите удалить эту задачу? Это действие нельзя отменить.",
   "delete": "Удалить",
@@ -59,6 +92,10 @@
   "save": "Сохранить",
   "not-found": "Не найдено",
   "tasks": "ЗАДАЧИ",
+  "chat-history-title": "История чата",
+  "chat-history-tooltip": "История чата",
+  "back-to-workspace-tooltip": "Назад к рабочему пространству",
+  "task-list-add-hint": "Открыть рабочее пространство и фокус на чате",
   "ongoing": "В процессе",
   "token": "# Токен",
   "configuring": "Настройка...",
@@ -91,6 +128,7 @@
   "task-running": "Выполнение задачи",
   "task-completed": "Задача выполнена",
   "add-new-task": "Добавить новую задачу",
+  "achieve-project": "Архивировать проект",
   "end-project": "Завершить проект",
   "ending-this-project-will-stop": "Завершение этого проекта остановит все выполняющиеся задачи, удалит его из истории и создаст новый пустой проект. Вы уверены, что хотите продолжить?",
   "yes-end-project": "Да, завершить проект",
@@ -101,6 +139,7 @@
   "are-you-sure-you-want-to-delete": "Вы уверены, что хотите удалить эту задачу? Это действие нельзя отменить.",
   "share": "Поделиться",
   "home": "Главная",
+  "dashboard": "Панель",
   "developer-agent": "Агент разработчика",
   "browser-agent": "Агент браузера",
   "document-agent": "Агент документов",
@@ -116,6 +155,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 +194,7 @@
   "no-cookies-saved-yet": "Файлы cookie ещё не сохранены",
   "no-cookies-saved-yet-description": "Нажмите \"Открыть браузер\" выше, чтобы войти на веб-сайты и сохранить их файлы cookie для будущих задач.",
   "back": "Назад",
+  "forward": "Вперёд",
   "total-tokens": "Всего токенов",
   "total-tasks": "Всего задач",
   "edit": "Редактировать",
@@ -175,6 +216,26 @@
   "delete-project": "Удалить проект",
   "delete-project-confirmation": "Вы уверены, что хотите удалить этот проект и все его задачи? Это действие нельзя отменить.",
   "please-select-model": "Пожалуйста, выберите модель в Агенты > Модели, чтобы продолжить.",
+  "select-model-cta": "Выбрать модель",
+  "sessions-section-caption": "сессии",
+  "projects-heading": "Проекты",
+  "sessions-heading": "Сессии",
+  "tasks-heading": "Задачи",
+  "sessions-show-all": "Показать все",
+  "sessions-delete-session": "Удалить сессию",
+  "sessions-expand-list": "Развернуть список сессий",
+  "sessions-collapse-list": "Свернуть список сессий",
+  "sessions-session-menu": "Параметры сессии",
+  "sessions-untitled": "Сессия без названия",
+  "workspace-lets-do-this": "Давайте начнём",
+  "workspace-work-in-project": "Работа в проекте",
+  "workspace-select-folder": "Выбрать папку",
+  "workspace-history-projects": "Недавние проекты",
+  "workspace-no-history-projects": "Пока нет недавних проектов",
+  "workspace-session-single-agent": "Один агент",
+  "workspace-session-workforce": "Команда",
+  "workspace-get-things-done-with-eigent": "Делайте дела с Eigent",
+  "project-task-placeholder": "Опишите, чего хотите достичь...",
   "cdp-browser-connection": "Подключение CDP-браузера",
   "cdp-browser-connection-description": "Подключиться к браузеру Chrome с включённой удалённой отладкой",
   "current-port": "Текущий порт:",
@@ -243,5 +304,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..02e1688c0 100644
--- a/src/i18n/locales/ru/setting.json
+++ b/src/i18n/locales/ru/setting.json
@@ -4,6 +4,16 @@
   "privacy": "Конфиденциальность",
   "models": "Модели",
   "mcp": "MCP и Инструменты",
+  "mcps-and-tools": "MCP и инструменты",
+  "mcp-sidebar-web": "Веб",
+  "mcp-sidebar-not-connected": "Не подключено",
+  "mcp-configuration": "Конфигурация MCP",
+  "connectors": "Коннекторы",
+  "disconnect": "Отключить",
+  "mcp-select-connection": "Выберите подключение для просмотра сведений",
+  "mcp-custom-server-tools": "Команда сервера",
+  "mcp-add": "Добавить",
+  "disable": "Отключить",
   "eigent-cloud": "Eigent Cloud",
   "default": "По умолчанию",
   "profile": "Профиль",
@@ -19,6 +29,22 @@
   "light": "Светлый",
   "transparent": "Прозрачный",
 
+  "workspace-main-background": "Фон рабочей области",
+  "workspace-main-background-description": "Только для основных панелей Workforce и Session.",
+  "workspace-main-background-empty": "Пусто",
+  "workspace-main-background-dots": "Точки",
+  "workspace-main-background-blocks": "Сетка",
+  "workspace-main-background-ruled": "Линейка",
+  "workspace-main-background-dotted": "Пунктирные линии",
+  "workspace-main-background-dashed": "Штриховые линии",
+
+  "appearance-tab": "Оформление",
+  "color-mode": "Цветовой режим",
+  "accent-palette": "Акцентная палитра",
+  "accent-palette-description": "Предустановленные цветовые темы интерфейса. Сохраняются отдельно для светлого и тёмного режима.",
+  "accent-for-light": "Светлый режим",
+  "accent-for-dark": "Тёмный режим",
+
   "data-privacy": "Конфиденциальность данных",
   "data-privacy-description": "Eigent построен по принципу \"сначала локально\", чтобы обеспечить вашу конфиденциальность. Ваши данные по умолчанию остаются на вашем устройстве. Облачные функции являются необязательными и используют только минимальные необходимые данные для функционирования. Полные сведения см. в нашей",
   "privacy-policy": "Политике конфиденциальности",
@@ -80,6 +106,22 @@
   "light": "Светлый",
   "transparent": "Прозрачный",
 
+  "workspace-main-background": "Фон рабочей области",
+  "workspace-main-background-description": "Только для основных панелей Workforce и Session.",
+  "workspace-main-background-empty": "Пусто",
+  "workspace-main-background-dots": "Точки",
+  "workspace-main-background-blocks": "Сетка",
+  "workspace-main-background-ruled": "Линейка",
+  "workspace-main-background-dotted": "Пунктирные линии",
+  "workspace-main-background-dashed": "Штриховые линии",
+
+  "appearance-tab": "Оформление",
+  "color-mode": "Цветовой режим",
+  "accent-palette": "Акцентная палитра",
+  "accent-palette-description": "Предустановленные цветовые темы интерфейса. Сохраняются отдельно для светлого и тёмного режима.",
+  "accent-for-light": "Светлый режим",
+  "accent-for-dark": "Тёмный режим",
+
   "data-privacy": "Конфиденциальность данных",
   "data-privacy-description": "Eigent построен по принципу \"сначала локально\", чтобы обеспечить вашу конфиденциальность. Ваши данные по умолчанию остаются на вашем устройстве. Облачные функции являются необязательными и используют только минимальные необходимые данные для функционирования. Полные сведения см. в нашей",
   "privacy-policy": "Политике конфиденциальности",
@@ -210,6 +252,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 +313,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/ru/workforce.json b/src/i18n/locales/ru/workforce.json
index de72cf7be..71ef5fd37 100644
--- a/src/i18n/locales/ru/workforce.json
+++ b/src/i18n/locales/ru/workforce.json
@@ -8,6 +8,7 @@
   "save-changes": "Сохранить изменения",
   "description-optional": "Описание (необязательно)",
   "agent-tool": "Инструмент агента",
+  "agent-tool-tooltip": "Выберите инструменты и интеграции для вашего агента",
   "share": "Поделиться",
   "advanced-model-config": "Расширенная конфигурация модели",
   "use-custom-model": "Использовать пользовательскую конфигурацию модели",
@@ -16,5 +17,8 @@
   "model-type": "Тип модели",
   "model-type-placeholder": "например, gpt-4o-mini",
   "worker-name-cannot-be-empty": "Имя работника не может быть пустым",
-  "worker-name-already-exists": "Имя работника уже существует"
+  "worker-name-already-exists": "Имя работника уже существует",
+  "detail": "Подробнее",
+  "duplicate": "Дублировать",
+  "delete": "Удалить"
 }
diff --git a/src/i18n/locales/zh-Hans/agents.json b/src/i18n/locales/zh-Hans/agents.json
index adedc1988..365101af2 100644
--- a/src/i18n/locales/zh-Hans/agents.json
+++ b/src/i18n/locales/zh-Hans/agents.json
@@ -37,6 +37,7 @@
   "upload": "上传",
   "invalid-file-type": "无效的文件类型。请上传 .skill、.md、.txt 或 .json 文件。",
   "file-too-large": "文件太大。最大大小为 1MB。",
+  "zip-import-too-large": "ZIP 文件过大。最大大小为 50 MB。",
   "file-read-error": "读取文件失败。请重试。",
   "reupload-file": "重新上传文件",
   "upload-error-invalid-format": "文件必须为 .zip 或技能包（.skill 或 .md）。",
@@ -46,5 +47,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..e098217bc 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": "搜索",
@@ -39,6 +47,7 @@
   "reassigned": "重新分配",
   "ongoing": "进行中",
   "pending": "待处理",
+  "preparing-to-execute-tasks": "正在准备执行任务",
   "failed": "失败",
   "all": "全部",
   "in-progress": "进行中",
@@ -53,19 +62,34 @@
   "new-project": "新项目",
   "no-reply-received-task-continue": "没有收到回复，任务继续",
   "splitting-tasks": "拆分任务",
+  "working-on-tasks-for": "正在处理任务 · <elapsed>{{time}}</elapsed>",
+  "worked-for": "已工作 <elapsed>{{time}}</elapsed>",
   "start-task": "开始任务",
   "message-cannot-be-empty": "消息不能为空",
   "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..b4ce76f47 100644
--- a/src/i18n/locales/zh-Hans/layout.json
+++ b/src/i18n/locales/zh-Hans/layout.json
@@ -1,5 +1,22 @@
 {
   "report-bug": "报告 bug",
+  "report-bug-dialog-title": "报告 bug",
+  "report-bug-footer-hint": "我们会将应用日志打包为 ZIP 并打开您的邮件客户端。发送前请将该 ZIP 作为附件。",
+  "report-bug-field-description": "出现了什么问题？",
+  "report-bug-field-description-placeholder": "请描述问题…",
+  "report-bug-field-steps": "复现步骤（可选）",
+  "report-bug-field-steps-placeholder": "1. … 2. …",
+  "report-bug-meta": "版本 {{version}} · {{os}} ({{arch}})",
+  "report-bug-description-required": "请简要描述问题。",
+  "report-bug-submit": "保存诊断并打开邮件",
+  "report-bug-diagnostics-saved": "诊断已保存。请在邮件中附上 ZIP 后再发送。",
+  "report-bug-mail-subject": "[Eigent] 问题反馈",
+  "report-bug-mail-body-intro": "请附上您刚保存的诊断 ZIP 文件。",
+  "report-bug-mail-body-path": "ZIP 保存位置：{{path}}",
+  "report-bug-mail-body-meta": "应用版本：{{version}} | 系统：{{os}} ({{arch}})",
+  "report-bug-mail-body-desc": "问题描述：",
+  "report-bug-mail-body-steps": "复现步骤：",
+  "report-bug-mail-body-truncated": "因长度限制，邮件正文已截断。完整内容见 ZIP 内的 bug_report.txt。",
   "refer-friends": "推荐朋友",
   "retry": "重试",
   "please-enter-email-address": "请输入邮箱地址",
@@ -10,8 +27,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,10 +64,42 @@
   "browser": "浏览器",
   "settings": "设置",
   "general": "通用",
-  "workers": "工作器",
+  "aiWorkforce": "AI 团队",
+  "expand-workforce": "展开工作区",
+  "minimize-workforce": "收起工作区",
+  "show-workforce-panel": "显示工作区面板",
+  "hide-workforce-panel": "隐藏工作区面板",
+  "show-side-panel": "显示侧边面板",
+  "hide-side-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": "下载日志",
+  "notifications": "通知",
+  "notifications-empty": "暂无通知。",
+  "support": "支持",
+  "log-file-empty": "日志文件为空",
   "new-project": "新项目",
   "welcome": "欢迎",
+  "greeting-morning": "早",
+  "greeting-afternoon": "下午好",
+  "greeting-evening": "晚",
   "delete-task": "删除任务",
   "delete-task-confirmation": "您确定要删除此任务吗？此操作无法撤销。",
   "delete": "删除",
@@ -62,6 +109,11 @@
   "save": "保存",
   "not-found": "未找到",
   "tasks": "任务",
+  "chat-history-title": "聊天历史",
+  "chat-history-tooltip": "聊天历史",
+  "back-to-workspace-tooltip": "返回工作区",
+  "task-list-add-hint": "打开工作台并聚焦聊天输入框",
+  "ongoing": "进行中",
   "token": "# 令牌",
   "configuring": "配置中...",
   "not-configured": "未配置",
@@ -93,6 +145,7 @@
   "task-running": "任务运行",
   "task-completed": "任务完成",
   "add-new-task": "添加新任务",
+  "achieve-project": "达成项目",
   "end-project": "结束项目",
   "ending-this-project-will-stop": "结束此项目将停止任何正在运行的任务，从历史记录中删除它，并创建一个新的空项目。您确定要继续吗？",
   "yes-end-project": "是的，结束项目",
@@ -103,7 +156,9 @@
   "are-you-sure-you-want-to-delete": "您确定要删除此任务吗？此操作无法撤销。",
   "share": "分享",
   "home": "首页",
+  "dashboard": "控制台",
   "back": "返回",
+  "forward": "前进",
   "developer-agent": "开发者智能体",
   "browser-agent": "浏览器智能体",
   "document-agent": "文档智能体",
@@ -119,6 +174,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": "未收到回复，任务继续",
@@ -177,6 +233,26 @@
   "delete-project": "删除项目",
   "delete-project-confirmation": "您确定要删除此项目及其所有任务吗？此操作无法撤销。",
   "please-select-model": "请在智能体 > 模型中选择一个模型以继续。",
+  "select-model-cta": "选择模型",
+  "sessions-section-caption": "会话",
+  "projects-heading": "项目",
+  "sessions-heading": "会话",
+  "tasks-heading": "任务",
+  "sessions-show-all": "显示全部",
+  "sessions-delete-session": "删除会话",
+  "sessions-expand-list": "展开会话列表",
+  "sessions-collapse-list": "收起会话列表",
+  "sessions-session-menu": "会话选项",
+  "sessions-untitled": "未命名会话",
+  "workspace-lets-do-this": "开始吧",
+  "workspace-work-in-project": "在项目中工作",
+  "workspace-select-folder": "选择文件夹",
+  "workspace-history-projects": "历史项目",
+  "workspace-no-history-projects": "暂无历史项目",
+  "workspace-session-single-agent": "单智能体",
+  "workspace-session-workforce": "工作群",
+  "workspace-get-things-done-with-eigent": "用 Eigent 把事情做好",
+  "project-task-placeholder": "描述你想完成的任务...",
   "cdp-browser-connection": "CDP 浏览器连接",
   "cdp-browser-connection-description": "连接到启用了远程调试的 Chrome 浏览器",
   "current-port": "当前端口：",
@@ -245,5 +321,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..e80ddc072 100644
--- a/src/i18n/locales/zh-Hans/setting.json
+++ b/src/i18n/locales/zh-Hans/setting.json
@@ -4,6 +4,16 @@
   "privacy": "隐私",
   "models": "模型",
   "mcp": "MCP & 工具",
+  "mcps-and-tools": "MCP 与工具",
+  "mcp-sidebar-web": "网页",
+  "mcp-sidebar-not-connected": "未连接",
+  "mcp-configuration": "MCP 配置",
+  "connectors": "连接器",
+  "disconnect": "断开连接",
+  "mcp-select-connection": "选择一个连接以查看详情",
+  "mcp-custom-server-tools": "服务器命令",
+  "mcp-add": "添加",
+  "disable": "禁用",
   "eigent-cloud": "Eigent Cloud",
   "default": "默认",
   "profile": "个人资料",
@@ -20,6 +30,22 @@
   "light": "亮色",
   "transparent": "透明",
 
+  "workspace-main-background": "工作区背景",
+  "workspace-main-background-description": "仅应用于 Workforce 与 Session 主内容区。",
+  "workspace-main-background-empty": "无图案",
+  "workspace-main-background-dots": "点状图案",
+  "workspace-main-background-blocks": "网格图案",
+  "workspace-main-background-ruled": "横格线",
+  "workspace-main-background-dotted": "虚线格",
+  "workspace-main-background-dashed": "长虚线",
+
+  "appearance-tab": "外观",
+  "color-mode": "颜色模式",
+  "accent-palette": "强调色主题",
+  "accent-palette-description": "界面的预设配色方案，浅色与深色模式分别保存。",
+  "accent-for-light": "浅色模式",
+  "accent-for-dark": "深色模式",
+
   "data-privacy": "数据隐私",
   "data-privacy-description": "Eigent 基于本地优先原则确保您的隐私。您的数据默认存储在您的设备上。云功能是可选的，仅使用最小的数据来实现功能。详细信息请访问我们的",
   "privacy-policy": "隐私政策",
@@ -148,6 +174,7 @@
   "reset": "重置",
   "reset-success": "重置成功！",
   "reset-failed": "重置失败！",
+  "select-default-model": "选择默认模型",
 
   "browser-login": "浏览器登录",
   "browser-login-description": "打开 Chrome 浏览器以登录您的账户。您的登录数据将安全地保存在本地配置文件中。",
@@ -176,6 +203,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 +242,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-Hans/workforce.json b/src/i18n/locales/zh-Hans/workforce.json
index a226389f5..8d45c9238 100644
--- a/src/i18n/locales/zh-Hans/workforce.json
+++ b/src/i18n/locales/zh-Hans/workforce.json
@@ -8,6 +8,7 @@
   "save-changes": "保存更改",
   "description-optional": "描述（可选）",
   "agent-tool": "Agent 工具",
+  "agent-tool-tooltip": "为您的智能体选择工具和集成",
   "share": "分享",
   "advanced-model-config": "高级模型配置",
   "use-custom-model": "使用自定义模型配置",
@@ -16,5 +17,8 @@
   "model-type": "模型类型",
   "model-type-placeholder": "例如：gpt-4o-mini",
   "worker-name-cannot-be-empty": "Worker 名称不能为空",
-  "worker-name-already-exists": "Worker 名称已存在"
+  "worker-name-already-exists": "Worker 名称已存在",
+  "detail": "详情",
+  "duplicate": "复制",
+  "delete": "删除"
 }
diff --git a/src/i18n/locales/zh-Hant/agents.json b/src/i18n/locales/zh-Hant/agents.json
index 2884243db..977d8073a 100644
--- a/src/i18n/locales/zh-Hant/agents.json
+++ b/src/i18n/locales/zh-Hant/agents.json
@@ -37,6 +37,7 @@
   "upload": "上傳",
   "invalid-file-type": "無效的檔案類型。請上傳 .skill、.md、.txt 或 .json 檔案。",
   "file-too-large": "檔案太大。最大大小為 1MB。",
+  "zip-import-too-large": "ZIP 檔案過大。最大大小為 50 MB。",
   "file-read-error": "讀取檔案失敗。請重試。",
   "reupload-file": "重新上傳檔案",
   "upload-error-invalid-format": "檔案必須為 .zip 或技能套件（.skill 或 .md）。",
@@ -46,5 +47,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..e12103a98 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": "搜索",
@@ -39,6 +47,7 @@
   "reassigned": "重新分配",
   "ongoing": "進行中",
   "pending": "待處理",
+  "preparing-to-execute-tasks": "正在準備執行任務",
   "failed": "失敗",
   "all": "全部",
   "in-progress": "進行中",
@@ -53,19 +62,34 @@
   "new-project": "新項目",
   "no-reply-received-task-continue": "沒有收到回复，任務繼續",
   "splitting-tasks": "拆分任務",
+  "working-on-tasks-for": "正在處理任務 · <elapsed>{{time}}</elapsed>",
+  "worked-for": "已工作 <elapsed>{{time}}</elapsed>",
   "start-task": "開始任務",
   "message-cannot-be-empty": "訊息不能為空",
   "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..304795485 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,10 +47,42 @@
   "browser": "瀏覽器",
   "settings": "設定",
   "general": "一般",
-  "workers": "工作器",
+  "aiWorkforce": "AI 團隊",
+  "expand-workforce": "展開工作區",
+  "minimize-workforce": "收起工作區",
+  "show-workforce-panel": "顯示工作區面板",
+  "hide-workforce-panel": "隱藏工作區面板",
+  "show-side-panel": "顯示側邊面板",
+  "hide-side-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": "下載記錄檔",
+  "notifications": "通知",
+  "notifications-empty": "尚無通知。",
+  "support": "支援",
+  "log-file-empty": "記錄檔是空的",
   "new-project": "新專案",
   "welcome": "歡迎",
+  "greeting-morning": "早",
+  "greeting-afternoon": "下午好",
+  "greeting-evening": "晚",
   "delete-task": "刪除任務",
   "delete-task-confirmation": "您確定要刪除此任務嗎？此操作無法撤銷。",
   "delete": "刪除",
@@ -61,6 +92,10 @@
   "save": "儲存",
   "not-found": "未找到",
   "tasks": "任務",
+  "chat-history-title": "聊天紀錄",
+  "chat-history-tooltip": "聊天紀錄",
+  "back-to-workspace-tooltip": "返回工作區",
+  "task-list-add-hint": "開啟工作區並聚焦聊天輸入框",
   "ongoing": "進行中",
   "token": "# 令牌",
   "configuring": "設定中...",
@@ -93,6 +128,7 @@
   "task-running": "任務執行",
   "task-completed": "任務完成",
   "add-new-task": "新增任務",
+  "achieve-project": "達成專案",
   "end-project": "結束專案",
   "ending-this-project-will-stop": "結束此專案將停止任何正在執行的任務，從歷史記錄中刪除它，並建立一個新的空專案。您確定要繼續嗎？",
   "yes-end-project": "是的，結束專案",
@@ -103,7 +139,9 @@
   "are-you-sure-you-want-to-delete": "您確定要刪除此任務嗎？此操作無法撤銷。",
   "share": "分享",
   "home": "首頁",
+  "dashboard": "控制台",
   "back": "返回",
+  "forward": "前進",
   "developer-agent": "開發者智能體",
   "browser-agent": "瀏覽器智能體",
   "document-agent": "文件智能體",
@@ -119,6 +157,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": "未收到回覆，任務繼續",
@@ -177,6 +216,26 @@
   "delete-project": "刪除專案",
   "delete-project-confirmation": "您確定要刪除此專案及其所有任務嗎？此操作無法撤銷。",
   "please-select-model": "請在智能體 > 模型中選擇一個模型以繼續。",
+  "select-model-cta": "選擇模型",
+  "sessions-section-caption": "工作階段",
+  "projects-heading": "專案",
+  "sessions-heading": "工作階段",
+  "tasks-heading": "任務",
+  "sessions-show-all": "顯示全部",
+  "sessions-delete-session": "刪除工作階段",
+  "sessions-expand-list": "展開工作階段清單",
+  "sessions-collapse-list": "收合工作階段清單",
+  "sessions-session-menu": "工作階段選項",
+  "sessions-untitled": "未命名工作階段",
+  "workspace-lets-do-this": "開始吧",
+  "workspace-work-in-project": "在專案中工作",
+  "workspace-select-folder": "選擇資料夾",
+  "workspace-history-projects": "歷史專案",
+  "workspace-no-history-projects": "尚無歷史專案",
+  "workspace-session-single-agent": "單一智能體",
+  "workspace-session-workforce": "工作群",
+  "workspace-get-things-done-with-eigent": "用 Eigent 把事情做好",
+  "project-task-placeholder": "描述你想完成的目標...",
   "cdp-browser-connection": "CDP 瀏覽器連接",
   "cdp-browser-connection-description": "連接到啟用了遠端偵錯的 Chrome 瀏覽器",
   "current-port": "目前連接埠：",
@@ -245,5 +304,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..537fdb686 100644
--- a/src/i18n/locales/zh-Hant/setting.json
+++ b/src/i18n/locales/zh-Hant/setting.json
@@ -4,6 +4,19 @@
   "privacy": "隱私",
   "models": "模型",
   "mcp": "MCP & 工具",
+  "mcps-and-tools": "MCP 與工具",
+  "mcp-sidebar-web": "網頁",
+  "mcp-sidebar-not-connected": "未連線",
+  "mcp-configuration": "MCP 設定",
+  "connectors": "連接器",
+  "disconnect": "中斷連線",
+  "mcp-select-connection": "選擇連線以檢視詳細資料",
+  "mcp-custom-server-tools": "伺服器指令",
+  "mcp-add": "新增",
+  "disable": "停用",
+  "eigent-cloud": "Eigent Cloud",
+  "default": "預設",
+  "profile": "個人檔案",
 
   "account": "帳戶",
   "you-are-currently-signed-in-with": "您目前使用的是 {{email}} 帳戶",
@@ -17,6 +30,22 @@
   "light": "淺色",
   "transparent": "透明",
 
+  "workspace-main-background": "工作區背景",
+  "workspace-main-background-description": "僅套用於 Workforce 與 Session 主內容區。",
+  "workspace-main-background-empty": "無圖案",
+  "workspace-main-background-dots": "點狀圖案",
+  "workspace-main-background-blocks": "網格圖案",
+  "workspace-main-background-ruled": "橫格線",
+  "workspace-main-background-dotted": "虛線格",
+  "workspace-main-background-dashed": "長虛線",
+
+  "appearance-tab": "外觀",
+  "color-mode": "顏色模式",
+  "accent-palette": "強調色主題",
+  "accent-palette-description": "介面的預設配色方案，淺色與深色模式分別儲存。",
+  "accent-for-light": "淺色模式",
+  "accent-for-dark": "深色模式",
+
   "data-privacy": "數據隱私",
   "data-privacy-description": "Eigent 以本地優先原則確保您的隱私。您的數據預設儲存在您的設備上。雲端功能是可選的，僅使用最少量的數據來實現功能。詳細資訊請參閱我們的",
   "privacy-policy": "隱私政策",
@@ -147,6 +176,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 +240,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/i18n/locales/zh-Hant/workforce.json b/src/i18n/locales/zh-Hant/workforce.json
index fcb7faeaa..bb236568a 100644
--- a/src/i18n/locales/zh-Hant/workforce.json
+++ b/src/i18n/locales/zh-Hant/workforce.json
@@ -8,6 +8,7 @@
   "save-changes": "儲存變更",
   "description-optional": "描述（可選）",
   "agent-tool": "代理工具",
+  "agent-tool-tooltip": "為您的智能體選擇工具和整合",
   "share": "分享",
   "advanced-model-config": "進階模型設定",
   "use-custom-model": "使用自訂模型設定",
@@ -16,5 +17,8 @@
   "model-type": "模型類型",
   "model-type-placeholder": "例如：gpt-4o-mini",
   "worker-name-cannot-be-empty": "Worker 名稱不能為空",
-  "worker-name-already-exists": "Worker 名稱已存在"
+  "worker-name-already-exists": "Worker 名稱已存在",
+  "detail": "詳情",
+  "duplicate": "複製",
+  "delete": "刪除"
 }
diff --git a/src/lib/applyDefaultModelSelection.ts b/src/lib/applyDefaultModelSelection.ts
new file mode 100644
index 000000000..ee02b69fd
--- /dev/null
+++ b/src/lib/applyDefaultModelSelection.ts
@@ -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. =========
+
+/**
+ * Shared default-model selection logic (mirrors Agents → Models) for in-app
+ * switching e.g. chat input without navigating to settings when already configured.
+ */
+
+import { proxyFetchGet, proxyFetchPost } from '@/api/http';
+import type { Provider } from '@/types';
+import type { TFunction } from 'i18next';
+import type { Dispatch, SetStateAction } from 'react';
+import { toast } from 'sonner';
+
+export type DefaultModelCategory = 'cloud' | 'custom' | 'local';
+
+export type DefaultModelFormRow = {
+  provider_id?: number;
+  prefer?: boolean;
+};
+
+export function isDefaultModelConfigured(
+  category: DefaultModelCategory,
+  modelId: string,
+  opts: {
+    items: Pick<Provider, 'id'>[];
+    form: DefaultModelFormRow[];
+    localProviderIds: Record<string, number | undefined>;
+  }
+): boolean {
+  if (category === 'cloud') {
+    return import.meta.env.VITE_USE_LOCAL_PROXY !== 'true';
+  }
+  if (category === 'custom') {
+    const idx = opts.items.findIndex((item) => item.id === modelId);
+    return idx !== -1 && !!opts.form[idx]?.provider_id;
+  }
+  if (category === 'local') {
+    return !!opts.localProviderIds[modelId];
+  }
+  return false;
+}
+
+async function checkHasSearchKey(): Promise<boolean> {
+  const configsRes = await proxyFetchGet('/api/v1/configs');
+  const configs = Array.isArray(configsRes) ? configsRes : [];
+  const hasApiKey = configs.find(
+    (item: { config_name: string }) => item.config_name === 'GOOGLE_API_KEY'
+  );
+  const hasApiId = configs.find(
+    (item: { config_name: string }) => item.config_name === 'SEARCH_ENGINE_ID'
+  );
+  return Boolean(hasApiKey && hasApiId);
+}
+
+export interface ApplyDefaultModelSelectionParams {
+  category: DefaultModelCategory;
+  modelId: string;
+  items: Provider[];
+  form: DefaultModelFormRow[];
+  /** Full provider form state from UIs (BYOK + chat); we only read/update `prefer`. */
+  setForm: Dispatch<SetStateAction<unknown[]>>;
+  setCloudPrefer: (v: boolean) => void;
+  setLocalPrefer: (v: boolean) => void;
+  setLocalPlatform: (p: string) => void;
+  localProviderIds: Record<string, number | undefined>;
+  localPlatform: string;
+  setModelType: (t: 'cloud' | 'local' | 'custom') => void;
+  setCloudModelType: (id: string) => void;
+  t: TFunction;
+}
+
+/**
+ * Applies default model for an already-configured option. Call only when
+ * {@link isDefaultModelConfigured} is true.
+ */
+export async function applyDefaultModelSelection(
+  params: ApplyDefaultModelSelectionParams
+): Promise<boolean> {
+  const {
+    category,
+    modelId,
+    items,
+    form,
+    setForm,
+    setCloudPrefer,
+    setLocalPrefer,
+    setLocalPlatform,
+    localProviderIds,
+    localPlatform,
+    setModelType,
+    setCloudModelType,
+    t,
+  } = params;
+
+  try {
+    if (category === 'cloud') {
+      setForm((f) => (f as object[]).map((fi) => ({ ...fi, prefer: false })));
+      setLocalPrefer(false);
+      setCloudPrefer(true);
+      setModelType('cloud');
+      if (modelId !== 'cloud') {
+        setCloudModelType(modelId);
+      }
+      return true;
+    }
+
+    if (category === 'custom') {
+      const idx = items.findIndex((item) => item.id === modelId);
+      if (idx === -1) return false;
+      const providerId = form[idx]?.provider_id;
+      if (providerId === undefined) return false;
+
+      const hasSearchKey = await checkHasSearchKey();
+      if (!hasSearchKey) {
+        toast(t('setting.warning-google-search-not-configured'), {
+          description: t(
+            'setting.search-functionality-may-be-limited-without-google-api'
+          ),
+          closeButton: true,
+        });
+      }
+      await proxyFetchPost('/api/v1/provider/prefer', {
+        provider_id: providerId,
+      });
+      setModelType('custom');
+      setCloudPrefer(false);
+      setLocalPrefer(false);
+      setForm((f) =>
+        (f as object[]).map((fi, i) => ({ ...fi, prefer: i === idx }))
+      );
+      return true;
+    }
+
+    if (category === 'local') {
+      if (localPlatform !== modelId) {
+        setLocalPlatform(modelId);
+      }
+      const targetProviderId = localProviderIds[modelId];
+      if (targetProviderId === undefined) return false;
+
+      const hasSearchKey = await checkHasSearchKey();
+      if (!hasSearchKey) {
+        toast(t('setting.warning-google-search-not-configured'), {
+          description: t(
+            'setting.search-functionality-may-be-limited-without-google-api'
+          ),
+          closeButton: true,
+        });
+      }
+      await proxyFetchPost('/api/v1/provider/prefer', {
+        provider_id: targetProviderId,
+      });
+      setModelType('local');
+      setForm((f) => (f as object[]).map((fi) => ({ ...fi, prefer: false })));
+      setLocalPrefer(true);
+      setCloudPrefer(false);
+      return true;
+    }
+  } catch (e) {
+    console.error('applyDefaultModelSelection failed:', e);
+    toast.error(t('setting.validate-failed'));
+    return false;
+  }
+
+  return false;
+}
+
+/** Settings route when the user must finish configuring a provider first. */
+export const DEFAULT_MODEL_CONFIGURE_PATH =
+  '/history?tab=agents&section=models';
diff --git a/src/lib/chatTaskIdTime.ts b/src/lib/chatTaskIdTime.ts
new file mode 100644
index 000000000..b79066b81
--- /dev/null
+++ b/src/lib/chatTaskIdTime.ts
@@ -0,0 +1,19 @@
+// ========= 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. =========
+
+/** Id prefix encodes task creation time; used to sort recency without extra fields. */
+export function taskIdToCreatedMs(id: string): number {
+  const n = parseInt(id.split('-')[0] ?? '', 10);
+  return Number.isFinite(n) ? n : 0;
+}
diff --git a/src/lib/richText.ts b/src/lib/richText.ts
new file mode 100644
index 000000000..68b82ffce
--- /dev/null
+++ b/src/lib/richText.ts
@@ -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. =========
+
+/** Shared by `RichChatInput` and `UserMessageRichContent` (URLs, #skills). */
+export type RichSegment = { type: 'text' | 'url' | 'skill'; text: string };
+
+/** Hash-stable palette: semantic “other” tones (not default body text). Shared by input + message body. */
+export const RICH_SKILL_STYLE_CLASSES = [
+  'text-ds-text-success-default-default bg-ds-bg-neutral-subtle-disabled',
+  'text-ds-text-warning-default-default bg-ds-bg-neutral-subtle-disabled',
+  'text-ds-text-terminal-default-default bg-ds-bg-neutral-subtle-disabled',
+  'text-ds-text-document-default-default bg-ds-bg-neutral-subtle-disabled',
+] as const;
+
+export 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. */
+export 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;
+}
+
+export function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+export 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;
+  }
+}
+
+export 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-ds-text-information-default-default underline underline-offset-2 decoration-ds-border-information-default-default">${safe}</a>`
+        );
+      } else {
+        parts.push(safe);
+      }
+    } else {
+      const idx = hashSkillLabel(seg.text) % RICH_SKILL_STYLE_CLASSES.length;
+      const cls = RICH_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('');
+}
+
+/** Skill name from `{{...}}` tags — safe for IPC when it matches this pattern. */
+export const SAFE_SKILL_NAME_PATTERN = /^[a-zA-Z0-9_-]+$/;
+
+export function isSafeSkillFolderName(name: string): boolean {
+  return SAFE_SKILL_NAME_PATTERN.test(name);
+}
diff --git a/src/lib/sessionNavLead.ts b/src/lib/sessionNavLead.ts
new file mode 100644
index 000000000..4fac196a3
--- /dev/null
+++ b/src/lib/sessionNavLead.ts
@@ -0,0 +1,173 @@
+// ========= 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. =========
+
+/**
+ * Session list leading icon: resolves one visual state from the chat `Task`.
+ *
+ * Layers involved (do not conflate):
+ * - **ChatTaskStatus** — `Task.status` (session-level: running / pause / pending / finished).
+ * - **TaskStatus** — workforce rows in `taskInfo` / `taskRunning` (subtask-level).
+ * - **Derived UI** — `getBottomBoxStateForTask` / `getTaskListShelfTone` in `taskLifecycleUi.ts`
+ *   (e.g. splitting is a decomposition phase, not a raw `ChatTaskStatus` value).
+ */
+
+import {
+  getBottomBoxStateForTask,
+  getTaskListShelfTone,
+  isTaskListRowHardFailure,
+} from '@/lib/taskLifecycleUi';
+import type { ChatStore } from '@/store/chatStore';
+import {
+  ChatTaskStatus,
+  TaskStatus,
+  type TaskStatusType,
+} from '@/types/constants';
+import type { LucideIcon } from 'lucide-react';
+import {
+  AlertTriangle,
+  CircleCheckBig,
+  CircleSlash,
+  ClipboardList,
+  Hand,
+  LoaderCircle,
+  MessageCircle,
+  TriangleAlert,
+} from 'lucide-react';
+
+export type SessionNavLeadKind =
+  | 'error'
+  | 'warning'
+  | 'hitl'
+  | 'blocked'
+  | 'splitting'
+  | 'running'
+  | 'finished'
+  | 'idle';
+
+export type SessionNavLeadPresentation = {
+  kind: SessionNavLeadKind;
+  Icon: LucideIcon;
+  iconClassName: string;
+  spin?: boolean;
+};
+
+type TaskRow = ChatStore['tasks'][string];
+
+function workforceStatuses(task: TaskRow): TaskStatusType[] {
+  const { taskRunning = [], taskInfo = [] } = task;
+  const out: TaskStatusType[] = [];
+  for (const row of [...taskRunning, ...taskInfo]) {
+    const s = row.status;
+    if (s !== undefined && s !== TaskStatus.EMPTY) {
+      out.push(s);
+    }
+  }
+  return out;
+}
+
+/**
+ * `!` required: `@layer base` uses `button .lucide { color: ... }` (higher specificity
+ * than a lone `text-ds-icon-*` utility), which otherwise overrides these tokens.
+ */
+const SESSION_NAV_LEAD_BY_KIND: Record<
+  SessionNavLeadKind,
+  { Icon: LucideIcon; iconClassName: string; spin?: boolean }
+> = {
+  error: {
+    Icon: CircleSlash,
+    iconClassName: '!text-ds-icon-caution-default-default',
+  },
+  warning: {
+    Icon: AlertTriangle,
+    iconClassName: '!text-ds-icon-warning-default-default',
+  },
+  hitl: {
+    Icon: Hand,
+    iconClassName: '!text-ds-icon-status-splitting-default-default',
+  },
+  blocked: {
+    Icon: TriangleAlert,
+    iconClassName: '!text-ds-icon-warning-default-default',
+  },
+  splitting: {
+    Icon: ClipboardList,
+    iconClassName: '!text-ds-icon-status-splitting-default-default',
+  },
+  running: {
+    Icon: LoaderCircle,
+    iconClassName: '!text-ds-icon-information-default-default',
+    spin: true,
+  },
+  finished: {
+    Icon: CircleCheckBig,
+    iconClassName: '!text-ds-icon-status-completed-default-default',
+  },
+  idle: {
+    Icon: MessageCircle,
+    iconClassName: '!text-ds-icon-neutral-default-default',
+  },
+};
+
+/**
+ * Priority: error → warning → hitl → blocked → splitting → running → finished → idle.
+ */
+export function getSessionNavLeadPresentation(
+  task: TaskRow
+): SessionNavLeadPresentation {
+  const wf = workforceStatuses(task);
+  const errorSignal =
+    isTaskListRowHardFailure(task) || wf.some((s) => s === TaskStatus.FAILED);
+  const warningSignal = Boolean(task.isContextExceeded) && !errorSignal;
+  const bottom = getBottomBoxStateForTask(task);
+  const hitlSignal =
+    bottom === 'confirm' ||
+    task.hasWaitComfirm ||
+    wf.some((s) => s === TaskStatus.WAITING);
+  const blockedSignal = wf.some((s) => s === TaskStatus.BLOCKED);
+  const shelf = getTaskListShelfTone(task);
+
+  let kind: SessionNavLeadKind;
+
+  if (errorSignal) {
+    kind = 'error';
+  } else if (warningSignal) {
+    kind = 'warning';
+  } else if (hitlSignal) {
+    kind = 'hitl';
+  } else if (blockedSignal) {
+    kind = 'blocked';
+  } else if (shelf === 'splitting') {
+    kind = 'splitting';
+  } else if (
+    shelf === 'running' ||
+    task.status === ChatTaskStatus.RUNNING ||
+    task.status === ChatTaskStatus.PAUSE
+  ) {
+    kind = 'running';
+  } else if (task.status === ChatTaskStatus.FINISHED && task.type !== '') {
+    kind = 'finished';
+  } else {
+    kind = 'idle';
+  }
+
+  const spec = SESSION_NAV_LEAD_BY_KIND[kind];
+  return {
+    kind,
+    Icon: spec.Icon,
+    iconClassName: spec.iconClassName,
+    spin: Boolean(
+      spec.spin && task.status === ChatTaskStatus.RUNNING && kind === 'running'
+    ),
+  };
+}
diff --git a/src/lib/taskLifecycleUi.ts b/src/lib/taskLifecycleUi.ts
new file mode 100644
index 000000000..73ef7f3d0
--- /dev/null
+++ b/src/lib/taskLifecycleUi.ts
@@ -0,0 +1,130 @@
+// ========= 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;
+}
+
+function getTaskMessages(task: TaskLifecycleFields): Message[] {
+  return Array.isArray(task.messages) ? task.messages : [];
+}
+
+function getTaskInfoRows(
+  task: TaskLifecycleFields
+): { id: string; content: string }[] {
+  return Array.isArray(task.taskInfo) ? task.taskInfo : [];
+}
+
+export function getBottomBoxStateForTask(
+  task: TaskLifecycleFields
+): BottomBoxState {
+  const messages = getTaskMessages(task);
+  const status = task.status ?? ChatTaskStatus.PENDING;
+  const type = task.type ?? '';
+  const hasWaitComfirm = Boolean(task.hasWaitComfirm);
+  const isTakeControl = Boolean(task.isTakeControl);
+
+  const anyToSubTasksMessage = messages.find((m) => m.step === 'to_sub_tasks');
+  const toSubTasksMessage = messages.find(
+    (m) => m.step === 'to_sub_tasks' && !m.isConfirm
+  );
+
+  const isSkeletonPhase =
+    (status !== 'finished' &&
+      !anyToSubTasksMessage &&
+      !hasWaitComfirm &&
+      messages.length > 0) ||
+    (isTakeControl && !anyToSubTasksMessage);
+  if (isSkeletonPhase) {
+    return 'splitting';
+  }
+
+  if (
+    toSubTasksMessage &&
+    !toSubTasksMessage.isConfirm &&
+    status === 'pending'
+  ) {
+    return 'confirm';
+  }
+
+  if (toSubTasksMessage && !toSubTasksMessage.isConfirm) {
+    return 'splitting';
+  }
+
+  if (status === ChatTaskStatus.RUNNING || status === ChatTaskStatus.PAUSE) {
+    return 'running';
+  }
+
+  if (status === 'finished' && 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';
+}
+
+/**
+ * Agent-reported failures and error-shaped content — excludes `isContextExceeded`
+ * (use for splitting **error** vs **warning** in session chrome).
+ */
+export function isTaskListRowHardFailure(task: TaskLifecycleFields): boolean {
+  return getTaskMessages(task).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;
+  });
+}
+
+/** Sidebar row: failures (model error, subtask failed, context limit, etc.). */
+export function isTaskListRowFailureState(task: TaskLifecycleFields): boolean {
+  if (task.isContextExceeded) return true;
+  return isTaskListRowHardFailure(task);
+}
+
+export function isWorkforceTask(task: TaskLifecycleFields): boolean {
+  const messages = getTaskMessages(task);
+  const taskInfo = getTaskInfoRows(task);
+  const toSubTasks = messages.filter((m) => m.step === 'to_sub_tasks');
+  const latest = toSubTasks[toSubTasks.length - 1];
+  if (latest?.taskType === 2) return true;
+  if (taskInfo.length > 1) return true;
+  return false;
+}
diff --git a/src/lib/themeTokens/README.md b/src/lib/themeTokens/README.md
new file mode 100644
index 000000000..c5154eec5
--- /dev/null
+++ b/src/lib/themeTokens/README.md
@@ -0,0 +1,68 @@
+# Theme Tokens V2
+
+Theme Tokens V2 is a full cutover to a DTCG-driven, OKLCH-based token engine.
+
+## Architecture
+
+1. **Canonical token sources** in `/tokens`:
+   - `base.color.json` (theme seeds + fixed role anchors)
+   - `semantic.color.json` (axes + transforms + contrast policy)
+   - `component.color.json` (component/global alias vars)
+   - `contracts/*.json` (contract presets with `$extends`)
+2. **Compiler pipeline** in `engine.ts`:
+   - DTCG parse
+   - `$extends` resolution
+   - Semantic generation (`tone × emphasis × state × element`)
+   - WCAG contrast enforcement
+   - APCA diagnostics emission
+   - CSS variable emission (`--ds-*` + component aliases)
+3. **Runtime application** in `ThemeProvider` via `applyThemeContractV2`.
+
+## Contract
+
+```ts
+type Adjustment = { dL?: number; dC?: number; dH?: number; alpha?: number };
+type ThemeContractV2 = {
+  version: 2;
+  mode: "light" | "dark";
+  themeId: string;
+  contrast: number; // 0..100
+  overrides?: {
+    tone?: Record<Tone, Adjustment>;
+    emphasis?: Record<Emphasis, Adjustment>;
+    state?: Record<State, Adjustment>;
+    cell?: Record<`${Tone}.${Emphasis}.${State}`, Adjustment>;
+  };
+};
+```
+
+Override precedence is deterministic:
+
+1. tone defaults
+2. emphasis transform
+3. state transform
+4. axis overrides (`tone`, `emphasis`, `state`)
+5. cell override (`tone.emphasis.state`)
+
+## Developer API
+
+In development, `ThemeProvider` exposes:
+
+```js
+window.__eigentThemeV2.listThemes(); // { light: [...], dark: [...] }
+window.__eigentThemeV2.setTheme("light", "starfish");
+window.__eigentThemeV2.setContrast(65);
+window.__eigentThemeV2.getState();
+```
+
+## Validation
+
+- WCAG AA is enforced by default on required semantic pairs.
+- APCA scores are emitted as diagnostics (non-blocking).
+- Engine tests live in `engine.v2.test.ts` and cover:
+  - determinism
+  - override precedence
+  - gamut-safe outputs
+  - contrast enforcement
+  - randomized seed stability
+  - runtime reapplication behavior
diff --git a/src/lib/themeTokens/catalog.ts b/src/lib/themeTokens/catalog.ts
new file mode 100644
index 000000000..f3bf4a395
--- /dev/null
+++ b/src/lib/themeTokens/catalog.ts
@@ -0,0 +1,158 @@
+// ========= 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 baseColorTokens from '../../style/tokens/base.color.json';
+import contractBase from '../../style/tokens/contracts/default.base.json';
+import darkContractRaw from '../../style/tokens/contracts/default.dark.json';
+import lightContractRaw from '../../style/tokens/contracts/default.light.json';
+import { clamp } from './colorMath';
+import { resolveExtends } from './dtcg';
+import {
+  THEME_CONTRACT_VERSION,
+  type ColorThemeDefinitionV2,
+  type Mode,
+  type ThemeCatalogV2,
+  type ThemeContractV2,
+  type ThemeSeedV2,
+} from './types';
+
+export const DEFAULT_CONTRAST = 43;
+export const DEFAULT_THEME_ID = 'eigent';
+export const DEFAULT_COLOR_THEME_ID = DEFAULT_THEME_ID;
+
+type BaseColorTokenShape = {
+  themes: Record<Mode, Record<string, ThemeSeedV2>>;
+};
+
+const BASE = baseColorTokens as BaseColorTokenShape;
+
+function toCatalog(themes: BaseColorTokenShape['themes']): ThemeCatalogV2 {
+  return {
+    light: Object.fromEntries(
+      Object.entries(themes.light).map(([id, seed]) => [
+        id,
+        { id, mode: 'light', seed },
+      ])
+    ),
+    dark: Object.fromEntries(
+      Object.entries(themes.dark).map(([id, seed]) => [
+        id,
+        { id, mode: 'dark', seed },
+      ])
+    ),
+  };
+}
+
+export const DEFAULT_THEME_CATALOG: ThemeCatalogV2 = toCatalog(BASE.themes);
+
+const warnedThemeFallbacks = new Set<string>();
+
+function warnThemeFallback(
+  mode: Mode,
+  requestedId: string,
+  fallbackId: string
+): void {
+  const key = `${mode}/${requestedId}->${fallbackId}`;
+  if (warnedThemeFallbacks.has(key)) return;
+  warnedThemeFallbacks.add(key);
+  // Vite replaces `import.meta.env.DEV` at build time; guard for non-vite
+  // consumers (vitest-node, electron main).
+  const isDev =
+    typeof import.meta !== 'undefined' &&
+    (import.meta as { env?: { DEV?: boolean } }).env?.DEV === true;
+  if (!isDev) return;
+
+  console.warn(
+    `[themeTokens] theme "${requestedId}" not registered for mode "${mode}"; falling back to "${fallbackId}".`
+  );
+}
+
+export function getColorThemeDefinitionV2(
+  mode: Mode,
+  themeId: string,
+  catalog: ThemeCatalogV2 = DEFAULT_THEME_CATALOG
+): ColorThemeDefinitionV2 {
+  const modeThemes = catalog[mode] ?? {};
+  const selected = modeThemes[themeId];
+  if (selected) return selected;
+
+  const fallback = modeThemes[DEFAULT_THEME_ID];
+  if (fallback) {
+    warnThemeFallback(mode, themeId, DEFAULT_THEME_ID);
+    return fallback;
+  }
+
+  const firstEntry = Object.entries(modeThemes)[0];
+  if (firstEntry) {
+    warnThemeFallback(mode, themeId, firstEntry[0]);
+    return firstEntry[1];
+  }
+
+  throw new Error(`No color themes configured for mode "${mode}"`);
+}
+
+/**
+ * Read the system's contrast preference. Returns a recommended value on the
+ * 0..100 contrast scale used by {@link ThemeContractV2}. Used as the default
+ * when no explicit contrast is provided and surfaced in settings UI so the
+ * user can jump back to the system-recommended value.
+ */
+export function getRecommendedContrast(): number {
+  if (
+    typeof window === 'undefined' ||
+    typeof window.matchMedia !== 'function'
+  ) {
+    return DEFAULT_CONTRAST;
+  }
+  try {
+    if (window.matchMedia('(prefers-contrast: more)').matches) return 80;
+    if (window.matchMedia('(prefers-contrast: less)').matches) return 20;
+  } catch {
+    // Older engines may throw on unsupported media queries; fall through.
+  }
+  return DEFAULT_CONTRAST;
+}
+
+function resolveContractPreset(raw: unknown): ThemeContractV2 {
+  const tree = resolveExtends({
+    ...(contractBase as Record<string, unknown>),
+    contract: raw as Record<string, unknown>,
+  });
+  const contract = (tree as { contract: ThemeContractV2 }).contract;
+  return {
+    ...contract,
+    version: THEME_CONTRACT_VERSION,
+    contrast: clamp(Math.round(contract.contrast), 0, 100),
+  };
+}
+
+const LIGHT_CONTRACT_PRESET = resolveContractPreset(lightContractRaw);
+const DARK_CONTRACT_PRESET = resolveContractPreset(darkContractRaw);
+
+export function createDefaultThemeContractV2(
+  mode: Mode,
+  overrides?: Partial<Omit<ThemeContractV2, 'version' | 'mode'>>
+): ThemeContractV2 {
+  const preset = mode === 'dark' ? DARK_CONTRACT_PRESET : LIGHT_CONTRACT_PRESET;
+  const resolvedContrast =
+    overrides?.contrast ?? preset.contrast ?? getRecommendedContrast();
+  return {
+    ...preset,
+    version: THEME_CONTRACT_VERSION,
+    mode,
+    themeId: overrides?.themeId ?? preset.themeId ?? DEFAULT_THEME_ID,
+    contrast: clamp(Math.round(resolvedContrast), 0, 100),
+    overrides: overrides?.overrides ?? preset.overrides,
+  };
+}
diff --git a/src/lib/themeTokens/colorMath.ts b/src/lib/themeTokens/colorMath.ts
new file mode 100644
index 000000000..20b84bdbd
--- /dev/null
+++ b/src/lib/themeTokens/colorMath.ts
@@ -0,0 +1,266 @@
+// ========= 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. =========
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function normalizeHue(degrees: number): number {
+  let h = degrees % 360;
+  if (h < 0) h += 360;
+  return h;
+}
+
+export function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  const normalized = hex.replace('#', '').trim();
+  const full =
+    normalized.length === 3
+      ? normalized
+          .split('')
+          .map((char) => `${char}${char}`)
+          .join('')
+      : normalized;
+  if (!/^[0-9a-fA-F]{6}$/.test(full)) {
+    throw new Error(`Invalid hex color: ${hex}`);
+  }
+  return {
+    r: parseInt(full.slice(0, 2), 16),
+    g: parseInt(full.slice(2, 4), 16),
+    b: parseInt(full.slice(4, 6), 16),
+  };
+}
+
+export function rgbToHex(r: number, g: number, b: number): `#${string}` {
+  const toHex = (value: number) =>
+    clamp(Math.round(value), 0, 255).toString(16).padStart(2, '0');
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+// mix(a,b,t): t=0 => a, t=1 => b
+export function mix(colorA: string, colorB: string, t: number): `#${string}` {
+  const a = hexToRgb(colorA);
+  const b = hexToRgb(colorB);
+  const weight = clamp(t, 0, 1);
+  return rgbToHex(
+    a.r + (b.r - a.r) * weight,
+    a.g + (b.g - a.g) * weight,
+    a.b + (b.b - a.b) * weight
+  );
+}
+
+export function alpha(hex: string, opacity: number): string {
+  const { r, g, b } = hexToRgb(hex);
+  return `rgba(${r}, ${g}, ${b}, ${clamp(opacity, 0, 1).toFixed(3)})`;
+}
+
+function srgbToLinear(channel: number): number {
+  const value = channel / 255;
+  return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+}
+
+function linearToSrgb(linear: number): number {
+  const clamped = clamp(linear, 0, 1);
+  return clamped <= 0.0031308
+    ? clamped * 12.92
+    : 1.055 * clamped ** (1 / 2.4) - 0.055;
+}
+
+function luminance(hex: string): number {
+  const { r, g, b } = hexToRgb(hex);
+  const [lr, lg, lb] = [srgbToLinear(r), srgbToLinear(g), srgbToLinear(b)];
+  return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
+}
+
+export function contrastRatio(colorA: string, colorB: string): number {
+  const lumA = luminance(colorA);
+  const lumB = luminance(colorB);
+  const [high, low] = lumA > lumB ? [lumA, lumB] : [lumB, lumA];
+  return (high + 0.05) / (low + 0.05);
+}
+
+export function chooseReadableText(
+  background: string,
+  preferred: string,
+  minimumContrast = 4.5
+): `#${string}` {
+  if (contrastRatio(preferred, background) >= minimumContrast) {
+    return preferred as `#${string}`;
+  }
+  const black: `#${string}` = '#111111';
+  const white: `#${string}` = '#ffffff';
+  return contrastRatio(black, background) >= contrastRatio(white, background)
+    ? black
+    : white;
+}
+
+export type Oklch = {
+  l: number; // 0..1
+  c: number; // >= 0
+  h: number; // 0..360
+};
+
+export type Oklab = {
+  l: number;
+  a: number;
+  b: number;
+};
+
+function srgbHexToLinearRgb(hex: string): { r: number; g: number; b: number } {
+  const { r, g, b } = hexToRgb(hex);
+  return {
+    r: srgbToLinear(r),
+    g: srgbToLinear(g),
+    b: srgbToLinear(b),
+  };
+}
+
+function linearRgbToHex(rgb: {
+  r: number;
+  g: number;
+  b: number;
+}): `#${string}` {
+  return rgbToHex(
+    linearToSrgb(rgb.r) * 255,
+    linearToSrgb(rgb.g) * 255,
+    linearToSrgb(rgb.b) * 255
+  );
+}
+
+function linearRgbToOklab(rgb: { r: number; g: number; b: number }): Oklab {
+  const l = 0.4122214708 * rgb.r + 0.5363325363 * rgb.g + 0.0514459929 * rgb.b;
+  const m = 0.2119034982 * rgb.r + 0.6806995451 * rgb.g + 0.1073969566 * rgb.b;
+  const s = 0.0883024619 * rgb.r + 0.2817188376 * rgb.g + 0.6299787005 * rgb.b;
+
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
+
+  return {
+    l: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
+    a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
+    b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_,
+  };
+}
+
+function oklabToLinearRgb(oklab: Oklab): { r: number; g: number; b: number } {
+  const l_ = oklab.l + 0.3963377774 * oklab.a + 0.2158037573 * oklab.b;
+  const m_ = oklab.l - 0.1055613458 * oklab.a - 0.0638541728 * oklab.b;
+  const s_ = oklab.l - 0.0894841775 * oklab.a - 1.291485548 * oklab.b;
+
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+
+  return {
+    r: 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    g: -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    b: -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
+  };
+}
+
+export function hexToOklch(hex: string): Oklch {
+  const oklab = linearRgbToOklab(srgbHexToLinearRgb(hex));
+  const c = Math.sqrt(oklab.a * oklab.a + oklab.b * oklab.b);
+  const h = normalizeHue((Math.atan2(oklab.b, oklab.a) * 180) / Math.PI);
+  return {
+    l: clamp(oklab.l, 0, 1),
+    c: Math.max(0, c),
+    h,
+  };
+}
+
+function oklchToOklab(color: Oklch): Oklab {
+  const hRad = (normalizeHue(color.h) * Math.PI) / 180;
+  return {
+    l: clamp(color.l, 0, 1),
+    a: Math.max(0, color.c) * Math.cos(hRad),
+    b: Math.max(0, color.c) * Math.sin(hRad),
+  };
+}
+
+function isLinearRgbInSrgbGamut(rgb: {
+  r: number;
+  g: number;
+  b: number;
+}): boolean {
+  return (
+    rgb.r >= 0 &&
+    rgb.r <= 1 &&
+    rgb.g >= 0 &&
+    rgb.g <= 1 &&
+    rgb.b >= 0 &&
+    rgb.b <= 1
+  );
+}
+
+export function deltaEOK(a: Oklch, b: Oklch): number {
+  const la = oklchToOklab(a);
+  const lb = oklchToOklab(b);
+  const dl = la.l - lb.l;
+  const da = la.a - lb.a;
+  const db = la.b - lb.b;
+  return Math.sqrt(dl * dl + da * da + db * db);
+}
+
+export function oklchToHex(input: Oklch): `#${string}` {
+  const normalized: Oklch = {
+    l: clamp(input.l, 0, 1),
+    c: Math.max(0, input.c),
+    h: normalizeHue(input.h),
+  };
+
+  const candidateRgb = oklabToLinearRgb(oklchToOklab(normalized));
+  if (isLinearRgbInSrgbGamut(candidateRgb)) {
+    return linearRgbToHex(candidateRgb);
+  }
+
+  // Gamut mapping by chroma reduction (binary search, local minimum deltaEOK).
+  const start = normalized;
+  let low = 0;
+  let high = normalized.c;
+  let best = { ...normalized, c: 0 };
+  for (let i = 0; i < 24; i += 1) {
+    const mid = (low + high) / 2;
+    const probe = { ...normalized, c: mid };
+    const probeRgb = oklabToLinearRgb(oklchToOklab(probe));
+    if (isLinearRgbInSrgbGamut(probeRgb)) {
+      best = probe;
+      low = mid;
+    } else {
+      high = mid;
+    }
+  }
+
+  // Keep the in-gamut candidate with smallest deltaEOK to requested color.
+  const edgeA = { ...normalized, c: low };
+  const edgeB = { ...normalized, c: Math.max(0, low - 0.0005) };
+  const bestFinal =
+    deltaEOK(start, edgeA) <= deltaEOK(start, edgeB) ? edgeA : edgeB;
+  return linearRgbToHex(oklabToLinearRgb(oklchToOklab(bestFinal)));
+}
+
+export function wcagMinimumContrast(largeText?: boolean): number {
+  return largeText ? 3 : 4.5;
+}
+
+export function apcaContrastApprox(textHex: string, bgHex: string): number {
+  const yText = luminance(textHex);
+  const yBg = luminance(bgHex);
+  const polarity = yBg >= yText ? 1 : -1;
+  // Lightweight APCA-like diagnostic curve (non-gating for this release).
+  const bgExp = yBg >= yText ? 0.56 : 0.65;
+  const textExp = yBg >= yText ? 0.57 : 0.62;
+  const lc = (yBg ** bgExp - yText ** textExp) * 1.14 * 100;
+  return polarity * lc;
+}
diff --git a/src/lib/themeTokens/dtcg.ts b/src/lib/themeTokens/dtcg.ts
new file mode 100644
index 000000000..f4d97d059
--- /dev/null
+++ b/src/lib/themeTokens/dtcg.ts
@@ -0,0 +1,150 @@
+// ========= 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. =========
+
+type JsonObject = Record<string, unknown>;
+
+export type DtcgLeafToken = {
+  path: string;
+  value: unknown;
+  type?: string;
+  extensions?: Record<string, unknown>;
+};
+
+function isObject(value: unknown): value is JsonObject {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function deepClone<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value)) as T;
+}
+
+function deepMerge(base: unknown, override: unknown): unknown {
+  if (!isObject(base) || !isObject(override)) {
+    return deepClone(override);
+  }
+  const out: JsonObject = deepClone(base);
+  for (const [key, value] of Object.entries(override)) {
+    if (key === '$extends') continue;
+    const existing = out[key];
+    out[key] =
+      isObject(existing) && isObject(value)
+        ? (deepMerge(existing, value) as JsonObject)
+        : deepClone(value);
+  }
+  return out;
+}
+
+function getByPath(root: JsonObject, path: string): unknown {
+  const parts = path.split('.').filter(Boolean);
+  let current: unknown = root;
+  for (const part of parts) {
+    if (!isObject(current) || !(part in current)) {
+      return undefined;
+    }
+    current = current[part];
+  }
+  return current;
+}
+
+function resolveExtendsRec(
+  root: JsonObject,
+  node: unknown,
+  path: string,
+  stack: Set<string>
+): unknown {
+  if (!isObject(node)) return node;
+
+  const extendsPath =
+    typeof node.$extends === 'string'
+      ? node.$extends.trim().replace(/^\{|\}$/g, '')
+      : null;
+
+  if (extendsPath) {
+    const stackKey = `${path} -> ${extendsPath}`;
+    if (stack.has(stackKey)) {
+      throw new Error(`Circular $extends detected at "${path}"`);
+    }
+    stack.add(stackKey);
+    const base = getByPath(root, extendsPath);
+    if (!isObject(base)) {
+      throw new Error(
+        `$extends target "${extendsPath}" not found for "${path}"`
+      );
+    }
+    const resolvedBase = resolveExtendsRec(root, base, extendsPath, stack);
+    const merged = deepMerge(resolvedBase, node);
+    stack.delete(stackKey);
+    return resolveExtendsRec(root, merged, path, stack);
+  }
+
+  const out: JsonObject = {};
+  for (const [key, value] of Object.entries(node)) {
+    out[key] = resolveExtendsRec(
+      root,
+      value,
+      path ? `${path}.${key}` : key,
+      stack
+    );
+  }
+  return out;
+}
+
+export function resolveExtends<T extends JsonObject>(root: T): T {
+  const cloned = deepClone(root);
+  return resolveExtendsRec(cloned, cloned, '', new Set<string>()) as T;
+}
+
+function flattenRec(
+  node: unknown,
+  path: string[],
+  output: DtcgLeafToken[]
+): void {
+  if (!isObject(node)) return;
+
+  if ('$value' in node) {
+    output.push({
+      path: path.join('.'),
+      value: node.$value,
+      type: typeof node.$type === 'string' ? node.$type : undefined,
+      extensions: isObject(node.$extensions)
+        ? (node.$extensions as Record<string, unknown>)
+        : undefined,
+    });
+    return;
+  }
+
+  for (const [key, value] of Object.entries(node)) {
+    if (key.startsWith('$')) continue;
+    flattenRec(value, [...path, key], output);
+  }
+}
+
+export function flattenDtcgTokens(tree: JsonObject): DtcgLeafToken[] {
+  const output: DtcgLeafToken[] = [];
+  flattenRec(tree, [], output);
+  return output;
+}
+
+export function resolveAliasReferences<T>(
+  value: T,
+  lookup: (path: string) => unknown
+): T {
+  if (typeof value === 'string') {
+    return value.replace(/\{([^}]+)\}/g, (_m, tokenPath: string) => {
+      const resolved = lookup(tokenPath.trim());
+      return resolved == null ? '' : String(resolved);
+    }) as T;
+  }
+  return value;
+}
diff --git a/src/lib/themeTokens/engine.ts b/src/lib/themeTokens/engine.ts
new file mode 100644
index 000000000..6f382b0cb
--- /dev/null
+++ b/src/lib/themeTokens/engine.ts
@@ -0,0 +1,1173 @@
+// ========= 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 baseColorTokens from '../../style/tokens/base.color.json';
+import componentTokens from '../../style/tokens/component.color.json';
+import semanticTokens from '../../style/tokens/semantic.color.json';
+import { DEFAULT_THEME_CATALOG, getColorThemeDefinitionV2 } from './catalog';
+import {
+  alpha,
+  apcaContrastApprox,
+  chooseReadableText,
+  clamp,
+  contrastRatio,
+  hexToOklch,
+  mix,
+  normalizeHue,
+  oklchToHex,
+  rgbToHex,
+  wcagMinimumContrast,
+  type Oklch,
+} from './colorMath';
+import {
+  flattenDtcgTokens,
+  resolveAliasReferences,
+  resolveExtends,
+} from './dtcg';
+import { tokenKeyToCssVarName } from './naming';
+import type {
+  Adjustment,
+  ContrastDiagnostic,
+  Element,
+  Emphasis,
+  Mode,
+  ResolvedThemeV2,
+  State,
+  ThemeCatalogV2,
+  ThemeContractV2,
+  ThemeTokens,
+  TokenKey,
+  Tone,
+} from './types';
+
+type SemanticShape = {
+  axes: {
+    elements: Element[];
+    tones: Tone[];
+    emphasis: Emphasis[];
+    states: State[];
+  };
+  transforms: {
+    emphasis: Record<Emphasis, Adjustment>;
+    state: Record<State, Adjustment>;
+    element: Record<Element, Adjustment>;
+  };
+  toneSource: Record<
+    Tone,
+    {
+      source: 'accent' | 'background' | 'ink' | 'fixed';
+      sourceByElement?: Partial<
+        Record<Element, 'accent' | 'background' | 'ink' | 'fixed'>
+      >;
+      dL?: number;
+      dC?: number;
+      dH?: number;
+      dLLight?: number;
+      dLDark?: number;
+    }
+  >;
+  contrastPairs: Array<{
+    fg: TokenKey;
+    bg: TokenKey;
+    minContrast: number;
+    largeText?: boolean;
+  }>;
+};
+
+type BaseShape = {
+  fixedAnchors: Record<Mode, Partial<Record<Tone, `#${string}`>>>;
+  fixedShadeScales?: Partial<
+    Record<
+      Tone,
+      Partial<
+        Record<
+          | '50'
+          | '100'
+          | '200'
+          | '300'
+          | '400'
+          | '500'
+          | '600'
+          | '700'
+          | '800'
+          | '900'
+          | '950',
+          `#${string}`
+        >
+      >
+    >
+  >;
+};
+
+const BASE = baseColorTokens as BaseShape;
+const SEMANTIC = semanticTokens as SemanticShape;
+const LEGACY_NEUTRAL_EMPHASIS = [
+  'subtle',
+  'muted',
+  'default',
+  'strong',
+  'inverse',
+] as const;
+const LEGACY_UI_STATES: State[] = [
+  'default',
+  'hover',
+  'active',
+  'selected',
+  'focus',
+  'disabled',
+];
+
+type LegacyNeutralEmphasis = (typeof LEGACY_NEUTRAL_EMPHASIS)[number];
+type NeutralStateMatrix = Record<LegacyNeutralEmphasis, Record<State, string>>;
+
+const SYSTEM_STATUS_TONES = new Set<Tone>([
+  'status-running',
+  'status-splitting',
+  'status-pending',
+  'status-error',
+  'status-reassigning',
+  'status-completed',
+  'status-blocked',
+  'status-paused',
+  'status-skipped',
+  'status-cancelled',
+  'success',
+  'error',
+  'warning',
+  'information',
+]);
+
+type FixedShade =
+  | '50'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900'
+  | '950';
+
+/** Light: pale surfaces → saturated accents (50 / 300 / 600 / 900). */
+const SYSTEM_STATUS_SHADE_BY_EMPHASIS_LIGHT: Record<
+  Extract<Emphasis, 'subtle' | 'muted' | 'default' | 'strong'>,
+  Record<State, FixedShade>
+> = {
+  subtle: {
+    default: '50',
+    hover: '100',
+    active: '200',
+    selected: '200',
+    focus: '100',
+    disabled: '50',
+  },
+  muted: {
+    default: '300',
+    hover: '400',
+    active: '500',
+    selected: '500',
+    focus: '400',
+    disabled: '300',
+  },
+  default: {
+    default: '600',
+    hover: '700',
+    active: '800',
+    selected: '800',
+    focus: '700',
+    disabled: '600',
+  },
+  strong: {
+    default: '900',
+    hover: '950',
+    active: '950',
+    selected: '950',
+    focus: '950',
+    disabled: '900',
+  },
+};
+
+/**
+ * Dark: reverse the ramp so “subtle” reads as a deep tint and “strong” as a
+ * light accent — subtle→950, muted→600, default→300, strong→50 (mirrored
+ * hover/active steps vs. light).
+ */
+const SYSTEM_STATUS_SHADE_BY_EMPHASIS_DARK: Record<
+  Extract<Emphasis, 'subtle' | 'muted' | 'default' | 'strong'>,
+  Record<State, FixedShade>
+> = {
+  subtle: {
+    default: '950',
+    hover: '900',
+    active: '800',
+    selected: '800',
+    focus: '900',
+    disabled: '950',
+  },
+  muted: {
+    default: '600',
+    hover: '500',
+    active: '400',
+    selected: '400',
+    focus: '500',
+    disabled: '600',
+  },
+  default: {
+    default: '300',
+    hover: '400',
+    active: '500',
+    selected: '500',
+    focus: '400',
+    disabled: '300',
+  },
+  strong: {
+    default: '50',
+    hover: '100',
+    active: '100',
+    selected: '100',
+    focus: '100',
+    disabled: '50',
+  },
+};
+
+type SystemStatusShadeOverrides = Partial<
+  Record<
+    Tone,
+    Partial<
+      Record<
+        Extract<Emphasis, 'subtle' | 'muted' | 'default' | 'strong'>,
+        Partial<Record<State, FixedShade>>
+      >
+    >
+  >
+>;
+
+// Keep most dark system tones on the mirrored ramp, with specific subtle/default
+// tones pinned to 900 for current UI usage.
+const SYSTEM_STATUS_SHADE_OVERRIDES_DARK: SystemStatusShadeOverrides = {
+  'status-running': {
+    subtle: {
+      default: '900',
+    },
+  },
+  'status-splitting': {
+    subtle: {
+      default: '900',
+    },
+  },
+  'status-pending': {
+    subtle: {
+      default: '900',
+    },
+  },
+  'status-error': {
+    subtle: {
+      default: '900',
+    },
+  },
+  'status-reassigning': {
+    subtle: {
+      default: '900',
+    },
+  },
+  'status-completed': {
+    subtle: {
+      default: '900',
+    },
+  },
+  'status-blocked': {
+    subtle: {
+      default: '900',
+    },
+  },
+  'status-paused': {
+    subtle: {
+      default: '900',
+    },
+  },
+  'status-skipped': {
+    subtle: {
+      default: '900',
+    },
+  },
+  'status-cancelled': {
+    subtle: {
+      default: '900',
+    },
+  },
+  success: {
+    subtle: {
+      default: '900',
+    },
+  },
+  error: {
+    subtle: {
+      default: '900',
+    },
+  },
+  warning: {
+    subtle: {
+      default: '900',
+    },
+  },
+  information: {
+    subtle: {
+      default: '900',
+    },
+  },
+};
+
+// Per-state opacity used for the `transparent` emphasis. The surface color is
+// the tone's base hue shown at these alphas so status chips read as "main
+// color, faded" rather than a washed-out rendered hue.
+const TRANSPARENT_OPACITY_BY_STATE: Record<State, number> = {
+  default: 0.1,
+  hover: 0.3,
+  active: 0.5,
+  selected: 0.7,
+  focus: 0.3,
+  disabled: 0.5,
+};
+
+const SYSTEM_STATUS_TRANSPARENT_OPACITY_BY_STATE: Record<State, number> = {
+  default: 0.3,
+  hover: 0.5,
+  active: 0.5,
+  selected: 0.7,
+  focus: 0.5,
+  disabled: 0.1,
+};
+
+function mergeAdjustment(...values: Array<Adjustment | undefined>): Adjustment {
+  const out: Adjustment = {};
+  for (const value of values) {
+    if (!value) continue;
+    if (typeof value.dL === 'number') out.dL = (out.dL ?? 0) + value.dL;
+    if (typeof value.dC === 'number') out.dC = (out.dC ?? 0) + value.dC;
+    if (typeof value.dH === 'number') out.dH = (out.dH ?? 0) + value.dH;
+    if (typeof value.alpha === 'number') out.alpha = value.alpha;
+  }
+  return out;
+}
+
+function applyAdjustment(base: Oklch, adjustment: Adjustment): Oklch {
+  return {
+    l: clamp(base.l + (adjustment.dL ?? 0), 0, 1),
+    c: Math.max(0, base.c + (adjustment.dC ?? 0)),
+    h: normalizeHue(base.h + (adjustment.dH ?? 0)),
+  };
+}
+
+function setTokenIfMissing(
+  tokens: ThemeTokens,
+  tokenKey: TokenKey,
+  value: string
+): void {
+  if (!(tokenKey in tokens)) {
+    tokens[tokenKey] = value;
+  }
+}
+
+function getFixedShade(tone: Tone, shade: FixedShade): `#${string}` | null {
+  return BASE.fixedShadeScales?.[tone]?.[shade] ?? null;
+}
+
+function getSystemStatusShade(
+  tone: Tone,
+  emphasis: Extract<Emphasis, 'subtle' | 'muted' | 'default' | 'strong'>,
+  state: State,
+  mode: Mode
+): `#${string}` | null {
+  const modeOverrides =
+    mode === 'dark' ? SYSTEM_STATUS_SHADE_OVERRIDES_DARK : undefined;
+  const overriddenShade = modeOverrides?.[tone]?.[emphasis]?.[state];
+  if (overriddenShade) {
+    return getFixedShade(tone, overriddenShade);
+  }
+
+  const table =
+    mode === 'dark'
+      ? SYSTEM_STATUS_SHADE_BY_EMPHASIS_DARK
+      : SYSTEM_STATUS_SHADE_BY_EMPHASIS_LIGHT;
+  const shade = table[emphasis][state];
+  return getFixedShade(tone, shade);
+}
+
+function ensureNeutralMatrix(
+  tokens: ThemeTokens,
+  element: Element,
+  matrix: NeutralStateMatrix
+): void {
+  for (const emphasis of LEGACY_NEUTRAL_EMPHASIS) {
+    for (const state of LEGACY_UI_STATES) {
+      setTokenIfMissing(
+        tokens,
+        `${element}.neutral.${emphasis}.${state}` as TokenKey,
+        matrix[emphasis][state]
+      );
+    }
+  }
+}
+
+function buildLegacyNeutralContrastTokens(
+  seed: { accent: `#${string}`; background: `#${string}`; ink: `#${string}` },
+  contrast: number
+): ThemeTokens {
+  const tokens: ThemeTokens = {};
+  const contrastT = clamp(contrast, 0, 100) / 100;
+  const { background, ink } = seed;
+
+  const panel = mix(background, ink, 0.02 + contrastT * 0.06);
+  const border = alpha(ink, 0.08 + contrastT * 0.16);
+  const textSecondary = mix(ink, background, 0.28 - contrastT * 0.08);
+  const hover = mix(background, ink, 0.03 + contrastT * 0.05);
+  const active = mix(background, ink, 0.05 + contrastT * 0.08);
+  const panelStrong = mix(background, ink, 0.04 + contrastT * 0.08);
+  const panelSelected = mix(background, ink, 0.1 + contrastT * 0.1);
+  const panelSelectedStrong = mix(background, ink, 0.16 + contrastT * 0.12);
+  const mutedDefault = mix(background, ink, 0.06 + contrastT * 0.06);
+  const mutedHover = mix(background, ink, 0.08 + contrastT * 0.07);
+  const mutedActive = mix(background, ink, 0.1 + contrastT * 0.08);
+  const mutedSelected = mix(background, ink, 0.12 + contrastT * 0.09);
+  const mutedDisabled = mix(background, ink, 0.08 + contrastT * 0.07);
+  const subtleHover = mix(background, ink, 0.04 + contrastT * 0.065);
+  const subtleActive = mix(background, ink, 0.05 + contrastT * 0.08);
+  const subtleSelected = mix(background, ink, 0.06 + contrastT * 0.08);
+  const inverseBgDefault = mix(ink, background, 0.88);
+  const inverseBgHover = mix(ink, background, 0.82);
+  const inverseBgActive = mix(ink, background, 0.76);
+  const inverseBgSelected = mix(ink, background, 0.7);
+  const inverseBgDisabled = mix(ink, background, 0.5);
+  const textMuted = mix(ink, background, 0.45 - contrastT * 0.12);
+  const textDisabled = alpha(ink, 0.38);
+  const textDefaultHover = mix(ink, background, 0.9);
+  const textDefaultActive = mix(ink, background, 0.82);
+  const textDefaultSelected = mix(ink, background, 0.86);
+  const textMutedHover = mix(textSecondary, ink, 0.16);
+  const textMutedActive = mix(textSecondary, ink, 0.26);
+  const textMutedSelected = mix(textSecondary, ink, 0.22);
+  const textSubtleHover = mix(textMuted, ink, 0.2);
+  const textSubtleActive = mix(textMuted, ink, 0.3);
+  const textSubtleSelected = mix(textMuted, ink, 0.26);
+  const textStrong = mix(ink, background, 0.95);
+  const textInverse = chooseReadableText(inverseBgDefault, ink);
+
+  tokens['bg.neutral.subtle.default'] = background;
+  tokens['bg.neutral.subtle.hover'] = subtleHover;
+  tokens['bg.neutral.subtle.selected'] = subtleSelected;
+  tokens['bg.neutral.default.default'] = panel;
+  tokens['bg.neutral.default.hover'] = hover;
+  tokens['bg.neutral.default.active'] = active;
+  tokens['bg.neutral.default.selected'] = panelSelected;
+  tokens['bg.neutral.strong.default'] = panelStrong;
+  tokens['bg.neutral.strong.selected'] = panelSelectedStrong;
+  tokens['bg.neutral.muted.default'] = mutedDefault;
+  tokens['bg.neutral.muted.hover'] = mutedHover;
+  tokens['bg.neutral.muted.active'] = mutedActive;
+  tokens['bg.neutral.muted.selected'] = mutedSelected;
+  tokens['bg.neutral.muted.disabled'] = mutedDisabled;
+
+  tokens['text.neutral.default.default'] = ink;
+  tokens['text.neutral.muted.default'] = textSecondary;
+  tokens['text.neutral.subtle.default'] = textMuted;
+  tokens['text.neutral.muted.disabled'] = textDisabled;
+
+  tokens['border.neutral.subtle.default'] = alpha(ink, 0.05 + contrastT * 0.1);
+  tokens['border.neutral.muted.default'] = alpha(ink, 0.07 + contrastT * 0.12);
+  tokens['border.neutral.muted.hover'] = alpha(ink, 0.1 + contrastT * 0.14);
+  tokens['border.neutral.muted.disabled'] = alpha(ink, 0.05 + contrastT * 0.08);
+  tokens['border.neutral.default.default'] = border;
+  tokens['border.neutral.strong.default'] = alpha(ink, 0.14 + contrastT * 0.2);
+  tokens['ring.neutral.subtle.focus'] = alpha(ink, 0.2 + contrastT * 0.2);
+  tokens['icon.neutral.default.default'] = textSecondary;
+  tokens['icon.neutral.muted.default'] = textMuted;
+
+  ensureNeutralMatrix(tokens, 'bg', {
+    subtle: {
+      default: background,
+      hover: subtleHover,
+      active: subtleActive,
+      selected: subtleSelected,
+      focus: subtleSelected,
+      disabled: mutedDisabled,
+    },
+    muted: {
+      default: mutedDefault,
+      hover: mutedHover,
+      active: mutedActive,
+      selected: mutedSelected,
+      focus: mutedHover,
+      disabled: mutedDisabled,
+    },
+    default: {
+      default: panel,
+      hover,
+      active,
+      selected: panelSelected,
+      focus: active,
+      disabled: mutedDisabled,
+    },
+    strong: {
+      default: panelStrong,
+      hover: panelSelected,
+      active: panelSelectedStrong,
+      selected: panelSelectedStrong,
+      focus: panelSelected,
+      disabled: mutedDisabled,
+    },
+    inverse: {
+      default: inverseBgDefault,
+      hover: inverseBgHover,
+      active: inverseBgActive,
+      selected: inverseBgSelected,
+      focus: inverseBgHover,
+      disabled: inverseBgDisabled,
+    },
+  });
+
+  ensureNeutralMatrix(tokens, 'text', {
+    subtle: {
+      default: textMuted,
+      hover: textSubtleHover,
+      active: textSubtleActive,
+      selected: textSubtleSelected,
+      focus: textSubtleHover,
+      disabled: textDisabled,
+    },
+    muted: {
+      default: textSecondary,
+      hover: textMutedHover,
+      active: textMutedActive,
+      selected: textMutedSelected,
+      focus: textMutedHover,
+      disabled: textDisabled,
+    },
+    default: {
+      default: ink,
+      hover: textDefaultHover,
+      active: textDefaultActive,
+      selected: textDefaultSelected,
+      focus: textDefaultHover,
+      disabled: textDisabled,
+    },
+    strong: {
+      default: textStrong,
+      hover: ink,
+      active: textDefaultHover,
+      selected: ink,
+      focus: ink,
+      disabled: textDisabled,
+    },
+    inverse: {
+      default: textInverse,
+      hover: textInverse,
+      active: textInverse,
+      selected: textInverse,
+      focus: textInverse,
+      disabled: alpha(textInverse, 0.5),
+    },
+  });
+
+  ensureNeutralMatrix(tokens, 'border', {
+    subtle: {
+      default: alpha(ink, 0.05 + contrastT * 0.1),
+      hover: alpha(ink, 0.08 + contrastT * 0.12),
+      active: alpha(ink, 0.1 + contrastT * 0.14),
+      selected: alpha(ink, 0.11 + contrastT * 0.16),
+      focus: alpha(ink, 0.14 + contrastT * 0.2),
+      disabled: alpha(ink, 0.04 + contrastT * 0.08),
+    },
+    muted: {
+      default: alpha(ink, 0.07 + contrastT * 0.12),
+      hover: alpha(ink, 0.1 + contrastT * 0.14),
+      active: alpha(ink, 0.12 + contrastT * 0.16),
+      selected: alpha(ink, 0.13 + contrastT * 0.17),
+      focus: alpha(ink, 0.15 + contrastT * 0.2),
+      disabled: alpha(ink, 0.05 + contrastT * 0.08),
+    },
+    default: {
+      default: border,
+      hover: alpha(ink, 0.1 + contrastT * 0.18),
+      active: alpha(ink, 0.12 + contrastT * 0.2),
+      selected: alpha(ink, 0.11 + contrastT * 0.19),
+      focus: alpha(ink, 0.14 + contrastT * 0.22),
+      disabled: alpha(ink, 0.05 + contrastT * 0.08),
+    },
+    strong: {
+      default: alpha(ink, 0.14 + contrastT * 0.2),
+      hover: alpha(ink, 0.16 + contrastT * 0.22),
+      active: alpha(ink, 0.18 + contrastT * 0.24),
+      selected: alpha(ink, 0.2 + contrastT * 0.24),
+      focus: alpha(ink, 0.22 + contrastT * 0.26),
+      disabled: alpha(ink, 0.06 + contrastT * 0.1),
+    },
+    inverse: {
+      default: alpha(textInverse, 0.35),
+      hover: alpha(textInverse, 0.45),
+      active: alpha(textInverse, 0.55),
+      selected: alpha(textInverse, 0.5),
+      focus: alpha(textInverse, 0.58),
+      disabled: alpha(textInverse, 0.22),
+    },
+  });
+
+  ensureNeutralMatrix(tokens, 'icon', {
+    subtle: {
+      default: textMuted,
+      hover: textSubtleHover,
+      active: textSubtleActive,
+      selected: textSubtleSelected,
+      focus: textSubtleHover,
+      disabled: textDisabled,
+    },
+    muted: {
+      default: textMuted,
+      hover: textMutedHover,
+      active: textMutedActive,
+      selected: textMutedSelected,
+      focus: textMutedHover,
+      disabled: textDisabled,
+    },
+    default: {
+      default: textSecondary,
+      hover: textDefaultHover,
+      active: textDefaultActive,
+      selected: textDefaultSelected,
+      focus: textDefaultHover,
+      disabled: textDisabled,
+    },
+    strong: {
+      default: textStrong,
+      hover: ink,
+      active: textDefaultHover,
+      selected: ink,
+      focus: ink,
+      disabled: textDisabled,
+    },
+    inverse: {
+      default: textInverse,
+      hover: textInverse,
+      active: textInverse,
+      selected: textInverse,
+      focus: textInverse,
+      disabled: alpha(textInverse, 0.5),
+    },
+  });
+
+  ensureNeutralMatrix(tokens, 'ring', {
+    subtle: {
+      default: alpha(ink, 0.1 + contrastT * 0.12),
+      hover: alpha(ink, 0.14 + contrastT * 0.14),
+      active: alpha(ink, 0.18 + contrastT * 0.18),
+      selected: alpha(ink, 0.2 + contrastT * 0.2),
+      focus: alpha(ink, 0.2 + contrastT * 0.2),
+      disabled: alpha(ink, 0.06 + contrastT * 0.1),
+    },
+    muted: {
+      default: alpha(ink, 0.12 + contrastT * 0.14),
+      hover: alpha(ink, 0.16 + contrastT * 0.16),
+      active: alpha(ink, 0.2 + contrastT * 0.2),
+      selected: alpha(ink, 0.22 + contrastT * 0.22),
+      focus: alpha(ink, 0.26 + contrastT * 0.22),
+      disabled: alpha(ink, 0.07 + contrastT * 0.1),
+    },
+    default: {
+      default: alpha(ink, 0.14 + contrastT * 0.16),
+      hover: alpha(ink, 0.18 + contrastT * 0.2),
+      active: alpha(ink, 0.22 + contrastT * 0.22),
+      selected: alpha(ink, 0.24 + contrastT * 0.24),
+      focus: alpha(ink, 0.28 + contrastT * 0.24),
+      disabled: alpha(ink, 0.08 + contrastT * 0.1),
+    },
+    strong: {
+      default: alpha(ink, 0.18 + contrastT * 0.2),
+      hover: alpha(ink, 0.22 + contrastT * 0.24),
+      active: alpha(ink, 0.26 + contrastT * 0.26),
+      selected: alpha(ink, 0.28 + contrastT * 0.28),
+      focus: alpha(ink, 0.32 + contrastT * 0.28),
+      disabled: alpha(ink, 0.1 + contrastT * 0.12),
+    },
+    inverse: {
+      default: alpha(textInverse, 0.3),
+      hover: alpha(textInverse, 0.36),
+      active: alpha(textInverse, 0.42),
+      selected: alpha(textInverse, 0.44),
+      focus: alpha(textInverse, 0.5),
+      disabled: alpha(textInverse, 0.2),
+    },
+  });
+
+  return tokens;
+}
+
+function parseCssColor(
+  color: string | undefined
+): { oklch: Oklch; alpha?: number } | null {
+  const hex = parseHexOnly(color);
+  if (hex) return { oklch: hexToOklch(hex) };
+
+  if (!color) return null;
+  const rgbaMatch = color
+    .trim()
+    .match(
+      /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0|0?\.\d+|1(?:\.0+)?)\s*\)$/i
+    );
+  if (!rgbaMatch) return null;
+
+  const r = clamp(Number(rgbaMatch[1]), 0, 255);
+  const g = clamp(Number(rgbaMatch[2]), 0, 255);
+  const b = clamp(Number(rgbaMatch[3]), 0, 255);
+  const a = clamp(Number(rgbaMatch[4]), 0, 1);
+  const parsedHex = rgbToHex(r, g, b);
+  return { oklch: hexToOklch(parsedHex), alpha: a };
+}
+
+function contrastBias(
+  element: Element,
+  mode: Mode,
+  contrast: number
+): Adjustment {
+  const t = clamp(contrast, 0, 100) / 100;
+  const direction = mode === 'dark' ? 1 : -1;
+  if (element === 'bg') {
+    return { dL: direction * (0.01 + t * 0.07) };
+  }
+  if (element === 'text' || element === 'icon') {
+    return { dL: direction * (0.02 + t * 0.08) };
+  }
+  if (element === 'border' || element === 'ring') {
+    return { dL: direction * (0.01 + t * 0.05) };
+  }
+  return {};
+}
+
+function toneBaseColor(
+  tone: Tone,
+  mode: Mode,
+  seed: { accent: `#${string}`; background: `#${string}`; ink: `#${string}` },
+  element: Element
+): Oklch {
+  const spec = SEMANTIC.toneSource[tone];
+  const source = spec.sourceByElement?.[element] ?? spec.source;
+  const sourceHex =
+    source === 'fixed'
+      ? (BASE.fixedAnchors[mode][tone] ?? seed.accent)
+      : seed[source as 'accent' | 'background' | 'ink'];
+  const base = hexToOklch(sourceHex);
+  return applyAdjustment(base, {
+    dL:
+      (spec.dL ?? 0) +
+      (mode === 'light' ? (spec.dLLight ?? 0) : (spec.dLDark ?? 0)),
+    dC: spec.dC ?? 0,
+    dH: spec.dH ?? 0,
+  });
+}
+
+function parseHexOnly(color: string | undefined): `#${string}` | null {
+  if (!color) return null;
+  const trimmed = color.trim().toLowerCase();
+  if (!/^#[0-9a-f]{6}$/.test(trimmed)) return null;
+  return trimmed as `#${string}`;
+}
+
+function solveForegroundContrast(
+  fgHex: `#${string}`,
+  bgHex: `#${string}`,
+  minContrast: number
+): `#${string}` {
+  const current = contrastRatio(fgHex, bgHex);
+  if (current >= minContrast) return fgHex;
+
+  const base = hexToOklch(fgHex);
+  let best: { hex: `#${string}`; delta: number } | null = null;
+  for (let i = 0; i <= 100; i += 1) {
+    const targetL = i / 100;
+    const probeHex = oklchToHex({ l: targetL, c: base.c, h: base.h });
+    const ratio = contrastRatio(probeHex, bgHex);
+    if (ratio >= minContrast) {
+      const delta = Math.abs(targetL - base.l);
+      if (!best || delta < best.delta) best = { hex: probeHex, delta };
+    }
+  }
+  if (best) return best.hex;
+
+  // Chroma reduction pass if pure lightness search was insufficient.
+  for (let i = 0; i <= 100; i += 1) {
+    const targetC = (base.c * (100 - i)) / 100;
+    const probeHex = oklchToHex({ l: base.l, c: targetC, h: base.h });
+    if (contrastRatio(probeHex, bgHex) >= minContrast) return probeHex;
+  }
+
+  return chooseReadableText(bgHex, fgHex, minContrast);
+}
+
+function enforceContrastPairs(tokens: ThemeTokens): {
+  tokens: ThemeTokens;
+  diagnostics: ContrastDiagnostic[];
+} {
+  const out: ThemeTokens = { ...tokens };
+  const diagnostics: ContrastDiagnostic[] = [];
+  for (const pair of SEMANTIC.contrastPairs) {
+    const fgToken = pair.fg;
+    const bgToken = pair.bg;
+    const fgValue = out[fgToken];
+    const bgValue = out[bgToken];
+    const fgHex = parseHexOnly(fgValue);
+    const bgHex = parseHexOnly(bgValue);
+    if (!fgHex || !bgHex) continue;
+
+    const minRequired = Math.max(
+      pair.minContrast ?? 0,
+      wcagMinimumContrast(pair.largeText)
+    );
+    const solvedFg = solveForegroundContrast(fgHex, bgHex, minRequired);
+    out[fgToken] = solvedFg;
+
+    const ratio = contrastRatio(solvedFg, bgHex);
+    diagnostics.push({
+      fg: fgToken,
+      bg: bgToken,
+      ratio,
+      minRequired,
+      passes: ratio >= minRequired,
+      apcaLc: apcaContrastApprox(solvedFg, bgHex),
+    });
+  }
+  return { tokens: out, diagnostics };
+}
+
+function buildSemanticTokens(
+  contract: ThemeContractV2,
+  seed: ResolvedThemeV2['seed']
+) {
+  const tokens: ThemeTokens = {};
+  const { elements, tones, emphasis, states } = SEMANTIC.axes;
+  const legacyNeutralTokens = buildLegacyNeutralContrastTokens(
+    seed,
+    contract.contrast
+  );
+
+  for (const tone of tones) {
+    for (const emph of emphasis) {
+      for (const state of states) {
+        const tokenSuffix = `${tone}.${emph}.${state}` as const;
+        const baseAdjustment = mergeAdjustment(
+          SEMANTIC.transforms.emphasis[emph],
+          SEMANTIC.transforms.state[state]
+        );
+        const axisOverride = mergeAdjustment(
+          contract.overrides?.tone?.[tone],
+          contract.overrides?.emphasis?.[emph],
+          contract.overrides?.state?.[state],
+          contract.overrides?.cell?.[tokenSuffix]
+        );
+
+        for (const element of elements) {
+          const tokenKey = `${element}.${tokenSuffix}` as TokenKey;
+          const alphaOnlyAdjustment = mergeAdjustment(
+            baseAdjustment,
+            SEMANTIC.transforms.element[element],
+            axisOverride
+          );
+
+          if (SYSTEM_STATUS_TONES.has(tone) && emph !== 'inverse') {
+            if (emph === 'transparent') {
+              const transparentShade: FixedShade =
+                contract.mode === 'dark' ? '300' : '600';
+              const baseHex =
+                getFixedShade(tone, transparentShade) ??
+                oklchToHex(toneBaseColor(tone, contract.mode, seed, element));
+              const stateAlpha =
+                SYSTEM_STATUS_TRANSPARENT_OPACITY_BY_STATE[state as State] ??
+                0.3;
+              const resolvedAlpha =
+                typeof axisOverride.alpha === 'number'
+                  ? axisOverride.alpha
+                  : stateAlpha;
+              tokens[tokenKey] = alpha(baseHex, resolvedAlpha);
+              continue;
+            }
+
+            const statusShade = getSystemStatusShade(
+              tone,
+              emph as Extract<
+                Emphasis,
+                'subtle' | 'muted' | 'default' | 'strong'
+              >,
+              state,
+              contract.mode
+            );
+            if (statusShade) {
+              tokens[tokenKey] =
+                typeof alphaOnlyAdjustment.alpha === 'number' &&
+                alphaOnlyAdjustment.alpha < 1
+                  ? alpha(statusShade, alphaOnlyAdjustment.alpha)
+                  : statusShade;
+              continue;
+            }
+          }
+
+          if (emph === 'transparent') {
+            const toneBase = toneBaseColor(tone, contract.mode, seed, element);
+            const baseHex = oklchToHex(toneBase);
+            const stateAlpha =
+              TRANSPARENT_OPACITY_BY_STATE[state as State] ?? 0.1;
+            const resolvedAlpha =
+              typeof axisOverride.alpha === 'number'
+                ? axisOverride.alpha
+                : stateAlpha;
+            tokens[tokenKey] = alpha(baseHex, resolvedAlpha);
+            continue;
+          }
+
+          if (tone === 'neutral') {
+            const legacy = parseCssColor(legacyNeutralTokens[tokenKey]);
+            if (legacy) {
+              const adjusted = applyAdjustment(legacy.oklch, axisOverride);
+              const legacyHex = oklchToHex(adjusted);
+              const resolvedAlpha =
+                typeof axisOverride.alpha === 'number'
+                  ? axisOverride.alpha
+                  : legacy.alpha;
+              tokens[tokenKey] =
+                typeof resolvedAlpha === 'number' && resolvedAlpha < 1
+                  ? alpha(legacyHex, resolvedAlpha)
+                  : legacyHex;
+              continue;
+            }
+          }
+
+          const toneBase = toneBaseColor(tone, contract.mode, seed, element);
+          const adjustment = mergeAdjustment(
+            alphaOnlyAdjustment,
+            contrastBias(element, contract.mode, contract.contrast)
+          );
+
+          const colorHex = oklchToHex(applyAdjustment(toneBase, adjustment));
+          const value =
+            typeof adjustment.alpha === 'number' && adjustment.alpha < 1
+              ? alpha(colorHex, adjustment.alpha)
+              : colorHex;
+          tokens[tokenKey] = value;
+        }
+      }
+    }
+  }
+  return tokens;
+}
+
+/**
+ * Tones used for filled primary-style controls (`button` `TONE_PRIMARY`): same rule as
+ * brand — prefer near-white on saturated fills (WCAG large-text ~3:1), else best black/white.
+ */
+const FILLED_ACCENT_INVERSE_TONES: Tone[] = [
+  'brand',
+  'success',
+  'error',
+  'warning',
+  'information',
+];
+
+function applyFilledAccentInverseTextHeuristic(
+  tokens: ThemeTokens
+): ThemeTokens {
+  const out: ThemeTokens = { ...tokens };
+  for (const tone of FILLED_ACCENT_INVERSE_TONES) {
+    for (const state of SEMANTIC.axes.states) {
+      const bgKey = `bg.${tone}.default.${state}` as TokenKey;
+      const textKey = `text.${tone}.inverse.${state}` as TokenKey;
+      const bgHex = parseHexOnly(out[bgKey]);
+      if (!bgHex) continue;
+      out[textKey] = chooseReadableText(bgHex, '#ffffff', 3);
+    }
+  }
+  return out;
+}
+
+function isModeSplitComponentColor(
+  v: unknown
+): v is { light: string; dark: string } {
+  if (typeof v !== 'object' || v === null || Array.isArray(v)) return false;
+  const o = v as Record<string, unknown>;
+  return typeof o.light === 'string' && typeof o.dark === 'string';
+}
+
+function buildComponentAliasVariables(
+  tokens: ThemeTokens,
+  mode: ThemeContractV2['mode']
+): Record<string, string> {
+  const resolved = resolveExtends(componentTokens as Record<string, unknown>);
+  const leaves = flattenDtcgTokens(resolved);
+  const out: Record<string, string> = {};
+  for (const leaf of leaves) {
+    const cssVar = (leaf.extensions?.cssVar as string | undefined) ?? null;
+    if (!cssVar) continue;
+
+    let resolvedValue: string | null = null;
+    if (typeof leaf.value === 'string') {
+      resolvedValue = resolveAliasReferences(leaf.value, (path) => {
+        const key = path as TokenKey;
+        return tokens[key];
+      });
+    } else if (isModeSplitComponentColor(leaf.value)) {
+      resolvedValue = mode === 'light' ? leaf.value.light : leaf.value.dark;
+    } else {
+      continue;
+    }
+
+    if (!resolvedValue) continue;
+    out[cssVar] = resolvedValue;
+  }
+  return out;
+}
+
+function toCssVariables(tokens: ThemeTokens): Record<string, string> {
+  const variables: Record<string, string> = {};
+  for (const [tokenKey, value] of Object.entries(tokens)) {
+    if (!value) continue;
+    variables[tokenKeyToCssVarName(tokenKey as TokenKey)] = value;
+  }
+  return variables;
+}
+
+function normalizeContract(contract: ThemeContractV2): ThemeContractV2 {
+  return {
+    ...contract,
+    contrast: clamp(Math.round(contract.contrast), 0, 100),
+  };
+}
+
+function getThemeSeed(contract: ThemeContractV2, catalog: ThemeCatalogV2) {
+  const definition = getColorThemeDefinitionV2(
+    contract.mode,
+    contract.themeId,
+    catalog
+  );
+  return {
+    themeId: definition.id,
+    seed: definition.seed,
+  };
+}
+
+function computeThemeV2(
+  contract: ThemeContractV2,
+  catalog: ThemeCatalogV2
+): ResolvedThemeV2 {
+  const normalized = normalizeContract(contract);
+  const { seed, themeId } = getThemeSeed(normalized, catalog);
+
+  const semantic = buildSemanticTokens(normalized, seed);
+  const accentInverseAdjusted = applyFilledAccentInverseTextHeuristic(semantic);
+  const enforced = enforceContrastPairs(accentInverseAdjusted);
+  const semanticCssVars = toCssVariables(enforced.tokens);
+  const componentVars = buildComponentAliasVariables(
+    enforced.tokens,
+    normalized.mode
+  );
+  const cssVariables = {
+    ...semanticCssVars,
+    ...componentVars,
+    '--ds-theme-contrast': String(normalized.contrast),
+  };
+
+  return {
+    contract: {
+      ...normalized,
+      themeId,
+    },
+    seed,
+    tokens: enforced.tokens,
+    cssVariables,
+    diagnostics: {
+      contrast: enforced.diagnostics,
+    },
+  };
+}
+
+// Memoize by catalog identity so swapping in a user catalog invalidates the
+// right entries without keeping dead catalogs alive. Per-catalog LRU keeps the
+// footprint bounded for the live-contrast slider case.
+const BUILD_THEME_CACHE = new WeakMap<
+  ThemeCatalogV2,
+  Map<string, ResolvedThemeV2>
+>();
+const MAX_CACHE_ENTRIES_PER_CATALOG = 32;
+
+function contractCacheKey(contract: ThemeContractV2): string {
+  const normalized = normalizeContract(contract);
+  return `${normalized.mode}|${normalized.themeId}|${normalized.contrast}|${
+    normalized.overrides ? JSON.stringify(normalized.overrides) : '-'
+  }`;
+}
+
+export function buildThemeV2(
+  contract: ThemeContractV2,
+  catalog: ThemeCatalogV2 = DEFAULT_THEME_CATALOG
+): ResolvedThemeV2 {
+  const key = contractCacheKey(contract);
+  let perCatalog = BUILD_THEME_CACHE.get(catalog);
+  if (perCatalog) {
+    const cached = perCatalog.get(key);
+    if (cached) {
+      perCatalog.delete(key);
+      perCatalog.set(key, cached);
+      return cached;
+    }
+  } else {
+    perCatalog = new Map();
+    BUILD_THEME_CACHE.set(catalog, perCatalog);
+  }
+
+  const result = computeThemeV2(contract, catalog);
+  if (perCatalog.size >= MAX_CACHE_ENTRIES_PER_CATALOG) {
+    const oldestKey = perCatalog.keys().next().value;
+    if (oldestKey !== undefined) perCatalog.delete(oldestKey);
+  }
+  perCatalog.set(key, result);
+  return result;
+}
+
+export function applyResolvedThemeToElement(
+  resolvedTheme: ResolvedThemeV2,
+  element: HTMLElement
+): void {
+  for (const [name, value] of Object.entries(resolvedTheme.cssVariables)) {
+    element.style.setProperty(name, value);
+  }
+}
+
+export function applyThemeContractV2(
+  contract: ThemeContractV2,
+  element: HTMLElement,
+  catalog: ThemeCatalogV2 = DEFAULT_THEME_CATALOG
+): ResolvedThemeV2 {
+  const resolved = buildThemeV2(contract, catalog);
+  applyResolvedThemeToElement(resolved, element);
+  return resolved;
+}
+
+export function createApcaDiagnosticsReport(
+  resolvedTheme: ResolvedThemeV2
+): string {
+  return JSON.stringify(
+    {
+      contract: resolvedTheme.contract,
+      diagnostics: resolvedTheme.diagnostics,
+    },
+    null,
+    2
+  );
+}
diff --git a/src/lib/themeTokens/index.ts b/src/lib/themeTokens/index.ts
new file mode 100644
index 000000000..271396c28
--- /dev/null
+++ b/src/lib/themeTokens/index.ts
@@ -0,0 +1,19 @@
+// ========= 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. =========
+
+export * from './catalog';
+export * from './dtcg';
+export * from './engine';
+export * from './naming';
+export * from './types';
diff --git a/src/lib/themeTokens/naming.ts b/src/lib/themeTokens/naming.ts
new file mode 100644
index 000000000..42bfb392d
--- /dev/null
+++ b/src/lib/themeTokens/naming.ts
@@ -0,0 +1,23 @@
+// ========= 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 { TokenKey } from './types';
+
+export function tokenKeyToCssVarName(tokenKey: TokenKey): string {
+  return `--ds-${tokenKey.replace(/\./g, '-')}`;
+}
+
+export function tokenKeyToCssVarValue(tokenKey: TokenKey): string {
+  return `var(${tokenKeyToCssVarName(tokenKey)})`;
+}
diff --git a/src/lib/themeTokens/types.ts b/src/lib/themeTokens/types.ts
new file mode 100644
index 000000000..b3259b39d
--- /dev/null
+++ b/src/lib/themeTokens/types.ts
@@ -0,0 +1,142 @@
+// ========= 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. =========
+
+export const THEME_CONTRACT_VERSION = 2 as const;
+
+export const TOKEN_ELEMENTS = ['bg', 'text', 'border', 'icon', 'ring'] as const;
+export const TOKEN_EMPHASIS = [
+  'subtle',
+  'muted',
+  'default',
+  'strong',
+  'inverse',
+  'transparent',
+] as const;
+export const TOKEN_UI_STATES = [
+  'default',
+  'hover',
+  'active',
+  'selected',
+  'focus',
+  'disabled',
+] as const;
+export const TOKEN_TONES = [
+  'neutral',
+  'brand',
+  'status-running',
+  'status-splitting',
+  'status-pending',
+  'status-error',
+  'status-reassigning',
+  'status-completed',
+  'status-blocked',
+  'status-paused',
+  'status-skipped',
+  'status-cancelled',
+  'single-agent',
+  'workforce',
+  'browser',
+  'terminal',
+  'document',
+  'success',
+  'caution',
+  'error',
+  'warning',
+  'information',
+] as const;
+
+export type Mode = 'light' | 'dark';
+
+export type Element = (typeof TOKEN_ELEMENTS)[number];
+export type Emphasis = (typeof TOKEN_EMPHASIS)[number];
+export type State = (typeof TOKEN_UI_STATES)[number];
+export type Tone = (typeof TOKEN_TONES)[number];
+export type TokenKey = `${Element}.${Tone}.${Emphasis}.${State}`;
+
+export type Adjustment = {
+  dL?: number;
+  dC?: number;
+  dH?: number;
+  alpha?: number;
+};
+
+export type ThemeContractV2 = {
+  version: typeof THEME_CONTRACT_VERSION;
+  mode: Mode;
+  themeId: string;
+  contrast: number; // 0..100
+  overrides?: {
+    tone?: Partial<Record<Tone, Adjustment>>;
+    emphasis?: Partial<Record<Emphasis, Adjustment>>;
+    state?: Partial<Record<State, Adjustment>>;
+    cell?: Partial<Record<`${Tone}.${Emphasis}.${State}`, Adjustment>>;
+  };
+};
+
+export type TokenGenerationContractV2 = {
+  baseToneAdjustments?: Partial<Record<Tone, Adjustment>>;
+  emphasisAdjustments?: Partial<Record<Emphasis, Adjustment>>;
+  stateAdjustments?: Partial<Record<State, Adjustment>>;
+  requiredContrastPairs?: Array<{
+    fg: TokenKey;
+    bg: TokenKey;
+    minContrast: number;
+    largeText?: boolean;
+  }>;
+};
+
+export type ThemeSeedV2 = {
+  accent: `#${string}`;
+  background: `#${string}`;
+  ink: `#${string}`;
+};
+
+export type ColorThemeDefinitionV2 = {
+  id: string;
+  mode: Mode;
+  seed: ThemeSeedV2;
+};
+
+export type ThemeCatalogV2 = Record<
+  Mode,
+  Record<string, ColorThemeDefinitionV2>
+>;
+
+export type ThemeTokens = Partial<Record<TokenKey, string>>;
+
+export type ContrastDiagnostic = {
+  fg: TokenKey;
+  bg: TokenKey;
+  ratio: number;
+  minRequired: number;
+  passes: boolean;
+  apcaLc: number;
+};
+
+export type ThemeDiagnostics = {
+  contrast: ContrastDiagnostic[];
+};
+
+export type ResolvedThemeV2 = {
+  contract: ThemeContractV2;
+  seed: ThemeSeedV2;
+  tokens: ThemeTokens;
+  cssVariables: Record<string, string>;
+  diagnostics: ThemeDiagnostics;
+};
+
+// Backward-compatible type aliases during V2 cutover.
+export type ThemeSeed = ThemeSeedV2;
+export type ThemeCatalog = ThemeCatalogV2;
+export type UiState = State;
diff --git a/src/lib/themeTokens/verifier.ts b/src/lib/themeTokens/verifier.ts
new file mode 100644
index 000000000..6c58f1e61
--- /dev/null
+++ b/src/lib/themeTokens/verifier.ts
@@ -0,0 +1,407 @@
+// ========= 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. =========
+
+// V2 design-token engine verifier.
+//
+// The engine declares a short list of `contrastPairs` in semantic.color.json and
+// actively solves the foreground color to meet each pair's threshold. This
+// verifier:
+//   1. Exercises every (mode x theme x contrast-grid) variant.
+//   2. Forwards the engine's own declared-pair diagnostics.
+//   3. Checks **additional, undeclared** pairings that the engine does NOT solve
+//      for — every status badge and every fixed tone's `strong` text on its
+//      `subtle` surface. Those are what typically drift as transforms are tuned,
+//      because the engine won't auto-correct them.
+//   4. Validates token coverage and CSS-value syntax.
+//
+// Structured output lets both the CLI script and vitest consume the same result.
+
+import {
+  DEFAULT_THEME_CATALOG,
+  createDefaultThemeContractV2,
+  getColorThemeDefinitionV2,
+} from './catalog';
+import { contrastRatio } from './colorMath';
+import { buildThemeV2 } from './engine';
+import {
+  TOKEN_ELEMENTS,
+  TOKEN_EMPHASIS,
+  TOKEN_TONES,
+  TOKEN_UI_STATES,
+  type Mode,
+  type ResolvedThemeV2,
+  type ThemeCatalogV2,
+  type TokenKey,
+} from './types';
+
+export type VerifySeverity = 'error' | 'warn';
+
+export type VerifyFinding = {
+  severity: VerifySeverity;
+  mode: Mode;
+  themeId: string;
+  contrast: number;
+  code: string;
+  message: string;
+  tokenKey?: string;
+  value?: string;
+  ratio?: number;
+  threshold?: number;
+};
+
+export type VerifySummary = {
+  variantsChecked: number;
+  errors: number;
+  warnings: number;
+};
+
+export type VerifyReport = {
+  summary: VerifySummary;
+  findings: VerifyFinding[];
+};
+
+// WCAG 2.1 AA minimums. "Large text" applies to >=18pt or bold >=14pt.
+const MIN_CONTRAST_NORMAL_AA = 4.5;
+const MIN_CONTRAST_LARGE_AA = 3.0;
+
+// Contrast grid covers the engine's full input range. 43 is the app default.
+const DEFAULT_CONTRAST_GRID = [0, 25, 43, 75, 100];
+
+// Tokens the engine is required to emit for every variant. Missing any of these
+// is an error, not a warning, since downstream components hard-reference them.
+const REQUIRED_CORE_TOKENS: TokenKey[] = [
+  'bg.neutral.subtle.default',
+  'bg.neutral.default.default',
+  'bg.neutral.muted.default',
+  'bg.neutral.strong.default',
+  'bg.brand.default.default',
+  'text.neutral.default.default',
+  'text.neutral.muted.default',
+  'text.neutral.subtle.default',
+  'text.brand.inverse.default',
+  'border.neutral.default.default',
+  'border.neutral.strong.default',
+  'ring.brand.default.focus',
+  'icon.neutral.default.default',
+];
+
+type Pairing = {
+  bg: TokenKey;
+  text: TokenKey;
+  threshold: number;
+  label: string;
+};
+
+// Status + fixed-tone badges typically render `text.<tone>.strong.default` on
+// `bg.<tone>.subtle.default`. None of these are in semantic.color.json's
+// `contrastPairs` so the engine doesn't auto-solve them — perfect place for the
+// verifier to catch regressions.
+const AUXILIARY_BADGE_TONES: Array<{
+  tone: string;
+  threshold: number;
+  label?: string;
+}> = [
+  // Task lifecycle (10 tones)
+  { tone: 'status-running', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'status-splitting', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'status-pending', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'status-error', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'status-reassigning', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'status-completed', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'status-blocked', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'status-paused', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'status-skipped', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'status-cancelled', threshold: MIN_CONTRAST_NORMAL_AA },
+  // Fixed tones (10)
+  { tone: 'single-agent', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'workforce', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'browser', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'terminal', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'document', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'success', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'caution', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'error', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'warning', threshold: MIN_CONTRAST_NORMAL_AA },
+  { tone: 'information', threshold: MIN_CONTRAST_NORMAL_AA },
+];
+
+function buildAuxiliaryPairings(): Pairing[] {
+  const pairs: Pairing[] = [];
+  for (const { tone, threshold, label } of AUXILIARY_BADGE_TONES) {
+    pairs.push({
+      bg: `bg.${tone}.subtle.default` as TokenKey,
+      text: `text.${tone}.strong.default` as TokenKey,
+      threshold,
+      label: label ?? `${tone} badge text on subtle surface`,
+    });
+  }
+  // Body text on muted surface — not declared but ubiquitous.
+  pairs.push({
+    bg: 'bg.neutral.muted.default' as TokenKey,
+    text: 'text.neutral.default.default' as TokenKey,
+    threshold: MIN_CONTRAST_NORMAL_AA,
+    label: 'body text on muted surface',
+  });
+  // Brand inverse text on brand hover/active (engine handles `default` via heuristic).
+  pairs.push({
+    bg: 'bg.brand.default.hover' as TokenKey,
+    text: 'text.brand.inverse.hover' as TokenKey,
+    threshold: MIN_CONTRAST_LARGE_AA,
+    label: 'brand button label (hover)',
+  });
+  pairs.push({
+    bg: 'bg.brand.default.active' as TokenKey,
+    text: 'text.brand.inverse.active' as TokenKey,
+    threshold: MIN_CONTRAST_LARGE_AA,
+    label: 'brand button label (active)',
+  });
+  return pairs;
+}
+
+const VALID_COLOR_RE =
+  /^(#[0-9a-fA-F]{3,8}|rgba?\(\s*[0-9.\s,%-]+\)|transparent)$/;
+
+function validateTokenValue(value: string | undefined): boolean {
+  if (!value) return false;
+  if (value.includes('NaN')) return false;
+  return VALID_COLOR_RE.test(value.trim());
+}
+
+function extractHex(value: string | undefined): `#${string}` | null {
+  if (!value) return null;
+  const trimmed = value.trim().toLowerCase();
+  if (/^#[0-9a-f]{6}$/.test(trimmed)) return trimmed as `#${string}`;
+  // rgba(r,g,b,a) — only safe to compare when alpha is 1; otherwise the visual
+  // contrast depends on what's behind the translucent layer.
+  const m = trimmed.match(
+    /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(0|0?\.\d+|1(?:\.0+)?)\s*)?\)$/
+  );
+  if (!m) return null;
+  const alpha = m[4] !== undefined ? Number(m[4]) : 1;
+  if (alpha < 1) return null;
+  const toHex = (n: string) => Number(n).toString(16).padStart(2, '0');
+  return `#${toHex(m[1])}${toHex(m[2])}${toHex(m[3])}` as `#${string}`;
+}
+
+function pushFinding(
+  findings: VerifyFinding[],
+  base: Omit<VerifyFinding, 'severity' | 'code' | 'message'>,
+  severity: VerifySeverity,
+  code: string,
+  message: string,
+  extra: Partial<VerifyFinding> = {}
+) {
+  findings.push({ ...base, severity, code, message, ...extra });
+}
+
+export type VerifyOptions = {
+  catalog?: ThemeCatalogV2;
+  contrastGrid?: number[];
+  modes?: Mode[];
+  themeIds?: string[];
+  extraPairings?: Pairing[];
+  // When true, elevate auxiliary contrast failures to 'error' severity so CI
+  // blocks on them. Engine-declared pair failures are always errors.
+  strictAuxContrast?: boolean;
+};
+
+export function verifyThemeEngine(options: VerifyOptions = {}): VerifyReport {
+  const catalog = options.catalog ?? DEFAULT_THEME_CATALOG;
+  const contrastGrid = options.contrastGrid ?? DEFAULT_CONTRAST_GRID;
+  const modes: Mode[] = options.modes ?? ['light', 'dark'];
+  const auxSeverity: VerifySeverity = options.strictAuxContrast
+    ? 'error'
+    : 'warn';
+  const auxPairings = [
+    ...buildAuxiliaryPairings(),
+    ...(options.extraPairings ?? []),
+  ];
+
+  const findings: VerifyFinding[] = [];
+  let variantsChecked = 0;
+
+  for (const mode of modes) {
+    const modeCatalog = catalog[mode] ?? {};
+    const themeIds = options.themeIds ?? Object.keys(modeCatalog);
+
+    for (const themeId of themeIds) {
+      if (!modeCatalog[themeId]) {
+        findings.push({
+          severity: 'error',
+          mode,
+          themeId,
+          contrast: -1,
+          code: 'unknown-theme',
+          message: `Theme "${themeId}" not registered for mode "${mode}".`,
+        });
+        continue;
+      }
+
+      for (const contrast of contrastGrid) {
+        variantsChecked += 1;
+        const base = { mode, themeId, contrast };
+
+        let resolved: ResolvedThemeV2;
+        try {
+          resolved = buildThemeV2(
+            createDefaultThemeContractV2(mode, { themeId, contrast }),
+            catalog
+          );
+        } catch (err) {
+          pushFinding(
+            findings,
+            base,
+            'error',
+            'engine-throw',
+            `buildThemeV2 threw: ${(err as Error).message}`
+          );
+          continue;
+        }
+
+        // Contract sanity.
+        if (resolved.contract.mode !== mode) {
+          pushFinding(
+            findings,
+            base,
+            'error',
+            'contract-mode-drift',
+            `Resolved contract mode "${resolved.contract.mode}" !== requested "${mode}".`
+          );
+        }
+        if (resolved.contract.themeId !== themeId) {
+          pushFinding(
+            findings,
+            base,
+            'error',
+            'contract-theme-drift',
+            `Resolved contract themeId "${resolved.contract.themeId}" !== requested "${themeId}".`
+          );
+        }
+
+        // Required core tokens.
+        for (const key of REQUIRED_CORE_TOKENS) {
+          const value = resolved.tokens[key];
+          if (!validateTokenValue(value)) {
+            pushFinding(
+              findings,
+              base,
+              'error',
+              'missing-or-invalid-token',
+              `Required token "${key}" is missing or not a valid color.`,
+              { tokenKey: key, value }
+            );
+          }
+        }
+
+        // All emitted tokens must be valid CSS colors.
+        for (const [key, value] of Object.entries(resolved.tokens)) {
+          if (!validateTokenValue(value)) {
+            pushFinding(
+              findings,
+              base,
+              'error',
+              'invalid-token-value',
+              `Token "${key}" resolved to invalid value "${value}".`,
+              { tokenKey: key, value }
+            );
+          }
+        }
+
+        // Engine-declared pairs (the engine actively solves for these; if any
+        // fail, the solver couldn't converge — that's always an error).
+        for (const diag of resolved.diagnostics.contrast) {
+          if (!diag.passes) {
+            pushFinding(
+              findings,
+              base,
+              'error',
+              'engine-contrast-unsolved',
+              `Declared pair ${diag.fg} on ${diag.bg}: ratio ${diag.ratio.toFixed(2)} < ${diag.minRequired} (solver failed to converge).`,
+              {
+                tokenKey: diag.fg,
+                ratio: diag.ratio,
+                threshold: diag.minRequired,
+              }
+            );
+          }
+        }
+
+        // Auxiliary (undeclared) pairings — drift detector.
+        for (const pairing of auxPairings) {
+          const bg = resolved.tokens[pairing.bg];
+          const text = resolved.tokens[pairing.text];
+          if (!bg || !text) continue;
+
+          const bgHex = extractHex(bg);
+          const textHex = extractHex(text);
+          if (!bgHex || !textHex) continue;
+
+          const ratio = contrastRatio(bgHex, textHex);
+          if (ratio < pairing.threshold) {
+            pushFinding(
+              findings,
+              base,
+              auxSeverity,
+              'aux-contrast-below-threshold',
+              `${pairing.label}: contrast ${ratio.toFixed(2)} < ${pairing.threshold} (bg=${pairing.bg}, text=${pairing.text}).`,
+              {
+                tokenKey: pairing.text,
+                value: `bg=${bg} / text=${text}`,
+                ratio,
+                threshold: pairing.threshold,
+              }
+            );
+          }
+        }
+      }
+    }
+  }
+
+  const errors = findings.filter((f) => f.severity === 'error').length;
+  const warnings = findings.filter((f) => f.severity === 'warn').length;
+  return {
+    summary: { variantsChecked, errors, warnings },
+    findings,
+  };
+}
+
+export function getDefaultContrastGrid(): number[] {
+  return [...DEFAULT_CONTRAST_GRID];
+}
+
+export function listRegisteredThemes(
+  catalog: ThemeCatalogV2 = DEFAULT_THEME_CATALOG
+): Array<{ mode: Mode; id: string }> {
+  const out: Array<{ mode: Mode; id: string }> = [];
+  for (const mode of ['light', 'dark'] as Mode[]) {
+    for (const id of Object.keys(catalog[mode] ?? {})) {
+      const def = getColorThemeDefinitionV2(mode, id, catalog);
+      if (def.id !== id) {
+        throw new Error(
+          `Catalog getter drift: asked for "${id}" in mode "${mode}", got "${def.id}".`
+        );
+      }
+      out.push({ mode, id });
+    }
+  }
+  return out;
+}
+
+// Expose axis constants for scripts that want to reason about token coverage.
+export const TOKEN_AXES = {
+  elements: TOKEN_ELEMENTS,
+  emphasis: TOKEN_EMPHASIS,
+  states: TOKEN_UI_STATES,
+  tones: TOKEN_TONES,
+} as const;
diff --git a/src/main.tsx b/src/main.tsx
index 3c281a282..a28f97d5e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -22,7 +22,7 @@ import { Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, HashRouter } from 'react-router-dom';
 import App from './App';
-import { ThemeProvider } from './components/ThemeProvider';
+import { ThemeProvider } from './components/Layout/ThemeProvider';
 import { TooltipProvider } from './components/ui/tooltip';
 import { ConnectionProvider } from './context/ConnectionContext';
 import { createHost, HostProvider } from './host';
diff --git a/src/pages/Agents/Memory.tsx b/src/pages/Agents/Memory.tsx
index 2647c67c3..2ca831879 100644
--- a/src/pages/Agents/Memory.tsx
+++ b/src/pages/Agents/Memory.tsx
@@ -21,22 +21,22 @@ export default function Memory() {
   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="text-heading-sm font-bold text-text-heading">
+      <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
+        <div className="text-heading-sm font-bold text-ds-text-neutral-default-default">
           {t('agents.memory')}
         </div>
       </div>
 
       {/* Content Section */}
-      <div className="mb-12 flex flex-col gap-6">
-        <div className="flex w-full flex-col items-center justify-between rounded-2xl bg-surface-secondary px-6 py-4">
-          <div className="flex h-16 w-16 items-center justify-center">
-            <Brain className="h-8 w-8 text-icon-secondary" />
+      <div className="mb-12 gap-6 flex flex-col">
+        <div className="rounded-2xl bg-ds-bg-neutral-default-default px-6 py-4 flex w-full flex-col items-center justify-between">
+          <div className="h-16 w-16 flex items-center justify-center">
+            <Brain className="h-8 w-8 text-ds-icon-neutral-muted-default" />
           </div>
-          <h2 className="mb-2 text-body-md font-bold text-text-heading">
+          <h2 className="mb-2 text-body-md font-bold text-ds-text-neutral-default-default">
             {t('layout.coming-soon')}
           </h2>
-          <p className="max-w-md text-center text-body-sm text-text-label">
+          <p className="max-w-md text-body-sm text-ds-text-neutral-muted-default text-center">
             {t('agents.memory-coming-soon-description')}
           </p>
         </div>
diff --git a/src/pages/Agents/Models.tsx b/src/pages/Agents/Models.tsx
index ab1372ca0..4706c16e5 100644
--- a/src/pages/Agents/Models.tsx
+++ b/src/pages/Agents/Models.tsx
@@ -59,31 +59,15 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
-// Import model images
-import anthropicImage from '@/assets/model/anthropic.svg';
-import azureImage from '@/assets/model/azure.svg';
-import bedrockImage from '@/assets/model/bedrock.svg';
-import deepseekImage from '@/assets/model/deepseek.svg';
 import eigentImage from '@/assets/model/eigent.svg';
-import ernieImage from '@/assets/model/ernie.png';
-import geminiImage from '@/assets/model/gemini.svg';
-import llamaCppImage from '@/assets/model/llamacpp.svg';
-import lmstudioImage from '@/assets/model/lmstudio.svg';
-import minimaxImage from '@/assets/model/minimax.svg';
-import modelarkImage from '@/assets/model/modelark.svg';
-import moonshotImage from '@/assets/model/moonshot.svg';
-import ollamaImage from '@/assets/model/ollama.svg';
-import openaiImage from '@/assets/model/openai.svg';
-import openrouterImage from '@/assets/model/openrouter.svg';
-import qwenImage from '@/assets/model/qwen.svg';
-import sglangImage from '@/assets/model/sglang.svg';
-import vllmImage from '@/assets/model/vllm.svg';
-import zaiImage from '@/assets/model/zai.svg';
+import {
+  getModelImage,
+  needsInvertModelImage,
+} from '@/shared/modelProviderImages';
 
 import {
   appendV1ToEndpoint,
   canAutoFixOllamaEndpoint,
-  DARK_FILL_MODELS,
   getDefaultLocalEndpoint,
   getLocalPlatformName,
   LLAMA_CPP_PROVIDER_ID,
@@ -92,7 +76,6 @@ import {
   OLLAMA_ENDPOINT_AUTO_FIX_DESC,
   OLLAMA_ENDPOINT_AUTO_FIX_TITLE,
   OLLAMA_PROVIDER_ID,
-  PROVIDER_AVATAR_URLS,
   SGLANG_PROVIDER_ID,
   toEndpointBaseUrl,
   VLLM_PROVIDER_ID,
@@ -1041,56 +1024,8 @@ export default function SettingModels() {
     }
   };
 
-  // Check if a model logo needs inversion in dark mode
-  const needsInvert = (modelId: string | null): boolean => {
-    if (!modelId || appearance !== 'dark') return false;
-    // Strip 'local-' prefix for local model tab IDs
-    const key = modelId.startsWith('local-')
-      ? modelId.replace('local-', '')
-      : modelId;
-    return DARK_FILL_MODELS.has(key);
-  };
-
-  // Helper to get model image based on model ID
-  const getModelImage = (modelId: string | null): string | null => {
-    if (!modelId) return null;
-    const modelImageMap: Record<string, string> = {
-      // Cloud version
-      cloud: eigentImage,
-      // Cloud models
-      openai: openaiImage,
-      anthropic: anthropicImage,
-      gemini: geminiImage,
-      openrouter: openrouterImage,
-      'tongyi-qianwen': qwenImage,
-      deepseek: deepseekImage,
-      ernie: ernieImage,
-      minimax: minimaxImage,
-      'z.ai': zaiImage,
-      moonshot: moonshotImage,
-      ModelArk: modelarkImage,
-      'samba-nova': PROVIDER_AVATAR_URLS['samba-nova'],
-      grok: PROVIDER_AVATAR_URLS.grok,
-      mistral: PROVIDER_AVATAR_URLS.mistral,
-      'aws-bedrock': bedrockImage,
-      'aws-bedrock-converse': bedrockImage,
-      azure: azureImage,
-      'openai-compatible-model': openaiImage, // Use OpenAI icon as fallback
-      // Local models
-      ollama: ollamaImage,
-      vllm: vllmImage,
-      sglang: sglangImage,
-      lmstudio: lmstudioImage,
-      [LLAMA_CPP_PROVIDER_ID]: llamaCppImage,
-      // Local model tab IDs
-      'local-ollama': ollamaImage,
-      'local-vllm': vllmImage,
-      'local-sglang': sglangImage,
-      'local-lmstudio': lmstudioImage,
-      'local-llama.cpp': llamaCppImage,
-    };
-    return modelImageMap[modelId] || null;
-  };
+  const needsInvert = (modelId: string | null): boolean =>
+    needsInvertModelImage(modelId, appearance);
 
   // Helper to render sidebar tab item
   const renderSidebarItem = (
@@ -1115,13 +1050,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-ds-bg-neutral-subtle-default hover:bg-ds-bg-neutral-subtle-default'
             : '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}
@@ -1130,18 +1065,24 @@ export default function SettingModels() {
               style={needsInvert(modelId) ? { filter: 'invert(1)' } : undefined}
             />
           ) : (
-            <span className={isActive ? 'text-text-body' : 'text-text-label'}>
+            <span
+              className={
+                isActive
+                  ? 'text-ds-text-neutral-default-default'
+                  : 'text-ds-text-neutral-muted-default'
+              }
+            >
               {fallbackIcon}
             </span>
           )}
           <span
-            className={`text-body-sm font-medium ${isActive ? 'text-text-body' : 'text-text-label'}`}
+            className={`text-body-sm font-medium ${isActive ? 'text-ds-text-neutral-default-default' : 'text-ds-text-neutral-muted-default'}`}
           >
             {label}
           </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-ds-text-success-default-default shrink-0 rounded-full" />
         )}
       </button>
     );
@@ -1153,23 +1094,27 @@ 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-ds-text-neutral-muted-default 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-ds-bg-neutral-subtle-default flex w-full flex-col">
+          <div className="mx-6 mb-4 border-ds-border-neutral-default-default 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-ds-text-neutral-default-default flex-1 justify-center">
                 {t('setting.eigent-cloud')}
               </div>
               {cloudPrefer ? (
                 <Button
-                  variant="success"
+                  variant="primary"
+                  tone="success"
                   size="xs"
-                  className="focus-none rounded-full"
+                  buttonContent="text"
+                  textWeight="bold"
+                  buttonRadius="full"
+                  className="focus-none"
                   onClick={() => {
                     setCloudPrefer(false);
                     setModelType('custom');
@@ -1180,8 +1125,12 @@ export default function SettingModels() {
               ) : (
                 <Button
                   variant="ghost"
+                  tone="neutral"
                   size="xs"
-                  className="rounded-full !text-text-label"
+                  buttonContent="text"
+                  textWeight="bold"
+                  buttonRadius="full"
+                  className="!text-ds-text-neutral-muted-default"
                   onClick={() => {
                     setLocalPrefer(false);
                     setActiveModelIdx(null);
@@ -1195,7 +1144,7 @@ export default function SettingModels() {
               )}
             </div>
             <div className="justify-center self-stretch">
-              <span className="text-body-sm text-text-label">
+              <span className="text-body-sm text-ds-text-neutral-muted-default">
                 {t('setting.you-are-currently-subscribed-to-the')}{' '}
                 {subscription?.plan_key?.charAt(0).toUpperCase() +
                   subscription?.plan_key?.slice(1)}
@@ -1205,18 +1154,18 @@ export default function SettingModels() {
                 onClick={() => {
                   window.location.href = `${SITE_URL}/pricing`;
                 }}
-                className="cursor-pointer text-body-sm text-text-label underline"
+                className="text-body-sm text-ds-text-neutral-muted-default cursor-pointer underline"
               >
                 {t('setting.pricing-options')}
               </span>
-              <span className="text-label-sm font-normal text-text-body">
+              <span className="text-label-sm font-normal text-ds-text-neutral-default-default">
                 .
               </span>
             </div>
           </div>
           {/*Content Area*/}
-          <div className="flex w-full flex-row items-center justify-between gap-4 px-6 pb-4">
-            <div className="text-body-sm text-text-body">
+          <div className="gap-4 px-6 pb-4 flex w-full flex-row items-center justify-between">
+            <div className="text-body-sm text-ds-text-neutral-default-default">
               {t('setting.credits')}:{' '}
               {loadingCredits ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
@@ -1229,7 +1178,11 @@ export default function SettingModels() {
                 window.location.href = `${SITE_URL}/dashboard`;
               }}
               variant="primary"
+              tone="neutral"
               size="sm"
+              buttonContent="text"
+              textWeight="bold"
+              buttonRadius="lg"
             >
               {loadingCredits ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
@@ -1240,9 +1193,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>
@@ -1318,46 +1271,63 @@ 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="text-body-base my-2 font-bold text-text-heading">
+        <div className="rounded-2xl bg-ds-bg-neutral-subtle-default flex w-full flex-col">
+          <div className="mx-6 mb-4 border-ds-border-neutral-default-default 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-ds-text-neutral-default-default">
                 {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">
+                  <Button
+                    variant="primary"
+                    tone="success"
+                    size="xs"
+                    buttonContent="text"
+                    textWeight="bold"
+                    disabled
+                    buttonRadius="full"
+                  >
                     {t('setting.default')}
-                  </span>
-                ) : (
+                  </Button>
+                ) : canSwitch ? (
                   <Button
                     variant="ghost"
+                    tone="neutral"
                     size="xs"
-                    disabled={!canSwitch || loading === idx}
+                    buttonContent="text"
+                    textWeight="bold"
+                    disabled={loading === idx}
+                    buttonRadius="full"
                     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'
-                    }
                   >
-                    {!canSwitch
-                      ? t('setting.not-configured')
-                      : t('setting.set-as-default')}
+                    {t('setting.set-as-default')}
+                  </Button>
+                ) : (
+                  <Button
+                    variant="secondary"
+                    tone="neutral"
+                    size="xs"
+                    buttonContent="text"
+                    textWeight="bold"
+                    disabled
+                    buttonRadius="full"
+                  >
+                    {t('setting.not-configured')}
                   </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-ds-text-success-default-default 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-ds-text-neutral-default-default shrink-0 rounded-full opacity-10" />
                 )}
               </div>
             </div>
-            <div className="text-body-sm text-text-label">
+            <div className="text-body-sm text-ds-text-neutral-muted-default">
               {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}`}
@@ -1438,7 +1408,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}
@@ -1529,24 +1499,29 @@ 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"
+              tone="neutral"
               size="sm"
-              className="!text-text-label"
+              buttonContent="text"
+              textWeight="medium"
+              buttonRadius="lg"
               onClick={() => handleDelete(idx)}
             >
               {t('setting.reset')}
             </Button>
             <Button
               variant="primary"
+              tone="neutral"
               size="sm"
+              buttonContent="text"
+              textWeight="bold"
+              buttonRadius="lg"
               onClick={() => handleVerify(idx)}
               disabled={loading === idx}
             >
-              <span className="text-text-inverse-primary">
-                {loading === idx ? t('setting.configuring') : t('setting.save')}
-              </span>
+              {loading === idx ? t('setting.configuring') : t('setting.save')}
             </Button>
           </div>
         </div>
@@ -1569,18 +1544,22 @@ 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="text-body-base my-2 font-bold text-text-heading">
+        <div className="rounded-2xl bg-ds-bg-neutral-subtle-default flex w-full flex-col">
+          <div className="mx-6 mb-4 border-ds-border-neutral-default-default 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-ds-text-neutral-default-default">
                   {getLocalPlatformName(platform)}
                 </div>
                 {isPreferred ? (
                   <Button
-                    variant="success"
+                    variant="primary"
+                    tone="success"
                     size="xs"
-                    className="focus-none rounded-full shadow-none"
+                    buttonContent="text"
+                    textWeight="bold"
+                    buttonRadius="full"
+                    className="focus-none shadow-none"
                     disabled={!isConfigured}
                     onClick={() => handleLocalSwitch(false)}
                   >
@@ -1589,12 +1568,16 @@ export default function SettingModels() {
                 ) : (
                   <Button
                     variant="ghost"
+                    tone="neutral"
                     size="xs"
+                    buttonContent="text"
+                    textWeight="bold"
+                    buttonRadius="full"
                     disabled={!isConfigured}
                     onClick={() => handleLocalSwitch(true)}
                     className={
                       isConfigured
-                        ? 'rounded-full bg-button-transparent-fill-hover !text-text-label shadow-none'
+                        ? 'bg-ds-bg-neutral-default-hover !text-ds-text-neutral-muted-default hover:bg-ds-bg-neutral-default-active shadow-none'
                         : ''
                     }
                   >
@@ -1605,14 +1588,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')}
@@ -1654,8 +1637,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}
@@ -1709,7 +1692,10 @@ export default function SettingModels() {
                   </div>
                   <Button
                     variant="ghost"
-                    size="icon"
+                    tone="neutral"
+                    size="xs"
+                    buttonContent="icon-only"
+                    textWeight="bold"
                     onClick={() =>
                       void fetchModelsForPlatform(
                         platform,
@@ -1727,7 +1713,7 @@ export default function SettingModels() {
                   </Button>
                 </div>
                 {platformModelsError && (
-                  <span className="text-label-sm text-text-error">
+                  <span className="text-label-sm text-ds-text-status-error-strong-default">
                     {platformModelsError}
                   </span>
                 )}
@@ -1750,11 +1736,14 @@ 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"
+              tone="neutral"
               size="sm"
-              className="!text-text-label"
+              buttonContent="text"
+              textWeight="medium"
+              buttonRadius="lg"
               onClick={handleLocalReset}
             >
               {t('setting.reset')}
@@ -1763,11 +1752,13 @@ export default function SettingModels() {
               onClick={handleLocalVerify}
               disabled={!localEnabled || localVerifying}
               variant="primary"
+              tone="neutral"
               size="sm"
+              buttonContent="text"
+              textWeight="bold"
+              buttonRadius="lg"
             >
-              <span className="text-text-inverse-primary">
-                {localVerifying ? t('setting.configuring') : t('setting.save')}
-              </span>
+              {localVerifying ? t('setting.configuring') : t('setting.save')}
             </Button>
           </div>
         </div>
@@ -1780,21 +1771,21 @@ 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="px-6 pb-6 pt-8 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">
+            <div className="text-heading-sm font-bold text-ds-text-neutral-default-default">
               {t('setting.models')}
             </div>
           </div>
         </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="text-body-base font-bold text-text-heading">
+        <div className="gap-4 rounded-2xl bg-ds-bg-neutral-default-default 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-ds-text-neutral-default-default">
               {t('setting.models-default-setting-title')}
             </div>
             <div className="text-body-sm">
@@ -1803,11 +1794,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-ds-border-success-default-default bg-ds-bg-success-subtle-default px-3 py-1 font-semibold text-ds-text-success-default-default 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-ds-text-success-default-default flex-shrink-0" />
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-[180px]">
@@ -1831,7 +1822,7 @@ export default function SettingModels() {
                       >
                         <span className="text-body-sm">{model.name}</span>
                         {cloudPrefer && cloud_model_type === model.id && (
-                          <Check className="h-4 w-4 text-text-success" />
+                          <Check className="h-4 w-4 text-ds-text-status-completed-strong-default" />
                         )}
                       </DropdownMenuItem>
                     ))}
@@ -1842,7 +1833,7 @@ export default function SettingModels() {
               {/* Custom Model Category */}
               <DropdownMenuSub>
                 <DropdownMenuSubTrigger className="gap-2">
-                  <Key className="h-5 w-5 text-icon-primary" />
+                  <Key className="h-5 w-5 text-ds-icon-neutral-default-default" />
                   <span className="text-body-sm">
                     {t('setting.custom-model')}
                   </span>
@@ -1861,7 +1852,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}
@@ -1874,23 +1865,23 @@ export default function SettingModels() {
                               }
                             />
                           ) : (
-                            <Key className="h-4 w-4 text-icon-secondary" />
+                            <Key className="h-4 w-4 text-ds-icon-neutral-muted-default" />
                           )}
                           <span
-                            className={`text-body-sm ${isConfigured ? 'text-text-body' : 'text-text-label'}`}
+                            className={`text-body-sm ${isConfigured ? 'text-ds-text-neutral-default-default' : 'text-ds-text-neutral-muted-default'}`}
                           >
                             {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" />
+                            <Check className="h-4 w-4 text-ds-text-status-completed-strong-default" />
                           )}
                           {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>
@@ -1902,7 +1893,7 @@ export default function SettingModels() {
               {/* Local Host Category */}
               <DropdownMenuSub>
                 <DropdownMenuSubTrigger className="gap-2">
-                  <Server className="h-5 w-5 text-icon-primary" />
+                  <Server className="h-5 w-5 text-ds-icon-neutral-default-default" />
                   <span className="text-body-sm">
                     {t('setting.local-model')}
                   </span>
@@ -1922,7 +1913,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}
@@ -1935,23 +1926,23 @@ export default function SettingModels() {
                               }
                             />
                           ) : (
-                            <Server className="h-4 w-4 text-icon-secondary" />
+                            <Server className="h-4 w-4 text-ds-icon-neutral-muted-default" />
                           )}
                           <span
-                            className={`text-body-sm ${isConfigured ? 'text-text-body' : 'text-text-label'}`}
+                            className={`text-body-sm ${isConfigured ? 'text-ds-text-neutral-default-default' : 'text-ds-text-neutral-muted-default'}`}
                           >
                             {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" />
+                            <Check className="h-4 w-4 text-ds-text-status-completed-strong-default" />
                           )}
                           {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>
@@ -1964,18 +1955,18 @@ 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="rounded-2xl bg-ds-bg-neutral-default-default px-3 py-2 flex w-full flex-col items-start justify-between">
+          <div className="px-3 py-2 text-body-base mb-4 border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default pb-2 font-bold text-ds-text-neutral-default-default sticky top-[48px] 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">
+          <div className="px-3 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-ds-bg-neutral-default-default h-full w-[240px]">
+              <div className="gap-4 flex flex-col">
                 {/* Eigent Cloud Section */}
-                <div className="flex flex-col gap-1">
-                  <div className="px-3 py-2 text-body-sm font-bold text-text-heading">
+                <div className="gap-1 flex flex-col">
+                  <div className="px-3 py-2 text-body-sm font-bold text-ds-text-neutral-default-default">
                     {t('setting.eigent-cloud')}
                   </div>
                   {import.meta.env.VITE_USE_LOCAL_PROXY !== 'true' &&
@@ -1989,22 +1980,22 @@ 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-ds-bg-neutral-default-default flex items-center justify-between bg-transparent transition-colors"
                   >
-                    <div className="text-body-sm font-bold text-text-heading">
+                    <div className="text-body-sm font-bold text-ds-text-neutral-default-default">
                       {t('setting.custom-model')}
                     </div>
                     {byokCollapsed ? (
-                      <ChevronDown className="h-4 w-4 text-text-label" />
+                      <ChevronDown className="h-4 w-4 text-ds-text-neutral-muted-default" />
                     ) : (
-                      <ChevronUp className="h-4 w-4 text-text-label" />
+                      <ChevronUp className="h-4 w-4 text-ds-text-neutral-muted-default" />
                     )}
                   </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'
@@ -2024,22 +2015,22 @@ 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-ds-bg-neutral-default-default flex items-center justify-between bg-transparent transition-colors"
                   >
-                    <div className="text-body-sm font-bold text-text-heading">
+                    <div className="text-body-sm font-bold text-ds-text-neutral-default-default">
                       {t('setting.local-model')}
                     </div>
                     {localCollapsed ? (
-                      <ChevronDown className="h-4 w-4 text-text-label" />
+                      <ChevronDown className="h-4 w-4 text-ds-text-neutral-muted-default" />
                     ) : (
-                      <ChevronUp className="h-4 w-4 text-text-label" />
+                      <ChevronUp className="h-4 w-4 text-ds-text-neutral-muted-default" />
                     )}
                   </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'
@@ -2090,7 +2081,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..457337bce 100644
--- a/src/pages/Agents/Skills.tsx
+++ b/src/pages/Agents/Skills.tsx
@@ -12,22 +12,27 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-import SearchInput from '@/components/SearchInput';
+import SearchInput from '@/components/Dashboard/SearchInput';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 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,35 +90,29 @@ 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="text-heading-sm font-bold text-text-heading">
+      <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
+        <div className="text-heading-sm font-bold text-ds-text-neutral-default-default">
           {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-ds-bg-neutral-default-default 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-ds-border-neutral-default-default bg-ds-bg-neutral-default-default 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"
+                appearance="border"
+                className="h-auto flex-1 justify-start"
               >
-                <TabsTrigger
-                  value="your-skills"
-                  className="data-[state=active]:bg-transparent"
-                >
+                <TabsTrigger value="your-skills">
                   {t('agents.your-skills')}
                 </TabsTrigger>
-                <TabsTrigger
-                  value="example-skills"
-                  className="data-[state=active]:bg-transparent"
-                >
+                <TabsTrigger value="example-skills">
                   {t('agents.example-skills')}
                 </TabsTrigger>
               </TabsList>
-              <div className="flex items-center gap-2">
+              <div className="gap-2 mb-2 flex items-center">
                 <SearchInput
                   variant="icon"
                   value={searchQuery}
@@ -113,7 +122,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 +145,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 +176,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 +194,7 @@ export default function Skills() {
       {/* Upload Dialog */}
       <SkillUploadDialog
         open={uploadDialogOpen}
+        mode={skillDialogMode}
         onClose={() => setUploadDialogOpen(false)}
       />
 
diff --git a/src/pages/Agents/components/SkillDeleteDialog.tsx b/src/pages/Agents/components/SkillDeleteDialog.tsx
index 1aec0f88d..924594dc3 100644
--- a/src/pages/Agents/components/SkillDeleteDialog.tsx
+++ b/src/pages/Agents/components/SkillDeleteDialog.tsx
@@ -52,7 +52,7 @@ export default function SkillDeleteDialog({
       })}
       confirmText={t('layout.delete')}
       cancelText={t('layout.cancel')}
-      confirmVariant="cuation"
+      confirmVariant="caution"
     />
   );
 }
diff --git a/src/pages/Agents/components/SkillListItem.tsx b/src/pages/Agents/components/SkillListItem.tsx
index 194fdde4d..a6c1d2b9d 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-ds-bg-neutral-subtle-default 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-ds-bg-neutral-strong-hover cursor-pointer' : ''}`}
         onClick={isClickable ? props.onAddClick : undefined}
         onKeyDown={
           isClickable
@@ -114,8 +114,12 @@ export default function SkillListItem(props: SkillListItemProps) {
         }
         aria-label={isClickable ? props.addButtonText : undefined}
       >
-        <p className="text-body-sm text-text-label">{props.message}</p>
-        {isClickable && <Plus className="h-4 w-4 text-icon-primary" />}
+        <p className="text-body-sm text-ds-text-neutral-muted-default">
+          {props.message}
+        </p>
+        {isClickable && (
+          <Plus className="h-4 w-4 text-ds-icon-neutral-default-default" />
+        )}
       </div>
     );
   }
@@ -177,17 +181,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-ds-bg-neutral-subtle-default 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-ds-text-neutral-default-default 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,24 +199,25 @@ 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}
             >
-              <MessageSquare className="h-4 w-4 text-icon-primary" />
+              <MessageSquare className="h-4 w-4 text-ds-icon-neutral-default-default" />
             </Button>
           </TooltipSimple>
           {!skill.isExample && onDelete && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon">
-                  <Ellipsis className="h-4 w-4 text-icon-primary" />
+                <Button variant="ghost" size="xs" buttonContent="icon-only">
+                  <Ellipsis className="h-4 w-4 text-ds-icon-neutral-default-default" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="w-40">
                 <DropdownMenuItem
                   onClick={onDelete}
-                  className="text-text-cuation focus:text-text-cuation"
+                  className="text-ds-text-status-error-strong-default focus:text-ds-text-status-error-strong-default"
                 >
                   <Trash2 className="h-4 w-4" />
                   {t('layout.delete')}
@@ -226,17 +231,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-ds-text-neutral-muted-default 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 +255,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-ds-border-neutral-default-default 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-ds-bg-neutral-subtle-default px-2 py-1 text-label-xs font-medium text-ds-text-neutral-default-default inline-flex items-center rounded-full transition-opacity hover:opacity-100 [&>svg]:shrink-0 ${
                 isAllAgentsSelected
-                  ? 'opacity-100 [&>svg]:text-icon-success'
+                  ? '[&>svg]:text-ds-icon-status-completed-default-default opacity-100'
                   : 'opacity-60 [&>svg]:text-inherit'
               }`}
             >
@@ -282,9 +287,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-ds-bg-neutral-subtle-default px-2 py-1 text-label-xs font-medium text-ds-text-neutral-default-default inline-flex items-center rounded-full transition-opacity hover:opacity-100 [&>svg]:shrink-0 ${
                     isSelected
-                      ? 'opacity-100 [&>svg]:text-icon-success'
+                      ? '[&>svg]:text-ds-icon-status-completed-default-default opacity-100'
                       : 'opacity-50 [&>svg]:text-inherit'
                   }`}
                 >
diff --git a/src/pages/Agents/components/SkillUploadDialog.tsx b/src/pages/Agents/components/SkillUploadDialog.tsx
index ad2ccb79b..615a71d5a 100644
--- a/src/pages/Agents/components/SkillUploadDialog.tsx
+++ b/src/pages/Agents/components/SkillUploadDialog.tsx
@@ -21,22 +21,29 @@ 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';
 
+/** Guard renderer memory when sending zip bytes to the main process. */
+const MAX_SKILL_ZIP_IMPORT_BYTES = 50 * 1024 * 1024;
+
 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();
@@ -60,6 +67,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);
@@ -71,9 +91,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([]);
@@ -110,6 +157,12 @@ export default function SkillUploadDialog({
         return;
       }
 
+      if (pendingFileBuffer.byteLength > MAX_SKILL_ZIP_IMPORT_BYTES) {
+        toast.error(t('agents.zip-import-too-large'));
+        resetConflictState();
+        return;
+      }
+
       try {
         const result = await skillImportZip(
           pendingFileBuffer,
@@ -163,6 +216,12 @@ export default function SkillUploadDialog({
         return;
       }
 
+      if (pendingFileBuffer.byteLength > MAX_SKILL_ZIP_IMPORT_BYTES) {
+        toast.error(t('agents.zip-import-too-large'));
+        resetConflictState();
+        return;
+      }
+
       try {
         const result = await skillImportZip(
           pendingFileBuffer,
@@ -215,6 +274,11 @@ export default function SkillUploadDialog({
             return;
           }
 
+          if (buffer.byteLength > MAX_SKILL_ZIP_IMPORT_BYTES) {
+            toast.error(t('agents.zip-import-too-large'));
+            return;
+          }
+
           // First, check for conflicts
           const result = await skillImportZip(buffer);
 
@@ -409,131 +473,179 @@ export default function SkillUploadDialog({
     <>
       <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
         <DialogContent
-          size="sm"
+          size={mode === 'create' ? 'md' : 'sm'}
           showCloseButton
           onClose={handleClose}
-          overlayVariant="dark"
+          overlayVariant="dimmed"
         >
-          <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-ds-text-neutral-muted-default">
+                    {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-ds-border-status-error-default-default bg-ds-bg-status-error-subtle-default'
+                      : isDragging
+                        ? 'border-ds-border-brand-default-focus bg-ds-bg-neutral-strong-default'
+                        : 'border-ds-border-neutral-default-default hover:border-ds-border-neutral-strong-default hover:bg-ds-bg-neutral-default-default'
+                  }`}
+                  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-ds-bg-status-error-subtle-default'
+                              : 'bg-ds-bg-neutral-strong-default'
                           }`}
                         >
-                          {selectedFile.name}
-                        </span>
+                          <File
+                            className={`h-4 w-4 ${
+                              uploadError
+                                ? 'text-ds-icon-status-error-default-default'
+                                : 'text-ds-icon-neutral-default-default'
+                            }`}
+                          />
+                        </div>
+                        <div className="min-w-0 flex w-full flex-col">
+                          <span
+                            className={`text-body-sm font-medium truncate ${
+                              uploadError
+                                ? 'text-ds-text-status-error-strong-default'
+                                : 'text-ds-text-neutral-default-default'
+                            }`}
+                          >
+                            {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-ds-text-status-error-strong-default'
+                            : 'text-ds-text-neutral-muted-default'
+                        }`}
+                      >
+                        {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-ds-icon-neutral-muted-default" />
+                      </div>
+                      <div className="gap-1 flex flex-col items-center text-center">
+                        <span className="text-body-sm font-medium text-ds-text-neutral-default-default">
+                          {t('agents.drag-and-drop')}
+                        </span>
+                        <span className="mt-1 text-label-sm text-ds-text-neutral-muted-default">
+                          {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-ds-border-status-error-default-default bg-ds-bg-status-error-subtle-default px-4 py-3 flex items-center border"
                   role="alert"
                 >
-                  <AlertCircle className="h-4 w-4 shrink-0 text-icon-cuation" />
-                  <span className="text-label-sm text-text-cuation">
+                  <AlertCircle className="h-4 w-4 text-ds-icon-status-error-default-default shrink-0" />
+                  <span className="text-label-sm text-ds-text-status-error-strong-default">
                     {errorMessage}
                   </span>
                 </div>
               )}
 
               {/* 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-ds-bg-neutral-default-default p-4">
+                  <span className="text-label-sm font-bold text-ds-text-neutral-default-default">
+                    {t('agents.file-requirements')}
+                  </span>
+                  <span className="mt-2 gap-2 text-label-sm text-ds-text-neutral-muted-default flex items-start">
+                    <span className="text-ds-text-neutral-muted-default">
+                      •
+                    </span>
+                    <span>{t('agents.file-requirements-detail-1')}</span>
+                  </span>
+                  <span className="mt-1 gap-2 text-label-sm text-ds-text-neutral-muted-default flex items-start">
+                    <span className="text-ds-text-neutral-muted-default">
+                      •
+                    </span>
+                    <span>{t('agents.file-requirements-detail-2')}</span>
+                  </span>
+                </div>
+              ) : null}
             </div>
           </DialogContentSection>
         </DialogContent>
@@ -549,7 +661,7 @@ export default function SkillUploadDialog({
           message="There's an existing skill with the same name. Uploading this skill will replace the existing one, which can't be restored."
           confirmText="Update and Replace"
           cancelText="Cancel"
-          confirmVariant="cuation"
+          confirmVariant="caution"
         />
       )}
     </>
diff --git a/src/pages/Agents/index.tsx b/src/pages/Agents/index.tsx
index 97d34b194..24a112217 100644
--- a/src/pages/Agents/index.tsx
+++ b/src/pages/Agents/index.tsx
@@ -14,16 +14,36 @@
 
 import VerticalNavigation, {
   type VerticalNavItem,
-} from '@/components/Navigation';
-import { useState } from 'react';
+} from '@/components/Dashboard/VerticalNav';
+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,36 +61,36 @@ 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 (
-    <div className="m-auto flex h-auto max-w-[940px] flex-col">
-      <div className="px-6 flex h-auto w-full">
-        <div className="top-20 w-40 pr-6 pt-8 sticky flex h-full flex-shrink-0 flex-grow-0 flex-col justify-between self-start">
-          <VerticalNavigation
-            items={
-              menuItems.map((menu) => ({
-                value: menu.id,
-                label: (
-                  <span className="text-body-sm font-bold">{menu.name}</span>
-                ),
-              })) as VerticalNavItem[]
-            }
-            value={activeTab}
-            onValueChange={handleTabChange}
-            className="min-h-0 gap-0 h-full w-full flex-1"
-            listClassName="w-full h-full overflow-y-auto"
-            contentClassName="hidden"
-          />
-        </div>
+    <div className="flex h-auto w-full">
+      <div className="top-20 w-40 pr-6 pt-8 sticky flex h-full flex-shrink-0 flex-grow-0 flex-col justify-between self-start">
+        <VerticalNavigation
+          items={
+            menuItems.map((menu) => ({
+              value: menu.id,
+              label: (
+                <span className="text-body-sm font-bold">{menu.name}</span>
+              ),
+            })) as VerticalNavItem[]
+          }
+          value={activeTab}
+          onValueChange={handleTabChange}
+          className="min-h-0 gap-0 h-full w-full flex-1"
+          listClassName="w-full h-full overflow-y-auto"
+          contentClassName="hidden"
+        />
+      </div>
 
-        <div className="flex h-auto w-full flex-1 flex-col">
-          <div className="gap-4 flex flex-col">
-            {activeTab === 'models' && <Models />}
-            {activeTab === 'skills' && <Skills />}
-            {activeTab === 'memory' && <Memory />}
-          </div>
+      <div className="flex h-auto w-full flex-1 flex-col">
+        <div className="gap-4 flex flex-col">
+          {activeTab === 'models' && <Models />}
+          {activeTab === 'skills' && <Skills />}
+          {activeTab === 'memory' && <Memory />}
         </div>
       </div>
     </div>
diff --git a/src/pages/Browser/CDP.tsx b/src/pages/Browser/CDP.tsx
index 683d8b2ca..c76d148a7 100644
--- a/src/pages/Browser/CDP.tsx
+++ b/src/pages/Browser/CDP.tsx
@@ -17,8 +17,9 @@ import AlertDialog from '@/components/ui/alertDialog';
 import { Button } from '@/components/ui/button';
 import { useHost } from '@/host';
 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 {
@@ -33,6 +34,7 @@ export default function CDP() {
   const host = useHost();
   const electronAPI = host?.electronAPI;
   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>(
@@ -100,7 +102,7 @@ export default function CDP() {
     }
   };
 
-  const handleOpenNewBrowser = async () => {
+  const handleOpenNewBrowser = useCallback(async () => {
     try {
       toast.loading(t('layout.launching-browser', { port: '...' }), {
         id: 'launch-browser',
@@ -125,7 +127,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('');
@@ -200,7 +210,7 @@ export default function CDP() {
   };
 
   return (
-    <div className="m-auto flex h-auto w-full flex-1 flex-col">
+    <div className="m-auto flex h-full w-full flex-1 flex-col">
       <AlertDialog
         isOpen={!!browserToRemove}
         onClose={() => setBrowserToRemove(null)}
@@ -216,87 +226,109 @@ export default function CDP() {
         })}
         confirmText={t('layout.remove')}
         cancelText={t('layout.cancel')}
-        confirmVariant="cuation"
+        confirmVariant="caution"
       />
 
-      <div className="flex w-full items-center justify-between px-6 pb-6 pt-8">
-        <div className="text-heading-sm font-bold text-text-heading">
-          {t('layout.cdp-browser-connection')}
+      {/* Header Section */}
+      <div className="px-6 pb-6 pt-8 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-ds-text-neutral-default-default">
+              {t('layout.cdp-browser-connection')}
+            </div>
+          </div>
         </div>
       </div>
 
-      <div className="flex flex-col gap-4 px-6">
-        <div className="flex items-center gap-3">
-          <Button variant="primary" size="sm" onClick={handleOpenNewBrowser}>
-            <Plus className="h-4 w-4" />
-            {t('layout.open-new-browser')}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleConnectExistingBrowser}
-          >
-            <Link2 className="h-4 w-4 text-button-tertiery-text-default" />
-            {t('layout.connect-existing-browser')}
-          </Button>
-        </div>
-
-        <div className="flex flex-col gap-2">
-          <div className="text-body-base font-bold text-text-body">
-            {t('layout.cdp-browser-pool')}
+      <div className="mb-8 gap-6 flex flex-col">
+        <div className="gap-4 rounded-2xl bg-ds-bg-neutral-default-default px-6 py-4 flex w-full flex-col items-end justify-between">
+          {/* Header Section */}
+          <div className="flex w-full flex-row items-center justify-between">
+            <div className="text-body-base font-bold text-ds-text-neutral-default-default">
+              {t('layout.cdp-browser-pool')}
+            </div>
+            <div className="gap-2 flex flex-row">
+              <Button
+                variant="primary"
+                size="sm"
+                buttonContent="text"
+                buttonRadius="lg"
+                tone="neutral"
+                textWeight="semibold"
+                onClick={handleOpenNewBrowser}
+              >
+                <Plus className="h-4 w-4" />
+                {t('layout.open-new-browser')}
+              </Button>
+              <Button
+                variant="outline"
+                textWeight="semibold"
+                buttonContent="text"
+                buttonRadius="lg"
+                tone="neutral"
+                size="sm"
+                onClick={handleConnectExistingBrowser}
+              >
+                <Link2 />
+                {t('layout.connect-existing-browser')}
+              </Button>
+            </div>
           </div>
-
-          {cdpBrowsers.length > 0 ? (
-            <div className="flex flex-col gap-2">
-              {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"
-                >
-                  <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="flex flex-col items-start justify-start">
-                      <span className="text-body-sm font-bold text-text-body">
-                        {browser.name || `Browser ${browser.port}`}
-                      </span>
-                      <span className="text-label-xs text-text-label">
-                        {t('layout.port')} {browser.port}
-                      </span>
+          {/* Content Section */}
+          <div className="gap-2 mt-4 flex min-h-[200px] w-full flex-col">
+            {cdpBrowsers.length > 0 ? (
+              <div className="gap-2 flex flex-col">
+                {cdpBrowsers.map((browser) => (
+                  <div
+                    key={browser.id}
+                    className="rounded-xl bg-ds-bg-neutral-subtle-default px-4 py-2 flex items-center justify-between"
+                  >
+                    <div className="gap-3 flex w-full flex-row items-center">
+                      <div className="h-2 w-2 bg-ds-text-success-default-default shrink-0 rounded-full" />
+                      <div className="flex flex-col items-start justify-start">
+                        <span className="text-body-sm font-bold text-ds-text-neutral-default-default">
+                          {browser.name || `Browser ${browser.port}`}
+                        </span>
+                        <span className="text-label-xs text-ds-text-neutral-muted-default">
+                          {t('layout.port')} {browser.port}
+                        </span>
+                      </div>
                     </div>
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      buttonContent="icon-only"
+                      onClick={() => setBrowserToRemove(browser)}
+                      disabled={deletingBrowser === browser.id}
+                      className="ml-3 flex-shrink-0"
+                    >
+                      <Trash2 className="h-4 w-4 text-ds-text-error-default-default" />
+                    </Button>
                   </div>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => setBrowserToRemove(browser)}
-                    disabled={deletingBrowser === browser.id}
-                    className="ml-3 flex-shrink-0"
-                  >
-                    <Trash2 className="h-4 w-4 text-text-cuation" />
-                  </Button>
+                ))}
+              </div>
+            ) : (
+              <div className="px-4 py-8 flex flex-col items-center justify-center">
+                <Globe className="mb-4 h-12 w-12 text-ds-icon-neutral-muted-default opacity-50" />
+                <div className="text-body-base font-bold text-ds-text-neutral-muted-default text-center">
+                  {t('layout.no-browsers-in-pool')}
                 </div>
-              ))}
-            </div>
-          ) : (
-            <div className="flex flex-col items-center justify-center px-4 py-8">
-              <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">
-                {t('layout.no-browsers-in-pool')}
+                <p className="text-label-xs font-medium text-ds-text-neutral-muted-default text-center">
+                  {t('layout.add-browsers-hint')}
+                </p>
               </div>
-              <p className="text-center text-label-xs font-medium text-text-label">
-                {t('layout.add-browsers-hint')}
-              </p>
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </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="text-body-base mb-2 font-bold text-text-heading">
+        <div className="bg-dialog-overlay-scrim inset-0 fixed z-50 flex items-center justify-center">
+          <div className="max-w-md rounded-xl bg-ds-bg-neutral-subtle-default p-6 shadow-lg w-full">
+            <div className="text-body-base mb-2 font-bold text-ds-text-neutral-default-default">
               {t('layout.connect-existing-browser')}
             </div>
-            <p className="mb-4 text-label-xs text-text-label">
+            <p className="mb-4 text-label-xs text-ds-text-neutral-muted-default">
               {t('layout.connect-existing-browser-description')}
             </p>
             <input
@@ -307,17 +339,17 @@ 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-ds-border-neutral-muted-disabled bg-ds-bg-neutral-default-default px-4 py-2 text-body-sm text-ds-text-neutral-default-default focus:border-ds-border-brand-default-focus w-full border outline-none"
               onKeyDown={(event) => {
                 if (event.key === 'Enter') handleCheckAndConnect();
               }}
             />
             {connectError && (
-              <p className="mt-2 text-label-xs text-text-cuation">
+              <p className="mt-2 text-label-xs text-ds-text-status-error-strong-default">
                 {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 1db8331ef..d934c0b15 100644
--- a/src/pages/Browser/Cookies.tsx
+++ b/src/pages/Browser/Cookies.tsx
@@ -224,38 +224,38 @@ export default function Cookies() {
         confirmVariant="information"
       />
 
-      <div className="flex w-full items-center justify-between px-6 pb-6 pt-8">
-        <div className="text-heading-sm font-bold text-text-heading">
+      <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
+        <div className="text-heading-sm font-bold text-ds-text-neutral-default-default">
           {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-ds-border-neutral-muted-disabled bg-ds-bg-neutral-default-default p-6 relative flex w-full flex-col border">
+          <div className="text-body-sm text-ds-text-neutral-muted-default 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="text-body-base font-bold text-text-body">
+          <div className="mt-4 gap-3 border-ds-border-neutral-default-default 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-ds-text-neutral-default-default">
                   {t('layout.cookie-domains')}
                 </div>
                 {cookieDomains.length > 0 && (
-                  <div className="rounded-lg bg-tag-fill-info px-2 text-label-sm font-bold text-text-information">
+                  <div className="rounded-lg bg-ds-bg-information-subtle-default px-2 text-label-sm font-bold text-ds-text-information-strong-default">
                     {groupDomainsByMain(cookieDomains).length}
                   </div>
                 )}
               </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-ds-text-status-error-strong-default uppercase"
                   >
                     {deletingAll
                       ? t('layout.deleting')
@@ -287,24 +287,25 @@ 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 bg-ds-bg-neutral-subtle-default px-4 py-2 flex items-center justify-between"
                   >
                     <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-ds-text-neutral-default-default truncate">
                         {group.mainDomain}
                       </span>
-                      <span className="mt-1 text-label-xs text-text-label">
+                      <span className="mt-1 text-label-xs text-ds-text-neutral-muted-default">
                         {group.totalCookies} Cookie
                         {group.totalCookies !== 1 ? 's' : ''}
                       </span>
                     </div>
                     <Button
                       variant="ghost"
-                      size="icon"
+                      size="xs"
+                      buttonContent="icon-only"
                       onClick={() =>
                         handleDeleteMainDomain(
                           group.mainDomain,
@@ -314,18 +315,18 @@ export default function Cookies() {
                       disabled={deletingDomain === group.mainDomain}
                       className="ml-3 flex-shrink-0"
                     >
-                      <Trash2 className="h-4 w-4 text-text-cuation" />
+                      <Trash2 className="h-4 w-4 text-ds-text-status-error-strong-default" />
                     </Button>
                   </div>
                 ))}
               </div>
             ) : (
-              <div className="flex flex-col items-center justify-center px-4 py-8">
-                <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="px-4 py-8 flex flex-col items-center justify-center">
+                <Cookie className="mb-4 h-12 w-12 text-ds-icon-neutral-muted-default opacity-50" />
+                <div className="text-body-base font-bold text-ds-text-neutral-muted-default 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-ds-text-neutral-muted-default text-center">
                   {t('layout.no-cookies-saved-yet-description')}
                 </p>
               </div>
@@ -333,12 +334,12 @@ export default function Cookies() {
           </div>
         </div>
 
-        <div className="w-full text-center text-label-xs text-text-label">
+        <div className="text-label-xs text-ds-text-neutral-muted-default w-full text-center">
           For more information, check out our
           <a
             href={`${SITE_URL}/privacy-policy`}
             target="_blank"
-            className="ml-1 text-text-information underline"
+            className="ml-1 text-ds-text-status-splitting-strong-default underline"
             rel="noreferrer"
           >
             {t('layout.privacy-policy')}
diff --git a/src/pages/Browser/Extension.tsx b/src/pages/Browser/Extension.tsx
index 42ca8e63d..45deb0c8b 100644
--- a/src/pages/Browser/Extension.tsx
+++ b/src/pages/Browser/Extension.tsx
@@ -20,18 +20,24 @@ export default function Extension() {
 
   return (
     <div className="m-auto flex h-auto w-full flex-1 flex-col">
-      <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-plugins')}
+      {/* Header Section */}
+      <div className="px-6 pb-6 pt-8 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-ds-text-neutral-default-default">
+              {t('layout.browser-plugins')}
+            </div>
+          </div>
         </div>
       </div>
-      <div className="gap-4 px-6 flex flex-col">
-        <div className="rounded-xl border-border-disabled bg-surface-secondary px-6 py-16 flex flex-col items-center justify-center border">
-          <Puzzle className="mb-4 h-12 w-12 text-icon-secondary opacity-50" />
-          <div className="text-body-base font-bold text-text-label text-center">
+      {/* Content Section */}
+      <div className="gap-4 mt-4 flex min-h-[200px] w-full flex-col">
+        <div className="rounded-xl border-ds-border-neutral-muted-disabled bg-ds-bg-neutral-default-default px-6 py-16 flex flex-col items-center justify-center border">
+          <Puzzle className="mb-4 h-12 w-12 text-ds-icon-neutral-muted-default opacity-50" />
+          <div className="text-body-base font-bold text-ds-text-neutral-muted-default text-center">
             {t('layout.coming-soon')}
           </div>
-          <p className="mt-2 text-label-sm text-text-label text-center">
+          <p className="mt-2 text-label-sm text-ds-text-neutral-muted-default text-center">
             {t('layout.browser-plugins-description')}
           </p>
         </div>
diff --git a/src/pages/Browser/index.tsx b/src/pages/Browser/index.tsx
index bccdb50ce..d9be455b6 100644
--- a/src/pages/Browser/index.tsx
+++ b/src/pages/Browser/index.tsx
@@ -14,16 +14,42 @@
 
 import VerticalNavigation, {
   type VerticalNavItem,
-} from '@/components/Navigation';
-import { useState } from 'react';
+} from '@/components/Dashboard/VerticalNav';
+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,36 +67,34 @@ export default function Browser() {
   ];
 
   const handleTabChange = (tabId: string) => {
-    setActiveTab(tabId);
+    if (isBrowserSection(tabId)) setActiveTab(tabId);
   };
 
   return (
-    <div className="m-auto flex h-auto max-w-[940px] flex-col">
-      <div className="px-6 flex h-auto w-full">
-        <div className="top-20 w-40 pr-6 pt-8 sticky flex h-full flex-shrink-0 flex-grow-0 flex-col justify-between self-start">
-          <VerticalNavigation
-            items={
-              menuItems.map((menu) => ({
-                value: menu.id,
-                label: (
-                  <span className="text-body-sm font-bold">{menu.name}</span>
-                ),
-              })) as VerticalNavItem[]
-            }
-            value={activeTab}
-            onValueChange={handleTabChange}
-            className="min-h-0 gap-0 h-full w-full flex-1"
-            listClassName="w-full h-full overflow-y-auto"
-            contentClassName="hidden"
-          />
-        </div>
+    <div className="flex h-auto w-full">
+      <div className="top-20 w-40 pr-6 pt-8 sticky flex h-full flex-shrink-0 flex-grow-0 flex-col justify-between self-start">
+        <VerticalNavigation
+          items={
+            menuItems.map((menu) => ({
+              value: menu.id,
+              label: (
+                <span className="text-body-sm font-bold">{menu.name}</span>
+              ),
+            })) as VerticalNavItem[]
+          }
+          value={activeTab}
+          onValueChange={handleTabChange}
+          className="min-h-0 gap-0 h-full w-full flex-1"
+          listClassName="w-full h-full overflow-y-auto"
+          contentClassName="hidden"
+        />
+      </div>
 
-        <div className="flex h-auto w-full flex-1 flex-col">
-          <div className="gap-4 flex flex-col">
-            {activeTab === 'cdp' && <CDP />}
-            {activeTab === 'extension' && <Extension />}
-            {activeTab === 'cookies' && <Cookies />}
-          </div>
+      <div className="flex h-auto w-full flex-1 flex-col">
+        <div className="gap-4 flex flex-col">
+          {activeTab === 'cdp' && <CDP />}
+          {activeTab === 'extension' && <Extension />}
+          {activeTab === 'cookies' && <Cookies />}
         </div>
       </div>
     </div>
diff --git a/src/pages/Channels/index.tsx b/src/pages/Channels/index.tsx
index 4561da164..72b8eab3a 100644
--- a/src/pages/Channels/index.tsx
+++ b/src/pages/Channels/index.tsx
@@ -14,7 +14,7 @@
 
 import VerticalNavigation, {
   type VerticalNavItem,
-} from '@/components/Navigation';
+} from '@/components/Dashboard/VerticalNav';
 import { MessageSquare } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -35,50 +35,48 @@ export default function Channels() {
   };
 
   return (
-    <div className="m-auto flex h-auto max-w-[940px] flex-col">
-      <div className="px-6 flex h-auto w-full">
-        <div className="top-20 w-40 pr-6 pt-8 sticky flex h-full flex-shrink-0 flex-grow-0 flex-col justify-between self-start">
-          <VerticalNavigation
-            items={
-              menuItems.map((menu) => ({
-                value: menu.id,
-                label: (
-                  <span className="text-body-sm font-bold">{menu.name}</span>
-                ),
-              })) as VerticalNavItem[]
-            }
-            value={activeTab}
-            onValueChange={handleTabChange}
-            className="min-h-0 gap-0 h-full w-full flex-1"
-            listClassName="w-full h-full overflow-y-auto"
-            contentClassName="hidden"
-          />
-        </div>
+    <div className="flex h-auto w-full">
+      <div className="w-40 pr-6 pt-8 flex h-full flex-shrink-0 flex-grow-0 flex-col justify-between self-start">
+        <VerticalNavigation
+          items={
+            menuItems.map((menu) => ({
+              value: menu.id,
+              label: (
+                <span className="text-body-sm font-bold">{menu.name}</span>
+              ),
+            })) as VerticalNavItem[]
+          }
+          value={activeTab}
+          onValueChange={handleTabChange}
+          className="min-h-0 gap-0 h-full w-full flex-1"
+          listClassName="w-full h-full overflow-y-auto"
+          contentClassName="hidden"
+        />
+      </div>
 
-        <div className="flex h-auto w-full flex-1 flex-col">
-          <div className="m-auto flex h-auto w-full flex-1 flex-col">
-            {/* Header Section */}
-            <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">
-                {menuItems.find((m) => m.id === activeTab)?.name ?? ''}
-              </div>
+      <div className="flex h-auto w-full flex-1 flex-col">
+        <div className="m-auto flex h-auto w-full flex-1 flex-col">
+          {/* Header Section */}
+          <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
+            <div className="text-heading-sm font-bold text-ds-text-neutral-default-default">
+              {menuItems.find((m) => m.id === activeTab)?.name ?? ''}
             </div>
+          </div>
 
-            {/* Content Section */}
-            <div className="mb-12 gap-6 flex flex-col">
-              <div className="rounded-2xl bg-surface-secondary px-6 py-4 flex w-full flex-col items-center justify-between">
-                <div className="h-16 w-16 flex items-center justify-center">
-                  <MessageSquare className="h-8 w-8 text-icon-secondary" />
-                </div>
-                <h2 className="mb-2 text-body-md font-bold text-text-heading">
-                  {t('layout.coming-soon')}
-                </h2>
-                <p className="max-w-md text-body-sm text-text-label text-center">
-                  {activeTab === 'overview'
-                    ? t('layout.channels-overview-coming-soon-description')
-                    : t('layout.channels-coming-soon-description')}
-                </p>
+          {/* Content Section */}
+          <div className="mb-12 gap-6 flex flex-col">
+            <div className="rounded-2xl bg-ds-bg-neutral-default-default px-6 py-4 flex w-full flex-col items-center justify-between">
+              <div className="h-16 w-16 flex items-center justify-center">
+                <MessageSquare className="h-8 w-8 text-ds-icon-neutral-muted-default" />
               </div>
+              <h2 className="mb-2 text-body-md font-bold text-ds-text-neutral-default-default">
+                {t('layout.coming-soon')}
+              </h2>
+              <p className="max-w-md text-body-sm text-ds-text-neutral-muted-default text-center">
+                {activeTab === 'overview'
+                  ? t('layout.channels-overview-coming-soon-description')
+                  : t('layout.channels-coming-soon-description')}
+              </p>
             </div>
           </div>
         </div>
diff --git a/src/pages/Connectors/MCP.tsx b/src/pages/Connectors/MCP.tsx
index c6d815c58..3808ab9b4 100644
--- a/src/pages/Connectors/MCP.tsx
+++ b/src/pages/Connectors/MCP.tsx
@@ -21,32 +21,85 @@ import {
   proxyFetchPost,
   proxyFetchPut,
 } from '@/api/http';
-import IntegrationList from '@/components/IntegrationList';
-import SearchInput from '@/components/SearchInput';
+import cursorIcon from '@/assets/icon/cursor.svg';
+import githubIcon from '@/assets/icon/github.svg';
+import googleCalendarIcon from '@/assets/icon/google_calendar.svg';
+import googleGmailIcon from '@/assets/icon/google_gmail.svg';
+import larkIcon from '@/assets/icon/lark.png';
+import linkedinIcon from '@/assets/icon/linkedin.svg';
+import notionIcon from '@/assets/icon/notion.svg';
+import ragIcon from '@/assets/icon/rag.svg';
+import redditIcon from '@/assets/icon/reddit.svg';
+import slackIcon from '@/assets/icon/slack.svg';
+import telegramIcon from '@/assets/icon/telegram.svg';
+import vsCodeIcon from '@/assets/icon/vs-code.svg';
+import whatsappIcon from '@/assets/icon/whatsapp.svg';
+import xIcon from '@/assets/icon/x.svg';
+import ellipseIcon from '@/assets/mcp/Ellipse-25.svg';
+import SearchInput from '@/components/Dashboard/SearchInput';
 import { Button } from '@/components/ui/button';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { getProxyBaseURL } from '@/lib';
+import { Switch } from '@/components/ui/switch';
+import { TooltipSimple } from '@/components/ui/tooltip';
+import {
+  useIntegrationManagement,
+  type IntegrationItem,
+} from '@/hooks/useIntegrationManagement';
+import { capitalizeFirstLetter, getProxyBaseURL } from '@/lib';
 import { useAuthStore } from '@/store/authStore';
 import { motion } from 'framer-motion';
-import { Plus } from 'lucide-react';
+import { ChevronDown, ChevronUp, Plus, Settings2, Wrench } 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';
-import MCPList from './components/MCPList';
+import { MCPEnvDialog } from './components/MCPEnvDialog';
 import type { MCPConfigForm, MCPUserItem } from './components/types';
 import { arrayToArgsJson, parseArgsToArray } from './components/utils';
 
 import { ConfigFile } from 'electron/main/utils/mcpConfig';
 import { toast } from 'sonner';
 
-// Filter out Search from integrations (Search is now in its own Connectors tab)
+// Filter out Search from integrations (Search has a dedicated settings area elsewhere)
 const EXCLUDED_FROM_MCP = ['Search'];
 
+const COMING_SOON_NAMES = [
+  'X(Twitter)',
+  'WhatsApp',
+  'Reddit',
+  'Github',
+] as const;
+
+const INTEGRATION_ICON_BY_KEY: Record<string, string> = {
+  notion: notionIcon,
+  slack: slackIcon,
+  'google calendar': googleCalendarIcon,
+  gmail: googleGmailIcon,
+  'google gmail': googleGmailIcon,
+  linkedin: linkedinIcon,
+  lark: larkIcon,
+  rag: ragIcon,
+  telegram: telegramIcon,
+  whatsapp: whatsappIcon,
+  x: xIcon,
+  'x(twitter)': xIcon,
+  twitter: xIcon,
+  reddit: redditIcon,
+  github: githubIcon,
+  cursor: cursorIcon,
+  'vs code': vsCodeIcon,
+  vscode: vsCodeIcon,
+};
+
+function integrationLeadingIconUrl(integrationKey: string): string | undefined {
+  return INTEGRATION_ICON_BY_KEY[integrationKey.toLowerCase().trim()];
+}
+
 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('');
@@ -77,15 +130,57 @@ export default function SettingMCP() {
   const [switchLoading, setSwitchLoading] = useState<Record<number, boolean>>(
     {}
   );
-  const [activeTab, setActiveTab] = useState<'mcp-tools' | 'your-mcp'>(
-    'mcp-tools'
-  );
   const [searchQuery, setSearchQuery] = useState('');
+  const [webCollapsed, setWebCollapsed] = useState(false);
+  const [yourCollapsed, setYourCollapsed] = useState(false);
+  const [notConnectedCollapsed, setNotConnectedCollapsed] = useState(false);
+  const [selected, setSelected] = useState<
+    { type: 'web'; key: string } | { type: 'your'; id: number } | null
+  >(null);
+  const [showEnvConfig, setShowEnvConfig] = useState(false);
+  const [activeMcp, setActiveMcp] = useState<any | null>(null);
+  const [folderHint, setFolderHint] = useState<'web' | 'your' | null>(null);
 
   // add: integrations list
   const [integrations, setIntegrations] = useState<any[]>([]);
   const [isLoadingIntegrations, setIsLoadingIntegrations] = useState(true);
-  const [refreshKey, setRefreshKey] = useState<number>(0);
+
+  const integrationItems = integrations as IntegrationItem[];
+  const {
+    installed,
+    fetchInstalled,
+    saveEnvAndConfig,
+    handleUninstall,
+    createMcpFromItem,
+  } = useIntegrationManagement(integrationItems);
+
+  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') {
+      setFolderHint('web');
+      setWebCollapsed(false);
+      setNotConnectedCollapsed(false);
+      setYourCollapsed(true);
+      next.delete('connectorSection');
+    }
+    if (section === 'your-mcp') {
+      setFolderHint('your');
+      setYourCollapsed(false);
+      setWebCollapsed(true);
+      setNotConnectedCollapsed(true);
+      next.delete('connectorSection');
+    }
+    setSearchParams(next, { replace: true });
+  }, [searchParams, setSearchParams]);
 
   // Filter integrations (MCP & Tools) by search
   const filteredIntegrations = useMemo(() => {
@@ -111,6 +206,16 @@ export default function SettingMCP() {
     );
   }, [items, searchQuery]);
 
+  const webConnected = useMemo(
+    () => filteredIntegrations.filter((i) => installed[i.key]),
+    [filteredIntegrations, installed]
+  );
+
+  const webNotConnected = useMemo(
+    () => filteredIntegrations.filter((i) => !installed[i.key]),
+    [filteredIntegrations, installed]
+  );
+
   // get list
   const fetchList = useCallback(() => {
     setIsLoading(true);
@@ -167,8 +272,7 @@ export default function SettingMCP() {
                       });
                       // Refresh the integrations list to show the installed state
                       fetchList();
-                      // Force refresh IntegrationList component
-                      setRefreshKey((prev) => prev + 1);
+                      void fetchInstalled();
                     } else {
                       toast.error(
                         response.error ||
@@ -234,8 +338,7 @@ export default function SettingMCP() {
                       }
                       // Refresh the integrations list to show the installed state
                       fetchList();
-                      // Force refresh IntegrationList component
-                      setRefreshKey((prev) => prev + 1);
+                      void fetchInstalled();
                     } else if (response.status === 'authorizing') {
                       // Authorization in progress - start polling for completion
                       toast.info(
@@ -290,7 +393,7 @@ export default function SettingMCP() {
                                 )
                               );
                               fetchList();
-                              setRefreshKey((prev) => prev + 1);
+                              void fetchInstalled();
                             }
                           } else if (
                             statusResp?.status === 'failed' ||
@@ -363,7 +466,7 @@ export default function SettingMCP() {
       .finally(() => {
         setIsLoadingIntegrations(false);
       });
-  }, [fetchList, t]);
+  }, [fetchList, t, fetchInstalled]);
 
   useEffect(() => {
     fetchList();
@@ -382,6 +485,406 @@ export default function SettingMCP() {
     }
   };
 
+  const onCloseEnv = useCallback(() => {
+    setShowEnvConfig(false);
+    setActiveMcp(null);
+  }, []);
+
+  const handleWebInstall = useCallback(
+    async (item: IntegrationItem) => {
+      if (item.key === 'Lark' || item.key === 'RAG') {
+        const mcp = createMcpFromItem(item, item.key === 'Lark' ? 15 : 16);
+        setActiveMcp(mcp);
+        setShowEnvConfig(true);
+        return;
+      }
+
+      if (item.key === 'Google Calendar') {
+        const mcp = createMcpFromItem(item, 14);
+        setActiveMcp(mcp);
+        setShowEnvConfig(true);
+        return;
+      }
+
+      if (item.key === 'LinkedIn') {
+        const baseUrl = getProxyBaseURL();
+        window.open(
+          `${baseUrl}/api/v1/oauth/linkedin/login`,
+          '_blank',
+          'width=600,height=700'
+        );
+        return;
+      }
+
+      if (installed[item.key]) return;
+      await item.onInstall();
+      await fetchInstalled();
+      fetchList();
+    },
+    [installed, createMcpFromItem, fetchInstalled, fetchList]
+  );
+
+  const onEnvConnect = useCallback(
+    async (mcp: any) => {
+      await fetchInstalled();
+      await Promise.all(
+        Object.keys(mcp.install_command.env).map(async (k) => {
+          return saveEnvAndConfig(mcp.key, k, mcp.install_command.env[k]);
+        })
+      );
+
+      if (mcp.key === 'Google Calendar') {
+        const calendarItem = integrations.find(
+          (it: IntegrationItem) => it.key === 'Google Calendar'
+        );
+        try {
+          if (calendarItem?.onInstall) await calendarItem.onInstall();
+          else await fetchPost('/install/tool/google_calendar');
+        } catch (_) {}
+      }
+
+      await fetchInstalled();
+      fetchList();
+      onCloseEnv();
+    },
+    [fetchInstalled, saveEnvAndConfig, integrations, fetchList, onCloseEnv]
+  );
+
+  const handleOpenWebConfig = useCallback(
+    (item: IntegrationItem) => {
+      if (item.env_vars?.length > 0) {
+        const mcp = createMcpFromItem(item, -1);
+        setActiveMcp(mcp);
+        setShowEnvConfig(true);
+      }
+    },
+    [createMcpFromItem]
+  );
+
+  const renderSidebarRow = (
+    tabId: string,
+    label: string,
+    kind: 'web' | 'your',
+    isActive: boolean,
+    onSelect: () => void,
+    webInstalled?: boolean,
+    yourEnabled?: boolean,
+    integrationKey?: string
+  ) => {
+    const assetUrl =
+      kind === 'web' && integrationKey
+        ? integrationLeadingIconUrl(integrationKey)
+        : undefined;
+
+    return (
+      <button
+        key={tabId}
+        type="button"
+        onClick={onSelect}
+        className={`rounded-xl px-3 py-2 flex w-full items-center justify-between transition-all duration-200 ${
+          isActive
+            ? 'bg-ds-bg-neutral-subtle-default hover:bg-ds-bg-neutral-subtle-default'
+            : 'bg-fill-fill-transparent hover:bg-fill-fill-transparent-hover'
+        } `}
+      >
+        <div className="gap-3 min-w-0 flex items-center justify-center">
+          {kind === 'web' ? (
+            assetUrl ? (
+              <img
+                src={assetUrl}
+                alt=""
+                className="h-5 w-5 shrink-0 object-contain"
+              />
+            ) : (
+              <img
+                src={ellipseIcon}
+                alt=""
+                className="h-3 w-3 shrink-0"
+                style={{
+                  filter: webInstalled
+                    ? 'grayscale(0%) brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(81deg) brightness(95%) contrast(92%)'
+                    : 'none',
+                }}
+              />
+            )
+          ) : (
+            <Wrench className="h-5 w-5 text-ds-icon-neutral-muted-default shrink-0" />
+          )}
+          <span
+            className={`text-body-sm font-medium truncate text-left ${isActive ? 'text-ds-text-neutral-default-default' : 'text-ds-text-neutral-muted-default'}`}
+          >
+            {label}
+          </span>
+        </div>
+        {kind === 'your' && yourEnabled ? (
+          <div className="m-1 h-2 w-2 bg-ds-text-success-default-default shrink-0 rounded-full" />
+        ) : null}
+      </button>
+    );
+  };
+
+  useEffect(() => {
+    if (!folderHint) return;
+    if (folderHint === 'your') {
+      if (isLoading) return;
+      if (filteredItems.length > 0) {
+        setSelected({ type: 'your', id: filteredItems[0].id });
+      }
+      setFolderHint(null);
+      return;
+    }
+    if (folderHint === 'web') {
+      if (isLoadingIntegrations) return;
+      const pick = webConnected[0] || webNotConnected[0];
+      if (pick) setSelected({ type: 'web', key: pick.key });
+      setFolderHint(null);
+    }
+  }, [
+    folderHint,
+    filteredItems,
+    webConnected,
+    webNotConnected,
+    isLoading,
+    isLoadingIntegrations,
+  ]);
+
+  useEffect(() => {
+    if (!selected) return;
+    if (selected.type === 'web') {
+      if (!integrations.some((i) => i.key === selected.key)) {
+        setSelected(null);
+      }
+      return;
+    }
+    if (!items.some((i) => i.id === selected.id)) {
+      setSelected(null);
+    }
+  }, [selected, integrations, items]);
+
+  useEffect(() => {
+    if (selected || isLoadingIntegrations || isLoading || folderHint) return;
+    const pick = webConnected[0] || filteredItems[0] || webNotConnected[0];
+    if (!pick) return;
+    if ('mcp_name' in pick) {
+      setSelected({ type: 'your', id: pick.id });
+    } else {
+      setSelected({ type: 'web', key: pick.key });
+    }
+  }, [
+    selected,
+    webConnected,
+    webNotConnected,
+    filteredItems,
+    isLoadingIntegrations,
+    isLoading,
+    folderHint,
+  ]);
+
+  const renderConnectionPanel = () => {
+    if (!selected) {
+      return (
+        <div className="text-body-md text-ds-text-neutral-muted-default py-16 text-center">
+          {t('setting.mcp-select-connection')}
+        </div>
+      );
+    }
+
+    if (selected.type === 'web') {
+      const item = integrations.find((i) => i.key === selected.key) as
+        | IntegrationItem
+        | undefined;
+      if (!item) return null;
+      const isConn = !!installed[item.key];
+      const isComingSoon = (COMING_SOON_NAMES as readonly string[]).includes(
+        item.name
+      );
+      const headerAssetUrl = integrationLeadingIconUrl(item.key);
+
+      return (
+        <div className="rounded-2xl bg-ds-bg-neutral-subtle-default flex w-full flex-col">
+          <div className="mx-6 border-ds-border-neutral-default-default gap-4 py-4 flex flex-row flex-wrap items-center justify-between border-x-0 border-t-0 border-b-[0.5px] border-solid">
+            <div className="gap-2 min-w-0 flex items-center">
+              {headerAssetUrl ? (
+                <div className="bg-ds-bg-neutral-default-default h-7 w-7 rounded-lg p-1 flex shrink-0 items-center justify-center">
+                  <img
+                    src={headerAssetUrl}
+                    alt=""
+                    className="h-5 w-5 object-contain"
+                  />
+                </div>
+              ) : (
+                <div className="bg-ds-bg-neutral-default-default h-7 w-7 rounded-lg p-1 flex shrink-0 items-center justify-center">
+                  <img
+                    src={ellipseIcon}
+                    alt=""
+                    className="h-3 w-3"
+                    style={{
+                      filter: isConn
+                        ? 'grayscale(0%) brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(81deg) brightness(95%) contrast(92%)'
+                        : 'none',
+                    }}
+                  />
+                </div>
+              )}
+              <div className="text-body-base min-w-0 font-bold text-ds-text-neutral-default-default truncate">
+                {item.name}
+              </div>
+            </div>
+            <div className="gap-2 flex shrink-0 flex-wrap items-center justify-end">
+              <Button
+                type="button"
+                disabled={isComingSoon}
+                variant={
+                  isComingSoon ? 'ghost' : isConn ? 'outline' : 'primary'
+                }
+                size="sm"
+                onClick={() => {
+                  if (isComingSoon) return;
+                  if (isConn) void handleUninstall(item);
+                  else void handleWebInstall(item);
+                }}
+              >
+                {isComingSoon
+                  ? t('setting.coming-soon')
+                  : isConn
+                    ? t('setting.disconnect')
+                    : t('setting.connect')}
+              </Button>
+              {item.env_vars?.length > 0 ? (
+                <TooltipSimple content={t('setting.setting')}>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    buttonContent="icon-only"
+                    aria-label={t('setting.setting')}
+                    onClick={() => handleOpenWebConfig(item)}
+                  >
+                    <Settings2 className="h-4 w-4" />
+                  </Button>
+                </TooltipSimple>
+              ) : null}
+            </div>
+          </div>
+          <div className="gap-3 px-6 py-4 flex flex-col">
+            {typeof item.desc === 'string' ? (
+              <span className="text-body-sm text-ds-text-neutral-muted-default whitespace-pre-wrap">
+                {item.desc || '—'}
+              </span>
+            ) : (
+              <span className="text-body-sm text-ds-text-neutral-muted-default">
+                {item.desc ?? '—'}
+              </span>
+            )}
+            <div className="text-body-sm font-bold text-ds-text-neutral-default-default">
+              {t('setting.tools')}
+            </div>
+            <div className="gap-2 flex flex-col">
+              {item.env_vars && item.env_vars.length > 0 ? (
+                item.env_vars.map((ev) => (
+                  <div
+                    key={ev}
+                    className="text-body-sm text-ds-text-neutral-default-default rounded-lg bg-ds-bg-neutral-default-default px-4 py-3"
+                  >
+                    {ev}
+                  </div>
+                ))
+              ) : (
+                <div className="text-body-sm text-ds-text-neutral-muted-default rounded-lg bg-ds-bg-neutral-default-default px-4 py-3">
+                  {isConn
+                    ? t('setting.configured')
+                    : t('setting.not-configured')}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    const userItem = items.find((i) => i.id === selected.id);
+    if (!userItem) return null;
+    const enabled = userItem.status === 1;
+    const argRows = userItem.args ? parseArgsToArray(userItem.args) : [];
+
+    return (
+      <div className="rounded-2xl bg-ds-bg-neutral-subtle-default flex w-full flex-col">
+        <div className="mx-6 border-ds-border-neutral-default-default gap-4 py-4 flex flex-row flex-wrap items-center justify-between border-x-0 border-t-0 border-b-[0.5px] border-solid">
+          <div className="gap-2 min-w-0 flex items-center">
+            <Wrench className="h-7 w-7 text-ds-icon-neutral-muted-default bg-ds-bg-neutral-default-default p-1 rounded-lg shrink-0" />
+            <div className="text-body-base min-w-0 font-bold text-ds-text-neutral-default-default truncate">
+              {capitalizeFirstLetter(userItem.mcp_name || '')}
+            </div>
+          </div>
+          <div className="gap-2 flex shrink-0 flex-wrap items-center justify-end">
+            <Switch
+              size="default"
+              checked={enabled}
+              disabled={!!switchLoading[userItem.id]}
+              onCheckedChange={(checked) =>
+                void handleSwitch(userItem.id, checked)
+              }
+              aria-label={enabled ? t('setting.disable') : t('setting.enable')}
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => setDeleteTarget(userItem)}
+            >
+              {t('setting.disconnect')}
+            </Button>
+            <TooltipSimple content={t('setting.setting')}>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                buttonContent="icon-only"
+                aria-label={t('setting.setting')}
+                onClick={() => setShowConfig(userItem)}
+              >
+                <Settings2 className="h-4 w-4" />
+              </Button>
+            </TooltipSimple>
+          </div>
+        </div>
+        <div className="gap-3 px-6 py-4 flex flex-col">
+          <span className="text-body-sm text-ds-text-neutral-muted-default whitespace-pre-wrap">
+            {userItem.mcp_desc || '—'}
+          </span>
+          <div className="text-body-sm font-bold text-ds-text-neutral-default-default">
+            {t('setting.tools')}
+          </div>
+          <div className="gap-2 flex flex-col">
+            {userItem.command ? (
+              <div className="text-body-sm font-mono text-ds-text-neutral-default-default rounded-lg bg-ds-bg-neutral-default-default px-4 py-3 break-all">
+                {userItem.command}
+              </div>
+            ) : null}
+            {argRows.map((arg, idx) => (
+              <div
+                key={`${idx}-${arg}`}
+                className="text-body-sm font-mono text-ds-text-neutral-default-default rounded-lg bg-ds-bg-neutral-default-default px-4 py-3 break-all"
+              >
+                {arg}
+              </div>
+            ))}
+            {!userItem.command && argRows.length === 0 && userItem.mcp_key ? (
+              <div className="text-body-sm text-ds-text-neutral-default-default rounded-lg bg-ds-bg-neutral-default-default px-4 py-3 break-all">
+                {userItem.mcp_key}
+              </div>
+            ) : null}
+            {!userItem.command && argRows.length === 0 && !userItem.mcp_key ? (
+              <div className="text-body-sm text-ds-text-neutral-muted-default rounded-lg bg-ds-bg-neutral-default-default px-4 py-3">
+                —
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   // config dialog
   useEffect(() => {
     if (showConfig) {
@@ -521,6 +1024,9 @@ export default function SettingMCP() {
       checkAgentTool(deleteTarget.mcp_name);
       await proxyFetchDelete(`/api/v1/mcp/users/${deleteTarget.id}`);
       await mcpRemove(deleteTarget.mcp_key);
+      if (selected?.type === 'your' && selected.id === deleteTarget.id) {
+        setSelected(null);
+      }
       setDeleteTarget(null);
       fetchList();
     } finally {
@@ -530,74 +1036,234 @@ 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="text-heading-sm font-bold text-text-heading">
-          {t('setting.mcp-and-tools')}
+      <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
+        <div className="text-heading-sm font-bold text-ds-text-neutral-default-default">
+          {t('setting.mcps-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">
-          <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">
-              <TabsList
-                variant="outline"
-                className="h-auto flex-1 justify-start border-0 bg-transparent"
+      <div className="mb-12 gap-6 flex flex-col">
+        <div className="rounded-2xl bg-ds-bg-neutral-default-default px-3 py-2 flex w-full flex-col items-start justify-between">
+          <div className="border-ds-border-neutral-default-default bg-ds-bg-neutral-default-default mb-4 gap-3 px-3 py-2 sticky top-[80px] z-10 flex w-full flex-wrap items-center justify-between border-x-0 border-t-0 border-b-[0.5px] border-solid">
+            <div className="text-body-base font-bold text-ds-text-neutral-default-default">
+              {t('setting.connectors')}
+            </div>
+            <div className="gap-2 flex items-center">
+              <SearchInput
+                variant="icon"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder={t('setting.search-mcp')}
+              />
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={() => setShowAdd(true)}
               >
-                <TabsTrigger
-                  value="mcp-tools"
-                  className="data-[state=active]:bg-transparent"
-                >
-                  {t('setting.mcp-and-tools')}
-                </TabsTrigger>
-                <TabsTrigger
-                  value="your-mcp"
-                  className="data-[state=active]:bg-transparent"
-                >
-                  {t('setting.your-own-mcps')}
-                </TabsTrigger>
-              </TabsList>
-              <div className="flex items-center gap-2">
-                <SearchInput
-                  variant="icon"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  placeholder={t('setting.search-mcp')}
-                />
-                <Button
-                  variant="primary"
-                  size="sm"
-                  onClick={() => setShowAdd(true)}
-                >
-                  <Plus className="h-4 w-4" />
-                  {t('setting.add-mcp-server')}
-                </Button>
+                <Plus className="h-4 w-4" />
+                {t('setting.mcp-add')}
+              </Button>
+            </div>
+          </div>
+
+          <div className="px-3 gap-4 flex w-full flex-row items-start justify-between">
+            <div className="-ml-2 mr-4 rounded-2xl bg-ds-bg-neutral-default-default h-full w-[240px] shrink-0">
+              <div className="gap-4 flex flex-col">
+                <div className="gap-1 flex flex-col">
+                  <button
+                    type="button"
+                    onClick={() => setWebCollapsed(!webCollapsed)}
+                    className="rounded-lg px-3 py-2 hover:bg-ds-bg-neutral-default-default flex items-center justify-between bg-transparent transition-colors"
+                  >
+                    <div className="text-body-sm font-bold text-ds-text-neutral-default-default">
+                      {t('setting.mcp-sidebar-web')}
+                    </div>
+                    {webCollapsed ? (
+                      <ChevronDown className="h-4 w-4 text-ds-text-neutral-muted-default" />
+                    ) : (
+                      <ChevronUp className="h-4 w-4 text-ds-text-neutral-muted-default" />
+                    )}
+                  </button>
+                  <div
+                    className={`ease-in-out overflow-hidden transition-all duration-300 ${
+                      webCollapsed
+                        ? 'max-h-0 opacity-0'
+                        : 'max-h-[2000px] opacity-100'
+                    }`}
+                  >
+                    {isLoadingIntegrations ? (
+                      <div className="gap-2 px-1 flex flex-col">
+                        {[1, 2, 3].map((i) => (
+                          <div
+                            key={i}
+                            className="h-9 rounded-xl bg-ds-bg-neutral-strong-default"
+                          />
+                        ))}
+                      </div>
+                    ) : webConnected.length === 0 ? (
+                      <div className="text-body-xs text-ds-text-neutral-muted-default px-3 py-1">
+                        {searchQuery.trim()
+                          ? t('dashboard.no-results')
+                          : integrations.length === 0
+                            ? t('setting.no-mcp-servers')
+                            : t('setting.not-configured')}
+                      </div>
+                    ) : (
+                      webConnected.map((item) =>
+                        renderSidebarRow(
+                          `web-${item.key}`,
+                          item.name,
+                          'web',
+                          selected?.type === 'web' && selected.key === item.key,
+                          () => setSelected({ type: 'web', key: item.key }),
+                          !!installed[item.key],
+                          undefined,
+                          item.key
+                        )
+                      )
+                    )}
+                  </div>
+                </div>
+
+                <div className="gap-1 flex flex-col">
+                  <button
+                    type="button"
+                    onClick={() => setYourCollapsed(!yourCollapsed)}
+                    className="rounded-lg px-3 py-2 hover:bg-ds-bg-neutral-default-default flex items-center justify-between bg-transparent transition-colors"
+                  >
+                    <div className="text-body-sm font-bold text-ds-text-neutral-default-default">
+                      {t('setting.your-own-mcps')}
+                    </div>
+                    {yourCollapsed ? (
+                      <ChevronDown className="h-4 w-4 text-ds-text-neutral-muted-default" />
+                    ) : (
+                      <ChevronUp className="h-4 w-4 text-ds-text-neutral-muted-default" />
+                    )}
+                  </button>
+                  <div
+                    className={`ease-in-out overflow-hidden transition-all duration-300 ${
+                      yourCollapsed
+                        ? 'max-h-0 opacity-0'
+                        : 'max-h-[2000px] opacity-100'
+                    }`}
+                  >
+                    {isLoading ? (
+                      <div className="text-body-xs text-ds-text-neutral-muted-default px-3 py-1">
+                        {t('setting.loading')}
+                      </div>
+                    ) : error ? (
+                      <div className="text-body-xs text-ds-text-status-error-strong-default px-3 py-1">
+                        {error}
+                      </div>
+                    ) : filteredItems.length === 0 ? (
+                      <div className="gap-2 px-3 py-2 flex flex-col items-start">
+                        <p className="text-body-xs text-ds-text-neutral-muted-default">
+                          {items.length === 0
+                            ? t('setting.no-mcp-servers')
+                            : t('dashboard.no-results')}
+                        </p>
+                        {items.length === 0 ? (
+                          <Button
+                            variant="primary"
+                            size="sm"
+                            onClick={() => setShowAdd(true)}
+                          >
+                            <Plus className="h-4 w-4" />
+                            {t('setting.mcp-add')}
+                          </Button>
+                        ) : null}
+                      </div>
+                    ) : (
+                      filteredItems.map((item) =>
+                        renderSidebarRow(
+                          `your-${item.id}`,
+                          capitalizeFirstLetter(item.mcp_name || ''),
+                          'your',
+                          selected?.type === 'your' && selected.id === item.id,
+                          () => setSelected({ type: 'your', id: item.id }),
+                          undefined,
+                          item.status === 1
+                        )
+                      )
+                    )}
+                  </div>
+                </div>
+
+                <div className="gap-1 flex flex-col">
+                  <button
+                    type="button"
+                    onClick={() =>
+                      setNotConnectedCollapsed(!notConnectedCollapsed)
+                    }
+                    className="rounded-lg px-3 py-2 hover:bg-ds-bg-neutral-default-default flex items-center justify-between bg-transparent transition-colors"
+                  >
+                    <div className="text-body-sm font-bold text-ds-text-neutral-default-default">
+                      {t('setting.mcp-sidebar-not-connected')}
+                    </div>
+                    {notConnectedCollapsed ? (
+                      <ChevronDown className="h-4 w-4 text-ds-text-neutral-muted-default" />
+                    ) : (
+                      <ChevronUp className="h-4 w-4 text-ds-text-neutral-muted-default" />
+                    )}
+                  </button>
+                  <div
+                    className={`ease-in-out overflow-hidden transition-all duration-300 ${
+                      notConnectedCollapsed
+                        ? 'max-h-0 opacity-0'
+                        : 'max-h-[2000px] opacity-100'
+                    }`}
+                  >
+                    {isLoadingIntegrations ? (
+                      <div className="gap-2 px-1 flex flex-col">
+                        {[1, 2, 3].map((i) => (
+                          <div
+                            key={i}
+                            className="h-9 rounded-xl bg-ds-bg-neutral-strong-default"
+                          />
+                        ))}
+                      </div>
+                    ) : webNotConnected.length === 0 ? (
+                      <div className="text-body-xs text-ds-text-neutral-muted-default px-3 py-1">
+                        {searchQuery.trim()
+                          ? t('dashboard.no-results')
+                          : t('setting.configured')}
+                      </div>
+                    ) : (
+                      webNotConnected.map((item) =>
+                        renderSidebarRow(
+                          `nc-${item.key}`,
+                          item.name,
+                          'web',
+                          selected?.type === 'web' && selected.key === item.key,
+                          () => setSelected({ type: 'web', key: item.key }),
+                          !!installed[item.key],
+                          undefined,
+                          item.key
+                        )
+                      )
+                    )}
+                  </div>
+                </div>
               </div>
             </div>
-            <TabsContent value="mcp-tools" className="mt-4">
-              {isLoadingIntegrations ? (
-                <div className="flex w-full flex-col items-start justify-start gap-4">
+
+            <div className="min-w-0 sticky top-[136px] z-10 flex-1">
+              {isLoadingIntegrations && !selected ? (
+                <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-ds-bg-neutral-strong-default 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="h-5 w-32 rounded-md bg-surface-hover-subtle" />
-                          <div className="h-4 w-4 rounded 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-ds-bg-neutral-default-hover rounded-full" />
+                          <div className="h-5 w-32 rounded-md bg-ds-bg-neutral-default-hover" />
                         </div>
-                        <div className="h-9 w-20 rounded-lg bg-surface-hover-subtle" />
+                        <div className="h-9 w-20 rounded-lg bg-ds-bg-neutral-default-hover" />
                       </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={{
@@ -609,69 +1275,21 @@ export default function SettingMCP() {
                     </div>
                   ))}
                 </div>
-              ) : filteredIntegrations.length === 0 ? (
-                <div className="py-8 text-center text-text-label">
-                  {searchQuery.trim()
-                    ? t('dashboard.no-results')
-                    : t('setting.no-mcp-servers')}
-                </div>
               ) : (
-                <IntegrationList
-                  key={refreshKey}
-                  variant="manage"
-                  items={filteredIntegrations}
-                  showConfigButton={false}
-                  showInstallButton={true}
-                />
-              )}
-            </TabsContent>
-            <TabsContent value="your-mcp" className="mt-4">
-              {isLoading && (
-                <div className="py-8 text-center text-text-label">
-                  {t('setting.loading')}
-                </div>
-              )}
-              {error && (
-                <div className="py-8 text-center text-text-error">{error}</div>
-              )}
-              {!isLoading && !error && items.length === 0 && (
-                <div className="flex flex-col items-center justify-center gap-4 py-12">
-                  <p className="text-body-md text-text-label">
-                    {t('setting.no-mcp-servers')}
-                  </p>
-                  <Button
-                    variant="primary"
-                    size="sm"
-                    onClick={() => setShowAdd(true)}
-                  >
-                    <Plus className="h-4 w-4" />
-                    {t('setting.add-mcp-server')}
-                  </Button>
-                </div>
+                renderConnectionPanel()
               )}
-              {!isLoading &&
-                !error &&
-                items.length > 0 &&
-                filteredItems.length === 0 && (
-                  <div className="py-8 text-center text-text-label">
-                    {t('dashboard.no-results')}
-                  </div>
-                )}
-              {!isLoading && !error && filteredItems.length > 0 && (
-                <MCPList
-                  items={filteredItems}
-                  onSetting={setShowConfig}
-                  onDelete={setDeleteTarget}
-                  onSwitch={handleSwitch}
-                  switchLoading={switchLoading}
-                />
-              )}
-            </TabsContent>
-          </Tabs>
+            </div>
+          </div>
         </div>
       </div>
 
-      {/* Dialogs */}
+      <MCPEnvDialog
+        showEnvConfig={showEnvConfig}
+        onClose={onCloseEnv}
+        onConnect={onEnvConnect}
+        activeMcp={activeMcp}
+      />
+
       <MCPConfigDialog
         open={!!showConfig}
         form={configForm}
diff --git a/src/pages/Connectors/Search.tsx b/src/pages/Connectors/Search.tsx
index 307aea75b..c32b69228 100644
--- a/src/pages/Connectors/Search.tsx
+++ b/src/pages/Connectors/Search.tsx
@@ -162,26 +162,26 @@ export default function Search() {
   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="text-heading-sm font-bold text-text-heading">
+      <div className="px-6 pb-6 pt-8 flex w-full items-center justify-between">
+        <div className="text-heading-sm font-bold text-ds-text-neutral-default-default">
           {t('setting.search-engine')}
         </div>
       </div>
 
       {/* Content Section - Google configuration */}
       <div className="mb-12">
-        <div className="rounded-2xl bg-surface-secondary px-6 py-4">
+        <div className="rounded-2xl bg-ds-bg-neutral-default-default px-6 py-4">
           <div className="flex flex-col">
-            <div className="flex flex-col gap-2 pb-2">
+            <div className="gap-2 pb-2 flex flex-col">
               <div className="text-label-lg font-bold">
                 {selectedProvider.name}
               </div>
-              <div className="text-label-sm font-normal text-text-label">
+              <div className="text-label-sm font-normal text-ds-text-neutral-muted-default">
                 {selectedProvider.description}
               </div>
             </div>
 
-            <div className="flex-1 pt-4">
+            <div className="pt-4 flex-1">
               {selectedProvider.requiresApiKey ? (
                 <div className="space-y-4">
                   {selectedProvider.fields.map((field) => (
@@ -210,8 +210,8 @@ export default function Search() {
                   ))}
                 </div>
               ) : (
-                <div className="rounded-lg bg-surface-primary p-4">
-                  <p className="text-label-sm text-text-label">
+                <div className="rounded-lg bg-ds-bg-neutral-subtle-default p-4">
+                  <p className="text-label-sm text-ds-text-neutral-muted-default">
                     {selectedProvider.id === 'wiki'
                       ? t(
                           'setting.this-service-is-public-and-does-not-require-credentials'
@@ -223,7 +223,7 @@ export default function Search() {
             </div>
 
             {!selectedProvider.enabledByDefault && (
-              <div className="flex items-center justify-end gap-3 pt-4">
+              <div className="gap-3 pt-4 flex items-center justify-end">
                 <Button size="sm" onClick={saveConfiguration} disabled={saving}>
                   {saving
                     ? t('setting.saving')
diff --git a/src/pages/Connectors/components/CookieManager.tsx b/src/pages/Connectors/components/CookieManager.tsx
index a5dc19358..f288b454f 100644
--- a/src/pages/Connectors/components/CookieManager.tsx
+++ b/src/pages/Connectors/components/CookieManager.tsx
@@ -113,14 +113,14 @@ export default function CookieManager() {
   };
 
   return (
-    <div className="rounded-2xl bg-surface-secondary px-6 py-4">
+    <div className="rounded-2xl bg-ds-bg-neutral-default-default px-6 py-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <div className="gap-2 text-base font-bold leading-12 text-text-primary flex items-center">
+          <div className="gap-2 text-base font-bold leading-12 text-ds-text-neutral-default-default flex items-center">
             <Cookie className="h-5 w-5" />
             {t('setting.cookie-manager')}
           </div>
-          <div className="mt-1 text-sm leading-13 text-text-secondary">
+          <div className="mt-1 text-sm leading-13 text-ds-text-neutral-muted-default">
             {t('setting.cookie-manager-description')}
           </div>
         </div>
@@ -153,7 +153,7 @@ export default function CookieManager() {
 
       {/* Search Bar */}
       <div className="mb-4 relative">
-        <Search className="left-3 h-4 w-4 text-text-tertiary absolute top-1/2 -translate-y-1/2 transform" />
+        <Search className="left-3 h-4 w-4 text-ds-text-neutral-muted-default absolute top-1/2 -translate-y-1/2 transform" />
         <Input
           type="text"
           placeholder={t('setting.search-domains')}
@@ -166,12 +166,12 @@ export default function CookieManager() {
       {/* Cookie List */}
       <div className="space-y-2">
         {isLoading ? (
-          <div className="py-8 text-text-secondary text-center">
+          <div className="py-8 text-ds-text-neutral-muted-default text-center">
             <RefreshCw className="mb-2 h-6 w-6 animate-spin mx-auto" />
             {t('setting.loading-cookies')}
           </div>
         ) : filteredDomains.length === 0 ? (
-          <div className="py-8 text-text-secondary text-center">
+          <div className="py-8 text-ds-text-neutral-muted-default text-center">
             <Cookie className="mb-3 h-12 w-12 mx-auto opacity-30" />
             <div className="mb-1 text-base font-medium">
               {domains.length === 0
@@ -188,13 +188,13 @@ export default function CookieManager() {
           filteredDomains.map((item) => (
             <div
               key={item.domain}
-              className="rounded-lg border-border-primary bg-surface-primary p-3 hover:border-border-secondary flex items-center justify-between border transition-colors"
+              className="rounded-lg border-ds-border-neutral-strong-default bg-ds-bg-neutral-subtle-default p-3 hover:border-ds-border-neutral-default-default flex items-center justify-between border transition-colors"
             >
               <div className="min-w-0 flex-1">
-                <div className="font-medium text-text-primary truncate">
+                <div className="font-medium text-ds-text-neutral-default-default truncate">
                   {item.domain}
                 </div>
-                <div className="mt-1 gap-3 text-xs text-text-tertiary flex items-center">
+                <div className="mt-1 gap-3 text-xs text-ds-text-neutral-muted-default flex items-center">
                   <span>
                     {t('setting.cookies-count', { count: item.cookie_count })}
                   </span>
diff --git a/src/pages/Connectors/components/MCPAddDialog.tsx b/src/pages/Connectors/components/MCPAddDialog.tsx
index 5bc890049..a09e59301 100644
--- a/src/pages/Connectors/components/MCPAddDialog.tsx
+++ b/src/pages/Connectors/components/MCPAddDialog.tsx
@@ -110,7 +110,7 @@ export default function MCPAddDialog({
       >
         <DialogHeader title={t('setting.add-your-agent')} />
         <DialogContentSection>
-          <div className="mb-4 text-body-sm text-text-label">
+          <div className="mb-4 text-body-sm text-ds-text-neutral-muted-default">
             {t(
               'setting.add-a-local-mcp-server-by-providing-a-valid-json-configuration'
             )}
@@ -118,17 +118,17 @@ export default function MCPAddDialog({
               href="https://modelcontextprotocol.io/docs/getting-started/intro"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-text-information underline"
+              className="text-ds-text-status-splitting-strong-default underline"
             >
               {t('setting.learn-more')}
             </a>
           </div>
           {jsonError && (
-            <div className="mb-2 text-label-md text-text-cuation">
+            <div className="mb-2 text-label-md text-ds-text-status-error-strong-default">
               {jsonError}
             </div>
           )}
-          <div className="rounded-xl border-border-primary overflow-hidden border">
+          <div className="rounded-xl border-ds-border-neutral-strong-default overflow-hidden border">
             <MonacoEditor
               height="300px"
               width="100%"
diff --git a/src/pages/Connectors/components/MCPConfigDialog.tsx b/src/pages/Connectors/components/MCPConfigDialog.tsx
index 1a51a574b..e3407963b 100644
--- a/src/pages/Connectors/components/MCPConfigDialog.tsx
+++ b/src/pages/Connectors/components/MCPConfigDialog.tsx
@@ -135,7 +135,7 @@ export default function MCPConfigDialog({
             </div>
           ))}
           {errorMsg && (
-            <div className="mb-2 text-label-md text-text-cuation">
+            <div className="mb-2 text-label-md text-ds-text-status-error-strong-default">
               {errorMsg}
             </div>
           )}
diff --git a/src/pages/Connectors/components/MCPDeleteDialog.tsx b/src/pages/Connectors/components/MCPDeleteDialog.tsx
index 4f030843f..b1d68f418 100644
--- a/src/pages/Connectors/components/MCPDeleteDialog.tsx
+++ b/src/pages/Connectors/components/MCPDeleteDialog.tsx
@@ -33,8 +33,8 @@ export default function MCPDeleteDialog({
   const { t } = useTranslation();
   if (!open || !target) return null;
   return (
-    <div className="bg-black/30 inset-0 fixed z-30 flex items-center justify-center">
-      <div className="rounded-lg bg-white-100% p-6 shadow-lg max-w-[90vw] min-w-[320px]">
+    <div className="bg-dialog-overlay-scrim inset-0 fixed z-30 flex items-center justify-center">
+      <div className="rounded-lg bg-ds-bg-neutral-inverse-default p-6 shadow-lg max-w-[90vw] min-w-[320px]">
         <div className="mb-2 font-bold text-red-600">
           {t('setting.confirm-delete')}
         </div>
diff --git a/src/pages/Connectors/components/MCPEnvDialog.tsx b/src/pages/Connectors/components/MCPEnvDialog.tsx
index ddc8f0a3b..bad5dfd39 100644
--- a/src/pages/Connectors/components/MCPEnvDialog.tsx
+++ b/src/pages/Connectors/components/MCPEnvDialog.tsx
@@ -139,8 +139,9 @@ export const MCPEnvDialog: FC<MCPEnvDialogProps> = ({
   };
 
   const getCategoryIcon = (categoryName?: string) => {
-    if (!categoryName) return <Bot className="h-10 w-10 text-icon-primary" />;
-    return <Bot className="h-10 w-10 text-icon-primary" />;
+    if (!categoryName)
+      return <Bot className="h-10 w-10 text-ds-icon-neutral-default-default" />;
+    return <Bot className="h-10 w-10 text-ds-icon-neutral-default-default" />;
   };
 
   const getGithubRepoName = (homePage?: string) => {
@@ -311,10 +312,10 @@ export const MCPEnvDialog: FC<MCPEnvDialogProps> = ({
             <div className="gap-md flex items-center">
               {getCategoryIcon(activeMcp?.category?.name)}
               <div>
-                <div className="text-base font-bold leading-9 text-text-action">
+                <div className="text-base font-bold leading-9 text-ds-text-brand-default-default">
                   {activeMcp?.name}
                 </div>
-                <div className="text-sm font-bold leading-normal text-text-body">
+                <div className="text-sm font-bold leading-normal text-ds-text-neutral-default-default">
                   {getGithubRepoName(activeMcp?.home_page) && (
                     <div className="flex items-center">
                       <img
diff --git a/src/pages/Connectors/components/MCPListItem.tsx b/src/pages/Connectors/components/MCPListItem.tsx
index 6c6661645..a87bbd528 100644
--- a/src/pages/Connectors/components/MCPListItem.tsx
+++ b/src/pages/Connectors/components/MCPListItem.tsx
@@ -14,6 +14,7 @@
 
 import { Button } from '@/components/ui/button';
 import { TooltipSimple } from '@/components/ui/tooltip';
+import { capitalizeFirstLetter } from '@/lib';
 import { CircleAlert, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,15 +38,15 @@ export default function MCPListItem({
   const [_showMenu, setShowMenu] = useState(false);
   const { t } = useTranslation();
   return (
-    <div className="mb-4 gap-4 rounded-2xl bg-surface-tertiary p-4 flex items-center justify-between">
-      <div className="gap-xs flex items-center">
+    <div className="mb-4 gap-4 rounded-2xl bg-ds-bg-neutral-strong-default p-4 flex items-center justify-between">
+      <div className="gap-4 flex items-center">
         <div className="mx-xs h-3 w-3 bg-green-500 rounded-full"></div>
-        <div className="text-base font-bold leading-9 text-text-primary">
-          {item.mcp_name}
+        <div className="text-base font-bold leading-9 text-ds-text-neutral-default-default">
+          {capitalizeFirstLetter(item.mcp_name)}
         </div>
         <div className="flex items-center">
           <TooltipSimple content={item.mcp_desc}>
-            <CircleAlert className="h-4 w-4 text-icon-secondary" />
+            <CircleAlert className="h-4 w-4 text-ds-icon-neutral-muted-default" />
           </TooltipSimple>
         </div>
       </div>
@@ -58,6 +59,9 @@ export default function MCPListItem({
         <Button
           variant="ghost"
           size="sm"
+          textWeight="medium"
+          buttonRadius="lg"
+          tone="error"
           className="w-full"
           onClick={() => {
             onDelete(item);
@@ -71,14 +75,14 @@ export default function MCPListItem({
 						<PopoverTrigger asChild>
 							<Button
 								variant="ghost"
-								size="icon"
+								size="xs" buttonContent="icon-only"
 								onClick={() => setShowMenu((v) => !v)}
 								disabled={loading}
 							>
-								<Ellipsis className="w-4 h-4 text-icon-primary" />
+								<Ellipsis className="w-4 h-4 text-ds-icon-neutral-default-default" />
 							</Button>
 						</PopoverTrigger>
-						<PopoverContent className="w-[98px] p-sm rounded-[12px] bg-dropdown-bg border border-solid border-dropdown-border">
+						<PopoverContent className="w-[98px] p-sm rounded-[12px] bg-dropdown-bg border border-solid border-ds-border-neutral-default-default">
 							<div className="space-y-1">
 								<PopoverClose asChild>
 									<Button
@@ -97,7 +101,7 @@ export default function MCPListItem({
 									<Button
 										variant="ghost"
 										size="sm"
-										className="w-full !text-text-cuation"
+										className="w-full !text-ds-text-status-error-strong-default"
 										onClick={() => {
 											onDelete(item);
 											setShowMenu(false);
diff --git a/src/pages/Connectors/components/MCPMarket.tsx b/src/pages/Connectors/components/MCPMarket.tsx
index 0c16c82b7..bdbf12392 100644
--- a/src/pages/Connectors/components/MCPMarket.tsx
+++ b/src/pages/Connectors/components/MCPMarket.tsx
@@ -19,7 +19,7 @@ import AnthropicIcon from '@/assets/mcp/Anthropic.svg?url';
 import CamelIcon from '@/assets/mcp/Camel.svg?url';
 import CommunityIcon from '@/assets/mcp/Community.svg?url';
 import OfficialIcon from '@/assets/mcp/Official.svg?url';
-import SearchInput from '@/components/SearchInput';
+import SearchInput from '@/components/Dashboard/SearchInput';
 import { Button } from '@/components/ui/button';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { TooltipSimple } from '@/components/ui/tooltip';
@@ -266,7 +266,7 @@ export default function MCPMarket({
     <div className="flex h-full flex-col items-center">
       {externalKeyword === undefined && (
         <>
-          <div className="text-body sticky top-0 z-[20] mb-0 flex w-full max-w-4xl items-center justify-between py-2">
+          <div className="text-body top-0 mb-0 max-w-4xl py-2 sticky z-[20] flex w-full items-center justify-between">
             <Button
               variant="ghost"
               size="sm"
@@ -275,7 +275,7 @@ export default function MCPMarket({
             >
               <ChevronLeft className="h-6 w-6" />
             </Button>
-            <span className="text-base font-bold leading-12 text-text-primary">
+            <span className="text-base font-bold leading-12 text-ds-text-neutral-default-default">
               {t('setting.mcp-market')}
             </span>
           </div>
@@ -289,7 +289,7 @@ export default function MCPMarket({
       )}
 
       {/* Category toggle row */}
-      <div className="flex w-full py-2">
+      <div className="py-2 flex w-full">
         <ToggleGroup
           type="single"
           value={categoryId ? String(categoryId) : 'all'}
@@ -314,24 +314,26 @@ export default function MCPMarket({
         onConnect={onConnect}
         activeMcp={activeMcp}
       ></MCPEnvDialog>
-      <div className="flex w-full flex-col gap-4 pt-4">
+      <div className="gap-4 pt-4 flex w-full flex-col">
         {isLoading && items.length === 0 && (
-          <div className="py-8 text-center text-text-muted">
+          <div className="py-8 text-ds-text-neutral-muted-default text-center">
             {t('setting.loading')}
           </div>
         )}
         {error && (
-          <div className="py-8 text-center text-text-error">{error}</div>
+          <div className="py-8 text-ds-text-status-error-strong-default text-center">
+            {error}
+          </div>
         )}
         {!isLoading && !error && items.length === 0 && (
-          <div className="py-8 text-center text-text-muted">
+          <div className="py-8 text-ds-text-neutral-muted-default text-center">
             {t('setting.no-mcp-services')}
           </div>
         )}
         {items.map((item) => (
           <div
             key={item.id}
-            className="flex items-center rounded-2xl bg-surface-secondary p-4"
+            className="rounded-2xl bg-ds-bg-neutral-default-default p-4 flex items-center"
           >
             {/* Left: Icon */}
             <div className="mr-4 flex items-center">
@@ -345,18 +347,18 @@ export default function MCPMarket({
                 return iconUrl ? (
                   <img src={iconUrl} alt={catName} className="h-11 w-9" />
                 ) : (
-                  <Store className="h-11 w-9 text-icon-primary" />
+                  <Store className="h-11 w-9 text-ds-icon-neutral-default-default" />
                 );
               })()}
             </div>
-            <div className="flex min-w-0 flex-1 flex-col justify-center">
-              <div className="flex w-full items-center gap-xs pb-1">
-                <div className="flex flex-1 items-center gap-xs">
-                  <span className="truncate text-base font-bold leading-9 text-text-primary">
+            <div className="min-w-0 flex flex-1 flex-col justify-center">
+              <div className="gap-xs pb-1 flex w-full items-center">
+                <div className="gap-xs flex flex-1 items-center">
+                  <span className="text-base font-bold leading-9 text-ds-text-neutral-default-default truncate">
                     {item.name}
                   </span>
                   <TooltipSimple content={item.description}>
-                    <CircleAlert className="h-4 w-4 text-icon-secondary" />
+                    <CircleAlert className="h-4 w-4 text-ds-icon-neutral-muted-default" />
                   </TooltipSimple>
                 </div>
                 <Button
@@ -393,7 +395,7 @@ export default function MCPMarket({
                         verticalAlign: 'middle',
                       }}
                     />
-                    <span className="items-center justify-center self-stretch text-xs font-medium leading-3">
+                    <span className="text-xs font-medium leading-3 items-center justify-center self-stretch">
                       {(() => {
                         const parts = item.home_page.split('/');
                         return parts.length > 4 ? parts[4] : item.home_page;
@@ -401,7 +403,7 @@ export default function MCPMarket({
                     </span>
                   </div>
                 )}
-              <div className="mt-1 whitespace-pre-line break-words text-sm text-text-muted">
+              <div className="mt-1 text-sm text-ds-text-neutral-muted-default break-words whitespace-pre-line">
                 {item.description}
               </div>
             </div>
@@ -409,12 +411,12 @@ export default function MCPMarket({
         ))}
         <div ref={loader} />
         {isLoading && items.length > 0 && (
-          <div className="py-4 text-center text-text-muted">
+          <div className="py-4 text-ds-text-neutral-muted-default text-center">
             {t('setting.loading-more')}
           </div>
         )}
         {!hasMore && items.length > 0 && (
-          <div className="py-4 text-center text-text-muted">
+          <div className="py-4 text-ds-text-neutral-muted-default text-center">
             {t('setting.no-more-mcp-servers')}
           </div>
         )}
diff --git a/src/pages/Connectors/index.tsx b/src/pages/Connectors/index.tsx
index f8ffc1e7b..b9bb8af6a 100644
--- a/src/pages/Connectors/index.tsx
+++ b/src/pages/Connectors/index.tsx
@@ -12,61 +12,12 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-import VerticalNavigation, {
-  type VerticalNavItem,
-} from '@/components/Navigation';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import MCP from './MCP';
-import Search from './Search';
 
 export default function Connectors() {
-  const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState('mcp');
-
-  const menuItems: Array<{ id: string; name: string }> = [
-    {
-      id: 'search',
-      name: t('layout.search'),
-    },
-    {
-      id: 'mcp',
-      name: t('setting.mcp'),
-    },
-  ];
-
-  const handleTabChange = (tabId: string) => {
-    setActiveTab(tabId);
-  };
-
   return (
-    <div className="m-auto flex h-auto max-w-[940px] flex-col">
-      <div className="px-6 flex h-auto w-full">
-        <div className="top-20 w-40 pr-6 pt-8 sticky flex h-full flex-shrink-0 flex-grow-0 flex-col justify-between self-start">
-          <VerticalNavigation
-            items={
-              menuItems.map((menu) => ({
-                value: menu.id,
-                label: (
-                  <span className="text-body-sm font-bold">{menu.name}</span>
-                ),
-              })) as VerticalNavItem[]
-            }
-            value={activeTab}
-            onValueChange={handleTabChange}
-            className="min-h-0 gap-0 h-full w-full flex-1"
-            listClassName="w-full h-full overflow-y-auto"
-            contentClassName="hidden"
-          />
-        </div>
-
-        <div className="flex h-auto w-full flex-1 flex-col">
-          <div className="gap-4 flex flex-col">
-            {activeTab === 'search' && <Search />}
-            {activeTab === 'mcp' && <MCP />}
-          </div>
-        </div>
-      </div>
+    <div className="flex h-auto w-full flex-1 flex-col">
+      <MCP />
     </div>
   );
 }
diff --git a/src/pages/History.tsx b/src/pages/History.tsx
index d36ca62b5..5bcb5babd 100644
--- a/src/pages/History.tsx
+++ b/src/pages/History.tsx
@@ -12,24 +12,17 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-import { Bot } from '@/components/animate-ui/icons/bot';
-import { Compass } from '@/components/animate-ui/icons/compass';
-import { Hammer } from '@/components/animate-ui/icons/hammer';
-import { Radio } from '@/components/animate-ui/icons/radio';
-import { Settings } from '@/components/animate-ui/icons/settings';
-import { Sparkle } from '@/components/animate-ui/icons/sparkle';
 import {
-  MenuToggleGroup,
-  MenuToggleItem,
-} from '@/components/MenuButton/MenuButton';
+  HistoryTabsNav,
+  isHistoryTabId,
+  type HistoryTabId,
+} from '@/components/Dashboard/HistoryTabsNav';
 import AlertDialog from '@/components/ui/alertDialog';
-import { Button } from '@/components/ui/button';
 import WordCarousel from '@/components/ui/WordCarousel';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
 import Project from '@/pages/Projects/Project';
 import Setting from '@/pages/Setting';
 import { useAuthStore } from '@/store/authStore';
-import { Plus } from 'lucide-react';
 import { useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -38,18 +31,7 @@ import Browser from './Browser';
 import Channels from './Channels';
 import Connectors from './Connectors';
 
-const VALID_TABS = [
-  'projects',
-  'agents',
-  'channels',
-  'connectors',
-  'browser',
-  'settings',
-] as const;
-
-type TabType = (typeof VALID_TABS)[number];
-
-const TAB_ALIASES: Record<string, TabType> = {
+const TAB_ALIASES: Record<string, HistoryTabId> = {
   mcp_tools: 'connectors',
 };
 
@@ -68,11 +50,11 @@ export default function Home() {
     const tabFromUrl = searchParams.get('tab');
     if (tabFromUrl) {
       const normalizedTab = TAB_ALIASES[tabFromUrl] ?? tabFromUrl;
-      if (VALID_TABS.includes(normalizedTab as TabType)) {
-        return normalizedTab as TabType;
+      if (isHistoryTabId(normalizedTab)) {
+        return normalizedTab;
       }
     }
-    return 'projects' as TabType;
+    return 'projects' as HistoryTabId;
   }, [searchParams]);
 
   const handleTabChange = (value: string) => {
@@ -96,128 +78,75 @@ export default function Home() {
 
   const welcomeName = formatWelcomeName(displayName);
 
+  /** User's local time: morning 5–12, afternoon 12–17, evening/night otherwise */
+  const hour = new Date().getHours();
+  const timeGreetingKey =
+    hour >= 5 && hour < 12
+      ? 'layout.greeting-morning'
+      : hour >= 12 && hour < 17
+        ? 'layout.greeting-afternoon'
+        : 'layout.greeting-evening';
+
   const confirmDelete = () => {
     setDeleteModalOpen(false);
   };
 
-  // create task
-  const createChat = () => {
-    //Handles refocusing id & non duplicate logic internally
-    projectStore?.createProject('new project');
-    navigate('/');
-  };
-
   if (!chatStore || !projectStore) {
     return <div>Loading...</div>;
   }
 
   return (
-    <div
-      ref={scrollContainerRef}
-      className="scrollbar-hide mx-auto h-full overflow-y-auto"
-    >
-      {/* alert dialog */}
-      <AlertDialog
-        isOpen={deleteModalOpen}
-        onClose={() => setDeleteModalOpen(false)}
-        onConfirm={confirmDelete}
-        title={t('layout.delete-task')}
-        message={t('layout.delete-task-confirmation')}
-        confirmText={t('layout.delete')}
-        cancelText={t('layout.cancel')}
-      />
-      {/* welcome text */}
-      <div className="flex w-full flex-row bg-gradient-to-b from-surface-primary to-surface-primary px-20 pt-16">
-        <WordCarousel
-          words={[`${t('layout.welcome')}, ${welcomeName} !`]}
-          className="text-heading-xl font-bold tracking-tight"
-          rotateIntervalMs={100}
-          sweepDurationMs={2000}
-          sweepOnce
-          gradient={`linear-gradient(in oklch 90deg,
-							#f9f8f6 0%, var(--colors-blue-300) 30%,
-							var(--colors-emerald-default) 50%,
-							var(--colors-green-500) 70%,
-							var(--colors-orange-300) 100%)`}
-          ariaLabel="rotating headline"
-        />
-      </div>
-      {/* Navbar */}
-      {/* -top-px avoids a visible hairline: at top-0 subpixel rounding can leave a gap; */}
+    <div className="px-1 pb-1 pt-10 flex h-full w-full flex-1 flex-col">
       <div
-        className={`sticky -top-px z-20 flex flex-col items-center justify-between border-x-0 border-t-0 border-solid border-border-disabled bg-bg-page-default px-20 pb-4 pt-10`}
+        ref={scrollContainerRef}
+        className="scrollbar-hide bg-ds-bg-neutral-subtle-default rounded-2xl h-full overflow-y-auto"
       >
-        <div className="mx-auto flex w-full flex-row items-center justify-between">
-          <div className="flex items-center gap-2">
-            <MenuToggleGroup
-              type="single"
-              value={activeTab}
-              orientation="horizontal"
-              onValueChange={handleTabChange}
-              className="gap-3"
-            >
-              <MenuToggleItem
-                size="xs"
-                value="projects"
-                iconAnimateOnHover="wiggle"
-                icon={<Sparkle />}
-              >
-                {t('layout.projects')}
-              </MenuToggleItem>
-              <MenuToggleItem
-                size="xs"
-                value="agents"
-                iconAnimateOnHover="default"
-                icon={<Bot className="h-4 w-4" />}
-              >
-                {t('layout.agents')}
-              </MenuToggleItem>
-              <MenuToggleItem
-                size="xs"
-                value="channels"
-                iconAnimateOnHover="default"
-                icon={<Radio className="h-4 w-4" />}
-              >
-                {t('layout.channels')}
-              </MenuToggleItem>
-              <MenuToggleItem
-                size="xs"
-                value="connectors"
-                iconAnimateOnHover="default"
-                icon={<Hammer />}
-              >
-                {t('layout.connectors')}
-              </MenuToggleItem>
-              <MenuToggleItem
-                size="xs"
-                value="browser"
-                iconAnimateOnHover="default"
-                icon={<Compass className="h-4 w-4" />}
-              >
-                {t('layout.browser')}
-              </MenuToggleItem>
-              <MenuToggleItem
-                size="xs"
-                value="settings"
-                iconAnimateOnHover="default"
-                icon={<Settings />}
-              >
-                {t('layout.settings')}
-              </MenuToggleItem>
-            </MenuToggleGroup>
+        {/* alert dialog */}
+        <AlertDialog
+          isOpen={deleteModalOpen}
+          onClose={() => setDeleteModalOpen(false)}
+          onConfirm={confirmDelete}
+          title={t('layout.delete-task')}
+          message={t('layout.delete-task-confirmation')}
+          confirmText={t('layout.delete')}
+          cancelText={t('layout.cancel')}
+        />
+        {/* welcome text */}
+        <div className="from-ds-bg-neutral-default-default to-ds-bg-neutral-default-default py-8 flex w-full flex-row bg-gradient-to-b px-[74px]">
+          <p className="m-0 gap-2 inline-flex flex-wrap items-baseline">
+            <WordCarousel
+              words={[t(timeGreetingKey)]}
+              className="history-welcome-headline text-heading-xl font-bold tracking-tight not-italic"
+              rotateIntervalMs={100}
+              sweepDurationMs={2000}
+              sweepOnce
+              gradient="linear-gradient(90deg, var(--ds-text-brand-subtle-default) 0%, var(--ds-text-brand-muted-default) 100%)"
+            />
+            <span className="history-welcome-headline text-heading-xl font-bold tracking-tight text-ds-text-brand-default-default italic">
+              {`, ${welcomeName} !`}
+            </span>
+          </p>
+        </div>
+        {/* Navbar */}
+        {/* -top-px avoids a visible hairline: at top-0 subpixel rounding can leave a gap; */}
+        <div
+          className={`border-ds-border-neutral-subtle-disabled bg-ds-bg-neutral-default-default pt-2 sticky -top-px z-20 flex flex-col items-center justify-between border-x-0 border-t-0 border-b-1 border-solid px-[70px]`}
+        >
+          <div className="mx-auto flex w-full flex-row items-center">
+            <HistoryTabsNav activeTab={activeTab} onChange={handleTabChange} />
+          </div>
+        </div>
+        <div className="m-auto flex h-auto w-full max-w-[1020px] flex-1 flex-col">
+          <div className="px-6 flex h-auto min-h-[calc(100vh-80px)] w-full">
+            {activeTab === 'projects' && <Project />}
+            {activeTab === 'agents' && <Agents />}
+            {activeTab === 'channels' && <Channels />}
+            {activeTab === 'connectors' && <Connectors />}
+            {activeTab === 'browser' && <Browser />}
+            {activeTab === 'settings' && <Setting />}
           </div>
-          <Button variant="primary" size="sm" onClick={createChat}>
-            <Plus />
-            {t('layout.new-project')}
-          </Button>
         </div>
       </div>
-      {activeTab === 'projects' && <Project />}
-      {activeTab === 'agents' && <Agents />}
-      {activeTab === 'channels' && <Channels />}
-      {activeTab === 'connectors' && <Connectors />}
-      {activeTab === 'browser' && <Browser />}
-      {activeTab === 'settings' && <Setting />}
     </div>
   );
 }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 5bd32b864..ef1218cf1 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -12,188 +12,386 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-import { checkLocalServerStale, uploadFileToBrain } from '@/api/http';
-import ChatBox from '@/components/ChatBox';
+import { checkLocalServerStale } from '@/api/http';
+import {
+  DashedLinesBackground,
+  DotPatternBackground,
+  DottedLinesBackground,
+  GridPatternBackground,
+  RuledLinesBackground,
+} from '@/components/Background';
 import Folder from '@/components/Folder';
+import ProjectPageSidebar from '@/components/ProjectPageSidebar';
+import {
+  PROJECT_SIDEBAR_FOLD_SPRING,
+  PROJECT_SIDEBAR_RAIL_WIDTH_PX,
+} from '@/components/ProjectPageSidebar/constants';
+import SessionGroup from '@/components/Session/SessionGroup';
+import TriggerPanel from '@/components/Trigger';
 import UpdateElectron from '@/components/update';
-import Workflow from '@/components/WorkFlow';
+import Workspace from '@/components/Workspace';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
 import { useHost } from '@/host';
+import { cn } from '@/lib/utils';
 import { ChatTaskStatus } from '@/types/constants';
 import { ReactFlowProvider } from '@xyflow/react';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { AddWorker } from '@/components/AddWorker';
+import { motion } from 'framer-motion';
 import {
-  MenuToggleGroup,
-  MenuToggleItem,
-} from '@/components/MenuButton/MenuButton';
-import { TriggerDialog } from '@/components/Trigger/TriggerDialog';
-import { Button } from '@/components/ui/button';
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
 
-import { useAuthStore } from '@/store/authStore';
+import { useAuthStore, type WorkspaceMainBackground } from '@/store/authStore';
 import { usePageTabStore } from '@/store/pageTabStore';
 import {
-  useTriggerStore,
-  WebSocketConnectionStatus,
-} from '@/store/triggerStore';
-import { Inbox, LayoutGrid, Plus, RefreshCw, Zap, ZapOff } from 'lucide-react';
-import Overview from './Project/Triggers';
-
-import BottomBar from '@/components/BottomBar';
-import BrowserAgentWorkspace from '@/components/BrowserAgentWorkspace';
-import TerminalAgentWorkspace from '@/components/TerminalAgentWorkspace';
-import { Popover, PopoverContent } from '@/components/ui/popover';
+  EXECUTION_LOGS_OPEN_STORAGE_KEY,
+  type TriggerSortKey,
+} from '../components/Trigger/Triggers';
+
+import Session from '@/components/Session';
 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';
+import type {
+  ImperativePanelGroupHandle,
+  ImperativePanelHandle,
+} from 'react-resizable-panels';
+
+/** Same spring as project sidebar fold animation. */
+const HOME_MAIN_LAYOUT_SPRING = PROJECT_SIDEBAR_FOLD_SPRING;
+
+/** Sidebar width bounds (react-resizable-panels uses %; derived from shell width). */
+const SIDEBAR_MIN_PX = 240;
+const SIDEBAR_MAX_PX = 400;
+/** Default expanded sidebar width when nothing is stored (px). */
+const DEFAULT_SIDEBAR_WIDTH_PX = 288;
+const SIDEBAR_WIDTH_STORAGE_KEY = 'eigent-home-sidebar-width-px';
+
+function clampPct(n: number): number {
+  return Math.min(100, Math.max(1, n));
+}
 
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          {isConnected ? (
-            <Zap className={getStatusColor()} />
-          ) : (
-            <ZapOff className={getStatusColor()} />
-          )}
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>{getStatusTooltip()}</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
+function readStoredSidebarWidthPx(): number {
+  if (typeof window === 'undefined') return DEFAULT_SIDEBAR_WIDTH_PX;
+  try {
+    const raw = window.localStorage.getItem(SIDEBAR_WIDTH_STORAGE_KEY);
+    if (raw == null) return DEFAULT_SIDEBAR_WIDTH_PX;
+    const n = Number.parseFloat(raw);
+    if (!Number.isFinite(n)) return DEFAULT_SIDEBAR_WIDTH_PX;
+    return Math.min(SIDEBAR_MAX_PX, Math.max(SIDEBAR_MIN_PX, n));
+  } catch {
+    return DEFAULT_SIDEBAR_WIDTH_PX;
+  }
 }
 
 export default function Home() {
-  const host = useHost();
   const { t } = useTranslation();
+  const host = useHost();
+  const ipc = host?.ipcRenderer;
+  const electronAPI = host?.electronAPI;
+  //Get Chatstore for the active project's task
   const { chatStore, projectStore } = useChatStoreAdapter();
 
-  const {
-    activeWorkspaceTab,
-    setActiveWorkspaceTab,
-    chatPanelPosition,
-    setHasTriggers,
-    setHasAgentFiles,
-    unviewedTabs,
-    markTabAsUnviewed,
-  } = usePageTabStore();
-
-  const { wsConnectionStatus, triggerReconnect } = useTriggerStore();
-  const authStore = useAuthStore.getState();
-
-  const [_activeWebviewId, setActiveWebviewId] = useState<string | null>(null);
-  const [isChatBoxVisible, setIsChatBoxVisible] = useState(true);
-  const [addWorkerDialogOpen, setAddWorkerDialogOpen] = useState(false);
-  const [triggerDialogOpen, setTriggerDialogOpen] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { activeWorkspaceTab, setHasAgentFiles, setActiveWorkspaceTab } =
+    usePageTabStore();
+  const triggerAddDialogRequestId = usePageTabStore(
+    (s) => s.triggerAddDialogRequestId
+  );
+  const projectSidebarFolded = usePageTabStore((s) => s.projectSidebarFolded);
+  const setProjectSidebarFolded = usePageTabStore(
+    (s) => s.setProjectSidebarFolded
+  );
 
-  const toggleChatBox = () => {
-    setIsChatBoxVisible((prev) => !prev);
-  };
+  const email = useAuthStore((s) => s.email);
+  const workspaceMainBackground = useAuthStore(
+    (s) => s.workspaceMainBackground
+  );
 
-  // Handle file upload
-  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files;
-    if (!files || files.length === 0) return;
+  const [, setActiveWebviewId] = useState<string | null>(null);
+  const [triggerDialogOpen, setTriggerDialogOpen] = useState(false);
+  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'
+      );
+    }
+  );
 
-    // Get the active project's folder path
-    const activeProjectId = projectStore.activeProjectId;
-    if (host?.ipcRenderer && !activeProjectId) return;
+  const shellPanelGroupRef = useRef<HTMLDivElement>(null);
+  const shellWidthRef = useRef(0);
+  const shellPanelGroupImperativeRef = useRef<ImperativePanelGroupHandle>(null);
+  const projectSidebarPanelRef = useRef<ImperativePanelHandle>(null);
+  const applyingSidebarLayoutRef = useRef(false);
+  const sidebarLayoutAnimationFrameRef = useRef<number | null>(null);
+  const hasInitializedSidebarLayoutRef = useRef(false);
+  /** Expanded sidebar width in px; only user drag (or stored value) changes this — window resize adjusts % to keep this width. */
+  const sidebarWidthPxRef = useRef(readStoredSidebarWidthPx());
+  const persistSidebarWidthTimeoutRef = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
+  /** Percent constraints for the sidebar panel (1–100). `rail` = folded rail width. */
+  const [sidebarPct, setSidebarPct] = useState({
+    min: 18,
+    max: 35,
+    rail: 4,
+  });
+
+  const mainPanelPct = useMemo(() => {
+    const min = Math.max(1, 100 - sidebarPct.max);
+    const max = Math.max(min, Math.min(99, 100 - sidebarPct.min));
+    return { min, max };
+  }, [sidebarPct.min, sidebarPct.max]);
+
+  /** When folded, main must be allowed to reach `100 - rail` (~98%); else max ~82% blocks a 40px sidebar. */
+  const mainPanelMaxSize = useMemo(() => {
+    if (projectSidebarFolded) {
+      return Math.min(99, 100 - sidebarPct.rail);
+    }
+    return mainPanelPct.max;
+  }, [projectSidebarFolded, sidebarPct.rail, mainPanelPct.max]);
 
-    // Upload files using Electron API or Brain upload endpoint in pure Web mode.
-    for (const file of Array.from(files)) {
+  const schedulePersistSidebarWidth = useCallback((px: number) => {
+    if (persistSidebarWidthTimeoutRef.current) {
+      clearTimeout(persistSidebarWidthTimeoutRef.current);
+    }
+    persistSidebarWidthTimeoutRef.current = setTimeout(() => {
+      persistSidebarWidthTimeoutRef.current = null;
       try {
-        if (host?.ipcRenderer) {
-          const content = await file.arrayBuffer();
-          if (activeProjectId) {
-            await host.ipcRenderer.invoke('save-file-to-agent-folder', {
-              projectId: activeProjectId,
-              fileName: file.name,
-              content,
-            });
-          }
-        } else {
-          await uploadFileToBrain(file);
-        }
-        // Mark the inbox tab as having new content
-        setHasAgentFiles(true);
-        if (activeWorkspaceTab !== 'inbox') {
-          markTabAsUnviewed('inbox');
+        window.localStorage.setItem(
+          SIDEBAR_WIDTH_STORAGE_KEY,
+          String(Math.round(px))
+        );
+      } catch {
+        /* ignore */
+      }
+    }, 250);
+  }, []);
+
+  const setShellPanelLayout = useCallback(
+    (layout: number[], animate: boolean) => {
+      const group = shellPanelGroupImperativeRef.current;
+      if (!group) return;
+
+      const target = layout.map(clampPct);
+
+      if (sidebarLayoutAnimationFrameRef.current != null) {
+        cancelAnimationFrame(sidebarLayoutAnimationFrameRef.current);
+        sidebarLayoutAnimationFrameRef.current = null;
+      }
+
+      const applyFinalLayout = () => {
+        group.setLayout(target);
+        requestAnimationFrame(() => {
+          applyingSidebarLayoutRef.current = false;
+        });
+      };
+
+      const current = group.getLayout();
+      const shouldAnimate =
+        animate &&
+        current.length === target.length &&
+        current.some((value, index) => Math.abs(value - target[index]) > 0.1);
+
+      applyingSidebarLayoutRef.current = true;
+
+      if (!shouldAnimate) {
+        applyFinalLayout();
+        return;
+      }
+
+      const from = [...current];
+      const durationMs = 260;
+      const start = performance.now();
+
+      const tick = (now: number) => {
+        const progress = Math.min(1, (now - start) / durationMs);
+        const eased = 1 - Math.pow(1 - progress, 3);
+        group.setLayout(
+          from.map((value, index) => value + (target[index] - value) * eased)
+        );
+
+        if (progress < 1) {
+          sidebarLayoutAnimationFrameRef.current = requestAnimationFrame(tick);
+          return;
         }
-      } catch (error) {
-        console.error('Error uploading file:', error);
+
+        sidebarLayoutAnimationFrameRef.current = null;
+        applyFinalLayout();
+      };
+
+      sidebarLayoutAnimationFrameRef.current = requestAnimationFrame(tick);
+    },
+    []
+  );
+
+  /** Recompute sidebar % from fixed px so the rail does not grow/shrink when the window resizes. */
+  const applyExpandedSidebarLayout = useCallback(
+    (animate: boolean = false) => {
+      const shell = shellPanelGroupRef.current;
+      if (!shell) return;
+      if (usePageTabStore.getState().projectSidebarFolded) return;
+      const w = shell.getBoundingClientRect().width;
+      if (w <= 0) return;
+      const minPct = clampPct((SIDEBAR_MIN_PX / w) * 100);
+      const maxPct = clampPct((SIDEBAR_MAX_PX / w) * 100);
+      const px = Math.min(
+        SIDEBAR_MAX_PX,
+        Math.max(SIDEBAR_MIN_PX, sidebarWidthPxRef.current)
+      );
+      let pct = (px / w) * 100;
+      pct = Math.min(maxPct, Math.max(minPct, pct));
+      setShellPanelLayout([pct, 100 - pct], animate);
+    },
+    [setShellPanelLayout]
+  );
+
+  const handleShellPanelLayout = useCallback(
+    (sizes: number[]) => {
+      if (applyingSidebarLayoutRef.current) return;
+      const shell = shellPanelGroupRef.current;
+      if (!shell) return;
+      const shellW = shell.getBoundingClientRect().width;
+      if (shellW <= 0) return;
+
+      const sidebarPx = (sizes[0] / 100) * shellW;
+      const folded = usePageTabStore.getState().projectSidebarFolded;
+
+      if (!folded && sidebarPx < SIDEBAR_MIN_PX - 0.5) {
+        applyingSidebarLayoutRef.current = true;
+        setProjectSidebarFolded(true);
+        const rail = clampPct((PROJECT_SIDEBAR_RAIL_WIDTH_PX / shellW) * 100);
+        const main = Math.min(99, Math.max(0, 100 - rail));
+        shellPanelGroupImperativeRef.current?.setLayout([rail, main]);
+        requestAnimationFrame(() => {
+          applyingSidebarLayoutRef.current = false;
+        });
+        return;
       }
-    }
 
-    // Reset input
-    e.target.value = '';
-  };
+      if (folded && sidebarPx > PROJECT_SIDEBAR_RAIL_WIDTH_PX + 1.5) {
+        applyingSidebarLayoutRef.current = true;
+        setProjectSidebarFolded(false);
+        requestAnimationFrame(() => {
+          applyingSidebarLayoutRef.current = false;
+        });
+        return;
+      }
+
+      if (!folded) {
+        sidebarWidthPxRef.current = Math.min(
+          SIDEBAR_MAX_PX,
+          Math.max(SIDEBAR_MIN_PX, sidebarPx)
+        );
+        schedulePersistSidebarWidth(sidebarWidthPxRef.current);
+      }
+    },
+    [schedulePersistSidebarWidth, setProjectSidebarFolded]
+  );
+
+  /** Expanded: apply stored px width when leaving folded or on first paint. */
+  useLayoutEffect(() => {
+    if (projectSidebarFolded) return;
+    applyExpandedSidebarLayout(hasInitializedSidebarLayoutRef.current);
+    hasInitializedSidebarLayoutRef.current = true;
+  }, [projectSidebarFolded, applyExpandedSidebarLayout]);
+
+  /** Folded: exact rail + main split (`setLayout`); update when shell width changes rail %. */
+  useLayoutEffect(() => {
+    if (!projectSidebarFolded) return;
+    const rail = sidebarPct.rail;
+    const main = Math.min(99, Math.max(0, 100 - rail));
+    setShellPanelLayout(
+      [rail, main],
+      hasInitializedSidebarLayoutRef.current && sidebarWidthPxRef.current > 0
+    );
+    hasInitializedSidebarLayoutRef.current = true;
+  }, [projectSidebarFolded, sidebarPct.rail, setShellPanelLayout]);
 
-  // Detect files and triggers when project loads
   useEffect(() => {
-    const detectAgentFiles = async () => {
+    const el = shellPanelGroupRef.current;
+    if (!el) return;
+
+    const update = () => {
+      const w = el.getBoundingClientRect().width;
+      if (w <= 0) return;
+      const prevW = shellWidthRef.current;
+      shellWidthRef.current = w;
+      const minPct = clampPct((SIDEBAR_MIN_PX / w) * 100);
+      const maxPct = clampPct((SIDEBAR_MAX_PX / w) * 100);
+      const railPct = clampPct((PROJECT_SIDEBAR_RAIL_WIDTH_PX / w) * 100);
+      setSidebarPct({
+        min: minPct,
+        max: Math.max(minPct, maxPct),
+        rail: railPct,
+      });
+
       if (
-        !projectStore.activeProjectId ||
-        !authStore.email ||
-        !host?.ipcRenderer
+        !usePageTabStore.getState().projectSidebarFolded &&
+        prevW > 0 &&
+        Math.abs(w - prevW) > 0.5
       ) {
-        return;
+        applyExpandedSidebarLayout();
+      }
+    };
+
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [applyExpandedSidebarLayout]);
+
+  useEffect(() => {
+    return () => {
+      if (sidebarLayoutAnimationFrameRef.current != null) {
+        cancelAnimationFrame(sidebarLayoutAnimationFrameRef.current);
       }
+      if (persistSidebarWidthTimeoutRef.current) {
+        clearTimeout(persistSidebarWidthTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    window.localStorage.setItem(
+      EXECUTION_LOGS_OPEN_STORAGE_KEY,
+      String(triggerExecutionLogsOpen)
+    );
+  }, [triggerExecutionLogsOpen]);
+
+  useEffect(() => {
+    if (triggerAddDialogRequestId === 0) return;
+    setTriggerDialogOpen(true);
+  }, [triggerAddDialogRequestId]);
+
+  useEffect(() => {
+    setTriggerSelectedId(null);
+  }, [projectStore.activeProjectId]);
+
+  useEffect(() => {
+    checkLocalServerStale();
+  }, []);
+
+  // Detect files and triggers when project loads
+  useEffect(() => {
+    const detectAgentFiles = async () => {
+      if (!projectStore.activeProjectId || !email) return;
       try {
-        const files = await host.ipcRenderer.invoke(
+        const files = await ipc?.invoke(
           'get-project-file-list',
-          authStore.email,
+          email,
           projectStore.activeProjectId
         );
         setHasAgentFiles(files && files.length > 0);
@@ -202,34 +400,22 @@ 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,
-    host,
-  ]);
-
-  // One-time check: warn if local server is outdated after a git pull
-  useEffect(() => {
-    checkLocalServerStale();
-  }, []);
+  }, [projectStore.activeProjectId, email, setHasAgentFiles, ipc]);
 
+  // Add webview-show listener in useEffect with cleanup
   useEffect(() => {
-    if (!host?.ipcRenderer) return;
     const handleWebviewShow = (_event: any, id: string) => {
       setActiveWebviewId(id);
     };
-    host.ipcRenderer.on('webview-show', handleWebviewShow);
+
+    ipc?.on('webview-show', handleWebviewShow);
+
+    // Cleanup: remove listener on unmount
     return () => {
-      host.ipcRenderer?.off('webview-show', handleWebviewShow);
+      ipc?.off('webview-show', handleWebviewShow);
     };
-  }, [host]);
+  }, [ipc]);
 
   // Extract complex dependency to a variable
   const taskAssigning =
@@ -273,17 +459,14 @@ export default function Home() {
 
     // capture webview
     const captureWebview = async () => {
-      if (!host?.ipcRenderer) {
-        return;
-      }
       const activeTask = chatStore.tasks[chatStore.activeTaskId as string];
       if (!activeTask || activeTask.status === ChatTaskStatus.FINISHED) {
         return;
       }
       webviews.map((webview) => {
-        host.ipcRenderer
-          .invoke('capture-webview', webview.id)
-          .then((base64: string) => {
+        void ipc
+          ?.invoke('capture-webview', webview.id)
+          ?.then((base64: string) => {
             const currentTask =
               chatStore.tasks[chatStore.activeTaskId as string];
             if (!currentTask || currentTask.type) return;
@@ -335,21 +518,20 @@ export default function Home() {
         clearInterval(intervalTimer);
       }
     };
-  }, [chatStore, taskAssigning, host]);
+  }, [chatStore, taskAssigning, ipc]);
 
   const getSize = useCallback(() => {
-    if (!host?.electronAPI?.setSize) return;
     const webviewContainer = document.getElementById('webview-container');
     if (webviewContainer) {
       const rect = webviewContainer.getBoundingClientRect();
-      host.electronAPI.setSize({
+      electronAPI?.setSize({
         x: rect.left,
         y: rect.top,
         width: rect.width,
         height: rect.height,
       });
     }
-  }, [host]);
+  }, [electronAPI]);
 
   useEffect(() => {
     if (!chatStore) return;
@@ -371,487 +553,157 @@ export default function Home() {
     }
   }, [chatStore, projectStore, getSize]);
 
-  if (!chatStore) {
-    return <div>{t('triggers.loading')}</div>;
-  }
+  const mainPanelSurfaceClass =
+    'rounded-2xl bg-ds-bg-neutral-subtle-default min-w-0 flex h-full w-full flex-col overflow-hidden';
+  const mainPanelContentClass = 'min-h-0 min-w-0 flex h-full w-full flex-col';
+  const mainPanelShellClass = cn(mainPanelSurfaceClass);
+
+  const useWorkspacePatternBg =
+    activeWorkspaceTab === 'workforce' || activeWorkspaceTab === 'session';
+  const workspacePatternKey = useMemo((): WorkspaceMainBackground => {
+    if (!useWorkspacePatternBg) return 'empty';
+    return (workspaceMainBackground ?? 'empty') as WorkspaceMainBackground;
+  }, [useWorkspacePatternBg, workspaceMainBackground]);
+
+  const workspaceMainContentClass = cn(
+    mainPanelContentClass,
+    workspacePatternKey !== 'empty' && 'relative'
+  );
 
-  // Render workspace content based on active workspace tab
-  const renderWorkspaceContent = () => {
-    const activeTask = chatStore.activeTaskId
-      ? chatStore.tasks[chatStore.activeTaskId]
-      : null;
-    const activeWorkSpace = activeTask?.activeWorkspace;
+  const workspacePatternOverlayEl = useMemo(() => {
+    switch (workspacePatternKey) {
+      case 'dots':
+        return <DotPatternBackground />;
+      case 'blocks':
+        return <GridPatternBackground />;
+      case 'ruled':
+        return <RuledLinesBackground />;
+      case 'dotted':
+        return <DottedLinesBackground />;
+      case 'dashed':
+        return <DashedLinesBackground />;
+      default:
+        return null;
+    }
+  }, [workspacePatternKey]);
+
+  const handleSessionGroupDeleteSession = useCallback(
+    (sessionId: string) => {
+      if (!chatStore) return;
+      if (!window.confirm(t('layout.delete-task-confirmation'))) return;
+      const wasActive = chatStore.activeTaskId === sessionId;
+      chatStore.removeTask(sessionId);
+      if (wasActive) {
+        setActiveWorkspaceTab('workforce');
+      }
+    },
+    [chatStore, setActiveWorkspaceTab, t]
+  );
 
+  const renderActiveWorkspaceTab = () => {
     switch (activeWorkspaceTab) {
-      case 'triggers':
+      case 'workforce':
         return (
-          <div
-            className={`h-full w-full ${wsConnectionStatus === 'disconnected' ? 'pointer-events-none opacity-50 grayscale' : ''}`}
-          >
-            <Overview />
+          <div className={workspaceMainContentClass}>
+            {workspacePatternOverlayEl}
+            <Workspace />
+          </div>
+        );
+      case 'session':
+        return (
+          <div className={workspaceMainContentClass}>
+            {workspacePatternOverlayEl}
+            <Session />
           </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 className={mainPanelContentClass}>
+            <Folder />
           </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>
-          );
-        }
-
+      case 'triggers':
         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>
-            )}
-          </>
+          <TriggerPanel
+            className={mainPanelContentClass}
+            sortBy={triggerSortBy}
+            onSortByChange={setTriggerSortBy}
+            selectedTriggerId={triggerSelectedId}
+            onSelectedTriggerIdChange={setTriggerSelectedId}
+            isExecutionLogsOpen={triggerExecutionLogsOpen}
+            onExecutionLogsOpenChange={setTriggerExecutionLogsOpen}
+            isDialogOpen={triggerDialogOpen}
+            onDialogOpenChange={setTriggerDialogOpen}
+          />
+        );
+      case 'sessions':
+        return (
+          <SessionGroup
+            className={mainPanelContentClass}
+            tasks={chatStore.tasks}
+            activeSessionId={chatStore.activeTaskId}
+            onSelectSession={(sessionId) => {
+              chatStore.setActiveTaskId(sessionId);
+              setActiveWorkspaceTab('session');
+            }}
+            onDeleteSession={handleSessionGroupDeleteSession}
+          />
         );
+      default:
+        return null;
     }
   };
 
-  // Render Tasks tab content (default)
+  if (!chatStore) {
+    return <div>{t('triggers.loading')}</div>;
+  }
+
   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-1 pb-1 pt-10 flex h-full flex-row overflow-hidden">
+        <div
+          ref={shellPanelGroupRef}
+          className="min-h-0 min-w-0 rounded-2xl bg-ds-bg-neutral-default-default h-full w-full flex-1"
+        >
           <ResizablePanelGroup
+            ref={shellPanelGroupImperativeRef}
+            id="home-shell-panel-group"
             direction="horizontal"
-            key={`${isChatBoxVisible}-${chatPanelPosition}`}
-            className="w-full items-center justify-center gap-0.5"
+            className="min-h-0 gap-0 h-full w-full"
+            onLayout={handleShellPanelLayout}
           >
-            {/* 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="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"
-                      >
-                        <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>
-                            )
-                          }
-                        >
-                          {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);
-                            }
-                          }}
-                        >
-                          <Plus />
-                          {activeWorkspaceTab === 'workforce' &&
-                            t('triggers.add')}
-                          {activeWorkspaceTab === 'triggers' &&
-                            t('triggers.create')}
-                        </Button>
-                      )}
-                    </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>
-              ) : (
-                // 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'
-                          )
-                        }
-                        className="rounded-lg bg-surface-primary"
-                      >
-                        <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"
-                          onClick={() => {
-                            if (activeWorkspaceTab === 'workforce') {
-                              setAddWorkerDialogOpen(true);
-                            } else if (activeWorkspaceTab === 'triggers') {
-                              setTriggerDialogOpen(true);
-                            }
-                          }}
-                        >
-                          <Plus />
-                          {activeWorkspaceTab === 'workforce' &&
-                            t('triggers.add')}
-                          {activeWorkspaceTab === 'triggers' &&
-                            t('triggers.create')}
-                        </Button>
-                      )}
-                    </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>
+            <ResizablePanel
+              ref={projectSidebarPanelRef}
+              defaultSize={24}
+              minSize={sidebarPct.rail}
+              maxSize={sidebarPct.max}
+              className="min-h-0 min-w-0 pl-1"
+            >
+              <ProjectPageSidebar chatStore={chatStore} />
+            </ResizablePanel>
+            <ResizableHandle
+              className={cn(
+                'w-1 after:bg-ds-bg-neutral-default-default shrink-0 bg-transparent after:transition-colors',
+                'hover:after:bg-ds-bg-brand-default-focus transition-colors',
+                'data-[resize-handle-state=drag]:after:bg-ds-bg-brand-default-focus'
               )}
+            />
+            <ResizablePanel
+              defaultSize={76}
+              minSize={mainPanelPct.min}
+              maxSize={mainPanelMaxSize}
+              className="min-h-0 min-w-[300px]"
+            >
+              <motion.div
+                layout
+                transition={{ layout: HOME_MAIN_LAYOUT_SPRING }}
+                className="min-h-0 min-w-0 gap-4 relative flex h-full w-full flex-col overflow-hidden"
+              >
+                <div className={mainPanelShellClass}>
+                  {renderActiveWorkspaceTab()}
+                </div>
+              </motion.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>
         <UpdateElectron />
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 7320b3c7a..80459a454 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -354,16 +354,16 @@ export default function Login() {
 
   // Render local mode: "Start Eigent" button only
   const renderLocalMode = () => (
-    <div className="relative flex w-80 flex-1 flex-col items-center justify-center pt-8">
+    <div className="w-80 pt-8 relative flex flex-1 flex-col items-center justify-center">
       <img
         src={eigentLogo}
-        className="absolute left-1/2 top-10 h-16 w-16 -translate-x-1/2"
+        className="top-10 h-16 w-16 absolute left-1/2 -translate-x-1/2"
       />
-      <div className="mb-8 text-heading-lg font-bold text-text-heading">
+      <div className="mb-8 text-heading-lg font-bold text-ds-text-neutral-default-default">
         Eigent
       </div>
       {generalError && (
-        <p className="mb-4 mt-1 text-label-md text-text-cuation">
+        <p className="mb-4 mt-1 text-label-md text-ds-text-status-error-strong-default">
           {generalError}
         </p>
       )}
@@ -383,16 +383,16 @@ export default function Login() {
 
   // Render hybrid/app mode: waiting for external login callback
   const renderHybridMode = () => (
-    <div className="relative flex w-80 flex-1 flex-col items-center justify-center pt-8">
+    <div className="w-80 pt-8 relative flex flex-1 flex-col items-center justify-center">
       <img
         src={eigentLogo}
-        className="absolute left-1/2 top-10 h-16 w-16 -translate-x-1/2"
+        className="top-10 h-16 w-16 absolute left-1/2 -translate-x-1/2"
       />
-      <div className="mb-4 text-heading-lg font-bold text-text-heading">
+      <div className="mb-4 text-heading-lg font-bold text-ds-text-neutral-default-default">
         {t('layout.login')}
       </div>
       {isLoading && (
-        <p className="mb-6 text-center text-label-md text-text-secondary">
+        <p className="mb-6 text-label-md text-ds-text-neutral-muted-default text-center">
           {t('layout.logging-in')}...
         </p>
       )}
@@ -426,7 +426,7 @@ export default function Login() {
     <div className="relative flex h-full flex-col overflow-hidden">
       {/* Titlebar with drag region and window controls */}
       <div
-        className="absolute left-0 right-0 top-0 z-50 flex !h-9 items-center justify-between py-1 pl-2"
+        className="left-0 right-0 top-0 !h-9 py-1 pl-2 absolute z-50 flex items-center justify-between"
         id="login-titlebar"
         ref={titlebarRef}
         style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
@@ -456,10 +456,10 @@ export default function Login() {
 
       {/* Main content - image extends to top, form has padding */}
       <div
-        className={`flex h-full items-center justify-center gap-2 px-2 pb-2 pt-10`}
+        className={`gap-2 px-1 pb-1 pt-10 flex h-full items-center justify-center`}
       >
         <div
-          className="flex h-full min-h-0 w-full flex-col items-center justify-center overflow-hidden rounded-2xl border-solid border-border-tertiary bg-surface-secondary px-2 pb-2"
+          className="min-h-0 rounded-2xl bg-ds-bg-neutral-subtle-default px-2 pb-2 flex h-full w-full flex-col items-center justify-center overflow-hidden"
           style={{
             backgroundImage: `url(${background})`,
             backgroundSize: 'cover',
diff --git a/src/pages/Project/Workspace.tsx b/src/pages/Project/Workspace.tsx
deleted file mode 100644
index 6a638afcf..000000000
--- a/src/pages/Project/Workspace.tsx
+++ /dev/null
@@ -1,303 +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 { useHost } from '@/host';
-import { ReactFlowProvider } from '@xyflow/react';
-import { useCallback, useEffect, useState } from 'react';
-
-export default function Tasks() {
-  const host = useHost();
-  //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) => {
-        host?.ipcRenderer?.invoke &&
-          host.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, host]);
-
-  const getSize = useCallback(() => {
-    const webviewContainer = document.getElementById('webview-container');
-    if (webviewContainer) {
-      const rect = webviewContainer.getBoundingClientRect();
-      host?.electronAPI?.setSize({
-        x: rect.left,
-        y: rect.top,
-        width: rect.width,
-        height: rect.height,
-      });
-      console.log('setSize', rect);
-    }
-  }, [host]);
-
-  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/Projects/Project.tsx b/src/pages/Projects/Project.tsx
index f520308c9..9d1f9dd5f 100644
--- a/src/pages/Projects/Project.tsx
+++ b/src/pages/Projects/Project.tsx
@@ -13,15 +13,13 @@
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
 import { fetchPut, proxyFetchDelete } from '@/api/http';
-import GroupedHistoryView from '@/components/GroupedHistoryView';
+import GroupedHistoryView from '@/components/Dashboard/GroupedHistoryView';
 import AlertDialog from '@/components/ui/alertDialog';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
 import { loadProjectFromHistory } from '@/lib';
 import { share } from '@/lib/share';
-import { fetchHistoryTasks } from '@/service/historyApi';
 import { ChatTaskStatus } from '@/types/constants';
-import { Bird, CodeXml, FileText, Globe, Image } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
@@ -30,107 +28,17 @@ export default function Project() {
   const navigate = useNavigate();
   const [deleteCallback, setDeleteCallback] = useState<() => void>(() => {});
   const { chatStore, projectStore } = useChatStoreAdapter();
-  // const { history_type, setHistoryType } = useGlobalStore();
-  const [_historyTasks, setHistoryTasks] = useState<any[]>([]);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   const [curHistoryId, setCurHistoryId] = useState('');
   const [deleteProjectModalOpen, setDeleteProjectModalOpen] = useState(false);
   const [curProjectId, setCurProjectId] = useState('');
-  const [refreshTrigger, _setRefreshTrigger] = useState(0);
   const [projectDeleteCallback, setProjectDeleteCallback] = useState<
     (() => Promise<void>) | null
   >(null);
 
-  useEffect(() => {
-    if (!chatStore || !projectStore) return;
-    fetchHistoryTasks(setHistoryTasks);
-  }, [chatStore, projectStore]);
-
   if (!chatStore || !projectStore) {
     return <div>Loading...</div>;
   }
-  const agentMap = {
-    developer_agent: {
-      name: t('dashboard.developer-agent'),
-      textColor: 'text-text-developer',
-      bgColor: 'bg-bg-fill-coding-active',
-      shapeColor: 'bg-bg-fill-coding-default',
-      borderColor: 'border-bg-fill-coding-active',
-      bgColorLight: 'bg-emerald-200',
-    },
-    browser_agent: {
-      name: t('dashboard.browser-agent'),
-
-      textColor: 'text-blue-700',
-      bgColor: 'bg-bg-fill-browser-active',
-      shapeColor: 'bg-bg-fill-browser-default',
-      borderColor: 'border-bg-fill-browser-active',
-      bgColorLight: 'bg-blue-200',
-    },
-    document_agent: {
-      name: t('dashboard.document-agent'),
-
-      textColor: 'text-yellow-700',
-      bgColor: 'bg-bg-fill-writing-active',
-      shapeColor: 'bg-bg-fill-writing-default',
-      borderColor: 'border-bg-fill-writing-active',
-      bgColorLight: 'bg-yellow-200',
-    },
-    multi_modal_agent: {
-      name: t('dashboard.multi-modal-agent'),
-
-      textColor: 'text-fuchsia-700',
-      bgColor: 'bg-bg-fill-multimodal-active',
-      shapeColor: 'bg-bg-fill-multimodal-default',
-      borderColor: 'border-bg-fill-multimodal-active',
-      bgColorLight: 'bg-fuchsia-200',
-    },
-    social_media_agent: {
-      name: t('dashboard.social-media-agent'),
-
-      textColor: 'text-purple-700',
-      bgColor: 'bg-violet-700',
-      shapeColor: 'bg-violet-300',
-      borderColor: 'border-violet-700',
-      bgColorLight: 'bg-purple-50',
-    },
-  };
-
-  const _agentIconMap = {
-    developer_agent: (
-      <CodeXml
-        className={`!h-[10px] !w-[10px] ${agentMap.developer_agent.textColor}`}
-      />
-    ),
-    browser_agent: (
-      <Globe
-        className={`!h-[10px] !w-[10px] ${agentMap.browser_agent.textColor}`}
-      />
-    ),
-    document_agent: (
-      <FileText
-        className={`!h-[10px] !w-[10px] ${agentMap.document_agent.textColor}`}
-      />
-    ),
-    multi_modal_agent: (
-      <Image
-        className={`!h-[10px] !w-[10px] ${agentMap.multi_modal_agent.textColor}`}
-      />
-    ),
-    social_media_agent: (
-      <Bird
-        className={`!h-[10px] !w-[10px] ${agentMap.social_media_agent.textColor}`}
-      />
-    ),
-  };
-
-  const _handleClickAgent = (taskId: string, agent_id: string) => {
-    chatStore.setActiveTaskId(taskId);
-    chatStore.setActiveWorkspace(taskId, 'workflow');
-    chatStore.setActiveAgent(taskId, agent_id);
-    navigate(`/`);
-  };
-
   const handleDelete = (id: string, callback?: () => void) => {
     setCurHistoryId(id);
     setDeleteModalOpen(true);
@@ -142,7 +50,6 @@ export default function Project() {
     if (!id) return;
     try {
       await proxyFetchDelete(`/api/v1/chat/history/${id}`);
-      setHistoryTasks((list) => list.filter((item) => item.id !== id));
       if (chatStore.tasks[id]) {
         chatStore.removeTask(id);
       }
@@ -184,11 +91,6 @@ export default function Project() {
     share(taskId);
   };
 
-  const handleReplay = async (taskId: string, question: string) => {
-    chatStore.replay(taskId, question, 0);
-    navigate({ pathname: '/' });
-  };
-
   const handleSetActive = async (
     projectId: string,
     question: string,
@@ -237,11 +139,8 @@ export default function Project() {
     }
   };
 
-  // Feature flag to hide table view without deleting code
-  const _TABLE_VIEW_ENABLED = false;
-
   return (
-    <div className="m-auto h-auto flex-1">
+    <div className="flex w-full flex-1 flex-col">
       {/* alert dialog for task deletion */}
       <AlertDialog
         isOpen={deleteModalOpen}
@@ -267,39 +166,40 @@ export default function Project() {
         cancelText={t('layout.cancel')}
       />
 
-      {/* Header Section */}
-      <div className="flex w-full border-x-0 border-t-0 border-solid border-border-disabled">
-        <div className="mx-auto flex w-full max-w-[900px] items-center justify-between px-6 pb-4 pt-8">
-          <div className="flex w-full flex-row items-center justify-between gap-4">
+      <div className="min-w-0 flex h-auto min-h-[calc(100vh-86px)] w-full flex-col">
+        {/* Header Section */}
+        <div className="px-6 pb-6 pt-8 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">
+              <div className="text-heading-sm font-bold text-ds-text-neutral-default-default">
                 {t('layout.projects-hub')}
               </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <div className="flex w-full">
-        <div className="mx-auto flex min-h-[calc(100vh-86px)] w-full max-w-[940px] flex-col items-start justify-start px-6 py-8">
-          <GroupedHistoryView
-            onTaskSelect={handleSetActive}
-            onTaskDelete={handleDelete}
-            onTaskShare={handleShare}
-            activeTaskId={chatStore.activeTaskId || undefined}
-            ongoingTasks={chatStore.tasks}
-            onOngoingTaskClick={(taskId) => {
-              chatStore.setActiveTaskId(taskId);
-              navigate(`/`);
-            }}
-            onOngoingTaskPause={(taskId) => handleTakeControl('pause', taskId)}
-            onOngoingTaskResume={(taskId) =>
-              handleTakeControl('resume', taskId)
-            }
-            onOngoingTaskDelete={(taskId) => handleDelete(taskId)}
-            onProjectDelete={handleProjectDelete}
-            refreshTrigger={refreshTrigger}
-          />
+        <div className="flex w-full">
+          <div className="pb-8 mx-auto flex min-h-[calc(100vh-86px)] w-full max-w-[940px] flex-col items-start justify-start">
+            <GroupedHistoryView
+              onTaskSelect={handleSetActive}
+              onTaskDelete={handleDelete}
+              onTaskShare={handleShare}
+              activeTaskId={chatStore.activeTaskId || undefined}
+              ongoingTasks={chatStore.tasks}
+              onOngoingTaskClick={(taskId) => {
+                chatStore.setActiveTaskId(taskId);
+                navigate(`/`);
+              }}
+              onOngoingTaskPause={(taskId) =>
+                handleTakeControl('pause', taskId)
+              }
+              onOngoingTaskResume={(taskId) =>
+                handleTakeControl('resume', taskId)
+              }
+              onOngoingTaskDelete={(taskId) => handleDelete(taskId)}
+              onProjectDelete={handleProjectDelete}
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/pages/Setting/API.tsx b/src/pages/Setting/API.tsx
index 5202df738..009668f8e 100644
--- a/src/pages/Setting/API.tsx
+++ b/src/pages/Setting/API.tsx
@@ -87,10 +87,10 @@ export default function SettingAPI() {
       {items.map((item) => (
         <div
           key={item.name}
-          className="bg-bg-surface-tertiary rounded-2xl px-6 py-4"
+          className="bg-bg-ds-bg-neutral-strong-default rounded-2xl px-6 py-4"
         >
           <div>
-            <div className="text-base font-bold leading-12 text-text-primary">
+            <div className="text-base font-bold leading-12 text-ds-text-neutral-default-default">
               {item.name}
             </div>
           </div>
@@ -98,7 +98,7 @@ export default function SettingAPI() {
             <div>
               {item.env_vars.map((env) => (
                 <div key={env} className="mt-md">
-                  <div className="flex items-center gap-2">
+                  <div className="gap-2 flex items-center">
                     <Input
                       id={env}
                       placeholder={env}
@@ -115,19 +115,19 @@ export default function SettingAPI() {
                       onClick={() => handleVerify(item.name, env)}
                       disabled={loading[env]}
                     >
-                      <span className="text-sm leading-13 text-text-inverse-primary">
+                      <span className="text-sm leading-13 text-ds-text-neutral-inverse-default">
                         {loading[env]
                           ? t('layout.loading')
                           : t('layout.verify')}
                       </span>
-                      <Circle className="text-icon-inverse-primary h-4 w-4" />
+                      <Circle className="text-ds-icon-neutral-inverse-default h-4 w-4" />
                     </Button>
                   </div>
-                  <div className="mt-1.5 text-xs leading-17 text-text-secondary">
+                  <div className="mt-1.5 text-xs leading-17 text-ds-text-neutral-muted-default">
                     {env}
                   </div>
                   {errors[env] && (
-                    <span className="mt-1 text-xs text-text-error">
+                    <span className="mt-1 text-xs text-ds-text-status-error-strong-default">
                       {errors[env]}
                     </span>
                   )}
diff --git a/src/pages/Setting/Appearance.tsx b/src/pages/Setting/Appearance.tsx
new file mode 100644
index 000000000..9ab090415
--- /dev/null
+++ b/src/pages/Setting/Appearance.tsx
@@ -0,0 +1,505 @@
+// ========= 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 { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  DEFAULT_COLOR_THEME_ID,
+  DEFAULT_THEME_CATALOG,
+} from '@/lib/themeTokens/catalog';
+import type {
+  ColorThemeDefinitionV2,
+  Mode,
+  ThemeCatalog,
+  ThemeSeed,
+} from '@/lib/themeTokens/types';
+import { useAuthStore, type WorkspaceMainBackground } from '@/store/authStore';
+import { Monitor, Moon, RotateCcw, Sun } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const HEX_COLOR_RE = /^#[0-9a-fA-F]{6}$/;
+const DEFAULT_EDITABLE_THEME_IDS = [
+  'eigent',
+  'camel',
+  'claw',
+  'starfish',
+] as const;
+const CUSTOM_THEME_IDS = ['whale', 'custom'] as const;
+
+type ThemeOption = {
+  id: string;
+  label: string;
+  isDefault: boolean;
+};
+
+function normalizeHexColor(input: string): `#${string}` | null {
+  const trimmed = input.trim();
+  const candidate = trimmed.startsWith('#') ? trimmed : `#${trimmed}`;
+  if (!HEX_COLOR_RE.test(candidate)) return null;
+  return candidate.toLowerCase() as `#${string}`;
+}
+
+function buildMergedCatalog(customThemeCatalog: ThemeCatalog): ThemeCatalog {
+  return {
+    light: {
+      ...DEFAULT_THEME_CATALOG.light,
+      ...customThemeCatalog.light,
+    },
+    dark: {
+      ...DEFAULT_THEME_CATALOG.dark,
+      ...customThemeCatalog.dark,
+    },
+  };
+}
+
+function formatThemeLabel(id: string): string {
+  if (id === 'whale') return 'Whale';
+  if (id === 'custom') return 'Custom';
+  if (id === 'camel') return 'CAMEL';
+  if (id === 'claw') return 'Claw';
+  if (id === 'starfish') return 'Starfish';
+  if (!id) return id;
+  return id.charAt(0).toUpperCase() + id.slice(1);
+}
+
+function ColorSeedEditor({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const normalizedPreview =
+    normalizeHexColor(value) ?? 'var(--colors-black-100)';
+
+  return (
+    <div className="gap-2 border-ds-border-neutral-subtle-disabled py-4 px-6 flex flex-row items-center justify-between border-x-0 border-t-0 border-b border-solid">
+      <div className="text-body-md font-semibold text-ds-text-neutral-default-default w-24">
+        {label}
+      </div>
+      <div className="w-56 gap-2 flex flex-row items-center">
+        <Input
+          size="sm"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          note={
+            normalizeHexColor(value)
+              ? ''
+              : 'Hex format: six digits (e.g. 1a2b3c)'
+          }
+        />
+        <div
+          className="h-8 w-10 rounded-md border-ds-border-neutral-default-default border-solid"
+          style={{ backgroundColor: normalizedPreview }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function ContrastSlider({
+  value,
+  onChange,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+}) {
+  return (
+    <div className="gap-2 py-4 px-6 flex w-full flex-row items-center justify-between">
+      <div className="text-body-md font-semibold text-ds-text-neutral-default-default w-24">
+        Contrast
+      </div>
+      <div className="gap-2 w-80 flex flex-row items-center">
+        <input
+          type="range"
+          min={0}
+          max={100}
+          step={1}
+          value={value}
+          onChange={(e) => onChange(Number(e.target.value))}
+          className="h-2 bg-ds-bg-neutral-subtle-disabled accent-ds-bg-brand-default-default my-auto w-full cursor-pointer appearance-none rounded-full"
+          aria-label="Theme contrast"
+        />
+        <div className="w-10 text-body-sm font-semibold text-ds-text-neutral-muted-default text-center">
+          {value}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function AppearanceSettings() {
+  const { t } = useTranslation();
+  const appearanceMode = useAuthStore((s) => s.appearanceMode);
+  const appearance = useAuthStore((s) => s.appearance);
+  const setAppearanceMode = useAuthStore((s) => s.setAppearanceMode);
+  const lightColorThemeId = useAuthStore((s) => s.lightColorThemeId);
+  const darkColorThemeId = useAuthStore((s) => s.darkColorThemeId);
+  const setColorThemeForMode = useAuthStore((s) => s.setColorThemeForMode);
+  const customThemeCatalog = useAuthStore((s) => s.customThemeCatalog);
+  const upsertCustomThemeTemplate = useAuthStore(
+    (s) => s.upsertCustomThemeTemplate
+  );
+  const removeCustomThemeTemplate = useAuthStore(
+    (s) => s.removeCustomThemeTemplate
+  );
+  const themeContrast = useAuthStore((s) => s.themeContrast);
+  const setThemeContrast = useAuthStore((s) => s.setThemeContrast);
+  const workspaceMainBackground = useAuthStore(
+    (s) => s.workspaceMainBackground
+  );
+  const setWorkspaceMainBackground = useAuthStore(
+    (s) => s.setWorkspaceMainBackground
+  );
+
+  const activeMode: Mode =
+    appearanceMode === 'system' ? appearance : appearanceMode;
+
+  const mergedCatalog = useMemo(
+    () => buildMergedCatalog(customThemeCatalog),
+    [customThemeCatalog]
+  );
+
+  const themeOptions = useMemo<ThemeOption[]>(
+    () => [
+      ...DEFAULT_EDITABLE_THEME_IDS.map((id) => ({
+        id,
+        label: formatThemeLabel(id),
+        isDefault: true,
+      })),
+      ...CUSTOM_THEME_IDS.map((id) => ({
+        id,
+        label: formatThemeLabel(id),
+        isDefault: false,
+      })),
+    ],
+    []
+  );
+
+  const allowedThemeIds = useMemo(
+    () => themeOptions.map((option) => option.id),
+    [themeOptions]
+  );
+
+  const modeThemeId =
+    activeMode === 'dark' ? darkColorThemeId : lightColorThemeId;
+
+  const [activeThemeId, setActiveThemeId] = useState<string>(
+    allowedThemeIds.includes(modeThemeId) ? modeThemeId : DEFAULT_COLOR_THEME_ID
+  );
+  const [accent, setAccent] = useState('');
+  const [background, setBackground] = useState('');
+  const [ink, setInk] = useState('');
+
+  useEffect(() => {
+    const nextThemeId = allowedThemeIds.includes(modeThemeId)
+      ? modeThemeId
+      : DEFAULT_COLOR_THEME_ID;
+    setActiveThemeId(nextThemeId);
+
+    if (modeThemeId !== nextThemeId) {
+      setColorThemeForMode(activeMode, nextThemeId);
+    }
+  }, [activeMode, allowedThemeIds, modeThemeId, setColorThemeForMode]);
+
+  const fallbackSeed =
+    DEFAULT_THEME_CATALOG[activeMode][DEFAULT_COLOR_THEME_ID]?.seed ??
+    Object.values(DEFAULT_THEME_CATALOG[activeMode])[0]?.seed;
+
+  const activeTheme = useMemo<ColorThemeDefinitionV2 | null>(() => {
+    const fromMerged = mergedCatalog[activeMode]?.[activeThemeId];
+    if (fromMerged) return fromMerged;
+
+    const fromDefault = DEFAULT_THEME_CATALOG[activeMode]?.[activeThemeId];
+    if (fromDefault) {
+      return {
+        id: activeThemeId,
+        mode: activeMode,
+        seed: fromDefault.seed,
+      };
+    }
+
+    if (!fallbackSeed) return null;
+    return {
+      id: activeThemeId,
+      mode: activeMode,
+      seed: fallbackSeed,
+    };
+  }, [activeMode, activeThemeId, fallbackSeed, mergedCatalog]);
+
+  useEffect(() => {
+    if (!activeTheme) return;
+    setAccent(activeTheme.seed.accent);
+    setBackground(activeTheme.seed.background);
+    setInk(activeTheme.seed.ink);
+  }, [
+    activeTheme?.id,
+    activeTheme?.seed.accent,
+    activeTheme?.seed.background,
+    activeTheme?.seed.ink,
+    activeMode,
+  ]);
+
+  const commitThemeSeed = (
+    nextAccent: string,
+    nextBackground: string,
+    nextInk: string
+  ) => {
+    const accentHex = normalizeHexColor(nextAccent);
+    const backgroundHex = normalizeHexColor(nextBackground);
+    const inkHex = normalizeHexColor(nextInk);
+    if (!accentHex || !backgroundHex || !inkHex || !activeTheme) return;
+
+    const nextSeed: ThemeSeed = {
+      accent: accentHex,
+      background: backgroundHex,
+      ink: inkHex,
+    };
+
+    const current = activeTheme.seed;
+    if (
+      current.accent === nextSeed.accent &&
+      current.background === nextSeed.background &&
+      current.ink === nextSeed.ink
+    ) {
+      return;
+    }
+
+    const catalogDefault =
+      DEFAULT_THEME_CATALOG[activeMode][activeThemeId]?.seed;
+    if (catalogDefault) {
+      const ca = normalizeHexColor(catalogDefault.accent);
+      const cb = normalizeHexColor(catalogDefault.background);
+      const ci = normalizeHexColor(catalogDefault.ink);
+      if (
+        ca &&
+        cb &&
+        ci &&
+        nextSeed.accent === ca &&
+        nextSeed.background === cb &&
+        nextSeed.ink === ci
+      ) {
+        removeCustomThemeTemplate(activeMode, activeThemeId);
+        return;
+      }
+    }
+
+    upsertCustomThemeTemplate(activeMode, activeThemeId, nextSeed);
+  };
+
+  const handleAccentChange = (value: string) => {
+    setAccent(value);
+    commitThemeSeed(value, background, ink);
+  };
+
+  const handleBackgroundChange = (value: string) => {
+    setBackground(value);
+    commitThemeSeed(accent, value, ink);
+  };
+
+  const handleInkChange = (value: string) => {
+    setInk(value);
+    commitThemeSeed(accent, background, value);
+  };
+
+  const handleThemeChange = (themeId: string) => {
+    setActiveThemeId(themeId);
+    setColorThemeForMode(activeMode, themeId);
+  };
+
+  const resetActiveTheme = () => {
+    if (!activeTheme) return;
+
+    const defaultSeed = DEFAULT_THEME_CATALOG[activeMode][activeThemeId]?.seed;
+    if (defaultSeed) {
+      removeCustomThemeTemplate(activeMode, activeThemeId);
+      setAccent(defaultSeed.accent);
+      setBackground(defaultSeed.background);
+      setInk(defaultSeed.ink);
+      return;
+    }
+
+    if (!fallbackSeed) return;
+    upsertCustomThemeTemplate(activeMode, activeThemeId, fallbackSeed);
+    setAccent(fallbackSeed.accent);
+    setBackground(fallbackSeed.background);
+    setInk(fallbackSeed.ink);
+  };
+
+  return (
+    <div className="m-auto h-auto w-full flex-1">
+      <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-ds-text-neutral-default-default">
+              {t('setting.appearance-tab')}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mb-xl gap-6 flex flex-col">
+        <div className="item-center gap-4 rounded-2xl bg-ds-bg-neutral-default-default px-6 py-4 h-18 flex flex-row items-center justify-between">
+          <div className="text-body-base font-bold text-ds-text-neutral-default-default">
+            Mode
+          </div>
+
+          <Tabs
+            value={appearanceMode}
+            onValueChange={(value) =>
+              setAppearanceMode(value as 'light' | 'dark' | 'system')
+            }
+          >
+            <TabsList appearance="default">
+              <TabsTrigger value="light">
+                <div className="gap-1 text-label-sm flex items-center">
+                  <Sun size={16} />
+                  <span>{t('setting.light')}</span>
+                </div>
+              </TabsTrigger>
+              <TabsTrigger value="dark">
+                <div className="gap-1 text-label-sm flex items-center">
+                  <Moon size={16} />
+                  <span>{t('setting.dark')}</span>
+                </div>
+              </TabsTrigger>
+              <TabsTrigger value="system">
+                <div className="gap-1 text-label-sm flex items-center">
+                  <Monitor size={16} />
+                  <span>{t('setting.system-default')}</span>
+                </div>
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+
+        <div className="item-center gap-4 rounded-2xl bg-ds-bg-neutral-default-default px-6 py-4 flex flex-col">
+          <div className="gap-1 flex flex-col">
+            <div className="text-body-base font-bold text-ds-text-neutral-default-default">
+              Theme Customization
+            </div>
+          </div>
+
+          <div className="gap-3 flex w-full items-center justify-between">
+            <div className="min-w-0 flex-1 overflow-x-auto">
+              <Tabs value={activeThemeId} onValueChange={handleThemeChange}>
+                <TabsList appearance="default" className="min-w-max">
+                  {themeOptions.map((option) => (
+                    <TabsTrigger
+                      key={option.id}
+                      value={option.id}
+                      appearance="default"
+                    >
+                      <div className="gap-1 text-label-sm flex items-center">
+                        {option.label}
+                      </div>
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </Tabs>
+            </div>
+
+            <Button
+              variant="outline"
+              size="sm"
+              buttonContent="text"
+              buttonRadius="full"
+              textWeight="semibold"
+              onClick={resetActiveTheme}
+            >
+              <div className="gap-1 text-label-sm flex items-center">
+                <RotateCcw />
+                <span>Reset</span>
+              </div>
+            </Button>
+          </div>
+
+          <div className="bg-ds-bg-neutral-subtle-default rounded-2xl flex flex-col">
+            <ColorSeedEditor
+              label="Accent"
+              value={accent}
+              onChange={handleAccentChange}
+            />
+            <ColorSeedEditor
+              label="Background"
+              value={background}
+              onChange={handleBackgroundChange}
+            />
+            <ColorSeedEditor
+              label="Ink"
+              value={ink}
+              onChange={handleInkChange}
+            />
+            <ContrastSlider value={themeContrast} onChange={setThemeContrast} />
+          </div>
+        </div>
+
+        <div className="item-center rounded-2xl bg-ds-bg-neutral-default-default px-6 py-4 h-18 flex flex-row items-center justify-between">
+          <div className="gap-1 flex max-w-[55%] flex-col">
+            <div className="text-body-base font-bold text-ds-text-neutral-default-default">
+              {t('setting.workspace-main-background')}
+            </div>
+            <div className="text-body-sm text-ds-text-neutral-muted-default">
+              {t('setting.workspace-main-background-description')}
+            </div>
+          </div>
+          <Select
+            value={workspaceMainBackground ?? 'empty'}
+            onValueChange={(v) =>
+              setWorkspaceMainBackground(v as WorkspaceMainBackground)
+            }
+          >
+            <SelectTrigger variant="secondary" className="w-56">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="empty">
+                  {t('setting.workspace-main-background-empty')}
+                </SelectItem>
+                <SelectItem value="dots">
+                  {t('setting.workspace-main-background-dots')}
+                </SelectItem>
+                <SelectItem value="ruled">
+                  {t('setting.workspace-main-background-ruled')}
+                </SelectItem>
+                <SelectItem value="dotted">
+                  {t('setting.workspace-main-background-dotted')}
+                </SelectItem>
+                <SelectItem value="dashed">
+                  {t('setting.workspace-main-background-dashed')}
+                </SelectItem>
+                <SelectItem value="blocks">
+                  {t('setting.workspace-main-background-blocks')}
+                </SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Setting/General.tsx b/src/pages/Setting/General.tsx
index e473c79da..e39120278 100644
--- a/src/pages/Setting/General.tsx
+++ b/src/pages/Setting/General.tsx
@@ -12,12 +12,8 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-import dark from '@/assets/dark.png';
-import light from '@/assets/light.png';
-import transparent from '@/assets/transparent.png';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { useHost } from '@/host';
 import { LocaleEnum, switchLanguage } from '@/i18n';
 import { SITE_URL } from '@/lib';
 import { useAuthStore } from '@/store/authStore';
@@ -37,11 +33,11 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import useChatStoreAdapter from '@/hooks/useChatStoreAdapter';
+import { useHost } from '@/host';
 
 export default function SettingGeneral() {
-  const host = useHost();
-  const electronAPI = host?.electronAPI;
   const { t } = useTranslation();
+  const host = useHost();
   const authStore = useAuthStore();
 
   const resetInstallation = useInstallationStore((state) => state.reset);
@@ -51,69 +47,19 @@ export default function SettingGeneral() {
 
   const navigate = useNavigate();
   const [_isLoading, _setIsLoading] = useState(false);
-  const setAppearance = authStore.setAppearance;
   const language = authStore.language;
   const _setLanguage = authStore.setLanguage;
-  const appearance = authStore.appearance;
   const _fullNameRef: RefObject<HTMLInputElement> = createRef();
   const _nickNameRef: RefObject<HTMLInputElement> = createRef();
   const _workDescRef: RefObject<HTMLInputElement> = createRef();
   //Get Chatstore for the active project's task
   const { chatStore } = useChatStoreAdapter();
 
-  const [themeList, setThemeList] = useState<any>([
-    {
-      img: dark,
-      label: 'setting.dark',
-      value: 'dark',
-    },
-    {
-      img: light,
-      label: 'setting.light',
-      value: 'light',
-    },
-    {
-      img: transparent,
-      label: 'setting.transparent',
-      value: 'transparent',
-    },
-  ]);
-
   // Proxy configuration state
   const [proxyUrl, setProxyUrl] = useState('');
   const [isProxySaving, setIsProxySaving] = useState(false);
   const [proxyNeedsRestart, setProxyNeedsRestart] = useState(false);
 
-  useEffect(() => {
-    const platform = electronAPI?.getPlatform?.() ?? 'web';
-    console.log(platform);
-    const baseThemes = [
-      {
-        img: dark,
-        label: 'setting.dark',
-        value: 'dark',
-      },
-      {
-        img: light,
-        label: 'setting.light',
-        value: 'light',
-      },
-    ];
-
-    if (platform === 'darwin') {
-      setThemeList([
-        ...baseThemes,
-        {
-          img: transparent,
-          label: 'setting.transparent',
-          value: 'transparent',
-        },
-      ]);
-    } else {
-      setThemeList(baseThemes);
-    }
-  }, [electronAPI]);
-
   const languageList = [
     {
       key: LocaleEnum.English,
@@ -164,9 +110,9 @@ export default function SettingGeneral() {
   useEffect(() => {
     // Load proxy configuration from global env
     const loadProxyConfig = async () => {
-      if (electronAPI?.readGlobalEnv) {
+      if (host?.electronAPI?.readGlobalEnv) {
         try {
-          const result = await electronAPI.readGlobalEnv('HTTP_PROXY');
+          const result = await host.electronAPI.readGlobalEnv('HTTP_PROXY');
           if (result?.value) {
             setProxyUrl(result.value);
           }
@@ -176,7 +122,7 @@ export default function SettingGeneral() {
       }
     };
     loadProxyConfig();
-  }, [electronAPI]);
+  }, [host]);
 
   // Save proxy configuration
   const handleSaveProxy = async () => {
@@ -203,7 +149,7 @@ export default function SettingGeneral() {
       }
     }
 
-    if (!electronAPI?.envWrite || !electronAPI?.envRemove) {
+    if (!host?.electronAPI?.envWrite || !host?.electronAPI?.envRemove) {
       toast.error(t('setting.proxy-save-failed'));
       return;
     }
@@ -211,13 +157,13 @@ export default function SettingGeneral() {
     setIsProxySaving(true);
     try {
       if (trimmed) {
-        const result = await electronAPI.envWrite(authStore.email, {
+        const result = await host.electronAPI.envWrite(authStore.email, {
           key: 'HTTP_PROXY',
           value: trimmed,
         });
         if (!result?.success) throw new Error('envWrite returned no success');
       } else {
-        const result = await electronAPI.envRemove(
+        const result = await host.electronAPI.envRemove(
           authStore.email,
           'HTTP_PROXY'
         );
@@ -240,21 +186,21 @@ export default function SettingGeneral() {
   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">
+            <div className="text-heading-sm font-bold text-ds-text-neutral-default-default">
               {t('setting.general')}
             </div>
           </div>
         </div>
       </div>
       {/* Content Section */}
-      <div className="mb-xl flex flex-col gap-6">
+      <div className="mb-xl gap-6 flex flex-col">
         {/* Profile Section */}
-        <div className="item-center flex flex-row justify-between rounded-2xl bg-surface-secondary px-6 py-4">
-          <div className="flex flex-col gap-2">
-            <div className="text-body-base font-bold text-text-heading">
+        <div className="item-center rounded-2xl bg-ds-bg-neutral-default-default px-6 py-4 flex flex-row justify-between">
+          <div className="gap-2 flex flex-col">
+            <div className="text-body-base font-bold text-ds-text-neutral-default-default">
               {t('setting.profile')}
             </div>
             <div className="text-body-sm">
@@ -262,24 +208,34 @@ export default function SettingGeneral() {
                 i18nKey="setting.you-are-currently-signed-in-with"
                 values={{ email: authStore.email }}
                 components={{
-                  email: <span className="text-text-information underline" />,
+                  email: (
+                    <span className="text-ds-text-status-splitting-strong-default underline" />
+                  ),
                 }}
               />
             </div>
           </div>
-          <div className="flex items-center gap-sm">
+          <div className="gap-sm flex items-center">
             <Button
               onClick={() => {
                 window.location.href = `${SITE_URL}/dashboard?email=${authStore.email}`;
               }}
               variant="primary"
+              textWeight="semibold"
+              buttonContent="text"
+              buttonRadius="lg"
+              tone="neutral"
               size="sm"
             >
-              <Settings className="h-4 w-4 text-button-primary-icon-default" />
+              <Settings />
               {t('setting.manage')}
             </Button>
             <Button
               variant="outline"
+              textWeight="semibold"
+              buttonContent="text"
+              buttonRadius="lg"
+              tone="neutral"
               size="sm"
               onClick={() => {
                 chatStore.clearTasks();
@@ -291,24 +247,24 @@ export default function SettingGeneral() {
                 navigate('/login');
               }}
             >
-              <LogOut className="h-4 w-4 text-button-tertiery-text-default" />
+              <LogOut />
               {t('setting.log-out')}
             </Button>
           </div>
         </div>
 
         {/* Language Section */}
-        <div className="item-center flex flex-row justify-between rounded-2xl bg-surface-secondary px-6 py-4">
+        <div className="item-center rounded-2xl bg-ds-bg-neutral-default-default px-6 py-4 flex flex-row justify-between">
           <div className="flex flex-1 items-center">
-            <div className="text-body-base font-bold text-text-heading">
+            <div className="text-body-base font-bold text-ds-text-neutral-default-default">
               {t('setting.language')}
             </div>
           </div>
           <Select value={language} onValueChange={switchLanguage}>
-            <SelectTrigger className="w-48">
+            <SelectTrigger variant="secondary" className="w-48">
               <SelectValue placeholder={t('setting.select-language')} />
             </SelectTrigger>
-            <SelectContent className="border bg-input-bg-default">
+            <SelectContent className="bg-input-bg-default border">
               <SelectGroup>
                 <SelectItem value="system">
                   {t('setting.system-default')}
@@ -323,46 +279,13 @@ export default function SettingGeneral() {
           </Select>
         </div>
 
-        {/* Appearance Section */}
-        <div className="item-center flex flex-col justify-between gap-4 rounded-2xl bg-surface-secondary px-6 py-4">
-          <div className="text-body-base font-bold text-text-heading">
-            {t('setting.appearance')}
-          </div>
-          <div className="flex w-full flex-row items-center gap-md">
-            {themeList.map((item: any) => (
-              <div
-                key={item.label}
-                className="group flex w-full flex-col items-center gap-sm hover:cursor-pointer"
-                onClick={() => setAppearance(item.value)}
-              >
-                <img
-                  src={item.img}
-                  className={`group-hover:border-bg-fill-info-primary aspect-[183/91.67] w-full rounded-lg border border-solid border-transparent transition-all ${
-                    item.value == appearance
-                      ? 'border-bg-fill-info-primary'
-                      : ''
-                  }`}
-                  alt=""
-                />
-                <div
-                  className={`text-sm text-text-primary group-hover:underline ${
-                    item.value == appearance ? 'underline' : ''
-                  }`}
-                >
-                  {t(item.label)}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
         {/* Network Proxy Section */}
-        <div className="flex flex-col gap-4 rounded-2xl bg-surface-secondary px-6 py-4">
-          <div className="flex flex-col gap-1">
-            <div className="text-body-base font-bold text-text-heading">
+        <div className="gap-4 rounded-2xl bg-ds-bg-neutral-default-default px-6 py-4 flex flex-col">
+          <div className="gap-1 flex flex-col">
+            <div className="text-body-base font-bold text-ds-text-neutral-default-default">
               {t('setting.network-proxy')}
             </div>
-            <div className="mb-4 text-sm leading-13 text-text-secondary">
+            <div className="mb-4 text-sm leading-13 text-ds-text-neutral-muted-default">
               {t('setting.network-proxy-description')}
             </div>
           </div>
@@ -384,7 +307,7 @@ export default function SettingGeneral() {
                 size="sm"
                 onClick={
                   proxyNeedsRestart
-                    ? () => electronAPI?.restartApp()
+                    ? () => host?.electronAPI?.restartApp()
                     : handleSaveProxy
                 }
                 disabled={!proxyNeedsRestart && isProxySaving}
diff --git a/src/pages/Setting/Privacy.tsx b/src/pages/Setting/Privacy.tsx
index 60b3cf4cb..ae1127f16 100644
--- a/src/pages/Setting/Privacy.tsx
+++ b/src/pages/Setting/Privacy.tsx
@@ -42,10 +42,10 @@ 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">
+            <div className="text-heading-sm font-bold text-ds-text-neutral-default-default">
               {t('setting.privacy')}
             </div>
           </div>
@@ -53,15 +53,15 @@ 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="text-body-base font-bold text-text-heading">
+        <div className="rounded-2xl bg-ds-bg-neutral-default-default px-6 py-4">
+          <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-ds-text-neutral-default-default">
                 {t('setting.how-we-handle-your-data')}
               </div>
-              <span className="text-body-sm font-normal text-text-body">
+              <span className="text-body-sm font-normal text-ds-text-neutral-default-default">
                 {t('setting.data-privacy-description')}{' '}
                 <a
                   className="text-blue-500 no-underline"
@@ -76,7 +76,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"
@@ -87,10 +88,10 @@ 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-ds-border-neutral-default-default 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"
+                className="pl-5 text-body-sm font-normal text-ds-text-neutral-default-default"
               >
                 <li>
                   {t(
@@ -113,13 +114,13 @@ export default function SettingPrivacy() {
         </div>
 
         {/* 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="text-body-base font-bold text-text-heading">
+        <div className="rounded-2xl bg-ds-bg-neutral-default-default px-6 py-4">
+          <div className="gap-md flex items-center justify-between">
+            <div className="gap-2 flex flex-col">
+              <div className="text-body-base font-bold text-ds-text-neutral-default-default">
                 {t('setting.help-improve-eigent')}
               </div>
-              <div className="text-body-sm font-normal text-text-body">
+              <div className="text-body-sm font-normal text-ds-text-neutral-default-default">
                 {t('setting.help-improve-eigent-description')}
               </div>
             </div>
diff --git a/src/pages/Setting/index.tsx b/src/pages/Setting/index.tsx
index 58c4f428d..829599782 100644
--- a/src/pages/Setting/index.tsx
+++ b/src/pages/Setting/index.tsx
@@ -16,24 +16,68 @@ import logoBlack from '@/assets/logo/logo_black.png';
 import logoWhite from '@/assets/logo/logo_white.png';
 import VerticalNavigation, {
   type VerticalNavItem,
-} from '@/components/Navigation';
+} from '@/components/Dashboard/VerticalNav';
 import useAppVersion from '@/hooks/use-app-version';
-import { SITE_URL } from '@/lib';
+import { useHost } from '@/host';
+import Appearance from '@/pages/Setting/Appearance';
 import General from '@/pages/Setting/General';
 import Privacy from '@/pages/Setting/Privacy';
 import { useAuthStore } from '@/store/authStore';
-import { Fingerprint, Settings, TagIcon } from 'lucide-react';
-import { useState } from 'react';
+import {
+  Download,
+  Fingerprint,
+  Palette,
+  Settings,
+  TagIcon,
+} from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 export default function Setting() {
   const navigate = useNavigate();
   const location = useLocation();
-  const version = useAppVersion();
-  const { appearance } = useAuthStore();
   const { t } = useTranslation();
+  const appearance = useAuthStore((state) => state.appearance);
   const logoSrc = appearance === 'dark' ? logoWhite : logoBlack;
+  const host = useHost();
+  const ipcRenderer = host?.ipcRenderer;
+  const version = useAppVersion();
+  const [packageUpdateAvailable, setPackageUpdateAvailable] = useState(false);
+  const [packageNewVersion, setPackageNewVersion] = useState<string | null>(
+    null
+  );
+
+  useEffect(() => {
+    const ipc = ipcRenderer;
+    if (!ipc) return;
+
+    const onUpdateCanAvailable = (
+      _event: Electron.IpcRendererEvent,
+      info: VersionInfo
+    ) => {
+      setPackageUpdateAvailable(Boolean(info.update));
+      setPackageNewVersion(info.newVersion ?? null);
+    };
+
+    const onUpdateDownloaded = () => {
+      setPackageUpdateAvailable(false);
+      setPackageNewVersion(null);
+    };
+
+    ipc.on('update-can-available', onUpdateCanAvailable);
+    ipc.on('update-downloaded', onUpdateDownloaded);
+    void ipc.invoke('check-update');
+
+    return () => {
+      ipc.off('update-can-available', onUpdateCanAvailable);
+      ipc.off('update-downloaded', onUpdateDownloaded);
+    };
+  }, [ipcRenderer]);
+
+  const handleStartPackageDownload = useCallback(() => {
+    void ipcRenderer?.invoke('start-download');
+  }, [ipcRenderer]);
   // Setting menu configuration
   const settingMenus = [
     {
@@ -42,6 +86,12 @@ export default function Setting() {
       icon: Settings,
       path: '/setting/general',
     },
+    {
+      id: 'appearance',
+      name: t('setting.appearance-tab'),
+      icon: Palette,
+      path: '/setting/appearance',
+    },
     {
       id: 'privacy',
       name: t('setting.privacy'),
@@ -69,58 +119,95 @@ export default function Setting() {
   };
 
   return (
-    <div className="m-auto flex h-auto max-w-[940px] flex-col">
-      <div className="flex h-auto w-full px-6">
-        <div className="sticky top-20 flex h-full w-40 flex-shrink-0 flex-grow-0 flex-col justify-between self-start pr-6 pt-8">
-          <VerticalNavigation
-            items={
-              settingMenus.map((menu) => {
-                return {
-                  value: menu.id,
-                  label: (
-                    <span className="text-body-sm font-bold">{menu.name}</span>
-                  ),
-                };
-              }) as VerticalNavItem[]
+    <div className="flex h-auto w-full">
+      <div className="w-40 pr-6 pt-8 flex h-auto flex-shrink-0 flex-grow-0 flex-col self-start">
+        <VerticalNavigation
+          items={
+            settingMenus.map((menu) => {
+              return {
+                value: menu.id,
+                label: (
+                  <span className="text-body-sm font-bold">{menu.name}</span>
+                ),
+              };
+            }) as VerticalNavItem[]
+          }
+          value={activeTab}
+          onValueChange={handleTabChange}
+          className="min-h-0 gap-0 h-fit w-full flex-none"
+          listClassName="h-auto w-full"
+          contentClassName="hidden"
+        />
+        <button
+          type="button"
+          onClick={() =>
+            window.open(
+              'https://www.eigent.ai',
+              '_blank',
+              'noopener,noreferrer'
+            )
+          }
+          className="no-drag mt-4 flex cursor-pointer items-center bg-transparent transition-opacity duration-200 hover:opacity-60"
+        >
+          <img src={logoSrc} alt="Eigent" className="h-6 ml-3 w-auto" />
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            if (packageUpdateAvailable) {
+              handleStartPackageDownload();
+              return;
             }
-            value={activeTab}
-            onValueChange={handleTabChange}
-            className="h-full min-h-0 w-full flex-1 gap-0"
-            listClassName="w-full h-full overflow-y-auto"
-            contentClassName="hidden"
-          />
-          <div className="mt-4 flex w-full flex-shrink-0 flex-grow-0 flex-col items-center justify-center gap-4 border-x-0 border-b-0 border-t-[0.5px] border-solid border-border-secondary py-4">
-            <button
-              onClick={() =>
-                window.open(
-                  'https://github.com/eigent-ai/eigent',
-                  '_blank',
-                  'noopener,noreferrer'
-                )
-              }
-              className="flex w-full cursor-pointer flex-row items-center justify-center gap-2 rounded-lg bg-surface-tertiary px-6 py-1.5 transition-opacity duration-200 hover:opacity-60"
-            >
-              <TagIcon className="h-4 w-4 text-text-success" />
-              <div className="text-label-sm font-semibold text-text-body">
-                {version}
-              </div>
-            </button>
-            <button
-              onClick={() =>
-                window.open(SITE_URL, '_blank', 'noopener,noreferrer')
-              }
-              className="flex cursor-pointer items-center bg-transparent transition-opacity duration-200 hover:opacity-60"
-            >
-              <img src={logoSrc} alt="version-logo" className="h-5" />
-            </button>
-          </div>
-        </div>
+            window.open(
+              'https://github.com/eigent-ai/eigent',
+              '_blank',
+              'noopener,noreferrer'
+            );
+          }}
+          className={
+            packageUpdateAvailable
+              ? 'no-drag mt-4 min-w-0 gap-1.5 bg-ds-bg-neutral-subtle-default px-5 py-1 flex w-full cursor-pointer flex-row items-center justify-center rounded-full transition-opacity duration-200 hover:opacity-90'
+              : 'no-drag mt-4 min-w-0 gap-1.5 bg-ds-bg-neutral-subtle-default px-5 py-1 flex w-full cursor-pointer flex-row items-center justify-center rounded-full transition-opacity duration-200 hover:opacity-60'
+          }
+          aria-label={
+            packageUpdateAvailable
+              ? t('update.new-version-available')
+              : version || t('setting.version', { defaultValue: 'Version' })
+          }
+          title={
+            packageUpdateAvailable
+              ? [t('update.new-version-available'), packageNewVersion]
+                  .filter(Boolean)
+                  .join(' ')
+              : version
+          }
+        >
+          {packageUpdateAvailable ? (
+            <Download
+              className="h-4 w-4 text-ds-text-neutral-default-default shrink-0 stroke-2"
+              aria-hidden
+            />
+          ) : (
+            <TagIcon
+              className="h-4 w-4 text-ds-text-success-default-default shrink-0 stroke-2"
+              aria-hidden
+            />
+          )}
+          <span className="min-w-0 text-label-sm font-semibold text-ds-text-neutral-default-default flex-1 truncate text-left">
+            {packageUpdateAvailable
+              ? [t('update.new-version-available'), packageNewVersion]
+                  .filter(Boolean)
+                  .join(' ')
+              : version}
+          </span>
+        </button>
+      </div>
 
-        <div className="flex h-auto w-full flex-1 flex-col">
-          <div className="flex flex-col gap-4">
-            {activeTab === 'general' && <General />}
-            {activeTab === 'privacy' && <Privacy />}
-          </div>
+      <div className="flex h-auto w-full flex-1 flex-col">
+        <div className="gap-4 flex flex-col">
+          {activeTab === 'general' && <General />}
+          {activeTab === 'appearance' && <Appearance />}
+          {activeTab === 'privacy' && <Privacy />}
         </div>
       </div>
     </div>
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index 9e702e94a..67d58dcb0 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -301,7 +301,7 @@ export default function SignUp() {
     <div className="relative flex h-full flex-col overflow-hidden">
       {/* Titlebar with drag region and window controls */}
       <div
-        className="absolute left-0 right-0 top-0 z-50 flex !h-9 items-center justify-between py-1 pl-2"
+        className="left-0 right-0 top-0 !h-9 py-1 pl-2 absolute z-50 flex items-center justify-between"
         id="signup-titlebar"
         ref={titlebarRef}
         style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
@@ -331,23 +331,23 @@ export default function SignUp() {
 
       {/* Main content - image extends to top, form has padding */}
       <div
-        className={`flex h-full items-center justify-center gap-2 px-2 pb-2 pt-10`}
+        className={`gap-2 px-1 pb-1 pt-10 flex h-full items-center justify-center`}
       >
         <div
-          className="flex h-full min-h-0 w-full flex-col items-center justify-center overflow-hidden rounded-2xl border-solid border-border-tertiary bg-surface-secondary px-2 pb-2"
+          className="min-h-0 rounded-2xl bg-ds-bg-neutral-subtle-default px-2 pb-2 flex h-full w-full flex-col items-center justify-center overflow-hidden"
           style={{
             backgroundImage: `url(${background})`,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
           }}
         >
-          <div className="relative flex w-80 flex-1 flex-col items-center justify-center pt-8">
+          <div className="w-80 pt-8 relative flex flex-1 flex-col items-center justify-center">
             <img
               src={eigentLogo}
-              className="absolute left-1/2 top-10 h-16 w-16 -translate-x-1/2"
+              className="top-10 h-16 w-16 absolute left-1/2 -translate-x-1/2"
             />
             <div className="mb-4 flex items-end justify-between self-stretch">
-              <div className="text-heading-lg font-bold text-text-heading">
+              <div className="text-heading-lg font-bold text-ds-text-neutral-default-default">
                 {t('layout.sign-up')}
               </div>
               <Button
@@ -359,12 +359,12 @@ export default function SignUp() {
               </Button>
             </div>
             {HAS_STACK_KEYS && (
-              <div className="w-full pt-6">
+              <div className="pt-6 w-full">
                 <Button
                   variant="primary"
                   size="lg"
                   onClick={() => handleReloadBtn('google')}
-                  className="mb-4 w-full justify-center rounded-[24px] text-center font-inter text-[15px] font-bold leading-[22px] text-[#F5F5F5] transition-all duration-300 ease-in-out"
+                  className="mb-4 font-inter font-bold ease-in-out rounded-2xl text-body-md text-ds-text-brand-inverse-default w-full justify-center text-center transition-all duration-300"
                   disabled={isLoading}
                 >
                   <img src={google} className="h-5 w-5" />
@@ -376,7 +376,7 @@ export default function SignUp() {
                   variant="primary"
                   size="lg"
                   onClick={() => handleReloadBtn('github')}
-                  className="mb-4 w-full justify-center rounded-[24px] text-center font-inter text-[15px] font-bold leading-[22px] text-[#F5F5F5] transition-all duration-300 ease-in-out"
+                  className="mb-4 font-inter font-bold ease-in-out rounded-2xl text-body-md text-ds-text-brand-inverse-default w-full justify-center text-center transition-all duration-300"
                   disabled={isLoading}
                 >
                   <img src={github2} className="h-5 w-5" />
@@ -387,17 +387,17 @@ export default function SignUp() {
               </div>
             )}
             {HAS_STACK_KEYS && (
-              <div className="mb-6 mt-2 w-full text-center font-inter text-[15px] font-medium leading-[22px] text-[#222]">
+              <div className="mb-6 mt-2 font-inter font-medium text-ds-text-neutral-default-default text-body-md w-full text-center">
                 {t('layout.or')}
               </div>
             )}
-            <div className="flex w-full flex-col gap-4">
+            <div className="gap-4 flex w-full flex-col">
               {generalError && (
-                <p className="mb-4 mt-1 text-label-md text-text-cuation">
+                <p className="mb-4 mt-1 text-label-md text-ds-text-status-error-strong-default">
                   {generalError}
                 </p>
               )}
-              <div className="relative mb-4 flex w-full flex-col gap-4">
+              <div className="mb-4 gap-4 relative flex w-full flex-col">
                 <Input
                   id="email"
                   type="email"
diff --git a/src/shared/modelProviderImages.ts b/src/shared/modelProviderImages.ts
new file mode 100644
index 000000000..39dfddc9e
--- /dev/null
+++ b/src/shared/modelProviderImages.ts
@@ -0,0 +1,87 @@
+// ========= 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 anthropicImage from '@/assets/model/anthropic.svg';
+import azureImage from '@/assets/model/azure.svg';
+import bedrockImage from '@/assets/model/bedrock.svg';
+import deepseekImage from '@/assets/model/deepseek.svg';
+import eigentImage from '@/assets/model/eigent.svg';
+import ernieImage from '@/assets/model/ernie.png';
+import geminiImage from '@/assets/model/gemini.svg';
+import llamaCppImage from '@/assets/model/llamacpp.svg';
+import lmstudioImage from '@/assets/model/lmstudio.svg';
+import minimaxImage from '@/assets/model/minimax.svg';
+import modelarkImage from '@/assets/model/modelark.svg';
+import moonshotImage from '@/assets/model/moonshot.svg';
+import ollamaImage from '@/assets/model/ollama.svg';
+import openaiImage from '@/assets/model/openai.svg';
+import openrouterImage from '@/assets/model/openrouter.svg';
+import qwenImage from '@/assets/model/qwen.svg';
+import sglangImage from '@/assets/model/sglang.svg';
+import vllmImage from '@/assets/model/vllm.svg';
+import zaiImage from '@/assets/model/zai.svg';
+import {
+  DARK_FILL_MODELS,
+  LLAMA_CPP_PROVIDER_ID,
+  PROVIDER_AVATAR_URLS,
+} from '@/pages/Agents/localModels';
+
+const MODEL_PROVIDER_IMAGE_MAP: Record<string, string> = {
+  cloud: eigentImage,
+  openai: openaiImage,
+  anthropic: anthropicImage,
+  gemini: geminiImage,
+  openrouter: openrouterImage,
+  'tongyi-qianwen': qwenImage,
+  deepseek: deepseekImage,
+  ernie: ernieImage,
+  minimax: minimaxImage,
+  'z.ai': zaiImage,
+  moonshot: moonshotImage,
+  ModelArk: modelarkImage,
+  'samba-nova': PROVIDER_AVATAR_URLS['samba-nova'],
+  grok: PROVIDER_AVATAR_URLS.grok,
+  mistral: PROVIDER_AVATAR_URLS.mistral,
+  'aws-bedrock': bedrockImage,
+  azure: azureImage,
+  'openai-compatible-model': openaiImage,
+  ollama: ollamaImage,
+  vllm: vllmImage,
+  sglang: sglangImage,
+  lmstudio: lmstudioImage,
+  [LLAMA_CPP_PROVIDER_ID]: llamaCppImage,
+  'local-ollama': ollamaImage,
+  'local-vllm': vllmImage,
+  'local-sglang': sglangImage,
+  'local-lmstudio': lmstudioImage,
+  'local-llama.cpp': llamaCppImage,
+};
+
+/** Resolve provider / tab id to a logo URL for dropdowns and sidebars. */
+export function getModelImage(modelId: string | null): string | null {
+  if (!modelId) return null;
+  return MODEL_PROVIDER_IMAGE_MAP[modelId] ?? null;
+}
+
+/** Whether a logo should be inverted in dark mode (fill-style logos). */
+export function needsInvertModelImage(
+  modelId: string | null,
+  appearance: string | undefined
+): boolean {
+  if (!modelId || appearance !== 'dark') return false;
+  const key = modelId.startsWith('local-')
+    ? modelId.replace('local-', '')
+    : modelId;
+  return DARK_FILL_MODELS.has(key);
+}
diff --git a/src/store/authStore.ts b/src/store/authStore.ts
index 91c594dc4..afaed2384 100644
--- a/src/store/authStore.ts
+++ b/src/store/authStore.ts
@@ -12,6 +12,11 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
+import {
+  DEFAULT_COLOR_THEME_ID,
+  getRecommendedContrast,
+} from '@/lib/themeTokens/catalog';
+import type { Mode, ThemeCatalog, ThemeSeed } from '@/lib/themeTokens/types';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
@@ -19,6 +24,16 @@ import { persist } from 'zustand/middleware';
 type InitState = 'carousel' | 'done';
 type ModelType = 'cloud' | 'local' | 'custom';
 type PreferredIDE = 'vscode' | 'cursor' | 'system';
+type AppearanceMode = Mode | 'system';
+
+/** Main workspace panel background (Workforce + Session tabs only). */
+export type WorkspaceMainBackground =
+  | 'empty'
+  | 'dots'
+  | 'blocks'
+  | 'ruled'
+  | 'dotted'
+  | 'dashed';
 type CloudModelType =
   | 'gemini-3.1-pro-preview'
   | 'gemini-3-pro-preview'
@@ -53,7 +68,12 @@ interface AuthState {
   user_id: number | null;
 
   // application settings
-  appearance: string;
+  appearance: Mode;
+  appearanceMode: AppearanceMode;
+  lightColorThemeId: string;
+  darkColorThemeId: string;
+  customThemeCatalog: ThemeCatalog;
+  themeContrast: number;
   language: string;
   isFirstLaunch: boolean;
   modelType: ModelType;
@@ -63,6 +83,9 @@ interface AuthState {
   // IDE preference
   preferredIDE: PreferredIDE;
 
+  /** Pattern behind the main workspace area (Workforce / Session). */
+  workspaceMainBackground: WorkspaceMainBackground;
+
   // shared token
   share_token?: string | null;
 
@@ -79,12 +102,23 @@ interface AuthState {
 
   // set related methods
   setAppearance: (appearance: string) => void;
+  setAppearanceMode: (mode: AppearanceMode) => void;
+  setResolvedAppearance: (appearance: Mode) => void;
+  setColorThemeForMode: (mode: Mode, colorThemeId: string) => void;
+  upsertCustomThemeTemplate: (
+    mode: Mode,
+    themeId: string,
+    seed: ThemeSeed
+  ) => void;
+  removeCustomThemeTemplate: (mode: Mode, themeId: string) => void;
+  setThemeContrast: (contrast: number) => void;
   setLanguage: (language: string) => void;
   setInitState: (initState: InitState) => void;
   setModelType: (modelType: ModelType) => void;
   setCloudModelType: (cloud_model_type: CloudModelType) => void;
   setIsFirstLaunch: (isFirstLaunch: boolean) => void;
   setPreferredIDE: (ide: PreferredIDE) => void;
+  setWorkspaceMainBackground: (value: WorkspaceMainBackground) => void;
 
   // worker related methods
   setWorkerList: (workerList: Agent[]) => void;
@@ -107,11 +141,20 @@ const authStore = create<AuthState>()(
       email: null,
       user_id: null,
       appearance: 'light',
+      appearanceMode: 'light',
+      lightColorThemeId: DEFAULT_COLOR_THEME_ID,
+      darkColorThemeId: DEFAULT_COLOR_THEME_ID,
+      customThemeCatalog: {
+        light: {},
+        dark: {},
+      },
+      themeContrast: getRecommendedContrast(),
       language: 'system',
       isFirstLaunch: true,
       modelType: 'cloud',
       cloud_model_type: getRandomDefaultModel(),
       preferredIDE: 'system',
+      workspaceMainBackground: 'empty',
       initState: 'carousel',
       share_token: null,
       localProxyValue: null,
@@ -132,7 +175,64 @@ const authStore = create<AuthState>()(
         }),
 
       // set related methods
-      setAppearance: (appearance) => set({ appearance }),
+      setAppearance: (appearance) =>
+        set(() => {
+          if (appearance === 'transparent') {
+            return { appearance: 'light', appearanceMode: 'light' };
+          }
+
+          if (appearance === 'system') {
+            return { appearanceMode: 'system' };
+          }
+
+          const normalized: Mode = appearance === 'dark' ? 'dark' : 'light';
+          return { appearance: normalized, appearanceMode: normalized };
+        }),
+
+      setAppearanceMode: (appearanceMode) => set({ appearanceMode }),
+
+      setResolvedAppearance: (appearance) => set({ appearance }),
+
+      setColorThemeForMode: (mode, colorThemeId) =>
+        set(
+          mode === 'dark'
+            ? { darkColorThemeId: colorThemeId }
+            : { lightColorThemeId: colorThemeId }
+        ),
+
+      upsertCustomThemeTemplate: (mode, themeId, seed) =>
+        set((state) => ({
+          customThemeCatalog: {
+            ...state.customThemeCatalog,
+            [mode]: {
+              ...state.customThemeCatalog[mode],
+              [themeId]: {
+                id: themeId,
+                mode,
+                seed,
+              },
+            },
+          },
+        })),
+
+      removeCustomThemeTemplate: (mode, themeId) =>
+        set((state) => {
+          const modeCatalog = state.customThemeCatalog[mode] ?? {};
+          if (!modeCatalog[themeId]) return {};
+
+          const { [themeId]: _removed, ...rest } = modeCatalog;
+          return {
+            customThemeCatalog: {
+              ...state.customThemeCatalog,
+              [mode]: rest,
+            },
+          };
+        }),
+
+      setThemeContrast: (contrast) =>
+        set({
+          themeContrast: Math.min(100, Math.max(0, Math.round(contrast))),
+        }),
 
       setLanguage: (language) => set({ language }),
 
@@ -149,6 +249,9 @@ const authStore = create<AuthState>()(
 
       setPreferredIDE: (preferredIDE) => set({ preferredIDE }),
 
+      setWorkspaceMainBackground: (workspaceMainBackground) =>
+        set({ workspaceMainBackground }),
+
       setLocalProxyValue: (value) => set({ localProxyValue: value }),
 
       // worker related methods
@@ -194,18 +297,80 @@ const authStore = create<AuthState>()(
     }),
     {
       name: 'auth-storage',
+      version: 6,
+      migrate: (persistedState, _version) => {
+        const s = persistedState as
+          | {
+              appearance?: string;
+              appearanceMode?: AppearanceMode;
+              customThemeCatalog?: Partial<ThemeCatalog>;
+              workspaceMainBackground?: string;
+            }
+          | undefined;
+        if (!s) return persistedState as typeof persistedState;
+
+        const rawWmb = s.workspaceMainBackground;
+        let workspaceMainBackground: WorkspaceMainBackground = 'empty';
+        if (
+          rawWmb === 'dots' ||
+          rawWmb === 'blocks' ||
+          rawWmb === 'ruled' ||
+          rawWmb === 'dotted' ||
+          rawWmb === 'dashed'
+        ) {
+          workspaceMainBackground = rawWmb;
+        } else if (rawWmb === 'margin-ruled') {
+          workspaceMainBackground = 'ruled';
+        } else if (rawWmb === 'empty' || rawWmb === 'none') {
+          workspaceMainBackground = 'empty';
+        }
+
+        const normalizedAppearance: Mode =
+          s.appearance === 'dark' ? 'dark' : 'light';
+        const normalizedAppearanceMode: AppearanceMode =
+          s.appearanceMode === 'system' || s.appearanceMode === 'dark'
+            ? s.appearanceMode
+            : normalizedAppearance;
+        const normalizedCustomCatalog: ThemeCatalog = {
+          light: s.customThemeCatalog?.light ?? {},
+          dark: s.customThemeCatalog?.dark ?? {},
+        };
+
+        if (s.appearance === 'transparent') {
+          return {
+            ...s,
+            appearance: 'light',
+            appearanceMode: 'light',
+            customThemeCatalog: normalizedCustomCatalog,
+            workspaceMainBackground,
+          };
+        }
+        return {
+          ...s,
+          appearance: normalizedAppearance,
+          appearanceMode: normalizedAppearanceMode,
+          customThemeCatalog: normalizedCustomCatalog,
+          workspaceMainBackground,
+        } as typeof persistedState;
+      },
       partialize: (state) => ({
         token: state.token,
         username: state.username,
         email: state.email,
         user_id: state.user_id,
         appearance: state.appearance,
+        appearanceMode: state.appearanceMode,
+        lightColorThemeId: state.lightColorThemeId,
+        darkColorThemeId: state.darkColorThemeId,
+        customThemeCatalog: state.customThemeCatalog,
+        themeContrast: state.themeContrast,
         language: state.language,
         modelType: state.modelType,
         cloud_model_type: state.cloud_model_type,
         initState: state.initState,
         isFirstLaunch: state.isFirstLaunch,
         preferredIDE: state.preferredIDE,
+        workspaceMainBackground: state.workspaceMainBackground,
         localProxyValue: state.localProxyValue,
         workerListData: state.workerListData,
       }),
diff --git a/src/store/chatStore.ts b/src/store/chatStore.ts
index 7cffe295a..7be709151 100644
--- a/src/store/chatStore.ts
+++ b/src/store/chatStore.ts
@@ -16,6 +16,7 @@ import {
   fetchDelete,
   fetchPost,
   fetchPut,
+  getBaseURL,
   proxyFetchGet,
   proxyFetchPost,
   proxyFetchPut,
@@ -85,6 +86,72 @@ function getHostIpcRenderer() {
   return _host?.ipcRenderer ?? null;
 }
 
+function includesBrowserAgent(workerList: Agent[]): boolean {
+  return workerList.some((worker) => {
+    if (worker.type === 'browser_agent' || worker.agent_id === 'browser_agent')
+      return true;
+    const tools = worker.workerInfo?.tools || worker.tools || [];
+    return Array.isArray(tools) && tools.includes('Browser Toolkit');
+  });
+}
+
+function getPersistedStepTimeMs(message: AgentMessage): number | null {
+  if (
+    typeof message.timestamp === 'number' &&
+    Number.isFinite(message.timestamp)
+  ) {
+    return message.timestamp < 1_000_000_000_000
+      ? message.timestamp * 1000
+      : message.timestamp;
+  }
+
+  if (message.created_at) {
+    const parsed = Date.parse(message.created_at);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+
+  return null;
+}
+
+async function resolveCdpBrowsersForRequest(
+  shouldEnsureBrowser: boolean
+): Promise<{
+  browser_port?: number;
+  cdp_browsers: any[];
+}> {
+  const ipc = getHostIpcRenderer();
+  if (!ipc?.invoke) {
+    return { cdp_browsers: [] };
+  }
+
+  const browser_port = await ipc.invoke('get-browser-port');
+  let cdp_browsers = (await ipc.invoke('get-cdp-browsers')) ?? [];
+
+  if (shouldEnsureBrowser && cdp_browsers.length === 0) {
+    const launchResult = await ipc.invoke('launch-cdp-browser');
+    if (launchResult?.success) {
+      cdp_browsers = (await ipc.invoke('get-cdp-browsers')) ?? [];
+      if (cdp_browsers.length === 0 && launchResult.port) {
+        cdp_browsers = [
+          {
+            id: `launched-${launchResult.port}`,
+            port: launchResult.port,
+            isExternal: false,
+            name: `Launched Browser (${launchResult.port})`,
+          },
+        ];
+      }
+    } else {
+      console.warn(
+        'Failed to launch managed CDP browser:',
+        launchResult?.error || launchResult
+      );
+    }
+  }
+
+  return { browser_port, cdp_browsers };
+}
+
 interface Task {
   messages: Message[];
   type: string;
@@ -405,6 +472,181 @@ const autoConfirmTimers: Record<string, ReturnType<typeof setTimeout>> = {};
 // Track active SSE connections for proper cleanup
 const activeSSEControllers: Record<string, AbortController> = {};
 
+const FINAL_OUTPUT_FILE_PATH_REGEX =
+  /(?:[A-Za-z]:)?[\\/][^\s`"'<>|*]+?\.[A-Za-z0-9]{1,12}(?=$|[\s`"'<>|*),;:\]}])/g;
+
+const FINAL_OUTPUT_FILE_EXTENSIONS = new Set([
+  'csv',
+  'doc',
+  'docx',
+  'gif',
+  'htm',
+  'html',
+  'jpeg',
+  'jpg',
+  'json',
+  'log',
+  'md',
+  'pdf',
+  'png',
+  'ppt',
+  'pptx',
+  'svg',
+  'tsv',
+  'txt',
+  'webp',
+  'xls',
+  'xlsx',
+  'xml',
+  'zip',
+]);
+
+function normalizeOutputPath(path: string): string {
+  return path.replace(/\\/g, '/').trim();
+}
+
+function getOutputFileNameFromPath(path: string): string {
+  return normalizeOutputPath(path).split('/').pop() || '';
+}
+
+function getFileTypeFromName(name: string): string {
+  const extension = name.split('.').pop()?.toLowerCase() || '';
+  return extension === name.toLowerCase() ? '' : extension;
+}
+
+function getProjectRelativeFilePath(
+  filePath: string,
+  projectId?: string
+): string | undefined {
+  const normalizedPath = normalizeOutputPath(filePath);
+  if (projectId) {
+    const projectMarker = `/project_${projectId}/`;
+    const projectIndex = normalizedPath.indexOf(projectMarker);
+    if (projectIndex !== -1) {
+      return normalizedPath.slice(projectIndex + projectMarker.length);
+    }
+  }
+
+  return normalizedPath.match(/\/project_[^/]+\/(.+)$/)?.[1];
+}
+
+function buildRemoteFileInfoPath({
+  baseURL,
+  email,
+  projectId,
+  relativePath,
+}: {
+  baseURL?: string;
+  email?: string;
+  projectId?: string;
+  relativePath?: string;
+}): string | undefined {
+  if (!baseURL || !email || !projectId || !relativePath) {
+    return undefined;
+  }
+
+  const params = new URLSearchParams({
+    path: relativePath,
+    project_id: projectId,
+    email,
+  });
+
+  return `${baseURL.replace(/\/$/, '')}/files/stream?${params.toString()}`;
+}
+
+function extractFinalOutputFileList(
+  content: string,
+  projectId?: string,
+  email?: string,
+  baseURL?: string
+): FileInfo[] {
+  if (!content) {
+    return [];
+  }
+
+  const fileInfos: FileInfo[] = [];
+  const seen = new Set<string>();
+
+  for (const match of content.matchAll(FINAL_OUTPUT_FILE_PATH_REGEX)) {
+    const filePath = normalizeOutputPath(match[0]);
+    if (!filePath || filePath.startsWith('//') || filePath.includes('://')) {
+      continue;
+    }
+
+    const name = getOutputFileNameFromPath(filePath);
+    const type = getFileTypeFromName(name);
+    if (!name || !FINAL_OUTPUT_FILE_EXTENSIONS.has(type)) {
+      continue;
+    }
+
+    const relativePath = getProjectRelativeFilePath(filePath, projectId);
+    const remotePath = buildRemoteFileInfoPath({
+      baseURL,
+      email,
+      projectId,
+      relativePath,
+    });
+    const identity = normalizeOutputPath(relativePath || filePath);
+    if (seen.has(identity)) {
+      continue;
+    }
+
+    seen.add(identity);
+    fileInfos.push({
+      name,
+      type,
+      path: remotePath || filePath,
+      icon: FileText,
+      relativePath,
+      isRemote: Boolean(remotePath),
+    });
+  }
+
+  return fileInfos;
+}
+
+function getFileInfoIdentities(file: FileInfo): string[] {
+  return [
+    file.relativePath,
+    file.path,
+    file.name,
+    getOutputFileNameFromPath(file.path || ''),
+  ]
+    .filter(Boolean)
+    .map((value) => normalizeOutputPath(value as string).toLowerCase());
+}
+
+function mergeFileInfoLists(
+  existingFileList: FileInfo[],
+  extractedFileList: FileInfo[]
+): FileInfo[] {
+  const merged = [...existingFileList];
+  const mergedIdentities = merged.map(getFileInfoIdentities);
+
+  extractedFileList.forEach((file) => {
+    const identities = getFileInfoIdentities(file);
+    const existingIndex = mergedIdentities.findIndex((existingIdentities) =>
+      identities.some((identity) => existingIdentities.includes(identity))
+    );
+
+    if (existingIndex === -1) {
+      merged.push(file);
+      mergedIdentities.push(identities);
+      return;
+    }
+
+    if (file.isRemote && !merged[existingIndex].isRemote) {
+      merged[existingIndex] = {
+        ...merged[existingIndex],
+        ...file,
+      };
+      mergedIdentities[existingIndex] = identities;
+    }
+  });
+
+  return merged;
+}
+
 const normalizeToolkitMessage = (value: unknown) => {
   if (typeof value === 'string') return value;
   if (value == null) return '';
@@ -812,6 +1054,8 @@ const chatStore = (initial?: Partial<ChatStore>) =>
       let historyId: string | null = projectStore.getHistoryId(project_id);
       let snapshots: any = [];
       let skipFirstConfirm = true;
+      let playbackFirstStepTimeMs: number | null = null;
+      let playbackLastStepTimeMs: number | null = null;
 
       // replay or share request
       if (type) {
@@ -964,9 +1208,9 @@ const chatStore = (initial?: Partial<ChatStore>) =>
       let browser_port: number | undefined;
       let cdp_browsers: any[] = [];
       try {
-        browser_port = await getHostIpcRenderer()?.invoke?.('get-browser-port');
-        cdp_browsers =
-          (await getHostIpcRenderer()?.invoke?.('get-cdp-browsers')) ?? [];
+        ({ browser_port, cdp_browsers } = await resolveCdpBrowsersForRequest(
+          includesBrowserAgent(workerList)
+        ));
       } catch {
         // Web mode: no CDP
       }
@@ -1075,6 +1319,14 @@ const chatStore = (initial?: Partial<ChatStore>) =>
             return;
           }
 
+          if (type) {
+            const stepTimeMs = getPersistedStepTimeMs(agentMessages);
+            if (stepTimeMs !== null) {
+              playbackFirstStepTimeMs ??= stepTimeMs;
+              playbackLastStepTimeMs = stepTimeMs;
+            }
+          }
+
           if (
             agentMessages &&
             typeof agentMessages === 'object' &&
@@ -1342,8 +1594,7 @@ const chatStore = (initial?: Partial<ChatStore>) =>
               const ttft =
                 performance.now() - ttftTracking[currentId].confirmedAt;
               console.log(
-                `%c[TTFT] 🚀 Time to First Token: ${ttft.toFixed(2)}ms - First streaming token received for task ${currentId}`,
-                'color: #4CAF50; font-weight: bold'
+                `[TTFT] Time to First Token: ${ttft.toFixed(2)}ms - first streaming token for task ${currentId}`
               );
             }
 
@@ -2226,8 +2477,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() || '';
@@ -2597,8 +2851,15 @@ const chatStore = (initial?: Partial<ChatStore>) =>
             const task = tasks[currentTaskId];
             let taskTime = task.taskTime;
             let elapsed = task.elapsed;
-            // if task is running, compute current time
-            if (taskTime !== 0) {
+            const playbackElapsed =
+              type &&
+              playbackFirstStepTimeMs !== null &&
+              playbackLastStepTimeMs !== null
+                ? Math.max(0, playbackLastStepTimeMs - playbackFirstStepTimeMs)
+                : null;
+            if (playbackElapsed !== null) {
+              elapsed = playbackElapsed;
+            } else if (taskTime !== 0) {
               const currentTime = Date.now();
               elapsed += currentTime - taskTime;
             }
@@ -2628,6 +2889,20 @@ const chatStore = (initial?: Partial<ChatStore>) =>
               endMessage = agent_summary_end.summary || '';
             }
 
+            const outputProjectId =
+              project_id || projectStore.activeProjectId || undefined;
+            const outputBaseURL = await getBaseURL().catch(() => '');
+            const finalOutputFileList = extractFinalOutputFileList(
+              endMessage,
+              outputProjectId,
+              email || undefined,
+              outputBaseURL || undefined
+            );
+            const mergedFileList = mergeFileInfoLists(
+              fileList,
+              finalOutputFileList
+            );
+
             console.log('endMessage', endMessage);
             newMessage = {
               id: generateUniqueId(),
@@ -2635,7 +2910,7 @@ const chatStore = (initial?: Partial<ChatStore>) =>
               content: endMessage || '',
               step: agentMessages.step,
               isConfirm: false,
-              fileList: fileList,
+              fileList: mergedFileList,
             };
 
             addMessages(currentTaskId, newMessage);
diff --git a/src/store/connectionStore.ts b/src/store/connectionStore.ts
index 82249cc6a..434d8d373 100644
--- a/src/store/connectionStore.ts
+++ b/src/store/connectionStore.ts
@@ -17,6 +17,8 @@
  * Used by ConnectionProvider and http.ts getBaseURL.
  */
 
+import { createHost } from '@/host/createHost';
+
 export type ConnectionChannel =
   | 'desktop'
   | 'web'
@@ -38,14 +40,8 @@ export interface ConnectionConfig {
 const SESSION_STORAGE_KEY = 'eigent_session_id';
 
 function isWebRuntime(): boolean {
-  if (typeof window === 'undefined') {
-    return false;
-  }
-  const win = window as Window & {
-    electronAPI?: unknown;
-    ipcRenderer?: unknown;
-  };
-  return !win.electronAPI && !win.ipcRenderer;
+  const host = createHost();
+  return !host.electronAPI && !host.ipcRenderer;
 }
 
 function readStoredSessionId(): string | undefined {
diff --git a/src/store/pageTabStore.ts b/src/store/pageTabStore.ts
index 3f2f4aa91..a25287b15 100644
--- a/src/store/pageTabStore.ts
+++ b/src/store/pageTabStore.ts
@@ -1,56 +1,220 @@
-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 type { SessionModeType } from '@/types/constants';
+import { SessionMode } from '@/types/constants';
+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 (sidebar → main panel)
+  activeWorkspaceTab:
+    | 'workforce'
+    | 'inbox'
+    | 'triggers'
+    | 'sessions'
+    | 'session';
+  setActiveWorkspaceTab: (
+    tab: 'workforce' | 'inbox' | 'triggers' | 'sessions' | 'session',
+    /** 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 page left sidebar: icon-only rail (labels fade + width collapse). Persisted. */
+  projectSidebarFolded: boolean;
+  toggleProjectSidebarFolded: () => void;
+  setProjectSidebarFolded: (folded: boolean) => 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;
+  /** Incremented to open the add-trigger dialog from the sidebar (Home owns dialog state). */
+  triggerAddDialogRequestId: number;
+  requestOpenTriggerAddDialog: () => void;
+  /** Session view: workforce vs single-agent side panel (Workspace toggle + Session). */
+  sessionSidePanelMode: SessionModeType;
+  setSessionSidePanelMode: (mode: SessionModeType) => 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 }),
+      projectSidebarFolded: false,
+      toggleProjectSidebarFolded: () =>
+        set((state) => ({
+          projectSidebarFolded: !state.projectSidebarFolded,
+        })),
+      setProjectSidebarFolded: (folded) =>
+        set({ projectSidebarFolded: folded }),
+      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) => {
+          const tab = state.activeWorkspaceTab;
+          const alreadyOnWorkspaceChat =
+            tab === 'workforce' || tab === 'session' || tab === 'sessions';
+          return {
+            ...(alreadyOnWorkspaceChat
+              ? {}
+              : { activeWorkspaceTab: 'session' as const }),
+            workspaceChatFocusRequestId: state.workspaceChatFocusRequestId + 1,
+          };
+        }),
+      triggerAddDialogRequestId: 0,
+      requestOpenTriggerAddDialog: () =>
+        set((state) => {
+          const newUnviewedTabs = new Set(state.unviewedTabs);
+          newUnviewedTabs.delete('triggers');
+          return {
+            activeWorkspaceTab: 'triggers',
+            unviewedTabs: newUnviewedTabs,
+            triggerAddDialogRequestId: state.triggerAddDialogRequestId + 1,
+          };
+        }),
+      sessionSidePanelMode: SessionMode.WORKFORCE,
+      setSessionSidePanelMode: (mode) => set({ sessionSidePanelMode: mode }),
     }),
-}))
+    {
+      name: 'eigent-page-tab',
+      partialize: (state) => ({
+        projectSidebarFolded: state.projectSidebarFolded,
+        customAgentFolderPathByProjectId:
+          state.customAgentFolderPathByProjectId,
+        sessionSidePanelMode: state.sessionSidePanelMode,
+      }),
+    }
+  )
+);
diff --git a/src/components/ui/button.stories.tsx b/src/stories/ui/Button.stories.tsx
similarity index 65%
rename from src/components/ui/button.stories.tsx
rename to src/stories/ui/Button.stories.tsx
index a0e91af11..159c2d333 100644
--- a/src/components/ui/button.stories.tsx
+++ b/src/stories/ui/Button.stories.tsx
@@ -12,10 +12,10 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
+import { Button } from '@/components/ui/button';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Download, Plus, Trash2 } from 'lucide-react';
 import { expect, fn, userEvent, within } from 'storybook/test';
-import { Button } from './button';
 
 const meta: Meta<typeof Button> = {
   title: 'UI/Button',
@@ -23,21 +23,36 @@ const meta: Meta<typeof Button> = {
   argTypes: {
     variant: {
       control: 'select',
-      options: [
-        'primary',
-        'secondary',
-        'outline',
-        'ghost',
-        'success',
-        'cuation',
-        'information',
-        'warning',
-      ],
+      options: ['primary', 'secondary', 'outline', 'ghost'],
+      description:
+        'Component chrome pattern. Legacy one-word variants are still accepted for compatibility.',
+    },
+    emphasis: {
+      control: 'select',
+      options: ['subtle', 'muted', 'default', 'strong', 'inverse'],
+      description: 'Visual intensity axis, independent from semantic tone.',
+    },
+    tone: {
+      control: 'select',
+      options: ['neutral', 'success', 'error', 'information', 'warning'],
+      description: 'Semantic palette (pairs with variant).',
     },
     size: {
       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',
     },
@@ -51,6 +66,7 @@ const meta: Meta<typeof Button> = {
   args: {
     children: 'Button',
     variant: 'primary',
+    tone: 'neutral',
     size: 'md',
   },
 };
@@ -87,16 +103,26 @@ export const Ghost: Story = {
   },
 };
 
+export const Inverse: Story = {
+  args: {
+    variant: 'primary',
+    emphasis: 'inverse',
+    children: 'Inverse (canvas + ink)',
+  },
+};
+
 export const Success: Story = {
   args: {
-    variant: 'success',
+    variant: 'primary',
+    tone: 'success',
     children: 'Success Button',
   },
 };
 
 export const Warning: Story = {
   args: {
-    variant: 'warning',
+    variant: 'primary',
+    tone: 'warning',
     children: 'Warning Button',
   },
 };
@@ -134,20 +160,51 @@ export const IconOnly: Story = {
 
 export const AllVariants: Story = {
   render: () => (
-    <div className="flex flex-wrap gap-4">
-      <Button variant="primary">Primary</Button>
-      <Button variant="secondary">Secondary</Button>
-      <Button variant="outline">Outline</Button>
-      <Button variant="ghost">Ghost</Button>
-      <Button variant="success">Success</Button>
-      <Button variant="warning">Warning</Button>
+    <div className="gap-6 flex flex-col">
+      <div className="gap-4 flex flex-wrap items-center">
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="primary" emphasis="inverse">
+          Inverse
+        </Button>
+      </div>
+      <div className="gap-4 flex flex-wrap items-center">
+        <Button variant="primary" tone="success">
+          Success
+        </Button>
+        <Button variant="primary" tone="error">
+          Error
+        </Button>
+        <Button variant="primary" tone="information">
+          Information
+        </Button>
+        <Button variant="primary" tone="warning">
+          Warning
+        </Button>
+      </div>
+      <div className="gap-4 flex flex-wrap items-center">
+        <Button variant="primary" emphasis="subtle">
+          Subtle
+        </Button>
+        <Button variant="primary" emphasis="muted">
+          Muted
+        </Button>
+        <Button variant="primary" emphasis="default">
+          Default
+        </Button>
+        <Button variant="primary" emphasis="strong">
+          Strong
+        </Button>
+      </div>
     </div>
   ),
 };
 
 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 +220,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/dialog.stories.tsx b/src/stories/ui/Dialog.stories.tsx
similarity index 93%
rename from src/components/ui/dialog.stories.tsx
rename to src/stories/ui/Dialog.stories.tsx
index 0e8b7eca4..16dbcdf1e 100644
--- a/src/components/ui/dialog.stories.tsx
+++ b/src/stories/ui/Dialog.stories.tsx
@@ -12,10 +12,7 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { expect, userEvent, within } from 'storybook/test';
-import { Button } from './button';
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -23,8 +20,11 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTrigger,
-} from './dialog';
-import { Input } from './input';
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
 
 const meta: Meta<typeof Dialog> = {
   title: 'UI/Dialog',
@@ -49,7 +49,7 @@ export const Default: Story = {
             subtitle="Optional subtitle text"
           />
           <DialogContentSection>
-            <p className="text-text-body">
+            <p className="text-ds-text-neutral-default-default">
               This is the main content area of the dialog. You can add any
               content here including forms, text, images, or other components.
             </p>
@@ -80,7 +80,7 @@ export const SmallSize: Story = {
         <DialogContent size="sm">
           <DialogHeader title="Small Dialog" />
           <DialogContentSection>
-            <p className="text-text-body">
+            <p className="text-ds-text-neutral-default-default">
               A compact dialog for simple actions.
             </p>
           </DialogContentSection>
@@ -109,7 +109,7 @@ export const LargeSize: Story = {
             subtitle="This dialog is wider for more complex content"
           />
           <DialogContentSection>
-            <p className="text-text-body">
+            <p className="text-ds-text-neutral-default-default">
               Large dialogs are useful when you need to display more content,
               such as detailed forms, tables, or multi-step processes.
             </p>
@@ -140,7 +140,7 @@ export const WithForm: Story = {
             subtitle="Enter your details to create a new account"
           />
           <DialogContentSection>
-            <div className="flex flex-col gap-4">
+            <div className="gap-4 flex flex-col">
               <Input
                 title="Full Name"
                 placeholder="Enter your full name"
@@ -192,7 +192,7 @@ export const WithTooltip: Story = {
             showTooltip
           />
           <DialogContentSection>
-            <p className="text-text-body">
+            <p className="text-ds-text-neutral-default-default">
               Hover over the icon next to the title to see the tooltip.
             </p>
           </DialogContentSection>
@@ -223,7 +223,7 @@ export const WithBackButton: Story = {
             onBackClick={() => console.log('Back clicked')}
           />
           <DialogContentSection>
-            <p className="text-text-body">
+            <p className="text-ds-text-neutral-default-default">
               Click the back button to return to the previous step.
             </p>
           </DialogContentSection>
@@ -258,7 +258,7 @@ export const DestructiveAction: Story = {
             subtitle="This action cannot be undone"
           />
           <DialogContentSection>
-            <p className="text-text-body">
+            <p className="text-ds-text-neutral-default-default">
               Are you sure you want to delete this item? All associated data
               will be permanently removed.
             </p>
@@ -291,7 +291,7 @@ export const NoCloseButton: Story = {
         <DialogContent showCloseButton={false}>
           <DialogHeader title="Required Action" />
           <DialogContentSection>
-            <p className="text-text-body">
+            <p className="text-ds-text-neutral-default-default">
               This dialog does not have a close button. User must interact with
               the footer buttons.
             </p>
@@ -313,7 +313,7 @@ export const AllSizes: Story = {
     const [openMd, setOpenMd] = useState(false);
     const [openLg, setOpenLg] = useState(false);
     return (
-      <div className="flex gap-4">
+      <div className="gap-4 flex">
         <Dialog open={openSm} onOpenChange={setOpenSm}>
           <DialogTrigger asChild>
             <Button variant="outline">Small (400px)</Button>
@@ -321,7 +321,9 @@ export const AllSizes: Story = {
           <DialogContent size="sm">
             <DialogHeader title="Small Dialog" />
             <DialogContentSection>
-              <p className="text-text-body">Max width: 400px</p>
+              <p className="text-ds-text-neutral-default-default">
+                Max width: 400px
+              </p>
             </DialogContentSection>
             <DialogFooter
               showConfirmButton
@@ -338,7 +340,9 @@ export const AllSizes: Story = {
           <DialogContent size="md">
             <DialogHeader title="Medium Dialog" />
             <DialogContentSection>
-              <p className="text-text-body">Max width: 600px (default)</p>
+              <p className="text-ds-text-neutral-default-default">
+                Max width: 600px (default)
+              </p>
             </DialogContentSection>
             <DialogFooter
               showConfirmButton
@@ -355,7 +359,9 @@ export const AllSizes: Story = {
           <DialogContent size="lg">
             <DialogHeader title="Large Dialog" />
             <DialogContentSection>
-              <p className="text-text-body">Max width: 900px</p>
+              <p className="text-ds-text-neutral-default-default">
+                Max width: 900px
+              </p>
             </DialogContentSection>
             <DialogFooter
               showConfirmButton
@@ -384,7 +390,7 @@ export const OpenCloseInteraction: Story = {
             subtitle="Test opening and closing"
           />
           <DialogContentSection>
-            <p className="text-text-body">
+            <p className="text-ds-text-neutral-default-default">
               This dialog tests the open/close interaction.
             </p>
           </DialogContentSection>
@@ -431,7 +437,7 @@ export const FormInteraction: Story = {
           <DialogContent>
             <DialogHeader title="Sign Up" subtitle="Create your account" />
             <DialogContentSection>
-              <div className="flex flex-col gap-4">
+              <div className="gap-4 flex flex-col">
                 <Input title="Name" placeholder="Enter your name" required />
                 <Input
                   title="Email"
@@ -504,7 +510,7 @@ export const ConfirmDialogInteraction: Story = {
               subtitle="This action cannot be undone"
             />
             <DialogContentSection>
-              <p className="text-text-body">
+              <p className="text-ds-text-neutral-default-default">
                 Are you sure you want to delete this item?
               </p>
             </DialogContentSection>
diff --git a/src/components/ui/input.stories.tsx b/src/stories/ui/Input.stories.tsx
similarity index 97%
rename from src/components/ui/input.stories.tsx
rename to src/stories/ui/Input.stories.tsx
index 86dbbb434..12505efd7 100644
--- a/src/components/ui/input.stories.tsx
+++ b/src/stories/ui/Input.stories.tsx
@@ -12,11 +12,11 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
+import { Input } from '@/components/ui/input';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Eye, EyeOff, Search } from 'lucide-react';
 import { useState } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
-import { Input } from './input';
 
 const meta: Meta<typeof Input> = {
   title: 'UI/Input',
@@ -149,7 +149,7 @@ export const WithBackIcon: Story = {
 
 export const AllStates: Story = {
   render: () => (
-    <div className="flex flex-col gap-4">
+    <div className="gap-4 flex flex-col">
       <Input title="Default" state="default" placeholder="Default state" />
       <Input title="Hover" state="hover" placeholder="Hover state" />
       <Input title="Input" state="input" placeholder="Input state" />
@@ -173,7 +173,9 @@ export const AllStates: Story = {
 export const FormExample: Story = {
   render: () => (
     <div className="space-y-4">
-      <h3 className="text-lg font-semibold text-text-heading">Contact Form</h3>
+      <h3 className="text-lg font-semibold text-ds-text-neutral-default-default">
+        Contact Form
+      </h3>
       <Input title="Full Name" placeholder="John Doe" required />
       <Input
         title="Email"
diff --git a/src/style/index.css b/src/style/index.css
index 0d39423c9..af20af338 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -1,4 +1,83 @@
 @import './token.css';
+
+/* Palatino LT — welcome headline on History; files in /public/fonts/palatino-lt/ */
+@font-face {
+  font-family: 'Palatino LT';
+  src: url('/fonts/palatino-lt/palatino-lt-light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Palatino LT';
+  src: url('/fonts/palatino-lt/palatino-lt-light-italic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Palatino LT';
+  src: url('/fonts/palatino-lt/palatino-lt-roman.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Palatino LT';
+  src: url('/fonts/palatino-lt/palatino-lt-italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Palatino LT';
+  src: url('/fonts/palatino-lt/palatino-lt-medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Palatino LT';
+  src: url('/fonts/palatino-lt/palatino-lt-medium-italic.ttf')
+    format('truetype');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Palatino LT';
+  src: url('/fonts/palatino-lt/palatino-lt-bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Palatino LT';
+  src: url('/fonts/palatino-lt/palatino-lt-bold-italic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Palatino LT';
+  src: url('/fonts/palatino-lt/palatino-lt-black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Palatino LT';
+  src: url('/fonts/palatino-lt/palatino-lt-black-italic.ttf') format('truetype');
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+.history-welcome-headline {
+  font-family:
+    'Palatino LT', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -35,7 +114,7 @@ body {
 
 @layer base {
   body {
-    color: var(--text-body);
+    color: var(--ds-text-neutral-default-default);
   }
 
   p,
@@ -53,28 +132,27 @@ body {
   input,
   textarea,
   select {
-    color: var(--text-primary);
-    background-color: var(--surface-primary);
-    border: 1px solid var(--border-secondary);
+    color: var(--ds-text-neutral-default-default);
+    background-color: var(--ds-bg-neutral-subtle-default);
+    border: 1px solid var(--ds-border-neutral-default-default);
     outline: none;
   }
 
   input::placeholder,
   textarea::placeholder {
-    color: var(--text-tertiary);
+    color: var(--ds-text-neutral-subtle-default);
     opacity: 1;
   }
 
   .lucide {
-    color: var(--icon-secondary);
+    color: var(--ds-icon-neutral-muted-default);
     stroke: currentColor;
-    stroke-width: 1.5;
   }
 
   button .lucide,
   a .lucide,
   .lucide[data-state='active'] {
-    color: var(--icon-primary);
+    color: var(--ds-icon-neutral-default-default);
   }
 
   :is(
@@ -84,13 +162,13 @@ body {
     [class*='bg-white-100%'],
     [class*='bg-white-50']
   ) {
-    color: var(--text-primary);
-    background-color: var(--surface-card) !important;
+    color: var(--ds-text-neutral-default-default);
+    background-color: var(--ds-bg-neutral-default-default) !important;
     box-shadow: none;
   }
 
   [class*='bg-white-50'] {
-    background-color: var(--surface-tertiary) !important;
+    background-color: var(--ds-bg-neutral-strong-default) !important;
   }
 
   .theme-image-invert-dark {
@@ -101,10 +179,6 @@ body {
   [data-theme='dark'] .theme-image-invert-dark {
     filter: brightness(0) invert(1);
   }
-
-  [data-theme='transparent'] .theme-image-invert-dark {
-    filter: brightness(0) invert(1);
-  }
 }
 
 #root,
@@ -118,10 +192,10 @@ body {
   box-shadow:
     -2px -2px 100px rgba(255, 255, 255, 0.1) inset,
     2px 2px 100px rgba(29, 29, 29, 0.1) inset;
-  background-color: var(--bg-page) !important;
+  background-color: var(--ds-bg-neutral-subtle-default) !important;
   backdrop-filter: blur(75px);
   z-index: 0;
-  color: var(--text-body);
+  color: var(--ds-text-neutral-default-default);
   position: relative;
   isolation: isolate;
 }
@@ -152,14 +226,9 @@ body {
 }
 
 /* Perfect Shadow */
-.perfect-shadow {
-  box-shadow:
-    0 8px 20px -2px rgba(29, 33, 41, 0.1),
-    0 32px 48px -12px rgba(29, 33, 41, 0.12),
-    0 96px 120px -12px rgba(65, 74, 92, 0.06),
-    0 108px 72px -16px rgba(65, 74, 92, 0.08),
-    0 32px 64px -8px rgba(113, 153, 189, 0.12),
-    0 8px 10px 0 rgba(113, 153, 189, 0.12);
+.perfect-shadow,
+.soft-shadow {
+  box-shadow: var(--shadow-soft);
 }
 
 .blur-effect {
@@ -181,7 +250,7 @@ body {
 }
 
 .custom-resizable-handle:hover {
-  background: var(--border-information);
+  background: var(--ds-border-brand-default-focus);
   width: 2px;
   height: 40px;
   transform: none;
@@ -354,11 +423,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 {
@@ -530,7 +601,7 @@ code {
 }
 
 .hover-style-scrollbar::-webkit-scrollbar-thumb {
-  background-color: var(--text-label, rgba(0, 0, 0, 0.4));
+  background-color: var(--ds-text-neutral-muted-default, rgba(0, 0, 0, 0.4));
   opacity: 0;
   border-radius: 9999px;
   transition: opacity 0.2s ease;
@@ -548,7 +619,7 @@ code {
 
 /* Dark mode overrides for FolderComponent (CSV/table content) */
 [data-theme='dark'] .folder-component-content {
-  color: var(--text-primary);
+  color: var(--ds-text-neutral-default-default);
 }
 
 [data-theme='dark'] .folder-component-content * {
@@ -562,7 +633,7 @@ code {
 [data-theme='dark'] .folder-component-content table th,
 [data-theme='dark'] .folder-component-content table td {
   border-color: #30363d !important;
-  color: var(--text-primary) !important;
+  color: var(--ds-text-neutral-default-default) !important;
 }
 
 [data-theme='dark'] .folder-component-content table th {
@@ -607,3 +678,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(--ds-text-neutral-default-default) 0%,
+    var(--ds-text-neutral-default-default) 35%,
+    var(--colors-primary-4) 50%,
+    var(--ds-text-neutral-default-default) 65%,
+    var(--ds-text-neutral-default-default) 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..f4189de07 100644
--- a/src/style/token.css
+++ b/src/style/token.css
@@ -1,6 +1,5 @@
 @layer base {
   :root {
-    /* Red */
     --colors-red-50: #fef2f2;
     --colors-red-100: #ffe2e2;
     --colors-red-200: #ffc9c9;
@@ -12,7 +11,7 @@
     --colors-red-900: #82181a;
     --colors-red-950: #460809;
     --colors-red-default: #e7000b;
-    /* Yellow */
+
     --colors-yellow-50: #fefce8;
     --colors-yellow-100: #fef9c2;
     --colors-yellow-200: #fff085;
@@ -24,7 +23,7 @@
     --colors-yellow-900: #733e0a;
     --colors-yellow-950: #432004;
     --colors-yellow-default: #d08700;
-    /* Green */
+
     --colors-green-50: #f0fdf4;
     --colors-green-100: #dcfce7;
     --colors-green-200: #b9f8cf;
@@ -36,7 +35,7 @@
     --colors-green-900: #0d542b;
     --colors-green-950: #032e15;
     --colors-green-default: #00a63e;
-    /* Indigo */
+
     --colors-indigo-50: #eef2ff;
     --colors-indigo-100: #e0e7ff;
     --colors-indigo-200: #c6d2ff;
@@ -48,7 +47,7 @@
     --colors-indigo-900: #312c85;
     --colors-indigo-950: #1e1a4d;
     --colors-indigo-default: #4f39f6;
-    /* Blue */
+
     --colors-blue-50: #eff6ff;
     --colors-blue-100: #dbeafe;
     --colors-blue-200: #bedbff;
@@ -60,7 +59,7 @@
     --colors-blue-900: #1c398e;
     --colors-blue-950: #162456;
     --colors-blue-default: #155dfc;
-    /* Amber */
+
     --colors-amber-50: #fffbeb;
     --colors-amber-100: #fef3c6;
     --colors-amber-200: #fee685;
@@ -72,7 +71,7 @@
     --colors-amber-900: #7b3306;
     --colors-amber-950: #461901;
     --colors-amber-default: #e17100;
-    /* Emerald */
+
     --colors-emerald-50: #ecfdf5;
     --colors-emerald-100: #d0fae5;
     --colors-emerald-200: #a4f4cf;
@@ -84,7 +83,7 @@
     --colors-emerald-900: #004f3b;
     --colors-emerald-950: #002c22;
     --colors-emerald-default: #009966;
-    /* Purple */
+
     --colors-purple-50: #faf5ff;
     --colors-purple-100: #f3e8ff;
     --colors-purple-200: #e9d5ff;
@@ -95,7 +94,7 @@
     --colors-purple-800: #6b21a8;
     --colors-purple-900: #581c87;
     --colors-purple-default: #9333ea;
-    /* Orange */
+
     --colors-orange-50: #fff7ed;
     --colors-orange-100: #ffedd4;
     --colors-orange-200: #ffd6a8;
@@ -107,7 +106,7 @@
     --colors-orange-900: #7e2a0c;
     --colors-orange-950: #441306;
     --colors-orange-default: #f54900;
-    /* Sky */
+
     --colors-sky-50: #f0f9ff;
     --colors-sky-100: #dff2fe;
     --colors-sky-200: #b8e6fe;
@@ -119,7 +118,7 @@
     --colors-sky-900: #024a70;
     --colors-sky-950: #052f4a;
     --colors-sky-default: #0084d1;
-    /* Fuchsia */
+
     --colors-fuchsia-50: #fdf4ff;
     --colors-fuchsia-100: #fae8ff;
     --colors-fuchsia-200: #f6cfff;
@@ -131,14 +130,14 @@
     --colors-fuchsia-900: #721378;
     --colors-fuchsia-950: #4b004f;
     --colors-fuchsia-default: #c800de;
-    /* Black */
+
     --colors-black-0: #00000000;
     --colors-black-10: #0000001a;
     --colors-black-30: #0000004d;
     --colors-black-50: #00000080;
     --colors-black-80: #000000cc;
     --colors-black-100: #000000;
-    /* Primary */
+
     --colors-primary-1: #f5f5f5;
     --colors-primary-2: #eeeeee;
     --colors-primary-3: #cccccc;
@@ -150,686 +149,54 @@
     --colors-primary-10: #111111;
     --colors-primary-11: #000000;
     --colors-primary-default: #222222;
-    /* Off-White */
+
     --colors-off-white-0: #f5f5f500;
     --colors-off-white-10: #f5f5f51a;
     --colors-off-white-30: #f5f5f54d;
     --colors-off-white-50: #f5f5f580;
     --colors-off-white-80: #f5f5f5cc;
     --colors-off-white-100: #f5f5f5;
-    /* White */
+
     --colors-white-0: #ffffff00;
     --colors-white-10: #ffffff1a;
     --colors-white-30: #ffffff4d;
     --colors-white-50: #ffffff80;
     --colors-white-80: #ffffffcc;
     --colors-white-100: #ffffff;
-    /* Off-Black */
+
     --colors-off-black-0: #1d1c1b00;
     --colors-off-black-10: #1d1c1b1a;
     --colors-off-black-30: #1d1c1b4d;
     --colors-off-black-50: #1d1c1b80;
     --colors-off-black-80: #1d1c1bcc;
     --colors-off-black-100: #1d1c1b;
-    /* Gradient */
-    --colors-gradient: #ffffff;
-
-    /* Component Tokens */
-    /* Input Component */
-    --input-bg-input: var(--surface-tertiary);
-    --input-bg-spliting: var(--surface-information);
-    --input-bg-confirm: var(--surface-success);
-    --input-bg-default: var(--surface-primary);
-    --input-bg-hover: var(--surface-secondary);
-    --input-border-default: var(--border-secondary);
-    --input-border-hover: var(--border-action-hover);
-    --input-border-focus: var(--border-information);
-    --input-text-default: var(--text-secondary);
-    --input-text-focus: var(--text-primary);
-    --input-label-default: var(--text-secondary);
-    --input-border-success: var(--border-success);
-    --input-border-cuation: var(--border-cuation);
-    --input-border-warning: var(--border-warning);
-
-    /* Popup Component */
-    --popup-surface: var(--surface-primary);
-    --popup-bg: var(--fill-default);
-    --popup-border: var(--border-secondary);
-
-    /* Menu Tabs Component */
-    --menutabs-fill-default: var(--fill-fill-transparent);
-    --menutabs-fill-hover: var(--fill-fill-tertiary-hover);
-    --menutabs-fill-active: var(--fill-default);
-    --menutabs-fill-disabled: var(--fill-fill-tertiary-disabled);
-    --menutabs-border-disabled: var(--fill-fill-tertiary-disabled);
-    --menutabs-border-active: var(--fill-fill-tertiary-active);
-    --menutabs-border-hover: var(--fill-fill-tertiary-hover);
-    --menutabs-border-default: var(--fill-fill-tertiary);
-    --menutabs-text-active: var(--text-action);
-    --menutabs-text-disabled: var(--text-disabled);
-    --menutabs-text-hover: var(--text-action-hover);
-    --menutabs-text-default: var(--text-disabled);
-    --menutabs-icon-hover: var(--icon-action-hover);
-    --menutabs-icon-default: var(--icon-disabled);
-    --menutabs-icon-disabled: var(--icon-disabled);
-    --menutabs-icon-active: var(--icon-action);
-    --menutabs-bg-default: var(--surface-primary);
-
-    /* Progress Component */
-    --progress-fill-default: var(--fill-fill-success);
-    --progress-bg: var(--fill-default);
-    --progress-fill-complete: var(--fill-fill-success-active);
-    --progress-fill-past: var(--fill-fill-primary);
-    --progress-fill-new: var(--fill-fill-warning);
-
-    /* Button Primary Component */
-    --button-primary-fill-default: var(--fill-fill-primary);
-    --button-primary-fill-hover: var(--fill-fill-primary-hover);
-    --button-primary-fill-active: var(--fill-fill-primary-active);
-    --button-primary-fill-disabled: var(--fill-fill-primary-disabled);
-    --button-primary-icon-hover: var(--text-on-hover);
-    --button-primary-icon-default: var(--text-on-action);
-    --button-primary-text-disabled: var(--text-on-disabled);
-    --button-primary-text-active: var(--text-on-action);
-    --button-primary-text-hover: var(--text-on-hover);
-    --button-primary-text-default: var(--text-on-action);
-    --button-primary-icon-disabled: var(--text-on-disabled);
-    --button-primary-icon-active: var(--text-on-action);
-
-    /* Button Secondary Component */
-    --button-secondary-fill-disabled: var(--fill-fill-secondary-disabled);
-    --button-secondary-fill-active: var(--fill-fill-secondary-active);
-    --button-secondary-fill-hover: var(--fill-fill-secondary-hover);
-    --button-secondary-fill-default: var(--fill-fill-secondary);
-    --button-secondary-text-default: var(--text-on-action);
-    --button-secondary-text-hover: var(--text-on-hover);
-    --button-secondary-text-active: var(--text-on-action);
-    --button-secondary-text-disabled: var(--text-on-disabled);
-    --button-secondary-icon-disabled: var(--icon-on-disabled);
-    --button-secondary-icon-active: var(--icon-on-action);
-    --button-secondary-icon-hover: var(--icon-on-hover);
-    --button-secondary-icon-default: var(--icon-on-action);
-
-    /* Button Transparent Component */
-    --button-transparent-fill-disabled: var(--fill-fill-transparent-disabled);
-    --button-transparent-fill-active: var(--fill-fill-transparent-active);
-    --button-transparent-fill-hover: var(--fill-fill-transparent-hover);
-    --button-transparent-fill-default: var(--fill-fill-transparent);
-    --button-transparent-icon-default: var(--icon-action);
-    --button-transparent-text-disabled: var(--text-disabled);
-    --button-transparent-text-default: var(--text-action);
-    --button-transparent-text-active: var(--text-action);
-    --button-transparent-icon-hover: var(--icon-action-hover);
-    --button-transparent-text-hover: var(--text-action-hover);
-    --button-transparent-icon-disabled: var(--icon-disabled);
-    --button-transparent-icon-active: var(--icon-action);
-
-    /* Button Tertiary Component */
-    --button-tertiery-fill-hover: var(--fill-fill-tertiary-hover);
-    --button-tertiery-fill-default: var(--fill-fill-tertiary);
-    --button-tertiery-fill-disabled: var(--fill-fill-tertiary-disabled);
-    --button-tertiery-fill-active: var(--fill-fill-tertiary-active);
-    --button-tertiery-icon-hover: var(--icon-action-hover);
-    --button-tertiery-icon-default: var(--icon-action);
-    --button-tertiery-text-disabled: var(--text-disabled);
-    --button-tertiery-text-active: var(--text-action);
-    --button-tertiery-text-hover: var(--text-action-hover);
-    --button-tertiery-text-default: var(--text-action);
-    --button-tertiery-icon-disabled: var(--icon-disabled);
-    --button-tertiery-icon-active: var(--icon-action);
-    --button-tertiery-icon-hover-2: var(--icon-on-hover);
-    --button-tertiery-icon-default-2: var(--icon-on-action);
-    --button-tertiery-text-disabled-2: var(--text-on-disabled);
-    --button-tertiery-text-active-2: var(--text-on-action);
-    --button-tertiery-text-hover-2: var(--text-on-hover);
-    --button-tertiery-text-default-2: var(--text-on-action);
-    --button-tertiery-icon-disabled-2: var(--icon-on-disabled);
-    --button-tertiery-icon-active-2: var(--icon-on-action);
-
-    /* Button State Colors */
-    --button-fill-success: var(--fill-fill-success);
-    --button-fill-cuation: var(--fill-fill-cuation);
-    --button-fill-warning: var(--fill-fill-warning);
-    --button-fill-success-foreground: var(--text-on-action);
-    --button-fill-cuation-foreground: var(--text-on-action);
-    --button-fill-warning-foreground: var(--text-on-action);
-    --button-fill-information: var(--fill-fill-information);
-    --button-fill-information-foreground: var(--text-on-action);
 
-    /* Badge Component */
-    --badge-running-surface: var(--surface-success);
-    --badge-running-surface-foreground: var(--text-success);
-    --badge-paused-surface-foreground: var(--text-warning);
-    --badge-paused-surface: var(--surface-warning);
-    --badge-error-surface-foreground: var(--text-cuation);
-    --badge-error-surface: var(--surface-cuation);
-    --badge-complete-surface-foreground: var(--text-body);
-    --badge-complete-surface: var(--surface-primary);
-    --badge-splitting-surface-foreground: var(--text-information);
-    --badge-splitting-surface: var(--surface-information);
-
-    /* Switch Component */
-    --switch-off-fill-track-fill: var(--fill-fill-secondary);
-    --switch-off-fill-track-border: var(--border-primary);
-    --switch-off-fill-thumb-border: var(--border-primary);
-    --switch-off-fill-thumb-fill: var(--fill-default);
-    --switch-on-fill-thumb-border: var(--border-success);
-    --switch-on-fill-thumb-fill: var(--fill-default);
-    --switch-on-fill-track-border: var(--border-success);
-    --switch-on-fill-track-fill: var(--fill-fill-success);
-    --switch-disabled-fill-thumb-border: var(--border-disabled);
-    --switch-disabled-fill-track-border: var(--border-disabled);
-    --switch-disabled-fill-thumb-fill: var(--fill-default);
-    --switch-disabled-fill-track-fill: var(--fill-fill-primary-disabled);
-    /* Pill Component */
-    --pill-bg: var(--fill-default);
-    --pill-surface: var(--fill-fill-primary);
-    --pill-border: var(--border-primary);
-
-    /* Menu Button Component */
-    --menubutton-fill-default: var(--fill-fill-transparent);
-    --menubutton-fill-hover: var(--fill-fill-transparent-hover);
-    --menubutton-fill-active: var(--fill-default);
-    --menubutton-border-active: var(--border-primary);
-    --menubutton-border-default: var(--border-transparent);
-    --menubutton-border-hover: var(--border-disabled);
-    --menubutton-disabled: 1.25rem;
-
-    /* Dropdown Component */
-    --dropdown-bg: var(--fill-default);
-    --dropdown-border: var(--border-secondary);
-    --dropdown-item-bg-default: var(--fill-fill-transparent);
-    --dropdown-item-bg-hover: var(--fill-fill-tertiary-hover);
-    --dropdown-item-bg-active: var(--fill-fill-tertiary);
-
-    /* Search Component */
-    --search-bg: var(--fill-default);
-    --search-border-hover: var(--border-secondary);
-    --search-border-default: var(--border-disabled);
-    --search-default: 3.125rem;
-
-    /* Tag Component */
-    --tag-surface: var(--button-tertiery-fill-default);
-    --tag-fill-browser: var(--fill-browser);
-    --tag-fill-developer: var(--fill-developer);
-    --tag-fill-document: var(--fill-document);
-    --tag-fill-multimodal: var(--fill-multimodal);
-    --tag-fill-socialmedia: var(--fill-socialmedia);
-    --tag-fill-info: var(--surface-information);
-    --tag-foreground-info: var(--text-information);
-    --tag-surface-hover: var(--button-tertiery-fill-hover);
-    --tag-fill-success: var(--surface-success);
-    --tag-foreground-success: var(--text-success);
-    --tag-fill-warning: var(--surface-warning);
-    --tag-foreground-warning: var(--text-warning);
-    --tag-fill-cuation: var(--surface-cuation);
-    --tag-foreground-cuation: var(--text-cuation);
-    --tag-foreground-default: var(--text-body);
-    --tag-fill-default: var(--surface-tertiary);
-    --tag-fill-default-foreground: var(--surface-information);
-
-    /* Project Component */
-    --project-surface: var(--surface-tertiary);
-    --project-surface-hover: var(--surface-tertiary-hover);
-    --project-border-default: var(--border-tertiary);
-    --project-border-hover: var(--border-primary);
-
-    /* Message Component */
-    --message-fill-default: var(--surface-tertiary);
-    --message-fill-hover: var(--surface-secondary);
-    --message-fill-active: var(--surface-primary);
-    --message-border-default: var(--border-disabled);
-    --message-border-focus: var(--border-focus);
-
-    /* Task Component */
-    --task-surface: var(--surface-tertiary);
-    --task-border-default: var(--border-disabled);
-    --task-border-focus: var(--border-focus);
-    --task-fill-default: var(--fill-fill-tertiary);
-    --task-fill-hover: var(--fill-fill-tertiary-hover);
-    --task-fill-success: var(--surface-success);
-    --task-fill-warning: var(--surface-warning);
-    --task-fill-error: var(--surface-cuation);
-    --task-border-focus-success: var(--border-success);
-    --task-border-focus-warning: var(--border-warning);
-    --task-border-focus-error: var(--border-cuation);
-    --task-fill-running: var(--surface-primary);
-
-    /* Log Component */
-    --log-default: #f5f5f5;
-
-    /* Worker Component */
-    --worker-surface-primary: var(--surface-tertiary);
-    --worker-border-default: var(--border-disabled);
-    --worker-border-focus: var(--border-focus);
-    --worker-surface-secondary: var(--surface-disabled);
-
-    /* Mask Component */
-    --mask-default: var(--bg-secondary);
-    --mask-dark: var(--bg-dark-secondary);
-
-    /* Code Component */
-    --code-bg: var(--bg-dark-default);
-    --code-foreground: var(--text-on-action);
-    --code-surface: #f4f4f5;
-    /* zinc-100 equivalent */
-
-    /* Surface Variants */
-    --surface-error-subtle: #fee2e2;
-    /* red-100 equivalent */
-    --surface-hover-subtle: #f3f4f6;
-    /* gray-100 equivalent */
-    --surface-success-subtle: #d1fae5;
-    /* emerald-100 equivalent */
-    --surface-tertiary-subtle: #f9fafb;
-    /* gray-50 equivalent */
-
-    /* Text Variants */
-    --text-muted: var(--colors-primary-5);
-    --text-muted-strong: var(--colors-primary-7);
-    --text-link: var(--colors-blue-500);
-    --text-link-hover: var(--colors-blue-700);
-    --text-error: var(--colors-red-500);
-
-    --border-subtle: var(--colors-primary-2);
-    --border-subtle-strong: var(--colors-primary-3);
-
-    /* Shadow Tokens */
-
-    /* Perfect Shadow */
-    --shadow-perfect:
-      0 8px 20px -2px #1d21291a, 0 32px 48px -12px #1d21291f,
-      0 96px 120px -12px #414a5c0f, 0 108px 72px -16px #414a5c14,
-      0 32px 64px -8px #7199bd1f, 0 8px 10px 0 #7199bd1f;
+    --colors-gradient: #ffffff;
 
-    /* Button Shadow */
+    --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;
+
+    --camel-color: var(--colors-neon-default);
+
+    --shadow-soft:
+      0 8px 20px -2px rgba(29, 33, 41, 0.1),
+      0 32px 48px -12px rgba(29, 33, 41, 0.12),
+      0 96px 120px -12px rgba(65, 74, 92, 0.06),
+      0 108px 72px -16px rgba(65, 74, 92, 0.08),
+      0 32px 64px -8px rgba(113, 153, 189, 0.12),
+      0 8px 10px 0 rgba(113, 153, 189, 0.12);
+    --shadow-perfect: var(--shadow-soft);
     --shadow-button:
       inset 0 1px 0 0 #ffffff54, 0 3px 4px -1px #00000040, 0 0 0 1px #d4d4d440;
   }
-
-  .root,
-  [data-theme='transparent'] {
-    --text-heading: var(--colors-primary-10);
-    --text-body: var(--colors-primary-default);
-    --text-label: var(--colors-primary-6);
-    --text-action: var(--colors-primary-default);
-    --text-action-hover: var(--colors-primary-10);
-    --text-disabled: var(--colors-primary-3);
-    --text-information: var(--colors-blue-default);
-    --text-success: var(--colors-green-default);
-    --text-warning: var(--colors-yellow-default);
-    --text-cuation: var(--colors-red-default);
-    --text-on-action: var(--colors-primary-1);
-    --text-on-disabled: var(--colors-off-white-50);
-    --text-document: var(--colors-amber-default);
-    --text-socialmedia: var(--colors-purple-default);
-    --text-browser: var(--colors-sky-default);
-    --text-developer: var(--colors-emerald-default);
-    --text-multimodal: var(--colors-fuchsia-default);
-    --text-on-hover: var(--colors-primary-2);
-    --text-primary: var(--text-body);
-    --text-secondary: var(--text-label);
-    --text-tertiary: var(--text-disabled);
-    --text-inverse-primary: var(--text-on-action);
-    --text-success-primary: var(--text-success);
-    --text-success-default: var(--text-success);
-    --text-caution: var(--text-cuation);
-    --text-cuation-default: var(--text-cuation);
-    --surface-primary: var(--colors-off-white-80);
-    --surface-secondary: var(--colors-off-white-50);
-    --surface-success: var(--colors-green-50);
-    --surface-information: var(--colors-blue-50);
-    --surface-warning: var(--colors-yellow-50);
-    --surface-cuation: var(--colors-red-50);
-    --surface-action: var(--colors-primary-2);
-    --surface-action-hover: var(--colors-primary-1);
-    --surface-disabled: var(--colors-off-white-30);
-    --surface-tertiary: var(--colors-white-100);
-    --surface-tertiary-hover: var(--colors-white-50);
-    --surface-card: var(--colors-off-white-30);
-    --surface-card-hover: var(--colors-off-white-80);
-    --surface-card-focus: var(--colors-white-100);
-    --surface-card-default: 1.25rem;
-    --border-primary: var(--colors-primary-4);
-    --border-secondary: var(--colors-primary-3);
-    --border-tertiary: var(--colors-primary-1);
-    --border-information: var(--colors-blue-default);
-    --border-success: var(--colors-green-default);
-    --border-warning: var(--colors-yellow-default);
-    --border-cuation: var(--colors-red-default);
-    --border-focus: var(--colors-primary-4);
-    --border-action: var(--colors-primary-3);
-    --border-action-hover: var(--colors-primary-4);
-    --border-disabled: var(--colors-primary-2);
-    --border-developer: var(--colors-emerald-default);
-    --border-browser: var(--colors-sky-default);
-    --border-socialmedia: var(--colors-purple-default);
-    --border-multimodal: var(--colors-fuchsia-default);
-    --border-document: var(--colors-amber-default);
-    --border-transparent: var(--colors-white-0);
-    --icon-primary: var(--colors-primary-default);
-    --icon-action: var(--colors-primary-default);
-    --icon-disabled: var(--colors-primary-3);
-    --icon-information: var(--colors-blue-default);
-    --icon-success: var(--colors-green-default);
-    --icon-warning: var(--colors-yellow-default);
-    --icon-cuation: var(--colors-red-default);
-    --icon-action-hover: var(--colors-primary-10);
-    --icon-multimodal: var(--colors-fuchsia-default);
-    --icon-socialmedia: var(--colors-purple-default);
-    --icon-document: var(--colors-amber-default);
-    --icon-browser: var(--colors-sky-default);
-    --icon-developer: var(--colors-emerald-default);
-    --icon-on-disabled: var(--colors-off-white-50);
-    --icon-on-hover: var(--colors-primary-2);
-    --icon-on-action: var(--colors-primary-1);
-    --icon-secondary: var(--colors-primary-5);
-    --developer: var(--colors-emerald-default);
-    --browser: var(--colors-sky-default);
-    --document: var(--colors-amber-default);
-    --multimodal: var(--colors-fuchsia-default);
-    --socialmedia: var(--colors-purple-default);
-    --fill-default: var(--colors-white-100);
-    --fill-fill-primary: var(--colors-primary-default);
-    --fill-fill-primary-hover: var(--colors-primary-10);
-    --fill-fill-primary-active: var(--colors-primary-11);
-    --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-50);
-    --fill-fill-tertiary-hover: var(--colors-primary-2);
-    --fill-fill-tertiary-active: var(--colors-primary-3);
-    --fill-fill-tertiary-disabled: var(--colors-off-white-50);
-    --fill-fill-transparent-active: var(--colors-white-80);
-    --fill-fill-transparent-disabled: var(--colors-white-0);
-    --fill-fill-secondary-disabled: var(--colors-primary-4);
-    --fill-fill-secondary-active: var(--colors-primary-7);
-    --fill-fill-secondary-hover: var(--colors-primary-6);
-    --fill-fill-secondary: var(--colors-primary-5);
-    --fill-fill-success: var(--colors-green-default);
-    --fill-fill-success-hover: var(--colors-green-700);
-    --fill-fill-success-active: var(--colors-green-800);
-    --fill-fill-success-disable: var(--colors-green-400);
-    --fill-fill-warning: var(--colors-yellow-default);
-    --fill-fill-cuation: var(--colors-red-default);
-    --fill-socialmedia: var(--colors-purple-100);
-    --fill-document: var(--colors-amber-100);
-    --fill-browser: var(--colors-sky-100);
-    --fill-multimodal: var(--colors-fuchsia-100);
-    --fill-developer: var(--colors-emerald-100);
-    --fill-scrollbar-dark: var(--colors-primary-3);
-    --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-80);
-    --bg-primary: var(--colors-off-white-50);
-    --bg-secondary: var(--colors-off-white-30);
-    --bg-tertiary: var(--colors-off-white-10);
-    --bg-dark: var(--colors-off-black-80);
-    --bg-dark-primary: var(--colors-off-black-50);
-    --bg-dark-secondary: var(--colors-off-black-30);
-    --bg-dark-tertiary: var(--colors-off-black-10);
-    --bg-dark-default: var(--colors-off-black-100);
-    --bg-page-default: var(--colors-off-white-100);
-  }
-
-  .root,
-  [data-theme='light'] {
-    --text-heading: var(--colors-primary-10);
-    --text-body: var(--colors-primary-default);
-    --text-label: var(--colors-primary-6);
-    --text-action: var(--colors-primary-default);
-    --text-action-hover: var(--colors-primary-10);
-    --text-disabled: var(--colors-primary-3);
-    --text-information: var(--colors-blue-default);
-    --text-success: var(--colors-green-default);
-    --text-warning: var(--colors-yellow-default);
-    --text-cuation: var(--colors-red-default);
-    --text-on-action: var(--colors-primary-1);
-    --text-on-disabled: var(--colors-primary-1);
-    --text-document: var(--colors-amber-default);
-    --text-socialmedia: var(--colors-purple-default);
-    --text-browser: var(--colors-sky-default);
-    --text-developer: var(--colors-emerald-default);
-    --text-multimodal: var(--colors-fuchsia-default);
-    --text-on-hover: var(--colors-primary-2);
-    --surface-primary: var(--colors-off-white-100);
-    --surface-secondary: var(--colors-primary-2);
-    --surface-success: var(--colors-green-50);
-    --surface-information: var(--colors-blue-50);
-    --surface-warning: var(--colors-yellow-50);
-    --surface-cuation: var(--colors-red-50);
-    --surface-action: var(--colors-primary-2);
-    --surface-action-hover: var(--colors-primary-1);
-    --surface-disabled: var(--colors-off-white-30);
-    --surface-tertiary: var(--colors-white-100);
-    --surface-tertiary-hover: var(--colors-white-50);
-    --surface-card: var(--colors-off-white-30);
-    --surface-card-hover: var(--colors-off-white-80);
-    --surface-card-focus: var(--colors-white-100);
-    --surface-card-default: 1.25rem;
-    --border-primary: var(--colors-primary-4);
-    --border-secondary: var(--colors-primary-3);
-    --border-tertiary: var(--colors-primary-1);
-    --border-information: var(--colors-blue-default);
-    --border-success: var(--colors-green-default);
-    --border-warning: var(--colors-yellow-default);
-    --border-cuation: var(--colors-red-default);
-    --border-focus: var(--colors-primary-4);
-    --border-action: var(--colors-primary-3);
-    --border-action-hover: var(--colors-primary-4);
-    --border-disabled: var(--colors-primary-2);
-    --border-developer: var(--colors-emerald-default);
-    --border-browser: var(--colors-sky-default);
-    --border-socialmedia: var(--colors-purple-default);
-    --border-multimodal: var(--colors-fuchsia-default);
-    --border-document: var(--colors-amber-default);
-    --border-transparent: var(--colors-white-0);
-    --icon-primary: var(--colors-primary-default);
-    --icon-action: var(--colors-primary-default);
-    --icon-disabled: var(--colors-primary-3);
-    --icon-information: var(--colors-blue-default);
-    --icon-success: var(--colors-green-default);
-    --icon-warning: var(--colors-yellow-default);
-    --icon-cuation: var(--colors-red-default);
-    --icon-action-hover: var(--colors-primary-10);
-    --icon-multimodal: var(--colors-fuchsia-default);
-    --icon-socialmedia: var(--colors-purple-default);
-    --icon-document: var(--colors-amber-default);
-    --icon-browser: var(--colors-sky-default);
-    --icon-developer: var(--colors-emerald-default);
-    --icon-on-disabled: var(--colors-off-white-50);
-    --icon-on-hover: var(--colors-primary-2);
-    --icon-on-action: var(--colors-primary-1);
-    --icon-secondary: var(--colors-primary-5);
-    --developer: var(--colors-emerald-default);
-    --browser: var(--colors-sky-default);
-    --document: var(--colors-amber-default);
-    --multimodal: var(--colors-fuchsia-default);
-    --socialmedia: var(--colors-purple-default);
-    --fill-default: var(--colors-white-100);
-    --fill-fill-primary: var(--colors-primary-default);
-    --fill-fill-primary-hover: var(--colors-primary-10);
-    --fill-fill-primary-active: var(--colors-primary-11);
-    --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-tertiary-hover: var(--colors-primary-2);
-    --fill-fill-tertiary-active: var(--colors-primary-3);
-    --fill-fill-tertiary-disabled: var(--colors-primary-2);
-    --fill-fill-transparent-active: var(--colors-white-100);
-    --fill-fill-transparent-disabled: var(--colors-white-0);
-    --fill-fill-secondary-disabled: var(--colors-primary-4);
-    --fill-fill-secondary-active: var(--colors-primary-7);
-    --fill-fill-secondary-hover: var(--colors-primary-6);
-    --fill-fill-secondary: var(--colors-primary-5);
-    --fill-fill-success: var(--colors-green-default);
-    --fill-fill-success-hover: var(--colors-green-700);
-    --fill-fill-success-active: var(--colors-green-800);
-    --fill-fill-success-disable: var(--colors-green-400);
-    --fill-fill-warning: var(--colors-yellow-default);
-    --fill-fill-cuation: var(--colors-red-default);
-    --fill-socialmedia: var(--colors-purple-100);
-    --fill-document: var(--colors-amber-100);
-    --fill-browser: var(--colors-sky-100);
-    --fill-multimodal: var(--colors-fuchsia-100);
-    --fill-developer: var(--colors-emerald-100);
-    --fill-scrollbar-dark: var(--colors-primary-3);
-    --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-primary: var(--colors-primary-1);
-    --bg-secondary: var(--colors-primary-2);
-    --bg-tertiary: var(--colors-primary-3);
-    --bg-dark: var(--colors-off-black-80);
-    --bg-dark-primary: var(--colors-off-black-50);
-    --bg-dark-secondary: var(--colors-off-black-30);
-    --bg-dark-tertiary: var(--colors-off-black-10);
-    --bg-dark-default: var(--colors-off-black-100);
-    --bg-page-default: var(--colors-off-white-100);
-    --background: var(--bg-page);
-  }
-
-  .root,
-  [data-theme='dark'] {
-    --text-heading: #e8ecff;
-    --text-body: #f4f6ff;
-    --text-label: #b0bdd8;
-    --text-action: #f8fafc;
-    --text-action-hover: #d9e2ff;
-    --text-disabled: rgba(148, 163, 184, 0.35);
-    --text-information: #7ab3ff;
-    --text-success: #4ade80;
-    --text-warning: #facc15;
-    --text-cuation: #f87171;
-    --text-on-action: #0b1020;
-    --text-on-disabled: rgba(15, 23, 42, 0.7);
-    --text-document: #ffd479;
-    --text-socialmedia: #d8b4fe;
-    --text-browser: #7dd3fc;
-    --text-developer: #6ee7b7;
-    --text-multimodal: #f5a8ff;
-    --text-on-hover: #ffffff;
-    --text-primary: #f4f6ff;
-    --text-secondary: var(--text-label);
-    --text-tertiary: var(--text-disabled);
-    --text-inverse-primary: var(--text-on-action);
-    --text-success-primary: var(--text-success);
-    --text-success-default: var(--text-success);
-    --text-caution: var(--text-cuation);
-    --text-cuation-default: var(--text-cuation);
-    --surface-primary: #131b2b;
-    --surface-secondary: #1b2435;
-    --surface-success: rgba(15, 118, 110, 0.25);
-    --surface-information: rgba(30, 64, 175, 0.22);
-    --surface-warning: rgba(161, 98, 7, 0.26);
-    --surface-cuation: rgba(153, 27, 27, 0.26);
-    --surface-action: #2c3a55;
-    --surface-action-hover: #35476a;
-    --surface-disabled: rgba(148, 163, 184, 0.14);
-    --surface-tertiary: #222d41;
-    --surface-tertiary-hover: #2c3950;
-    --surface-card: #161f30;
-    --surface-card-hover: #1f2a40;
-    --surface-card-focus: #2a3a55;
-    --surface-card-default: 1.25rem;
-    --border-primary: rgba(148, 163, 184, 0.24);
-    --border-secondary: rgba(148, 163, 184, 0.12);
-    --border-tertiary: rgba(148, 163, 184, 0.08);
-    --border-information: rgba(125, 179, 255, 0.65);
-    --border-success: rgba(74, 222, 128, 0.6);
-    --border-cuation: rgba(248, 113, 113, 0.6);
-    --border-warning: rgba(250, 204, 21, 0.6);
-    --border-focus: rgba(226, 232, 240, 0.2);
-    --border-action: rgba(148, 163, 184, 0.24);
-    --border-action-hover: rgba(226, 232, 240, 0.38);
-    --border-disabled: rgba(148, 163, 184, 0.08);
-    --border-developer: rgba(110, 231, 183, 0.6);
-    --border-browser: rgba(125, 211, 252, 0.6);
-    --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-transparent: var(--colors-black-0);
-    --icon-primary: #d0dcff;
-    --icon-action: #f1f5ff;
-    --icon-disabled: rgba(148, 163, 184, 0.4);
-    --icon-information: #7ab3ff;
-    --icon-success: #4ade80;
-    --icon-warning: #facc15;
-    --icon-cuation: #f87171;
-    --icon-action-hover: #ffffff;
-    --icon-multimodal: #f5a8ff;
-    --icon-socialmedia: #d8b4fe;
-    --icon-document: #ffd479;
-    --icon-browser: #7dd3fc;
-    --icon-developer: #6ee7b7;
-    --icon-on-disabled: rgba(15, 23, 42, 0.7);
-    --icon-on-hover: #ffffff;
-    --icon-on-action: #0b1020;
-    --icon-secondary: rgba(226, 232, 240, 0.55);
-    --developer: #34d399;
-    --browser: #38bdf8;
-    --document: #fbbf24;
-    --multimodal: #f472b6;
-    --socialmedia: #c084fc;
-    --fill-default: #131b2b;
-    --fill-fill-primary: #e2e8ff;
-    --fill-fill-primary-hover: #ffffff;
-    --fill-fill-primary-active: #ffffff;
-    --fill-fill-primary-disabled: rgba(209, 213, 219, 0.4);
-    --fill-fill-tertiary: #1f2937;
-    --fill-fill-transparent: rgba(15, 23, 42, 0.4);
-    --fill-fill-transparent-hover: rgba(59, 74, 99, 0.6);
-    --fill-fill-tertiary-hover: #2c3a55;
-    --fill-fill-tertiary-active: #35476a;
-    --fill-fill-tertiary-disabled: rgba(31, 41, 55, 0.6);
-    --fill-fill-transparent-active: rgba(59, 74, 99, 0.75);
-    --fill-fill-transparent-disabled: rgba(15, 23, 42, 0.2);
-    --fill-fill-secondary-disabled: rgba(148, 163, 184, 0.25);
-    --fill-fill-secondary-active: #f1f5ff;
-    --fill-fill-secondary-hover: rgba(226, 232, 240, 0.85);
-    --fill-fill-secondary: rgba(226, 232, 240, 0.65);
-    --fill-fill-success: #22c55e;
-    --fill-fill-success-hover: #4ade80;
-    --fill-fill-success-active: #a7f3d0;
-    --fill-fill-success-disable: rgba(15, 118, 110, 0.45);
-    --fill-fill-warning: #facc15;
-    --fill-fill-cuation: #f87171;
-    --fill-socialmedia: rgba(134, 94, 189, 0.45);
-    --fill-document: rgba(180, 128, 41, 0.45);
-    --fill-browser: rgba(40, 94, 151, 0.45);
-    --fill-multimodal: rgba(161, 60, 190, 0.45);
-    --fill-developer: rgba(23, 121, 96, 0.45);
-    --fill-scrollbar-dark: rgba(148, 163, 184, 0.2);
-    --fill-scrollbar-light: rgba(209, 213, 219, 0.35);
-    --fill-skeloten-default: rgba(148, 163, 184, 0.18);
-    --fill-fill-information: #7ab3ff;
-    --bg-page: #0d1424;
-    --bg-primary: #121a2a;
-    --bg-secondary: #161f30;
-    --bg-tertiary: #1c2640;
-    --bg-dark: #131b2b;
-    --bg-dark-primary: #1b2435;
-    --bg-dark-secondary: #222d41;
-    --bg-dark-tertiary: #2c3950;
-    --bg-dark-default: #0d1424;
-    --bg-page-default: #0d1424;
-    --background: var(--bg-page);
-    --task-fill-running: #1f2937;
-    --log-default: #1f2937;
-    --code-surface: #27272a;
-    --surface-error-subtle: rgba(153, 27, 27, 0.3);
-    --surface-hover-subtle: rgba(55, 65, 81, 0.5);
-    --surface-success-subtle: rgba(6, 95, 70, 0.35);
-    --surface-tertiary-subtle: rgba(31, 41, 55, 0.5);
-    --text-muted: var(--colors-primary-4);
-    --text-muted-strong: var(--colors-primary-3);
-    --text-link: var(--colors-blue-400);
-    --text-link-hover: var(--colors-blue-300);
-    --text-error: var(--colors-red-400);
-    --border-subtle: var(--colors-primary-7);
-    --border-subtle-strong: var(--colors-primary-6);
-  }
 }
diff --git a/src/style/tokens/base.color.json b/src/style/tokens/base.color.json
new file mode 100644
index 000000000..f909c129e
--- /dev/null
+++ b/src/style/tokens/base.color.json
@@ -0,0 +1,299 @@
+{
+  "$description": "Base color seeds and fixed role anchors for Design Tokens V2.",
+  "themes": {
+    "light": {
+      "eigent": {
+        "accent": "#000000",
+        "background": "#faf7f6",
+        "ink": "#1d1d1d"
+      },
+      "claw": {
+        "accent": "#cc7d5e",
+        "background": "#f9f9f7",
+        "ink": "#2d2d2b"
+      },
+      "starfish": {
+        "accent": "#0169cc",
+        "background": "#ffffff",
+        "ink": "#0d0d0d"
+      },
+      "camel": {
+        "accent": "#4c19e8",
+        "background": "#ffffff",
+        "ink": "#1d1d1d"
+      },
+      "whale": {
+        "accent": "#4460f6",
+        "background": "#ffffff",
+        "ink": "#000000"
+      },
+      "custom": {
+        "accent": "#429f2d",
+        "background": "#ffffff",
+        "ink": "#0d0d0d"
+      }
+    },
+    "dark": {
+      "eigent": {
+        "accent": "#ede1db",
+        "background": "#1f1f1f",
+        "ink": "#ffffff"
+      },
+      "claw": {
+        "accent": "#cc7d5e",
+        "background": "#2d2d2b",
+        "ink": "#f9f9f7"
+      },
+      "starfish": {
+        "accent": "#0169cc",
+        "background": "#111111",
+        "ink": "#fcfcfc"
+      },
+      "camel": {
+        "accent": "#b5afff",
+        "background": "#1f1f1f",
+        "ink": "#fafafa"
+      },
+      "whale": {
+        "accent": "#4460f6",
+        "background": "#ffffff",
+        "ink": "#000000"
+      },
+      "custom": {
+        "accent": "#429f2d",
+        "background": "#111111",
+        "ink": "#fcfcfc"
+      }
+    }
+  },
+  "fixedAnchors": {
+    "light": {
+      "single-agent": "#7e22ce",
+      "workforce": "#007a55",
+      "browser": "#0084d1",
+      "terminal": "#009966",
+      "document": "#e17100",
+      "success": "#16a34a",
+      "caution": "#e7000b",
+      "error": "#dc2626",
+      "warning": "#d97706",
+      "information": "#2563eb",
+      "status-running": "#2563eb",
+      "status-splitting": "#0284c7",
+      "status-pending": "#4a69af",
+      "status-error": "#dc2626",
+      "status-reassigning": "#ea580c",
+      "status-completed": "#16a34a",
+      "status-blocked": "#ea580c",
+      "status-paused": "#475569",
+      "status-skipped": "#4b5563",
+      "status-cancelled": "#475569"
+    },
+    "dark": {
+      "single-agent": "#e9d5ff",
+      "workforce": "#6ee7b7",
+      "browser": "#7dd3fc",
+      "terminal": "#6ee7b7",
+      "document": "#ffd479",
+      "success": "#16a34a",
+      "caution": "#f87171",
+      "error": "#dc2626",
+      "warning": "#d97706",
+      "information": "#2563eb",
+      "status-running": "#2563eb",
+      "status-splitting": "#0284c7",
+      "status-pending": "#4a69af",
+      "status-error": "#dc2626",
+      "status-reassigning": "#ea580c",
+      "status-completed": "#16a34a",
+      "status-blocked": "#ea580c",
+      "status-paused": "#475569",
+      "status-skipped": "#4b5563",
+      "status-cancelled": "#475569"
+    }
+  },
+  "fixedShadeScales": {
+    "success": {
+      "50": "#f0fdf4",
+      "100": "#dcfce7",
+      "200": "#bbf7d0",
+      "300": "#86efac",
+      "400": "#4ade80",
+      "500": "#22c55e",
+      "600": "#16a34a",
+      "700": "#15803d",
+      "800": "#166534",
+      "900": "#14532d",
+      "950": "#052e16"
+    },
+    "error": {
+      "50": "#fef2f2",
+      "100": "#fee2e2",
+      "200": "#fecaca",
+      "300": "#fca5a5",
+      "400": "#f87171",
+      "500": "#ef4444",
+      "600": "#dc2626",
+      "700": "#b91c1c",
+      "800": "#991b1b",
+      "900": "#7f1d1d",
+      "950": "#450a0a"
+    },
+    "warning": {
+      "50": "#fffbeb",
+      "100": "#fef3c7",
+      "200": "#fde68a",
+      "300": "#fcd34d",
+      "400": "#fbbf24",
+      "500": "#f59e0b",
+      "600": "#d97706",
+      "700": "#b45309",
+      "800": "#92400e",
+      "900": "#78350f",
+      "950": "#451a03"
+    },
+    "information": {
+      "50": "#eff6ff",
+      "100": "#dbeafe",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "900": "#1e3a8a",
+      "950": "#172554"
+    },
+    "status-running": {
+      "50": "#eff6ff",
+      "100": "#dbeafe",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "900": "#1e3a8a",
+      "950": "#172554"
+    },
+    "status-splitting": {
+      "50": "#f0f9ff",
+      "100": "#e0f2fe",
+      "200": "#bae6fd",
+      "300": "#7dd3fc",
+      "400": "#38bdf8",
+      "500": "#0ea5e9",
+      "600": "#0284c7",
+      "700": "#0369a1",
+      "800": "#075985",
+      "900": "#0c4a6e",
+      "950": "#082f49"
+    },
+    "status-pending": {
+      "50": "#e0e8f6",
+      "100": "#d0dcf1",
+      "200": "#b3c5e8",
+      "300": "#92abdc",
+      "400": "#7291cf",
+      "500": "#5778c0",
+      "600": "#4a69af",
+      "700": "#3f598f",
+      "800": "#374d79",
+      "900": "#314163",
+      "950": "#222d45"
+    },
+    "status-error": {
+      "50": "#fef2f2",
+      "100": "#fee2e2",
+      "200": "#fecaca",
+      "300": "#fca5a5",
+      "400": "#f87171",
+      "500": "#ef4444",
+      "600": "#dc2626",
+      "700": "#b91c1c",
+      "800": "#991b1b",
+      "900": "#7f1d1d",
+      "950": "#450a0a"
+    },
+    "status-reassigning": {
+      "50": "#fff7ed",
+      "100": "#ffedd5",
+      "200": "#fed7aa",
+      "300": "#fdba74",
+      "400": "#fb923c",
+      "500": "#f97316",
+      "600": "#ea580c",
+      "700": "#c2410c",
+      "800": "#9a3412",
+      "900": "#7c2d12",
+      "950": "#431407"
+    },
+    "status-completed": {
+      "50": "#f0fdf4",
+      "100": "#dcfce7",
+      "200": "#bbf7d0",
+      "300": "#86efac",
+      "400": "#4ade80",
+      "500": "#22c55e",
+      "600": "#16a34a",
+      "700": "#15803d",
+      "800": "#166534",
+      "900": "#14532d",
+      "950": "#052e16"
+    },
+    "status-blocked": {
+      "50": "#fff7ed",
+      "100": "#ffedd5",
+      "200": "#fed7aa",
+      "300": "#fdba74",
+      "400": "#fb923c",
+      "500": "#f97316",
+      "600": "#ea580c",
+      "700": "#c2410c",
+      "800": "#9a3412",
+      "900": "#7c2d12",
+      "950": "#431407"
+    },
+    "status-paused": {
+      "50": "#f8fafc",
+      "100": "#f1f5f9",
+      "200": "#e2e8f0",
+      "300": "#cbd5e1",
+      "400": "#94a3b8",
+      "500": "#64748b",
+      "600": "#475569",
+      "700": "#334155",
+      "800": "#1e293b",
+      "900": "#0f172a",
+      "950": "#020617"
+    },
+    "status-skipped": {
+      "50": "#f9fafb",
+      "100": "#f3f4f6",
+      "200": "#e5e7eb",
+      "300": "#d1d5db",
+      "400": "#9ca3af",
+      "500": "#6b7280",
+      "600": "#4b5563",
+      "700": "#374151",
+      "800": "#1f2937",
+      "900": "#111827",
+      "950": "#030712"
+    },
+    "status-cancelled": {
+      "50": "#f8fafc",
+      "100": "#f1f5f9",
+      "200": "#e2e8f0",
+      "300": "#cbd5e1",
+      "400": "#94a3b8",
+      "500": "#64748b",
+      "600": "#475569",
+      "700": "#334155",
+      "800": "#1e293b",
+      "900": "#0f172a",
+      "950": "#020617"
+    }
+  }
+}
diff --git a/src/style/tokens/component.color.json b/src/style/tokens/component.color.json
new file mode 100644
index 000000000..11e599452
--- /dev/null
+++ b/src/style/tokens/component.color.json
@@ -0,0 +1,412 @@
+{
+  "$description": "Component aliases resolved from semantic tokens.",
+  "component": {
+    "text": {
+      "heading": {
+        "$type": "color",
+        "$value": "{text.neutral.default.default}",
+        "$extensions": { "cssVar": "--text-heading" }
+      },
+      "body": {
+        "$type": "color",
+        "$value": "{text.neutral.default.default}",
+        "$extensions": { "cssVar": "--text-body" }
+      },
+      "label": {
+        "$type": "color",
+        "$value": "{text.neutral.muted.default}",
+        "$extensions": { "cssVar": "--text-label" }
+      },
+      "primary": {
+        "$type": "color",
+        "$value": "{text.neutral.default.default}",
+        "$extensions": { "cssVar": "--text-primary" }
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{text.neutral.muted.default}",
+        "$extensions": { "cssVar": "--text-secondary" }
+      },
+      "tertiary": {
+        "$type": "color",
+        "$value": "{text.neutral.subtle.default}",
+        "$extensions": { "cssVar": "--text-tertiary" }
+      },
+      "action": {
+        "$type": "color",
+        "$value": "{text.neutral.default.default}",
+        "$extensions": { "cssVar": "--text-action" }
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{text.neutral.default.hover}",
+        "$extensions": { "cssVar": "--text-action-hover" }
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{text.neutral.muted.disabled}",
+        "$extensions": { "cssVar": "--text-disabled" }
+      },
+      "information": {
+        "$type": "color",
+        "$value": "{text.status-splitting.strong.default}",
+        "$extensions": { "cssVar": "--text-information" }
+      },
+      "success": {
+        "$type": "color",
+        "$value": "{text.status-completed.strong.default}",
+        "$extensions": { "cssVar": "--text-success" }
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "{text.status-pending.strong.default}",
+        "$extensions": { "cssVar": "--text-warning" }
+      },
+      "caution": {
+        "$type": "color",
+        "$value": "{text.status-error.strong.default}",
+        "$extensions": { "cssVar": "--text-caution" }
+      },
+      "on-action": {
+        "$type": "color",
+        "$value": "{text.brand.inverse.default}",
+        "$extensions": { "cssVar": "--text-on-action" }
+      },
+      "on-hover": {
+        "$type": "color",
+        "$value": "{text.brand.inverse.default}",
+        "$extensions": { "cssVar": "--text-on-hover" }
+      },
+      "on-disabled": {
+        "$type": "color",
+        "$value": "{text.neutral.muted.disabled}",
+        "$extensions": { "cssVar": "--text-on-disabled" }
+      }
+    },
+    "border": {
+      "primary": {
+        "$type": "color",
+        "$value": "{border.neutral.strong.default}",
+        "$extensions": { "cssVar": "--border-primary" }
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{border.neutral.default.default}",
+        "$extensions": { "cssVar": "--border-secondary" }
+      },
+      "tertiary": {
+        "$type": "color",
+        "$value": "{border.neutral.subtle.default}",
+        "$extensions": { "cssVar": "--border-tertiary" }
+      },
+      "focus": {
+        "$type": "color",
+        "$value": "{border.brand.default.focus}",
+        "$extensions": { "cssVar": "--border-focus" }
+      },
+      "information": {
+        "$type": "color",
+        "$value": "{border.status-splitting.default.default}",
+        "$extensions": { "cssVar": "--border-information" }
+      },
+      "success": {
+        "$type": "color",
+        "$value": "{border.status-completed.default.default}",
+        "$extensions": { "cssVar": "--border-success" }
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "{border.status-pending.default.default}",
+        "$extensions": { "cssVar": "--border-warning" }
+      },
+      "caution": {
+        "$type": "color",
+        "$value": "{border.status-error.default.default}",
+        "$extensions": { "cssVar": "--border-caution" }
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{border.neutral.subtle.disabled}",
+        "$extensions": { "cssVar": "--border-disabled" }
+      }
+    },
+    "icon": {
+      "primary": {
+        "$type": "color",
+        "$value": "{icon.neutral.default.default}",
+        "$extensions": { "cssVar": "--icon-primary" }
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "{icon.neutral.muted.default}",
+        "$extensions": { "cssVar": "--icon-secondary" }
+      },
+      "action": {
+        "$type": "color",
+        "$value": "{icon.neutral.default.default}",
+        "$extensions": { "cssVar": "--icon-action" }
+      },
+      "action-hover": {
+        "$type": "color",
+        "$value": "{icon.neutral.default.hover}",
+        "$extensions": { "cssVar": "--icon-action-hover" }
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{icon.neutral.muted.disabled}",
+        "$extensions": { "cssVar": "--icon-disabled" }
+      },
+      "information": {
+        "$type": "color",
+        "$value": "{icon.status-splitting.default.default}",
+        "$extensions": { "cssVar": "--icon-information" }
+      },
+      "success": {
+        "$type": "color",
+        "$value": "{icon.status-completed.default.default}",
+        "$extensions": { "cssVar": "--icon-success" }
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "{icon.status-pending.default.default}",
+        "$extensions": { "cssVar": "--icon-warning" }
+      },
+      "caution": {
+        "$type": "color",
+        "$value": "{icon.status-error.default.default}",
+        "$extensions": { "cssVar": "--icon-caution" }
+      }
+    },
+    "app": {
+      "background": {
+        "$type": "color",
+        "$value": "{bg.neutral.subtle.default}",
+        "$extensions": { "cssVar": "--bg-page" }
+      },
+      "fill-default": {
+        "$type": "color",
+        "$value": "{bg.neutral.strong.default}",
+        "$extensions": { "cssVar": "--fill-default" }
+      },
+      "code-bg": {
+        "$type": "color",
+        "$value": "{bg.neutral.inverse.default}",
+        "$extensions": { "cssVar": "--code-bg" }
+      },
+      "code-foreground": {
+        "$type": "color",
+        "$value": "{text.neutral.inverse.default}",
+        "$extensions": { "cssVar": "--code-foreground" }
+      },
+      "code-surface": {
+        "$type": "color",
+        "$value": "{bg.neutral.inverse.hover}",
+        "$extensions": { "cssVar": "--code-surface" }
+      },
+      "mask-default": {
+        "$type": "color",
+        "$value": "{bg.neutral.subtle.default}",
+        "$extensions": { "cssVar": "--mask-default" }
+      },
+      "mask-dark": {
+        "$type": "color",
+        "$value": "{bg.neutral.inverse.default}",
+        "$extensions": { "cssVar": "--mask-dark" }
+      },
+      "dialog-overlay-scrim": {
+        "$type": "color",
+        "$description": "Modal backdrop: pure black @ ~30% in light app mode, pure white @ ~30% in dark mode. Resolved per ThemeProvider mode (single var on :root, no Tailwind dark:).",
+        "$value": {
+          "light": "#0000004d",
+          "dark": "#ffffff4d"
+        },
+        "$extensions": { "cssVar": "--dialog-overlay-scrim" }
+      }
+    },
+    "terminal": {
+      "viewport-surface": {
+        "$type": "color",
+        "$description": "Fixed black backdrop for the embedded terminal viewport (xterm); not theme-tinted.",
+        "$value": "#000000",
+        "$extensions": { "cssVar": "--terminal-viewport-surface" }
+      }
+    },
+    "compat": {
+      "text-session-single-agent": {
+        "$type": "color",
+        "$value": "{text.single-agent.default.default}",
+        "$extensions": { "cssVar": "--text-session-single-agent" }
+      },
+      "text-session-workforce": {
+        "$type": "color",
+        "$value": "{text.workforce.default.default}",
+        "$extensions": { "cssVar": "--text-session-workforce" }
+      },
+      "fill-fill-primary": {
+        "$type": "color",
+        "$value": "{bg.brand.default.default}",
+        "$extensions": { "cssVar": "--fill-fill-primary" }
+      },
+      "fill-fill-primary-hover": {
+        "$type": "color",
+        "$value": "{bg.brand.default.hover}",
+        "$extensions": { "cssVar": "--fill-fill-primary-hover" }
+      },
+      "fill-fill-primary-active": {
+        "$type": "color",
+        "$value": "{bg.brand.default.active}",
+        "$extensions": { "cssVar": "--fill-fill-primary-active" }
+      },
+      "fill-fill-primary-disabled": {
+        "$type": "color",
+        "$value": "{bg.neutral.muted.disabled}",
+        "$extensions": { "cssVar": "--fill-fill-primary-disabled" }
+      },
+      "fill-fill-tertiary": {
+        "$type": "color",
+        "$value": "{bg.neutral.subtle.default}",
+        "$extensions": { "cssVar": "--fill-fill-tertiary" }
+      },
+      "fill-fill-tertiary-hover": {
+        "$type": "color",
+        "$value": "{bg.neutral.subtle.hover}",
+        "$extensions": { "cssVar": "--fill-fill-tertiary-hover" }
+      },
+      "fill-fill-tertiary-active": {
+        "$type": "color",
+        "$value": "{bg.neutral.subtle.active}",
+        "$extensions": { "cssVar": "--fill-fill-tertiary-active" }
+      },
+      "fill-fill-tertiary-disabled": {
+        "$type": "color",
+        "$value": "{bg.neutral.muted.disabled}",
+        "$extensions": { "cssVar": "--fill-fill-tertiary-disabled" }
+      },
+      "fill-fill-transparent": {
+        "$type": "color",
+        "$value": "transparent",
+        "$extensions": { "cssVar": "--fill-fill-transparent" }
+      },
+      "fill-fill-transparent-hover": {
+        "$type": "color",
+        "$value": "{bg.neutral.subtle.hover}",
+        "$extensions": { "cssVar": "--fill-fill-transparent-hover" }
+      },
+      "fill-fill-transparent-active": {
+        "$type": "color",
+        "$value": "{bg.neutral.subtle.active}",
+        "$extensions": { "cssVar": "--fill-fill-transparent-active" }
+      },
+      "fill-fill-transparent-disabled": {
+        "$type": "color",
+        "$value": "transparent",
+        "$extensions": { "cssVar": "--fill-fill-transparent-disabled" }
+      },
+      "fill-fill-secondary": {
+        "$type": "color",
+        "$value": "{bg.neutral.default.default}",
+        "$extensions": { "cssVar": "--fill-fill-secondary" }
+      },
+      "fill-fill-secondary-hover": {
+        "$type": "color",
+        "$value": "{bg.neutral.default.hover}",
+        "$extensions": { "cssVar": "--fill-fill-secondary-hover" }
+      },
+      "fill-fill-secondary-active": {
+        "$type": "color",
+        "$value": "{bg.neutral.default.active}",
+        "$extensions": { "cssVar": "--fill-fill-secondary-active" }
+      },
+      "fill-fill-secondary-disabled": {
+        "$type": "color",
+        "$value": "{bg.neutral.muted.disabled}",
+        "$extensions": { "cssVar": "--fill-fill-secondary-disabled" }
+      },
+      "fill-fill-success": {
+        "$type": "color",
+        "$value": "{bg.status-completed.default.default}",
+        "$extensions": { "cssVar": "--fill-fill-success" }
+      },
+      "fill-fill-success-hover": {
+        "$type": "color",
+        "$value": "{bg.status-completed.subtle.hover}",
+        "$extensions": { "cssVar": "--fill-fill-success-hover" }
+      },
+      "fill-fill-success-active": {
+        "$type": "color",
+        "$value": "{bg.status-completed.subtle.active}",
+        "$extensions": { "cssVar": "--fill-fill-success-active" }
+      },
+      "fill-fill-success-disable": {
+        "$type": "color",
+        "$value": "{bg.status-completed.subtle.default}",
+        "$extensions": { "cssVar": "--fill-fill-success-disable" }
+      },
+      "fill-fill-warning": {
+        "$type": "color",
+        "$value": "{bg.status-pending.default.default}",
+        "$extensions": { "cssVar": "--fill-fill-warning" }
+      },
+      "fill-fill-caution": {
+        "$type": "color",
+        "$value": "{bg.status-error.default.default}",
+        "$extensions": { "cssVar": "--fill-fill-caution" }
+      },
+      "fill-fill-information": {
+        "$type": "color",
+        "$value": "{bg.status-splitting.default.default}",
+        "$extensions": { "cssVar": "--fill-fill-information" }
+      },
+      "fill-browser": {
+        "$type": "color",
+        "$value": "{bg.browser.subtle.default}",
+        "$extensions": { "cssVar": "--fill-browser" }
+      },
+      "fill-document": {
+        "$type": "color",
+        "$value": "{bg.document.subtle.default}",
+        "$extensions": { "cssVar": "--fill-document" }
+      },
+      "fill-socialmedia": {
+        "$type": "color",
+        "$value": "{bg.single-agent.subtle.default}",
+        "$extensions": { "cssVar": "--fill-socialmedia" }
+      },
+      "fill-multimodal": {
+        "$type": "color",
+        "$value": "{bg.information.subtle.default}",
+        "$extensions": { "cssVar": "--fill-multimodal" }
+      },
+      "fill-developer": {
+        "$type": "color",
+        "$value": "{bg.workforce.subtle.default}",
+        "$extensions": { "cssVar": "--fill-developer" }
+      },
+      "icon-on-action": {
+        "$type": "color",
+        "$value": "{text.brand.inverse.default}",
+        "$extensions": { "cssVar": "--icon-on-action" }
+      },
+      "icon-on-hover": {
+        "$type": "color",
+        "$value": "{text.brand.inverse.default}",
+        "$extensions": { "cssVar": "--icon-on-hover" }
+      },
+      "icon-on-disabled": {
+        "$type": "color",
+        "$value": "{text.neutral.muted.disabled}",
+        "$extensions": { "cssVar": "--icon-on-disabled" }
+      },
+      "bg-page-default": {
+        "$type": "color",
+        "$value": "{bg.neutral.subtle.default}",
+        "$extensions": { "cssVar": "--bg-page-default" }
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{bg.neutral.subtle.default}",
+        "$extensions": { "cssVar": "--background" }
+      }
+    }
+  }
+}
diff --git a/src/style/tokens/contracts/default.base.json b/src/style/tokens/contracts/default.base.json
new file mode 100644
index 000000000..8a146de2f
--- /dev/null
+++ b/src/style/tokens/contracts/default.base.json
@@ -0,0 +1,15 @@
+{
+  "contracts": {
+    "base": {
+      "version": 2,
+      "themeId": "eigent",
+      "contrast": 43,
+      "overrides": {
+        "tone": {},
+        "emphasis": {},
+        "state": {},
+        "cell": {}
+      }
+    }
+  }
+}
diff --git a/src/style/tokens/contracts/default.dark.json b/src/style/tokens/contracts/default.dark.json
new file mode 100644
index 000000000..31b3ebcad
--- /dev/null
+++ b/src/style/tokens/contracts/default.dark.json
@@ -0,0 +1,4 @@
+{
+  "$extends": "contracts.base",
+  "mode": "dark"
+}
diff --git a/src/style/tokens/contracts/default.light.json b/src/style/tokens/contracts/default.light.json
new file mode 100644
index 000000000..0420eeb68
--- /dev/null
+++ b/src/style/tokens/contracts/default.light.json
@@ -0,0 +1,4 @@
+{
+  "$extends": "contracts.base",
+  "mode": "light"
+}
diff --git a/src/style/tokens/manifest.json b/src/style/tokens/manifest.json
new file mode 100644
index 000000000..1fcd57ea8
--- /dev/null
+++ b/src/style/tokens/manifest.json
@@ -0,0 +1,29 @@
+{
+  "elements": ["bg", "text", "border", "icon", "ring"],
+  "emphasis": ["subtle", "muted", "default", "strong", "inverse"],
+  "states": ["default", "hover", "active", "selected", "focus", "disabled"],
+  "tones": [
+    "neutral",
+    "brand",
+    "status-running",
+    "status-splitting",
+    "status-pending",
+    "status-error",
+    "status-reassigning",
+    "status-completed",
+    "status-blocked",
+    "status-paused",
+    "status-skipped",
+    "status-cancelled",
+    "single-agent",
+    "workforce",
+    "browser",
+    "terminal",
+    "document",
+    "success",
+    "caution",
+    "error",
+    "warning",
+    "information"
+  ]
+}
diff --git a/src/style/tokens/semantic.color.json b/src/style/tokens/semantic.color.json
new file mode 100644
index 000000000..e557d97de
--- /dev/null
+++ b/src/style/tokens/semantic.color.json
@@ -0,0 +1,215 @@
+{
+  "$description": "Semantic token axes and generation transforms for V2.",
+  "axes": {
+    "elements": ["bg", "text", "border", "icon", "ring"],
+    "tones": [
+      "neutral",
+      "brand",
+      "status-running",
+      "status-splitting",
+      "status-pending",
+      "status-error",
+      "status-reassigning",
+      "status-completed",
+      "status-blocked",
+      "status-paused",
+      "status-skipped",
+      "status-cancelled",
+      "single-agent",
+      "workforce",
+      "browser",
+      "terminal",
+      "document",
+      "success",
+      "caution",
+      "error",
+      "warning",
+      "information"
+    ],
+    "emphasis": [
+      "subtle",
+      "muted",
+      "default",
+      "strong",
+      "inverse",
+      "transparent"
+    ],
+    "states": ["default", "hover", "active", "selected", "focus", "disabled"]
+  },
+  "transforms": {
+    "emphasis": {
+      "subtle": { "dL": 0.18, "dC": -0.02 },
+      "muted": { "dL": 0.1, "dC": -0.01 },
+      "default": { "dL": 0, "dC": 0 },
+      "strong": { "dL": -0.08, "dC": 0.02 },
+      "inverse": { "dL": -0.22, "dC": 0.01 },
+      "transparent": { "dL": 0, "dC": 0 }
+    },
+    "state": {
+      "default": { "dL": 0, "dC": 0 },
+      "hover": { "dL": -0.03, "dC": 0.01 },
+      "active": { "dL": -0.06, "dC": 0.015 },
+      "selected": { "dL": -0.08, "dC": 0.015 },
+      "focus": { "dL": -0.05, "dC": 0.03 },
+      "disabled": { "dL": 0.08, "dC": -0.03, "alpha": 0.5 }
+    },
+    "element": {
+      "bg": { "dL": 0, "dC": 0 },
+      "text": { "dL": -0.12, "dC": -0.005 },
+      "border": { "dL": -0.06, "dC": -0.01, "alpha": 0.75 },
+      "icon": { "dL": -0.1, "dC": -0.005, "alpha": 0.92 },
+      "ring": { "dL": -0.04, "dC": 0.01, "alpha": 0.62 }
+    }
+  },
+  "toneSource": {
+    "neutral": {
+      "source": "background",
+      "sourceByElement": {
+        "text": "ink",
+        "icon": "ink"
+      },
+      "dC": -0.08,
+      "dLLight": 0.08,
+      "dLDark": -0.08
+    },
+    "brand": { "source": "accent", "dC": 0.03 },
+    "status-running": { "source": "fixed" },
+    "status-splitting": { "source": "fixed" },
+    "status-pending": { "source": "fixed" },
+    "status-error": { "source": "fixed" },
+    "status-reassigning": { "source": "fixed" },
+    "status-completed": { "source": "fixed" },
+    "status-blocked": { "source": "fixed" },
+    "status-paused": { "source": "fixed" },
+    "status-skipped": { "source": "fixed" },
+    "status-cancelled": { "source": "fixed" },
+    "single-agent": { "source": "fixed" },
+    "workforce": { "source": "fixed" },
+    "browser": { "source": "fixed" },
+    "terminal": { "source": "fixed" },
+    "document": { "source": "fixed" },
+    "success": { "source": "fixed" },
+    "caution": { "source": "fixed" },
+    "error": { "source": "fixed" },
+    "warning": { "source": "fixed" },
+    "information": { "source": "fixed" }
+  },
+  "contrastPairs": [
+    {
+      "fg": "text.neutral.default.default",
+      "bg": "bg.neutral.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.neutral.muted.default",
+      "bg": "bg.neutral.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.brand.inverse.default",
+      "bg": "bg.brand.default.default",
+      "minContrast": 3,
+      "largeText": true
+    },
+    {
+      "fg": "text.status-completed.strong.default",
+      "bg": "bg.status-completed.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.status-error.strong.default",
+      "bg": "bg.status-error.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.status-splitting.strong.default",
+      "bg": "bg.status-splitting.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.status-pending.strong.default",
+      "bg": "bg.status-pending.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.status-running.strong.default",
+      "bg": "bg.status-running.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.status-reassigning.strong.default",
+      "bg": "bg.status-reassigning.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.status-blocked.strong.default",
+      "bg": "bg.status-blocked.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.status-paused.strong.default",
+      "bg": "bg.status-paused.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.status-skipped.strong.default",
+      "bg": "bg.status-skipped.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.status-cancelled.strong.default",
+      "bg": "bg.status-cancelled.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.single-agent.strong.default",
+      "bg": "bg.single-agent.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.workforce.strong.default",
+      "bg": "bg.workforce.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.browser.strong.default",
+      "bg": "bg.browser.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.terminal.strong.default",
+      "bg": "bg.terminal.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.document.strong.default",
+      "bg": "bg.document.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.success.strong.default",
+      "bg": "bg.success.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.caution.strong.default",
+      "bg": "bg.caution.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.error.strong.default",
+      "bg": "bg.error.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.warning.strong.default",
+      "bg": "bg.warning.subtle.default",
+      "minContrast": 4.5
+    },
+    {
+      "fg": "text.information.strong.default",
+      "bg": "bg.information.subtle.default",
+      "minContrast": 4.5
+    }
+  ]
+}
diff --git a/src/types/chatbox.d.ts b/src/types/chatbox.d.ts
index 2103edf87..6bc6844ec 100644
--- a/src/types/chatbox.d.ts
+++ b/src/types/chatbox.d.ts
@@ -32,6 +32,7 @@ declare global {
     task_id?: string;
     project_id?: string;
     isFolder?: boolean;
+    isRemote?: boolean;
     relativePath?: string;
   }
 
@@ -119,6 +120,8 @@ declare global {
   }
 
   interface AgentMessage {
+    timestamp?: number | null;
+    created_at?: string | null;
     step: AgentStepType;
     data: {
       project_id?: string;
diff --git a/src/types/constants.ts b/src/types/constants.ts
index eba956f65..910311704 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];
@@ -98,3 +99,13 @@ export const AgentStatusValue = {
 
 export type AgentStatusType =
   (typeof AgentStatusValue)[keyof typeof AgentStatusValue];
+
+/**
+ * Session side-panel mode: multi-agent workforce or single-agent focus.
+ */
+export const SessionMode = {
+  WORKFORCE: 'workforce',
+  SINGLE_AGENT: 'single-agent',
+} as const;
+
+export type SessionModeType = (typeof SessionMode)[keyof typeof SessionMode];
diff --git a/src/types/electron.d.ts b/src/types/electron.d.ts
index d4da6455d..3388c1f6b 100644
--- a/src/types/electron.d.ts
+++ b/src/types/electron.d.ts
@@ -64,6 +64,23 @@ interface ElectronAPI {
   getShowWebview: () => Promise<any>;
   webviewDestroy: (webviewId: string) => Promise<any>;
   exportLog: () => Promise<any>;
+  getDiagnosticsInfo: () => Promise<{
+    version: string;
+    platform: string;
+    arch: string;
+  }>;
+  exportDiagnosticsZip: (payload: {
+    description: string;
+    steps?: string;
+  }) => Promise<{
+    success: boolean;
+    savedPath?: string;
+    error?: string;
+  }>;
+  openMailto: (url: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
   mcpInstall: (name: string, mcp: any) => Promise<any>;
   mcpRemove: (name: string) => Promise<any>;
   mcpUpdate: (name: string, mcp: any) => Promise<any>;
diff --git a/src/types/workspace.d.ts b/src/types/workspace.d.ts
index df1a753d7..1c6680055 100644
--- a/src/types/workspace.d.ts
+++ b/src/types/workspace.d.ts
@@ -12,7 +12,7 @@
 // limitations under the License.
 // ========= Copyright 2025-2026 @ Eigent.ai All Rights Reserved. =========
 
-// Global type definitions for WorkspaceMenu component
+// Global type definitions shared by workforce / workspace UI
 
 declare global {
   type WorkspaceType =
diff --git a/tailwind.config.js b/tailwind.config.js
index dde8e9020..2155ac3df 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,122 @@
 /** @type {import('tailwindcss').Config} */
+const fs = require('node:fs');
+const path = require('node:path');
+
+function loadTokenManifest() {
+  const fallback = {
+    elements: ['bg', 'text', 'border', 'icon', 'ring'],
+    emphasis: ['subtle', 'muted', 'default', 'strong', 'inverse'],
+    states: ['default', 'hover', 'active', 'selected', 'focus', 'disabled'],
+    tones: [
+      'neutral',
+      'brand',
+      'status-running',
+      'status-splitting',
+      'status-pending',
+      'status-error',
+      'status-reassigning',
+      'status-completed',
+      'status-blocked',
+      'status-paused',
+      'status-skipped',
+      'status-cancelled',
+      'single-agent',
+      'workforce',
+      'browser',
+      'terminal',
+      'document',
+      'success',
+      'caution',
+      'error',
+      'warning',
+      'information',
+    ],
+  };
+
+  const manifestPath = path.join(__dirname, 'tokens', 'manifest.json');
+  try {
+    const raw = fs.readFileSync(manifestPath, 'utf8');
+    const parsed = JSON.parse(raw);
+    if (
+      Array.isArray(parsed.elements) &&
+      Array.isArray(parsed.emphasis) &&
+      Array.isArray(parsed.states) &&
+      Array.isArray(parsed.tones)
+    ) {
+      return parsed;
+    }
+    return fallback;
+  } catch (_error) {
+    return fallback;
+  }
+}
+
+const TOKEN_MANIFEST = loadTokenManifest();
+const DS_TOKEN_ELEMENTS = TOKEN_MANIFEST.elements;
+const DS_TOKEN_EMPHASIS = TOKEN_MANIFEST.emphasis;
+const DS_TOKEN_STATES = TOKEN_MANIFEST.states;
+const DS_TOKEN_TONES = TOKEN_MANIFEST.tones;
+
+function buildDsTokenColorMap() {
+  const map = {};
+  for (const element of DS_TOKEN_ELEMENTS) {
+    for (const tone of DS_TOKEN_TONES) {
+      for (const emphasis of DS_TOKEN_EMPHASIS) {
+        for (const state of DS_TOKEN_STATES) {
+          const token = `ds-${element}-${tone}-${emphasis}-${state}`;
+          map[token] = `var(--${token})`;
+        }
+      }
+    }
+  }
+  return map;
+}
+
+/** `bg-ds-bg-{status}-subtle-default` → `var(--ds-bg-status-{status}-subtle-default)` (drops `status` from the utility name). */
+function buildDsBgStatusSubtleShortAliases() {
+  const map = {};
+  const statuses = [
+    'running',
+    'splitting',
+    'pending',
+    'error',
+    'reassigning',
+    'completed',
+    'blocked',
+    'paused',
+    'skipped',
+    'cancelled',
+  ];
+  for (const s of statuses) {
+    map[`ds-bg-${s}-subtle-default`] =
+      `var(--ds-bg-status-${s}-subtle-default)`;
+  }
+  return map;
+}
+
+/** Safelist neutral DS tokens (all emphasis × state) so JIT always emits bg/text/border/icon/ring/divide/outline utilities. */
+function neutralDsSemanticSafelist() {
+  const variants = [
+    'hover',
+    'focus',
+    'active',
+    'disabled',
+    'focus-visible',
+    'group-hover',
+    'dark',
+    'placeholder',
+  ];
+  return [
+    { pattern: /^bg-ds-bg-neutral-/, variants },
+    { pattern: /^text-ds-text-neutral-/, variants },
+    { pattern: /^text-ds-icon-neutral-/, variants },
+    { pattern: /^border-ds-border-neutral-/, variants },
+    { pattern: /^ring-ds-ring-neutral-/, variants },
+    { pattern: /^divide-ds-border-neutral-/, variants },
+    { pattern: /^outline-ds-border-neutral-/, variants },
+  ];
+}
+
 module.exports = {
   darkMode: ['class'],
   content: [
@@ -6,9 +124,12 @@ module.exports = {
     './src/**/*.{js,ts,jsx,tsx}',
     './.storybook/**/*.{js,ts,jsx,tsx}',
   ],
+  safelist: neutralDsSemanticSafelist(),
   theme: {
     extend: {
       colors: {
+        ...buildDsTokenColorMap(),
+        ...buildDsBgStatusSubtleShortAliases(),
         red: {
           50: 'var(--colors-red-50)',
           100: 'var(--colors-red-100)',
@@ -151,6 +272,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)',
@@ -204,19 +339,19 @@ module.exports = {
         input: {
           'bg-default': 'var(--input-bg-default)',
           'bg-hover': 'var(--input-bg-hover)',
-          'bg-spliting': 'var(--input-bg-spliting)',
+          'bg-splitting': 'var(--input-bg-splitting)',
           'bg-confirm': 'var(--input-bg-confirm)',
           'bg-input': 'var(--input-bg-input)',
           'border-default': 'var(--input-border-default)',
           'border-hover': 'var(--input-border-hover)',
           'border-focus': 'var(--input-border-focus)',
           'border-success': 'var(--input-border-success)',
-          'border-cuation': 'var(--input-border-cuation)',
+          'border-caution': 'var(--input-border-caution)',
           'border-warning': 'var(--input-border-warning)',
           'text-default': 'var(--input-text-default)',
           'text-focus': 'var(--input-text-focus)',
           'text-success': 'var(--text-success)',
-          'text-cuation': 'var(--text-cuation)',
+          'text-caution': 'var(--text-caution)',
           'text-warning': 'var(--text-warning)',
           'label-default': 'var(--input-label-default)',
         },
@@ -294,33 +429,33 @@ module.exports = {
             'icon-disabled': 'var(--button-transparent-icon-disabled)',
             'icon-active': 'var(--button-transparent-icon-active)',
           },
-          tertiery: {
-            'fill-hover': 'var(--button-tertiery-fill-hover)',
-            'fill-default': 'var(--button-tertiery-fill-default)',
-            'fill-disabled': 'var(--button-tertiery-fill-disabled)',
-            'fill-active': 'var(--button-tertiery-fill-active)',
-            'icon-hover': 'var(--button-tertiery-icon-hover)',
-            'icon-default': 'var(--button-tertiery-icon-default)',
-            'text-disabled': 'var(--button-tertiery-text-disabled)',
-            'text-active': 'var(--button-tertiery-text-active)',
-            'text-hover': 'var(--button-tertiery-text-hover)',
-            'text-default': 'var(--button-tertiery-text-default)',
-            'icon-disabled': 'var(--button-tertiery-icon-disabled)',
-            'icon-active': 'var(--button-tertiery-icon-active)',
-            'icon-hover 2': 'var(--button-tertiery-icon-hover-2)',
-            'icon-default 2': 'var(--button-tertiery-icon-default-2)',
-            'text-disabled 2': 'var(--button-tertiery-text-disabled-2)',
-            'text-active 2': 'var(--button-tertiery-text-active-2)',
-            'text-hover 2': 'var(--button-tertiery-text-hover-2)',
-            'text-default 2': 'var(--button-tertiery-text-default-2)',
-            'icon-disabled 2': 'var(--button-tertiery-icon-disabled-2)',
-            'icon-active 2': 'var(--button-tertiery-icon-active-2)',
+          tertiary: {
+            'fill-hover': 'var(--button-tertiary-fill-hover)',
+            'fill-default': 'var(--button-tertiary-fill-default)',
+            'fill-disabled': 'var(--button-tertiary-fill-disabled)',
+            'fill-active': 'var(--button-tertiary-fill-active)',
+            'icon-hover': 'var(--button-tertiary-icon-hover)',
+            'icon-default': 'var(--button-tertiary-icon-default)',
+            'text-disabled': 'var(--button-tertiary-text-disabled)',
+            'text-active': 'var(--button-tertiary-text-active)',
+            'text-hover': 'var(--button-tertiary-text-hover)',
+            'text-default': 'var(--button-tertiary-text-default)',
+            'icon-disabled': 'var(--button-tertiary-icon-disabled)',
+            'icon-active': 'var(--button-tertiary-icon-active)',
+            'icon-hover 2': 'var(--button-tertiary-icon-hover-2)',
+            'icon-default 2': 'var(--button-tertiary-icon-default-2)',
+            'text-disabled 2': 'var(--button-tertiary-text-disabled-2)',
+            'text-active 2': 'var(--button-tertiary-text-active-2)',
+            'text-hover 2': 'var(--button-tertiary-text-hover-2)',
+            'text-default 2': 'var(--button-tertiary-text-default-2)',
+            'icon-disabled 2': 'var(--button-tertiary-icon-disabled-2)',
+            'icon-active 2': 'var(--button-tertiary-icon-active-2)',
           },
           'fill-success': 'var(--button-fill-success)',
-          'fill-cuation': 'var(--button-fill-cuation)',
+          'fill-caution': 'var(--button-fill-caution)',
           'fill-warning': 'var(--button-fill-warning)',
           'fill-success-foreground': 'var(--button-fill-success-foreground)',
-          'fill-cuation-foreground': 'var(--button-fill-cuation-foreground)',
+          'fill-caution-foreground': 'var(--button-fill-caution-foreground)',
           'fill-warning-foreground': 'var(--button-fill-warning-foreground)',
           'fill-information': 'var(--button-fill-information)',
           'fill-information-foreground':
@@ -389,6 +524,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)',
@@ -402,8 +538,8 @@ module.exports = {
           'text-success': 'var(--tag-text-success)',
           'fill-warning': 'var(--tag-fill-warning)',
           'foreground-warning': 'var(--tag-foreground-warning)',
-          'fill-cuation': 'var(--tag-fill-cuation)',
-          'foreground-cuation': 'var(--tag-foreground-cuation)',
+          'fill-caution': 'var(--tag-fill-caution)',
+          'foreground-caution': 'var(--tag-foreground-caution)',
           'fill-default': 'var(--tag-fill-default)',
           'foreground-default': 'var(--tag-foreground-default)',
           'fill-default-foreground': 'var(--tag-fill-default-foreground)',
@@ -445,16 +581,17 @@ module.exports = {
           default: 'var(--mask-default)',
           dark: 'var(--mask-dark)',
         },
+        'dialog-overlay-scrim': 'var(--dialog-overlay-scrim)',
         code: {
           bg: 'var(--code-bg)',
           foreground: 'var(--code-foreground)',
           surface: 'var(--code-surface)',
         },
         surface: {
-          'error-subtle': 'var(--surface-error-subtle)',
-          'hover-subtle': 'var(--surface-hover-subtle)',
-          'success-subtle': 'var(--surface-success-subtle)',
-          'tertiary-subtle': 'var(--surface-tertiary-subtle)',
+          'error-subtle': 'var(--ds-bg-status-error-subtle-default)',
+          'hover-subtle': 'var(--ds-bg-neutral-subtle-hover)',
+          'success-subtle': 'var(--ds-bg-status-completed-subtle-default)',
+          'tertiary-subtle': 'var(--ds-bg-neutral-strong-default)',
         },
         'text-muted': 'var(--text-muted)',
         'text-muted-strong': 'var(--text-muted-strong)',
@@ -479,30 +616,37 @@ module.exports = {
         'text-information': 'var(--text-information)',
         'text-success': 'var(--text-success)',
         'text-warning': 'var(--text-warning)',
-        'text-cuation': 'var(--text-cuation)',
+        'text-caution': 'var(--text-caution)',
         'text-on-action': 'var(--text-on-action)',
         'text-on-disabled': 'var(--text-on-disabled)',
         '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)',
+        'session-single-agent': 'var(--text-session-single-agent)',
+        'session-workforce': 'var(--text-session-workforce)',
         'text-on-hover': 'var(--text-on-hover)',
 
-        'surface-primary': 'var(--surface-primary)',
-        'surface-secondary': 'var(--surface-secondary)',
-        'surface-success': 'var(--surface-success)',
-        'surface-information': 'var(--surface-information)',
-        'surface-warning': 'var(--surface-warning)',
-        'surface-cuation': 'var(--surface-cuation)',
-        'surface-action': 'var(--surface-action)',
-        'surface-action-hover': 'var(--surface-action-hover)',
-        'surface-disabled': 'var(--surface-disabled)',
-        'surface-tertiary': 'var(--surface-tertiary)',
-        'surface-card': 'var(--surface-card)',
-        'surface-card-hover': 'var(--surface-card-hover)',
-        'surface-card-focus': 'var(--surface-card-focus)',
-        'surface-card-default': 'var(--surface-card-default)',
+        'surface-primary': 'var(--ds-bg-neutral-subtle-default)',
+        'surface-secondary': 'var(--ds-bg-neutral-default-default)',
+        'surface-success': 'var(--ds-bg-status-completed-subtle-default)',
+        'surface-information': 'var(--ds-bg-status-splitting-subtle-default)',
+        'surface-warning': 'var(--ds-bg-status-pending-subtle-default)',
+        'surface-caution': 'var(--ds-bg-status-error-subtle-default)',
+        'surface-action': 'var(--ds-bg-neutral-default-default)',
+        'surface-action-hover': 'var(--ds-bg-neutral-default-hover)',
+        'surface-disabled': 'var(--ds-bg-neutral-muted-disabled)',
+        'surface-tertiary': 'var(--ds-bg-neutral-strong-default)',
+        'surface-card': 'var(--ds-bg-neutral-default-default)',
+        'surface-card-hover': 'var(--ds-bg-neutral-default-hover)',
+        'surface-card-focus': 'var(--ds-bg-neutral-default-focus)',
+        'surface-card-default': '1.25rem',
+        'surface-session-single-agent-selected':
+          'var(--ds-bg-single-agent-subtle-selected)',
+        'surface-session-workforce-selected':
+          'var(--ds-bg-workforce-subtle-selected)',
 
         'border-primary': 'var(--border-primary)',
         'border-secondary': 'var(--border-secondary)',
@@ -510,13 +654,14 @@ module.exports = {
         'border-information': 'var(--border-information)',
         'border-success': 'var(--border-success)',
         'border-warning': 'var(--border-warning)',
-        'border-cuation': 'var(--border-cuation)',
+        'border-caution': 'var(--border-caution)',
         'border-focus': 'var(--border-focus)',
         'border-action': 'var(--border-action)',
         'border-action-hover': 'var(--border-action-hover)',
         '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)',
@@ -528,8 +673,7 @@ module.exports = {
         'icon-information': 'var(--icon-information)',
         'icon-success': 'var(--icon-success)',
         'icon-warning': 'var(--icon-warning)',
-        'icon-caution': 'var(--icon-cuation)',
-        'icon-cuation': 'var(--icon-cuation)',
+        'icon-caution': 'var(--icon-caution)',
         'icon-action-hover': 'var(--icon-action-hover)',
         'icon-multimodal': 'var(--icon-multimodal)',
         'icon-socialmedia': 'var(--icon-socialmedia)',
@@ -540,6 +684,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)',
@@ -564,10 +710,11 @@ module.exports = {
         'fill-fill-success-active': 'var(--fill-fill-success-active)',
         'fill-fill-success-disable': 'var(--fill-fill-success-disable)',
         'fill-fill-warning': 'var(--fill-fill-warning)',
-        'fill-fill-cuation': 'var(--fill-fill-cuation)',
+        'fill-fill-caution': 'var(--fill-fill-caution)',
         '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)',
@@ -575,6 +722,9 @@ module.exports = {
         'fill-skeloten-default': 'var(--fill-skeloten-default)',
         'fill-fill-information': 'var(--fill-fill-information)',
 
+        /** Embedded xterm viewport backdrop; fixed black (see tokens/component.color.json). */
+        'terminal-viewport-surface': 'var(--terminal-viewport-surface)',
+
         'bg-page': 'var(--bg-page)',
         'bg-primary': 'var(--bg-primary)',
         'bg-secondary': 'var(--bg-secondary)',
@@ -595,6 +745,7 @@ module.exports = {
       boxShadow: {
         'history-item': '0px 3px 4px -1px rgba(0, 0, 0, 0.10)',
         perfect: 'var(--shadow-perfect)',
+        soft: 'var(--shadow-soft)',
         'blur-effect': 'var(--shadow-blur-effect)',
         'button-shadow': 'var(--shadow-button)',
       },
diff --git a/test/mocks/electronMocks.ts b/test/mocks/electronMocks.ts
index 9d98aa22b..dc220c5fd 100644
--- a/test/mocks/electronMocks.ts
+++ b/test/mocks/electronMocks.ts
@@ -39,6 +39,9 @@ export interface MockedElectronAPI {
   checkAndInstallDepsOnUpdate: ReturnType<typeof vi.fn>;
   getInstallationStatus: ReturnType<typeof vi.fn>;
   exportLog: ReturnType<typeof vi.fn>;
+  getDiagnosticsInfo: ReturnType<typeof vi.fn>;
+  exportDiagnosticsZip: ReturnType<typeof vi.fn>;
+  openMailto: ReturnType<typeof vi.fn>;
   onInstallDependenciesStart: ReturnType<typeof vi.fn>;
   onInstallDependenciesLog: ReturnType<typeof vi.fn>;
   onInstallDependenciesComplete: ReturnType<typeof vi.fn>;
@@ -199,6 +202,25 @@ export function createElectronAPIMock(): MockedElectronAPI {
       };
     }),
 
+    getDiagnosticsInfo: vi.fn().mockImplementation(async () => {
+      return {
+        version: '1.0.0',
+        platform: 'darwin',
+        arch: 'arm64',
+      };
+    }),
+
+    exportDiagnosticsZip: vi.fn().mockImplementation(async () => {
+      return {
+        success: true,
+        savedPath: '/mock/diagnostics.zip',
+      };
+    }),
+
+    openMailto: vi.fn().mockImplementation(async () => {
+      return { success: true };
+    }),
+
     // Event listeners
     onInstallDependenciesStart: vi
       .fn()
@@ -410,6 +432,9 @@ export function createElectronAPIMock(): MockedElectronAPI {
       electronAPI.checkAndInstallDepsOnUpdate.mockClear();
       electronAPI.getInstallationStatus.mockClear();
       electronAPI.exportLog.mockClear();
+      electronAPI.getDiagnosticsInfo.mockClear();
+      electronAPI.exportDiagnosticsZip.mockClear();
+      electronAPI.openMailto.mockClear();
       electronAPI.onInstallDependenciesStart.mockClear();
       electronAPI.onInstallDependenciesLog.mockClear();
       electronAPI.onInstallDependenciesComplete.mockClear();
diff --git a/test/unit/components/AgentPoolSection.test.tsx b/test/unit/components/AgentPoolSection.test.tsx
new file mode 100644
index 000000000..00eafdad2
--- /dev/null
+++ b/test/unit/components/AgentPoolSection.test.tsx
@@ -0,0 +1,306 @@
+// ========= 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 {
+  reconcileToolkitState,
+  TOOLKIT_MIN_DISPLAY_MS,
+} from '@/components/Session/SidePanelSections/AgentPoolSection';
+import { AgentStatusValue } from '@/types/constants';
+import { describe, expect, it } from 'vitest';
+
+type State = Parameters<typeof reconcileToolkitState>[0];
+
+function makeState(): State {
+  return { entries: new Map(), timers: new Map(), retired: new Set() };
+}
+
+function makeScheduler() {
+  const scheduled: Array<{
+    id: string;
+    delay: number;
+    cancelled: boolean;
+    handle: number;
+  }> = [];
+  let nextHandle = 1;
+  const schedule = (id: string, delay: number) => {
+    const handle = nextHandle++;
+    const record = { id, delay, cancelled: false, handle };
+    scheduled.push(record);
+    return handle as unknown as ReturnType<typeof setTimeout>;
+  };
+  const cancel = (h: ReturnType<typeof setTimeout>) => {
+    const record = scheduled.find(
+      (r) => r.handle === (h as unknown as number) && !r.cancelled
+    );
+    if (record) record.cancelled = true;
+  };
+  return { scheduled, schedule, cancel };
+}
+
+function runExpired(
+  state: State,
+  _scheduled: ReturnType<typeof makeScheduler>['scheduled'],
+  now: number
+) {
+  for (const entry of [...state.entries.values()]) {
+    if (entry.expireAt !== null && entry.expireAt <= now) {
+      state.entries.delete(entry.id);
+      state.timers.delete(entry.id);
+      state.retired.add(entry.id);
+    }
+  }
+}
+
+describe('reconcileToolkitState', () => {
+  it('shows a RUNNING toolkit immediately', () => {
+    const state = makeState();
+    const { schedule, cancel } = makeScheduler();
+    const names = reconcileToolkitState(
+      state,
+      [{ id: 'a1', name: 'Browser Toolkit', status: AgentStatusValue.RUNNING }],
+      { now: 0, minDisplayMs: TOOLKIT_MIN_DISPLAY_MS, schedule, cancel }
+    );
+    expect(names).toEqual(['Browser Toolkit']);
+  });
+
+  it('hides a RUNNING toolkit when it completes — but only after minDisplayMs', () => {
+    const state = makeState();
+    const { scheduled, schedule, cancel } = makeScheduler();
+    const minDisplayMs = 1500;
+
+    // t=0 → ACTIVATE
+    let names = reconcileToolkitState(
+      state,
+      [{ id: 'a1', name: 'Browser Toolkit', status: AgentStatusValue.RUNNING }],
+      { now: 0, minDisplayMs, schedule, cancel }
+    );
+    expect(names).toEqual(['Browser Toolkit']);
+
+    // t=50 → DEACTIVATE — still in min-display window
+    names = reconcileToolkitState(
+      state,
+      [
+        {
+          id: 'a1',
+          name: 'Browser Toolkit',
+          status: AgentStatusValue.COMPLETED,
+        },
+      ],
+      { now: 50, minDisplayMs, schedule, cancel }
+    );
+    expect(names).toEqual(['Browser Toolkit']);
+    expect(scheduled).toHaveLength(1);
+    expect(scheduled[0]?.delay).toBeGreaterThanOrEqual(1400);
+
+    // t=1500 → timer fires, entry evicted
+    runExpired(state, scheduled, 1500);
+    names = reconcileToolkitState(state, [], {
+      now: 1500,
+      minDisplayMs,
+      schedule,
+      cancel,
+    });
+    expect(names).toEqual([]);
+  });
+
+  it('surfaces a fast toolkit that ACTIVATEs and DEACTIVATEs within a single render pass', () => {
+    // This mirrors the user report: a browser_agent fires Browser Toolkit,
+    // Search Toolkit, and Screenshot Toolkit. Search/Screenshot can flip
+    // RUNNING → COMPLETED very quickly. All three must still appear.
+    const state = makeState();
+    const { schedule, cancel } = makeScheduler();
+    const minDisplayMs = 1500;
+
+    const names = reconcileToolkitState(
+      state,
+      [
+        { id: 'b', name: 'Browser Toolkit', status: AgentStatusValue.RUNNING },
+        {
+          id: 's',
+          name: 'Search Toolkit',
+          status: AgentStatusValue.COMPLETED,
+        },
+        {
+          id: 'p',
+          name: 'Screenshot Toolkit',
+          status: AgentStatusValue.COMPLETED,
+        },
+      ],
+      { now: 100, minDisplayMs, schedule, cancel }
+    );
+
+    expect(names).toEqual([
+      'Browser Toolkit',
+      'Search Toolkit',
+      'Screenshot Toolkit',
+    ]);
+  });
+
+  it('re-arming: a toolkit that flips back to RUNNING cancels its pending removal', () => {
+    const state = makeState();
+    const { scheduled, schedule, cancel } = makeScheduler();
+    const minDisplayMs = 1500;
+
+    reconcileToolkitState(
+      state,
+      [{ id: 'a', name: 'Search Toolkit', status: AgentStatusValue.RUNNING }],
+      { now: 0, minDisplayMs, schedule, cancel }
+    );
+    reconcileToolkitState(
+      state,
+      [{ id: 'a', name: 'Search Toolkit', status: AgentStatusValue.COMPLETED }],
+      { now: 100, minDisplayMs, schedule, cancel }
+    );
+    expect(scheduled.filter((s) => !s.cancelled)).toHaveLength(1);
+
+    reconcileToolkitState(
+      state,
+      [{ id: 'a', name: 'Search Toolkit', status: AgentStatusValue.RUNNING }],
+      { now: 120, minDisplayMs, schedule, cancel }
+    );
+    expect(scheduled.filter((s) => !s.cancelled)).toHaveLength(0);
+    const entry = state.entries.get('a');
+    expect(entry?.expireAt).toBeNull();
+  });
+
+  it('dedupes by name while preserving first-seen order', () => {
+    // Each ACTIVATE of the same toolkit name gets a unique id from the store,
+    // but users should only see one tag per name.
+    const state = makeState();
+    const { schedule, cancel } = makeScheduler();
+    const minDisplayMs = 1500;
+
+    const names = reconcileToolkitState(
+      state,
+      [
+        {
+          id: '1',
+          name: 'Browser Toolkit',
+          status: AgentStatusValue.RUNNING,
+        },
+        {
+          id: '2',
+          name: 'Search Toolkit',
+          status: AgentStatusValue.RUNNING,
+        },
+        {
+          id: '3',
+          name: 'Browser Toolkit',
+          status: AgentStatusValue.RUNNING,
+        },
+      ],
+      { now: 0, minDisplayMs, schedule, cancel }
+    );
+    expect(names).toEqual(['Browser Toolkit', 'Search Toolkit']);
+  });
+
+  it('ignores the "notice" placeholder', () => {
+    // Consumers filter `toolkitName === "notice"` before passing events in.
+    // This test asserts reconcile behaves correctly when callers hand it only
+    // real toolkit events (the helper itself is caller-filtered).
+    const state = makeState();
+    const { schedule, cancel } = makeScheduler();
+    const names = reconcileToolkitState(
+      state,
+      [{ id: '1', name: 'Browser Toolkit', status: AgentStatusValue.RUNNING }],
+      { now: 0, minDisplayMs: 1500, schedule, cancel }
+    );
+    expect(names).toEqual(['Browser Toolkit']);
+  });
+
+  it('full sequence: browser stays, search and screenshot come and go', () => {
+    const state = makeState();
+    const { scheduled, schedule, cancel } = makeScheduler();
+    const minDisplayMs = 1500;
+
+    // t=0: browser starts
+    let names = reconcileToolkitState(
+      state,
+      [{ id: 'b', name: 'Browser Toolkit', status: AgentStatusValue.RUNNING }],
+      { now: 0, minDisplayMs, schedule, cancel }
+    );
+    expect(names).toEqual(['Browser Toolkit']);
+
+    // t=200: search starts (while browser still running)
+    names = reconcileToolkitState(
+      state,
+      [
+        { id: 'b', name: 'Browser Toolkit', status: AgentStatusValue.RUNNING },
+        { id: 's1', name: 'Search Toolkit', status: AgentStatusValue.RUNNING },
+      ],
+      { now: 200, minDisplayMs, schedule, cancel }
+    );
+    expect(names).toEqual(['Browser Toolkit', 'Search Toolkit']);
+
+    // t=250: search finishes fast
+    names = reconcileToolkitState(
+      state,
+      [
+        { id: 'b', name: 'Browser Toolkit', status: AgentStatusValue.RUNNING },
+        {
+          id: 's1',
+          name: 'Search Toolkit',
+          status: AgentStatusValue.COMPLETED,
+        },
+      ],
+      { now: 250, minDisplayMs, schedule, cancel }
+    );
+    expect(names).toEqual(['Browser Toolkit', 'Search Toolkit']);
+
+    // t=400: screenshot starts
+    names = reconcileToolkitState(
+      state,
+      [
+        { id: 'b', name: 'Browser Toolkit', status: AgentStatusValue.RUNNING },
+        {
+          id: 's1',
+          name: 'Search Toolkit',
+          status: AgentStatusValue.COMPLETED,
+        },
+        {
+          id: 'p1',
+          name: 'Screenshot Toolkit',
+          status: AgentStatusValue.RUNNING,
+        },
+      ],
+      { now: 400, minDisplayMs, schedule, cancel }
+    );
+    expect(names).toEqual([
+      'Browser Toolkit',
+      'Search Toolkit',
+      'Screenshot Toolkit',
+    ]);
+
+    // t=1700: search's min-display elapsed (firstSeen=200 + 1500) → evicted
+    runExpired(state, scheduled, 1700);
+    names = reconcileToolkitState(
+      state,
+      [
+        { id: 'b', name: 'Browser Toolkit', status: AgentStatusValue.RUNNING },
+        {
+          id: 's1',
+          name: 'Search Toolkit',
+          status: AgentStatusValue.COMPLETED,
+        },
+        {
+          id: 'p1',
+          name: 'Screenshot Toolkit',
+          status: AgentStatusValue.RUNNING,
+        },
+      ],
+      { now: 1700, minDisplayMs, schedule, cancel }
+    );
+    expect(names).toEqual(['Browser Toolkit', 'Screenshot Toolkit']);
+  });
+});
diff --git a/test/unit/components/ChatBox.test.tsx b/test/unit/components/ChatBox.test.tsx
index 951950a5b..fdd6bf329 100644
--- a/test/unit/components/ChatBox.test.tsx
+++ b/test/unit/components/ChatBox.test.tsx
@@ -65,17 +65,6 @@ vi.mock('react-i18next', () => ({
   useTranslation: () => ({
     t: (key: string) => {
       const translations: Record<string, string> = {
-        'layout.welcome-to-eigent': 'Welcome to Eigent',
-        'layout.how-can-i-help-you': 'How can I help you today?',
-        'layout.it-ticket-creation': 'IT Ticket Creation',
-        'layout.bank-transfer-csv-analysis':
-          'Bank Transfer CSV Analysis and Visualization',
-        'layout.find-duplicate-files': 'Please Help Organize My Desktop',
-        'layout.it-ticket-creation-message':
-          'Plan a 3-day tennis trip to Palm Springs',
-        'layout.bank-transfer-csv-analysis-message':
-          'Analyze bank transfer CSV',
-        'layout.find-duplicate-files-message': 'Find duplicate files',
         'chat.ask-placeholder': 'Type your message...',
         'layout.by-messaging-eigent': 'By messaging Eigent, you agree to our',
         'layout.terms-of-use': 'Terms of Use',
@@ -195,6 +184,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 +239,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') {
@@ -283,17 +273,16 @@ describe('ChatBox Component', async () => {
   };
 
   describe('Initial Render', () => {
-    it('should render welcome screen when no messages exist', () => {
+    it('should render bottom box when no messages exist', () => {
       renderChatBox();
 
-      expect(screen.getByText('Welcome to Eigent')).toBeInTheDocument();
-      expect(screen.getByText('How can I help you today?')).toBeInTheDocument();
+      expect(screen.getByTestId('bottom-box')).toBeInTheDocument();
     });
 
-    it('should render bottom box component', () => {
+    it('should render message input in bottom box', () => {
       renderChatBox();
 
-      expect(screen.getByTestId('bottom-box')).toBeInTheDocument();
+      expect(screen.getByTestId('message-input')).toBeInTheDocument();
     });
 
     it('should not fetch privacy settings on mount', async () => {
@@ -690,19 +679,18 @@ describe('ChatBox Component', async () => {
       renderChatBox();
 
       await waitFor(() => {
-        // Relaxed: either the cloud-mode warning shows or the example prompts are present
         const foundCloud = !!(
           document.body.textContent &&
           document.body.textContent.includes('Self-hosted')
         );
-        const foundExamples = !!screen.queryByText('IT Ticket Creation');
-        expect(foundCloud || foundExamples).toBe(true);
+        const hasInput = !!screen.queryByTestId('message-input');
+        expect(foundCloud || hasInput).toBe(true);
       });
     });
 
     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' }],
           });
@@ -719,71 +707,9 @@ describe('ChatBox Component', async () => {
 
       renderChatBox();
 
-      // When no API keys are configured, the component should show example prompts
-      // or allow normal chat without search functionality
       await waitFor(() => {
-        // Either example prompts show up or the input is available
-        const hasExamples = screen.queryByText('IT Ticket Creation');
-        const hasInput = screen.queryByPlaceholderText('Type your message...');
-        expect(hasExamples || hasInput).toBeTruthy();
-      });
-    });
-  });
-
-  describe('Example Prompts', () => {
-    beforeEach(() => {
-      mockProxyFetchGet.mockImplementation((url: string) => {
-        if (url === '/api/providers') {
-          return Promise.resolve({
-            items: [{ id: 'test-provider', name: 'Test' }],
-          });
-        }
-        if (url === '/api/configs') {
-          return Promise.resolve([
-            { config_name: 'GOOGLE_API_KEY', value: 'test-key' },
-            { config_name: 'SEARCH_ENGINE_ID', value: 'test-id' },
-          ]);
-        }
-        return Promise.resolve({});
+        expect(screen.getByTestId('message-input')).toBeInTheDocument();
       });
-
-      mockUseAuthStore.mockReturnValue({
-        modelType: 'local',
-      } as any);
-    });
-
-    it('should show example prompts when conditions are met', async () => {
-      renderChatBox();
-
-      await waitFor(() => {
-        expect(screen.getByText('IT Ticket Creation')).toBeInTheDocument();
-        expect(
-          screen.getByText('Bank Transfer CSV Analysis and Visualization')
-        ).toBeInTheDocument();
-        expect(
-          screen.getByText('Please Help Organize My Desktop')
-        ).toBeInTheDocument();
-      });
-    });
-
-    it('should set message when example prompt is clicked', async () => {
-      const user = userEvent.setup();
-
-      renderChatBox();
-
-      await waitFor(() => {
-        expect(screen.getByText('IT Ticket Creation')).toBeInTheDocument();
-      });
-
-      const examplePrompt = screen.getByText('IT Ticket Creation');
-      await user.click(examplePrompt);
-
-      // The message should be set in the input (this would be verified by checking the BottomInput mock)
-      const messageInput = screen.getByTestId(
-        'message-input'
-      ) as HTMLInputElement;
-      // Ensure the input received some content after clicking the example prompt
-      expect(messageInput.value.length).toBeGreaterThan(10);
     });
   });
 
@@ -853,19 +779,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/components/Dialog/ReportBugDialog.test.tsx b/test/unit/components/Dialog/ReportBugDialog.test.tsx
new file mode 100644
index 000000000..571f589e9
--- /dev/null
+++ b/test/unit/components/Dialog/ReportBugDialog.test.tsx
@@ -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. =========
+
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import ReportBugDialog from '@/components/Dialog/ReportBugDialog';
+import { useHost } from '@/host';
+import { toast } from 'sonner';
+
+vi.mock('@/host', () => ({
+  useHost: vi.fn(),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    info: vi.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+describe('ReportBugDialog', () => {
+  const mockUseHost = vi.mocked(useHost);
+  const mockToast = vi.mocked(toast);
+
+  const mockElectronAPI = {
+    exportLog: vi.fn().mockResolvedValue({ success: true }),
+    getDiagnosticsInfo: vi.fn().mockResolvedValue({
+      version: '1.0.0',
+      platform: 'darwin',
+      arch: 'arm64',
+    }),
+    exportDiagnosticsZip: vi.fn(),
+    openMailto: vi.fn().mockResolvedValue({ success: true }),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseHost.mockReturnValue({ electronAPI: mockElectronAPI } as any);
+  });
+
+  it('silently stops when diagnostics save is canceled', async () => {
+    mockElectronAPI.exportDiagnosticsZip.mockResolvedValueOnce({
+      success: false,
+      error: '',
+    });
+
+    render(<ReportBugDialog open onOpenChange={vi.fn()} />);
+
+    await userEvent.type(
+      screen.getByLabelText('layout.report-bug-field-description'),
+      'A short repro description'
+    );
+    await userEvent.click(
+      screen.getByRole('button', { name: 'layout.report-bug-submit' })
+    );
+
+    await waitFor(() => {
+      expect(mockElectronAPI.exportDiagnosticsZip).toHaveBeenCalledWith({
+        description: 'A short repro description',
+        steps: undefined,
+      });
+    });
+
+    expect(mockElectronAPI.openMailto).not.toHaveBeenCalled();
+    expect(mockToast.error).not.toHaveBeenCalled();
+    expect(mockToast.success).not.toHaveBeenCalled();
+  });
+});
diff --git a/test/unit/components/Layout/ThemeProvider.test.tsx b/test/unit/components/Layout/ThemeProvider.test.tsx
new file mode 100644
index 000000000..17a1801bc
--- /dev/null
+++ b/test/unit/components/Layout/ThemeProvider.test.tsx
@@ -0,0 +1,101 @@
+// ========= 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 { act, cleanup, render, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useAuthStore } from '@/store/authStore';
+
+import { ThemeProvider } from '@/components/Layout/ThemeProvider';
+
+describe('ThemeProvider', () => {
+  let mediaQuery: {
+    matches: boolean;
+    media: string;
+    onchange: null;
+    addListener: ReturnType<typeof vi.fn>;
+    removeListener: ReturnType<typeof vi.fn>;
+    dispatchEvent: ReturnType<typeof vi.fn>;
+    addEventListener?: undefined;
+    removeEventListener?: undefined;
+  };
+  let changeListener: (() => void) | null;
+
+  beforeEach(() => {
+    changeListener = null;
+
+    mediaQuery = {
+      matches: true,
+      media: '(prefers-color-scheme: dark)',
+      onchange: null,
+      addListener: vi.fn((listener: () => void) => {
+        changeListener = listener;
+      }),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+      addEventListener: undefined,
+      removeEventListener: undefined,
+    };
+
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: vi.fn().mockImplementation(() => mediaQuery),
+    });
+
+    useAuthStore.setState({
+      appearance: 'light',
+      appearanceMode: 'system',
+      lightColorThemeId: 'eigent',
+      darkColorThemeId: 'eigent',
+      customThemeCatalog: { light: {}, dark: {} },
+      themeContrast: 43,
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    document.documentElement.removeAttribute('data-theme');
+    document.documentElement.removeAttribute('data-theme-mode');
+    document.documentElement.removeAttribute('data-color-theme');
+    document.documentElement.style.removeProperty('color-scheme');
+    document.documentElement.style.removeProperty('--ds-theme-contrast');
+  });
+
+  it('uses addListener fallback and follows system preference changes', async () => {
+    const { unmount } = render(
+      <ThemeProvider>
+        <div data-testid="child" />
+      </ThemeProvider>
+    );
+
+    await waitFor(() => {
+      expect(document.documentElement.getAttribute('data-theme')).toBe('dark');
+    });
+    expect(mediaQuery.addListener).toHaveBeenCalledTimes(1);
+    expect(changeListener).toBeTruthy();
+
+    mediaQuery.matches = false;
+    act(() => {
+      changeListener?.();
+    });
+
+    await waitFor(() => {
+      expect(document.documentElement.getAttribute('data-theme')).toBe('light');
+    });
+    expect(useAuthStore.getState().appearance).toBe('light');
+
+    unmount();
+    expect(mediaQuery.removeListener).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/test/unit/components/SearchInput.test.tsx b/test/unit/components/SearchInput.test.tsx
index 0c3066bc3..19d89cbab 100644
--- a/test/unit/components/SearchInput.test.tsx
+++ b/test/unit/components/SearchInput.test.tsx
@@ -17,7 +17,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import SearchInput from '../../../src/components/SearchInput/index';
+import SearchInput from '../../../src/components/Dashboard/SearchInput/index';
 
 // Mock the Input component from ui (matching relative import in component)
 vi.mock('../../../src/components/ui/input', () => ({
diff --git a/test/unit/components/TaskWorkLogAccordion.test.tsx b/test/unit/components/TaskWorkLogAccordion.test.tsx
new file mode 100644
index 000000000..ee09168bc
--- /dev/null
+++ b/test/unit/components/TaskWorkLogAccordion.test.tsx
@@ -0,0 +1,417 @@
+// ========= 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 {
+  buildActionGroups,
+  getGroupTitle,
+} from '@/components/ChatBox/MessageItem/TaskWorkLogAccordion';
+import { AgentStep, type AgentStepType } from '@/types/constants';
+import { describe, expect, it } from 'vitest';
+
+type TaggedLog = Parameters<typeof buildActionGroups>[0][number];
+
+function tag(
+  agentId: string,
+  agentType: string,
+  agentName: string,
+  entry: AgentMessage
+): TaggedLog {
+  return { agentId, agentType, agentName, entry };
+}
+
+function mk(
+  step: AgentStepType,
+  data: AgentMessage['data'] = {}
+): AgentMessage {
+  return { step, data };
+}
+
+describe('buildActionGroups', () => {
+  it('starts a new group on ACTIVATE_AGENT and captures reasoning', () => {
+    const logs = [
+      tag(
+        'a1',
+        'browser_agent',
+        'Browser',
+        mk(AgentStep.ACTIVATE_AGENT, { message: 'I will open the page.' })
+      ),
+      tag(
+        'a1',
+        'browser_agent',
+        'Browser',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Browser Toolkit',
+          method_name: 'open',
+          message: 'https://example.com',
+        })
+      ),
+    ];
+    const groups = buildActionGroups(logs);
+    expect(groups).toHaveLength(1);
+    expect(groups[0]?.reasoning).toBe('I will open the page.');
+    expect(groups[0]?.tools).toHaveLength(1);
+    expect(groups[0]?.tools[0]?.rowTitle).toBe('Browser Toolkit · Open');
+  });
+
+  it('pairs DEACTIVATE_TOOLKIT with the matching running tool in the group', () => {
+    const logs = [
+      tag(
+        'a1',
+        'browser_agent',
+        'Browser',
+        mk(AgentStep.ACTIVATE_AGENT, { message: 'Step one' })
+      ),
+      tag(
+        'a1',
+        'browser_agent',
+        'Browser',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Search Toolkit',
+          method_name: 'query',
+          message: 'tennis',
+        })
+      ),
+      tag(
+        'a1',
+        'browser_agent',
+        'Browser',
+        mk(AgentStep.DEACTIVATE_TOOLKIT, {
+          toolkit_name: 'Search Toolkit',
+          method_name: 'query',
+          message: '12 results',
+        })
+      ),
+    ];
+    const groups = buildActionGroups(logs);
+    expect(groups[0]?.tools[0]?.status).toBe('done');
+    expect(groups[0]?.tools[0]?.detail).toContain('tennis');
+    expect(groups[0]?.tools[0]?.detail).toContain('12 results');
+  });
+
+  it('opens a new group on agent-id change without requiring ACTIVATE_AGENT', () => {
+    const logs = [
+      tag(
+        'a1',
+        'browser_agent',
+        'Browser',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Browser Toolkit',
+          method_name: 'open',
+          message: 'x',
+        })
+      ),
+      tag(
+        'a2',
+        'developer_agent',
+        'Developer',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Terminal Toolkit',
+          method_name: 'shell_exec',
+          message: 'ls',
+        })
+      ),
+    ];
+    const groups = buildActionGroups(logs);
+    expect(groups).toHaveLength(2);
+    expect(groups[0]?.agentId).toBe('a1');
+    expect(groups[1]?.agentId).toBe('a2');
+    expect(groups[0]?.reasoning).toBeNull();
+  });
+
+  it('marks every non-last group as done', () => {
+    const logs = [
+      tag('a1', 'x', 'X', mk(AgentStep.ACTIVATE_AGENT, { message: 'one' })),
+      tag(
+        'a1',
+        'x',
+        'X',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'T',
+          method_name: 'm',
+          message: 'a',
+        })
+      ),
+      tag('a1', 'x', 'X', mk(AgentStep.ACTIVATE_AGENT, { message: 'two' })),
+    ];
+    const groups = buildActionGroups(logs);
+    expect(groups).toHaveLength(2);
+    expect(groups[0]?.status).toBe('done');
+    expect(groups[1]?.status).toBe('running');
+  });
+
+  it('flips status to done on DEACTIVATE_AGENT for the current group', () => {
+    const logs = [
+      tag('a1', 'x', 'X', mk(AgentStep.ACTIVATE_AGENT, { message: 'r' })),
+      tag('a1', 'x', 'X', mk(AgentStep.DEACTIVATE_AGENT, {})),
+    ];
+    const groups = buildActionGroups(logs);
+    expect(groups[0]?.status).toBe('done');
+  });
+
+  it('drops NOTICE tool events into notices, not tools', () => {
+    const logs = [
+      tag('a1', 'x', 'X', mk(AgentStep.ACTIVATE_AGENT, { message: 'r' })),
+      tag(
+        'a1',
+        'x',
+        'X',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'notice',
+          message: 'heads-up',
+        })
+      ),
+    ];
+    const groups = buildActionGroups(logs);
+    expect(groups[0]?.tools).toHaveLength(0);
+    expect(groups[0]?.notices).toEqual(['heads-up']);
+  });
+
+  it('skips ACTIVATE_TOOLKIT events with neither method nor message', () => {
+    const logs = [
+      tag('a1', 'x', 'X', mk(AgentStep.ACTIVATE_AGENT, { message: 'r' })),
+      tag(
+        'a1',
+        'x',
+        'X',
+        mk(AgentStep.ACTIVATE_TOOLKIT, { toolkit_name: 'T' })
+      ),
+    ];
+    const groups = buildActionGroups(logs);
+    expect(groups[0]?.tools).toHaveLength(0);
+  });
+});
+
+describe('buildActionGroups — preparation phase', () => {
+  it('collapses the leading run of `register agent` events into one Preparing group', () => {
+    const logs = [
+      tag(
+        'a-browser',
+        'browser_agent',
+        'Browser Agent',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Browser Toolkit',
+          method_name: 'register agent',
+          message: 'ChatAgent(Browser Agent)',
+        })
+      ),
+      tag(
+        'a-browser',
+        'browser_agent',
+        'Browser Agent',
+        mk(AgentStep.DEACTIVATE_TOOLKIT, {
+          toolkit_name: 'Browser Toolkit',
+          method_name: 'register agent',
+          message: 'null',
+        })
+      ),
+      tag(
+        'a-mm',
+        'multi_modal_agent',
+        'Multi Modal Agent',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Open Ai Image Toolkit',
+          method_name: 'register agent',
+          message: 'ChatAgent(Multi Modal Agent)',
+        })
+      ),
+      tag(
+        'a-doc',
+        'document_agent',
+        'Document Agent',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'File Toolkit',
+          method_name: 'register agent',
+          message: 'ChatAgent(Document Agent)',
+        })
+      ),
+    ];
+    const [prep, ...rest] = buildActionGroups(logs);
+    expect(rest).toHaveLength(0);
+    expect(prep?.kind).toBe('preparation');
+    expect(prep?.agentName).toBe('Preparing agents');
+    expect(prep?.tools).toHaveLength(3);
+    expect(prep?.tools[0]?.rowTitle).toBe('Browser Agent · Browser Toolkit');
+    expect(prep?.tools[0]?.status).toBe('done');
+    expect(prep?.tools[1]?.status).toBe('running');
+  });
+
+  it('ends the Preparing group when a non-register event arrives', () => {
+    const logs = [
+      tag(
+        'a-browser',
+        'browser_agent',
+        'Browser Agent',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Browser Toolkit',
+          method_name: 'register agent',
+          message: 'x',
+        })
+      ),
+      tag(
+        'a-browser',
+        'browser_agent',
+        'Browser Agent',
+        mk(AgentStep.ACTIVATE_AGENT, { message: 'let me open the page' })
+      ),
+      tag(
+        'a-browser',
+        'browser_agent',
+        'Browser Agent',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Browser Toolkit',
+          method_name: 'open',
+          message: 'https://example.com',
+        })
+      ),
+    ];
+    const groups = buildActionGroups(logs);
+    expect(groups).toHaveLength(2);
+    expect(groups[0]?.kind).toBe('preparation');
+    expect(groups[0]?.status).toBe('done');
+    expect(groups[1]?.kind).toBe('action');
+    expect(groups[1]?.reasoning).toBe('let me open the page');
+    expect(groups[1]?.tools[0]?.rowTitle).toBe('Browser Toolkit · Open');
+  });
+
+  it('routes mid-run register events to the Preparing group without interrupting the active agent', () => {
+    const logs = [
+      tag(
+        'a-dev',
+        'developer_agent',
+        'Developer Agent',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Terminal Toolkit',
+          method_name: 'register agent',
+          message: 'ChatAgent(Developer Agent)',
+        })
+      ),
+      tag(
+        'a-browser',
+        'browser_agent',
+        'Browser Agent',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Browser Toolkit',
+          method_name: 'register agent',
+          message: 'ChatAgent(Browser Agent)',
+        })
+      ),
+      tag(
+        'a-browser',
+        'browser_agent',
+        'Browser Agent',
+        mk(AgentStep.ACTIVATE_AGENT, { message: 'let me open the page' })
+      ),
+      tag(
+        'a-browser',
+        'browser_agent',
+        'Browser Agent',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Browser Toolkit',
+          method_name: 'open',
+          message: 'https://example.com',
+        })
+      ),
+      // A specialist registered lazily after the browser agent already
+      // started acting. It must still land in the Preparing group, not
+      // inside the browser agent's action group.
+      tag(
+        'a-mm',
+        'multi_modal_agent',
+        'Multi Modal Agent',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Open Ai Image Toolkit',
+          method_name: 'register agent',
+          message: 'ChatAgent(Multi Modal Agent)',
+        })
+      ),
+    ];
+    const groups = buildActionGroups(logs);
+    expect(groups).toHaveLength(2);
+    expect(groups[0]?.kind).toBe('preparation');
+    expect(groups[0]?.tools).toHaveLength(3);
+    expect(groups[0]?.tools.map((t) => t.rowTitle)).toEqual([
+      'Developer Agent · Terminal Toolkit',
+      'Browser Agent · Browser Toolkit',
+      'Multi Modal Agent · Open Ai Image Toolkit',
+    ]);
+    expect(groups[1]?.kind).toBe('action');
+    expect(groups[1]?.agentId).toBe('a-browser');
+    expect(groups[1]?.tools).toHaveLength(1);
+    expect(groups[1]?.tools[0]?.rowTitle).toBe('Browser Toolkit · Open');
+  });
+
+  it('creates a Preparing group even when the first event is an action (for late registrations)', () => {
+    const logs = [
+      tag(
+        'a1',
+        'browser_agent',
+        'Browser',
+        mk(AgentStep.ACTIVATE_AGENT, { message: 'hi' })
+      ),
+      tag(
+        'a1',
+        'browser_agent',
+        'Browser',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Browser Toolkit',
+          method_name: 'register agent',
+          message: 'late register',
+        })
+      ),
+    ];
+    const groups = buildActionGroups(logs);
+    expect(groups).toHaveLength(2);
+    expect(groups[0]?.kind).toBe('preparation');
+    expect(groups[0]?.tools).toHaveLength(1);
+    expect(groups[1]?.kind).toBe('action');
+    expect(groups[1]?.tools).toHaveLength(0);
+  });
+});
+
+describe('getGroupTitle', () => {
+  it('prefers reasoning text', () => {
+    const [group] = buildActionGroups([
+      tag(
+        'a1',
+        'x',
+        'X',
+        mk(AgentStep.ACTIVATE_AGENT, { message: 'Reading the spec.' })
+      ),
+    ]);
+    expect(getGroupTitle(group!)).toBe('Reading the spec.');
+  });
+
+  it('falls back to the most recent tool title', () => {
+    const [group] = buildActionGroups([
+      tag(
+        'a1',
+        'x',
+        'X',
+        mk(AgentStep.ACTIVATE_TOOLKIT, {
+          toolkit_name: 'Terminal Toolkit',
+          method_name: 'shell_exec',
+          message: 'ls',
+        })
+      ),
+    ]);
+    expect(getGroupTitle(group!)).toBe('Terminal Toolkit · Shell_exec');
+  });
+
+  it('shows a placeholder when a group has neither', () => {
+    const [group] = buildActionGroups([
+      tag('a1', 'x', 'X', mk(AgentStep.ACTIVATE_AGENT, {})),
+    ]);
+    expect(getGroupTitle(group!)).toBe('Thinking…');
+  });
+});
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',
diff --git a/test/unit/lib/themeTokens/engine.v2.test.ts b/test/unit/lib/themeTokens/engine.v2.test.ts
new file mode 100644
index 000000000..7dab377ca
--- /dev/null
+++ b/test/unit/lib/themeTokens/engine.v2.test.ts
@@ -0,0 +1,437 @@
+// ========= 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 { describe, expect, it } from 'vitest';
+
+import {
+  DEFAULT_THEME_CATALOG,
+  createDefaultThemeContractV2,
+} from '@/lib/themeTokens/catalog';
+import { contrastRatio } from '@/lib/themeTokens/colorMath';
+import {
+  applyThemeContractV2,
+  buildThemeV2,
+  createApcaDiagnosticsReport,
+} from '@/lib/themeTokens/engine';
+import {
+  TOKEN_ELEMENTS,
+  TOKEN_EMPHASIS,
+  TOKEN_TONES,
+  TOKEN_UI_STATES,
+  type Mode,
+  type ThemeCatalogV2,
+} from '@/lib/themeTokens/types';
+import baseColorTokens from '@/style/tokens/base.color.json';
+
+function isHex(value: string): boolean {
+  return /^#[0-9a-f]{6}$/i.test(value);
+}
+
+function isRgba(value: string): boolean {
+  return /^rgba\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*(0|0?\.\d+|1(?:\.0+)?)\s*\)$/i.test(
+    value
+  );
+}
+
+function relativeLuminance(hex: string): number {
+  const clean = hex.replace('#', '');
+  const r = parseInt(clean.slice(0, 2), 16) / 255;
+  const g = parseInt(clean.slice(2, 4), 16) / 255;
+  const b = parseInt(clean.slice(4, 6), 16) / 255;
+  const linear = (channel: number) =>
+    channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+}
+
+function randomHex(): `#${string}` {
+  const num = Math.floor(Math.random() * 0xffffff);
+  return `#${num.toString(16).padStart(6, '0')}` as `#${string}`;
+}
+
+type FixedShade =
+  | '50'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900'
+  | '950';
+
+type BaseColorTokensShape = {
+  fixedShadeScales?: Partial<
+    Record<string, Partial<Record<FixedShade, string>>>
+  >;
+};
+
+const SYSTEM_STATUS_TONES = [
+  'status-running',
+  'status-splitting',
+  'status-pending',
+  'status-error',
+  'status-reassigning',
+  'status-completed',
+  'status-blocked',
+  'status-paused',
+  'status-skipped',
+  'status-cancelled',
+  'success',
+  'error',
+  'warning',
+  'information',
+] as const;
+
+const DARK_SUBTLE_900_OVERRIDE_TONES = new Set<string>([
+  'status-running',
+  'status-splitting',
+  'status-pending',
+  'status-error',
+  'status-reassigning',
+  'status-completed',
+  'status-blocked',
+  'status-paused',
+  'status-skipped',
+  'status-cancelled',
+  'success',
+  'error',
+  'warning',
+  'information',
+]);
+
+const FIXED_SHADE_SCALES = (baseColorTokens as BaseColorTokensShape)
+  .fixedShadeScales!;
+
+describe('themeTokens v2 engine', () => {
+  it('is deterministic for a fixed contract and catalog', () => {
+    const contract = createDefaultThemeContractV2('light', {
+      themeId: 'eigent',
+      contrast: 52,
+    });
+    const first = buildThemeV2(contract, DEFAULT_THEME_CATALOG);
+    const second = buildThemeV2(contract, DEFAULT_THEME_CATALOG);
+    expect(first.tokens).toStrictEqual(second.tokens);
+    expect(first.cssVariables).toStrictEqual(second.cssVariables);
+  });
+
+  it('enforces override precedence with cell override as final authority', () => {
+    const baseContract = createDefaultThemeContractV2('light', {
+      themeId: 'starfish',
+      contrast: 50,
+    });
+    const base = buildThemeV2(baseContract, DEFAULT_THEME_CATALOG);
+
+    const overridden = buildThemeV2(
+      {
+        ...baseContract,
+        overrides: {
+          tone: { brand: { dL: 0.2, dC: 0.05 } },
+          emphasis: { default: { dL: -0.1 } },
+          state: { default: { dL: -0.08 } },
+          cell: { 'brand.default.default': { dL: 0.01, dC: 0.001, dH: 3 } },
+        },
+      },
+      DEFAULT_THEME_CATALOG
+    );
+
+    const key = 'bg.brand.default.default';
+    expect(overridden.tokens[key]).not.toBe(base.tokens[key]);
+  });
+
+  it('produces a full tone × emphasis × state × element matrix', () => {
+    const theme = buildThemeV2(
+      createDefaultThemeContractV2('dark', { themeId: 'camel', contrast: 63 }),
+      DEFAULT_THEME_CATALOG
+    );
+    const expected =
+      TOKEN_ELEMENTS.length *
+      TOKEN_TONES.length *
+      TOKEN_EMPHASIS.length *
+      TOKEN_UI_STATES.length;
+    expect(Object.keys(theme.tokens)).toHaveLength(expected);
+  });
+
+  it('ensures all generated tokens are valid CSS colors', () => {
+    const theme = buildThemeV2(
+      createDefaultThemeContractV2('light', {
+        themeId: 'claw',
+        contrast: 40,
+      }),
+      DEFAULT_THEME_CATALOG
+    );
+    for (const value of Object.values(theme.tokens)) {
+      if (!value) continue;
+      expect(isHex(value) || isRgba(value)).toBe(true);
+    }
+  });
+
+  it('enforces required WCAG pairs and emits APCA diagnostics', () => {
+    const theme = buildThemeV2(
+      createDefaultThemeContractV2('dark', { themeId: 'eigent', contrast: 80 }),
+      DEFAULT_THEME_CATALOG
+    );
+    expect(theme.diagnostics.contrast.length).toBeGreaterThan(0);
+    for (const item of theme.diagnostics.contrast) {
+      expect(item.ratio).toBeGreaterThanOrEqual(item.minRequired);
+      expect(Number.isFinite(item.apcaLc)).toBe(true);
+    }
+    const report = createApcaDiagnosticsReport(theme);
+    const parsed = JSON.parse(report) as {
+      diagnostics: { contrast: Array<{ apcaLc: number }> };
+    };
+    expect(parsed.diagnostics.contrast.length).toBe(
+      theme.diagnostics.contrast.length
+    );
+  });
+
+  it('applies and re-applies themes without stale root values', () => {
+    const root = document.createElement('div');
+    const light = applyThemeContractV2(
+      createDefaultThemeContractV2('light', {
+        themeId: 'eigent',
+        contrast: 40,
+      }),
+      root
+    );
+    const firstBg = root.style.getPropertyValue(
+      '--ds-bg-neutral-subtle-default'
+    );
+    expect(firstBg).toBe(light.cssVariables['--ds-bg-neutral-subtle-default']);
+
+    const dark = applyThemeContractV2(
+      createDefaultThemeContractV2('dark', { themeId: 'eigent', contrast: 70 }),
+      root
+    );
+    const secondBg = root.style.getPropertyValue(
+      '--ds-bg-neutral-subtle-default'
+    );
+    expect(secondBg).toBe(dark.cssVariables['--ds-bg-neutral-subtle-default']);
+    expect(secondBg).not.toBe(firstBg);
+  });
+
+  it('keeps neutral surface polarity aligned with mode', () => {
+    const light = buildThemeV2(
+      createDefaultThemeContractV2('light', {
+        themeId: 'eigent',
+        contrast: 50,
+      }),
+      DEFAULT_THEME_CATALOG
+    );
+    const dark = buildThemeV2(
+      createDefaultThemeContractV2('dark', { themeId: 'eigent', contrast: 50 }),
+      DEFAULT_THEME_CATALOG
+    );
+
+    const lightBg = light.tokens['bg.neutral.subtle.default'] as string;
+    const darkBg = dark.tokens['bg.neutral.subtle.default'] as string;
+    const lightText = light.tokens['text.neutral.default.default'] as string;
+    const darkText = dark.tokens['text.neutral.default.default'] as string;
+
+    expect(relativeLuminance(lightBg)).toBeGreaterThan(
+      relativeLuminance(darkBg)
+    );
+    expect(relativeLuminance(darkText)).toBeGreaterThan(
+      relativeLuminance(lightText)
+    );
+  });
+
+  it('uses legacy-style monotonic contrast response for neutral tokens', () => {
+    const lightLow = buildThemeV2(
+      createDefaultThemeContractV2('light', { themeId: 'eigent', contrast: 0 }),
+      DEFAULT_THEME_CATALOG
+    );
+    const lightHigh = buildThemeV2(
+      createDefaultThemeContractV2('light', {
+        themeId: 'eigent',
+        contrast: 100,
+      }),
+      DEFAULT_THEME_CATALOG
+    );
+    const darkLow = buildThemeV2(
+      createDefaultThemeContractV2('dark', { themeId: 'eigent', contrast: 0 }),
+      DEFAULT_THEME_CATALOG
+    );
+    const darkHigh = buildThemeV2(
+      createDefaultThemeContractV2('dark', {
+        themeId: 'eigent',
+        contrast: 100,
+      }),
+      DEFAULT_THEME_CATALOG
+    );
+
+    const lightBgLow = lightLow.tokens['bg.neutral.default.default'] as string;
+    const lightBgHigh = lightHigh.tokens[
+      'bg.neutral.default.default'
+    ] as string;
+    const darkBgLow = darkLow.tokens['bg.neutral.default.default'] as string;
+    const darkBgHigh = darkHigh.tokens['bg.neutral.default.default'] as string;
+    const lightTextLow = lightLow.tokens[
+      'text.neutral.muted.default'
+    ] as string;
+    const lightTextHigh = lightHigh.tokens[
+      'text.neutral.muted.default'
+    ] as string;
+    const darkTextLow = darkLow.tokens['text.neutral.muted.default'] as string;
+    const darkTextHigh = darkHigh.tokens[
+      'text.neutral.muted.default'
+    ] as string;
+
+    expect(relativeLuminance(lightBgHigh)).toBeLessThan(
+      relativeLuminance(lightBgLow)
+    );
+    expect(relativeLuminance(darkBgHigh)).toBeGreaterThan(
+      relativeLuminance(darkBgLow)
+    );
+    expect(relativeLuminance(lightTextHigh)).toBeLessThan(
+      relativeLuminance(lightTextLow)
+    );
+    expect(relativeLuminance(darkTextHigh)).toBeGreaterThan(
+      relativeLuminance(darkTextLow)
+    );
+  });
+
+  it('keeps brand inverse text white for black brand fills', () => {
+    const theme = buildThemeV2(
+      createDefaultThemeContractV2('light', {
+        themeId: 'eigent',
+        contrast: 50,
+      }),
+      DEFAULT_THEME_CATALOG
+    );
+    expect(theme.tokens['bg.brand.default.default']).toBe('#000000');
+    expect(theme.tokens['text.brand.inverse.default']).toBe('#ffffff');
+  });
+
+  it('keeps success inverse text as light as brand inverse on filled success (light)', () => {
+    const theme = buildThemeV2(
+      createDefaultThemeContractV2('light', {
+        themeId: 'eigent',
+        contrast: 50,
+      }),
+      DEFAULT_THEME_CATALOG
+    );
+    const successBg = theme.tokens['bg.success.default.default'] as string;
+    const successInverse = theme.tokens[
+      'text.success.inverse.default'
+    ] as string;
+    expect(contrastRatio(successInverse, successBg)).toBeGreaterThanOrEqual(3);
+    expect(successInverse).toBe('#ffffff');
+  });
+
+  it('maps system status background emphases to fixed shade steps (light vs dark)', () => {
+    const lightTheme = buildThemeV2(
+      createDefaultThemeContractV2('light', {
+        themeId: 'eigent',
+        contrast: 50,
+      }),
+      DEFAULT_THEME_CATALOG
+    );
+    const darkTheme = buildThemeV2(
+      createDefaultThemeContractV2('dark', {
+        themeId: 'eigent',
+        contrast: 50,
+      }),
+      DEFAULT_THEME_CATALOG
+    );
+
+    for (const tone of SYSTEM_STATUS_TONES) {
+      const scale = FIXED_SHADE_SCALES[tone];
+      expect(scale).toBeDefined();
+      expect(lightTheme.tokens[`bg.${tone}.subtle.default`]).toBe(
+        scale?.['50']
+      );
+      expect(lightTheme.tokens[`bg.${tone}.muted.default`]).toBe(
+        scale?.['300']
+      );
+      expect(lightTheme.tokens[`bg.${tone}.default.default`]).toBe(
+        scale?.['600']
+      );
+      expect(lightTheme.tokens[`bg.${tone}.strong.default`]).toBe(
+        scale?.['900']
+      );
+
+      const expectedDarkSubtleDefault = DARK_SUBTLE_900_OVERRIDE_TONES.has(tone)
+        ? scale?.['900']
+        : scale?.['950'];
+      expect(darkTheme.tokens[`bg.${tone}.subtle.default`]).toBe(
+        expectedDarkSubtleDefault
+      );
+      expect(darkTheme.tokens[`bg.${tone}.muted.default`]).toBe(scale?.['600']);
+      expect(darkTheme.tokens[`bg.${tone}.default.default`]).toBe(
+        scale?.['300']
+      );
+      expect(darkTheme.tokens[`bg.${tone}.strong.default`]).toBe(scale?.['50']);
+    }
+  });
+
+  it('uses 600-shade transparent status fills with the new alpha schedule', () => {
+    const theme = buildThemeV2(
+      createDefaultThemeContractV2('light', {
+        themeId: 'eigent',
+        contrast: 50,
+      }),
+      DEFAULT_THEME_CATALOG
+    );
+    const scale = FIXED_SHADE_SCALES.information!;
+
+    expect(theme.tokens['bg.information.transparent.default']).toBe(
+      'rgba(37, 99, 235, 0.300)'
+    );
+    expect(theme.tokens['bg.information.transparent.hover']).toBe(
+      'rgba(37, 99, 235, 0.500)'
+    );
+    expect(theme.tokens['bg.information.transparent.selected']).toBe(
+      'rgba(37, 99, 235, 0.700)'
+    );
+    expect(theme.tokens['bg.information.transparent.disabled']).toBe(
+      'rgba(37, 99, 235, 0.100)'
+    );
+    expect(scale['600']).toBe('#2563eb');
+  });
+
+  it('remains stable under randomized theme seeds', () => {
+    for (let i = 0; i < 20; i += 1) {
+      const mode: Mode = i % 2 === 0 ? 'light' : 'dark';
+      const themeId = `random-${i}`;
+      const catalog: ThemeCatalogV2 = {
+        ...DEFAULT_THEME_CATALOG,
+        [mode]: {
+          ...DEFAULT_THEME_CATALOG[mode],
+          [themeId]: {
+            id: themeId,
+            mode,
+            seed: {
+              accent: randomHex(),
+              background: randomHex(),
+              ink: randomHex(),
+            },
+          },
+        },
+      };
+      const theme = buildThemeV2(
+        createDefaultThemeContractV2(mode, {
+          themeId,
+          contrast: Math.floor(Math.random() * 101),
+        }),
+        catalog
+      );
+      for (const value of Object.values(theme.tokens)) {
+        if (!value) continue;
+        expect(isHex(value) || isRgba(value)).toBe(true);
+      }
+    }
+  });
+});
diff --git a/test/unit/lib/themeTokens/verifier.test.ts b/test/unit/lib/themeTokens/verifier.test.ts
new file mode 100644
index 000000000..60232eb1c
--- /dev/null
+++ b/test/unit/lib/themeTokens/verifier.test.ts
@@ -0,0 +1,65 @@
+// ========= 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 { createDefaultThemeContractV2 } from '@/lib/themeTokens/catalog';
+import { buildThemeV2 } from '@/lib/themeTokens/engine';
+import { verifyThemeEngine } from '@/lib/themeTokens/verifier';
+import { describe, expect, it } from 'vitest';
+
+describe('themeTokens v2 engine verifier', () => {
+  it('produces zero errors across every registered theme/mode/contrast', () => {
+    const report = verifyThemeEngine();
+    const errors = report.findings.filter((f) => f.severity === 'error');
+    if (errors.length > 0) {
+      const preview = errors
+        .slice(0, 5)
+        .map(
+          (e) =>
+            `[${e.code}] ${e.mode}/${e.themeId}@${e.contrast}: ${e.message}`
+        )
+        .join('\n');
+      throw new Error(
+        `Theme engine emitted ${errors.length} errors. First few:\n${preview}`
+      );
+    }
+    expect(errors).toHaveLength(0);
+  });
+
+  it('applies contrast clamping at bounds', () => {
+    const low = buildThemeV2(
+      createDefaultThemeContractV2('light', {
+        themeId: 'eigent',
+        contrast: -50,
+      })
+    );
+    const high = buildThemeV2(
+      createDefaultThemeContractV2('light', {
+        themeId: 'eigent',
+        contrast: 500,
+      })
+    );
+    expect(low.contract.contrast).toBe(0);
+    expect(high.contract.contrast).toBe(100);
+  });
+
+  it('falls back to a registered theme for unknown ids', () => {
+    const resolved = buildThemeV2(
+      createDefaultThemeContractV2('light', {
+        themeId: 'this-theme-does-not-exist',
+        contrast: 43,
+      })
+    );
+    expect(resolved.tokens['bg.neutral.subtle.default']).toBeDefined();
+  });
+});
diff --git a/tsconfig.node.json b/tsconfig.node.json
index fe7b54f77..79f7f494c 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -6,5 +6,10 @@
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts", "vite.config.web.ts", "package.json"]
+  "include": [
+    "vite.config.ts",
+    "vite.config.web.ts",
+    "package.json",
+    "scripts/**/*.ts"
+  ]
 }