feat(web): refine navigation and light surfaces

scripts/theme-color-governance-baseline.json

@@ -252,7 +252,7 @@
       "max": 0
     },
     "colorDomainScopes.themePreset.occurrences": {
-      "max": 159
+      "max": 158
     },
     "colorDomainScopes.themePreset.uniqueColors": {
       "max": 112

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."
     },
     {

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,

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",

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;
         }
       }
 

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}

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 {