From 6271c58b0edabdbb5bd18c636fdb28b900c867b3 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Mon, 17 Aug 2026 11:25:55 +0800
Subject: [PATCH] feat(web): refine navigation and light surfaces

---
 scripts/theme-color-governance-baseline.json  |   2 +-
 scripts/theme-color-near-pair-decisions.json  |   8 +-
 .../startup_appearance_bootstrap.json         |   2 +-
 .../appearance_prompt_snapshots.json          |   2 +-
 src/web-ui/index.html                         |   6 +-
 .../src/app/components/NavPanel/MainNav.tsx   |  33 +++-
 .../src/app/components/NavPanel/NavPanel.scss |   6 +-
 .../components/PersistentFooterActions.tsx    | 165 ++++++++----------
 .../workspaces/WorkspaceListSection.scss      |   6 +-
 .../WorkspaceListSectionLayout.test.ts        |  11 +-
 .../NavPanel/unifiedSessionCreation.test.ts   |  37 +++-
 .../app/global-search/GlobalSearchRoot.scss   |   8 +-
 src/web-ui/src/app/scenes/registry.ts         |   2 +-
 .../builtins/appearancePresetOutput.test.ts   |  10 +-
 .../appearance/builtins/light.ts              |  10 +-
 src/web-ui/src/locales/en-US/common.json      |  13 +-
 .../src/locales/en-US/scenes/todos.json       |   2 +-
 src/web-ui/src/locales/zh-CN/common.json      |  13 +-
 .../src/locales/zh-CN/scenes/todos.json       |   2 +-
 src/web-ui/src/locales/zh-TW/common.json      |  13 +-
 .../src/locales/zh-TW/scenes/todos.json       |   2 +-
 tests/e2e/specs/l0-appearance.spec.ts         |  46 ++++-
 tests/e2e/specs/l0-global-search.spec.ts      |  13 ++
 tests/e2e/specs/l0-i18n.spec.ts               |  24 +--
 tests/e2e/specs/l0-navigation.spec.ts         |  76 +++++++-
 tests/e2e/specs/l0-notification.spec.ts       |   8 +-
 tests/e2e/specs/l0-open-settings.spec.ts      |  14 +-
 27 files changed, 357 insertions(+), 177 deletions(-)

diff --git a/scripts/theme-color-governance-baseline.json b/scripts/theme-color-governance-baseline.json
index 502765d2a3..b972c7b41e 100644
--- a/scripts/theme-color-governance-baseline.json
+++ b/scripts/theme-color-governance-baseline.json
@@ -252,7 +252,7 @@
       "max": 0
     },
     "colorDomainScopes.themePreset.occurrences": {
-      "max": 159
+      "max": 158
     },
     "colorDomainScopes.themePreset.uniqueColors": {
       "max": 112
diff --git a/scripts/theme-color-near-pair-decisions.json b/scripts/theme-color-near-pair-decisions.json
index 31c58e7c60..1bc27dee5e 100644
--- a/scripts/theme-color-near-pair-decisions.json
+++ b/scripts/theme-color-near-pair-decisions.json
@@ -23,11 +23,11 @@
     {
       "root": "src/web-ui/src",
       "domain": "themePreset",
-      "key": "#f0f4f8 <-> #f3f3f5",
+      "key": "#fafafa <-> #ffffff",
       "decision": "keep",
       "owner": "src/web-ui/src/infrastructure/appearance/builtins",
-      "reason": "The pair crosses light primary background and Monaco lineHighlight / button state values. Editor line highlight must remain visibly distinct from base surface roles.",
-      "reevaluateWhen": "Only after Monaco-focused light-theme screenshots confirm the line highlight remains readable."
+      "reason": "The default Light primary background intentionally uses the requested off-white surface while secondary, elevated, and scene surfaces remain pure white. These adjacent roles need a restrained but visible hierarchy.",
+      "reevaluateWhen": "Only after a focused Light-theme surface review proves primary and elevated surfaces no longer need separate values."
     },
     {
       "root": "src/web-ui/src",
@@ -44,7 +44,7 @@
       "key": "#f3f3f5 <-> #faf8f0",
       "decision": "keep",
       "owner": "src/web-ui/src/infrastructure/appearance/builtins",
-      "reason": "China Style paper uses a warm first-paint surface while #f3f3f5 is a cool light neutral and button state stop. This is cross-theme identity, not a duplicate role.",
+      "reason": "China Style paper uses a warm first-paint surface while #f3f3f5 is the default Light editor line highlight and a button state stop. This is cross-theme and renderer identity, not a duplicate role.",
       "reevaluateWhen": "Only after China Style paper identity is intentionally neutralized."
     },
     {
diff --git a/src/apps/desktop/src/generated/startup_appearance_bootstrap.json b/src/apps/desktop/src/generated/startup_appearance_bootstrap.json
index f219eeb9c4..578f6a2c6f 100644
--- a/src/apps/desktop/src/generated/startup_appearance_bootstrap.json
+++ b/src/apps/desktop/src/generated/startup_appearance_bootstrap.json
@@ -5,7 +5,7 @@
   "appearances": [
     {
       "id": "bitfun-light",
-      "bgPrimary": "#f3f3f5",
+      "bgPrimary": "#fafafa",
       "bgSecondary": "#ffffff",
       "bgScene": "#ffffff",
       "isLight": true,
diff --git a/src/crates/assembly/core/src/agentic/tools/implementations/generated/appearance_prompt_snapshots.json b/src/crates/assembly/core/src/agentic/tools/implementations/generated/appearance_prompt_snapshots.json
index 3d26b8c0e6..f2cbfa7f6a 100644
--- a/src/crates/assembly/core/src/agentic/tools/implementations/generated/appearance_prompt_snapshots.json
+++ b/src/crates/assembly/core/src/agentic/tools/implementations/generated/appearance_prompt_snapshots.json
@@ -6,7 +6,7 @@
     {
       "id": "bitfun-light",
       "mode": "light",
-      "bgPrimary": "#f3f3f5",
+      "bgPrimary": "#fafafa",
       "bgSecondary": "#ffffff",
       "bgScene": "#ffffff",
       "textPrimary": "#1e293b",
diff --git a/src/web-ui/index.html b/src/web-ui/index.html
index 12dd3f4007..5232a9baa1 100644
--- a/src/web-ui/index.html
+++ b/src/web-ui/index.html
@@ -9,8 +9,8 @@
     <script>
       (function () {
         var dark = '#121214';
-        /* Keep in sync with presets/light-theme.ts colors.background.primary */
-        var light = '#f3f3f5';
+        /* Keep in sync with infrastructure/appearance/builtins/light.ts colors.background.primary */
+        var light = '#fafafa';
         var m = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
         var root = document.documentElement;
         var fallbackMessages = {
@@ -85,7 +85,7 @@
       }
       @media (prefers-color-scheme: light) {
         html {
-          background-color: #f3f3f5;
+          background-color: #fafafa;
         }
       }
       
diff --git a/src/web-ui/src/app/components/NavPanel/MainNav.tsx b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
index 2ac532947a..1a23a920f9 100644
--- a/src/web-ui/src/app/components/NavPanel/MainNav.tsx
+++ b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
@@ -3,7 +3,7 @@
  *
  * Layout (top to bottom):
  *   1. Search and New Session
- *   2. AI Assistant, Mini Apps, then Extensions & Compatibility
+ *   2. AI Assistant, Task Board, Mini Apps, then Extensions & Compatibility
  *   3. Unified Sessions (all or grouped by project / assistant)
  *
  * When a scene-nav transition is active (`isDeparting=true`), items receive
@@ -13,7 +13,7 @@
 import React, { useCallback, useState, useMemo, useEffect, useRef, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
-import { Plus, FolderOpen, FolderPlus, History, Check, User, Users, Puzzle, ChevronDown, Network, Search } from 'lucide-react';
+import { Plus, FolderOpen, FolderPlus, History, Check, User, Users, Puzzle, ChevronDown, Network, Search, CalendarClock } from 'lucide-react';
 // import { PanelsTopLeft } from 'lucide-react'; // temporarily hidden: Pages nav entry
 import {
   BITFUN_ICON_SIZE,
@@ -250,6 +250,10 @@ const MainNav: React.FC<MainNavProps> = ({
     void activateProductAction('surface.agents.open');
   }, []);
 
+  const handleOpenTodos = useCallback(() => {
+    void activateProductAction('surface.todos.open');
+  }, []);
+
   const handleOpenSkills = useCallback(() => {
     void activateProductAction('surface.skills.open');
   }, []);
@@ -376,8 +380,10 @@ const MainNav: React.FC<MainNavProps> = ({
   const skillsTooltip = t('nav.tooltips.skills');
   const ecosystemCompatibilityTooltip = t('nav.tooltips.ecosystemCompatibility');
   const assistantManagerLabel = t('nav.items.assistant');
+  const taskBoardLabel = t('nav.items.todos');
   const extensionsLabel = t('nav.sections.extensions');
   const isAssistantManagerActive = activeTabId === 'assistant' || activeTabId === 'profile';
+  const isTaskBoardActive = activeTabId === 'todos';
   const isEcosystemCompatibilityActive = activeTabId === 'settings' && activeSettingsTab === 'external-sources';
   return (
     <>
@@ -455,6 +461,29 @@ const MainNav: React.FC<MainNavProps> = ({
             </button>
           </Tooltip>
 
+          <Tooltip content={t('nav.tooltips.todos')} placement="right" followCursor>
+            <button
+              type="button"
+              className={[
+                'bitfun-nav-panel__top-action-btn',
+                isTaskBoardActive ? 'is-active' : '',
+              ].filter(Boolean).join(' ')}
+              data-bf-component="nav-panel"
+              data-bf-part="todoEntry"
+              data-bf-action="todos"
+              data-bf-state={isTaskBoardActive ? 'active' : ''}
+              onClick={handleOpenTodos}
+              aria-label={taskBoardLabel}
+              aria-pressed={isTaskBoardActive}
+              data-testid="nav-todos-btn"
+            >
+              <span className="bitfun-nav-panel__top-action-icon-slot" aria-hidden="true">
+                <CalendarClock size={15} />
+              </span>
+              <span>{taskBoardLabel}</span>
+            </button>
+          </Tooltip>
+
           <div className="bitfun-nav-panel__miniapp-navigation" data-bf-component="nav-panel" data-bf-part="miniAppFooter">
             <MiniAppEntry
               isActive={activeTabId === 'miniapps' || !!activeMiniAppId}
diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
index 28c115947d..2622e58205 100644
--- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss
+++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
@@ -1920,10 +1920,10 @@ $_section-header-height: 24px;
 }
 
 // ──────────────────────────────────────────────
-// More-options popup menu
+// Settings popup menu
 // ──────────────────────────────────────────────
 
-.bitfun-nav-panel__footer-more-wrap {
+.bitfun-nav-panel__footer-menu-wrap {
   position: relative;
 }
 
@@ -2057,7 +2057,7 @@ $_section-header-height: 24px;
   color: var(--bf-appearance-token-color-text-primary);
   font-family: var(--bf-appearance-token-font-family-sans);
   font-size: var(--bf-appearance-token-font-size-sm);
-  transform-origin: bottom left;
+  transform-origin: bottom right;
   animation: bitfun-footer-menu-in $motion-fast $easing-decelerate forwards;
 
   &.is-closing {
diff --git a/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx b/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
index b080bbc27b..aa17ed8aa2 100644
--- a/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
@@ -3,11 +3,9 @@ import { createPortal } from 'react-dom';
 import {
   Settings,
   Info,
-  MoreVertical,
   PictureInPicture2,
   Smartphone,
-  BarChart3,
-  CalendarClock,
+  Palette,
   ChevronUp,
 } from 'lucide-react';
 import { Tooltip, Modal, PresenceBoundary } from '@/component-library';
@@ -29,6 +27,7 @@ import {
 } from '../../RemoteConnectDialog/remoteConnectDisclaimerStorage';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 import { useAnchoredPopoverPosition } from '@/shared/utils/useAnchoredPopoverPosition';
+import { useSettingsStore } from '@/app/scenes/settings/settingsStore';
 
 const RemoteConnectDialog = lazy(() => import('../../RemoteConnectDialog'));
 const AboutDialog = lazy(() =>
@@ -65,7 +64,7 @@ const PersistentFooterActions: React.FC = () => {
     anchorRef: menuTriggerRef,
     popoverRef: menuPopoverRef,
     preferredPlacement: 'top',
-    alignment: 'start',
+    alignment: 'end',
     gap: 6,
   });
   const [showAbout, setShowAbout] = useState(false);
@@ -105,19 +104,17 @@ const PersistentFooterActions: React.FC = () => {
     }
   };
 
-  const handleOpenSettings = () => {
+  const handleOpenSettings = useCallback(() => {
+    closeMenu();
     void activateProductAction('settings.open');
-  };
+  }, [closeMenu]);
 
-  const handleOpenInsights = useCallback(() => {
+  const handleOpenThemeConfiguration = useCallback(() => {
     closeMenu();
-    void activateProductAction('surface.insights.open');
+    useSettingsStore.getState().openTab('appearance');
+    void activateProductAction('settings.open');
   }, [closeMenu]);
 
-  const handleOpenTodos = useCallback(() => {
-    void activateProductAction('surface.todos.open');
-  }, []);
-
   const handleShowAbout = () => {
     closeMenu();
     setShowAbout(true);
@@ -147,7 +144,6 @@ const PersistentFooterActions: React.FC = () => {
     setShowRemoteConnect(true);
   }, []);
 
-  const isTodosActive = activeTabId === 'todos';
   const isSettingsActive = activeTabId === 'settings';
   const deviceStatusLabel = accountLoggedIn
     ? accountDeviceName || t('accountLogin.thisDevice')
@@ -160,25 +156,54 @@ const PersistentFooterActions: React.FC = () => {
     <>
       <div className="bitfun-nav-panel__footer" data-bf-component="nav-panel" data-bf-part="footer">
         <div className="bitfun-nav-panel__footer-left">
-          <div className="bitfun-nav-panel__footer-more-wrap">
-            <Tooltip content={t('nav.moreOptions')} placement="right" followCursor disabled={menuOpen}>
+          <Tooltip content={deviceStatusTooltip} placement="right" followCursor>
+            <button
+              type="button"
+              className={`bitfun-nav-panel__footer-device-status${accountLoggedIn ? ' is-connected' : ''}`}
+              aria-label={deviceStatusTooltip}
+              onClick={handleRemoteConnect}
+              data-testid="nav-footer-device-status"
+              data-bf-component="nav-panel"
+              data-bf-part="deviceStatus"
+              data-bf-state={accountLoggedIn ? 'connected' : 'disconnected'}
+            >
+              <Smartphone size={15} aria-hidden="true" />
+              <span className="bitfun-nav-panel__footer-device-status-label">
+                {deviceStatusLabel}
+              </span>
+              <span className="bitfun-nav-panel__footer-device-status-dot" aria-hidden="true" />
+            </button>
+          </Tooltip>
+        </div>
+
+        <div className="bitfun-nav-panel__footer-right">
+          <GithubStarButton />
+          <div className="bitfun-nav-panel__footer-menu-wrap">
+            <Tooltip
+              content={t('shared:features.settings')}
+              placement="right"
+              followCursor
+              disabled={menuOpen}
+            >
               <button
                 ref={menuTriggerRef}
                 type="button"
-                className={`bitfun-nav-panel__footer-btn bitfun-nav-panel__footer-btn--icon${menuOpen ? ' is-active' : ''}`}
-                aria-label={t('nav.moreOptions')}
+                className={`bitfun-nav-panel__footer-btn bitfun-nav-panel__footer-btn--icon${menuOpen || isSettingsActive ? ' is-active' : ''}`}
+                aria-label={t('shared:features.settings')}
                 aria-expanded={menuOpen}
+                aria-haspopup="menu"
+                aria-pressed={isSettingsActive}
                 onClick={toggleMenu}
-                data-testid="nav-footer-more-btn"
+                data-testid="nav-footer-settings-item"
                 data-bf-component="nav-panel"
-                data-bf-part="footerButton"
-                data-bf-state={menuOpen ? 'active' : undefined}
+                data-bf-part="settingsEntry"
+                data-bf-state={menuOpen ? 'open' : isSettingsActive ? 'active' : undefined}
               >
                 {menuOpen ? (
-                  <MoreVertical size={15} aria-hidden="true" />
+                  <Settings size={15} aria-hidden="true" />
                 ) : (
                   <span className="bitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
-                    <MoreVertical size={15} className="bitfun-nav-panel__footer-btn-icon-swap-default" />
+                    <Settings size={15} className="bitfun-nav-panel__footer-btn-icon-swap-default" />
                     <ChevronUp size={15} className="bitfun-nav-panel__footer-btn-icon-swap-hover" />
                   </span>
                 )}
@@ -195,7 +220,8 @@ const PersistentFooterActions: React.FC = () => {
                   ref={menuPopoverRef}
                   className={`bitfun-nav-panel__footer-menu${menuClosing ? ' is-closing' : ''}`}
                   role="menu"
-                  data-testid="nav-footer-menu"
+                  aria-label={t('shared:features.settings')}
+                  data-testid="nav-settings-menu"
                   data-bf-component="nav-panel"
                   data-bf-part="footerMenu"
                   data-bf-state={menuClosing ? 'closing' : 'open'}
@@ -206,102 +232,65 @@ const PersistentFooterActions: React.FC = () => {
                     visibility: menuLayout ? 'visible' : 'hidden',
                   }}
                 >
+                  <button
+                    type="button"
+                    className="bitfun-nav-panel__footer-menu-item"
+                    role="menuitem"
+                    onClick={handleFloatingMode}
+                    data-testid="nav-settings-floating-item"
+                    data-bf-component="nav-panel"
+                    data-bf-part="footerMenuItem"
+                    data-bf-action="floating-window"
+                  >
+                    <PictureInPicture2 size={14} aria-hidden="true" />
+                    <span>{t('nav.settingsMenu.floatingWindow')}</span>
+                  </button>
                   <NotificationButton menuItem onActivate={closeMenu} />
-                  <div className="bitfun-nav-panel__footer-menu-divider" data-bf-component="nav-panel" data-bf-part="footerMenuDivider" />
                   <button
                     type="button"
                     className="bitfun-nav-panel__footer-menu-item"
                     role="menuitem"
+                    onClick={handleOpenThemeConfiguration}
+                    data-testid="nav-settings-theme-item"
                     data-bf-component="nav-panel"
                     data-bf-part="footerMenuItem"
-                    onClick={handleFloatingMode}
+                    data-bf-action="theme-configuration"
                   >
-                    <PictureInPicture2 size={14} />
-                    <span>{t('header.switchToToolbar')}</span>
+                    <Palette size={14} aria-hidden="true" />
+                    <span>{t('nav.settingsMenu.themeConfiguration')}</span>
                   </button>
                   <div className="bitfun-nav-panel__footer-menu-divider" data-bf-component="nav-panel" data-bf-part="footerMenuDivider" />
                   <button
                     type="button"
                     className="bitfun-nav-panel__footer-menu-item"
                     role="menuitem"
+                    onClick={handleOpenSettings}
+                    data-testid="nav-settings-open-item"
                     data-bf-component="nav-panel"
                     data-bf-part="footerMenuItem"
-                    onClick={handleOpenInsights}
+                    data-bf-action="open-settings"
                   >
-                    <BarChart3 size={14} />
-                    <span>{t('scenes.insights')}</span>
+                    <Settings size={14} aria-hidden="true" />
+                    <span>{t('nav.settingsMenu.openSettings')}</span>
                   </button>
                   <button
                     type="button"
                     className="bitfun-nav-panel__footer-menu-item"
                     role="menuitem"
+                    onClick={handleShowAbout}
+                    data-testid="nav-settings-about-item"
                     data-bf-component="nav-panel"
                     data-bf-part="footerMenuItem"
-                    onClick={handleShowAbout}
+                    data-bf-action="about"
                   >
-                    <Info size={14} />
-                    <span>{t('header.about')}</span>
+                    <Info size={14} aria-hidden="true" />
+                    <span>{t('nav.settingsMenu.about')}</span>
                   </button>
                 </div>
               </>,
               getAppearanceOverlayHost(),
             )}
           </div>
-
-          <Tooltip content={t('nav.tooltips.todos')} placement="right" followCursor>
-            <button
-              type="button"
-              className={`bitfun-nav-panel__footer-btn bitfun-nav-panel__footer-btn--icon${isTodosActive ? ' is-active' : ''}`}
-              aria-label={t('nav.tooltips.todos')}
-              aria-pressed={isTodosActive}
-              onClick={handleOpenTodos}
-              data-testid="nav-todos-btn"
-              data-bf-component="nav-panel"
-              data-bf-part="todoEntry"
-              data-bf-action="todos"
-              data-bf-state={isTodosActive ? 'active' : undefined}
-            >
-              <CalendarClock size={15} aria-hidden="true" />
-            </button>
-          </Tooltip>
-
-          <Tooltip content={deviceStatusTooltip} placement="right" followCursor>
-            <button
-              type="button"
-              className={`bitfun-nav-panel__footer-device-status${accountLoggedIn ? ' is-connected' : ''}`}
-              aria-label={deviceStatusTooltip}
-              onClick={handleRemoteConnect}
-              data-testid="nav-footer-device-status"
-              data-bf-component="nav-panel"
-              data-bf-part="deviceStatus"
-              data-bf-state={accountLoggedIn ? 'connected' : 'disconnected'}
-            >
-              <Smartphone size={15} aria-hidden="true" />
-              <span className="bitfun-nav-panel__footer-device-status-label">
-                {deviceStatusLabel}
-              </span>
-              <span className="bitfun-nav-panel__footer-device-status-dot" aria-hidden="true" />
-            </button>
-          </Tooltip>
-        </div>
-
-        <div className="bitfun-nav-panel__footer-right">
-          <GithubStarButton />
-          <Tooltip content={t('shared:features.settings')} placement="right" followCursor>
-            <button
-              type="button"
-              className={`bitfun-nav-panel__footer-btn bitfun-nav-panel__footer-btn--icon${isSettingsActive ? ' is-active' : ''}`}
-              aria-label={t('shared:features.settings')}
-              aria-pressed={isSettingsActive}
-              onClick={handleOpenSettings}
-              data-testid="nav-footer-settings-item"
-              data-bf-component="nav-panel"
-              data-bf-part="settingsEntry"
-              data-bf-state={isSettingsActive ? 'active' : undefined}
-            >
-              <Settings size={15} aria-hidden="true" />
-            </button>
-          </Tooltip>
         </div>
       </div>
       <PresenceBoundary active={showAbout}>
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
index 28c1ec2f56..90152a45cc 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSection.scss
@@ -1048,7 +1048,8 @@
     }
 
     .bitfun-nav-panel__inline-list {
-      margin-left: 8px;
+      // Align the nested session title with the workspace label after its 26px icon slot.
+      margin-left: 22px;
       margin-right: 0;
       padding-top: 0;
       padding-left: 2px;
@@ -1393,7 +1394,8 @@
     }
 
     .bitfun-nav-panel__inline-list {
-      margin-left: 8px;
+      // Keep assistant-owned session rows on the same text rail as the assistant label.
+      margin-left: 22px;
       margin-right: 0;
       padding-top: 0;
       padding-left: 2px;
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts
index ec15102408..f95b08e84b 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceListSectionLayout.test.ts
@@ -104,11 +104,20 @@ describe('WorkspaceListSection layout styles', () => {
     expect(assistantMenu).toContain('position: absolute;');
     expect(assistantMenu).toContain('right: 4px;');
     expect(assistantMenu).toContain('gap: 4px;');
-    expect(stylesheet).toContain('.bitfun-nav-panel__inline-list {\n      margin-left: 8px;');
     expect(stylesheet).toContain('padding-left: 2px;');
     expect(stylesheet).toContain('padding-right: 0;');
   });
 
+  it('aligns nested session titles with workspace and assistant labels', () => {
+    const stylesheet = readWorkspaceListStylesheet();
+    const alignedSessionLists = stylesheet.match(
+      /\.bitfun-nav-panel__inline-list \{\n\s+\/\/[^\n]+\n\s+margin-left: 22px;/g,
+    );
+
+    expect(alignedSessionLists).toHaveLength(2);
+    expect(stylesheet).not.toContain('.bitfun-nav-panel__inline-list {\n      margin-left: 8px;');
+  });
+
   it('keeps workspace and assistant menu triggers at the compact row size', () => {
     const stylesheet = readWorkspaceListStylesheet();
     const workspaceTrigger = extractBlock(stylesheet, '&__workspace-item-menu-trigger');
diff --git a/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts b/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts
index eefe178cba..c7eaefebef 100644
--- a/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts
@@ -34,10 +34,10 @@ describe('unified project session creation', () => {
 
     expect(mainNav).not.toContain('data-testid="nav-smart-members-btn"');
     expect(mainNav).not.toContain('data-testid="nav-long-term-tracking-btn"');
-    expect(mainNav).not.toContain('data-testid="nav-todos-btn"');
-    expect(footerActions).toContain('data-testid="nav-todos-btn"');
-    expect(footerActions).toContain('data-bf-part="todoEntry"');
-    expect(footerActions).toContain("activateProductAction('surface.todos.open')");
+    expect(mainNav).toContain('data-testid="nav-todos-btn"');
+    expect(footerActions).not.toContain('data-testid="nav-todos-btn"');
+    expect(mainNav).toContain('data-bf-part="todoEntry"');
+    expect(mainNav).toContain("activateProductAction('surface.todos.open')");
     expect(mainNav).toContain("new Set(['sessions'])");
     expect(mainNav).toContain('label={t(\'nav.items.sessions\')}');
     expect(mainNav).toContain('<WorkspaceListSection variant="all" />');
@@ -49,22 +49,45 @@ describe('unified project session creation', () => {
     expect(projection).toContain("WorkspaceBackedSessionGroupKind = 'assistant' | 'project'");
   });
 
-  it('places Mini Apps before capability management and keeps both above sessions', () => {
+  it('places Task Board below AI Assistant, before Mini Apps and capability management', () => {
     const mainNav = source('./MainNav.tsx');
+    const assistantIndex = mainNav.indexOf('data-testid="nav-assistant-manager"');
+    const taskBoardIndex = mainNav.indexOf('data-testid="nav-todos-btn"');
     const miniAppsIndex = mainNav.indexOf('className="bitfun-nav-panel__miniapp-navigation"');
     const extensionIndex = mainNav.indexOf('data-testid="agent-skill-entry"');
     const sessionsIndex = mainNav.indexOf('data-bf-section="sessions"');
 
-    expect(miniAppsIndex).toBeGreaterThan(-1);
+    expect(taskBoardIndex).toBeGreaterThan(assistantIndex);
+    expect(miniAppsIndex).toBeGreaterThan(taskBoardIndex);
     expect(extensionIndex).toBeGreaterThan(miniAppsIndex);
-    expect(extensionIndex).toBeGreaterThan(-1);
     expect(sessionsIndex).toBeGreaterThan(extensionIndex);
+    expect(mainNav).toContain("t('nav.items.todos')");
     expect(mainNav).not.toContain('data-testid="nav-bottom-bar"');
     expect(mainNav).toContain('className="bitfun-nav-panel__top-action-expand"');
     expect(mainNav).toContain('data-testid="ecosystem-compatibility-tab"');
     expect(mainNav).toContain("activateProductAction('settings.external-sources.open')");
   });
 
+  it('opens the footer utility list from Settings without More or Insights', () => {
+    const footerActions = source('./components/PersistentFooterActions.tsx');
+    const floatingIndex = footerActions.indexOf('data-testid="nav-settings-floating-item"');
+    const notificationIndex = footerActions.indexOf('<NotificationButton menuItem');
+    const themeIndex = footerActions.indexOf('data-testid="nav-settings-theme-item"');
+    const openSettingsIndex = footerActions.indexOf('data-testid="nav-settings-open-item"');
+    const aboutIndex = footerActions.indexOf('data-testid="nav-settings-about-item"');
+
+    expect(footerActions).toContain('data-testid="nav-footer-settings-item"');
+    expect(footerActions).toContain('data-testid="nav-settings-menu"');
+    expect(floatingIndex).toBeGreaterThan(-1);
+    expect(notificationIndex).toBeGreaterThan(floatingIndex);
+    expect(themeIndex).toBeGreaterThan(notificationIndex);
+    expect(openSettingsIndex).toBeGreaterThan(themeIndex);
+    expect(aboutIndex).toBeGreaterThan(openSettingsIndex);
+    expect(footerActions).toContain("useSettingsStore.getState().openTab('appearance')");
+    expect(footerActions).not.toContain('data-testid="nav-footer-more-btn"');
+    expect(footerActions).not.toContain("activateProductAction('surface.insights.open')");
+  });
+
   it('places one semantic all/grouped toggle beside the session filter and group add action', () => {
     const mainNav = source('./MainNav.tsx');
     const groupingIndex = mainNav.indexOf('<WorkspaceSessionGroupingToggle />');
diff --git a/src/web-ui/src/app/global-search/GlobalSearchRoot.scss b/src/web-ui/src/app/global-search/GlobalSearchRoot.scss
index 1083cfa8a0..9e7fc6aaa8 100644
--- a/src/web-ui/src/app/global-search/GlobalSearchRoot.scss
+++ b/src/web-ui/src/app/global-search/GlobalSearchRoot.scss
@@ -1,12 +1,12 @@
 @use '../../component-library/styles/tokens.scss' as *;
 @use '../styles/nav-panel-font-scope.scss' as nav-font;
 
-.modal-overlay.global-search-overlay {
+#bitfun-appearance-overlay-host > .modal-overlay.global-search-overlay {
   align-items: center;
   padding: 24px;
-  background: var(--bf-appearance-token-color-overlay-black-50);
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
   animation: none;
 
   & > .modal.modal--xlarge {
diff --git a/src/web-ui/src/app/scenes/registry.ts b/src/web-ui/src/app/scenes/registry.ts
index c85bb2ba45..af0741597e 100644
--- a/src/web-ui/src/app/scenes/registry.ts
+++ b/src/web-ui/src/app/scenes/registry.ts
@@ -145,7 +145,7 @@ export const SCENE_TAB_REGISTRY: SceneTabDef[] = [
   },
   {
     id: 'todos' as SceneTabId,
-    label: 'Todos',
+    label: 'Task Board',
     labelKey: 'scenes.todos',
     Icon: CalendarClock,
     pinned: false,
diff --git a/src/web-ui/src/infrastructure/appearance/builtins/appearancePresetOutput.test.ts b/src/web-ui/src/infrastructure/appearance/builtins/appearancePresetOutput.test.ts
index ddf262f12d..8f6ceb82dc 100644
--- a/src/web-ui/src/infrastructure/appearance/builtins/appearancePresetOutput.test.ts
+++ b/src/web-ui/src/infrastructure/appearance/builtins/appearancePresetOutput.test.ts
@@ -108,10 +108,14 @@ describe('builtin appearance preset output', () => {
     }
   });
 
-  it('keeps near-neutral preset foregrounds on canonical stops', () => {
+  it('keeps approved near-neutral preset stops scoped to their semantic roles', () => {
     const serializedAppearances = JSON.stringify(builtinAppearancePalettes).toLowerCase();
+    const lightAppearance = builtinAppearancePalettes.find(appearance => appearance.id === 'bitfun-light');
 
-    expect(serializedAppearances).not.toContain('#fafafa');
+    expect(lightAppearance?.colors.background.primary).toBe('#fafafa');
+    expect(lightAppearance?.monaco?.colors.background).toBe('#fafafa');
+    expect(lightAppearance?.monaco?.colors.lineHighlight).toBe('#f3f3f5');
+    expect(serializedAppearances.match(/#fafafa/g)).toHaveLength(2);
     expect(serializedAppearances).not.toContain('#e2e6eb');
     expect(serializedAppearances).not.toContain('#f0f2f5');
   });
@@ -149,7 +153,7 @@ describe('builtin appearance preset output', () => {
     }))).toMatchInlineSnapshot(`
       [
         {
-          "hash": "954317380f5baa31e8b0155564c72606a76ff6fa6d8a190615120668a8e3d388",
+          "hash": "1d420a9266664694a5668328d2df91309bc263098ad5e7d5a07c106cad760cc3",
           "id": "bitfun-light",
           "type": "light",
         },
diff --git a/src/web-ui/src/infrastructure/appearance/builtins/light.ts b/src/web-ui/src/infrastructure/appearance/builtins/light.ts
index 85cbce51b2..54de2ecf20 100644
--- a/src/web-ui/src/infrastructure/appearance/builtins/light.ts
+++ b/src/web-ui/src/infrastructure/appearance/builtins/light.ts
@@ -26,6 +26,8 @@ const LIGHT_PURPLE_HOVER = '#655680';
 const LIGHT_SUCCESS = '#5b9a6f';
 const LIGHT_WARNING = '#c08c42';
 const LIGHT_ERROR = '#c26565';
+const LIGHT_BACKGROUND_PRIMARY = '#fafafa';
+const LIGHT_EDITOR_LINE_HIGHLIGHT = '#f3f3f5';
 
 const lightInk = (alpha: number | string) => rgbaFromHex(LIGHT_INK, alpha);
 const lightAccent = (alpha: number | string) => rgbaFromHex(LIGHT_ACCENT, alpha);
@@ -38,7 +40,7 @@ export const bitfunLightPalette: AppearancePalette = {
   type: 'light',
   description: 'Light appearance - Neutral gray surfaces, black primary actions',
   author: 'BitFun Team',
-  version: '2.3.0',
+  version: '2.3.1',
 
   layout: {
     sceneViewportBorder: false,
@@ -47,7 +49,7 @@ export const bitfunLightPalette: AppearancePalette = {
 
   colors: {
     background: {
-      primary: '#f3f3f5',
+      primary: LIGHT_BACKGROUND_PRIMARY,
       secondary: STATIC_WHITE,
       tertiary: '#e8e8e8',
       elevated: STATIC_WHITE,
@@ -234,9 +236,9 @@ export const bitfunLightPalette: AppearancePalette = {
       { token: 'attribute.value', foreground: '5b9a6f' },
     ],
     colors: {
-      background: '#f3f3f5',
+      background: LIGHT_BACKGROUND_PRIMARY,
       foreground: LIGHT_TEXT_PRIMARY,
-      lineHighlight: '#f0f4f8',
+      lineHighlight: LIGHT_EDITOR_LINE_HIGHLIGHT,
       selection: lightInk(0.14),
       cursor: LIGHT_TEXT_PRIMARY,
 
diff --git a/src/web-ui/src/locales/en-US/common.json b/src/web-ui/src/locales/en-US/common.json
index a1220e2b69..e691f728f2 100644
--- a/src/web-ui/src/locales/en-US/common.json
+++ b/src/web-ui/src/locales/en-US/common.json
@@ -78,6 +78,7 @@
       "project": "Project",
       "persona": "Smart Members",
       "assistant": "AI Assistant",
+      "todos": "Task Board",
       "longTermTracking": "Long-term Tracking",
       "agents": "Agents",
       "skills": "Skills",
@@ -90,7 +91,7 @@
     },
     "tooltips": {
       "persona": "Smart Members — expand role- and memory-based member sessions",
-      "todos": "Todos — open all Todo items",
+      "todos": "Task Board — manage all tasks",
       "longTermTracking": "Long-term Tracking — ongoing tasks and conversations",
       "agents": "Which agents it can call",
       "skills": "What it knows — specialized knowledge files",
@@ -638,7 +639,13 @@
     },
     "moreOptions": "More options",
     "multimodalTools": "Multimodal Tools",
-    "notifications": "Notifications"
+    "notifications": "Notifications",
+    "settingsMenu": {
+      "floatingWindow": "Floating window",
+      "themeConfiguration": "Theme configuration",
+      "openSettings": "Open settings",
+      "about": "About"
+    }
   },
   "window": {
     "minimize": "Minimize",
@@ -1328,7 +1335,7 @@
     "browser": "Browser",
     "insights": "Insights",
     "assistant": "Assistant",
-    "todos": "Todos",
+    "todos": "Task Board",
     "shell": "Shell",
     "panelView": "Panel View"
   },
diff --git a/src/web-ui/src/locales/en-US/scenes/todos.json b/src/web-ui/src/locales/en-US/scenes/todos.json
index 7a3bebbe57..5d939ad3fc 100644
--- a/src/web-ui/src/locales/en-US/scenes/todos.json
+++ b/src/web-ui/src/locales/en-US/scenes/todos.json
@@ -1,5 +1,5 @@
 {
-  "title": "Todos",
+  "title": "Task Board",
   "header": {
     "summary": "{{total}} scheduled · {{dueSoon}} due within 24 hours"
   },
diff --git a/src/web-ui/src/locales/zh-CN/common.json b/src/web-ui/src/locales/zh-CN/common.json
index 27e451e9b6..1ae99fdf59 100644
--- a/src/web-ui/src/locales/zh-CN/common.json
+++ b/src/web-ui/src/locales/zh-CN/common.json
@@ -78,6 +78,7 @@
       "project": "项目",
       "persona": "智能成员",
       "assistant": "智能助理",
+      "todos": "任务看板",
       "longTermTracking": "长期跟踪",
       "agents": "专业智能体",
       "skills": "技能",
@@ -90,7 +91,7 @@
     },
     "tooltips": {
       "persona": "智能成员 — 展开查看基于角色和记忆的成员会话",
-      "todos": "待办 — 打开全部待办事项",
+      "todos": "任务看板 — 管理全部任务",
       "longTermTracking": "长期跟踪 — 持续任务与长期对话",
       "agents": "它能调用哪些 Agent",
       "skills": "它懂什么专项知识 — 技能知识文件",
@@ -638,7 +639,13 @@
     },
     "moreOptions": "更多选项",
     "multimodalTools": "多模态工具",
-    "notifications": "通知"
+    "notifications": "通知",
+    "settingsMenu": {
+      "floatingWindow": "悬浮窗",
+      "themeConfiguration": "主题配置",
+      "openSettings": "打开设置",
+      "about": "关于"
+    }
   },
   "window": {
     "minimize": "最小化",
@@ -1328,7 +1335,7 @@
     "browser": "浏览器",
     "insights": "洞察",
     "assistant": "助理",
-    "todos": "待办事项",
+    "todos": "任务看板",
     "shell": "Shell",
     "panelView": "面板视图"
   },
diff --git a/src/web-ui/src/locales/zh-CN/scenes/todos.json b/src/web-ui/src/locales/zh-CN/scenes/todos.json
index 8572221daf..feacf74a1e 100644
--- a/src/web-ui/src/locales/zh-CN/scenes/todos.json
+++ b/src/web-ui/src/locales/zh-CN/scenes/todos.json
@@ -1,5 +1,5 @@
 {
-  "title": "待办事项",
+  "title": "任务看板",
   "header": {
     "summary": "共 {{total}} 项 · {{dueSoon}} 项将在 24 小时内执行"
   },
diff --git a/src/web-ui/src/locales/zh-TW/common.json b/src/web-ui/src/locales/zh-TW/common.json
index 6201080132..1342f8eb24 100644
--- a/src/web-ui/src/locales/zh-TW/common.json
+++ b/src/web-ui/src/locales/zh-TW/common.json
@@ -78,6 +78,7 @@
       "project": "項目",
       "persona": "智能成員",
       "assistant": "智能助理",
+      "todos": "任務看板",
       "longTermTracking": "長期跟蹤",
       "agents": "專業智能體",
       "skills": "技能",
@@ -90,7 +91,7 @@
     },
     "tooltips": {
       "persona": "智能成員 — 展開查看基於角色和記憶的成員會話",
-      "todos": "待辦 — 開啟全部待辦事項",
+      "todos": "任務看板 — 管理全部任務",
       "longTermTracking": "長期跟蹤 — 持續任務與長期對話",
       "agents": "它能調用哪些 Agent",
       "skills": "它懂什麼專項知識 — 技能知識檔案",
@@ -638,7 +639,13 @@
     },
     "moreOptions": "更多選項",
     "multimodalTools": "多模態工具",
-    "notifications": "通知"
+    "notifications": "通知",
+    "settingsMenu": {
+      "floatingWindow": "懸浮窗",
+      "themeConfiguration": "主題配置",
+      "openSettings": "開啟設定",
+      "about": "關於"
+    }
   },
   "window": {
     "minimize": "最小化",
@@ -1328,7 +1335,7 @@
     "browser": "瀏覽器",
     "insights": "洞察",
     "assistant": "助理",
-    "todos": "待辦事項",
+    "todos": "任務看板",
     "shell": "Shell",
     "panelView": "面板視圖"
   },
diff --git a/src/web-ui/src/locales/zh-TW/scenes/todos.json b/src/web-ui/src/locales/zh-TW/scenes/todos.json
index 6955705aa4..d98573a8ed 100644
--- a/src/web-ui/src/locales/zh-TW/scenes/todos.json
+++ b/src/web-ui/src/locales/zh-TW/scenes/todos.json
@@ -1,5 +1,5 @@
 {
-  "title": "待辦事項",
+  "title": "任務看板",
   "header": {
     "summary": "共 {{total}} 項 · {{dueSoon}} 項將在 24 小時內執行"
   },
diff --git a/tests/e2e/specs/l0-appearance.spec.ts b/tests/e2e/specs/l0-appearance.spec.ts
index 1eacec4a89..ce238df5a3 100644
--- a/tests/e2e/specs/l0-appearance.spec.ts
+++ b/tests/e2e/specs/l0-appearance.spec.ts
@@ -19,16 +19,36 @@ async function openAppearanceSettings(): Promise<void> {
   const settingsItem = await waitForDisplayed('[data-testid="nav-footer-settings-item"]');
   await settingsItem.click();
 
-  await waitForDisplayed('[data-testid="settings-scene"]');
-  const appearanceTab = await waitForDisplayed(
-    '[data-testid="settings-nav-tab"][data-settings-tab="appearance"]',
-  );
-  await appearanceTab.click();
+  const themeConfiguration = await waitForDisplayed('[data-testid="nav-settings-theme-item"]');
+  await themeConfiguration.click();
 
+  await waitForDisplayed('[data-testid="settings-scene"]');
   await waitForDisplayed('[data-testid="appearance-config"]');
   await waitForDisplayed('[data-testid="appearance-palette-select"]');
 }
 
+async function selectAppearance(appearanceId: string): Promise<void> {
+  await openAppearanceSettings();
+
+  const picker = await $('[data-testid="appearance-palette-select"]');
+  await picker.click();
+
+  const option = await waitForDisplayed(
+    `[data-testid="appearance-palette-option"][data-appearance-id="${appearanceId}"]`,
+  );
+  await option.click();
+
+  await browser.waitUntil(async () => {
+    return browser.execute((expectedId: string) => {
+      return document.documentElement.getAttribute('data-bf-appearance') === expectedId;
+    }, appearanceId);
+  }, {
+    timeout: 10000,
+    interval: 100,
+    timeoutMsg: `Appearance runtime did not apply ${appearanceId}`,
+  });
+}
+
 describe('L0 Appearance', () => {
   it('app should start with an active Appearance runtime', async () => {
     console.log('[L0] Starting Appearance tests...');
@@ -89,6 +109,22 @@ describe('L0 Appearance', () => {
     expect(appearanceStyles.accent).not.toBe('');
   });
 
+  it('should project the light primary background token onto the navigation', async () => {
+    await selectAppearance('bitfun-light');
+
+    const lightNavigation = await browser.execute(() => {
+      const styles = window.getComputedStyle(document.documentElement);
+      const navPanel = document.querySelector<HTMLElement>('[data-testid="nav-panel"]');
+      return {
+        token: styles.getPropertyValue('--bf-appearance-token-color-bg-primary').trim(),
+        navBackground: navPanel ? window.getComputedStyle(navPanel).backgroundColor : null,
+      };
+    });
+
+    expect(lightNavigation.token.toLowerCase()).toBe('#fafafa');
+    expect(lightNavigation.navBackground).toBe('rgb(250, 250, 250)');
+  });
+
   it('should expose the Appearance selector in settings', async () => {
     await openAppearanceSettings();
 
diff --git a/tests/e2e/specs/l0-global-search.spec.ts b/tests/e2e/specs/l0-global-search.spec.ts
index 470aaf7e59..d49a2997cc 100644
--- a/tests/e2e/specs/l0-global-search.spec.ts
+++ b/tests/e2e/specs/l0-global-search.spec.ts
@@ -59,6 +59,19 @@ describe('L0 Global Search', () => {
 
     const dialog = await $('[data-testid="global-search-dialog"]');
     await dialog.waitForDisplayed({ timeout: 10000 });
+    const overlayPresentation = await browser.execute(() => {
+      const overlay = document.querySelector<HTMLElement>('.modal-overlay.global-search-overlay');
+      if (!overlay) return null;
+
+      const style = window.getComputedStyle(overlay);
+      return {
+        backgroundColor: style.backgroundColor,
+        backdropFilter: style.backdropFilter,
+      };
+    });
+    expect(overlayPresentation).not.toBeNull();
+    expect(['rgba(0, 0, 0, 0)', 'transparent']).toContain(overlayPresentation?.backgroundColor);
+    expect(overlayPresentation?.backdropFilter).toBe('none');
     expect(await dialog.$('.global-search__prefix-hint').isExisting()).toBe(false);
     expect(await dialog.$('.global-search__footer-status').isExisting()).toBe(false);
 
diff --git a/tests/e2e/specs/l0-i18n.spec.ts b/tests/e2e/specs/l0-i18n.spec.ts
index dc20ceb7d3..101840e284 100644
--- a/tests/e2e/specs/l0-i18n.spec.ts
+++ b/tests/e2e/specs/l0-i18n.spec.ts
@@ -56,24 +56,12 @@ describe('L0 Internationalization', () => {
 
       await browser.pause(500);
 
-      // Open more options menu in footer
-      const moreBtn = await $('.bitfun-nav-panel__footer-btn--icon');
-      await moreBtn.click();
-      await browser.pause(500);
-
-      // Click settings menu item
-      const menuItems = await $$('.bitfun-nav-panel__footer-menu-item');
-      let settingsItem = null;
-      for (const item of menuItems) {
-        const html = await item.getHTML();
-        if (html.includes('Settings') || html.includes('settings')) {
-          settingsItem = item;
-          break;
-        }
-      }
-
-      expect(settingsItem).not.toBeNull();
-      await settingsItem!.click();
+      // Open the footer settings list, then enter Settings.
+      const settingsButton = await $('[data-testid="nav-footer-settings-item"]');
+      await settingsButton.click();
+      const settingsItem = await $('[data-testid="nav-settings-open-item"]');
+      await settingsItem.waitForDisplayed({ timeout: 10000 });
+      await settingsItem.click();
       await browser.pause(2000);
 
       // Navigate to Basics tab (language selector lives there)
diff --git a/tests/e2e/specs/l0-navigation.spec.ts b/tests/e2e/specs/l0-navigation.spec.ts
index 7f4bc2992d..08e4118ebb 100644
--- a/tests/e2e/specs/l0-navigation.spec.ts
+++ b/tests/e2e/specs/l0-navigation.spec.ts
@@ -178,15 +178,58 @@ describe('L0 Navigation Panel', () => {
       );
     });
 
-    it('should open assistant management from the item above Mini Apps', async function () {
+    it('should align nested session titles with the active workspace or assistant label', async function () {
+      expect(hasWorkspace).toBe(true);
+
+      const activeGroup = await $('[data-testid="nav-workspace-item"][data-workspace-active="true"]');
+      const groupLabel = await activeGroup.$('[data-bf-part="label"]');
+      const sessionLabel = await activeGroup.$(
+        '[data-testid="nav-session-item"][data-session-level="0"] .bitfun-nav-panel__inline-item-label',
+      );
+      await groupLabel.waitForDisplayed({ timeout: 10000 });
+      await sessionLabel.waitForDisplayed({ timeout: 10000 });
+
+      const groupLabelX = await groupLabel.getLocation('x');
+      const sessionLabelX = await sessionLabel.getLocation('x');
+      console.log('[L0] Grouped session alignment:', { groupLabelX, sessionLabelX });
+      expect(Math.abs(sessionLabelX - groupLabelX)).toBeLessThanOrEqual(1);
+      await saveStepScreenshot('l0-navigation-grouped-session-alignment');
+    });
+
+    it('should place Task Board below AI Assistant and open it', async function () {
       expect(hasWorkspace).toBe(true);
 
       const assistantManager = await $('[data-testid="nav-assistant-manager"]');
+      const taskBoard = await $('[data-testid="nav-todos-btn"]');
       const miniApps = await $('.bitfun-nav-panel__miniapp-entry');
       await assistantManager.waitForDisplayed({ timeout: 10000 });
+      await taskBoard.waitForDisplayed({ timeout: 10000 });
       await miniApps.waitForDisplayed({ timeout: 10000 });
 
-      expect(await assistantManager.getLocation('y')).toBeLessThan(await miniApps.getLocation('y'));
+      expect(await assistantManager.getLocation('y')).toBeLessThan(await taskBoard.getLocation('y'));
+      expect(await taskBoard.getLocation('y')).toBeLessThan(await miniApps.getLocation('y'));
+      expect(['任务看板', 'Task Board', '任務看板']).toContain((await taskBoard.getText()).trim());
+      expect(await $('[data-bf-part="footer"] [data-testid="nav-todos-btn"]').isExisting()).toBe(false);
+
+      await taskBoard.click();
+      const todosScene = await $('[data-testid="todos-scene"]');
+      await todosScene.waitForDisplayed({ timeout: 10000 });
+      const taskBoardTitle = await todosScene.$('.bf-todos__title');
+      expect(await taskBoard.getAttribute('aria-pressed')).toBe('true');
+      expect(await todosScene.isDisplayed()).toBe(true);
+      expect(['任务看板', 'Task Board', '任務看板']).toContain((await taskBoardTitle.getText()).trim());
+      await saveStepScreenshot('l0-navigation-task-board');
+    });
+
+    it('should open assistant management from the item above Task Board', async function () {
+      expect(hasWorkspace).toBe(true);
+
+      const assistantManager = await $('[data-testid="nav-assistant-manager"]');
+      const taskBoard = await $('[data-testid="nav-todos-btn"]');
+      await assistantManager.waitForDisplayed({ timeout: 10000 });
+      await taskBoard.waitForDisplayed({ timeout: 10000 });
+
+      expect(await assistantManager.getLocation('y')).toBeLessThan(await taskBoard.getLocation('y'));
 
       await assistantManager.click();
       const assistantScene = await $('[data-bf-scene="assistant"][data-bf-part="root"]');
@@ -198,7 +241,7 @@ describe('L0 Navigation Panel', () => {
       await saveStepScreenshot('l0-navigation-assistant-management');
     });
 
-    it('should expose the consolidated footer controls', async function () {
+    it('should expose the settings utility list without More or Insights', async function () {
       expect(hasWorkspace).toBe(true);
 
       const deviceStatus = await $('[data-testid="nav-footer-device-status"]');
@@ -207,13 +250,28 @@ describe('L0 Navigation Panel', () => {
       expect(await settingsButton.isDisplayed()).toBe(true);
       expect(await $('[data-testid="shell-panel-entry"]').isExisting()).toBe(false);
       expect(await $('[data-testid="browser-panel-entry"]').isExisting()).toBe(false);
+      expect(await $('[data-testid="nav-footer-more-btn"]').isExisting()).toBe(false);
+
+      await settingsButton.click();
+      const settingsMenu = await $('[data-testid="nav-settings-menu"]');
+      await settingsMenu.waitForDisplayed({ timeout: 10000 });
+
+      const expectedItems = [
+        'nav-settings-floating-item',
+        'notification-button',
+        'nav-settings-theme-item',
+        'nav-settings-open-item',
+        'nav-settings-about-item',
+      ];
+      const renderedItems = await settingsMenu.$$('[role="menuitem"]');
+      expect(renderedItems).toHaveLength(expectedItems.length);
+      for (let index = 0; index < expectedItems.length; index += 1) {
+        expect(await renderedItems[index].getAttribute('data-testid')).toBe(expectedItems[index]);
+      }
 
-      const moreButton = await $('[data-testid="nav-footer-more-btn"]');
-      await moreButton.click();
-      const notificationItem = await $('[data-testid="notification-button"]');
-      await notificationItem.waitForDisplayed({ timeout: 10000 });
-      expect(await notificationItem.isDisplayed()).toBe(true);
-      await saveStepScreenshot('l0-navigation-footer-consolidated');
+      const menuText = await settingsMenu.getText();
+      expect(['洞察', 'Insights'].some(label => menuText.includes(label))).toBe(false);
+      await saveStepScreenshot('l0-navigation-settings-utility-list');
 
       const backdrop = await $('.bitfun-nav-panel__footer-backdrop');
       await backdrop.click();
diff --git a/tests/e2e/specs/l0-notification.spec.ts b/tests/e2e/specs/l0-notification.spec.ts
index 6cae17e29f..2cac60c541 100644
--- a/tests/e2e/specs/l0-notification.spec.ts
+++ b/tests/e2e/specs/l0-notification.spec.ts
@@ -7,9 +7,9 @@ import { browser, expect, $ } from '@wdio/globals';
 import { openWorkspace } from '../helpers/workspace-helper';
 
 async function openNotificationMenuItem() {
-  const moreButton = await $('[data-testid="nav-footer-more-btn"]');
-  await moreButton.waitForDisplayed({ timeout: 15000 });
-  await moreButton.click();
+  const settingsButton = await $('[data-testid="nav-footer-settings-item"]');
+  await settingsButton.waitForDisplayed({ timeout: 15000 });
+  await settingsButton.click();
 
   const notificationButton = await $('[data-testid="notification-button"]');
   await notificationButton.waitForDisplayed({ timeout: 10000 });
@@ -52,7 +52,7 @@ describe('L0 Notification', () => {
   });
 
   describe('Notification entry visibility', () => {
-    it('notification entry should be visible in More options', async function () {
+    it('notification entry should be visible in the settings list', async function () {
       expect(hasWorkspace).toBe(true);
 
       const notificationBtn = await openNotificationMenuItem();
diff --git a/tests/e2e/specs/l0-open-settings.spec.ts b/tests/e2e/specs/l0-open-settings.spec.ts
index 1cd2ee4936..31261fb8a3 100644
--- a/tests/e2e/specs/l0-open-settings.spec.ts
+++ b/tests/e2e/specs/l0-open-settings.spec.ts
@@ -48,17 +48,23 @@ describe('L0 Settings Panel', () => {
   });
 
   describe('Settings panel interaction', () => {
-    it('should open and close settings panel', async function () {
+    it('should open the settings list and then the settings panel', async function () {
       expect(hasWorkspace).toBe(true);
 
-      console.log('[L0] Opening settings...');
+      console.log('[L0] Opening settings list...');
       const settingsButton = await $('[data-testid="nav-footer-settings-item"]');
       await settingsButton.click();
-      await browser.pause(2000);
+      const settingsMenu = await $('[data-testid="nav-settings-menu"]');
+      await settingsMenu.waitForDisplayed({ timeout: 10000 });
+      expect(await settingsMenu.isDisplayed()).toBe(true);
+
+      const openSettingsItem = await $('[data-testid="nav-settings-open-item"]');
+      await openSettingsItem.click();
 
       // Check for settings scene
       const settingsScene = await $('.bitfun-settings-scene');
-      const sceneExists = await settingsScene.isExisting();
+      await settingsScene.waitForDisplayed({ timeout: 10000 });
+      const sceneExists = await settingsScene.isDisplayed();
 
       console.log('[L0] Settings scene opened:', sceneExists);
       expect(sceneExists).toBe(true);