From 4581e7c4b84185098c440f90a83f327a3153bf62 Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Mon, 30 Mar 2026 01:02:16 +0800
Subject: [PATCH] feat(web-ui): theme tokens, nav/flow-chat UI, and tool card
 refresh

- Extend theme presets and ThemeService; add btn-primary tokens and Monaco sync tweaks

- NavPanel, SceneBar, skills, context menu, and gallery styling updates

- Refactor flow chat tool cards (BaseToolCard, TaskToolDisplay, etc.) and chat input

- Add useWorkspaceManagerSync; mermaid editor tokens; i18n and Vite adjustments
---
 .../GalleryLayout/GalleryLayout.scss          |  11 +-
 .../src/app/components/NavPanel/MainNav.tsx   |   7 +-
 .../src/app/components/NavPanel/NavPanel.scss | 121 +++++--
 .../components/NavPanel/NavSearchDialog.scss  | 248 +++++++++----
 .../components/BranchQuickSwitch.scss         |   8 +-
 .../components/PersistentFooterActions.tsx    |  43 ++-
 .../sections/sessions/SessionsSection.scss    |  44 ++-
 .../workspaces/WorkspaceListSection.scss      |  22 +-
 .../src/app/components/SceneBar/SceneBar.scss |  57 ++-
 .../TitleBar/NotificationButton.tsx           |  24 +-
 src/web-ui/src/app/scenes/SceneViewport.scss  |   4 +-
 .../app/scenes/profile/views/NurseryView.scss |   3 +-
 .../src/app/scenes/settings/SettingsNav.scss  |  46 ++-
 .../src/app/scenes/skills/SkillsScene.scss    |  20 +-
 .../scenes/skills/hooks/useInstalledSkills.ts |   4 +-
 .../app/scenes/skills/hooks/useSkillMarket.ts |   4 +-
 .../components/Badge/Badge.scss               |   2 +-
 .../components/Button/Button.scss             |  15 +-
 .../components/FilterPill/FilterPill.scss     |  10 +-
 .../components/Markdown/Markdown.scss         |  12 +-
 .../components/Switch/Switch.scss             |  18 +-
 .../component-library/components/Tag/Tag.scss |   6 +-
 .../src/component-library/preview/main.tsx    |   5 +-
 .../styles/btn-primary-tokens.scss            |  21 ++
 .../styles/flowchat-markdown-code-vars.scss   |   4 +-
 .../src/flow_chat/components/ChatInput.scss   |  49 ++-
 .../src/flow_chat/components/ChatInput.tsx    |   5 +-
 .../components/ScrollToBottomButton.scss      |  59 ++-
 .../components/ScrollToBottomButton.tsx       |   6 +-
 .../src/flow_chat/components/UserMessage.scss |   9 -
 .../components/modern/UserMessageItem.scss    |   7 -
 .../flow_chat/tool-cards/BaseToolCard.scss    | 117 +++++-
 .../src/flow_chat/tool-cards/BaseToolCard.tsx | 115 +++++-
 .../flow_chat/tool-cards/CompactToolCard.scss |  24 ++
 .../flow_chat/tool-cards/CompactToolCard.tsx  |  10 +-
 .../tool-cards/ContextCompressionDisplay.scss |   6 -
 .../tool-cards/ContextCompressionDisplay.tsx  |  25 +-
 .../tool-cards/CreatePlanDisplay.scss         |  55 ++-
 .../tool-cards/CreatePlanDisplay.tsx          |  85 +++--
 .../tool-cards/FileOperationToolCard.scss     | 114 ++++--
 .../tool-cards/FileOperationToolCard.tsx      |  74 +++-
 .../tool-cards/GetFileDiffDisplay.scss        |  18 -
 .../tool-cards/GetFileDiffDisplay.tsx         |  22 +-
 .../flow_chat/tool-cards/GitToolDisplay.scss  |  20 --
 .../flow_chat/tool-cards/GitToolDisplay.tsx   |  35 +-
 .../flow_chat/tool-cards/MCPToolDisplay.scss  |  34 +-
 .../flow_chat/tool-cards/MCPToolDisplay.tsx   |  10 +-
 .../tool-cards/MermaidInteractiveDisplay.tsx  |   2 +
 .../flow_chat/tool-cards/SkillDisplay.scss    |  20 --
 .../src/flow_chat/tool-cards/SkillDisplay.tsx |  29 +-
 .../flow_chat/tool-cards/TaskToolDisplay.scss | 340 +++++++++++-------
 .../flow_chat/tool-cards/TaskToolDisplay.tsx  | 243 ++++++++-----
 .../tool-cards/TerminalToolCard.scss          |  10 +-
 .../flow_chat/tool-cards/TerminalToolCard.tsx |   1 +
 src/web-ui/src/flow_chat/tool-cards/index.ts  |  19 +-
 .../config/components/AIModelConfig.tsx       |   6 +-
 src/web-ui/src/infrastructure/hooks/index.ts  |   1 +
 .../hooks/useWorkspaceManagerSync.ts          |  30 ++
 .../infrastructure/theme/core/ThemeService.ts |  38 +-
 .../theme/integrations/MonacoThemeSync.ts     |  12 +-
 .../theme/presets/china-style-theme.ts        |  12 +-
 .../theme/presets/light-theme.ts              | 143 ++++----
 .../theme/presets/slate-theme.ts              | 115 +++---
 .../src/infrastructure/theme/types/index.ts   |   8 +
 src/web-ui/src/locales/en-US/flow-chat.json   |  13 +-
 src/web-ui/src/locales/zh-CN/flow-chat.json   |  15 +-
 .../components/ui/ContextMenu.scss            | 204 +++++------
 .../providers/SelectionMenuProvider.ts        |  35 --
 .../tools/mermaid-editor/theme/_tokens.scss   |  48 +--
 .../mermaid-editor/theme/mermaidTheme.ts      |  17 +-
 src/web-ui/vite.config.ts                     |   1 +
 71 files changed, 1912 insertions(+), 1108 deletions(-)
 create mode 100644 src/web-ui/src/component-library/styles/btn-primary-tokens.scss
 create mode 100644 src/web-ui/src/infrastructure/hooks/useWorkspaceManagerSync.ts

diff --git a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
index 91d4727a..b669cdfb 100644
--- a/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
+++ b/src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
@@ -1,4 +1,5 @@
 @use '../../../component-library/styles/tokens' as *;
+@use '../../../component-library/styles/btn-primary-tokens.scss' as btn-primary;
 
 $gutter: clamp(40px, 6vw, 80px);
 $content-max: 1480px;
@@ -271,12 +272,14 @@ $content-max: 1480px;
   font-weight: $font-weight-medium;
 
   &--primary {
-    color: var(--color-text-primary);
-    background: color-mix(in srgb, var(--color-accent-500) 10%, var(--element-bg-soft));
+    @include btn-primary.btn-primary-surface-default;
 
     &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--color-accent-500) 16%, var(--element-bg-medium));
-      color: var(--color-text-primary);
+      @include btn-primary.btn-primary-surface-hover;
+    }
+
+    &:active:not(:disabled) {
+      @include btn-primary.btn-primary-surface-active;
     }
   }
 }
diff --git a/src/web-ui/src/app/components/NavPanel/MainNav.tsx b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
index f6c85d01..b2c801c9 100644
--- a/src/web-ui/src/app/components/NavPanel/MainNav.tsx
+++ b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
@@ -411,11 +411,14 @@ const MainNav: React.FC<MainNavProps> = ({
               onClick={() => setSearchOpen(true)}
               aria-label={t('nav.search.triggerTooltip')}
             >
-              <Search size={13} />
+              <span className="bitfun-nav-panel__search-trigger__icon" aria-hidden="true">
+                <span className="bitfun-nav-panel__search-trigger__icon-inner">
+                  <Search size={13} />
+                </span>
+              </span>
               <span className="bitfun-nav-panel__search-trigger__label">
                 {t('nav.search.triggerPlaceholder')}
               </span>
-              <span className="bitfun-nav-panel__search-trigger__kbd">⌘K</span>
             </button>
           </Tooltip>
           <NavSearchDialog open={searchOpen} onClose={() => setSearchOpen(false)} />
diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
index 774d6087..0b366f4c 100644
--- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss
+++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
@@ -7,6 +7,7 @@
  */
 
 @use '../../../component-library/styles/tokens.scss' as *;
+@use '../../../component-library/styles/btn-primary-tokens.scss' as btn-primary;
 
 $_nav-width: 240px;
 // Scene-inner fade: used when switching between different SceneNav components
@@ -353,7 +354,7 @@ $_section-header-height: 24px;
     border: none;
     border-radius: $size-radius-base 0 0 $size-radius-base;
     background: var(--element-bg-soft);
-    color: var(--color-primary);
+    color: var(--color-text-primary);
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
@@ -417,7 +418,7 @@ $_section-header-height: 24px;
     border: none;
     border-radius: 0 $size-radius-base $size-radius-base 0;
     background: var(--element-bg-soft);
-    color: var(--color-text-muted);
+    color: var(--color-text-primary);
     cursor: pointer;
     transition: background $motion-fast $easing-standard,
                 color $motion-fast $easing-standard,
@@ -430,7 +431,7 @@ $_section-header-height: 24px;
 
     &.is-active {
       background: var(--element-bg-medium);
-      color: var(--color-primary);
+      color: var(--color-text-primary);
     }
 
     &:active { transform: translateY(1px); }
@@ -490,12 +491,9 @@ $_section-header-height: 24px;
   &__mode-dropdown-item-icon {
     flex-shrink: 0;
 
-    &.is-code {
-      color: color-mix(in srgb, var(--color-primary) 75%, var(--color-text-muted));
-    }
-
+    &.is-code,
     &.is-cowork {
-      color: color-mix(in srgb, var(--color-accent-500) 75%, var(--color-text-muted));
+      color: color-mix(in srgb, var(--color-text-secondary) 82%, var(--color-text-muted));
     }
   }
 
@@ -508,7 +506,7 @@ $_section-header-height: 24px;
 
   &__mode-dropdown-item-check {
     flex-shrink: 0;
-    color: var(--color-primary);
+    color: var(--color-text-primary);
     margin-left: auto;
   }
 
@@ -579,10 +577,10 @@ $_section-header-height: 24px;
 
   &__section-label {
     font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.06em;
+    font-weight: 600;
+    letter-spacing: 0.05em;
     text-transform: uppercase;
-    color: var(--color-text-primary);
+    color: var(--color-text-muted);
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
@@ -680,7 +678,7 @@ $_section-header-height: 24px;
     border: none;
     border-radius: 10px;
     background: transparent;
-    color: var(--color-text-primary);
+    color: var(--color-text-secondary);
     cursor: pointer;
     text-align: left;
     transition: background $motion-fast $easing-standard,
@@ -766,28 +764,45 @@ $_section-header-height: 24px;
     box-shadow: none;
     overflow: hidden;
     transition: transform $motion-fast $easing-standard,
-                box-shadow $motion-fast $easing-standard;
+                box-shadow $motion-fast $easing-standard,
+                filter $motion-fast $easing-standard,
+                opacity $motion-fast $easing-standard;
 
     & + & {
       margin-left: -8px;
     }
 
+    &:not(.is-active):not(.bitfun-nav-panel__miniapp-bubble--more) {
+      filter: saturate(0.72);
+      opacity: 0.9;
+    }
+
     &:hover {
       transform: translateY(-2px) scale(1.06);
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
+      filter: saturate(1);
+      opacity: 1;
     }
 
     &.is-active {
+      filter: saturate(1);
+      opacity: 1;
       box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22),
                   0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent);
     }
 
     &--more {
       background: color-mix(in srgb, var(--element-bg-medium) 92%, transparent);
-      color: var(--color-text-primary);
+      color: var(--color-text-secondary);
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 0.01em;
+      filter: none;
+      opacity: 1;
+
+      &:hover {
+        color: var(--color-text-primary);
+      }
     }
   }
 
@@ -826,7 +841,7 @@ $_section-header-height: 24px;
     border: none;
     border-radius: 4px;
     background: transparent;
-    color: var(--color-text-muted);
+    color: var(--color-text-primary);
     cursor: pointer;
     transition: color $motion-fast $easing-standard,
                 background $motion-fast $easing-standard;
@@ -1148,12 +1163,12 @@ $_section-header-height: 24px;
         transform: translateY(-50%);
         width: 2px;
         height: 16px;
-        background: var(--color-primary);
+        background: var(--btn-primary-bg, var(--color-text-primary));
         border-radius: 0 2px 2px 0;
       }
 
       .bitfun-nav-panel__item-icon {
-        color: var(--color-primary);
+        color: var(--color-text-primary);
         opacity: 1;
       }
     }
@@ -1244,13 +1259,13 @@ $_section-header-height: 24px;
     height: 22px;
     margin-left: auto;
     border-radius: $size-radius-sm;
-    color: var(--color-text-muted);
+    color: var(--color-text-primary);
     cursor: pointer;
     transition: color $motion-fast $easing-standard,
                 background $motion-fast $easing-standard;
 
     &:hover {
-      color: var(--color-primary);
+      color: var(--color-text-secondary);
       background: var(--element-bg-soft);
     }
 
@@ -1405,6 +1420,13 @@ $_section-header-height: 24px;
   color: #ca8a04;
 }
 
+.bitfun-nav-panel__footer .bitfun-notification-btn.bitfun-notification-btn--nav-hover-icon:not(.bitfun-notification-btn--has-progress) {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  justify-content: center;
+}
+
 .bitfun-nav-panel__footer-btn--icon {
   display: flex;
   align-items: center;
@@ -1436,6 +1458,48 @@ $_section-header-height: 24px;
   }
 }
 
+// Footer icon buttons: default icon fades to alternate on hover / focus-visible
+.bitfun-nav-panel__footer-btn-icon-swap {
+  position: relative;
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  > svg {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: opacity $motion-fast $easing-standard;
+  }
+}
+
+.bitfun-nav-panel__footer-btn-icon-swap-default {
+  opacity: 1;
+}
+
+.bitfun-nav-panel__footer-btn-icon-swap-hover {
+  opacity: 0;
+}
+
+// is-hover-open: multimodal submenu is open but pointer may be over the menu, not the button — keep “hover” icon
+.bitfun-nav-panel__footer-btn--icon:hover .bitfun-nav-panel__footer-btn-icon-swap,
+.bitfun-nav-panel__footer-btn--icon:focus-visible .bitfun-nav-panel__footer-btn-icon-swap,
+.bitfun-nav-panel__footer-btn--icon.is-hover-open .bitfun-nav-panel__footer-btn-icon-swap,
+.bitfun-nav-panel__footer .bitfun-notification-btn--nav-hover-icon:hover .bitfun-nav-panel__footer-btn-icon-swap,
+.bitfun-nav-panel__footer .bitfun-notification-btn--nav-hover-icon:focus-visible .bitfun-nav-panel__footer-btn-icon-swap {
+  .bitfun-nav-panel__footer-btn-icon-swap-default {
+    opacity: 0;
+  }
+
+  .bitfun-nav-panel__footer-btn-icon-swap-hover {
+    opacity: 1;
+  }
+}
+
 // ──────────────────────────────────────────────
 // More-options popup menu
 // ──────────────────────────────────────────────
@@ -1527,7 +1591,7 @@ $_section-header-height: 24px;
     background: var(--element-bg-soft);
 
     .bitfun-nav-panel__footer-multimodal-item-icon {
-      color: var(--color-primary);
+      color: var(--color-text-primary);
       opacity: 1;
     }
   }
@@ -1761,7 +1825,7 @@ $_section-header-height: 24px;
 .bitfun-nav-panel__brand-header {
   display: flex;
   flex-direction: column;
-  padding: $size-gap-2 $size-gap-2 $size-gap-1;
+  padding: 0 $size-gap-2 $size-gap-1;
   flex-shrink: 0;
 }
 
@@ -1886,7 +1950,7 @@ $_section-header-height: 24px;
 
   &.is-active {
     background: var(--element-bg-soft);
-    color: var(--color-primary);
+    color: var(--color-text-primary);
   }
 
   &--sub {
@@ -1945,17 +2009,20 @@ $_section-header-height: 24px;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background: var(--element-bg-medium);
-  color: var(--color-text-muted);
+  @include btn-primary.btn-primary-surface-default;
   transform: scale(1);
   transform-origin: center;
   transition: background $motion-fast $easing-standard,
               color $motion-fast $easing-standard,
+              box-shadow $motion-fast $easing-standard,
               transform $motion-fast $easing-standard;
 
   .bitfun-nav-panel__top-action-btn:hover & {
-    background: var(--element-bg-strong);
-    color: var(--color-primary);
+    @include btn-primary.btn-primary-surface-hover;
     transform: scale(1.07);
   }
+
+  .bitfun-nav-panel__top-action-btn:active & {
+    @include btn-primary.btn-primary-surface-active;
+  }
 }
diff --git a/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss b/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss
index d6954e2f..5d44e447 100644
--- a/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss
+++ b/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss
@@ -1,73 +1,89 @@
 @use '../../../component-library/styles/tokens.scss' as *;
 
-// ── Overlay ──────────────────────────────────────────────────────────────────
-
 .bitfun-nav-search-dialog__overlay {
   position: fixed;
   inset: 0;
   z-index: 600;
-  background: rgba(0, 0, 0, 0.35);
+  background: transparent;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding-top: 80px;
-  animation: bitfun-nav-search-overlay-in 0.12s ease;
 }
 
-@keyframes bitfun-nav-search-overlay-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-// ── Card ─────────────────────────────────────────────────────────────────────
+// ── Card — matches .bitfun-scene-viewport surface (--color-bg-scene)
 
 .bitfun-nav-search-dialog__card {
   width: 520px;
   max-width: calc(100vw - 32px);
-  background: var(--color-bg-elevated);
-  border-radius: $size-radius-lg;
+  background: var(--color-bg-scene);
+  border-radius: $size-radius-base;
+  border: 1px solid var(--border-subtle);
   box-shadow:
-    0 8px 32px rgba(0, 0, 0, 0.25),
-    0 2px 8px rgba(0, 0, 0, 0.15),
-    inset 0 0 0 1px var(--border-subtle);
+    0 1px 2px rgba(15, 23, 42, 0.05),
+    0 12px 32px -10px rgba(15, 23, 42, 0.14);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   max-height: calc(100vh - 120px);
-  animation: bitfun-nav-search-card-in 0.14s ease;
+  animation: bitfun-nav-search-card-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+:root[data-theme-type='light'] .bitfun-nav-search-dialog__card {
+  border-color: var(--border-medium);
+}
+
+:root[data-theme-type='dark'] .bitfun-nav-search-dialog__card {
+  box-shadow:
+    0 1px 0 color-mix(in srgb, #fff 4%, transparent),
+    0 14px 40px -12px rgba(0, 0, 0, 0.55);
 }
 
 @keyframes bitfun-nav-search-card-in {
-  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
+  from {
+    opacity: 0;
+    transform: translateY(-7px) scale(0.988);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 // ── Input row ────────────────────────────────────────────────────────────────
 
 .bitfun-nav-search-dialog__input-row {
-  padding: $size-gap-3;
+  padding: $size-gap-2;
   border-bottom: 1px solid var(--border-subtle);
   flex-shrink: 0;
+  background: var(--color-bg-scene);
 }
 
-// Search component — capsule style matching the nav trigger
+// Search component — capsule matches .bitfun-nav-panel__search-trigger
 .bitfun-nav-search-dialog__search {
   width: 100%;
 
   .search__wrapper {
     height: 32px;
+    min-height: 32px;
+    padding: 0 $size-gap-2;
+    gap: $size-gap-2;
+    border: none;
     border-radius: $size-radius-full;
-    background: var(--element-bg-soft);
+    background: var(--color-bg-scene);
     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-subtle) 65%, transparent);
+    transition:
+      background 0.2s ease,
+      box-shadow 0.2s ease;
 
     &:hover {
-      background: var(--element-bg-medium);
-      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 50%, transparent);
+      background: color-mix(in srgb, var(--color-bg-scene) 88%, var(--element-bg-medium));
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 55%, transparent);
     }
 
     &:focus-within {
-      background: var(--element-bg-medium);
-      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 65%, transparent);
+      background: color-mix(in srgb, var(--color-bg-scene) 82%, var(--element-bg-medium));
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 68%, transparent);
     }
   }
 
@@ -84,32 +100,63 @@
   }
 }
 
+@keyframes bitfun-nav-search-fade-rise {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 // ── Results ──────────────────────────────────────────────────────────────────
 
 .bitfun-nav-search-dialog__results {
   overflow-y: auto;
   flex: 1;
-  padding: $size-gap-1 0;
+  padding: $size-gap-1 $size-gap-2 $size-gap-2;
 
   &::-webkit-scrollbar {
-    width: 4px;
+    width: 3px;
   }
+
   &::-webkit-scrollbar-thumb {
-    background: var(--border-medium);
+    background: var(--border-subtle);
     border-radius: 2px;
   }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
 }
 
 .bitfun-nav-search-dialog__empty {
-  padding: $size-gap-4;
+  padding: $size-gap-4 $size-gap-2;
   text-align: center;
   color: var(--color-text-muted);
   font-size: $font-size-sm;
+  animation: bitfun-nav-search-fade-rise 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
 }
 
 // ── Groups ───────────────────────────────────────────────────────────────────
 
 .bitfun-nav-search-dialog__group {
+  animation: bitfun-nav-search-fade-rise 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
+
+  &:nth-of-type(1) {
+    animation-delay: 0.04s;
+  }
+
+  &:nth-of-type(2) {
+    animation-delay: 0.08s;
+  }
+
+  &:nth-of-type(3) {
+    animation-delay: 0.12s;
+  }
+
   & + & {
     margin-top: $size-gap-1;
     border-top: 1px solid var(--border-subtle);
@@ -118,13 +165,14 @@
 }
 
 .bitfun-nav-search-dialog__group-label {
-  padding: $size-gap-1 $size-gap-3;
-  font-size: $font-size-xs;
-  font-weight: 600;
+  padding: $size-gap-1 $size-gap-1 $size-gap-1 2px;
+  font-size: 10px;
+  font-weight: 700;
   color: var(--color-text-muted);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.06em;
   user-select: none;
+  opacity: 0.88;
 }
 
 // ── Result item ──────────────────────────────────────────────────────────────
@@ -134,13 +182,14 @@
   align-items: center;
   gap: $size-gap-2;
   width: 100%;
-  padding: 5px $size-gap-3;
+  padding: 6px $size-gap-2;
   border: none;
+  border-radius: 4px;
   background: transparent;
   cursor: pointer;
   text-align: left;
   color: var(--color-text-primary);
-  transition: background 0.08s ease;
+  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 
   &:hover {
     background: var(--element-bg-soft);
@@ -152,10 +201,17 @@
 }
 
 .bitfun-nav-search-dialog__item-icon {
-  color: var(--color-text-muted);
+  color: var(--color-text-primary);
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  opacity: 0.82;
+  transition: opacity 0.2s ease;
+
+  .bitfun-nav-search-dialog__item:hover &,
+  .bitfun-nav-search-dialog__item--active & {
+    opacity: 1;
+  }
 }
 
 .bitfun-nav-search-dialog__item-content {
@@ -183,6 +239,22 @@
 }
 
 // ── Trigger button (in NavPanel brand-header) ────────────────────────────────
+// Hover: (C) capsule “breath” via horizontal padding + (A) one-shot icon wiggle on inner span.
+
+@keyframes bitfun-search-trigger-icon-wiggle {
+  0% {
+    transform: rotate(0deg);
+  }
+  22% {
+    transform: rotate(-5.5deg);
+  }
+  52% {
+    transform: rotate(4deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
 
 .bitfun-nav-panel__search-trigger {
   display: flex;
@@ -192,37 +264,57 @@
   min-height: 32px;
   padding: 0 $size-gap-2;
   border: none;
-  // Capsule shape
   border-radius: $size-radius-full;
-  background: var(--element-bg-soft);
+  background: var(--color-bg-scene);
   box-shadow:
     inset 0 0 0 1px color-mix(in srgb, var(--border-subtle) 65%, transparent);
   cursor: text;
-  color: var(--color-text-muted);
+  color: var(--color-text-primary);
   font-size: $font-size-xs;
   text-align: left;
+  box-sizing: border-box;
   transition:
-    background 0.15s ease,
-    box-shadow 0.15s ease,
-    transform 0.12s ease,
-    color 0.15s ease;
+    background 0.2s ease,
+    box-shadow 0.2s ease,
+    color 0.2s ease,
+    padding 0.42s cubic-bezier(0.22, 1, 0.36, 1);
 
   &:hover {
-    background: var(--element-bg-medium);
+    padding: 0 calc(#{$size-gap-2} + 2px);
+    background: color-mix(in srgb, var(--color-bg-scene) 88%, var(--element-bg-medium));
     box-shadow:
-      inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 55%, transparent),
-      0 2px 8px rgba(0, 0, 0, 0.12),
-      0 1px 3px rgba(0, 0, 0, 0.08);
-    transform: translateY(-1px);
-    color: var(--color-text-secondary);
+      inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 55%, transparent);
+    color: var(--color-text-primary);
     cursor: text;
   }
 
   &:active {
-    transform: translateY(0);
+    padding: 0 calc(#{$size-gap-2} + 1px);
     box-shadow:
-      inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 45%, transparent),
-      0 1px 3px rgba(0, 0, 0, 0.08);
+      inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 45%, transparent);
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  &:hover &__icon {
+    transform: translateX(2px);
+  }
+
+  &__icon-inner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transform-origin: 50% 62%;
+  }
+
+  &:hover &__icon-inner {
+    animation: bitfun-search-trigger-icon-wiggle 0.58s cubic-bezier(0.34, 1.12, 0.52, 1) 1 both;
   }
 }
 
@@ -238,19 +330,45 @@
   }
 }
 
-.bitfun-nav-panel__search-trigger__kbd {
-  flex-shrink: 0;
-  font-size: 10px;
-  color: var(--color-text-muted);
-  background: var(--element-bg-subtle);
-  border: 1px solid var(--border-subtle);
-  border-radius: $size-radius-sm;
-  padding: 1px 5px;
-  line-height: 1.4;
-  opacity: 0.6;
-  transition: opacity 0.15s ease;
+@media (prefers-reduced-motion: reduce) {
+  .bitfun-nav-search-dialog__card,
+  .bitfun-nav-search-dialog__group,
+  .bitfun-nav-search-dialog__empty {
+    animation: none !important;
+  }
 
-  .bitfun-nav-panel__search-trigger:hover & {
-    opacity: 0.85;
+  .bitfun-nav-search-dialog__group {
+    animation-delay: 0s !important;
+    opacity: 1;
+    transform: none;
+  }
+
+  .bitfun-nav-search-dialog__empty {
+    opacity: 1;
+    transform: none;
+  }
+
+  .bitfun-nav-search-dialog__item {
+    transition: background 0.12s ease;
+  }
+
+  .bitfun-nav-panel__search-trigger {
+    transition:
+      background 0.15s ease,
+      box-shadow 0.15s ease,
+      color 0.15s ease;
+
+    &:hover,
+    &:active {
+      padding: 0 $size-gap-2;
+    }
+
+    &:hover .bitfun-nav-panel__search-trigger__icon {
+      transform: none;
+    }
+
+    &:hover .bitfun-nav-panel__search-trigger__icon-inner {
+      animation: none;
+    }
   }
 }
diff --git a/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.scss b/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.scss
index c2537cc1..bfa45ffc 100644
--- a/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.scss
+++ b/src/web-ui/src/app/components/NavPanel/components/BranchQuickSwitch.scss
@@ -95,8 +95,8 @@
     background: var(--color-accent-100);
     cursor: default;
 
-    .branch-quick-switch__item-icon { color: var(--color-accent-500); }
-    .branch-quick-switch__item-name { color: var(--color-accent-600); font-weight: 500; }
+    .branch-quick-switch__item-icon { color: var(--color-text-secondary); }
+    .branch-quick-switch__item-name { color: var(--color-text-primary); font-weight: 500; }
   }
 
   &--switching {
@@ -105,9 +105,9 @@
   }
 }
 
-.branch-quick-switch__item-icon  { flex-shrink: 0; color: var(--color-text-muted); }
+.branch-quick-switch__item-icon  { flex-shrink: 0; color: var(--color-text-primary); }
 .branch-quick-switch__item-name  { flex: 1; font-size: 12px; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.branch-quick-switch__item-check { flex-shrink: 0; color: var(--color-accent-500); }
+.branch-quick-switch__item-check { flex-shrink: 0; color: var(--color-text-primary); }
 
 .branch-quick-switch__spinner {
   animation: branch-quick-switch-spin 1s linear infinite;
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 d52a3025..0ac90872 100644
--- a/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
@@ -1,5 +1,20 @@
 import React, { useState, useCallback, useRef } from 'react';
-import { Settings, Info, MoreVertical, PictureInPicture2, SquareTerminal, Smartphone, Globe, Network, Layers, BarChart3 } from 'lucide-react';
+import {
+  Settings,
+  Info,
+  MoreVertical,
+  PictureInPicture2,
+  SquareTerminal,
+  Terminal,
+  Smartphone,
+  Globe,
+  Network,
+  Layers,
+  PanelsTopLeft,
+  BarChart3,
+  LineChart,
+  ChevronUp,
+} from 'lucide-react';
 import { Tooltip, Modal } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import { useSceneManager } from '../../../hooks/useSceneManager';
@@ -181,7 +196,14 @@ const PersistentFooterActions: React.FC = () => {
                 aria-expanded={menuOpen}
                 onClick={toggleMenu}
               >
-                <MoreVertical size={15} />
+                {menuOpen ? (
+                  <MoreVertical 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" />
+                    <ChevronUp size={15} className="bitfun-nav-panel__footer-btn-icon-swap-hover" />
+                  </span>
+                )}
               </button>
             </Tooltip>
 
@@ -253,7 +275,10 @@ const PersistentFooterActions: React.FC = () => {
               aria-pressed={showSceneNav && navSceneId === 'shell'}
               onClick={handleOpenShell}
             >
-              <SquareTerminal size={15} />
+              <span className="bitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
+                <SquareTerminal size={15} className="bitfun-nav-panel__footer-btn-icon-swap-default" />
+                <Terminal size={15} className="bitfun-nav-panel__footer-btn-icon-swap-hover" />
+              </span>
             </button>
           </Tooltip>
 
@@ -275,7 +300,10 @@ const PersistentFooterActions: React.FC = () => {
                   aria-expanded={multimodalOpen}
                   aria-haspopup="menu"
                 >
-                  <Layers size={15} />
+                  <span className="bitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
+                    <Layers size={15} className="bitfun-nav-panel__footer-btn-icon-swap-default" />
+                    <PanelsTopLeft size={15} className="bitfun-nav-panel__footer-btn-icon-swap-hover" />
+                  </span>
                 </button>
 
                 {multimodalOpen && (
@@ -319,13 +347,16 @@ const PersistentFooterActions: React.FC = () => {
               onClick={handleOpenInsights}
               aria-label={insightsTooltip}
             >
-              <BarChart3 size={15} aria-hidden="true" />
+              <span className="bitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
+                <BarChart3 size={15} className="bitfun-nav-panel__footer-btn-icon-swap-default" />
+                <LineChart size={15} className="bitfun-nav-panel__footer-btn-icon-swap-hover" />
+              </span>
             </button>
           </Tooltip>
         </div>
 
         <div className="bitfun-nav-panel__footer-right">
-          <NotificationButton className="bitfun-nav-panel__footer-btn" />
+          <NotificationButton className="bitfun-nav-panel__footer-btn" navFooterHoverIconSwap />
         </div>
       </div>
       <AboutDialog isOpen={showAbout} onClose={() => setShowAbout(false)} />
diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
index 22508acf..b4e13257 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
+++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss
@@ -28,7 +28,7 @@
     border: 1px dashed var(--border-subtle);
     border-radius: $size-radius-sm;
     background: transparent;
-    color: var(--color-text-muted);
+    color: var(--color-text-primary);
     font-size: 12px;
     cursor: pointer;
     flex: 1;
@@ -140,18 +140,19 @@
     opacity: 0.78;
     display: flex;
     align-items: center;
-    color: color-mix(in srgb, var(--color-text-primary) 72%, var(--color-text-muted));
-
-    &.is-code {
-      color: color-mix(in srgb, var(--color-primary) 70%, var(--color-text-primary));
-    }
+    color: var(--color-text-primary);
+    transform: scale(1);
+    transform-origin: center;
+    transition: opacity $motion-fast $easing-standard,
+                transform $motion-fast $easing-standard;
 
     &.is-cowork {
-      color: color-mix(in srgb, var(--color-accent-500) 70%, var(--color-text-primary));
+      color: var(--color-text-secondary);
     }
 
     &.is-running {
-      color: var(--color-primary);
+      color: var(--color-text-secondary);
+      transition: opacity $motion-fast $easing-standard;
       animation: bitfun-nav-session-spin 1s linear infinite;
     }
 
@@ -161,6 +162,11 @@
     }
   }
 
+  // 「助理会话」区块：行前导图标悬停微微放大（与顶部 __top-action-icon-slot 的 1.07 一致；运行中 Loader 仅用旋转动画）
+  &__items--session-blocks &__inline-item:hover &__inline-item-icon:not(.is-running) {
+    transform: scale(1.07);
+  }
+
   &__inline-item-main {
     flex: 1;
     min-width: 0;
@@ -237,7 +243,7 @@
     border: none;
     border-radius: 4px;
     background: transparent;
-    color: var(--color-text-muted);
+    color: var(--color-text-primary);
     cursor: pointer;
     transition: color $motion-fast $easing-standard,
                 background $motion-fast $easing-standard;
@@ -328,8 +334,8 @@
     }
 
     .bitfun-input-container:focus-within {
-      border-color: color-mix(in srgb, var(--color-primary) 65%, var(--border-subtle));
-      box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
+      border-color: color-mix(in srgb, var(--color-text-primary) 35%, var(--border-subtle));
+      box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text-primary) 12%, transparent);
     }
   }
 
@@ -343,7 +349,7 @@
     border: none;
     border-radius: 4px;
     background: transparent;
-    color: var(--color-text-muted);
+    color: var(--color-text-primary);
     font-size: 11px;
     cursor: pointer;
     width: 100%;
@@ -351,8 +357,8 @@
                 background $motion-fast $easing-standard;
 
     &:hover {
-      color: var(--color-primary);
-      background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+      color: var(--color-text-primary);
+      background: var(--element-bg-soft);
     }
   }
 
@@ -373,7 +379,7 @@
     border: none;
     border-radius: 4px;
     background: transparent;
-    color: var(--color-text-muted);
+    color: var(--color-text-primary);
     cursor: pointer;
     flex-shrink: 0;
     transition: color $motion-fast $easing-standard,
@@ -479,4 +485,12 @@
     animation: none;
     opacity: 0.8;
   }
+
+  .bitfun-nav-panel__items--session-blocks .bitfun-nav-panel__inline-item:hover .bitfun-nav-panel__inline-item-icon:not(.is-running) {
+    transform: scale(1);
+  }
+
+  .bitfun-nav-panel__items--session-blocks .bitfun-nav-panel__inline-item-icon:not(.is-running) {
+    transition: opacity $motion-fast $easing-standard;
+  }
 }
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 69b29319..f653a4f1 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
@@ -50,7 +50,7 @@
     border: none;
     border-radius: 999px;
     background: transparent;
-    color: var(--color-text-muted);
+    color: var(--color-text-primary);
     cursor: pointer;
     transition: color $motion-fast $easing-standard,
                 background $motion-fast $easing-standard;
@@ -232,7 +232,7 @@
     flex-shrink: 0;
     border-radius: 50%;
     background: color-mix(in srgb, var(--color-accent-500) 22%, transparent);
-    color: var(--color-accent-400);
+    color: var(--color-text-primary);
     overflow: hidden;
 
     .bitfun-nav-panel__workspace-item-avatar-letter {
@@ -254,7 +254,7 @@
       inset: 0;
       opacity: 0;
       transform: scale(0.7);
-      color: var(--color-accent-400);
+      color: var(--color-text-primary);
 
       svg {
         transition: transform $motion-fast $easing-standard;
@@ -274,7 +274,7 @@
     width: 14px;
     height: 14px;
     flex-shrink: 0;
-    color: var(--color-accent-500);
+    color: var(--color-text-primary);
     opacity: 0.85;
   }
 
@@ -383,7 +383,7 @@
     padding: 1px 6px;
     border-radius: 999px;
     background: color-mix(in srgb, var(--color-accent-200) 88%, transparent);
-    color: var(--color-accent-500);
+    color: var(--color-text-secondary);
     font-size: 10px;
     font-weight: 700;
     line-height: 1.4;
@@ -400,7 +400,7 @@
     padding: 1px 6px;
     border-radius: 999px;
     background: color-mix(in srgb, var(--element-bg-medium) 75%, transparent);
-    color: var(--color-text-muted);
+    color: var(--color-text-primary);
     font-size: 10px;
     transition: max-width $motion-fast $easing-standard,
                 padding $motion-fast $easing-standard,
@@ -435,7 +435,7 @@
     border: none;
     border-radius: 6px;
     background: transparent;
-    color: var(--color-text-muted);
+    color: var(--color-text-primary);
     cursor: pointer;
     transition: color $motion-fast $easing-standard,
                 background $motion-fast $easing-standard;
@@ -676,7 +676,7 @@
     flex-shrink: 0;
     border-radius: 50%;
     background: color-mix(in srgb, var(--color-accent-500) 22%, transparent);
-    color: var(--color-accent-400);
+    color: var(--color-text-primary);
     overflow: hidden;
   }
 
@@ -699,7 +699,7 @@
     inset: 0;
     opacity: 0;
     transform: scale(0.7);
-    color: var(--color-accent-400);
+    color: var(--color-text-primary);
     transition: opacity $motion-fast $easing-standard,
                 transform $motion-fast $easing-standard;
 
@@ -745,7 +745,7 @@
     padding: 1px 6px;
     border-radius: 999px;
     background: color-mix(in srgb, var(--color-accent-200) 88%, transparent);
-    color: var(--color-accent-500);
+    color: var(--color-text-secondary);
     font-size: 10px;
     font-weight: 700;
     line-height: 1.4;
@@ -773,7 +773,7 @@
     border: none;
     border-radius: 6px;
     background: transparent;
-    color: var(--color-text-muted);
+    color: var(--color-text-primary);
     cursor: pointer;
     transition: color $motion-fast $easing-standard,
                 background $motion-fast $easing-standard;
diff --git a/src/web-ui/src/app/components/SceneBar/SceneBar.scss b/src/web-ui/src/app/components/SceneBar/SceneBar.scss
index cc3fdc91..9c42458e 100644
--- a/src/web-ui/src/app/components/SceneBar/SceneBar.scss
+++ b/src/web-ui/src/app/components/SceneBar/SceneBar.scss
@@ -66,7 +66,9 @@ $_tab-v-margin: 6px;   // symmetric top/bottom gap inside SceneBar
   font-size: $font-size-sm;
   font-weight: 400;
   white-space: nowrap;
-  background: var(--element-bg-soft);
+  // Slightly lift off --color-bg-primary so tabs never disappear into the chrome
+  // (dark presets often set tertiary === primary; mixing secondary fixes that).
+  background: color-mix(in srgb, var(--color-bg-secondary) 44%, var(--color-bg-primary));
   // Full radius — tab floats symmetrically inside the bar
   border-radius: $size-radius-sm;
   transition: color $motion-fast $easing-standard,
@@ -87,22 +89,15 @@ $_tab-v-margin: 6px;   // symmetric top/bottom gap inside SceneBar
 
   &:hover {
     color: var(--color-text-secondary);
-    background: var(--element-bg-medium);
+    background: color-mix(in srgb, var(--color-bg-secondary) 68%, var(--color-bg-primary));
 
     .bitfun-scene-tab__close {
       opacity: 1;
     }
   }
 
-  // Single tab: no default background, but hover still shows
   &:only-child,
   &:only-child#{&}--active {
-    background: transparent;
-    cursor: default;
-  }
-
-  &:only-child:hover {
-    background: transparent;
     cursor: default;
   }
 
@@ -231,6 +226,50 @@ $_tab-v-margin: 6px;   // symmetric top/bottom gap inside SceneBar
   opacity: 0.94;
 }
 
+// Light themes: inactive tabs use tiered bg.* tokens; active is a gentle step brighter
+// (not full scene white + cast shadow) so it does not read as a separate floating card.
+:root[data-theme-type='light'] .bitfun-scene-tab {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-secondary);
+
+  &:hover {
+    background: var(--color-bg-quaternary);
+    color: var(--color-text-secondary);
+  }
+
+  &--active {
+    color: var(--color-text-primary);
+    // Softer than full scene white + drop shadow: stays in the same family as idle tabs
+    background: color-mix(in srgb, var(--color-bg-scene) 72%, var(--color-bg-tertiary));
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-subtle) 42%, transparent);
+
+    &:hover {
+      background: color-mix(in srgb, var(--color-bg-scene) 76%, var(--color-bg-tertiary));
+    }
+  }
+
+  // Single tab: still a visible chip when inactive; when active, align with scene card.
+  &:only-child:not(.bitfun-scene-tab--active) {
+    background: var(--color-bg-tertiary);
+    box-shadow: none;
+    color: var(--color-text-secondary);
+  }
+
+  &:only-child.bitfun-scene-tab--active {
+    background: color-mix(in srgb, var(--color-bg-scene) 72%, var(--color-bg-tertiary));
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-subtle) 42%, transparent);
+    color: var(--color-text-primary);
+
+    &:hover {
+      background: color-mix(in srgb, var(--color-bg-scene) 76%, var(--color-bg-tertiary));
+    }
+  }
+
+  &:only-child:not(.bitfun-scene-tab--active):hover {
+    background: var(--color-bg-quaternary);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .bitfun-scene-tab {
     transition: none;
diff --git a/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx b/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx
index c9dc60b7..f9620536 100644
--- a/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx
+++ b/src/web-ui/src/app/components/TitleBar/NotificationButton.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useRef, useEffect, useState } from 'react';
-import { Bell, BellDot } from 'lucide-react';
+import { Bell, BellDot, BellRing } from 'lucide-react';
 import { Tooltip } from '@/component-library';
 import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
 import {
@@ -18,9 +18,13 @@ import './NotificationButton.scss';
 
 interface NotificationButtonProps {
   className?: string;
+  navFooterHoverIconSwap?: boolean;
 }
 
-const NotificationButton: React.FC<NotificationButtonProps> = ({ className = '' }) => {
+const NotificationButton: React.FC<NotificationButtonProps> = ({
+  className = '',
+  navFooterHoverIconSwap = false,
+}) => {
   const { t } = useI18n('common');
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const [tooltipOffset, setTooltipOffset] = useState(0);
@@ -51,6 +55,7 @@ const NotificationButton: React.FC<NotificationButtonProps> = ({ className = ''
         'bitfun-notification-btn',
         activeNotification ? 'bitfun-notification-btn--has-progress' : '',
         activeNotification?.variant === 'loading' ? 'bitfun-notification-btn--loading' : '',
+        navFooterHoverIconSwap && !activeNotification ? 'bitfun-notification-btn--nav-hover-icon' : '',
         className,
       ].filter(Boolean).join(' ')}
       onClick={() => notificationService.toggleCenter()}
@@ -110,6 +115,21 @@ const NotificationButton: React.FC<NotificationButtonProps> = ({ className = ''
             </div>
           </div>
         </>
+      ) : navFooterHoverIconSwap ? (
+        unreadCount > 0 ? (
+          <span className="bitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
+            <BellDot
+              size={15}
+              className="bitfun-notification-btn__icon--has-message bitfun-nav-panel__footer-btn-icon-swap-default"
+            />
+            <BellRing size={15} className="bitfun-nav-panel__footer-btn-icon-swap-hover" />
+          </span>
+        ) : (
+          <span className="bitfun-nav-panel__footer-btn-icon-swap" aria-hidden="true">
+            <Bell size={15} className="bitfun-nav-panel__footer-btn-icon-swap-default" />
+            <BellRing size={15} className="bitfun-nav-panel__footer-btn-icon-swap-hover" />
+          </span>
+        )
       ) : (
         unreadCount > 0
           ? <BellDot size={14} className="bitfun-notification-btn__icon--has-message" />
diff --git a/src/web-ui/src/app/scenes/SceneViewport.scss b/src/web-ui/src/app/scenes/SceneViewport.scss
index 65e6aa6f..7fc70e9e 100644
--- a/src/web-ui/src/app/scenes/SceneViewport.scss
+++ b/src/web-ui/src/app/scenes/SceneViewport.scss
@@ -10,7 +10,9 @@
   overflow: hidden;
   min-height: 0;
   border-radius: $size-radius-base;
-  border: 1px solid var(--border-subtle);
+  border-style: solid;
+  border-width: var(--scene-viewport-border-width, 1px);
+  border-color: var(--border-subtle);
   background: var(--color-bg-scene);
   // Soft lift off workbench — layered shadow, kept subtle
   box-shadow:
diff --git a/src/web-ui/src/app/scenes/profile/views/NurseryView.scss b/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
index f9aa7362..cbc8bfcc 100644
--- a/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
+++ b/src/web-ui/src/app/scenes/profile/views/NurseryView.scss
@@ -2818,7 +2818,8 @@ $acp-content-top: clamp(40px, 4.5vh, 52px);
   display: flex;
   align-items: flex-start;
   gap: $size-gap-3;
-  padding: $acp-content-top 0 $size-gap-5;
+  // Match .aqi and .acp-sessions-area horizontal inset (--acp-left-inline-pad on .acp-layout__left)
+  padding: $acp-content-top var(--acp-left-inline-pad) $size-gap-5;
   flex-shrink: 0;
 
   &__info {
diff --git a/src/web-ui/src/app/scenes/settings/SettingsNav.scss b/src/web-ui/src/app/scenes/settings/SettingsNav.scss
index b85d1192..c6e554cd 100644
--- a/src/web-ui/src/app/scenes/settings/SettingsNav.scss
+++ b/src/web-ui/src/app/scenes/settings/SettingsNav.scss
@@ -39,27 +39,44 @@
     padding: 0 $size-gap-3 $size-gap-2;
   }
 
-  /** Component-library `Search` — align with nav tokens + subtle focus scale */
+  /** Component-library `Search` — same capsule as MainNav (.bitfun-nav-search-dialog__search) */
   &__search-field.search {
     width: 100%;
 
     .search__wrapper {
-      border-color: var(--border-subtle);
-      background: var(--element-bg-soft);
-      border-radius: $size-radius-base;
-      transition: border-color $motion-fast $easing-standard,
-                  box-shadow $motion-fast $easing-standard,
-                  transform $motion-fast $easing-standard;
+      height: 32px;
+      min-height: 32px;
+      padding: 0 $size-gap-2;
+      gap: $size-gap-2;
+      border: none;
+      border-radius: $size-radius-full;
+      background: var(--color-bg-scene);
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-subtle) 65%, transparent);
+      transition:
+        background 0.2s ease,
+        box-shadow 0.2s ease;
+    }
+
+    .search__wrapper:hover {
+      background: color-mix(in srgb, var(--color-bg-scene) 88%, var(--element-bg-medium));
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 55%, transparent);
     }
 
-    &.search--focused:not(.search--disabled) .search__wrapper {
-      border-color: var(--color-primary);
-      box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent);
-      transform: scale(1.01);
+    .search__wrapper:focus-within {
+      background: color-mix(in srgb, var(--color-bg-scene) 82%, var(--element-bg-medium));
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 68%, transparent);
     }
 
-    &.search--focused:not(.search--disabled) .search__prefix .search__icon {
-      color: var(--color-primary);
+    &.search .search__input {
+      font-size: $font-size-sm;
+
+      &::placeholder {
+        color: var(--color-text-disabled);
+      }
+
+      &:focus::placeholder {
+        color: color-mix(in srgb, var(--color-text-disabled) 72%, transparent);
+      }
     }
   }
 
@@ -236,9 +253,6 @@
     &__search-field.search .search__wrapper {
       transition: none;
     }
-    &__search-field.search.search--focused:not(.search--disabled) .search__wrapper {
-      transform: none;
-    }
     &__search-result-item { transition: none; }
   }
 }
diff --git a/src/web-ui/src/app/scenes/skills/SkillsScene.scss b/src/web-ui/src/app/scenes/skills/SkillsScene.scss
index 2ec0bffd..7a5dd1d8 100644
--- a/src/web-ui/src/app/scenes/skills/SkillsScene.scss
+++ b/src/web-ui/src/app/scenes/skills/SkillsScene.scss
@@ -1,4 +1,5 @@
 @use '../../../component-library/styles/tokens' as *;
+@use '../../../component-library/styles/btn-primary-tokens.scss' as btn-primary;
 
 // ── Layout variables (mirrors acp-layout in NurseryView.scss) ─────────────────
 $skills-gutter:      clamp(36px, 5.5vw, 72px);
@@ -164,23 +165,30 @@ $skills-content-top: clamp(36px, 4.5vh, 48px);
   padding: 0 $size-gap-3;
   border: none;
   border-radius: $size-radius-base;
-  background: color-mix(in srgb, var(--color-accent-500) 10%, var(--element-bg-soft));
-  color: var(--color-text-primary);
+  @include btn-primary.btn-primary-surface-default;
   font-size: $font-size-xs;
   font-weight: $font-weight-medium;
   cursor: pointer;
   transition:
     background $motion-fast $easing-standard,
-    color $motion-fast $easing-standard;
+    color $motion-fast $easing-standard,
+    box-shadow $motion-fast $easing-standard;
   white-space: nowrap;
 
   &:hover {
-    background: color-mix(in srgb, var(--color-accent-500) 16%, var(--element-bg-medium));
-    color: var(--color-text-primary);
+    @include btn-primary.btn-primary-surface-hover;
+  }
+
+  &:active {
+    @include btn-primary.btn-primary-surface-active;
   }
 
   &:focus-visible {
-    outline: 2px solid var(--color-accent-500);
+    outline: 2px solid color-mix(
+      in srgb,
+      var(--btn-primary-color, var(--color-accent-500)) 55%,
+      transparent
+    );
     outline-offset: 2px;
   }
 }
diff --git a/src/web-ui/src/app/scenes/skills/hooks/useInstalledSkills.ts b/src/web-ui/src/app/scenes/skills/hooks/useInstalledSkills.ts
index 8a8ff716..ea44b0b9 100644
--- a/src/web-ui/src/app/scenes/skills/hooks/useInstalledSkills.ts
+++ b/src/web-ui/src/app/scenes/skills/hooks/useInstalledSkills.ts
@@ -3,7 +3,7 @@ import { open } from '@tauri-apps/plugin-dialog';
 import { useTranslation } from 'react-i18next';
 import { configAPI } from '@/infrastructure/api';
 import type { SkillInfo, SkillLevel, SkillValidationResult } from '@/infrastructure/config/types';
-import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
+import { useWorkspaceManagerSync } from '@/infrastructure/hooks/useWorkspaceManagerSync';
 import { useNotification } from '@/shared/notification-system';
 import { createLogger } from '@/shared/utils/logger';
 import type { InstalledFilter } from '../skillsSceneStore';
@@ -18,7 +18,7 @@ interface UseInstalledSkillsOptions {
 export function useInstalledSkills({ searchQuery, activeFilter }: UseInstalledSkillsOptions) {
   const { t } = useTranslation('scenes/skills');
   const notification = useNotification();
-  const { workspacePath, hasWorkspace } = useCurrentWorkspace();
+  const { workspacePath, hasWorkspace } = useWorkspaceManagerSync();
 
   const [skills, setSkills] = useState<SkillInfo[]>([]);
   const [loading, setLoading] = useState(true);
diff --git a/src/web-ui/src/app/scenes/skills/hooks/useSkillMarket.ts b/src/web-ui/src/app/scenes/skills/hooks/useSkillMarket.ts
index eb4d3680..edd65f39 100644
--- a/src/web-ui/src/app/scenes/skills/hooks/useSkillMarket.ts
+++ b/src/web-ui/src/app/scenes/skills/hooks/useSkillMarket.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { configAPI } from '@/infrastructure/api';
 import type { SkillMarketItem } from '@/infrastructure/config/types';
-import { useCurrentWorkspace } from '@/infrastructure/contexts/WorkspaceContext';
+import { useWorkspaceManagerSync } from '@/infrastructure/hooks/useWorkspaceManagerSync';
 import { useNotification } from '@/shared/notification-system';
 import { createLogger } from '@/shared/utils/logger';
 
@@ -26,7 +26,7 @@ export function useSkillMarket({
 }: UseSkillMarketOptions) {
   const { t } = useTranslation('scenes/skills');
   const notification = useNotification();
-  const { hasWorkspace, workspacePath } = useCurrentWorkspace();
+  const { hasWorkspace, workspacePath } = useWorkspaceManagerSync();
 
   const [marketSkills, setMarketSkills] = useState<SkillMarketItem[]>([]);
   const [marketLoading, setMarketLoading] = useState(true);
diff --git a/src/web-ui/src/component-library/components/Badge/Badge.scss b/src/web-ui/src/component-library/components/Badge/Badge.scss
index ebd44122..e341c79a 100644
--- a/src/web-ui/src/component-library/components/Badge/Badge.scss
+++ b/src/web-ui/src/component-library/components/Badge/Badge.scss
@@ -25,7 +25,7 @@
 
   &--accent {
     background: var(--color-accent-200);
-    color: var(--color-accent-500);
+    color: var(--color-text-secondary);
   }
 
   &--purple {
diff --git a/src/web-ui/src/component-library/components/Button/Button.scss b/src/web-ui/src/component-library/components/Button/Button.scss
index 778e46ff..d9ba9d7b 100644
--- a/src/web-ui/src/component-library/components/Button/Button.scss
+++ b/src/web-ui/src/component-library/components/Button/Button.scss
@@ -1,5 +1,6 @@
 @use '../../styles/tokens.scss' as tokens;
 @use '../../styles/_extended-mixins.scss' as mixins;
+@use '../../styles/btn-primary-tokens.scss' as btn-primary;
 
 .btn {
   display: inline-flex;
@@ -60,20 +61,22 @@
   }
 
   &-primary {
-    background: var(--color-accent-200, rgba(96, 165, 250, 0.20));
-    color: var(--color-accent-600, #3b82f6);
+    @include btn-primary.btn-primary-surface-default;
 
     &:hover:not(:disabled) {
-      background: var(--color-accent-300, rgba(96, 165, 250, 0.30));
-      color: var(--color-text-primary, #ffffff);
+      @include btn-primary.btn-primary-surface-hover;
     }
 
     &:active:not(:disabled) {
-      background: var(--color-accent-200, rgba(96, 165, 250, 0.24));
+      @include btn-primary.btn-primary-surface-active;
     }
 
     &:focus-visible {
-      outline-color: rgba(96, 165, 250, 0.6);
+      outline-color: color-mix(
+        in srgb,
+        var(--btn-primary-color, var(--color-accent-500, #60a5fa)) 55%,
+        transparent
+      );
     }
   }
 
diff --git a/src/web-ui/src/component-library/components/FilterPill/FilterPill.scss b/src/web-ui/src/component-library/components/FilterPill/FilterPill.scss
index defda174..9696dbb4 100644
--- a/src/web-ui/src/component-library/components/FilterPill/FilterPill.scss
+++ b/src/web-ui/src/component-library/components/FilterPill/FilterPill.scss
@@ -31,17 +31,17 @@
   }
 
   &--active {
-    background: $git-color-branch-bg;
+    background: var(--git-color-branch-bg, #{$git-color-branch-bg});
     border-color: transparent;
-    color: $git-color-branch;
+    color: var(--git-color-branch, #{$git-color-branch});
 
     .v-filter-pill__count {
-      background: rgba(59, 130, 246, 0.15);
-      color: $git-color-branch;
+      background: color-mix(in srgb, var(--git-color-branch, #{$git-color-branch}) 22%, transparent);
+      color: var(--git-color-branch, #{$git-color-branch});
     }
 
     &:hover:not(:disabled) {
-      background: $git-color-branch-bg-hover;
+      background: var(--git-color-branch-bg-hover, #{$git-color-branch-bg-hover});
     }
   }
 
diff --git a/src/web-ui/src/component-library/components/Markdown/Markdown.scss b/src/web-ui/src/component-library/components/Markdown/Markdown.scss
index 10822294..604f502c 100644
--- a/src/web-ui/src/component-library/components/Markdown/Markdown.scss
+++ b/src/web-ui/src/component-library/components/Markdown/Markdown.scss
@@ -250,16 +250,16 @@
   border-radius: 8px;
   background: var(--markdown-code-bg-elevated);
   border: 1px solid var(--border-color, rgba(255, 255, 255, 0.09));
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.22);
+  box-shadow: none;
   overflow: hidden;
   position: relative;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color 0.2s ease;
 }
 
 
 .markdown-renderer .code-block-wrapper:hover {
   border-color: color-mix(in srgb, var(--border-color, rgba(255, 255, 255, 0.09)) 70%, var(--primary-color, #3b82f6) 30%);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 28px rgba(0, 0, 0, 0.26);
+  box-shadow: none;
 }
 
 
@@ -378,15 +378,15 @@
   border: 1px solid var(--border-color, rgba(255, 255, 255, 0.09));
   border-radius: 8px;
   margin: 0.65rem 0;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+  box-shadow: none;
   position: relative;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color 0.2s ease;
 }
 
 
 .markdown-renderer pre:hover {
   border-color: color-mix(in srgb, var(--border-color, rgba(255, 255, 255, 0.09)) 75%, var(--primary-color, #3b82f6) 25%);
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
+  box-shadow: none;
 }
 
 
diff --git a/src/web-ui/src/component-library/components/Switch/Switch.scss b/src/web-ui/src/component-library/components/Switch/Switch.scss
index 2f1df81a..b861560f 100644
--- a/src/web-ui/src/component-library/components/Switch/Switch.scss
+++ b/src/web-ui/src/component-library/components/Switch/Switch.scss
@@ -56,8 +56,8 @@
     pointer-events: none;
 
     &--checked {
-      background: rgba(99, 102, 241, 0.1);
-      border-color: var(--color-accent-500);
+      background: var(--color-accent-100);
+      border-color: var(--color-accent-300);
     }
   }
 
@@ -89,18 +89,18 @@
   &__loading {
     width: 10px;
     height: 10px;
-    color: tokens.$color-accent-500;
+    color: var(--color-accent-500, #{tokens.$color-accent-500});
     animation: bitfun-switch-spin 1s linear infinite;
   }
 
   &__input:checked + &__track &__thumb {
     left: calc(100% - 18px);
-    background: var(--color-accent-500);
-    border-color: var(--color-accent-500);
+    background: var(--btn-primary-bg, var(--color-accent-500));
+    border-color: var(--btn-primary-bg, var(--color-accent-500));
   }
 
   &__input:focus-visible + &__track {
-    outline: 2px solid tokens.$color-accent-400;
+    outline: 2px solid var(--color-accent-400, #{tokens.$color-accent-400});
     outline-offset: 2px;
   }
 
@@ -114,13 +114,13 @@
   }
 
   &:hover:not(&--disabled):not(&--loading) &__input:checked + &__track {
-    background: rgba(99, 102, 241, 0.15);
+    background: var(--color-accent-200);
     border-color: var(--color-accent-400);
   }
 
   &:hover:not(&--disabled):not(&--loading) &__input:checked + &__track &__thumb {
-    background: var(--color-accent-400);
-    border-color: var(--color-accent-400);
+    background: var(--btn-primary-hover-bg, var(--color-accent-400));
+    border-color: var(--btn-primary-hover-bg, var(--color-accent-400));
   }
 
   &__input:active:not(:disabled) + &__track {
diff --git a/src/web-ui/src/component-library/components/Tag/Tag.scss b/src/web-ui/src/component-library/components/Tag/Tag.scss
index 1e5cb12a..3c06f924 100644
--- a/src/web-ui/src/component-library/components/Tag/Tag.scss
+++ b/src/web-ui/src/component-library/components/Tag/Tag.scss
@@ -27,11 +27,11 @@
   }
 
   &--blue {
-    background: rgba(59, 130, 246, 0.14);
-    color: tokens.$color-accent-500;
+    background: var(--color-accent-200);
+    color: var(--color-text-secondary);
 
     &:hover {
-      background: rgba(59, 130, 246, 0.2);
+      background: var(--color-accent-300);
     }
   }
 
diff --git a/src/web-ui/src/component-library/preview/main.tsx b/src/web-ui/src/component-library/preview/main.tsx
index c945b8ad..54df286f 100644
--- a/src/web-ui/src/component-library/preview/main.tsx
+++ b/src/web-ui/src/component-library/preview/main.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { PreviewApp } from './PreviewApp';
 import { I18nProvider } from '@/infrastructure/i18n';
+import { WorkspaceProvider } from '@/infrastructure/contexts/WorkspaceContext';
 import { themeService } from '@/infrastructure/theme';
 import './preview.css';
 import './flowchat-cards-preview.css';
@@ -17,7 +18,9 @@ void themeService.initialize();
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <I18nProvider>
-      <PreviewApp />
+      <WorkspaceProvider>
+        <PreviewApp />
+      </WorkspaceProvider>
     </I18nProvider>
   </React.StrictMode>
 );
\ No newline at end of file
diff --git a/src/web-ui/src/component-library/styles/btn-primary-tokens.scss b/src/web-ui/src/component-library/styles/btn-primary-tokens.scss
new file mode 100644
index 00000000..96f5e9f6
--- /dev/null
+++ b/src/web-ui/src/component-library/styles/btn-primary-tokens.scss
@@ -0,0 +1,21 @@
+// Surfaces that must match theme `components.button.primary`.
+// ThemeService sets --btn-primary-* on :root when the theme includes components.button.
+// Fallbacks mirror the legacy accent-tint primary button when those vars are absent.
+
+@mixin btn-primary-surface-default {
+  background: var(--btn-primary-bg, var(--color-accent-200, rgba(96, 165, 250, 0.2)));
+  color: var(--btn-primary-color, var(--color-accent-600, #3b82f6));
+  box-shadow: var(--btn-primary-shadow, none);
+}
+
+@mixin btn-primary-surface-hover {
+  background: var(--btn-primary-hover-bg, var(--color-accent-300, rgba(96, 165, 250, 0.3)));
+  color: var(--btn-primary-hover-color, var(--color-text-primary, #ffffff));
+  box-shadow: var(--btn-primary-hover-shadow, none);
+}
+
+@mixin btn-primary-surface-active {
+  background: var(--btn-primary-active-bg, var(--color-accent-200, rgba(96, 165, 250, 0.24)));
+  color: var(--btn-primary-active-color, var(--color-text-primary, #ffffff));
+  box-shadow: var(--btn-primary-active-shadow, none);
+}
diff --git a/src/web-ui/src/component-library/styles/flowchat-markdown-code-vars.scss b/src/web-ui/src/component-library/styles/flowchat-markdown-code-vars.scss
index 3ea65659..33af4183 100644
--- a/src/web-ui/src/component-library/styles/flowchat-markdown-code-vars.scss
+++ b/src/web-ui/src/component-library/styles/flowchat-markdown-code-vars.scss
@@ -17,7 +17,7 @@
   --flowchat-md-pre-border: rgba(255, 255, 255, 0.1);
   --flowchat-md-pre-border-style: dashed;
   --flowchat-md-pre-radius: 4px;
-  --flowchat-md-pre-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  --flowchat-md-pre-shadow: none;
   --flowchat-md-pre-padding: 1.25rem;
   --flowchat-md-pre-font-size: 0.85rem;
   --flowchat-md-pre-hover-border: rgba(255, 255, 255, 0.15);
@@ -45,7 +45,7 @@
 
   --flowchat-md-pre-bg: #f6f8fa;
   --flowchat-md-pre-border: rgba(0, 0, 0, 0.1);
-  --flowchat-md-pre-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
+  --flowchat-md-pre-shadow: none;
   --flowchat-md-pre-hover-border: rgba(0, 0, 0, 0.15);
   --flowchat-md-pre-hover-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
   --flowchat-md-pre-code-fg: var(--color-text-primary, #24292f);
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.scss b/src/web-ui/src/flow_chat/components/ChatInput.scss
index a1ffd4af..64760e95 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.scss
+++ b/src/web-ui/src/flow_chat/components/ChatInput.scss
@@ -466,12 +466,12 @@
     }
   }
   
-  &__expand-button {
+  &__expand-button.icon-btn {
     position: absolute;
     top: 8px;
     right: 8px;
-    width: 20px;
-    height: 20px;
+    width: 22px;
+    height: 22px;
     border: none;
     border-radius: 50%;
     background: transparent;
@@ -480,18 +480,45 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
-    opacity: 0.4;
+    opacity: 1;
+    transform: scale(1);
+    transform-origin: center;
+    transition:
+      transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1),
+      background 0.2s ease,
+      color 0.2s ease,
+      box-shadow 0.2s ease;
     animation: bitfun-stacked-reveal 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0.24s both;
-    
-    &:hover {
-      opacity: 1;
+    box-shadow: none;
+
+    svg {
+      opacity: 0.5;
+      transition:
+        opacity 0.2s ease,
+        transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
+    }
+
+    &:hover:not(:disabled) {
+      transform: scale(1.14);
       color: var(--color-accent-400);
       background: var(--color-accent-100);
+      box-shadow:
+        inset 0 0 0 1px color-mix(in srgb, var(--color-accent-400) 22%, transparent),
+        0 2px 10px color-mix(in srgb, var(--color-accent-400) 12%, transparent);
+
+      svg {
+        opacity: 1;
+        transform: scale(1.12);
+      }
     }
-    
-    &:active {
-      transform: scale(0.9);
+
+    &:active:not(:disabled) {
+      transform: scale(1.02);
+      transition-duration: 0.1s;
+
+      svg {
+        transform: scale(1);
+      }
     }
   }
   
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.tsx b/src/web-ui/src/flow_chat/components/ChatInput.tsx
index 3719c9e6..02ad9f80 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInput.tsx
@@ -5,7 +5,7 @@
 
 import React, { useRef, useCallback, useEffect, useReducer, useState, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { ArrowUp, Image, ChevronsUp, ChevronsDown, RotateCcw, Plus, X, Sparkles, Loader2, ChevronRight, Files, MessageSquarePlus } from 'lucide-react';
+import { ArrowUp, Image, Maximize2, Minimize2, RotateCcw, Plus, X, Sparkles, Loader2, ChevronRight, Files, MessageSquarePlus } from 'lucide-react';
 import { ContextDropZone, useContextStore } from '../../shared/context-system';
 import { useActiveSessionState } from '../hooks/useActiveSessionState';
 import { RichTextInput, type MentionState } from './RichTextInput';
@@ -1816,10 +1816,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({
               className="bitfun-chat-input__expand-button"
               variant="ghost"
               size="xs"
+              shape="circle"
               onClick={toggleExpand}
               tooltip={inputState.isExpanded ? t('input.collapseInput') : t('input.expandInput')}
             >
-              {inputState.isExpanded ? <ChevronsDown size={14} /> : <ChevronsUp size={14} />}
+              {inputState.isExpanded ? <Minimize2 size={14} /> : <Maximize2 size={14} />}
             </IconButton>
             <div className="bitfun-chat-input__actions">
               <div className="bitfun-chat-input__actions-left">
diff --git a/src/web-ui/src/flow_chat/components/ScrollToBottomButton.scss b/src/web-ui/src/flow_chat/components/ScrollToBottomButton.scss
index 2e22d022..752045af 100644
--- a/src/web-ui/src/flow_chat/components/ScrollToBottomButton.scss
+++ b/src/web-ui/src/flow_chat/components/ScrollToBottomButton.scss
@@ -11,24 +11,24 @@
   align-items: center;
   justify-content: center;
   
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   padding: 0;
-  
-  // Glass-like translucent background
-  background: rgba(20, 20, 30, 0.4);
-  color: rgba(96, 165, 250, 0.9);
-  
-  border: 1px solid rgba(96, 165, 250, 0.3);
-  border-radius: 8px;
-  
-  // Frosted glass effect
-  backdrop-filter: blur(12px) saturate(1.2);
-  -webkit-backdrop-filter: blur(12px) saturate(1.2);
-  
-  box-shadow: 
-    0 4px 12px rgba(0, 0, 0, 0.25),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+
+  // Theme-aware surface so the control separates from the transcript; icon uses primary text (SVG stroke)
+  background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
+  color: var(--color-text-primary);
+
+  border: 2px solid var(--color-text-primary);
+  border-radius: 10px;
+
+  backdrop-filter: blur(14px) saturate(1.15);
+  -webkit-backdrop-filter: blur(14px) saturate(1.15);
+
+  box-shadow:
+    0 4px 18px rgba(0, 0, 0, 0.38),
+    0 0 0 1px color-mix(in srgb, var(--color-text-primary) 28%, transparent),
+    inset 0 1px 0 color-mix(in srgb, var(--color-text-primary) 12%, transparent);
   
   cursor: pointer;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
@@ -36,16 +36,15 @@
   z-index: 10;
 
   &:hover {
-    background: rgba(30, 30, 40, 0.6);
-    color: rgba(96, 165, 250, 1);
-    border-color: rgba(96, 165, 250, 0.5);
+    background: color-mix(in srgb, var(--color-bg-elevated) 98%, transparent);
+    color: var(--color-text-primary);
+    border-color: var(--color-text-primary);
     transform: translateY(-2px);
-    
-    // Stronger shine on hover
-    box-shadow: 
-      0 6px 16px rgba(0, 0, 0, 0.3),
-      0 0 20px rgba(96, 165, 250, 0.15),
-      inset 0 1px 0 rgba(255, 255, 255, 0.15);
+
+    box-shadow:
+      0 8px 22px rgba(0, 0, 0, 0.42),
+      0 0 0 1px color-mix(in srgb, var(--color-text-primary) 40%, transparent),
+      inset 0 1px 0 color-mix(in srgb, var(--color-text-primary) 16%, transparent);
   }
 
   &:active {
@@ -54,8 +53,8 @@
   }
 
   &:focus-visible {
-    outline: 2px solid rgba(96, 165, 250, 0.6);
-    outline-offset: 2px;
+    outline: 3px solid var(--color-text-primary);
+    outline-offset: 3px;
   }
 
   .scroll-icon {
@@ -100,8 +99,8 @@
   .scroll-to-bottom-button {
     bottom: 60px; /* Closer to the bottom on mobile */
     right: 16px;
-    width: 32px;
-    height: 32px;
+    width: 40px;
+    height: 40px;
   }
 }
 
diff --git a/src/web-ui/src/flow_chat/components/ScrollToBottomButton.tsx b/src/web-ui/src/flow_chat/components/ScrollToBottomButton.tsx
index af0c4aa9..4896a0e9 100644
--- a/src/web-ui/src/flow_chat/components/ScrollToBottomButton.tsx
+++ b/src/web-ui/src/flow_chat/components/ScrollToBottomButton.tsx
@@ -34,12 +34,12 @@ export const ScrollToBottomButton: React.FC<ScrollToBottomButtonProps> = ({
       >
         <svg
           className="scroll-icon"
-          width="16"
-          height="16"
+          width="20"
+          height="20"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
-          strokeWidth="2.5"
+          strokeWidth="3"
           strokeLinecap="round"
           strokeLinejoin="round"
         >
diff --git a/src/web-ui/src/flow_chat/components/UserMessage.scss b/src/web-ui/src/flow_chat/components/UserMessage.scss
index 2775e761..b5a7badc 100644
--- a/src/web-ui/src/flow_chat/components/UserMessage.scss
+++ b/src/web-ui/src/flow_chat/components/UserMessage.scss
@@ -15,21 +15,12 @@
   display: block;
   visibility: visible;
   box-sizing: border-box;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  transition: all 0.2s ease;
   position: relative;
   animation: user-message-slide-in 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
   overflow-y: auto;
   
-  &:hover {
-    background: var(--element-bg-strong);
-    border-color: var(--border-prominent);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-  }
-  
   &:focus-within {
     border-color: var(--border-prominent);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
 
   // Collapsed state
diff --git a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
index aacce0bb..60bb289e 100644
--- a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
+++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
@@ -8,7 +8,6 @@
   border: 1px solid var(--border-medium);
   border-radius: 8px;
   margin: 0 3rem 1rem 3rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   transition: all 0.2s ease;
   animation: slideInUp 0.3s ease;
   position: relative;
@@ -86,12 +85,6 @@
   .user-message-item__content {
     color: var(--color-text-muted, #888);
   }
-  
-  &:hover {
-    background: transparent;
-    border-color: var(--border-medium, #555);
-    box-shadow: none;
-  }
 }
 
 // Expanded message body: after --failed so multiline / whitespace always apply when open.
diff --git a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss
index 9c3aa64e..b8484607 100644
--- a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss
@@ -88,15 +88,21 @@
 
 /* ========== Header row styles ========== */
 .base-tool-card-header {
+  /* Used by icon-rail divider to meet card inner top/bottom for this row */
+  --tool-card-header-pad-y: 10px;
+  --tool-card-header-pad-x: 10px;
+  --tool-card-header-icon-rail: 28px;
+
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 9px 10px;
+  padding: var(--tool-card-header-pad-y) var(--tool-card-header-pad-x);
   position: relative;
   z-index: 11;
   flex-shrink: 0;
   min-height: 0;
-  line-height: 1.2;
+  /* 1.2 clips CJK / some Latin descenders inside overflow:hidden; keep room for em-box */
+  line-height: 1.45;
   width: 100%;
   box-sizing: border-box;
   background: transparent;
@@ -124,19 +130,94 @@
 
 /* ========== Header sub-element styles ========== */
 
-.tool-card-icon.tool-identifier-icon {
+/* Left rail: fixed icon box + vertical divider from card inner top to bottom of header row. */
+.tool-card-icon-slot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  align-self: stretch;
+  padding-right: 10px;
+  margin-right: 8px;
+  box-sizing: border-box;
+  min-height: 0;
+}
+
+.tool-card-icon-slot::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: calc(-1 * var(--tool-card-header-pad-y));
+  bottom: calc(-1 * var(--tool-card-header-pad-y));
+  width: 0;
+  border-right: 1px solid var(--border-base);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Same square box so tool glyph and chevron share center (no circular fill). */
+.tool-card-icon-marks {
+  position: relative;
+  z-index: 1;
+  width: var(--tool-card-header-icon-rail);
+  height: var(--tool-card-header-icon-rail);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tool-card-icon.tool-identifier-icon.tool-card-icon-main {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  transition: all 0.2s ease;
+  transition: opacity 0.18s ease;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.tool-card-icon-slot--expandable .tool-card-icon-expand-hint {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+  color: var(--color-text-secondary);
+  transition: opacity 0.18s ease;
 
   svg {
     width: 16px;
     height: 16px;
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
   }
 }
 
+.tool-card-icon-slot--expandable .tool-card-icon-expand-hint--open svg {
+  transform: rotate(180deg);
+}
+
+/* Chevron swap: only when card opts in via headerExpandAffordance (includes status-error with collapsible details). */
+.base-tool-card-wrapper:hover .base-tool-card.base-tool-card--header-expandable:not(.status-cancelled) .tool-card-icon-slot--expandable .tool-card-icon-main {
+  opacity: 0;
+}
+
+.base-tool-card-wrapper:hover .base-tool-card.base-tool-card--header-expandable:not(.status-cancelled) .tool-card-icon-slot--expandable .tool-card-icon-expand-hint {
+  opacity: 1;
+}
+
 /* Status icon (at right border) */
 .tool-card-status-icon {
   display: flex;
@@ -188,7 +269,7 @@
   transition: color 0.2s ease;
   letter-spacing: -0.01em;
   flex-shrink: 0;
-  line-height: 1.2;
+  line-height: 1.45;
 }
 
 /* Main content */
@@ -203,7 +284,7 @@
   color: var(--color-text-primary);
   transition: color 0.2s ease;
   letter-spacing: -0.01em;
-  line-height: 1.2;
+  line-height: 1.45;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -320,3 +401,27 @@
   }
 }
 
+/* ========== Loading state: A (border pulse) + E (text fade) ========== */
+
+/* Hide the right-side spinner/cube during loading */
+.base-tool-card-wrapper--loading-shimmer .tool-card-status-icon:has(.cube-loading),
+.base-tool-card-wrapper--loading-shimmer .tool-card-status-icon:has(svg.animate-spin) {
+  display: none !important;
+}
+
+/* E — icon + text fade together */
+.base-tool-card-wrapper--loading-shimmer .tool-card-icon-marks,
+.base-tool-card-wrapper--loading-shimmer .tool-card-action,
+.base-tool-card-wrapper--loading-shimmer .tool-card-content {
+  animation: tool-card-text-fade 1.6s ease-in-out infinite;
+}
+
+@keyframes tool-card-text-fade {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}
+
diff --git a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx
index 4bb2f84a..f1ed9895 100644
--- a/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/BaseToolCard.tsx
@@ -3,9 +3,43 @@
  * Provides unified card styles and interaction logic
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, createContext, useContext } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
 import './BaseToolCard.scss';
 
+const LOADING_SHIMMER_STATUSES = new Set([
+  'preparing',
+  'streaming',
+  'running',
+  'analyzing',
+]);
+
+function statusUsesLoadingShimmer(status: string): boolean {
+  return LOADING_SHIMMER_STATUSES.has(status);
+}
+
+/** Hover swap on the left tool icon: inline expand vs open in right panel. */
+export type ToolCardHeaderAffordanceKind = 'expand' | 'open-panel-right';
+
+/** Layout hints for ToolCardHeader (icon rail + expand affordance). */
+export interface ToolCardHeaderLayoutContextValue {
+  /** When true, header icon swaps to chevron on row hover (down = inline expand, right = open right). */
+  headerExpandAffordance: boolean;
+  /** Which hint icon to show when headerExpandAffordance is true. */
+  headerAffordanceKind: ToolCardHeaderAffordanceKind;
+  isExpanded: boolean;
+}
+
+export const ToolCardHeaderLayoutContext = createContext<ToolCardHeaderLayoutContextValue>({
+  headerExpandAffordance: false,
+  headerAffordanceKind: 'expand',
+  isExpanded: false,
+});
+
+export function useToolCardHeaderLayout(): ToolCardHeaderLayoutContextValue {
+  return useContext(ToolCardHeaderLayoutContext);
+}
+
 export interface BaseToolCardProps {
   /** Tool status */
   status: 'pending' | 'preparing' | 'streaming' | 'running' | 'completed' | 'error' | 'cancelled' | 'analyzing' | 'pending_confirmation' | 'confirmed';
@@ -25,6 +59,14 @@ export interface BaseToolCardProps {
   isFailed?: boolean;
   /** Whether user confirmation is required (for highlighting border) */
   requiresConfirmation?: boolean;
+  /**
+   * When set, controls hover chevron on the left tool icon.
+   * When omitted: true if the card is clickable, not failed, and expandedContent is passed and truthy.
+   * (Some cards pass expandedContent only while expanded; set this explicitly for those.)
+   */
+  headerExpandAffordance?: boolean;
+  /** Hover icon: chevron-down (inline expand) vs chevron-right (open right). Default `expand`. */
+  headerAffordanceKind?: ToolCardHeaderAffordanceKind;
 }
 
 /**
@@ -40,6 +82,8 @@ export const BaseToolCard: React.FC<BaseToolCardProps> = ({
   errorContent,
   isFailed = false,
   requiresConfirmation = false,
+  headerExpandAffordance: headerExpandAffordanceProp,
+  headerAffordanceKind: headerAffordanceKindProp = 'expand',
 }) => {
   const hasExpandedContent = isExpanded && expandedContent && !isFailed;
   const showConfirmationHighlight = requiresConfirmation && 
@@ -47,16 +91,33 @@ export const BaseToolCard: React.FC<BaseToolCardProps> = ({
     status !== 'confirmed' &&
     status !== 'cancelled' && 
     status !== 'error';
+
+  const resolvedHeaderExpandAffordance =
+    headerExpandAffordanceProp !== undefined
+      ? headerExpandAffordanceProp
+      : Boolean(onClick) && !isFailed && Boolean(expandedContent);
+
+  const headerLayoutValue: ToolCardHeaderLayoutContextValue = {
+    headerExpandAffordance: resolvedHeaderExpandAffordance,
+    headerAffordanceKind: headerAffordanceKindProp,
+    isExpanded,
+  };
+
+  const loadingShimmer = statusUsesLoadingShimmer(status);
   
   return (
-    <div className={`base-tool-card-wrapper ${showConfirmationHighlight ? 'requires-confirmation' : ''} ${className}`}>
+    <div
+      className={`base-tool-card-wrapper ${showConfirmationHighlight ? 'requires-confirmation' : ''} ${loadingShimmer ? 'base-tool-card-wrapper--loading-shimmer' : ''} ${className}`.trim()}
+    >
       <div 
-        className={`base-tool-card status-${status} ${isExpanded ? 'expanded' : ''}`}
+        className={`base-tool-card status-${status} ${isExpanded ? 'expanded' : ''} ${resolvedHeaderExpandAffordance ? 'base-tool-card--header-expandable' : ''}`.trim()}
         onClick={onClick}
       >
-        <div className="base-tool-card-header">
-          {header}
-        </div>
+        <ToolCardHeaderLayoutContext.Provider value={headerLayoutValue}>
+          <div className="base-tool-card-header">
+            {header}
+          </div>
+        </ToolCardHeaderLayoutContext.Provider>
       </div>
       
       {hasExpandedContent && (
@@ -82,6 +143,12 @@ export interface ToolCardHeaderProps {
   icon?: ReactNode;
   /** Custom class name for tool icon */
   iconClassName?: string;
+  /** Override context: show hover chevron when expandable */
+  expandAffordance?: boolean;
+  /** Override context: expand vs open-right-panel hint icon */
+  affordanceKind?: ToolCardHeaderAffordanceKind;
+  /** Override context: expanded state for chevron rotation */
+  headerExpanded?: boolean;
   /** Action text */
   action?: string;
   /** Main content */
@@ -98,16 +165,46 @@ export interface ToolCardHeaderProps {
 export const ToolCardHeader: React.FC<ToolCardHeaderProps> = ({
   icon,
   iconClassName,
+  expandAffordance,
+  affordanceKind,
+  headerExpanded,
   action,
   content,
   extra,
   statusIcon,
 }) => {
+  const layout = useToolCardHeaderLayout();
+  const showExpandHint =
+    expandAffordance !== undefined ? expandAffordance : layout.headerExpandAffordance;
+  const resolvedAffordanceKind =
+    affordanceKind !== undefined ? affordanceKind : layout.headerAffordanceKind;
+  const expandedForChevron =
+    headerExpanded !== undefined ? headerExpanded : layout.isExpanded;
+  const isPanelAffordance = resolvedAffordanceKind === 'open-panel-right';
+
   return (
     <>
-      {icon && (
-        <div className={`tool-card-icon tool-identifier-icon ${iconClassName || ''}`}>
-          {icon}
+      {icon != null && icon !== false && icon !== '' && (
+        <div
+          className={`tool-card-icon-slot${showExpandHint ? ' tool-card-icon-slot--expandable' : ''}${showExpandHint && isPanelAffordance ? ' tool-card-icon-slot--affordance-panel' : ''}`}
+        >
+          <div className="tool-card-icon-marks">
+            <div className={`tool-card-icon tool-identifier-icon tool-card-icon-main ${iconClassName || ''}`}>
+              {icon}
+            </div>
+            {showExpandHint && (
+              <span
+                className={`tool-card-icon-expand-hint${!isPanelAffordance && expandedForChevron ? ' tool-card-icon-expand-hint--open' : ''}`}
+                aria-hidden
+              >
+                {isPanelAffordance ? (
+                  <ChevronRight size={16} strokeWidth={2} absoluteStrokeWidth />
+                ) : (
+                  <ChevronDown size={16} strokeWidth={2} absoluteStrokeWidth />
+                )}
+              </span>
+            )}
+          </div>
         </div>
       )}
       {action && <span className="tool-card-action">{action}</span>}
diff --git a/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.scss
index 8fed5dfc..27a2dba5 100644
--- a/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.scss
@@ -13,6 +13,21 @@
   gap: 0;
 }
 
+/* ========== Loading state: A (border via text fade) + E (text fade) ========== */
+
+/* Hide left spinner/cube */
+.compact-tool-card-wrapper--loading-shimmer .compact-card-status-icon:has(.cube-loading),
+.compact-tool-card-wrapper--loading-shimmer .compact-card-status-icon:has(svg.animate-spin) {
+  display: none !important;
+}
+
+/* E — status icon + action + content breathe */
+.compact-tool-card-wrapper--loading-shimmer .compact-card-status-icon,
+.compact-tool-card-wrapper--loading-shimmer .compact-card-action,
+.compact-tool-card-wrapper--loading-shimmer .compact-card-content {
+  animation: tool-card-text-fade 1.6s ease-in-out infinite;
+}
+
 /* ========== Card body - transparent, no border ========== */
 .compact-tool-card {
   background: transparent !important;
@@ -295,3 +310,12 @@
   }
 }
 
+@keyframes tool-card-text-fade {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}
+
diff --git a/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx
index 43fb49f3..873d5d17 100644
--- a/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/CompactToolCard.tsx
@@ -53,8 +53,16 @@ export const CompactToolCard: React.FC<CompactToolCardProps> = ({
     }
   };
 
+  const loadingShimmer =
+    status === 'preparing' ||
+    status === 'streaming' ||
+    status === 'running' ||
+    status === 'analyzing';
+
   return (
-    <div className={`compact-tool-card-wrapper ${className}`}>
+    <div
+      className={`compact-tool-card-wrapper${loadingShimmer ? ' compact-tool-card-wrapper--loading-shimmer' : ''} ${className}`.trim()}
+    >
       <div
         className={`compact-tool-card status-${status} ${clickable ? 'clickable' : ''} ${isExpanded ? 'expanded' : ''}`}
         onClick={handleWrapperClick}
diff --git a/src/web-ui/src/flow_chat/tool-cards/ContextCompressionDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/ContextCompressionDisplay.scss
index c5ea02ff..92ebb6d9 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ContextCompressionDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/ContextCompressionDisplay.scss
@@ -67,12 +67,6 @@
     color: var(--tool-card-text-secondary);
     background: rgba(148, 163, 184, 0.08);
     border-top: 1px solid rgba(148, 163, 184, 0.18);
-
-    &.compression-detail-note--fallback {
-      color: rgba(245, 158, 11, 0.95);
-      background: rgba(245, 158, 11, 0.08);
-      border-top-color: rgba(245, 158, 11, 0.2);
-    }
   }
 }
 
diff --git a/src/web-ui/src/flow_chat/tool-cards/ContextCompressionDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/ContextCompressionDisplay.tsx
index da754d30..3e4ad3fb 100644
--- a/src/web-ui/src/flow_chat/tool-cards/ContextCompressionDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/ContextCompressionDisplay.tsx
@@ -94,11 +94,18 @@ export const ContextCompressionDisplay: React.FC<ContextCompressionDisplayProps>
     return null;
   };
 
+  const headerAction =
+    isFailed
+      ? t('toolCards.contextCompression.contextCompressionFailed')
+      : usedLocalFallback && data.status === 'completed'
+        ? t('toolCards.contextCompression.localFallbackHeader')
+        : t('toolCards.contextCompression.contextCompression');
+
   const renderHeader = () => (
     <ToolCardHeader
       icon={renderToolIcon()}
       iconClassName="compression-icon"
-      action={isFailed ? t('toolCards.contextCompression.contextCompressionFailed') : t('toolCards.contextCompression.contextCompression')}
+      action={headerAction}
       content={
         <span className="compression-info">
           {data.tokensBefore !== undefined && data.tokensAfter !== undefined ? (
@@ -137,19 +144,15 @@ export const ContextCompressionDisplay: React.FC<ContextCompressionDisplayProps>
   );
 
   const renderExpandedContent = () => {
-    if (!usedLocalFallback && !usedNoSummary) {
+    if (!usedNoSummary) {
       return null;
     }
 
     return (
-      <div className={`compression-detail-note ${usedLocalFallback ? 'compression-detail-note--fallback' : ''}`}>
-        {usedLocalFallback
-          ? t('toolCards.contextCompression.localFallbackNotice', {
-              defaultValue: 'Model-based summary was unavailable, so this compression used local structured truncation.',
-            })
-          : t('toolCards.contextCompression.noSummaryNotice', {
-              defaultValue: 'No additional summary was generated for this compaction pass.',
-            })}
+      <div className="compression-detail-note">
+        {t('toolCards.contextCompression.noSummaryNotice', {
+          defaultValue: 'No additional summary was generated for this compaction pass.',
+        })}
       </div>
     );
   };
@@ -157,7 +160,7 @@ export const ContextCompressionDisplay: React.FC<ContextCompressionDisplayProps>
   return (
     <BaseToolCard
       status={data.status}
-      isExpanded={usedLocalFallback || usedNoSummary}
+      isExpanded={usedNoSummary}
       className="context-compression-display"
       header={renderHeader()}
       expandedContent={renderExpandedContent()}
diff --git a/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss
index 3d8e39a3..b4199306 100644
--- a/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.scss
@@ -26,15 +26,25 @@
 
   &--loading {
     padding: 12px 16px;
-    
+    /* Same chrome as the filled card when params are not ready yet (streaming start). */
+    border: 1px solid var(--border-base);
+    border-radius: 8px;
+    background: var(--color-bg-flowchat);
+    box-sizing: border-box;
+
     .create-plan-header {
       justify-content: flex-start;
       gap: 8px;
       color: var(--tool-card-text-muted);
       font-size: 13px;
+      border-bottom: none;
     }
   }
 
+  &--loading-shimmer .create-plan-header--loading-shimmer {
+    min-height: 20px;
+  }
+
   .create-plan-header {
     display: flex;
     align-items: center;
@@ -94,8 +104,10 @@
       color: var(--tool-card-text-secondary);
     }
 
-    .create-plan-loading {
-      color: var(--tool-card-text-muted);
+    &--loading-shimmer {
+      .file-name {
+        animation: tool-card-text-fade 1.6s ease-in-out infinite;
+      }
     }
   }
 
@@ -244,6 +256,31 @@
     }
   }
 
+  /* Plan params still streaming: footer actions read as disabled / grayed. */
+  &--plan-generating {
+    .create-plan-footer {
+      background: color-mix(in srgb, var(--color-bg-flowchat) 92%, var(--tool-card-text-muted));
+
+      .build-btn:disabled {
+        opacity: 1;
+        cursor: not-allowed;
+        color: var(--tool-card-text-muted);
+        background: color-mix(in srgb, var(--element-bg-soft, rgba(255, 255, 255, 0.06)) 80%, transparent);
+        border: 1px solid var(--border-base);
+        box-shadow: none;
+
+        &:hover {
+          background: color-mix(in srgb, var(--element-bg-soft, rgba(255, 255, 255, 0.06)) 80%, transparent);
+          box-shadow: none;
+        }
+
+        svg {
+          color: var(--tool-card-text-muted);
+        }
+      }
+    }
+  }
+
   .create-plan-footer {
     display: flex;
     align-items: center;
@@ -252,6 +289,10 @@
     border-top: 1px solid var(--border-base);
     background: rgba(255, 255, 255, 0.02);
 
+    &--generating-only {
+      justify-content: flex-end;
+    }
+
     .view-plan-btn {
       display: flex;
       align-items: center;
@@ -329,3 +370,11 @@
   }
 }
 
+@keyframes tool-card-text-fade {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}
diff --git a/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.tsx
index dd865bbb..32a0e213 100644
--- a/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/CreatePlanDisplay.tsx
@@ -15,7 +15,7 @@ import { workspaceAPI } from '@/infrastructure/api/service-api/WorkspaceAPI';
 import { fileSystemService } from '@/tools/file-system/services/FileSystemService';
 import { planBuildStateService } from '@/shared/services/PlanBuildStateService';
 import yaml from 'yaml';
-import { Tooltip, CubeLoading } from '@/component-library';
+import { Tooltip } from '@/component-library';
 import { createLogger } from '@/shared/utils/logger';
 import { useToolCardHeightContract } from './useToolCardHeightContract';
 import './CreatePlanDisplay.scss';
@@ -304,9 +304,8 @@ ${JSON.stringify(simpleTodos, null, 2)}
 
   if (!planData) {
     return (
-      <div className="create-plan-display create-plan-display--loading">
-        <div className="create-plan-header">
-          <Loader2 className="animate-spin" size={14} />
+      <div className={`create-plan-display create-plan-display--loading create-plan-display--loading-shimmer status-${status}`}>
+        <div className="create-plan-header create-plan-header--loading-shimmer">
           <span>{t('toolCards.plan.loadingPlan')}</span>
         </div>
       </div>
@@ -317,11 +316,11 @@ ${JSON.stringify(simpleTodos, null, 2)}
     <div
       ref={cardRootRef}
       data-tool-card-id={toolCardId ?? ''}
-      className={`create-plan-display status-${status}`}
+      className={`create-plan-display status-${status}${isLoading ? ' create-plan-display--plan-generating' : ''}`}
     >
       <Tooltip content={t('toolCards.plan.clickToOpenPlan')}>
         <div 
-          className="create-plan-header create-plan-header--clickable"
+          className={`create-plan-header create-plan-header--clickable${isLoading ? ' create-plan-header--loading-shimmer' : ''}`}
           onClick={handleViewPlan}
         >
           <div className="header-left">
@@ -330,9 +329,6 @@ ${JSON.stringify(simpleTodos, null, 2)}
             </div>
             <span className="file-name">{planFileName}</span>
           </div>
-          {isLoading && (
-            <CubeLoading size="small" className="create-plan-loading" />
-          )}
         </div>
       </Tooltip>
 
@@ -379,14 +375,12 @@ ${JSON.stringify(simpleTodos, null, 2)}
         </div>
       )}
 
-      <div className="create-plan-footer">
-        <button 
-          className="view-plan-btn"
-          onClick={handleViewPlan}
-          disabled={isLoading}
-        >
-          {t('toolCards.plan.viewPlan')}
-        </button>
+      <div className={`create-plan-footer${isLoading ? ' create-plan-footer--generating-only' : ''}`}>
+        {!isLoading && (
+          <button className="view-plan-btn" type="button" onClick={handleViewPlan}>
+            {t('toolCards.plan.viewPlan')}
+          </button>
+        )}
         <button 
           className={`build-btn build-btn--${buildStatus}`}
           onClick={handleBuild}
@@ -402,6 +396,11 @@ ${JSON.stringify(simpleTodos, null, 2)}
               <CheckCircle size={14} />
               <span>{t('toolCards.plan.built')}</span>
             </>
+          ) : isLoading ? (
+            <>
+              <Loader2 size={14} className="animate-spin" />
+              <span>{t('toolCards.plan.generating')}</span>
+            </>
           ) : (
             <span>{t('toolCards.plan.build')}</span>
           )}
@@ -419,28 +418,49 @@ ${JSON.stringify(simpleTodos, null, 2)}
 export const CreatePlanDisplay: React.FC<ToolCardProps> = ({
   toolItem,
 }) => {
-  const { status, toolResult, partialParams, isParamsStreaming } = toolItem;
-  
+  const { status, toolResult, partialParams, isParamsStreaming, toolCall } = toolItem;
+  const toolInput = toolCall?.input as Record<string, unknown> | undefined;
+  const useStreamingInputFallback =
+    Boolean(isParamsStreaming) ||
+    status === 'streaming' ||
+    status === 'preparing' ||
+    status === 'running';
+
   const planFilePath = useMemo(() => {
     if (isParamsStreaming && partialParams?.plan_file_path) {
-      return partialParams.plan_file_path;
+      return String(partialParams.plan_file_path);
     }
-    return toolResult?.result?.plan_file_path || '';
-  }, [isParamsStreaming, partialParams, toolResult]);
+    const fromResult = toolResult?.result?.plan_file_path;
+    if (fromResult) return String(fromResult);
+    if (useStreamingInputFallback && toolInput?.plan_file_path != null) {
+      return String(toolInput.plan_file_path);
+    }
+    return '';
+  }, [isParamsStreaming, partialParams, toolResult, useStreamingInputFallback, toolInput]);
 
   const initialName = useMemo(() => {
-    if (isParamsStreaming && partialParams?.name) {
-      return partialParams.name;
+    if (isParamsStreaming && partialParams?.name != null) {
+      return String(partialParams.name);
+    }
+    const fromResult = toolResult?.result?.name;
+    if (fromResult != null) return String(fromResult);
+    if (useStreamingInputFallback && toolInput?.name != null) {
+      return String(toolInput.name);
     }
-    return toolResult?.result?.name || '';
-  }, [isParamsStreaming, partialParams, toolResult]);
+    return '';
+  }, [isParamsStreaming, partialParams, toolResult, useStreamingInputFallback, toolInput]);
 
   const initialOverview = useMemo(() => {
-    if (isParamsStreaming && partialParams?.overview) {
-      return partialParams.overview;
+    if (isParamsStreaming && partialParams?.overview != null) {
+      return String(partialParams.overview);
     }
-    return toolResult?.result?.overview || '';
-  }, [isParamsStreaming, partialParams, toolResult]);
+    const fromResult = toolResult?.result?.overview;
+    if (fromResult != null) return String(fromResult);
+    if (useStreamingInputFallback && toolInput?.overview != null) {
+      return String(toolInput.overview);
+    }
+    return '';
+  }, [isParamsStreaming, partialParams, toolResult, useStreamingInputFallback, toolInput]);
 
   const initialTodos = useMemo(() => {
     if (isParamsStreaming && partialParams?.todos && Array.isArray(partialParams.todos)) {
@@ -449,8 +469,11 @@ export const CreatePlanDisplay: React.FC<ToolCardProps> = ({
     if (toolResult?.result?.todos && Array.isArray(toolResult.result.todos)) {
       return toolResult.result.todos;
     }
+    if (useStreamingInputFallback && toolInput?.todos && Array.isArray(toolInput.todos)) {
+      return toolInput.todos as PlanTodo[];
+    }
     return [];
-  }, [isParamsStreaming, partialParams, toolResult]);
+  }, [isParamsStreaming, partialParams, toolResult, useStreamingInputFallback, toolInput]);
   
   return (
     <PlanDisplay
diff --git a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.scss
index 7ae837f6..66200e3e 100644
--- a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.scss
@@ -69,6 +69,19 @@
       color: var(--color-text-secondary);
     }
   }
+
+  /*
+   * Git 轨道在 ToolCardHeader 里位于 .tool-card-extra 内；默认 extra 高度跟子项走，轨道只有图标高，
+   * 竖线与悬停底无法贴齐头部上下内边距、也无法铺到右侧 padding。与头部行同高后再用负 inset 顶满。
+   */
+  .base-tool-card-header .tool-card-extra:has(.file-op-git-rail) {
+    align-self: stretch;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
+    min-height: 0;
+  }
 }
 
 .file-name {
@@ -129,45 +142,96 @@
   }
 }
 
-.compact-actions {
+/* Right rail for “查看 Git diff” — aligned with Task tool header rail (TaskToolDisplay). */
+.file-op-git-rail {
+  position: relative;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 4px;
+  justify-content: center;
+  align-self: stretch;
   flex-shrink: 0;
+  min-width: 32px;
+  padding: 0 0 0 8px;
+  margin-left: 4px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: calc(-1 * var(--tool-card-header-pad-x, 10px));
+    top: calc(-1 * var(--tool-card-header-pad-y, 10px));
+    bottom: calc(-1 * var(--tool-card-header-pad-y, 10px));
+    background-color: transparent;
+    border-radius: 0;
+    transition: background-color 0.15s ease;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  &:hover:not(.file-op-git-rail--disabled)::before {
+    background-color: var(--tool-card-bg-hover, var(--color-bg-hover, rgba(255, 255, 255, 0.09)));
+  }
+
+  &:hover:not(.file-op-git-rail--disabled) .file-op-git-rail__visual {
+    color: var(--color-text-primary);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: calc(-1 * var(--tool-card-header-pad-y, 10px));
+    bottom: calc(-1 * var(--tool-card-header-pad-y, 10px));
+    width: 0;
+    border-left: 1px solid var(--border-base);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  &--disabled {
+    opacity: 0.45;
+
+    .file-op-git-rail__visual {
+      color: var(--color-text-muted);
+    }
+  }
 }
 
-.compact-action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
+.file-op-git-rail__hit {
+  position: absolute;
+  left: 0;
+  top: calc(-1 * var(--tool-card-header-pad-y, 10px));
+  right: calc(-1 * var(--tool-card-header-pad-x, 10px));
+  bottom: calc(-1 * var(--tool-card-header-pad-y, 10px));
+  z-index: 2;
+  margin: 0;
   padding: 0;
   border: none;
-  border-radius: 4px;
   background: transparent;
-  color: var(--color-text-muted);
   cursor: pointer;
-  transition: all 0.2s ease;
+  appearance: none;
+  font: inherit;
 
-  &:hover:not(:disabled) {
-    background: var(--color-accent-200);
-    color: var(--color-accent-500);
-    transform: scale(1.05);
-  }
-
-  &:active:not(:disabled) {
-    transform: scale(0.95);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: default;
+  &:focus-visible {
+    outline: 2px solid var(--color-accent-500, #60a5fa);
+    outline-offset: -2px;
   }
 }
 
-.git-diff-btn {
+.file-op-git-rail__visual {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  pointer-events: none;
+
   svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
     stroke: currentColor;
   }
 }
diff --git a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
index 89af680a..ade67e71 100644
--- a/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.tsx
@@ -5,7 +5,19 @@
 
 import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { XCircle, GitBranch, FileText, ChevronDown, ChevronUp, FileEdit, FilePlus, FileX2, Loader2, Clock, Check } from 'lucide-react';
+import {
+  XCircle,
+  GitBranch,
+  FileText,
+  ChevronDown,
+  ChevronUp,
+  FileEdit,
+  FilePlus,
+  FileX2,
+  Loader2,
+  Clock,
+  Check,
+} from 'lucide-react';
 import { CubeLoading } from '../../component-library';
 import type { ToolCardProps } from '../types/flow-chat';
 import { BaseToolCard, ToolCardHeader } from './BaseToolCard';
@@ -298,7 +310,11 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
   }, [sessionId, currentFilePath, toolCall?.id, fileName, toolItem.toolName]);
 
   const handleCardClick = useCallback((e: React.MouseEvent) => {
-    if ((e.target as HTMLElement).closest('.compact-actions')) {
+    if (
+      (e.target as HTMLElement).closest(
+        '.file-op-git-rail:not(.file-op-git-rail--disabled)',
+      )
+    ) {
       return;
     }
     
@@ -404,7 +420,9 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
   const renderHeader = () => {
     const { className: iconClassName } = getToolIconInfo();
     const isDeleteTool = toolItem.toolName === 'Delete';
-    
+    const gitRailDisabled =
+      !currentFilePath || !currentWorkspace || !sessionId;
+
     const actionText = isDeleteTool 
       ? '' 
       : (isFailed ? `${toolDisplayInfo.name}${t('toolCards.file.failed')}` : `${toolDisplayInfo.name}:`);
@@ -413,6 +431,7 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
       <ToolCardHeader
         icon={renderToolIcon()}
         iconClassName={iconClassName}
+        headerExpanded={isFailed ? isErrorExpanded : undefined}
         action={actionText}
       content={
         <>
@@ -442,24 +461,33 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
               {currentFilePath ? t('toolCards.file.receivingParams') : t('toolCards.file.analyzing')}
             </span>
           )}
-          
-          
-          {!isDeleteTool && !isFailed && !isLoading && status === 'completed' && currentFilePath && (
-            <div className="compact-actions" onClick={(e) => e.stopPropagation()}>
-              <Tooltip content={t('toolCards.file.viewGitDiff')}>
-                <button
-                  className="compact-action-btn git-diff-btn"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleOpenBaselineDiff();
-                  }}
-                  disabled={!currentFilePath || !currentWorkspace || !sessionId}
+          {!isDeleteTool &&
+            !isFailed &&
+            !isLoading &&
+            status === 'completed' &&
+            currentFilePath && (
+              <Tooltip content={t('toolCards.file.viewGitDiff')} placement="top">
+                <div
+                  className={`file-op-git-rail${gitRailDisabled ? ' file-op-git-rail--disabled' : ''}`}
                 >
-                  <GitBranch size={12} />
-                </button>
+                  {!gitRailDisabled && (
+                    <button
+                      type="button"
+                      className="file-op-git-rail__hit"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleOpenBaselineDiff();
+                      }}
+                      aria-label={t('toolCards.file.viewGitDiff')}
+                      title={t('toolCards.file.viewGitDiff')}
+                    />
+                  )}
+                  <div className="file-op-git-rail__visual" aria-hidden>
+                    <GitBranch size={16} strokeWidth={2} />
+                  </div>
+                </div>
               </Tooltip>
-            </div>
-          )}
+            )}
           
           {isFailed && (
             <div className="error-expand-indicator">
@@ -604,6 +632,12 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
     return <>{t('toolCards.file.delete')}: <span className="delete-file-name">{fileName}</span></>;
   };
 
+  const opensPanelOnClick =
+    !isFailed &&
+    !isDeleteTool &&
+    (Boolean(currentFilePath && sessionId && status === 'completed') ||
+      Boolean(currentFilePath && onOpenInEditor));
+
   if (isDeleteTool) {
     return (
       <CompactToolCard
@@ -632,6 +666,8 @@ export const FileOperationToolCard: React.FC<FileOperationToolCardProps> = ({
         expandedContent={renderExpandedContent()}
         errorContent={isFailed && isErrorExpanded ? renderErrorContent() : null}
         isFailed={isFailed}
+        headerExpandAffordance={opensPanelOnClick || isFailed}
+        headerAffordanceKind={opensPanelOnClick ? 'open-panel-right' : 'expand'}
       />
     </div>
   );
diff --git a/src/web-ui/src/flow_chat/tool-cards/GetFileDiffDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/GetFileDiffDisplay.scss
index f6a7d5d7..7b49b8d8 100644
--- a/src/web-ui/src/flow_chat/tool-cards/GetFileDiffDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/GetFileDiffDisplay.scss
@@ -51,24 +51,6 @@
       color: var(--color-error);
     }
   }
-
-  .expand-toggle-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    background: transparent;
-    border: none;
-    border-radius: 4px;
-    color: var(--color-text-muted);
-    cursor: pointer;
-    transition: all 0.15s ease;
-
-    &:hover {
-      background: var(--color-bg-hover);
-      color: var(--color-text-secondary);
-    }
-  }
 }
 
 .diff-expanded-content {
diff --git a/src/web-ui/src/flow_chat/tool-cards/GetFileDiffDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/GetFileDiffDisplay.tsx
index cc985a08..0102c813 100644
--- a/src/web-ui/src/flow_chat/tool-cards/GetFileDiffDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/GetFileDiffDisplay.tsx
@@ -3,7 +3,7 @@
  */
 
 import React, { useMemo, useState, useCallback } from 'react';
-import { ChevronDown, ChevronUp, GitCompare } from 'lucide-react';
+import { GitCompare } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { CubeLoading } from '../../component-library';
 import type { ToolCardProps } from '../types/flow-chat';
@@ -115,12 +115,7 @@ export const GetFileDiffDisplay: React.FC<ToolCardProps> = React.memo(({
     applyExpandedState(isExpanded, !isExpanded, setIsExpanded);
   }, [applyExpandedState, isExpanded]);
 
-  const handleCardClick = useCallback((e: React.MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (target.closest('.expand-toggle-btn')) {
-      return;
-    }
-    
+  const handleCardClick = useCallback(() => {
     if (hasDiffContent && status === 'completed') {
       toggleExpanded();
     }
@@ -170,18 +165,6 @@ export const GetFileDiffDisplay: React.FC<ToolCardProps> = React.memo(({
               )}
             </span>
           )}
-          
-          {hasDiffContent && status === 'completed' && (
-            <button
-              className="expand-toggle-btn"
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleExpanded();
-              }}
-            >
-              {isExpanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
-            </button>
-          )}
         </>
       }
       statusIcon={renderStatusIcon()}
@@ -255,6 +238,7 @@ export const GetFileDiffDisplay: React.FC<ToolCardProps> = React.memo(({
         expandedContent={renderExpandedContent()}
         errorContent={isFailed ? renderErrorContent() : null}
         isFailed={isFailed}
+        headerExpandAffordance={Boolean(hasDiffContent && status === 'completed')}
       />
     </div>
   );
diff --git a/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.scss
index d1350d78..258b8950 100644
--- a/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.scss
@@ -80,26 +80,6 @@
     font-family: var(--tool-card-font-mono);
   }
 
-  .preview-toggle-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 4px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    color: var(--tool-card-text-secondary);
-    transition: color 0.2s ease;
-
-    &:hover {
-      color: var(--tool-card-text-primary);
-    }
-
-    svg {
-      display: block;
-    }
-  }
-
   .error-indicator {
     display: flex;
     align-items: center;
diff --git a/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.tsx
index 2608e647..964aba2b 100644
--- a/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.tsx
@@ -4,7 +4,7 @@
 
 import React, { useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ChevronDown, ChevronUp, GitBranch, Check, X, AlertTriangle } from 'lucide-react';
+import { GitBranch, Check, X, AlertTriangle } from 'lucide-react';
 import { CubeLoading, IconButton } from '../../component-library';
 import type { ToolCardProps } from '../types/flow-chat';
 import { BaseToolCard, ToolCardHeader } from './BaseToolCard';
@@ -166,7 +166,7 @@ export const GitToolDisplay: React.FC<ToolCardProps> = ({
 
   const handleCardClick = useCallback((e: React.MouseEvent) => {
     const target = e.target as HTMLElement;
-    if (target.closest('.preview-toggle-btn') || target.closest('.git-action-buttons')) {
+    if (target.closest('.git-action-buttons')) {
       return;
     }
     
@@ -241,21 +241,6 @@ export const GitToolDisplay: React.FC<ToolCardProps> = ({
             </div>
           )}
           
-          {(hasOutput || isFailed) && (
-            <IconButton
-              className="preview-toggle-btn"
-              variant="ghost"
-              size="xs"
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleExpanded();
-              }}
-              tooltip={isExpanded ? t('toolCards.git.collapseOutput') : t('toolCards.git.expandOutput')}
-            >
-              {isExpanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
-            </IconButton>
-          )}
-          
           {isFailed && (
             <div className="error-indicator">
               <span className="error-text">{t('toolCards.git.failed')}</span>
@@ -343,6 +328,17 @@ export const GitToolDisplay: React.FC<ToolCardProps> = ({
     </div>
   );
 
+  /** Failure is summarized in the header; full details live here and only show when expanded. */
+  const renderDetailsWhenExpanded = (): React.ReactNode => {
+    if (resultData) {
+      return renderExpandedContent();
+    }
+    if (isFailed) {
+      return renderErrorContent();
+    }
+    return null;
+  };
+
   return (
     <div ref={cardRootRef} data-tool-card-id={toolId ?? ''}>
       <BaseToolCard
@@ -351,10 +347,9 @@ export const GitToolDisplay: React.FC<ToolCardProps> = ({
         onClick={handleCardClick}
         className="git-tool-display"
         header={renderHeader()}
-        expandedContent={isExpanded ? renderExpandedContent() : null}
-        errorContent={renderErrorContent()}
-        isFailed={(isFailed && status === 'error') || undefined}
+        expandedContent={isExpanded ? renderDetailsWhenExpanded() : null}
         requiresConfirmation={requiresConfirmation && !userConfirmed}
+        headerExpandAffordance={Boolean(hasOutput || isFailed)}
       />
     </div>
   );
diff --git a/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.scss
index 792c64f7..57df1acd 100644
--- a/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.scss
@@ -11,8 +11,7 @@
   .mcp-tool-info {
     display: flex;
     align-items: center;
-    gap: 8px;
-    flex-wrap: nowrap;
+    min-width: 0;
 
     .tool-name {
       font-weight: 600;
@@ -21,19 +20,6 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
-
-    .server-tag {
-      display: inline-flex;
-      align-items: center;
-      padding: 2px 8px;
-      border-radius: 4px;
-      font-size: 11px;
-      font-weight: 600;
-      flex-shrink: 0;
-      white-space: nowrap;
-      color: rgba(99, 102, 241, 0.75);
-      background: rgba(99, 102, 241, 0.08);
-    }
   }
 
   .content-summary {
@@ -156,24 +142,6 @@
     .error-message {
       color: rgba(239, 68, 68, 0.9);
       font-size: 13px;
-      margin-bottom: 8px;
-    }
-
-    .error-meta {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 12px;
-      color: var(--tool-card-text-secondary);
-
-      .error-separator {
-        color: rgba(255, 255, 255, 0.3);
-      }
-
-      .error-tool,
-      .error-server {
-        color: rgba(239, 68, 68, 0.7);
-      }
     }
   }
 
diff --git a/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.tsx
index 22ef1703..e06f5713 100644
--- a/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/MCPToolDisplay.tsx
@@ -557,7 +557,7 @@ export const MCPToolDisplay: React.FC<ToolCardProps> = ({
     if (toolResult && 'error' in toolResult) {
       return toolResult.error;
     }
-    return 'MCP tool execution failed';
+    return t('toolCards.mcp.executionFailed', 'MCP execution failed');
   };
 
   const handleCardClick = useCallback((e: React.MouseEvent) => {
@@ -590,11 +590,10 @@ export const MCPToolDisplay: React.FC<ToolCardProps> = ({
     <ToolCardHeader
       icon={renderToolIcon()}
       iconClassName="mcp-icon"
-      action={isFailed ? 'MCP tool failed' : 'MCP tool:'}
+      action={isFailed ? t('toolCards.mcp.failedLabel', 'MCP failed') : t('toolCards.mcp.actionLabel', 'MCP:')}
       content={
         <span className="mcp-tool-info">
           <span className="tool-name">{toolName}</span>
-          <span className="server-tag">from {serverName}</span>
         </span>
       }
       extra={
@@ -733,11 +732,6 @@ export const MCPToolDisplay: React.FC<ToolCardProps> = ({
   const renderErrorContent = () => (
     <div className="error-content">
       <div className="error-message">{getErrorMessage()}</div>
-      <div className="error-meta">
-        <span className="error-tool">Tool: {toolName}</span>
-        <span className="error-separator">|</span>
-        <span className="error-server">Server: {serverName}</span>
-      </div>
     </div>
   );
 
diff --git a/src/web-ui/src/flow_chat/tool-cards/MermaidInteractiveDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/MermaidInteractiveDisplay.tsx
index cef8cf52..75e37574 100644
--- a/src/web-ui/src/flow_chat/tool-cards/MermaidInteractiveDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/MermaidInteractiveDisplay.tsx
@@ -190,6 +190,8 @@ export const MermaidInteractiveDisplay: React.FC<ToolCardProps> = ({
       onClick={isClickable ? handleOpenMermaid : undefined}
       className={`mermaid-interactive-card ${isClickable ? 'clickable' : ''}`}
       header={renderHeader()}
+      headerExpandAffordance={isClickable}
+      headerAffordanceKind="open-panel-right"
     />
   );
 };
diff --git a/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.scss
index daabe60f..e3de0a63 100644
--- a/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.scss
@@ -12,13 +12,6 @@
     color: rgba(59, 130, 246, 0.55);
   }
 
-  .skill-name-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: nowrap;
-  }
-
   .skill-name {
     font-weight: 600;
     color: var(--tool-card-text-primary);
@@ -27,19 +20,6 @@
     text-overflow: ellipsis;
   }
 
-  .location-tag {
-    display: inline-flex;
-    align-items: center;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 11px;
-    font-weight: 600;
-    flex-shrink: 0;
-    white-space: nowrap;
-    color: rgba(59, 130, 246, 0.75);
-    background: rgba(59, 130, 246, 0.08);
-  }
-
   .error-content {
     padding: 12px 16px;
     background: rgba(239, 68, 68, 0.05);
diff --git a/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.tsx
index d729b93a..1029239c 100644
--- a/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/SkillDisplay.tsx
@@ -22,26 +22,12 @@ export const SkillDisplay: React.FC<ToolCardProps> = ({
     const result = toolResult.result;
     return {
       name: result.skill_name || result.name || t('toolCards.skill.unknownSkill'),
-      location: result.location || 'unknown',
     };
   };
 
   const skillInfo = getSkillInfo();
   const commandName = toolCall?.input?.command || toolCall?.input?.skill_name || t('toolCards.skill.unknown');
 
-  // Map known locations to localized labels.
-  const getLocationLabel = (location: string) => {
-    switch (location) {
-      case 'user':
-      case 'personal':
-        return t('toolCards.skill.userLevel');
-      case 'project':
-        return t('toolCards.skill.projectLevel');
-      default:
-        return location;
-    }
-  };
-
   const isLoading = status === 'preparing' || status === 'streaming' || status === 'running';
 
   const isFailed = status === 'error';
@@ -70,19 +56,8 @@ export const SkillDisplay: React.FC<ToolCardProps> = ({
       iconClassName="skill-icon"
       action={isFailed ? t('toolCards.skill.loadSkillFailed') : t('toolCards.skill.skillAction')}
       content={
-        <span className="skill-name-wrapper">
-          {status === 'completed' && skillInfo ? (
-            <>
-              <span className="skill-name">{skillInfo.name}</span>
-              {skillInfo.location && (
-                <span className={`location-tag location-${skillInfo.location}`}>
-                  {getLocationLabel(skillInfo.location)}
-                </span>
-              )}
-            </>
-          ) : (
-            <span className="skill-name">{commandName}</span>
-          )}
+        <span className="skill-name">
+          {status === 'completed' && skillInfo ? skillInfo.name : commandName}
         </span>
       }
       statusIcon={renderStatusIcon()}
diff --git a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss
index d266c2be..6bbde78b 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss
@@ -1,63 +1,215 @@
 /* Task tool card styles (BaseToolCard). */
 .task-tool-display {
+  /* Match .base-tool-card-header: gap + icon rail like .tool-card-icon-slot. */
   .task-header-wrapper {
     display: flex;
     align-items: stretch;
-    gap: 10px;
+    gap: 4px;
     width: 100%;
   }
 
   .task-icon-container {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    width: 32px;
     align-self: stretch;
+    padding-right: 10px;
+    margin-right: 8px;
+    box-sizing: border-box;
+    min-height: 0;
     color: var(--color-text-secondary, #6b7280);
-    position: relative;
-    
-    svg {
-      width: 28px;
-      height: 28px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: calc(-1 * var(--tool-card-header-pad-y, 10px));
+      bottom: calc(-1 * var(--tool-card-header-pad-y, 10px));
+      width: 0;
+      border-right: 1px solid var(--border-base);
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    .task-task-icon-marks {
       position: relative;
       z-index: 1;
-      /* Mask the connector line behind the icon. */
-      background: var(--color-bg-flowchat, #121214);
-      border-radius: 4px;
-      padding: 3px;
+      width: var(--tool-card-header-icon-rail, 28px);
+      height: var(--tool-card-header-icon-rail, 28px);
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-    
-    &.is-running {
-      color: var(--color-primary, #3b82f6);
+
+    .task-task-icon-main {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: opacity 0.18s ease;
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
     }
-    
-    /* Expanded state: move icon to top and show connector line. */
-    &.prompt-visible {
-      align-items: flex-start;
-      padding-top: 2px;
-      
-      &::after {
-        content: '';
-        position: absolute;
-        top: 32px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 0;
-        height: calc(100% - 32px);
-        border-left: 1px dashed var(--border-base, rgba(255, 255, 255, 0.18));
+
+    &.task-icon-container--expandable .task-task-icon-hint {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      padding: 0;
+      opacity: 0;
+      pointer-events: none;
+      color: var(--color-text-secondary);
+      transition: opacity 0.18s ease;
+
+      svg {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        transition: transform 0.2s ease;
       }
     }
+
+    &.task-icon-container--expandable .task-task-icon-hint--open svg {
+      transform: rotate(180deg);
+    }
+
+    &.is-running {
+      color: var(--color-primary, #3b82f6);
+    }
+  }
+
+  &.base-tool-card-wrapper:hover
+    .base-tool-card.base-tool-card--header-expandable:not(.status-cancelled)
+    .task-icon-container.task-icon-container--expandable
+    .task-task-icon-main {
+    opacity: 0;
+  }
+
+  &.base-tool-card-wrapper:hover
+    .base-tool-card.base-tool-card--header-expandable:not(.status-cancelled)
+    .task-icon-container.task-icon-container--expandable
+    .task-task-icon-hint {
+    opacity: 1;
   }
 
   .task-content-wrapper {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    flex: 1;
+    min-width: 0;
+    align-self: stretch;
+    justify-content: center;
+  }
+
+  /* Title row + right rail: same vertical midline (avoid stretch making icons look low). */
+  .task-body-columns {
+    display: flex;
+    align-items: center;
+    gap: 0;
     flex: 1;
     min-width: 0;
   }
 
+  .task-body-main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* Narrow right rail; invisible hit layer matches hover tint + opens detail panel. */
+  .task-header-rail {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    flex-shrink: 0;
+    min-width: 40px;
+    padding: 0 0 0 8px;
+    margin-left: 4px;
+
+    /* Hover fill: full header height + extend into header right padding to card inner edge. */
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: calc(-1 * var(--tool-card-header-pad-x, 10px));
+      top: calc(-1 * var(--tool-card-header-pad-y, 10px));
+      bottom: calc(-1 * var(--tool-card-header-pad-y, 10px));
+      background-color: transparent;
+      border-radius: 0;
+      transition: background-color 0.15s ease;
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    &:hover::before {
+      background-color: var(--tool-card-bg-hover, var(--color-bg-hover, rgba(255, 255, 255, 0.09)));
+    }
+
+    &:hover .task-header-rail__visual {
+      color: var(--color-text-primary);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: calc(-1 * var(--tool-card-header-pad-y, 10px));
+      bottom: calc(-1 * var(--tool-card-header-pad-y, 10px));
+      width: 0;
+      border-left: 1px solid var(--border-base);
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  .task-header-rail__hit {
+    position: absolute;
+    left: 0;
+    top: calc(-1 * var(--tool-card-header-pad-y, 10px));
+    right: calc(-1 * var(--tool-card-header-pad-x, 10px));
+    bottom: calc(-1 * var(--tool-card-header-pad-y, 10px));
+    z-index: 2;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    appearance: none;
+    font: inherit;
+
+    &:focus-visible {
+      outline: 2px solid var(--color-accent-500, #60a5fa);
+      outline-offset: -2px;
+    }
+  }
+
+  .task-header-rail__visual {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    gap: 6px;
+    color: var(--color-text-muted);
+    pointer-events: none;
+  }
+
   .task-header-main {
     display: flex;
     align-items: center;
@@ -112,11 +264,12 @@
     letter-spacing: 0.02em;
   }
 
-  .task-header-extra {
+  .task-header-meta {
     display: flex;
     align-items: center;
     gap: 6px;
     margin-left: auto;
+    margin-right: 10px;
     flex-shrink: 0;
   }
 
@@ -139,103 +292,38 @@
     }
   }
 
-  .task-prompt-row {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    padding: 4px 6px;
-    margin: 0 -6px;  /* Offset padding to keep alignment. */
-    background: transparent;
-    font-size: 11px;
-    color: var(--color-text-secondary, #9ca3af);
-    line-height: 1.4;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background 0.15s ease;
-    
-    .task-prompt-content {
-      flex: 1;
-      min-width: 0;
-      word-break: break-word;
-      white-space: pre-wrap;
-      max-height: calc(1.4em * 3);
-      overflow-y: auto;
-    }
-    
-    &.task-prompt-row--clickable {
-      cursor: pointer;
-      
-      &:hover {
-        background: var(--color-bg-hover, rgba(255, 255, 255, 0.04));
-      }
-    }
-    
-    &.task-prompt-row--collapsed {
-      align-items: center;
-      
-      .task-prompt-content {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-    
-    .task-prompt-toggle-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 18px;
-      height: 18px;
-      padding: 0;
-      border: none;
-      border-radius: 4px;
-      background: transparent;
-      color: var(--color-text-muted);
-      cursor: pointer;
-      transition: all 0.15s ease;
-      flex-shrink: 0;
-      
-      &:hover {
-        background: var(--color-bg-hover, rgba(107, 114, 128, 0.12));
-        color: var(--color-text-primary, #e5e7eb);
-      }
-      
-      &--collapse {
-        align-self: flex-end;
-      }
-    }
+  .task-status-icon--rail {
+    position: relative;
+    z-index: 1;
+    margin-left: 0;
+    padding-left: 0;
+    border-left: none;
+  }
+
+  /* Prompt uses ModelThinkingDisplay shell + .thinking-markdown (see ModelThinkingDisplay.scss). */
+  .task-expanded-content .thinking-content {
+    /* Override thinking card 300px cap: ~5 lines (matches .thinking-markdown line-height 1.45). */
+    max-height: calc(1.45em * 5);
+  }
+
+  /* Extra breathing room below header / divider before prompt + actions. */
+  &.base-tool-card-wrapper > .base-tool-card-expanded {
+    padding-top: 14px;
   }
 
   .duration-text {
     display: flex;
     align-items: center;
-    gap: 3px;
-    color: var(--tool-card-text-muted);
-    font-size: 10px;
-    
+    gap: 4px;
+    color: var(--tool-card-text-secondary, var(--color-text-secondary, #9ca3af));
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    line-height: 1.2;
+
     svg {
       flex-shrink: 0;
-    }
-  }
-
-  .open-panel-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    border: none;
-    border-radius: 4px;
-    background: transparent;
-    color: var(--color-text-muted);
-    cursor: pointer;
-    transition: all 0.15s ease;
-    flex-shrink: 0;
-    
-    &:hover {
-      background: var(--color-bg-hover, rgba(255, 255, 255, 0.08));
-      color: var(--color-text-primary);
+      opacity: 0.95;
     }
   }
 
@@ -393,6 +481,16 @@
   }
 }
 
+/* Loading: task status icon (cube) hidden; border-pulse + text-fade from BaseToolCard handle the rest */
+.task-tool-display.base-tool-card-wrapper--loading-shimmer .task-status-icon:has(.cube-loading) {
+  display: none !important;
+}
+
+/* E — task description text fades with the card */
+.task-tool-display.base-tool-card-wrapper--loading-shimmer .task-action {
+  animation: tool-card-text-fade 1.6s ease-in-out infinite;
+}
+
 @keyframes slideDown {
   from {
     opacity: 0;
diff --git a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.tsx b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.tsx
index 0808abe3..f95bb76b 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.tsx
@@ -2,20 +2,23 @@
  * TaskTool card display component.
  */
 
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import {
   Split,
   Timer,
-  PanelRightOpen
+  ChevronRight,
+  ChevronDown,
 } from 'lucide-react';
 
 import { useTranslation } from 'react-i18next';
-import { CubeLoading, Button, IconButton } from '../../component-library';
+import { CubeLoading, Button } from '../../component-library';
+import { Markdown } from '@/component-library/components/Markdown/Markdown';
 import type { ToolCardProps } from '../types/flow-chat';
 import { BaseToolCard } from './BaseToolCard';
 import { taskCollapseStateManager } from '../store/TaskCollapseStateManager';
 import { useToolCardHeightContract } from './useToolCardHeightContract';
 import './TaskToolDisplay.scss';
+import './ModelThinkingDisplay.scss';
 
 export const TaskToolDisplay: React.FC<ToolCardProps> = ({
   toolItem,
@@ -125,23 +128,97 @@ export const TaskToolDisplay: React.FC<ToolCardProps> = ({
   };
 
   const taskInput = getTaskInput();
+  const hasRealPrompt = Boolean(
+    taskInput && taskInput.prompt && taskInput.prompt !== 'Not provided',
+  );
+  const needsConfirmation =
+    requiresConfirmation && !userConfirmed && status !== 'completed';
+
+  /* Prompt body: same scroll + Markdown shell as ModelThinkingDisplay. */
+  const promptContentRef = useRef<HTMLDivElement>(null);
+  const [promptScrollState, setPromptScrollState] = useState({
+    hasScroll: false,
+    atTop: true,
+    atBottom: true,
+  });
+
+  const checkPromptScrollState = useCallback(() => {
+    const el = promptContentRef.current;
+    if (!el) return;
+    setPromptScrollState({
+      hasScroll: el.scrollHeight > el.clientHeight,
+      atTop: el.scrollTop <= 5,
+      atBottom: el.scrollTop + el.clientHeight >= el.scrollHeight - 5,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!isExpanded || !hasRealPrompt) return;
+    const timer = setTimeout(checkPromptScrollState, 50);
+    return () => clearTimeout(timer);
+  }, [isExpanded, hasRealPrompt, taskInput?.prompt, checkPromptScrollState]);
 
-  const isFailed = status === 'error';
+  const isFailed =
+    status === 'error' ||
+    (toolResult != null &&
+      'success' in toolResult &&
+      toolResult.success === false);
 
   const handleCardClick = useCallback((e: React.MouseEvent) => {
     const target = e.target as HTMLElement;
-    if (target.closest('.preview-toggle-btn') || target.closest('.tool-actions') || target.closest('.result-expand-toggle')) {
+    if (
+      target.closest('.preview-toggle-btn') ||
+      target.closest('.tool-actions') ||
+      target.closest('.result-expand-toggle') ||
+      target.closest('.task-header-rail__hit')
+    ) {
       return;
     }
-    
+
     if (isFailed) {
       return;
     }
-    
+
     // Pause auto-scroll while the user toggles the card.
     updateCardExpandedState(!isExpanded);
   }, [isFailed, isExpanded, updateCardExpandedState]);
 
+  const showHeaderExpandHint =
+    !isFailed && (hasRealPrompt || needsConfirmation);
+
+  const taskHeaderLine = useMemo(() => {
+    const desc =
+      (taskInput?.description || '').trim() || t('toolCards.taskDetailPanel.untitled');
+    const raw = taskInput?.agentType;
+    const agentTypeLabel =
+      raw && raw !== 'Not provided'
+        ? raw
+        : t('toolCards.taskTool.defaultAgentKind');
+    return t('toolCards.taskTool.headerLine', {
+      agentType: agentTypeLabel,
+      description: desc,
+    });
+  }, [taskInput, t]);
+
+  const openTaskDetailPanel = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const panelData = { toolItem, taskInput, sessionId };
+      const tabInfo = {
+        type: 'task-detail',
+        title: taskHeaderLine,
+        data: panelData,
+        metadata: { taskId: toolItem.id },
+      };
+      if (onOpenInPanel) {
+        onOpenInPanel(tabInfo.type, tabInfo);
+      } else {
+        window.dispatchEvent(new CustomEvent('agent-create-tab', { detail: tabInfo }));
+      }
+    },
+    [onOpenInPanel, sessionId, taskInput, toolItem, taskHeaderLine],
+  );
+
   const formatDuration = (ms: number) => {
     if (ms < 1000) return `${ms}ms`;
     const seconds = (ms / 1000).toFixed(1);
@@ -149,7 +226,7 @@ export const TaskToolDisplay: React.FC<ToolCardProps> = ({
   };
 
   const renderToolIcon = () => {
-    return <Split size={18} />;
+    return <Split size={16} />;
   };
 
   const renderStatusIcon = () => {
@@ -159,97 +236,98 @@ export const TaskToolDisplay: React.FC<ToolCardProps> = ({
     return null;
   };
 
-  const renderHeader = () => {
-    const hasPromptContent = taskInput && taskInput.prompt && taskInput.prompt !== 'Not provided';
-    
-    return (
+  const renderHeader = () => (
     <div className="task-header-wrapper">
-      <div className={`task-icon-container ${isRunning ? 'is-running' : ''} ${hasPromptContent ? 'prompt-visible' : ''}`}>
-        {renderToolIcon()}
+      <div
+        className={`task-icon-container ${isRunning ? 'is-running' : ''}${
+          showHeaderExpandHint ? ' task-icon-container--expandable' : ''
+        }`}
+      >
+        <div className="task-task-icon-marks">
+          <div className="task-task-icon-main">{renderToolIcon()}</div>
+          {showHeaderExpandHint && (
+            <span
+              className={`task-task-icon-hint${isExpanded ? ' task-task-icon-hint--open' : ''}`}
+              aria-hidden
+            >
+              <ChevronDown size={16} strokeWidth={2} absoluteStrokeWidth />
+            </span>
+          )}
+        </div>
       </div>
-      
+
       <div className="task-content-wrapper">
-        <div className={`task-header-main ${isFailed ? 'task-header-main--failed' : ''}`}>
-          <span className="task-action">
-            {taskInput?.description || ''}
-          </span>
-          {taskInput?.agentType && (
-            <span className="agent-type-badge">{taskInput.agentType}</span>
-          )}
-          <div className="task-header-extra">
-            {status === 'completed' && toolResult?.result?.duration && (
-              <span className="duration-text">
-                <Timer size={11} />
-                {formatDuration(toolResult.result.duration)}
-              </span>
-            )}
-            {isFailed && (
-              <span className="task-failed-badge">{t('toolCards.taskTool.failed')}</span>
-            )}
-            
-            <IconButton
-              className="open-panel-btn"
-              variant="ghost"
-              size="small"
-              onClick={(e) => {
-                e.stopPropagation();
-                const panelData = { toolItem, taskInput, sessionId };
-                const tabInfo = {
-                  type: 'task-detail',
-                  title: taskInput?.description || 'Sub Agent Task',
-                  data: panelData,
-                  metadata: { taskId: toolItem.id }
-                };
-                if (onOpenInPanel) {
-                  onOpenInPanel(tabInfo.type, tabInfo);
-                } else {
-                  window.dispatchEvent(new CustomEvent('agent-create-tab', { detail: tabInfo }));
-                }
-              }}
-              tooltip={t('toolCards.taskTool.openInPanel')}
-              tooltipPlacement="top"
-            >
-              <PanelRightOpen size={14} />
-            </IconButton>
-            
-            <div className="task-status-icon">
-              {renderStatusIcon()}
+        <div className="task-body-columns">
+          <div className="task-body-main">
+            <div className={`task-header-main ${isFailed ? 'task-header-main--failed' : ''}`}>
+              <span className="task-action">{taskHeaderLine}</span>
+              <div className="task-header-meta">
+                {status === 'completed' && toolResult?.result?.duration && (
+                  <span className="duration-text">
+                    <Timer size={13} strokeWidth={2} />
+                    {formatDuration(toolResult.result.duration)}
+                  </span>
+                )}
+                {isFailed && (
+                  <span className="task-failed-badge">{t('toolCards.taskTool.failed')}</span>
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="task-header-rail">
+            <button
+              type="button"
+              className="task-header-rail__hit"
+              onClick={openTaskDetailPanel}
+              aria-label={t('toolCards.taskTool.openInPanel')}
+              title={t('toolCards.taskTool.openInPanel')}
+            />
+            <div className="task-header-rail__visual" aria-hidden>
+              <ChevronRight size={18} strokeWidth={2} absoluteStrokeWidth />
+              <div className="task-status-icon task-status-icon--rail">
+                {renderStatusIcon()}
+              </div>
             </div>
           </div>
         </div>
-        {renderPromptRow()}
       </div>
     </div>
-  )};
+  );
 
-  const renderPromptRow = () => {
-    const hasPrompt = taskInput && taskInput.prompt && taskInput.prompt !== 'Not provided';
-    
-    if (!hasPrompt) {
+  const renderExpandedContent = () => {
+    /* Failure only in header badge; do not keep prompt/confirm in expanded body. */
+    if (isFailed) {
       return null;
     }
-    
-    return (
-      <div className="task-prompt-row">
-        <div className="task-prompt-content">
-          {taskInput!.prompt}
-        </div>
-      </div>
-    );
-  };
 
-  const renderExpandedContent = () => {
-    const needsConfirmation = requiresConfirmation && !userConfirmed && status !== 'completed';
-    
-    if (!needsConfirmation) {
+    if (!hasRealPrompt && !needsConfirmation) {
       return null;
     }
-    
+
     return (
       <div className="task-expanded-content">
+        {hasRealPrompt && (
+          <div
+            className={`thinking-content-wrapper${promptScrollState.hasScroll ? ' has-scroll' : ''}${
+              promptScrollState.atTop ? ' at-top' : ''
+            }${promptScrollState.atBottom ? ' at-bottom' : ''}`}
+          >
+            <div
+              ref={promptContentRef}
+              className="thinking-content expanded"
+              onScroll={checkPromptScrollState}
+            >
+              <Markdown
+                content={taskInput!.prompt}
+                isStreaming={false}
+                className="thinking-markdown"
+              />
+            </div>
+          </div>
+        )}
         {needsConfirmation && (
           <div className="tool-actions">
-            <Button 
+            <Button
               className="confirm-button"
               variant="primary"
               size="small"
@@ -258,7 +336,7 @@ export const TaskToolDisplay: React.FC<ToolCardProps> = ({
             >
               {t('toolCards.taskTool.confirmDelegate')}
             </Button>
-            <Button 
+            <Button
               className="reject-button"
               variant="ghost"
               size="small"
@@ -282,6 +360,7 @@ export const TaskToolDisplay: React.FC<ToolCardProps> = ({
         className="task-tool-display"
         header={renderHeader()}
         expandedContent={renderExpandedContent()}
+        headerExpandAffordance={showHeaderExpandHint}
         isFailed={isFailed}
         requiresConfirmation={requiresConfirmation && !userConfirmed}
       />
diff --git a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.scss b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.scss
index 8d39db65..4aeb74e0 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.scss
+++ b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.scss
@@ -55,7 +55,7 @@
   font-family: var(--tool-card-font-mono);
   font-size: 12px;
   font-weight: 500;
-  color: var(--color-text-primary);
+  color: var(--tool-card-text-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -76,7 +76,7 @@
       border: none !important;
       outline: none !important;
       box-shadow: none !important;
-      color: var(--color-text-primary);
+      color: var(--text-secondary, var(--color-text-secondary));
     }
   }
 
@@ -95,12 +95,6 @@
   }
 }
 
-:root[data-theme="light"] .terminal-command,
-:root[data-theme-type="light"] .terminal-command,
-.light .terminal-command {
-  color: var(--color-text-secondary);
-}
-
 .terminal-command-input {
   flex: 1;
   min-width: 0;
diff --git a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
index a1586768..9fcb7252 100644
--- a/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
+++ b/src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.tsx
@@ -647,6 +647,7 @@ export const TerminalToolCard: React.FC<TerminalToolCardProps> = ({
         errorContent={isFailed ? renderErrorContent() : null}
         isFailed={isFailed}
         requiresConfirmation={showConfirmButtons}
+        headerExpandAffordance
       />
     </div>
   );
diff --git a/src/web-ui/src/flow_chat/tool-cards/index.ts b/src/web-ui/src/flow_chat/tool-cards/index.ts
index 42f9cecd..9ea45b4c 100644
--- a/src/web-ui/src/flow_chat/tool-cards/index.ts
+++ b/src/web-ui/src/flow_chat/tool-cards/index.ts
@@ -384,15 +384,14 @@ export function getToolCardConfig(toolName: string): ToolCardConfig {
     // Parse MCP tool name: mcp_{server_id}_{tool_name}
     const parts = toolName.split('_');
     const actualToolName = parts.slice(2).join('_'); // Actual tool name.
-    const serverName = parts[1] || 'MCP'; // Server ID.
-    
+
     return {
       toolName,
       displayName: actualToolName || toolName,
       icon: 'MCP',
       requiresConfirmation: false,
       resultDisplayType: 'detailed',
-      description: `MCP tool from ${serverName}`,
+      description: 'MCP',
       displayMode: 'compact',
       primaryColor: '#8b5cf6'
     };
@@ -446,8 +445,18 @@ export function getAllToolNames(): string[] {
 }
 
 // Export components
-export { BaseToolCard, ToolCardHeader } from './BaseToolCard';
-export type { BaseToolCardProps, ToolCardHeaderProps } from './BaseToolCard';
+export {
+  BaseToolCard,
+  ToolCardHeader,
+  ToolCardHeaderLayoutContext,
+  useToolCardHeaderLayout,
+} from './BaseToolCard';
+export type {
+  BaseToolCardProps,
+  ToolCardHeaderProps,
+  ToolCardHeaderLayoutContextValue,
+  ToolCardHeaderAffordanceKind,
+} from './BaseToolCard';
 export { PlanDisplay } from './CreatePlanDisplay';
 export type { PlanDisplayProps } from './CreatePlanDisplay';
 
diff --git a/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx b/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
index eef89f19..9e7ad7a9 100644
--- a/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Plus, Edit2, Trash2, Wifi, Loader, AlertTriangle, X, Settings, ExternalLink, Eye, EyeOff } from 'lucide-react';
+import { Plus, SquarePen, Trash2, Wifi, Loader, AlertTriangle, X, Settings, ExternalLink, Eye, EyeOff } from 'lucide-react';
 import { Button, Switch, Select, IconButton, NumberInput, Card, Checkbox, Modal, Input, Textarea, type SelectOption } from '@/component-library';
 import { 
   AIModelConfig as AIModelConfigType, 
@@ -1765,7 +1765,7 @@ const AIModelConfig: React.FC = () => {
           onClick={() => handleEdit(config)}
           tooltip={t('actions.edit')}
         >
-          <Edit2 size={14} />
+          <SquarePen size={14} />
         </IconButton>
         <IconButton
           variant="danger"
@@ -1850,7 +1850,7 @@ const AIModelConfig: React.FC = () => {
                         onClick={() => handleEditProvider(group.models[0])}
                         tooltip={t('actions.edit')}
                       >
-                        <Edit2 size={14} />
+                        <SquarePen size={14} />
                       </IconButton>
                     </div>
                   </div>
diff --git a/src/web-ui/src/infrastructure/hooks/index.ts b/src/web-ui/src/infrastructure/hooks/index.ts
index 6355d0f6..2d3a4bbc 100644
--- a/src/web-ui/src/infrastructure/hooks/index.ts
+++ b/src/web-ui/src/infrastructure/hooks/index.ts
@@ -5,3 +5,4 @@
 // AI hooks
 export * from './useAIInitialization';
 export * from './useAIRules';
+export * from './useWorkspaceManagerSync';
diff --git a/src/web-ui/src/infrastructure/hooks/useWorkspaceManagerSync.ts b/src/web-ui/src/infrastructure/hooks/useWorkspaceManagerSync.ts
new file mode 100644
index 00000000..a2f671db
--- /dev/null
+++ b/src/web-ui/src/infrastructure/hooks/useWorkspaceManagerSync.ts
@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import { workspaceManager } from '../services/business/workspaceManager';
+
+function readWorkspaceFields() {
+  const ws = workspaceManager.getState().currentWorkspace;
+  return {
+    workspacePath: ws?.rootPath ?? '',
+    hasWorkspace: !!ws,
+  };
+}
+
+/**
+ * Active workspace path and presence, synced from {@link workspaceManager}.
+ * Use where React context may not match the app root provider (e.g. duplicate
+ * context module in a lazy chunk); behavior aligns with WorkspaceProvider state.
+ */
+export function useWorkspaceManagerSync(): {
+  workspacePath: string;
+  hasWorkspace: boolean;
+} {
+  const [fields, setFields] = useState(readWorkspaceFields);
+
+  useEffect(() => {
+    return workspaceManager.addEventListener(() => {
+      setFields(readWorkspaceFields());
+    });
+  }, []);
+
+  return fields;
+}
diff --git a/src/web-ui/src/infrastructure/theme/core/ThemeService.ts b/src/web-ui/src/infrastructure/theme/core/ThemeService.ts
index 68857174..5f6faa0b 100644
--- a/src/web-ui/src/infrastructure/theme/core/ThemeService.ts
+++ b/src/web-ui/src/infrastructure/theme/core/ThemeService.ts
@@ -367,8 +367,13 @@ export class ThemeService {
     root.style.setProperty('--border-medium', colors.border.medium);
     root.style.setProperty('--border-strong', colors.border.strong);
     root.style.setProperty('--border-prominent', colors.border.prominent);
-    
-    
+
+    const sceneViewportBorder = theme.layout?.sceneViewportBorder ?? true;
+    root.style.setProperty(
+      '--scene-viewport-border-width',
+      sceneViewportBorder ? '1px' : '0'
+    );
+
     root.style.setProperty('--element-bg-subtle', colors.element.subtle);
     root.style.setProperty('--element-bg-soft', colors.element.soft);
     root.style.setProperty('--element-bg-base', colors.element.base);
@@ -558,6 +563,22 @@ export class ThemeService {
       root.style.setProperty('--btn-default-hover-border', colors.border.medium);
       root.style.setProperty('--btn-default-hover-shadow', 'none');
       root.style.setProperty('--btn-default-hover-transform', 'none');
+
+      const a = colors.accent;
+      root.style.setProperty('--btn-primary-bg', a[200]);
+      root.style.setProperty('--btn-primary-color', a[600]);
+      root.style.setProperty('--btn-primary-border', 'transparent');
+      root.style.setProperty('--btn-primary-shadow', 'none');
+      root.style.setProperty('--btn-primary-hover-bg', a[300]);
+      root.style.setProperty('--btn-primary-hover-color', colors.text.primary);
+      root.style.setProperty('--btn-primary-hover-border', 'transparent');
+      root.style.setProperty('--btn-primary-hover-shadow', 'none');
+      root.style.setProperty('--btn-primary-hover-transform', 'none');
+      root.style.setProperty('--btn-primary-active-bg', a[200]);
+      root.style.setProperty('--btn-primary-active-color', colors.text.primary);
+      root.style.setProperty('--btn-primary-active-border', 'transparent');
+      root.style.setProperty('--btn-primary-active-shadow', 'none');
+      root.style.setProperty('--btn-primary-active-transform', 'none');
     }
     
     
@@ -652,8 +673,13 @@ export class ThemeService {
       root.style.setProperty('--card-bg-subtle', 'rgba(255, 255, 255, 0.015)');
       root.style.setProperty('--card-bg-hover', 'rgba(255, 255, 255, 0.04)');
       root.style.setProperty('--card-bg-active', 'rgba(255, 255, 255, 0.05)');
-      root.style.setProperty('--card-bg-accent', 'rgba(96, 165, 250, 0.08)');
-      root.style.setProperty('--card-bg-accent-hover', 'rgba(96, 165, 250, 0.12)');
+      if (theme.id === 'bitfun-slate') {
+        root.style.setProperty('--card-bg-accent', 'rgba(209, 186, 122, 0.12)');
+        root.style.setProperty('--card-bg-accent-hover', 'rgba(209, 186, 122, 0.18)');
+      } else {
+        root.style.setProperty('--card-bg-accent', 'rgba(96, 165, 250, 0.08)');
+        root.style.setProperty('--card-bg-accent-hover', 'rgba(96, 165, 250, 0.12)');
+      }
       root.style.setProperty('--card-bg-purple', 'rgba(139, 92, 246, 0.08)');
       root.style.setProperty('--card-bg-purple-hover', 'rgba(139, 92, 246, 0.12)');
     } else {
@@ -663,8 +689,8 @@ export class ThemeService {
       root.style.setProperty('--card-bg-subtle', 'rgba(0, 0, 0, 0.04)');
       root.style.setProperty('--card-bg-hover', 'rgba(0, 0, 0, 0.065)');
       root.style.setProperty('--card-bg-active', 'rgba(0, 0, 0, 0.09)');
-      root.style.setProperty('--card-bg-accent', 'rgba(59, 130, 246, 0.12)');
-      root.style.setProperty('--card-bg-accent-hover', 'rgba(59, 130, 246, 0.18)');
+      root.style.setProperty('--card-bg-accent', 'rgba(15, 23, 42, 0.08)');
+      root.style.setProperty('--card-bg-accent-hover', 'rgba(15, 23, 42, 0.12)');
       root.style.setProperty('--card-bg-purple', 'rgba(124, 58, 237, 0.12)');
       root.style.setProperty('--card-bg-purple-hover', 'rgba(124, 58, 237, 0.18)');
     }
diff --git a/src/web-ui/src/infrastructure/theme/integrations/MonacoThemeSync.ts b/src/web-ui/src/infrastructure/theme/integrations/MonacoThemeSync.ts
index d17cdd7b..b2f1f28d 100644
--- a/src/web-ui/src/infrastructure/theme/integrations/MonacoThemeSync.ts
+++ b/src/web-ui/src/infrastructure/theme/integrations/MonacoThemeSync.ts
@@ -98,13 +98,13 @@ export class MonacoThemeSync {
               'diffEditor.insertedTextBorder': '#00000000',
               'diffEditor.removedTextBorder': '#00000000',
               
-              'editor.selectionBackground': 'rgba(90, 123, 178, 0.30)',
+              'editor.selectionBackground': 'rgba(15, 23, 42, 0.14)',
               'editor.selectionForeground': '#1e293b',
-              'editor.inactiveSelectionBackground': 'rgba(90, 123, 178, 0.20)',
-              'editor.selectionHighlightBackground': 'rgba(90, 123, 178, 0.22)',
-              'editor.selectionHighlightBorder': 'rgba(90, 123, 178, 0.40)',
-              'editor.wordHighlightBackground': 'rgba(90, 123, 178, 0.15)',
-              'editor.wordHighlightStrongBackground': 'rgba(90, 123, 178, 0.25)',
+              'editor.inactiveSelectionBackground': 'rgba(15, 23, 42, 0.09)',
+              'editor.selectionHighlightBackground': 'rgba(15, 23, 42, 0.10)',
+              'editor.selectionHighlightBorder': 'rgba(15, 23, 42, 0.22)',
+              'editor.wordHighlightBackground': 'rgba(15, 23, 42, 0.07)',
+              'editor.wordHighlightStrongBackground': 'rgba(15, 23, 42, 0.11)',
             })
           });
         }
diff --git a/src/web-ui/src/infrastructure/theme/presets/china-style-theme.ts b/src/web-ui/src/infrastructure/theme/presets/china-style-theme.ts
index 9cd5f331..ca3dbccd 100644
--- a/src/web-ui/src/infrastructure/theme/presets/china-style-theme.ts
+++ b/src/web-ui/src/infrastructure/theme/presets/china-style-theme.ts
@@ -275,21 +275,21 @@ export const bitfunChinaStyleTheme: ThemeConfig = {
       
       primary: {
         default: {
-          background: 'rgba(46, 94, 138, 0.20)',
-          color: '#4a7aa5',
+          background: '#000000',
+          color: '#ffffff',
           border: 'transparent',
           shadow: 'none',
         },
         hover: {
-          background: 'rgba(46, 94, 138, 0.30)',
-          color: '#3d6689',
+          background: '#262626',
+          color: '#ffffff',
           border: 'transparent',
           shadow: 'none',
           transform: 'none',
         },
         active: {
-          background: 'rgba(46, 94, 138, 0.24)',
-          color: '#3d6689',
+          background: '#1a1a1a',
+          color: '#ffffff',
           border: 'transparent',
           shadow: 'none',
           transform: 'none',
diff --git a/src/web-ui/src/infrastructure/theme/presets/light-theme.ts b/src/web-ui/src/infrastructure/theme/presets/light-theme.ts
index 14efe3cd..aeb7fa84 100644
--- a/src/web-ui/src/infrastructure/theme/presets/light-theme.ts
+++ b/src/web-ui/src/infrastructure/theme/presets/light-theme.ts
@@ -7,19 +7,23 @@ export const bitfunLightTheme: ThemeConfig = {
   id: 'bitfun-light',
   name: 'Light',
   type: 'light',
-  description: 'Light theme - Elegant and refined, soft blue-gray tones',
+  description: 'Light theme - Neutral gray surfaces, black primary actions',
   author: 'BitFun Team',
-  version: '2.2.0',
+  version: '2.3.0',
+
+  layout: {
+    sceneViewportBorder: false,
+  },
   
   
   colors: {
     background: {
       primary: '#f3f3f5',
       secondary: '#ffffff',        
-      tertiary: '#dde2eb',         
-      quaternary: '#d4dae5',       
+      tertiary: '#e8eaee',         
+      quaternary: '#e0e3e8',       
       elevated: '#ffffff',         
-      workbench: '#e8ecf2',        
+      workbench: '#eceef1',        
       scene: '#ffffff',
       tooltip: 'rgba(255, 255, 255, 0.98)',
     },
@@ -33,15 +37,15 @@ export const bitfunLightTheme: ThemeConfig = {
     
     
     accent: {
-      50: 'rgba(71, 102, 143, 0.04)',
-      100: 'rgba(71, 102, 143, 0.08)',
-      200: 'rgba(71, 102, 143, 0.14)',
-      300: 'rgba(71, 102, 143, 0.22)',
-      400: 'rgba(71, 102, 143, 0.36)',
-      500: '#5a7bb2',              
-      600: '#4a6694',              
-      700: 'rgba(74, 102, 148, 0.8)',
-      800: 'rgba(74, 102, 148, 0.9)',
+      50: 'rgba(15, 23, 42, 0.04)',
+      100: 'rgba(15, 23, 42, 0.07)',
+      200: 'rgba(15, 23, 42, 0.10)',
+      300: 'rgba(15, 23, 42, 0.16)',
+      400: 'rgba(15, 23, 42, 0.26)',
+      500: '#64748b',
+      600: '#475569',
+      700: 'rgba(71, 85, 105, 0.88)',
+      800: 'rgba(51, 65, 85, 0.94)',
     },
     
     
@@ -71,9 +75,9 @@ export const bitfunLightTheme: ThemeConfig = {
       errorBg: 'rgba(194, 101, 101, 0.08)',
       errorBorder: 'rgba(194, 101, 101, 0.25)',
       
-      info: '#5a7bb2',             
-      infoBg: 'rgba(90, 123, 178, 0.08)',
-      infoBorder: 'rgba(90, 123, 178, 0.25)',
+      info: '#64748b',
+      infoBg: 'rgba(100, 116, 139, 0.10)',
+      infoBorder: 'rgba(100, 116, 139, 0.28)',
       
       
       highlight: '#b8863a',
@@ -91,18 +95,18 @@ export const bitfunLightTheme: ThemeConfig = {
     
     
     element: {
-      subtle: 'rgba(71, 102, 143, 0.06)',
-      soft: 'rgba(71, 102, 143, 0.08)',
-      base: 'rgba(71, 102, 143, 0.12)',
-      medium: 'rgba(71, 102, 143, 0.16)',
-      strong: 'rgba(71, 102, 143, 0.22)',
+      subtle: 'rgba(15, 23, 42, 0.045)',
+      soft: 'rgba(15, 23, 42, 0.065)',
+      base: 'rgba(15, 23, 42, 0.09)',
+      medium: 'rgba(15, 23, 42, 0.12)',
+      strong: 'rgba(15, 23, 42, 0.16)',
       elevated: 'rgba(255, 255, 255, 0.92)',
     },
     
     
     git: {
-      branch: 'rgb(90, 123, 178)',             
-      branchBg: 'rgba(90, 123, 178, 0.08)',
+      branch: 'rgb(71, 85, 105)',
+      branchBg: 'rgba(71, 85, 105, 0.10)',
       changes: 'rgb(192, 140, 66)',            
       changesBg: 'rgba(192, 140, 66, 0.08)',
       added: 'rgb(91, 154, 111)',              
@@ -128,9 +132,9 @@ export const bitfunLightTheme: ThemeConfig = {
     
     
     glow: {
-      blue: '0 8px 24px rgba(90, 123, 178, 0.15), 0 4px 12px rgba(90, 123, 178, 0.10), 0 2px 6px rgba(71, 85, 105, 0.05)',
-      purple: '0 8px 24px rgba(124, 107, 153, 0.15), 0 4px 12px rgba(124, 107, 153, 0.10), 0 2px 6px rgba(71, 85, 105, 0.05)',
-      mixed: '0 8px 24px rgba(90, 123, 178, 0.12), 0 4px 12px rgba(124, 107, 153, 0.08), 0 2px 6px rgba(71, 85, 105, 0.05)',
+      blue: '0 8px 24px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(71, 85, 105, 0.04)',
+      purple: '0 8px 24px rgba(15, 23, 42, 0.07), 0 4px 12px rgba(100, 116, 139, 0.06), 0 2px 6px rgba(71, 85, 105, 0.04)',
+      mixed: '0 8px 24px rgba(15, 23, 42, 0.07), 0 4px 12px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(71, 85, 105, 0.04)',
     },
     
     blur: {
@@ -228,20 +232,20 @@ export const bitfunLightTheme: ThemeConfig = {
     
     windowControls: {
       minimize: {
-        dot: 'rgba(90, 123, 178, 0.55)',
-        dotShadow: '0 0 4px rgba(90, 123, 178, 0.20)',
-        hoverBg: 'rgba(90, 123, 178, 0.14)',
-        hoverColor: '#4a6694',
-        hoverBorder: 'rgba(90, 123, 178, 0.25)',
-        hoverShadow: '0 2px 8px rgba(90, 123, 178, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6)',
+        dot: 'rgba(100, 116, 139, 0.5)',
+        dotShadow: '0 0 4px rgba(15, 23, 42, 0.12)',
+        hoverBg: 'rgba(15, 23, 42, 0.08)',
+        hoverColor: '#475569',
+        hoverBorder: 'rgba(100, 116, 139, 0.28)',
+        hoverShadow: '0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6)',
       },
       maximize: {
-        dot: 'rgba(90, 123, 178, 0.55)',
-        dotShadow: '0 0 4px rgba(90, 123, 178, 0.20)',
-        hoverBg: 'rgba(90, 123, 178, 0.14)',
-        hoverColor: '#4a6694',
-        hoverBorder: 'rgba(90, 123, 178, 0.25)',
-        hoverShadow: '0 2px 8px rgba(90, 123, 178, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6)',
+        dot: 'rgba(100, 116, 139, 0.5)',
+        dotShadow: '0 0 4px rgba(15, 23, 42, 0.12)',
+        hoverBg: 'rgba(15, 23, 42, 0.08)',
+        hoverColor: '#475569',
+        hoverBorder: 'rgba(100, 116, 139, 0.28)',
+        hoverShadow: '0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6)',
       },
       close: {
         dot: 'rgba(194, 101, 101, 0.55)',
@@ -262,21 +266,21 @@ export const bitfunLightTheme: ThemeConfig = {
     button: {
       
       default: {
-        background: 'rgba(71, 102, 143, 0.10)',
+        background: 'rgba(15, 23, 42, 0.07)',
         color: '#475569',
         border: 'transparent',
         shadow: 'none',
       },
       hover: {
-        background: 'rgba(71, 102, 143, 0.16)',
-        color: '#3d4f66',
+        background: 'rgba(15, 23, 42, 0.11)',
+        color: '#334155',
         border: 'transparent',
         shadow: 'none',
         transform: 'none',
       },
       active: {
-        background: 'rgba(71, 102, 143, 0.12)',
-        color: '#3d4f66',
+        background: 'rgba(15, 23, 42, 0.09)',
+        color: '#334155',
         border: 'transparent',
         shadow: 'none',
         transform: 'none',
@@ -285,21 +289,21 @@ export const bitfunLightTheme: ThemeConfig = {
       
       primary: {
         default: {
-          background: 'rgba(90, 123, 178, 0.18)',
-          color: '#4a6694',
+          background: '#000000',
+          color: '#ffffff',
           border: 'transparent',
           shadow: 'none',
         },
         hover: {
-          background: 'rgba(90, 123, 178, 0.28)',
-          color: '#3a5478',
+          background: '#262626',
+          color: '#ffffff',
           border: 'transparent',
           shadow: 'none',
           transform: 'none',
         },
         active: {
-          background: 'rgba(90, 123, 178, 0.22)',
-          color: '#3a5478',
+          background: '#1a1a1a',
+          color: '#ffffff',
           border: 'transparent',
           shadow: 'none',
           transform: 'none',
@@ -315,15 +319,15 @@ export const bitfunLightTheme: ThemeConfig = {
           shadow: 'none',
         },
         hover: {
-          background: 'rgba(71, 102, 143, 0.12)',
-          color: '#3d4f66',
+          background: 'rgba(15, 23, 42, 0.08)',
+          color: '#334155',
           border: 'transparent',
           shadow: 'none',
           transform: 'none',
         },
         active: {
-          background: 'rgba(71, 102, 143, 0.08)',
-          color: '#3d4f66',
+          background: 'rgba(15, 23, 42, 0.055)',
+          color: '#334155',
           border: 'transparent',
           shadow: 'none',
           transform: 'none',
@@ -341,13 +345,13 @@ export const bitfunLightTheme: ThemeConfig = {
       { token: 'keyword', foreground: '6b5a89' },                           
       { token: 'string', foreground: '5b9a6f' },                            
       { token: 'number', foreground: 'b8863a' },                            
-      { token: 'type', foreground: '5a7bb2' },                              
-      { token: 'class', foreground: '5a7bb2' },                             
+      { token: 'type', foreground: '475569' },
+      { token: 'class', foreground: '475569' },
       { token: 'function', foreground: '7c6b99' },                          
       { token: 'variable', foreground: '475569' },                          
       { token: 'constant', foreground: 'c08c42' },                          
       { token: 'operator', foreground: '6b5a89' },                          
-      { token: 'tag', foreground: '5a7bb2' },                               
+      { token: 'tag', foreground: '475569' },
       { token: 'attribute.name', foreground: '7c6b99' },                    
       { token: 'attribute.value', foreground: '5b9a6f' },                   
     ],
@@ -355,19 +359,18 @@ export const bitfunLightTheme: ThemeConfig = {
       background: '#f7f8fa',                      
       foreground: '#1e293b',                      
       lineHighlight: '#f0f4f8',                   
-      selection: 'rgba(90, 123, 178, 0.30)',      
-      cursor: '#5a7bb2',                          
-      
-      
-      'editor.selectionBackground': 'rgba(90, 123, 178, 0.30)',  
-      'editor.selectionForeground': '#1e293b',     
-      'editor.inactiveSelectionBackground': 'rgba(90, 123, 178, 0.20)',  
-      'editor.selectionHighlightBackground': 'rgba(90, 123, 178, 0.22)',  
-      'editor.selectionHighlightBorder': 'rgba(90, 123, 178, 0.40)',      
-      'editorCursor.foreground': '#5a7bb2',       
-      
-      'editor.wordHighlightBackground': 'rgba(90, 123, 178, 0.15)',  
-      'editor.wordHighlightStrongBackground': 'rgba(90, 123, 178, 0.25)',  
+      selection: 'rgba(15, 23, 42, 0.14)',
+      cursor: '#1e293b',
+
+      'editor.selectionBackground': 'rgba(15, 23, 42, 0.14)',
+      'editor.selectionForeground': '#1e293b',
+      'editor.inactiveSelectionBackground': 'rgba(15, 23, 42, 0.09)',
+      'editor.selectionHighlightBackground': 'rgba(15, 23, 42, 0.10)',
+      'editor.selectionHighlightBorder': 'rgba(15, 23, 42, 0.22)',
+      'editorCursor.foreground': '#1e293b',
+
+      'editor.wordHighlightBackground': 'rgba(15, 23, 42, 0.07)',
+      'editor.wordHighlightStrongBackground': 'rgba(15, 23, 42, 0.11)',
     },
   },
 };
diff --git a/src/web-ui/src/infrastructure/theme/presets/slate-theme.ts b/src/web-ui/src/infrastructure/theme/presets/slate-theme.ts
index 5f5e41e6..3e602a8b 100644
--- a/src/web-ui/src/infrastructure/theme/presets/slate-theme.ts
+++ b/src/web-ui/src/infrastructure/theme/presets/slate-theme.ts
@@ -9,7 +9,7 @@ export const bitfunSlateTheme: ThemeConfig = {
   type: 'dark',
   description: 'Slate gray geometric theme - Deep immersion, high contrast grayscale aesthetics',
   author: 'BitFun Team',
-  version: '1.2.5',
+  version: '1.2.7',
   
   
   colors: {
@@ -32,16 +32,17 @@ export const bitfunSlateTheme: ThemeConfig = {
     },
     
     
+    // Antique gold accent: warm, restrained, reads well on charcoal slate (nav wells, CTAs).
     accent: {
-      50: 'rgba(122, 176, 238, 0.04)',
-      100: 'rgba(122, 176, 238, 0.08)',
-      200: 'rgba(122, 176, 238, 0.15)',
-      300: 'rgba(122, 176, 238, 0.25)',
-      400: 'rgba(122, 176, 238, 0.4)',
-      500: '#7ab0ee',
-      600: '#689ad8',
-      700: 'rgba(104, 154, 216, 0.8)',
-      800: 'rgba(104, 154, 216, 0.9)',
+      50: 'rgba(209, 186, 122, 0.06)',
+      100: 'rgba(209, 186, 122, 0.11)',
+      200: 'rgba(209, 186, 122, 0.20)',
+      300: 'rgba(209, 186, 122, 0.34)',
+      400: 'rgba(209, 186, 122, 0.50)',
+      500: '#cfba7a',
+      600: '#b89d52',
+      700: 'rgba(184, 157, 82, 0.88)',
+      800: 'rgba(184, 157, 82, 0.94)',
     },
     
     
@@ -62,17 +63,17 @@ export const bitfunSlateTheme: ThemeConfig = {
       successBg: 'rgba(127, 184, 153, 0.1)',
       successBorder: 'rgba(127, 184, 153, 0.3)',
       
-      warning: '#d4a574',       
-      warningBg: 'rgba(212, 165, 116, 0.1)',
-      warningBorder: 'rgba(212, 165, 116, 0.3)',
+      warning: '#c4916a',
+      warningBg: 'rgba(196, 145, 106, 0.12)',
+      warningBorder: 'rgba(196, 145, 106, 0.32)',
       
       error: '#c9878d',         
       errorBg: 'rgba(201, 135, 141, 0.1)',
       errorBorder: 'rgba(201, 135, 141, 0.3)',
       
-      info: '#7ab0ee',
-      infoBg: 'rgba(122, 176, 238, 0.1)',
-      infoBorder: 'rgba(122, 176, 238, 0.3)',
+      info: '#cfba7a',
+      infoBg: 'rgba(209, 186, 122, 0.12)',
+      infoBorder: 'rgba(209, 186, 122, 0.34)',
       
       
       highlight: '#e2e4e7',
@@ -97,8 +98,8 @@ export const bitfunSlateTheme: ThemeConfig = {
     },
     
     git: {
-      branch: '#7ab0ee',
-      branchBg: 'rgba(122, 176, 238, 0.1)',
+      branch: '#cfba7a',
+      branchBg: 'rgba(209, 186, 122, 0.12)',
       changes: 'rgb(212, 165, 116)',
       changesBg: 'rgba(212, 165, 116, 0.1)',
       added: 'rgb(127, 184, 153)',
@@ -110,8 +111,8 @@ export const bitfunSlateTheme: ThemeConfig = {
     },
     
     scrollbar: {
-      thumb: 'rgba(168, 171, 176, 0.18)',
-      thumbHover: 'rgba(168, 171, 176, 0.32)',
+      thumb: 'rgba(200, 188, 168, 0.24)',
+      thumbHover: 'rgba(212, 198, 172, 0.38)',
     },
   },
   
@@ -127,9 +128,9 @@ export const bitfunSlateTheme: ThemeConfig = {
     },
     
     glow: {
-      blue: '0 12px 32px rgba(122, 176, 238, 0.22), 0 6px 16px rgba(122, 176, 238, 0.15), 0 3px 8px rgba(0, 0, 0, 0.2)',
+      blue: '0 12px 32px rgba(209, 186, 122, 0.22), 0 6px 16px rgba(209, 186, 122, 0.14), 0 3px 8px rgba(0, 0, 0, 0.2)',
       purple: '0 12px 32px rgba(184, 198, 255, 0.22), 0 6px 16px rgba(184, 198, 255, 0.15), 0 3px 8px rgba(0, 0, 0, 0.2)',
-      mixed: '0 12px 32px rgba(122, 176, 238, 0.18), 0 6px 16px rgba(184, 198, 255, 0.15), 0 3px 8px rgba(0, 0, 0, 0.2)',
+      mixed: '0 12px 32px rgba(209, 186, 122, 0.18), 0 6px 16px rgba(184, 198, 255, 0.14), 0 3px 8px rgba(0, 0, 0, 0.2)',
     },
     
     blur: {
@@ -227,20 +228,20 @@ export const bitfunSlateTheme: ThemeConfig = {
     
     windowControls: {
       minimize: {
-        dot: 'rgba(122, 176, 238, 0.5)',
-        dotShadow: '0 0 4px rgba(122, 176, 238, 0.25)',
-        hoverBg: 'rgba(122, 176, 238, 0.15)',
-        hoverColor: '#7ab0ee',
-        hoverBorder: 'rgba(122, 176, 238, 0.25)',
-        hoverShadow: '0 2px 8px rgba(122, 176, 238, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
+        dot: 'rgba(209, 186, 122, 0.55)',
+        dotShadow: '0 0 4px rgba(209, 186, 122, 0.26)',
+        hoverBg: 'rgba(209, 186, 122, 0.18)',
+        hoverColor: '#e8d9a8',
+        hoverBorder: 'rgba(209, 186, 122, 0.32)',
+        hoverShadow: '0 2px 8px rgba(209, 186, 122, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
       },
       maximize: {
-        dot: 'rgba(122, 176, 238, 0.5)',
-        dotShadow: '0 0 4px rgba(122, 176, 238, 0.25)',
-        hoverBg: 'rgba(122, 176, 238, 0.15)',
-        hoverColor: '#7ab0ee',
-        hoverBorder: 'rgba(122, 176, 238, 0.25)',
-        hoverShadow: '0 2px 8px rgba(122, 176, 238, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
+        dot: 'rgba(209, 186, 122, 0.55)',
+        dotShadow: '0 0 4px rgba(209, 186, 122, 0.26)',
+        hoverBg: 'rgba(209, 186, 122, 0.18)',
+        hoverColor: '#e8d9a8',
+        hoverBorder: 'rgba(209, 186, 122, 0.32)',
+        hoverShadow: '0 2px 8px rgba(209, 186, 122, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.08)',
       },
       close: {
         dot: 'rgba(201, 135, 141, 0.5)',
@@ -254,28 +255,28 @@ export const bitfunSlateTheme: ThemeConfig = {
         defaultColor: 'rgba(232, 234, 236, 0.92)',
         defaultDot: 'rgba(198, 202, 208, 0.48)',
         disabledDot: 'rgba(168, 171, 176, 0.2)',
-        flowGradient: 'linear-gradient(90deg, transparent, rgba(168, 171, 176, 0.06), rgba(168, 171, 176, 0.10), rgba(168, 171, 176, 0.06), transparent)',
+        flowGradient: 'linear-gradient(90deg, transparent, rgba(200, 188, 168, 0.09), rgba(200, 188, 168, 0.15), rgba(200, 188, 168, 0.09), transparent)',
       },
     },
     
     button: {
       
       default: {
-        background: 'rgba(168, 171, 176, 0.12)',
-        color: '#b8bcc2',
+        background: 'rgba(200, 192, 176, 0.14)',
+        color: '#c8c0b0',
         border: 'transparent',
         shadow: 'none',
       },
       hover: {
-        background: 'rgba(168, 171, 176, 0.18)',
-        color: '#d6d8dc',
+        background: 'rgba(210, 200, 180, 0.22)',
+        color: '#ebe4d6',
         border: 'transparent',
         shadow: 'none',
         transform: 'none',
       },
       active: {
-        background: 'rgba(168, 171, 176, 0.15)',
-        color: '#d6d8dc',
+        background: 'rgba(205, 195, 175, 0.18)',
+        color: '#ebe4d6',
         border: 'transparent',
         shadow: 'none',
         transform: 'none',
@@ -284,21 +285,21 @@ export const bitfunSlateTheme: ThemeConfig = {
       
       primary: {
         default: {
-          background: 'rgba(122, 176, 238, 0.22)',
-          color: '#7ab0ee',
+          background: 'rgba(209, 186, 122, 0.38)',
+          color: '#f5e9c8',
           border: 'transparent',
           shadow: 'none',
         },
         hover: {
-          background: 'rgba(122, 176, 238, 0.32)',
-          color: '#9cc4f4',
+          background: 'rgba(209, 186, 122, 0.50)',
+          color: '#fff8e8',
           border: 'transparent',
           shadow: 'none',
           transform: 'none',
         },
         active: {
-          background: 'rgba(122, 176, 238, 0.26)',
-          color: '#9cc4f4',
+          background: 'rgba(209, 186, 122, 0.42)',
+          color: '#fff8e8',
           border: 'transparent',
           shadow: 'none',
           transform: 'none',
@@ -309,20 +310,20 @@ export const bitfunSlateTheme: ThemeConfig = {
       ghost: {
         default: {
           background: 'transparent',
-          color: '#b8bcc2',
+          color: '#c8c0b0',
           border: 'transparent',
           shadow: 'none',
         },
         hover: {
-          background: 'rgba(168, 171, 176, 0.14)',
-          color: '#d6d8dc',
+          background: 'rgba(200, 192, 176, 0.16)',
+          color: '#ebe4d6',
           border: 'transparent',
           shadow: 'none',
           transform: 'none',
         },
         active: {
-          background: 'rgba(168, 171, 176, 0.11)',
-          color: '#d6d8dc',
+          background: 'rgba(200, 192, 176, 0.12)',
+          color: '#ebe4d6',
           border: 'transparent',
           shadow: 'none',
           transform: 'none',
@@ -337,15 +338,15 @@ export const bitfunSlateTheme: ThemeConfig = {
     inherit: true,
     rules: [
       { token: 'comment', foreground: '9ca2a9', fontStyle: 'italic' },
-      { token: 'keyword', foreground: '7ab0ee' },
+      { token: 'keyword', foreground: 'cfba7a' },
       { token: 'string', foreground: '8fc8a9' },
       { token: 'number', foreground: 'b5c4fc' },
       { token: 'type', foreground: 'e4b584' },
       { token: 'class', foreground: 'e4b584' },
-      { token: 'function', foreground: '9cc4f4' },
+      { token: 'function', foreground: 'e8d9a8' },
       { token: 'variable', foreground: 'c4c8ce' },
       { token: 'constant', foreground: 'b5c4fc' },
-      { token: 'operator', foreground: '7ab0ee' },
+      { token: 'operator', foreground: 'cfba7a' },
       { token: 'tag', foreground: 'e4b584' },
       { token: 'attribute.name', foreground: 'c4c8ce' },
       { token: 'attribute.value', foreground: '8fc8a9' },
@@ -354,8 +355,8 @@ export const bitfunSlateTheme: ThemeConfig = {
       background: '#1a1c1e',
       foreground: '#eef0f3',
       lineHighlight: '#22252a',
-      selection: 'rgba(122, 176, 238, 0.3)',
-      cursor: '#7ab0ee',
+      selection: 'rgba(209, 186, 122, 0.30)',
+      cursor: '#cfba7a',
     },
   },
 };
diff --git a/src/web-ui/src/infrastructure/theme/types/index.ts b/src/web-ui/src/infrastructure/theme/types/index.ts
index 503a6b14..1d4d0f6a 100644
--- a/src/web-ui/src/infrastructure/theme/types/index.ts
+++ b/src/web-ui/src/infrastructure/theme/types/index.ts
@@ -434,6 +434,14 @@ export interface ThemeConfig {
   
   // Monaco Editor
   monaco?: MonacoThemeConfig;
+
+  /**
+   * Workbench chrome (nav + scene). Per-theme toggles; omitted keys use product defaults.
+   */
+  layout?: {
+    /** Outer border around the main scene viewport (right panel). Default true. */
+    sceneViewportBorder?: boolean;
+  };
 }
 
 
diff --git a/src/web-ui/src/locales/en-US/flow-chat.json b/src/web-ui/src/locales/en-US/flow-chat.json
index 68fd396a..54e2e8e8 100644
--- a/src/web-ui/src/locales/en-US/flow-chat.json
+++ b/src/web-ui/src/locales/en-US/flow-chat.json
@@ -474,6 +474,7 @@
     },
     "plan": {
       "loadingPlan": "Loading plan...",
+      "generating": "Generating...",
       "clickToOpenPlan": "Click to open plan file",
       "remainingTodos": "{{count}} Remaining To-dos",
       "viewPlan": "View Plan",
@@ -555,6 +556,8 @@
       "processing": "Processing..."
     },
     "taskTool": {
+      "headerLine": "{{agentType}} agent: {{description}}",
+      "defaultAgentKind": "Sub-agent",
       "waitingConfirm": "Waiting for confirmation",
       "executing": "Executing...",
       "subAgentFailed": "Sub-agent task execution failed",
@@ -585,7 +588,7 @@
       }
     },
     "diagram": {
-      "interactive": "Interactive Visualization:",
+      "interactive": "Interactive diagram:",
       "preparing": "Preparing",
       "creating": "Creating",
       "mermaidInteractive": "Mermaid Interactive Chart"
@@ -618,7 +621,10 @@
       "cancel": "Cancel",
       "loadingApp": "Loading interactive app...",
       "appLoadError": "Failed to load app",
-      "interactiveApp": "interactive app"
+      "interactiveApp": "interactive app",
+      "actionLabel": "MCP:",
+      "failedLabel": "MCP failed",
+      "executionFailed": "MCP execution failed"
     },
     "default": {
       "waitingConfirm": "Waiting for confirmation",
@@ -631,8 +637,6 @@
     "skill": {
       "unknownSkill": "Unknown skill",
       "unknown": "Unknown",
-      "userLevel": "User level",
-      "projectLevel": "Project level",
       "loadSkillFailed": "Load skill failed",
       "skillAction": "Skill:"
     },
@@ -707,6 +711,7 @@
       "autoTrigger": "Auto trigger",
       "contextCompressionFailed": "Context compression failed",
       "contextCompression": "Context compression:",
+      "localFallbackHeader": "Model request failed; local structured trimming",
       "localFallbackNotice": "Model-based summary was unavailable, so this compression used local structured truncation.",
       "noSummaryNotice": "No additional summary was generated for this compaction pass."
     },
diff --git a/src/web-ui/src/locales/zh-CN/flow-chat.json b/src/web-ui/src/locales/zh-CN/flow-chat.json
index 1c33de8e..7f6e2190 100644
--- a/src/web-ui/src/locales/zh-CN/flow-chat.json
+++ b/src/web-ui/src/locales/zh-CN/flow-chat.json
@@ -466,6 +466,7 @@
     },
     "plan": {
       "loadingPlan": "正在加载计划...",
+      "generating": "生成中...",
       "clickToOpenPlan": "点击打开计划文件",
       "remainingTodos": "剩余 {{count}} 个待办",
       "viewPlan": "查看计划",
@@ -547,6 +548,8 @@
       "processing": "处理中..."
     },
     "taskTool": {
+      "headerLine": "{{agentType}} 智能体：{{description}}",
+      "defaultAgentKind": "子代理",
       "waitingConfirm": "等待确认",
       "executing": "执行中...",
       "subAgentFailed": "子代理任务执行失败",
@@ -577,7 +580,7 @@
       }
     },
     "diagram": {
-      "interactive": "可视化交互视图:",
+      "interactive": "交互图表:",
       "preparing": "准备中",
       "creating": "创建中",
       "mermaidInteractive": "Mermaid 交互图表"
@@ -610,7 +613,10 @@
       "cancel": "取消",
       "loadingApp": "加载交互应用中...",
       "appLoadError": "加载应用失败",
-      "interactiveApp": "交互应用"
+      "interactiveApp": "交互应用",
+      "actionLabel": "MCP：",
+      "failedLabel": "MCP 失败",
+      "executionFailed": "MCP 执行失败"
     },
     "default": {
       "waitingConfirm": "等待确认",
@@ -623,10 +629,8 @@
     "skill": {
       "unknownSkill": "未知技能",
       "unknown": "未知",
-      "userLevel": "用户级",
-      "projectLevel": "项目级",
       "loadSkillFailed": "加载技能失败",
-      "skillAction": "Skill技能:"
+      "skillAction": "技能:"
     },
     "readFile": {
       "parsingParams": "解析参数中...",
@@ -699,6 +703,7 @@
       "autoTrigger": "自动触发",
       "contextCompressionFailed": "上下文压缩失败",
       "contextCompression": "上下文压缩:",
+      "localFallbackHeader": "模型请求异常，已改用本地结构化裁剪",
       "localFallbackNotice": "本次压缩无法使用模型生成总结，因此改用了本地结构化裁剪。",
       "noSummaryNotice": "本次压缩没有生成额外的总结内容。"
     },
diff --git a/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.scss b/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.scss
index 12740131..63ea308f 100644
--- a/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.scss
+++ b/src/web-ui/src/shared/context-menu-system/components/ui/ContextMenu.scss
@@ -4,54 +4,48 @@
 
 
 
+// Surface + motion aligned with .bitfun-nav-panel__workspace-menu / __workspace-item-menu-popover
 .context-menu {
   position: fixed;
   z-index: $z-context-menu;
-  min-width: 200px;
-  max-width: 300px;
-  
-  
-  background: var(--color-bg-elevated);
-  
-  
-  border: 1px solid var(--border-medium);
-  border-radius: 4px;
-  
-  
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 2px;
-    border: 1px dashed var(--border-base);
-    border-radius: 2px;
-    pointer-events: none;
-    z-index: 0;
-  }
-  
-  
-  box-shadow: var(--shadow-lg);
-  
-  
-  backdrop-filter: var(--blur-medium);
-  -webkit-backdrop-filter: var(--blur-medium);
-  
-  padding: 6px;
-  
-  
+  min-width: 180px;
+  max-width: min(320px, calc(100vw - 24px));
+
+  background: var(--color-bg-elevated, #1e1e22);
+  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  border-radius: $size-radius-base;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+
+  padding: $size-gap-1 0;
+  box-sizing: border-box;
+
   opacity: 0;
-  transform: scale(0.95) translateY(-4px);
-  transition: all var(--motion-fast) var(--easing-standard);
+  transform: translateY(6px) scale(0.96);
+  transform-origin: top left;
+  transition:
+    opacity $motion-fast $easing-decelerate,
+    transform $motion-fast $easing-decelerate;
   pointer-events: none;
-  
-  
+
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-xs);
+  font-size: $font-size-sm;
   line-height: 1.4;
 
-  
+  :root[data-theme-type='light'] & {
+    box-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.05),
+      0 10px 28px -8px rgba(15, 23, 42, 0.12);
+  }
+
+  :root[data-theme-type='dark'] & {
+    box-shadow:
+      0 1px 0 color-mix(in srgb, #fff 4%, transparent),
+      0 10px 28px -8px rgba(0, 0, 0, 0.55);
+  }
+
   &.visible {
     opacity: 1;
-    transform: scale(1) translateY(0);
+    transform: translateY(0) scale(1);
     pointer-events: all;
   }
 }
@@ -61,37 +55,39 @@
 .context-menu-item {
   display: flex;
   align-items: center;
-  padding: 4px var(--size-gap-2);
-  margin: 1px 0;
-  border-radius: 3px;
+  width: 100%;
+  padding: 0 $size-gap-2;
+  min-height: 30px;
+  border: none;
+  border-radius: $size-radius-sm;
   color: var(--color-text-secondary);
+  font-weight: 400;
   cursor: pointer;
-  transition: background var(--motion-instant) ease, color var(--motion-instant) ease, box-shadow var(--motion-instant) ease;
+  transition:
+    color $motion-fast $easing-standard,
+    background $motion-fast $easing-standard;
   user-select: none;
   position: relative;
   z-index: 1;
-  gap: var(--size-gap-1);
-  min-height: 26px;
-  
-  border: 1px solid transparent;
-  
-  
+  gap: $size-gap-2;
+  box-sizing: border-box;
+
   &:hover:not(.disabled) {
-    background: var(--color-accent-100);
     color: var(--color-text-primary);
-    
-    box-shadow: inset 0 0 0 1px var(--color-accent-300);
+    background: var(--element-bg-soft);
   }
-  
-  
+
+  &:active:not(.disabled) {
+    background: var(--element-bg-medium);
+  }
+
   &.disabled {
-    color: var(--color-text-disabled);
-    cursor: default;
-    opacity: var(--opacity-disabled);
-    
+    color: var(--color-text-muted);
+    cursor: not-allowed;
+    opacity: 0.45;
+
     &:hover {
       background: transparent;
-      box-shadow: none;
     }
   }
 }
@@ -106,8 +102,9 @@
   justify-content: center;
   flex-shrink: 0;
   font-size: var(--font-size-xs);
-  opacity: 0.9;
-  
+  opacity: 0.7;
+  transition: opacity $motion-fast $easing-standard;
+
   .context-menu-item:hover:not(.disabled) & {
     opacity: 1;
   }
@@ -115,7 +112,7 @@
 
 .context-menu-item-label {
   flex: 1;
-  font-weight: var(--font-weight-medium);
+  font-weight: 400;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -139,15 +136,12 @@
 
 .context-menu-separator {
   height: 1px;
-  margin: 5px var(--size-gap-1);
-  opacity: 0.8;
+  margin: $size-gap-1 0;
   position: relative;
   z-index: 1;
-  
-  
   border: none;
-  border-top: 1px dashed var(--border-base);
-  background: transparent;
+  background: var(--border-subtle);
+  opacity: 1;
 }
 
 
@@ -181,7 +175,7 @@
   
   .context-menu-item:hover:not(.disabled) &::before,
   .context-menu-item.submenu-active &::before {
-    border-color: var(--color-accent-500);
+    border-color: var(--color-text-primary);
   }
   
   
@@ -236,37 +230,10 @@
 
 
 .context-menu-item.submenu-active:not(.disabled) {
-  background: var(--color-accent-100);
   color: var(--color-text-primary);
-  box-shadow: inset 0 0 0 1px var(--color-accent-300);
-}
-
-
-
-@keyframes contextMenuFadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
+  background: var(--element-bg-soft);
 }
 
-@keyframes contextMenuFadeOut {
-  from {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95) translateY(-4px);
-  }
-}
-
-
-
 @media (max-width: 768px) {
   .context-menu {
     min-width: 180px;
@@ -292,15 +259,13 @@
     border-color: var(--border-strong);
     box-shadow: var(--shadow-xl);
   }
-  
+
   .context-menu-item:hover:not(.disabled) {
-    background: var(--color-accent-300);
-    box-shadow: inset 0 0 0 1px var(--border-accent-soft);
+    background: var(--element-bg-medium);
   }
-  
+
   .context-menu-separator {
-    border-color: var(--border-medium);
-    opacity: 1;
+    background: var(--border-medium);
   }
 }
 
@@ -310,28 +275,22 @@
     transition: opacity var(--motion-instant) ease;
     transform: none;
   }
-  
-  .context-menu-item {
-    transition: background-color var(--motion-instant) ease;
-  }
-  
-  @keyframes contextMenuFadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+
+  .context-menu.visible {
+    transform: none;
   }
-  
-  @keyframes contextMenuFadeOut {
-    from { opacity: 1; }
-    to { opacity: 0; }
+
+  .context-menu-item {
+    transition: background-color var(--motion-instant) ease, color var(--motion-instant) ease;
   }
 }
 
 
 
 .context-menu-item:focus-visible {
-  outline: 2px solid var(--color-accent-500);
-  outline-offset: -2px;
-  border-radius: 3px;
+  outline: 1px solid var(--color-accent-500);
+  outline-offset: 1px;
+  border-radius: $size-radius-sm;
 }
 
 
@@ -340,11 +299,11 @@
 .context-menu-item {
   
   &.is-active {
-    background: var(--color-accent-100);
+    background: var(--element-bg-medium);
     color: var(--color-text-primary);
-    
+
     .context-menu-item-label {
-      font-weight: var(--font-weight-medium);
+      font-weight: 500;
     }
   }
   
@@ -363,9 +322,8 @@
   &--danger,
   &.context-menu-item--danger {
     &:hover:not(.disabled) {
-      background: var(--color-error-bg);
-      color: var(--color-error);
-      box-shadow: inset 0 0 0 1px var(--color-error-border);
+      color: var(--color-error, #ef4444);
+      background: color-mix(in srgb, var(--color-error, #ef4444) 10%, transparent);
     }
   }
 }
diff --git a/src/web-ui/src/shared/context-menu-system/providers/SelectionMenuProvider.ts b/src/web-ui/src/shared/context-menu-system/providers/SelectionMenuProvider.ts
index 245f4a8f..155ecb89 100644
--- a/src/web-ui/src/shared/context-menu-system/providers/SelectionMenuProvider.ts
+++ b/src/web-ui/src/shared/context-menu-system/providers/SelectionMenuProvider.ts
@@ -4,11 +4,7 @@ import { IMenuProvider } from '../types/provider.types';
 import { MenuItem } from '../types/menu.types';
 import { MenuContext, ContextType, SelectionContext } from '../types/context.types';
 import { commandExecutor } from '../commands/CommandExecutor';
-import { systemAPI } from '../../../infrastructure/api';
 import { i18nService } from '@/infrastructure/i18n';
-import { createLogger } from '@/shared/utils/logger';
-
-const log = createLogger('SelectionMenuProvider');
 
 export class SelectionMenuProvider implements IMenuProvider {
   readonly id = 'selection';
@@ -50,42 +46,11 @@ export class SelectionMenuProvider implements IMenuProvider {
       });
     }
 
-    
-    if (selectionContext.selectedText && selectionContext.selectedText.length < 100) {
-      items.push({
-        id: 'selection-separator-1',
-        label: '',
-        separator: true
-      });
-
-      items.push({
-        id: 'selection-search',
-        label: `${i18nService.t('common:actions.search')} "${this.truncateText(selectionContext.selectedText, 20)}"`,
-        icon: 'Search',
-        onClick: async (ctx) => {
-          const text = (ctx as SelectionContext).selectedText;
-          const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(text)}`;
-          try {
-            await systemAPI.openExternal(searchUrl);
-          } catch (error) {
-            log.error('Failed to open search URL', error as Error);
-          }
-        }
-      });
-    }
-
     return items;
   }
 
   isEnabled(): boolean {
     return true;
   }
-
-  private truncateText(text: string, maxLength: number): string {
-    if (text.length <= maxLength) {
-      return text;
-    }
-    return text.substring(0, maxLength) + '...';
-  }
 }
 
diff --git a/src/web-ui/src/tools/mermaid-editor/theme/_tokens.scss b/src/web-ui/src/tools/mermaid-editor/theme/_tokens.scss
index 809bb2ba..27dfb407 100644
--- a/src/web-ui/src/tools/mermaid-editor/theme/_tokens.scss
+++ b/src/web-ui/src/tools/mermaid-editor/theme/_tokens.scss
@@ -115,40 +115,40 @@
 }
 
 // ==================== Light theme overrides ====================
-// Subtle blue-gray palette.
+// Neutral gray surfaces (aligned with bitfun-light accent).
 [data-theme-type="light"],
 [data-theme*="light"],
 .light {
-  // Node styles - subtle blue-gray.
-  --mermaid-node-fill: rgba(71, 102, 143, 0.08);
-  --mermaid-node-fill-hover: rgba(71, 102, 143, 0.14);
+  // Node styles
+  --mermaid-node-fill: rgba(15, 23, 42, 0.06);
+  --mermaid-node-fill-hover: rgba(15, 23, 42, 0.10);
   --mermaid-node-stroke: rgba(100, 116, 139, 0.35);
-  --mermaid-node-stroke-hover: rgba(90, 123, 178, 0.6);
+  --mermaid-node-stroke-hover: rgba(51, 65, 85, 0.55);
   --mermaid-node-text: #1e293b;
   
-  // Edges - soft blue-gray.
+  // Edges
   --mermaid-edge-stroke: rgba(100, 116, 139, 0.35);
-  --mermaid-edge-stroke-hover: rgba(90, 123, 178, 0.6);
+  --mermaid-edge-stroke-hover: rgba(51, 65, 85, 0.5);
   --mermaid-edge-label-bg: #f7f8fa;
   --mermaid-edge-label-border: rgba(100, 116, 139, 0.25);
   --mermaid-edge-label-text: #475569;
   --mermaid-arrow-color: #64748b;
   
-  // Subgraph/cluster - subtle blue-gray background.
-  --mermaid-cluster-fill: rgba(71, 102, 143, 0.05);
+  // Subgraph/cluster
+  --mermaid-cluster-fill: rgba(15, 23, 42, 0.04);
   --mermaid-cluster-stroke: rgba(100, 116, 139, 0.25);
   --mermaid-cluster-text: #475569;
   
-  // Highlight - calm blue-gray.
-  --mermaid-highlight-stroke: #5a7bb2;
-  --mermaid-highlight-glow: drop-shadow(0 0 6px rgba(90, 123, 178, 0.30));
-  --mermaid-selected-stroke: #4a6694;
+  // Highlight - slate (matches light theme focus / accent)
+  --mermaid-highlight-stroke: #334155;
+  --mermaid-highlight-glow: drop-shadow(0 0 6px rgba(15, 23, 42, 0.18));
+  --mermaid-selected-stroke: #1e293b;
   
   // Interaction effects
   --mermaid-hover-filter: brightness(0.97);
   
-  // Sequence diagram - blue-gray.
-  --mermaid-actor-fill: rgba(71, 102, 143, 0.08);
+  // Sequence diagram
+  --mermaid-actor-fill: rgba(15, 23, 42, 0.06);
   --mermaid-actor-stroke: rgba(100, 116, 139, 0.35);
   --mermaid-actor-text: #1e293b;
   --mermaid-signal-stroke: rgba(100, 116, 139, 0.35);
@@ -156,18 +156,18 @@
   --mermaid-note-fill: rgba(184, 134, 58, 0.12);
   --mermaid-note-stroke: rgba(192, 140, 66, 0.4);
   --mermaid-note-text: #92400e;
-  --mermaid-activation-fill: rgba(90, 123, 178, 0.15);
-  --mermaid-activation-stroke: rgba(90, 123, 178, 0.4);
+  --mermaid-activation-fill: rgba(15, 23, 42, 0.10);
+  --mermaid-activation-stroke: rgba(51, 65, 85, 0.35);
   
-  // Gantt chart - blue-gray background.
+  // Gantt chart
   --mermaid-section-fill: #f7f8fa;
-  --mermaid-section-alt-fill: #f0f4f8;
+  --mermaid-section-alt-fill: #f0f1f3;
   --mermaid-grid-stroke: rgba(100, 116, 139, 0.15);
   --mermaid-task-text: #1e293b;
   --mermaid-done-fill: rgba(91, 154, 111, 0.15);
   --mermaid-done-stroke: #5b9a6f;
-  --mermaid-active-fill: rgba(90, 123, 178, 0.15);
-  --mermaid-active-stroke: #5a7bb2;
+  --mermaid-active-fill: rgba(15, 23, 42, 0.08);
+  --mermaid-active-stroke: #334155;
   --mermaid-crit-fill: rgba(194, 101, 101, 0.15);
   --mermaid-crit-stroke: #c26565;
   
@@ -175,10 +175,10 @@
   --mermaid-pie-stroke: #f7f8fa;
   --mermaid-pie-title-text: #1e293b;
   --mermaid-pie-legend-text: #475569;
-  --mermaid-pie-1: #5a7bb2;
+  --mermaid-pie-1: #475569;
   
-  // Class diagram - blue-gray.
-  --mermaid-class-fill: rgba(71, 102, 143, 0.08);
+  // Class diagram
+  --mermaid-class-fill: rgba(15, 23, 42, 0.06);
   --mermaid-class-stroke: rgba(100, 116, 139, 0.35);
   --mermaid-class-text: #1e293b;
   --mermaid-class-divider: rgba(100, 116, 139, 0.20);
diff --git a/src/web-ui/src/tools/mermaid-editor/theme/mermaidTheme.ts b/src/web-ui/src/tools/mermaid-editor/theme/mermaidTheme.ts
index c9d51dbb..7bd12c5d 100644
--- a/src/web-ui/src/tools/mermaid-editor/theme/mermaidTheme.ts
+++ b/src/web-ui/src/tools/mermaid-editor/theme/mermaidTheme.ts
@@ -79,16 +79,16 @@ function getThemeVariables() {
     gridColor: getCSSVar('--mermaid-grid-stroke', isDark ? '#3a3e48' : 'rgba(156, 163, 175, 0.3)'),
     doneTaskBkgColor: getCSSVar('--mermaid-done-fill', isDark ? 'rgba(109, 212, 160, 0.15)' : 'rgba(34, 197, 94, 0.2)'),
     doneTaskBorderColor: getCSSVar('--mermaid-done-stroke', isDark ? '#6dd4a0' : '#16a34a'),
-    activeTaskBkgColor: getCSSVar('--mermaid-active-fill', isDark ? 'rgba(120, 168, 216, 0.15)' : 'rgba(59, 130, 246, 0.2)'),
-    activeTaskBorderColor: getCSSVar('--mermaid-active-stroke', isDark ? '#78a8d8' : '#2563eb'),
+    activeTaskBkgColor: getCSSVar('--mermaid-active-fill', isDark ? 'rgba(120, 168, 216, 0.15)' : 'rgba(15, 23, 42, 0.08)'),
+    activeTaskBorderColor: getCSSVar('--mermaid-active-stroke', isDark ? '#78a8d8' : '#334155'),
     critBkgColor: getCSSVar('--mermaid-crit-fill', isDark ? 'rgba(232, 120, 120, 0.15)' : 'rgba(239, 68, 68, 0.2)'),
     critBorderColor: getCSSVar('--mermaid-crit-stroke', isDark ? '#e87878' : '#dc2626'),
     taskTextColor: getCSSVar('--mermaid-task-text', isDark ? '#e0e2e8' : '#1f2937'),
     taskTextOutsideColor: getCSSVar('--mermaid-edge-label-text', isDark ? '#9a9ea8' : '#4b5563'),
-    taskTextClickableColor: getCSSVar('--mermaid-info', isDark ? '#78a8d8' : '#2563eb'),
+    taskTextClickableColor: getCSSVar('--mermaid-info', isDark ? '#78a8d8' : '#475569'),
     classText: getCSSVar('--mermaid-class-text', isDark ? '#e0e2e8' : '#1f2937'),
     labelColor: getCSSVar('--mermaid-node-text', isDark ? '#e0e2e8' : '#1f2937'),
-    pie1: getCSSVar('--mermaid-pie-1', isDark ? '#78a8d8' : '#3b82f6'),
+    pie1: getCSSVar('--mermaid-pie-1', isDark ? '#78a8d8' : '#475569'),
     pie2: getCSSVar('--mermaid-pie-2', isDark ? '#6dd4a0' : '#16a34a'),
     pie3: getCSSVar('--mermaid-pie-3', isDark ? '#e8b060' : '#f59e0b'),
     pie4: getCSSVar('--mermaid-pie-4', isDark ? '#e87878' : '#dc2626'),
@@ -271,20 +271,19 @@ export function getRuntimeColors() {
       strokeHover: getCSSVar('--mermaid-edge-stroke-hover', isDark ? '#8a8e9a' : '#6b7280'),
     },
     highlight: {
-      // Use blue highlights in light theme for contrast.
-      stroke: getCSSVar('--mermaid-highlight-stroke', isDark ? '#a8acb8' : '#3b82f6'),
+      stroke: getCSSVar('--mermaid-highlight-stroke', isDark ? '#a8acb8' : '#334155'),
       glow: getCSSVar('--mermaid-highlight-glow', isDark 
         ? 'drop-shadow(0 0 6px rgba(168, 172, 184, 0.4))' 
-        : 'drop-shadow(0 0 6px rgba(59, 130, 246, 0.35))'),
+        : 'drop-shadow(0 0 6px rgba(15, 23, 42, 0.18))'),
       glowStrong: isDark 
         ? 'drop-shadow(0 0 10px rgba(168, 172, 184, 0.5))'
-        : 'drop-shadow(0 0 10px rgba(59, 130, 246, 0.5))',
+        : 'drop-shadow(0 0 10px rgba(15, 23, 42, 0.22))',
     },
     status: {
       success: getCSSVar('--mermaid-success', isDark ? '#6dd4a0' : '#16a34a'),
       error: getCSSVar('--mermaid-error', isDark ? '#e87878' : '#dc2626'),
       warning: getCSSVar('--mermaid-warning', isDark ? '#e8b060' : '#f59e0b'),
-      info: getCSSVar('--mermaid-info', isDark ? '#78a8d8' : '#2563eb'),
+      info: getCSSVar('--mermaid-info', isDark ? '#78a8d8' : '#64748b'),
     },
     text: {
       primary: getCSSVar('--mermaid-node-text', isDark ? '#e0e2e8' : '#1f2937'),
diff --git a/src/web-ui/vite.config.ts b/src/web-ui/vite.config.ts
index e54e9536..2bda8e7d 100644
--- a/src/web-ui/vite.config.ts
+++ b/src/web-ui/vite.config.ts
@@ -17,6 +17,7 @@ export default defineConfig(({ mode, command }) => {
 
     // Path resolution
     resolve: {
+      dedupe: ['react', 'react-dom'],
       alias: {
         "@": path.resolve(__dirname, "./src"),
         "@/shared": path.resolve(__dirname, "./src/shared"),