diff --git a/src/web-ui/src/app/components/NavPanel/MainNav.tsx b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
index 7cee4b4605..457f4e550a 100644
--- a/src/web-ui/src/app/components/NavPanel/MainNav.tsx
+++ b/src/web-ui/src/app/components/NavPanel/MainNav.tsx
@@ -2,7 +2,7 @@
  * MainNav — primary product navigation sidebar.
  *
  * Layout (top to bottom):
- *   1. Search and client voice assistant
+ *   1. Search and New Session
  *   2. AI Assistant, Task Board, Mini Apps, then Extensions & Compatibility
  *   3. Unified Sessions (all or grouped by project / assistant)
  *
@@ -15,7 +15,7 @@ import { createPortal } from 'react-dom';
 import { Icon, KeyHint, Menu, MenuItem, MenuSection, MenuSeparator, NavigationPanel, ScrollArea, Tooltip } from '@bitfun/ui';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
 import { isImeOwnedKeyboardEvent } from '@/shared/utils/ime';
-import { FolderOpen, FolderPlus, History, Users, Network, CalendarClock } from 'lucide-react';
+import { Plus, FolderOpen, FolderPlus, History, Users, Network, CalendarClock } from 'lucide-react';
 // import { PanelsTopLeft } from 'lucide-react'; // temporarily hidden: Pages nav entry
 import {
   BITFUN_ICON_SIZE,
@@ -48,7 +48,6 @@ import {
   subscribeGlobalSearchShortcut,
 } from '@/app/global-search/globalSearchShortcut';
 import { useExternalAppAwareness } from '@/infrastructure/config/components/external-sources/useExternalAppAwareness';
-import { RealtimeVoiceCallButton } from '@/flow_chat/components/voice/RealtimeVoiceCallButton';
 
 import './NavPanel.scss';
 
@@ -245,6 +244,10 @@ const MainNav: React.FC<MainNavProps> = ({
     };
   }, [workspaceMenuOpen, updateWorkspaceMenuPos]);
 
+  const handleCreateSession = useCallback(() => {
+    void activateProductAction('session.new');
+  }, []);
+
   const handleOpenAgents = useCallback(() => {
     void activateProductAction('surface.agents.open');
   }, []);
@@ -360,6 +363,7 @@ const MainNav: React.FC<MainNavProps> = ({
     getAppearanceOverlayHost()
   ) : null;
 
+  const createSessionLabel = t('nav.sessions.newSession');
   const addSessionGroupTooltip = t('nav.tooltips.addSessionGroup');
   const agentsTooltip = t('nav.tooltips.agents');
   const skillsTooltip = t('nav.tooltips.skills');
@@ -410,7 +414,20 @@ const MainNav: React.FC<MainNavProps> = ({
               </button>
             </Tooltip>
           </div>
-          <RealtimeVoiceCallButton />
+          <Tooltip content={createSessionLabel} placement="right" followCursor>
+            <button
+              type="button"
+              className="bitfun-nav-panel__utility-action"
+              data-bf-component="nav-panel"
+              data-bf-part="topAction"
+              data-bf-action="new-session"
+              onClick={handleCreateSession}
+              aria-label={createSessionLabel}
+              data-testid="nav-new-session-btn"
+            >
+              <Plus size={15} aria-hidden="true" />
+            </button>
+          </Tooltip>
         </div>
       </div>
       )}
diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
index 56e3f785eb..09ee3406df 100644
--- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss
+++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss
@@ -1897,6 +1897,37 @@ $_section-header-height: 22px;
   }
 }
 
+.bitfun-nav-panel__appearance-menu-trigger {
+  &.is-open {
+    background: var(--bf-color-action-neutral-surface);
+  }
+}
+
+.bitfun-nav-panel__appearance-menu-current {
+  display: block;
+  max-width: 82px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Positioning and open-state composition only; the design-system Menu owns chrome. */
+.bitfun-nav-panel__appearance-submenu {
+  position: fixed;
+  max-width: calc(100vw - 16px);
+  max-height: calc(100vh - 16px);
+  z-index: 10000;
+  animation: bitfun-nav-popover-in 150ms cubic-bezier(0.23, 1, 0.32, 1) both;
+
+  &[data-placement='right'] {
+    transform-origin: top left;
+  }
+
+  &[data-placement='left'] {
+    transform-origin: top right;
+  }
+}
+
 // ──────────────────────────────────────────────
 // Device overview — one compact model, local and connected states
 // ──────────────────────────────────────────────
@@ -3153,6 +3184,7 @@ $_section-header-height: 22px;
 .bitfun-nav-panel__workspace-menu,
 .bitfun-nav-panel__mode-dropdown,
 .bitfun-nav-panel__footer-menu,
+.bitfun-nav-panel__appearance-submenu,
 .bitfun-nav-panel__footer-multimodal-menu {
   animation: bitfun-nav-popover-in 150ms cubic-bezier(0.23, 1, 0.32, 1) both;
 
@@ -3243,6 +3275,7 @@ $_section-header-height: 22px;
   .bitfun-nav-panel__workspace-menu,
   .bitfun-nav-panel__mode-dropdown,
   .bitfun-nav-panel__footer-menu,
+  .bitfun-nav-panel__appearance-submenu,
   .bitfun-nav-panel__footer-multimodal-menu,
   .bitfun-device-overview {
     animation: none;
diff --git a/src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.test.tsx b/src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.test.tsx
new file mode 100644
index 0000000000..95f0c59698
--- /dev/null
+++ b/src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.test.tsx
@@ -0,0 +1,165 @@
+// @vitest-environment jsdom
+
+import React, { act, useState } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const selectAppearance = vi.hoisted(() => vi.fn());
+const notifyError = vi.hoisted(() => vi.fn());
+
+vi.mock('@/infrastructure/appearance', () => ({
+  SYSTEM_APPEARANCE_ID: 'system',
+  useAppearance: () => ({
+    appearances: [
+      {
+        id: 'bitfun-light',
+        name: 'BitFun Light',
+        version: '1.0.0',
+        mode: 'light',
+        source: 'builtin',
+      },
+      {
+        id: 'custom-ocean',
+        name: 'Ocean',
+        version: '1.0.0',
+        mode: 'dark',
+        source: 'imported',
+      },
+    ],
+    current: { id: 'bitfun-light', name: 'BitFun Light' },
+    initialized: true,
+    select: selectAppearance,
+    selectedAppearanceId: 'bitfun-light',
+    status: 'ready',
+  }),
+}));
+
+vi.mock('@/infrastructure/i18n/hooks/useI18n', () => ({
+  useI18n: (namespace: string) => ({
+    t: (key: string, options?: { defaultValue?: string }) => {
+      const translations: Record<string, string> = namespace === 'settings/application'
+        ? {
+            'appearance.systemAppearance': 'Match system',
+            'appearance.presets.bitfun-light.name': 'Light',
+          }
+        : {
+            'nav.settingsMenu.theme': 'Theme',
+            'nav.settingsMenu.themeConfiguration': 'Theme configuration',
+            'nav.settingsMenu.appearanceSwitchFailed': 'Could not switch the theme. Try again.',
+          };
+      return translations[key] ?? options?.defaultValue ?? key;
+    },
+  }),
+}));
+
+vi.mock('@/infrastructure/appearance/runtime/AppearanceOverlayHost', () => ({
+  getAppearanceOverlayHost: () => document.body,
+}));
+
+vi.mock('@/shared/notification-system', () => ({
+  useNotification: () => ({ error: notifyError }),
+}));
+
+import AppearanceQuickSwitchMenuItem from './AppearanceQuickSwitchMenuItem';
+
+describe('AppearanceQuickSwitchMenuItem', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let closeParentMenu: ReturnType<typeof vi.fn>;
+  let openAppearanceSettings: ReturnType<typeof vi.fn>;
+
+  const Harness = () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <AppearanceQuickSwitchMenuItem
+        open={open}
+        onOpenChange={setOpen}
+        onCloseParentMenu={closeParentMenu}
+        onOpenAppearanceSettings={openAppearanceSettings}
+      />
+    );
+  };
+
+  beforeEach(() => {
+    selectAppearance.mockReset().mockResolvedValue(undefined);
+    notifyError.mockReset();
+    closeParentMenu = vi.fn();
+    openAppearanceSettings = vi.fn();
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+      callback(0);
+      return 1;
+    });
+    vi.stubGlobal('cancelAnimationFrame', vi.fn());
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    act(() => root.render(<Harness />));
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it('shows the current theme and opens the checked quick-switch submenu only on click', () => {
+    const trigger = container.querySelector<HTMLButtonElement>(
+      '[data-testid="nav-settings-appearance-item"]',
+    );
+    expect(trigger).not.toBeNull();
+    expect(trigger?.textContent).toContain('Theme');
+    expect(trigger?.textContent).toContain('Light');
+    expect(trigger?.getAttribute('aria-haspopup')).toBe('menu');
+
+    act(() => {
+      trigger!.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+    });
+    expect(document.querySelector('[data-testid="nav-settings-appearance-menu"]')).toBeNull();
+
+    act(() => trigger!.click());
+
+    const submenu = document.querySelector('[data-testid="nav-settings-appearance-menu"]');
+    const selected = document.querySelector(
+      '[data-testid="nav-settings-appearance-option"][data-appearance-id="bitfun-light"]',
+    );
+    expect(submenu).not.toBeNull();
+    expect(selected?.getAttribute('role')).toBe('menuitemradio');
+    expect(selected?.getAttribute('aria-checked')).toBe('true');
+    expect(submenu?.textContent).toContain('Match system');
+    expect(submenu?.textContent).toContain('Ocean');
+
+    act(() => trigger!.click());
+    expect(document.querySelector('[data-testid="nav-settings-appearance-menu"]')).toBeNull();
+  });
+
+  it('applies a selected theme immediately and closes the parent menu', async () => {
+    const trigger = container.querySelector<HTMLButtonElement>(
+      '[data-testid="nav-settings-appearance-item"]',
+    );
+    act(() => trigger!.click());
+    const ocean = document.querySelector<HTMLButtonElement>(
+      '[data-testid="nav-settings-appearance-option"][data-appearance-id="custom-ocean"]',
+    );
+
+    await act(async () => {
+      ocean!.click();
+      await Promise.resolve();
+    });
+
+    expect(selectAppearance).toHaveBeenCalledWith('custom-ocean');
+    expect(closeParentMenu).toHaveBeenCalledOnce();
+  });
+
+  it('keeps full theme configuration available from the submenu', () => {
+    const trigger = container.querySelector<HTMLButtonElement>(
+      '[data-testid="nav-settings-appearance-item"]',
+    );
+    act(() => trigger!.click());
+    const configure = document.querySelector<HTMLButtonElement>(
+      '[data-testid="nav-settings-appearance-settings"]',
+    );
+    act(() => configure!.click());
+
+    expect(openAppearanceSettings).toHaveBeenCalledOnce();
+  });
+});
diff --git a/src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.tsx b/src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.tsx
new file mode 100644
index 0000000000..0bfa54d18b
--- /dev/null
+++ b/src/web-ui/src/app/components/NavPanel/components/AppearanceQuickSwitchMenuItem.tsx
@@ -0,0 +1,301 @@
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type RefObject,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { Icon, Menu, MenuItem, MenuSeparator } from '@bitfun/ui';
+
+import {
+  SYSTEM_APPEARANCE_ID,
+  useAppearance,
+  type AppearanceCatalogEntry,
+  type AppearanceSelectionId,
+} from '@/infrastructure/appearance';
+import { useI18n } from '@/infrastructure/i18n/hooks/useI18n';
+import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
+import { useNotification } from '@/shared/notification-system';
+
+interface AppearanceQuickSwitchMenuItemProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCloseParentMenu: () => void;
+  onOpenAppearanceSettings: () => void;
+}
+
+interface SubmenuLayout {
+  left: number;
+  placement: 'left' | 'right';
+  top: number;
+}
+
+const SUBMENU_GAP = 5;
+const SUBMENU_FALLBACK_WIDTH = 228;
+const SUBMENU_FALLBACK_HEIGHT = 360;
+const VIEWPORT_PADDING = 8;
+
+const clamp = (value: number, min: number, max: number): number => (
+  Math.min(Math.max(value, min), Math.max(min, max))
+);
+
+function useSubmenuLayout(
+  open: boolean,
+  anchorRef: RefObject<HTMLButtonElement | null>,
+  submenuRef: RefObject<HTMLDivElement | null>,
+  layoutRevision: unknown,
+): SubmenuLayout | null {
+  const [layout, setLayout] = useState<SubmenuLayout | null>(null);
+
+  const updateLayout = useCallback(() => {
+    const anchor = anchorRef.current;
+    const submenu = submenuRef.current;
+    if (!anchor || !submenu) return;
+
+    const anchorRect = anchor.getBoundingClientRect();
+    const submenuRect = submenu.getBoundingClientRect();
+    const submenuWidth = submenuRect.width
+      || submenu.offsetWidth
+      || submenu.scrollWidth
+      || SUBMENU_FALLBACK_WIDTH;
+    const submenuHeight = submenuRect.height
+      || submenu.offsetHeight
+      || submenu.scrollHeight
+      || SUBMENU_FALLBACK_HEIGHT;
+    const preferredLeft = anchorRect.right + SUBMENU_GAP;
+    const opensRight = preferredLeft + submenuWidth <= window.innerWidth - VIEWPORT_PADDING;
+    const nextLayout: SubmenuLayout = {
+      left: clamp(
+        opensRight ? preferredLeft : anchorRect.left - SUBMENU_GAP - submenuWidth,
+        VIEWPORT_PADDING,
+        window.innerWidth - submenuWidth - VIEWPORT_PADDING,
+      ),
+      placement: opensRight ? 'right' : 'left',
+      top: clamp(
+        anchorRect.top - 4,
+        VIEWPORT_PADDING,
+        window.innerHeight - submenuHeight - VIEWPORT_PADDING,
+      ),
+    };
+
+    setLayout(current => current?.left === nextLayout.left
+      && current.top === nextLayout.top
+      && current.placement === nextLayout.placement
+      ? current
+      : nextLayout);
+  }, [anchorRef, submenuRef]);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setLayout(null);
+      return;
+    }
+
+    updateLayout();
+    window.addEventListener('resize', updateLayout);
+    window.addEventListener('scroll', updateLayout, true);
+    const resizeObserver = typeof ResizeObserver === 'undefined'
+      ? null
+      : new ResizeObserver(updateLayout);
+    if (anchorRef.current) resizeObserver?.observe(anchorRef.current);
+    if (submenuRef.current) resizeObserver?.observe(submenuRef.current);
+
+    return () => {
+      window.removeEventListener('resize', updateLayout);
+      window.removeEventListener('scroll', updateLayout, true);
+      resizeObserver?.disconnect();
+    };
+  }, [anchorRef, open, submenuRef, updateLayout]);
+
+  useLayoutEffect(() => {
+    if (open) updateLayout();
+  }, [layoutRevision, open, updateLayout]);
+
+  return layout;
+}
+
+const AppearanceQuickSwitchMenuItem: React.FC<AppearanceQuickSwitchMenuItemProps> = ({
+  open,
+  onOpenChange,
+  onCloseParentMenu,
+  onOpenAppearanceSettings,
+}) => {
+  const { t } = useI18n('common');
+  const { t: tApplication } = useI18n('settings/application');
+  const { error: notifyError } = useNotification();
+  const {
+    appearances,
+    current,
+    initialized,
+    select,
+    selectedAppearanceId,
+    status,
+  } = useAppearance();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const submenuRef = useRef<HTMLDivElement>(null);
+  const focusSubmenuOnOpenRef = useRef(false);
+
+  const getAppearanceDisplayName = useCallback((appearance: AppearanceCatalogEntry) => {
+    if (appearance.source !== 'builtin') return appearance.name;
+    const presetId = appearance.id.replace(/^builtin\./, '');
+    return tApplication(`appearance.presets.${presetId}.name`, {
+      defaultValue: appearance.name,
+    });
+  }, [tApplication]);
+
+  const selectedDisplayName = useMemo(() => {
+    if (selectedAppearanceId === SYSTEM_APPEARANCE_ID) {
+      return tApplication('appearance.systemAppearance');
+    }
+    const selected = appearances.find(appearance => appearance.id === selectedAppearanceId);
+    if (selected) return getAppearanceDisplayName(selected);
+    return current?.name ?? t('nav.settingsMenu.theme');
+  }, [appearances, current?.name, getAppearanceDisplayName, selectedAppearanceId, t, tApplication]);
+
+  const submenuLayout = useSubmenuLayout(
+    open,
+    triggerRef,
+    submenuRef,
+    `${appearances.length}:${selectedAppearanceId}`,
+  );
+
+  const focusFirstSubmenuItem = useCallback(() => {
+    const firstItem = submenuRef.current?.querySelector<HTMLButtonElement>(
+      '[data-bf-menu-item]:not(:disabled)',
+    );
+    firstItem?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (!open || !focusSubmenuOnOpenRef.current) return;
+    focusSubmenuOnOpenRef.current = false;
+    const frame = window.requestAnimationFrame(focusFirstSubmenuItem);
+    return () => window.cancelAnimationFrame(frame);
+  }, [focusFirstSubmenuItem, open]);
+
+  const openFromKeyboard = useCallback(() => {
+    focusSubmenuOnOpenRef.current = true;
+    if (open) {
+      window.requestAnimationFrame(focusFirstSubmenuItem);
+    } else {
+      onOpenChange(true);
+    }
+  }, [focusFirstSubmenuItem, onOpenChange, open]);
+
+  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      event.stopPropagation();
+      openFromKeyboard();
+    }
+  };
+
+  const handleSubmenuKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'ArrowLeft' && event.key !== 'Escape') return;
+    event.preventDefault();
+    event.stopPropagation();
+    onOpenChange(false);
+    triggerRef.current?.focus();
+  };
+
+  const handleSelect = useCallback(async (id: AppearanceSelectionId) => {
+    try {
+      await select(id);
+      onCloseParentMenu();
+    } catch {
+      notifyError(t('nav.settingsMenu.appearanceSwitchFailed'), { duration: 4000 });
+    }
+  }, [notifyError, onCloseParentMenu, select, t]);
+
+  const selectionDisabled = !initialized || status === 'applying';
+
+  return (
+    <>
+      <MenuItem
+        ref={triggerRef}
+        className={`bitfun-nav-panel__appearance-menu-trigger${open ? ' is-open' : ''}`}
+        leading={<Icon name="palette" size="sm" aria-hidden="true" />}
+        metadata={(
+          <span className="bitfun-nav-panel__appearance-menu-current" title={selectedDisplayName}>
+            {selectedDisplayName}
+          </span>
+        )}
+        shortcut={<Icon name="chevron-right" size="sm" aria-hidden="true" />}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => onOpenChange(!open)}
+        onKeyDown={handleTriggerKeyDown}
+        data-testid="nav-settings-appearance-item"
+      >
+        {t('nav.settingsMenu.theme')}
+      </MenuItem>
+
+      {open && createPortal(
+        <Menu
+          ref={submenuRef}
+          className="bitfun-nav-panel__appearance-submenu"
+          aria-label={t('nav.settingsMenu.theme')}
+          data-placement={submenuLayout?.placement}
+          data-testid="nav-settings-appearance-menu"
+          onKeyDown={handleSubmenuKeyDown}
+          style={{
+            left: `${submenuLayout?.left ?? 0}px`,
+            top: `${submenuLayout?.top ?? 0}px`,
+            visibility: submenuLayout ? 'visible' : 'hidden',
+          }}
+        >
+          <MenuItem
+            checked={selectedAppearanceId === SYSTEM_APPEARANCE_ID}
+            disabled={selectionDisabled}
+            leading={selectedAppearanceId === SYSTEM_APPEARANCE_ID
+              ? <Icon name="check-line" size="sm" aria-hidden="true" />
+              : undefined}
+            reserveLeadingSpace
+            role="menuitemradio"
+            onClick={() => void handleSelect(SYSTEM_APPEARANCE_ID)}
+            data-appearance-id={SYSTEM_APPEARANCE_ID}
+            data-testid="nav-settings-appearance-option"
+          >
+            {tApplication('appearance.systemAppearance')}
+          </MenuItem>
+          <MenuSeparator />
+          {appearances.map(appearance => {
+            const selected = appearance.id === selectedAppearanceId;
+            return (
+              <MenuItem
+                key={appearance.id}
+                checked={selected}
+                disabled={selectionDisabled}
+                leading={selected
+                  ? <Icon name="check-line" size="sm" aria-hidden="true" />
+                  : undefined}
+                reserveLeadingSpace
+                role="menuitemradio"
+                onClick={() => void handleSelect(appearance.id)}
+                data-appearance-id={appearance.id}
+                data-testid="nav-settings-appearance-option"
+              >
+                {getAppearanceDisplayName(appearance)}
+              </MenuItem>
+            );
+          })}
+          <MenuSeparator />
+          <MenuItem
+            leading={<Icon name="settings" size="sm" aria-hidden="true" />}
+            onClick={onOpenAppearanceSettings}
+            data-testid="nav-settings-appearance-settings"
+          >
+            {t('nav.settingsMenu.themeConfiguration')}
+          </MenuItem>
+        </Menu>,
+        getAppearanceOverlayHost(),
+      )}
+    </>
+  );
+};
+
+export default AppearanceQuickSwitchMenuItem;
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 ef222d287d..f07f5bd946 100644
--- a/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
+++ b/src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx
@@ -21,6 +21,7 @@ import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/Ap
 import { useAnchoredPopoverPosition } from '@/shared/utils/useAnchoredPopoverPosition';
 import { useSettingsStore } from '@/app/scenes/settings/settingsStore';
 import DeviceStatusControl from './DeviceStatusControl';
+import AppearanceQuickSwitchMenuItem from './AppearanceQuickSwitchMenuItem';
 
 const RemoteConnectDialog = lazy(() => import('../../RemoteConnectDialog'));
 const AboutDialog = lazy(() =>
@@ -49,6 +50,7 @@ const PersistentFooterActions: React.FC = () => {
 
   const [menuOpen, setMenuOpen] = useState(false);
   const [menuClosing, setMenuClosing] = useState(false);
+  const [appearanceSubmenuOpen, setAppearanceSubmenuOpen] = useState(false);
   const [deviceOverviewOpen, setDeviceOverviewOpen] = useState(false);
   const menuTriggerRef = useRef<HTMLButtonElement>(null);
   const menuPopoverRef = useRef<HTMLDivElement>(null);
@@ -84,6 +86,7 @@ const PersistentFooterActions: React.FC = () => {
   }, []);
 
   const closeMenu = useCallback(() => {
+    setAppearanceSubmenuOpen(false);
     setMenuClosing(true);
     setTimeout(() => {
       setMenuOpen(false);
@@ -96,6 +99,7 @@ const PersistentFooterActions: React.FC = () => {
       closeMenu();
     } else {
       setDeviceOverviewOpen(false);
+      setAppearanceSubmenuOpen(false);
       setMenuOpen(true);
     }
   };
@@ -112,7 +116,7 @@ const PersistentFooterActions: React.FC = () => {
     void activateProductAction('settings.open');
   }, [closeMenu]);
 
-  const handleOpenThemeConfiguration = useCallback(() => {
+  const handleOpenAppearanceSettings = useCallback(() => {
     closeMenu();
     useSettingsStore.getState().openPage('application.appearance');
     void activateProductAction('settings.open');
@@ -212,6 +216,16 @@ const PersistentFooterActions: React.FC = () => {
                   className={`bitfun-nav-panel__footer-menu${menuClosing ? ' is-closing' : ''}`}
                   aria-label={t('shared:features.settings')}
                   data-testid="nav-settings-menu"
+                  onKeyDown={(event) => {
+                    if (event.key !== 'Escape') return;
+                    event.preventDefault();
+                    if (appearanceSubmenuOpen) {
+                      setAppearanceSubmenuOpen(false);
+                    } else {
+                      closeMenu();
+                      menuTriggerRef.current?.focus();
+                    }
+                  }}
                   style={{
                     top: `${menuLayout?.top ?? 0}px`,
                     left: `${menuLayout?.left ?? 0}px`,
@@ -226,13 +240,12 @@ const PersistentFooterActions: React.FC = () => {
                     {t('nav.settingsMenu.floatingWindow')}
                   </MenuItem>
                   <NotificationButton menuItem onActivate={closeMenu} />
-                  <MenuItem
-                    leading={<Icon name="palette" size="sm" aria-hidden="true" />}
-                    onClick={handleOpenThemeConfiguration}
-                    data-testid="nav-settings-theme-item"
-                  >
-                    {t('nav.settingsMenu.themeConfiguration')}
-                  </MenuItem>
+                  <AppearanceQuickSwitchMenuItem
+                    open={appearanceSubmenuOpen}
+                    onOpenChange={setAppearanceSubmenuOpen}
+                    onCloseParentMenu={closeMenu}
+                    onOpenAppearanceSettings={handleOpenAppearanceSettings}
+                  />
                   <MenuSeparator />
                   <MenuItem
                     leading={<Icon name="settings" size="sm" aria-hidden="true" />}
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.test.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.test.tsx
new file mode 100644
index 0000000000..3988c6b41d
--- /dev/null
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.test.tsx
@@ -0,0 +1,155 @@
+// @vitest-environment jsdom
+
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { AcpClientInfo } from '@/infrastructure/api/service-api/ACPClientAPI';
+
+vi.mock('@/infrastructure/i18n', () => ({
+  useI18n: () => ({
+    t: (key: string, options?: { agentName?: string }) => {
+      if (key === 'nav.sessions.acpSessions') return 'ACP sessions';
+      if (key === 'nav.sessions.newExternalAgentSessionShort') {
+        return `${options?.agentName ?? ''} Session`;
+      }
+      if (key === 'app.loading') return 'Loading';
+      return key;
+    },
+  }),
+}));
+
+vi.mock('@/infrastructure/appearance/runtime/AppearanceOverlayHost', () => ({
+  getAppearanceOverlayHost: () => document.body,
+}));
+
+import WorkspaceAcpSessionSubmenu from './WorkspaceAcpSessionSubmenu';
+
+const clients: AcpClientInfo[] = [
+  {
+    id: 'codex',
+    name: 'Codex',
+    command: 'codex-acp',
+    args: [],
+    enabled: true,
+    readonly: false,
+    permissionMode: 'ask',
+    status: 'configured',
+    toolName: 'codex',
+    sessionCount: 0,
+  },
+  {
+    id: 'claude-code',
+    name: 'Claude Code',
+    command: 'claude-code-acp',
+    args: [],
+    enabled: true,
+    readonly: false,
+    permissionMode: 'ask',
+    status: 'configured',
+    toolName: 'claude-code',
+    sessionCount: 0,
+  },
+];
+
+describe('WorkspaceAcpSessionSubmenu', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let onSelect: ReturnType<typeof vi.fn>;
+
+  const render = (nextClients: readonly AcpClientInfo[] = clients, loading = false) => {
+    act(() => {
+      root.render(
+        <WorkspaceAcpSessionSubmenu
+          clients={nextClients}
+          loading={loading}
+          onSelect={onSelect}
+        />,
+      );
+    });
+  };
+
+  beforeEach(() => {
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+      callback(0);
+      return 1;
+    });
+    vi.stubGlobal('cancelAnimationFrame', vi.fn());
+    onSelect = vi.fn();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it('keeps ACP clients out of the project menu until the ACP group is opened', () => {
+    render();
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      '[data-testid="nav-workspace-menu-acp-sessions"]',
+    );
+    expect(trigger?.textContent).toContain('ACP sessions');
+    expect(trigger?.getAttribute('aria-haspopup')).toBe('menu');
+    expect(document.querySelector('[data-testid="nav-workspace-menu-create-acp-session"]')).toBeNull();
+
+    act(() => trigger!.click());
+
+    const submenu = document.querySelector('[data-testid="nav-workspace-menu-acp-submenu"]');
+    const options = document.querySelectorAll<HTMLButtonElement>(
+      '[data-testid="nav-workspace-menu-create-acp-session"]',
+    );
+    expect(submenu?.getAttribute('role')).toBe('menu');
+    expect(options).toHaveLength(2);
+    expect(submenu?.textContent).toContain('Codex Session');
+    expect(submenu?.textContent).toContain('Claude Code Session');
+
+    act(() => options[1]!.click());
+    expect(onSelect).toHaveBeenCalledWith(clients[1]);
+  });
+
+  it('opens with ArrowRight and returns focus to the ACP group with ArrowLeft', () => {
+    render();
+    const trigger = container.querySelector<HTMLButtonElement>(
+      '[data-testid="nav-workspace-menu-acp-sessions"]',
+    );
+    trigger?.focus();
+
+    act(() => {
+      trigger!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    });
+
+    const submenu = document.querySelector<HTMLDivElement>(
+      '[data-testid="nav-workspace-menu-acp-submenu"]',
+    );
+    expect(submenu).not.toBeNull();
+    expect(document.activeElement?.getAttribute('data-acp-client-id')).toBe('codex');
+
+    act(() => {
+      submenu!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+    });
+
+    expect(document.querySelector('[data-testid="nav-workspace-menu-acp-submenu"]')).toBeNull();
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('keeps loading and empty states inside the ACP group boundary', () => {
+    render([], true);
+    const trigger = container.querySelector<HTMLButtonElement>(
+      '[data-testid="nav-workspace-menu-acp-sessions"]',
+    );
+    expect(trigger).not.toBeNull();
+
+    act(() => trigger!.click());
+    expect(document.querySelector('[data-testid="nav-workspace-menu-acp-submenu"]')?.textContent)
+      .toContain('Loading');
+
+    render([], false);
+    expect(container.querySelector('[data-testid="nav-workspace-menu-acp-sessions"]')).toBeNull();
+    expect(document.querySelector('[data-testid="nav-workspace-menu-acp-submenu"]')).toBeNull();
+  });
+});
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.tsx
new file mode 100644
index 0000000000..c055232f64
--- /dev/null
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceAcpSessionSubmenu.tsx
@@ -0,0 +1,226 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ForwardedRef,
+  type KeyboardEvent,
+  type MutableRefObject,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { Bot, Loader2 } from 'lucide-react';
+import { Icon, Menu, MenuItem } from '@bitfun/ui';
+
+import type { AcpClientInfo } from '@/infrastructure/api/service-api/ACPClientAPI';
+import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
+import { useI18n } from '@/infrastructure/i18n';
+
+interface WorkspaceAcpSessionSubmenuProps {
+  clients: readonly AcpClientInfo[];
+  loading: boolean;
+  onSelect: (client: AcpClientInfo) => void;
+}
+
+interface SubmenuLayout {
+  left: number;
+  placement: 'left' | 'right';
+  top: number;
+}
+
+const SUBMENU_GAP = 5;
+const SUBMENU_FALLBACK_WIDTH = 220;
+const SUBMENU_FALLBACK_HEIGHT = 280;
+const VIEWPORT_PADDING = 8;
+
+const clamp = (value: number, min: number, max: number): number => (
+  Math.min(Math.max(value, min), Math.max(min, max))
+);
+
+function assignRef<T>(ref: ForwardedRef<T>, value: T | null): void {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    (ref as MutableRefObject<T | null>).current = value;
+  }
+}
+
+const WorkspaceAcpSessionSubmenu = forwardRef<HTMLDivElement, WorkspaceAcpSessionSubmenuProps>(
+  function WorkspaceAcpSessionSubmenu({ clients, loading, onSelect }, forwardedRef) {
+    const { t } = useI18n('common');
+    const [open, setOpen] = useState(false);
+    const [layout, setLayout] = useState<SubmenuLayout | null>(null);
+    const triggerRef = useRef<HTMLButtonElement>(null);
+    const submenuRef = useRef<HTMLDivElement | null>(null);
+    const focusSubmenuOnOpenRef = useRef(false);
+
+    const setSubmenuRef = useCallback((node: HTMLDivElement | null) => {
+      submenuRef.current = node;
+      assignRef(forwardedRef, node);
+    }, [forwardedRef]);
+
+    const updateLayout = useCallback(() => {
+      const trigger = triggerRef.current;
+      const submenu = submenuRef.current;
+      if (!trigger || !submenu) return;
+
+      const triggerRect = trigger.getBoundingClientRect();
+      const submenuRect = submenu.getBoundingClientRect();
+      const submenuWidth = submenuRect.width
+        || submenu.offsetWidth
+        || submenu.scrollWidth
+        || SUBMENU_FALLBACK_WIDTH;
+      const submenuHeight = submenuRect.height
+        || submenu.offsetHeight
+        || submenu.scrollHeight
+        || SUBMENU_FALLBACK_HEIGHT;
+      const preferredLeft = triggerRect.right + SUBMENU_GAP;
+      const opensRight = preferredLeft + submenuWidth <= window.innerWidth - VIEWPORT_PADDING;
+      const nextLayout: SubmenuLayout = {
+        left: clamp(
+          opensRight ? preferredLeft : triggerRect.left - SUBMENU_GAP - submenuWidth,
+          VIEWPORT_PADDING,
+          window.innerWidth - submenuWidth - VIEWPORT_PADDING,
+        ),
+        placement: opensRight ? 'right' : 'left',
+        top: clamp(
+          triggerRect.top - 4,
+          VIEWPORT_PADDING,
+          window.innerHeight - submenuHeight - VIEWPORT_PADDING,
+        ),
+      };
+
+      setLayout(current => current?.left === nextLayout.left
+        && current.top === nextLayout.top
+        && current.placement === nextLayout.placement
+        ? current
+        : nextLayout);
+    }, []);
+
+    useLayoutEffect(() => {
+      if (!open) {
+        setLayout(null);
+        return;
+      }
+
+      updateLayout();
+      const frame = window.requestAnimationFrame(updateLayout);
+      const resizeObserver = typeof ResizeObserver === 'undefined'
+        ? null
+        : new ResizeObserver(updateLayout);
+      if (triggerRef.current) resizeObserver?.observe(triggerRef.current);
+      if (submenuRef.current) resizeObserver?.observe(submenuRef.current);
+      window.addEventListener('resize', updateLayout);
+      window.addEventListener('scroll', updateLayout, true);
+
+      return () => {
+        window.cancelAnimationFrame(frame);
+        resizeObserver?.disconnect();
+        window.removeEventListener('resize', updateLayout);
+        window.removeEventListener('scroll', updateLayout, true);
+      };
+    }, [clients.length, loading, open, updateLayout]);
+
+    const focusFirstSubmenuItem = useCallback(() => {
+      submenuRef.current
+        ?.querySelector<HTMLButtonElement>('[data-bf-menu-item]:not(:disabled)')
+        ?.focus();
+    }, []);
+
+    useEffect(() => {
+      if (!open || !focusSubmenuOnOpenRef.current) return;
+      focusSubmenuOnOpenRef.current = false;
+      const frame = window.requestAnimationFrame(focusFirstSubmenuItem);
+      return () => window.cancelAnimationFrame(frame);
+    }, [focusFirstSubmenuItem, open]);
+
+    useEffect(() => {
+      if (!loading && clients.length === 0) setOpen(false);
+    }, [clients.length, loading]);
+
+    const openFromKeyboard = useCallback(() => {
+      focusSubmenuOnOpenRef.current = true;
+      if (open) {
+        window.requestAnimationFrame(focusFirstSubmenuItem);
+      } else {
+        setOpen(true);
+      }
+    }, [focusFirstSubmenuItem, open]);
+
+    const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+      if (event.key !== 'ArrowRight') return;
+      event.preventDefault();
+      event.stopPropagation();
+      openFromKeyboard();
+    };
+
+    const handleSubmenuKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key !== 'ArrowLeft' && event.key !== 'Escape') return;
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+      triggerRef.current?.focus();
+    };
+
+    if (!loading && clients.length === 0) return null;
+
+    const label = t('nav.sessions.acpSessions');
+
+    return (
+      <>
+        <MenuItem
+          ref={triggerRef}
+          className={`bitfun-nav-panel__workspace-acp-menu-trigger${open ? ' is-open' : ''}`}
+          leading={<Bot size={13} aria-hidden="true" />}
+          shortcut={<Icon name="chevron-right" size="sm" aria-hidden="true" />}
+          aria-haspopup="menu"
+          aria-expanded={open}
+          onClick={() => setOpen(current => !current)}
+          onKeyDown={handleTriggerKeyDown}
+          data-testid="nav-workspace-menu-acp-sessions"
+        >
+          {label}
+        </MenuItem>
+
+        {open && createPortal(
+          <Menu
+            ref={setSubmenuRef}
+            className="bitfun-nav-panel__workspace-item-menu-popover bitfun-nav-panel__workspace-acp-submenu"
+            aria-label={label}
+            data-placement={layout?.placement}
+            data-testid="nav-workspace-menu-acp-submenu"
+            onKeyDown={handleSubmenuKeyDown}
+            style={{
+              left: `${layout?.left ?? 0}px`,
+              top: `${layout?.top ?? 0}px`,
+              visibility: layout ? 'visible' : 'hidden',
+            }}
+          >
+            {loading ? (
+              <MenuItem leading={<Loader2 size={13} aria-hidden="true" />} disabled>
+                {t('app.loading')}
+              </MenuItem>
+            ) : clients.map(client => {
+              const clientLabel = client.name || client.id;
+              return (
+                <MenuItem
+                  key={client.id}
+                  leading={<Bot size={13} aria-hidden="true" />}
+                  onClick={() => onSelect(client)}
+                  data-testid="nav-workspace-menu-create-acp-session"
+                  data-acp-client-id={client.id}
+                >
+                  {t('nav.sessions.newExternalAgentSessionShort', { agentName: clientLabel })}
+                </MenuItem>
+              );
+            })}
+          </Menu>,
+          getAppearanceOverlayHost(),
+        )}
+      </>
+    );
+  },
+);
+
+export default WorkspaceAcpSessionSubmenu;
diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
index 5f5775eb19..fb49aee9a7 100644
--- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
+++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx
@@ -1,7 +1,7 @@
 import { Button, ConfirmDialog, Icon, Menu, MenuItem, MenuSeparator, Modal, Tooltip } from '@bitfun/ui';
 import React, { lazy, Suspense, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
-import { FolderOpen, FolderSearch, Trash2, RotateCcw, FileText, Bot, ListChecks, Loader2, ShieldCheck, Network } from 'lucide-react';
+import { FolderOpen, FolderSearch, Trash2, RotateCcw, FileText, ListChecks, ShieldCheck, Network } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { InputDialog, PresenceBoundary, BITFUN_ICON_SIZE, SessionGroupAssistantIcon, SessionGroupAssistantSelectedIcon, SessionGroupRemoteWorkspaceIcon, SessionGroupRemoteWorkspaceSelectedIcon, SessionGroupWorkspaceIcon, SessionGroupWorkspaceSelectedIcon } from '@/component-library';
 
@@ -25,6 +25,7 @@ import {
 import { findReusableEmptySessionId } from '@/app/utils/projectSessionWorkspace';
 import type { AcpClientInfo } from '@/infrastructure/api/service-api/ACPClientAPI';
 import { loadWorkspaceAcpMenuClients } from './workspaceAcpMenuClients';
+import WorkspaceAcpSessionSubmenu from './WorkspaceAcpSessionSubmenu';
 import SessionsSection from '../sessions/SessionsSection';
 import { useWorkspaceSessionViewStore } from '../../workspaceSessionView';
 import {
@@ -129,6 +130,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
   const menuRef = useRef<HTMLDivElement>(null);
   const menuAnchorRef = useRef<HTMLDivElement>(null);
   const menuPopoverRef = useRef<HTMLDivElement>(null);
+  const acpSubmenuRef = useRef<HTMLDivElement>(null);
   const cardRef = useRef<HTMLDivElement>(null);
   const [menuPosition, setMenuPosition] = useState<{ top: number; left: number } | null>(null);
   const isDefaultAssistantWorkspace =
@@ -437,7 +439,8 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
       const target = event.target as Node;
       const isInsideTriggerArea = menuRef.current?.contains(target);
       const isInsidePopover = menuPopoverRef.current?.contains(target);
-      if (!isInsideTriggerArea && !isInsidePopover) {
+      const isInsideAcpSubmenu = acpSubmenuRef.current?.contains(target);
+      if (!isInsideTriggerArea && !isInsidePopover && !isInsideAcpSubmenu) {
         setMenuOpen(false);
       }
     };
@@ -1359,25 +1362,12 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
                 >
                   {t('nav.sessions.newSession')}
                 </MenuItem>
-                {acpClients.map(client => {
-                  const label = client.name || client.id;
-                  return (
-                    <MenuItem
-                      key={client.id}
-                      leading={<Bot size={13} />}
-                      onClick={() => { void handleCreateAcpSession(client); }}
-                      data-testid="nav-workspace-menu-create-acp-session"
-                      data-acp-client-id={client.id}
-                    >
-                      {t('nav.sessions.newExternalAgentSessionShort', { agentName: label })}
-                    </MenuItem>
-                  );
-                })}
-                {acpClientsLoading ? (
-                  <MenuItem leading={<Loader2 size={13} />} disabled>
-                    {t('app.loading')}
-                  </MenuItem>
-                ) : null}
+                <WorkspaceAcpSessionSubmenu
+                  ref={acpSubmenuRef}
+                  clients={acpClients}
+                  loading={acpClientsLoading}
+                  onSelect={client => { void handleCreateAcpSession(client); }}
+                />
                 <MenuItem
                   leading={<FileText size={13} />}
                   onClick={() => { void handleCreateInitSession(); }}
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 f8a6f915cf..0c975e56fa 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
@@ -970,6 +970,20 @@
     animation: bitfun-footer-menu-in $motion-fast $easing-decelerate forwards;
   }
 
+  &__workspace-acp-menu-trigger.is-open {
+    background: var(--bf-color-action-neutral-surface);
+  }
+
+  &__workspace-acp-submenu {
+    &[data-placement='right'] {
+      transform-origin: top left;
+    }
+
+    &[data-placement='left'] {
+      transform-origin: top right;
+    }
+  }
+
   &__workspace-item-sessions {
     position: relative;
     z-index: 0;
@@ -1504,7 +1518,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .bitfun-nav-panel__workspace-item-menu-popover {
+  .bitfun-nav-panel__workspace-item-menu-popover,
+  .bitfun-nav-panel__workspace-acp-submenu {
     animation: none;
   }
 }
diff --git a/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts b/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts
index 53f3cadeba..ea0b0b910a 100644
--- a/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts
+++ b/src/web-ui/src/app/components/NavPanel/unifiedSessionCreation.test.ts
@@ -7,20 +7,37 @@ function source(relativePath: string): string {
 }
 
 describe('unified project session creation', () => {
-  it('places the client voice action beside search instead of the new-session shortcut', () => {
+  it('keeps New Session beside search and moves realtime voice to the scene corner', () => {
     const mainNav = source('./MainNav.tsx');
+    const workspaceBody = source('../../layout/WorkspaceBody.tsx');
+    const voiceLauncher = source('../../../flow_chat/components/voice/RealtimeVoiceCallButton.tsx');
+    const voiceLauncherStyles = source('../../../flow_chat/components/voice/RealtimeVoiceCallButton.scss');
     const workspaceItem = source('./sections/workspaces/WorkspaceItem.tsx');
     const utilityRowIndex = mainNav.indexOf('data-bf-part="utilityRow"');
-    const voiceIndex = mainNav.indexOf('<RealtimeVoiceCallButton />');
+    const newSessionIndex = mainNav.indexOf('data-testid="nav-new-session-btn"');
     const sectionsIndex = mainNav.indexOf('data-testid="nav-sections"');
     const sessionsSectionIndex = mainNav.indexOf('data-bf-section="sessions"');
 
-    expect(voiceIndex).toBeGreaterThan(utilityRowIndex);
-    expect(sectionsIndex).toBeGreaterThan(voiceIndex);
-    expect(sessionsSectionIndex).toBeGreaterThan(voiceIndex);
-    expect(mainNav).not.toContain('data-testid="nav-new-session-btn"');
-    expect(mainNav).not.toContain('<Plus size={15} aria-hidden="true" />');
-    expect(mainNav).not.toContain("activateProductAction('session.new')");
+    expect(newSessionIndex).toBeGreaterThan(utilityRowIndex);
+    expect(sectionsIndex).toBeGreaterThan(newSessionIndex);
+    expect(sessionsSectionIndex).toBeGreaterThan(newSessionIndex);
+    expect(mainNav).toContain('<Plus size={15} aria-hidden="true" />');
+    expect(mainNav).toContain("activateProductAction('session.new')");
+    expect(mainNav).not.toContain('<RealtimeVoiceCallButton />');
+    expect(workspaceBody).toContain('<RealtimeVoiceCallButton />');
+    expect(voiceLauncher).toContain('data-testid="realtime-voice-launcher"');
+    expect(voiceLauncher).toContain("t('voiceCall.call.launcherLabel')");
+    expect(voiceLauncher).toContain('<Mic');
+    expect(voiceLauncherStyles).toContain('right: 0;');
+    expect(voiceLauncherStyles).toContain('bottom: 0;');
+    expect(voiceLauncherStyles).toContain('width: 84px;');
+    expect(voiceLauncherStyles).toContain('height: 40px;');
+    expect(voiceLauncherStyles).toContain('font-weight: 300;');
+    expect(voiceLauncherStyles).toContain('font-synthesis: none;');
+    expect(voiceLauncherStyles).toContain('opacity: 0.22;');
+    expect(voiceLauncherStyles).toMatch(/&\.is-active\s*\{\s*opacity: 1;/);
+    expect(voiceLauncherStyles).toContain('border-radius: $size-radius-lg 0 0 0;');
+    expect(voiceLauncherStyles).not.toContain('$size-radius-lg 0 $size-radius-lg 0');
     expect(mainNav).not.toContain('nav-new-code-session-btn');
     expect(mainNav).not.toContain('nav-new-cowork-session-btn');
     expect(workspaceItem).toContain('data-testid="nav-workspace-menu-create-session"');
@@ -71,9 +88,10 @@ describe('unified project session creation', () => {
 
   it('opens the footer utility list from Settings without Star, More, or Insights', () => {
     const footerActions = source('./components/PersistentFooterActions.tsx');
+    const appearanceQuickSwitch = source('./components/AppearanceQuickSwitchMenuItem.tsx');
     const floatingIndex = footerActions.indexOf('data-testid="nav-settings-floating-item"');
     const notificationIndex = footerActions.indexOf('<NotificationButton menuItem');
-    const themeIndex = footerActions.indexOf('data-testid="nav-settings-theme-item"');
+    const appearanceIndex = footerActions.indexOf('<AppearanceQuickSwitchMenuItem');
     const openSettingsIndex = footerActions.indexOf('data-testid="nav-settings-open-item"');
     const aboutIndex = footerActions.indexOf('data-testid="nav-settings-about-item"');
 
@@ -81,12 +99,18 @@ describe('unified project session creation', () => {
     expect(footerActions).toContain('data-testid="nav-settings-menu"');
     expect(floatingIndex).toBeGreaterThan(-1);
     expect(notificationIndex).toBeGreaterThan(floatingIndex);
-    expect(themeIndex).toBeGreaterThan(notificationIndex);
-    expect(openSettingsIndex).toBeGreaterThan(themeIndex);
+    expect(appearanceIndex).toBeGreaterThan(notificationIndex);
+    expect(openSettingsIndex).toBeGreaterThan(appearanceIndex);
     expect(aboutIndex).toBeGreaterThan(openSettingsIndex);
     expect(footerActions).toContain("useSettingsStore.getState().openPage('application.appearance')");
     expect(footerActions).not.toContain('GithubStarButton');
     expect(footerActions).not.toContain('nav-footer-github-star-btn');
+    expect(appearanceQuickSwitch).toContain('data-testid="nav-settings-appearance-item"');
+    expect(appearanceQuickSwitch).toContain('data-testid="nav-settings-appearance-menu"');
+    expect(appearanceQuickSwitch).toContain('role="menuitemradio"');
+    expect(appearanceQuickSwitch).toContain('selectedDisplayName');
+    expect(footerActions).not.toContain('onMouseMove=');
+    expect(footerActions).not.toContain('onFocusCapture=');
     expect(footerActions).not.toContain('data-testid="nav-footer-more-btn"');
     expect(footerActions).not.toContain("activateProductAction('surface.insights.open')");
   });
diff --git a/src/web-ui/src/app/layout/WorkspaceBody.tsx b/src/web-ui/src/app/layout/WorkspaceBody.tsx
index 79b79c9672..275ef3d575 100644
--- a/src/web-ui/src/app/layout/WorkspaceBody.tsx
+++ b/src/web-ui/src/app/layout/WorkspaceBody.tsx
@@ -17,6 +17,7 @@ import NavPanel from '../components/NavPanel/NavPanel';
 import { SceneChromeProvider, SceneTopBar } from '../components/SceneTopBar';
 import { SceneViewport } from '../scenes';
 import TerminalActionBridge from '../scenes/terminal/TerminalActionBridge';
+import { RealtimeVoiceCallButton } from '../../flow_chat/components/voice/RealtimeVoiceCallButton';
 import { useApp } from '../hooks/useApp';
 import { useSceneStore } from '../stores/sceneStore';
 import './WorkspaceBody.scss';
@@ -193,6 +194,7 @@ const WorkspaceBody: React.FC<WorkspaceBodyProps> = ({
               workspacePath={currentWorkspace?.rootPath}
               isEntering={isEntering}
             />
+            <RealtimeVoiceCallButton />
           </SceneChromeProvider>
         </div>
         {sceneOverlay}
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.appearance.ts b/src/web-ui/src/flow_chat/components/ChatInput.appearance.ts
index ec1031d2e7..e821613581 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.appearance.ts
+++ b/src/web-ui/src/flow_chat/components/ChatInput.appearance.ts
@@ -48,7 +48,7 @@ export const chatInputAppearanceDescriptor: AppearanceSurfaceDescriptor = {
     { id: 'command', attribute: 'data-bf-command', values: ['actions', 'all', 'skills', 'modes'] },
     { id: 'commandItemKind', attribute: 'data-bf-command-item-kind', values: ['action', 'mode', 'skill', 'mcp'] },
     { id: 'action', attribute: 'data-bf-action', values: ['cancel', 'continue-interrupted', 'retry', 'send', 'split'] },
-    { id: 'boostItemKind', attribute: 'data-bf-boost-item-kind', values: ['directive', 'agent', 'context', 'skill', 'manage'] },
+    { id: 'boostItemKind', attribute: 'data-bf-boost-item-kind', values: ['directive', 'agent', 'context', 'skill', 'additional-mode', 'manage'] },
   ],
   states: [
     { id: 'processing', selector: { kind: 'ancestorPart', part: 'root', suffix: '[data-bf-state~="processing"]' } },
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.scss b/src/web-ui/src/flow_chat/components/ChatInput.scss
index d6fa50e052..dc83fbf48b 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.scss
+++ b/src/web-ui/src/flow_chat/components/ChatInput.scss
@@ -1099,7 +1099,7 @@
     opacity: 0.88;
   }
 
-  // Skills row: hover opens secondary panel (similar to @ mention flyout)
+  // Nested add-menu rows share one secondary-panel interaction contract.
   &__boost-submenu-host {
     position: relative;
     border-radius: 4px;
@@ -1291,6 +1291,7 @@
   }
 
   &__boost-submenu-item-name {
+    flex: 1 1 auto;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.tsx b/src/web-ui/src/flow_chat/components/ChatInput.tsx
index 14d7ad358a..1bfec7b29d 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInput.tsx
@@ -7,7 +7,7 @@ import React, { useRef, useCallback, useEffect, useReducer, useState, useMemo, u
 import { createPortal } from 'react-dom';
 import path from 'path-browserify';
 import { useTranslation } from 'react-i18next';
-import { ArrowUp, BotMessageSquare, Image, RotateCcw, Plus, X, Sparkles, Loader2, ChevronRight, Files, MessageSquarePlus, Play } from 'lucide-react';
+import { ArrowUp, BotMessageSquare, Image, RotateCcw, Plus, X, Sparkles, Loader2, Files, MessageSquarePlus, Play } from 'lucide-react';
 import { ContextDropZone, useContextStore } from '../../shared/context-system';
 import { useActiveSessionState } from '@/flow_chat/hooks';
 import {
@@ -166,6 +166,7 @@ import {
   type SelectableHarnessProfileId,
 } from './HarnessProfileSelector';
 import { ChatInputApprovalBand } from './ChatInputApprovalBand';
+import { ChatInputBoostSubmenu } from './ChatInputBoostSubmenu';
 import { usePermissionRequests } from './modern/usePermissionRequests';
 import type { DispatchSelection, DispatchTarget } from '@/features/dispatch/types';
 import { isNonLocalDispatchTarget } from '@/features/dispatch/types';
@@ -180,6 +181,11 @@ import { ComposerVoiceInputButton } from './voice/ComposerVoiceInputButton';
 import { useRealtimeVoiceCallActive } from './voice/RealtimeVoiceCallContext';
 import { useComposerVoiceInput } from './voice/useComposerVoiceInput';
 import { expandWidgetPromptReferenceTokens } from '@/tools/generative-widget/widgetPromptReference';
+import {
+  createAdditionalModePromptReferenceToken,
+  expandAdditionalModePromptReferenceTokens,
+  type AdditionalModePromptReferenceId,
+} from '../utils/additionalModePromptReference';
 import {
   composerPresentationContexts,
   composerPresentationToEditorText,
@@ -189,7 +195,6 @@ import {
   type ComposerPresentation,
 } from '../utils/composerPresentation';
 import {
-  appendSkillPromptReferenceToken,
   createSkillPromptReferenceToken,
   isSkillAvailableForUserInvocation,
   isSlashAddressableSkillName,
@@ -258,6 +263,17 @@ export interface ChatInputProps {
   registration?: ChatInputRegistration;
 }
 
+type ChatInputAdditionalModeSelection =
+  | { kind: 'skill'; skillName: string }
+  | { kind: 'additional-mode'; modeId: AdditionalModePromptReferenceId };
+
+interface ChatInputAdditionalModeItem {
+  id: string;
+  label: string;
+  title: string;
+  selection: ChatInputAdditionalModeSelection;
+}
+
 type SlashActionItem = {
   kind: 'action';
   id: SlashActionId;
@@ -1153,38 +1169,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   const [userDefaultModeId, setUserDefaultModeId] = useState<string | null>(null);
   const { computerUseEnabled } = useComputerUseEnabled();
 
-  const [skillsFlyoutOpen, setSkillsFlyoutOpen] = useState(false);
-  const [skillsFlyoutLeft, setSkillsFlyoutLeft] = useState(false);
-  const [skillsFlyoutUp, setSkillsFlyoutUp] = useState(false);
-  const skillsHostRef = useRef<HTMLDivElement>(null);
-  const skillsTimerRef = useRef<number | null>(null);
-
-  const clearSkillsTimer = useCallback(() => {
-    if (skillsTimerRef.current !== null) {
-      window.clearTimeout(skillsTimerRef.current);
-      skillsTimerRef.current = null;
-    }
-  }, []);
-
-  const openSkillsFlyout = useCallback(() => {
-    clearSkillsTimer();
-    const host = skillsHostRef.current;
-    if (host) {
-      const r = host.getBoundingClientRect();
-      setSkillsFlyoutLeft(r.right + 260 > window.innerWidth - 8);
-      setSkillsFlyoutUp(r.top + 200 > window.innerHeight - 8);
-    }
-    setSkillsFlyoutOpen(true);
-  }, [clearSkillsTimer]);
-
-  const closeSkillsFlyout = useCallback(() => {
-    clearSkillsTimer();
-    skillsTimerRef.current = window.setTimeout(() => {
-      skillsTimerRef.current = null;
-      setSkillsFlyoutOpen(false);
-    }, 150);
-  }, [clearSkillsTimer]);
-
   const handleOpenCreateCustomMode = useCallback(
     (event: React.MouseEvent | React.KeyboardEvent) => {
       event.stopPropagation();
@@ -1468,9 +1452,12 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       : [],
     [canUseSkillsForTarget, resolvedModeSkills],
   );
-  const boostMenuLayoutRevision = quickSkillShortcuts
-    .map(shortcut => shortcut.id)
-    .join('|');
+  const showReviewAdditionalMode = canLaunchReview && canSwitchModes && showStandardExecutionOptions;
+  const showAdditionalModes = quickSkillShortcuts.length > 0 || showReviewAdditionalMode;
+  const boostMenuLayoutRevision = [
+    ...quickSkillShortcuts.map(shortcut => shortcut.id),
+    showReviewAdditionalMode ? 'review' : '',
+  ].filter(Boolean).join('|');
   const boostMenuLayout = useAnchoredPopoverPosition({
     open: modeState.dropdownOpen,
     anchorRef: boostTriggerRef,
@@ -2036,7 +2023,9 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   }, []);
 
   const expandComposerSpecialTokens = useCallback((text: string) => {
-    return expandWidgetPromptReferenceTokens(expandPendingLargePastes(text)).trim();
+    return expandAdditionalModePromptReferenceTokens(
+      expandWidgetPromptReferenceTokens(expandPendingLargePastes(text)),
+    ).trim();
   }, [expandPendingLargePastes]);
 
   React.useEffect(() => {
@@ -3026,27 +3015,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     setResolvedModeSkillsRequestVersion(version => version + 1);
   }, []);
 
-  useEffect(() => {
-    if (!modeState.dropdownOpen) {
-      clearSkillsTimer();
-      setSkillsFlyoutOpen(false);
-    }
-  }, [clearSkillsTimer, modeState.dropdownOpen]);
-
-  useEffect(() => {
-    if (!canUseSkillsForTarget) {
-      clearSkillsTimer();
-      setSkillsFlyoutOpen(false);
-    }
-  }, [canUseSkillsForTarget, clearSkillsTimer]);
-
-  useEffect(
-    () => () => {
-      clearSkillsTimer();
-    },
-    [clearSkillsTimer]
-  );
-
   useEffect(() => {
     const handleImagePaste = async (event: Event) => {
       const customEvent = event as CustomEvent<{ file: File }>;
@@ -3832,7 +3800,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     }
   }, [dispatchInput, effectiveTargetSessionId, inputState.value, setQueuedInput, t]);
 
-  const submitReviewFromInput = useCallback(async () => {
+  const submitReviewFromInput = useCallback(async (
+    message: string,
+    originalComposerValue: string,
+  ) => {
     if (!canLaunchReview) {
       notificationService.warning(t('chatInput.reviewUnavailableSurface'));
       return;
@@ -3844,7 +3815,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       return;
     }
 
-    const message = inputState.value.trim();
     if (!isReviewSlashCommand(message)) {
       notificationService.warning(
         t('chatInput.reviewUsage')
@@ -3922,7 +3892,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       });
       replacePendingLargePastes(originalPendingLargePastes);
       dispatchInput({ type: 'ACTIVATE' });
-      dispatchInput({ type: 'SET_VALUE', payload: message });
+      dispatchInput({ type: 'SET_VALUE', payload: originalComposerValue });
       notificationService.error(
         getDeepReviewLaunchErrorMessage(error, t, t('error.unknown')),
         {
@@ -3943,7 +3913,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     effectiveTargetSession,
     effectiveTargetSessionId,
     flowChatState,
-    inputState.value,
     isBtwSession,
     replacePendingLargePastes,
     setQueuedInput,
@@ -4686,7 +4655,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     }
 
     if (promptSlashCommandsEnabled && caps.ops.has('review') && isReviewSlashCommand(message)) {
-      await submitReviewFromInput();
+      await submitReviewFromInput(message, originalMessage);
       return;
     }
 
@@ -4888,15 +4857,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     window.setTimeout(() => richTextInputRef.current?.focus(), 0);
   }, [dispatchInput, inlineTriggerState, inputState.value, isBtwSession, setQueuedInput]);
 
-  const selectReviewAgent = useCallback(() => {
-    dispatchMode({ type: 'CLOSE_DROPDOWN' });
-    if (!canLaunchReview) {
-      notificationService.info(t('chatInput.agents.reviewUnavailable'), { duration: 3200 });
-      return;
-    }
-    selectSlashCommandAction('review');
-  }, [canLaunchReview, selectSlashCommandAction, t]);
-
   const selectSlashExternalPromptCommand = useCallback((item: SlashExternalPromptCommandItem) => {
     if (!item.available) {
       notificationService.warning(item.unavailableReason || t('chatInput.noMatchingCommand'));
@@ -5338,26 +5298,61 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     });
   }, []);
 
-  const insertSkillIntoInput = useCallback(
-    (skillName: string) => {
+  const insertInlineReferenceIntoInput = useCallback(
+    (token: string) => {
       dispatchInput({ type: 'ACTIVATE' });
-      const token = createSkillPromptReferenceToken(skillName);
       const appendInlineTokenAtEnd = getRichTextInlineTriggerController()?.appendInlineTokenAtEnd;
       if (appendInlineTokenAtEnd) {
         appendInlineTokenAtEnd(token);
       } else {
-        const next = appendSkillPromptReferenceToken(inputState.value, skillName);
+        const trimmed = inputState.value.trimEnd();
+        const next = trimmed ? `${trimmed} ${token}` : token;
         dispatchInput({ type: 'SET_VALUE', payload: next });
         inputValueRef.current = next;
       }
-      clearSkillsTimer();
-      setSkillsFlyoutOpen(false);
       dispatchMode({ type: 'CLOSE_DROPDOWN' });
       focusRichTextInputSoon();
     },
-    [clearSkillsTimer, dispatchInput, focusRichTextInputSoon, getRichTextInlineTriggerController, inputState.value]
+    [dispatchInput, focusRichTextInputSoon, getRichTextInlineTriggerController, inputState.value]
   );
 
+  const insertSkillIntoInput = useCallback((skillName: string) => {
+    insertInlineReferenceIntoInput(createSkillPromptReferenceToken(skillName));
+  }, [insertInlineReferenceIntoInput]);
+
+  const insertAdditionalModeIntoInput = useCallback((modeId: AdditionalModePromptReferenceId) => {
+    insertInlineReferenceIntoInput(createAdditionalModePromptReferenceToken(modeId));
+  }, [insertInlineReferenceIntoInput]);
+
+  const additionalModeItems = useMemo<ChatInputAdditionalModeItem[]>(() => [
+    ...quickSkillShortcuts.map(shortcut => ({
+      id: shortcut.id,
+      label: shortcut.label,
+      title: shortcut.skill.description || shortcut.label,
+      selection: {
+        kind: 'skill' as const,
+        skillName: shortcut.skill.name,
+      },
+    })),
+    ...(showReviewAdditionalMode
+      ? [{
+          id: 'review',
+          label: t('chatInput.agents.review.name'),
+          title: t('chatInput.agents.review.name'),
+          selection: { kind: 'additional-mode' as const, modeId: 'review' as const },
+        }]
+      : []),
+  ], [quickSkillShortcuts, showReviewAdditionalMode, t]);
+
+  const selectAdditionalMode = useCallback((selection: ChatInputAdditionalModeSelection) => {
+    if (selection.kind === 'skill') {
+      insertSkillIntoInput(selection.skillName);
+      return;
+    }
+
+    insertAdditionalModeIntoInput(selection.modeId);
+  }, [insertAdditionalModeIntoInput, insertSkillIntoInput]);
+
   const handleBoostPickImage = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
@@ -5384,12 +5379,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   const handleOpenSkillsLibrary = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
-      clearSkillsTimer();
-      setSkillsFlyoutOpen(false);
       dispatchMode({ type: 'CLOSE_DROPDOWN' });
       openScene('skills' as SceneTabId);
     },
-    [clearSkillsTimer, openScene]
+    [openScene]
   );
   useEffect(() => {
     const dropZone = containerRef.current?.closest('.bitfun-chat-input-drop-zone') as HTMLElement | null;
@@ -6144,40 +6137,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                         visibility: boostMenuLayout ? 'visible' : 'hidden',
                       }}
                     >
-                      {quickSkillShortcuts.length > 0 && (
-                        <>
-                          <div className="bitfun-chat-input__boost-section" data-bf-component="chat-input" data-bf-part="boostSection">
-                            {quickSkillShortcuts.map(shortcut => (
-                              <div
-                                key={shortcut.id}
-                                role="menuitem"
-                                tabIndex={0}
-                                className="bitfun-chat-input__boost-context-row"
-                                data-bf-component="chat-input"
-                                data-bf-part="boostItem"
-                                data-bf-boost-item-kind="skill"
-                                data-testid={`chat-input-quick-skill-${shortcut.id}`}
-                                title={shortcut.skill.description || shortcut.label}
-                                onClick={event => {
-                                  event.stopPropagation();
-                                  insertSkillIntoInput(shortcut.skill.name);
-                                }}
-                                onKeyDown={event => {
-                                  if (event.key !== 'Enter' && event.key !== ' ') return;
-                                  event.preventDefault();
-                                  event.stopPropagation();
-                                  insertSkillIntoInput(shortcut.skill.name);
-                                }}
-                              >
-                                <Sparkles size={14} className="bitfun-chat-input__boost-context-icon" aria-hidden />
-                                <span>{shortcut.label}</span>
-                              </div>
-                            ))}
-                          </div>
-
-                          <div className="bitfun-chat-input__boost-section-divider" data-bf-component="chat-input" data-bf-part="boostDivider" aria-hidden />
-                        </>
-                      )}
                       {!isMultiLine && executionLevelPolicy.userConfigurable ? (
                         <>
                           <div className="bitfun-chat-input__boost-section" data-bf-component="chat-input" data-bf-part="boostSection">
@@ -6191,35 +6150,45 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                         </>
                       ) : null}
 
-                      {canSwitchModes && showStandardExecutionOptions && (
+                      {showAdditionalModes && (
                         <>
                           <div className="bitfun-chat-input__boost-section" data-bf-component="chat-input" data-bf-part="boostSection">
-                            <div
-                              role="menuitem"
-                              tabIndex={0}
-                              className={`bitfun-chat-input__mode-option${canLaunchReview ? '' : ' bitfun-chat-input__mode-option--coming-soon'}`}
-                              data-bf-component="chat-input"
-                              data-bf-part="boostItem"
-                              data-bf-boost-item-kind="agent"
-                              data-bf-agent-id="Review"
-                              onClick={selectReviewAgent}
-                              onKeyDown={event => {
-                                if (event.key !== 'Enter' && event.key !== ' ') return;
-                                event.preventDefault();
-                                selectReviewAgent();
-                              }}
+                            <ChatInputBoostSubmenu
+                              label={t('chatInput.boostAdditionalModes')}
+                              icon={<Sparkles size={14} className="bitfun-chat-input__boost-context-icon" aria-hidden />}
+                              estimatedPanelHeight={176}
+                              testId="chat-input-additional-modes"
                             >
-                              <span className="bitfun-chat-input__mode-option-name">
-                                {t('chatInput.agents.review.name')}
-                              </span>
-                              <span className="bitfun-chat-input__mode-option-actions">
-                                <span className="bitfun-chat-input__slash-command-current">
-                                  {canLaunchReview
-                                    ? t('chatInput.agents.available')
-                                    : t('chatInput.agents.needsChanges')}
-                                </span>
-                              </span>
-                            </div>
+                              <div className="bitfun-chat-input__boost-submenu-list">
+                                {additionalModeItems.map(item => (
+                                  <div
+                                    key={item.id}
+                                    role="menuitem"
+                                    tabIndex={0}
+                                    className="bitfun-chat-input__boost-submenu-item"
+                                    data-bf-component="chat-input"
+                                    data-bf-part="boostSubmenuItem"
+                                    data-bf-boost-item-kind="additional-mode"
+                                    data-bf-additional-mode-id={item.id}
+                                    data-testid={`chat-input-additional-mode-${item.id}`}
+                                    title={item.title}
+                                    onClick={event => {
+                                      event.stopPropagation();
+                                      selectAdditionalMode(item.selection);
+                                    }}
+                                    onKeyDown={event => {
+                                      if (event.key !== 'Enter' && event.key !== ' ') return;
+                                      event.preventDefault();
+                                      event.stopPropagation();
+                                      selectAdditionalMode(item.selection);
+                                    }}
+                                  >
+                                    <Sparkles size={12} className="bitfun-chat-input__boost-submenu-item-icon" aria-hidden />
+                                    <span className="bitfun-chat-input__boost-submenu-item-name">{item.label}</span>
+                                  </div>
+                                ))}
+                              </div>
+                            </ChatInputBoostSubmenu>
                           </div>
 
                           <div className="bitfun-chat-input__boost-section-divider" data-bf-component="chat-input" data-bf-part="boostDivider" aria-hidden />
@@ -6282,112 +6251,71 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                         </div>
 
                         {canUseSkillsForTarget && (
-                          <div
-                            ref={skillsHostRef}
-                            className="bitfun-chat-input__boost-submenu-host"
-                            onMouseEnter={openSkillsFlyout}
-                            onMouseLeave={closeSkillsFlyout}
+                          <ChatInputBoostSubmenu
+                            label={t('chatInput.boostSkills')}
+                            icon={<Sparkles size={14} className="bitfun-chat-input__boost-context-icon" aria-hidden />}
+                            testId="chat-input-skills"
                           >
-                            <div
-                              role="menuitem"
-                              tabIndex={0}
-                              className="bitfun-chat-input__boost-submenu-trigger"
-                              data-bf-component="chat-input"
-                              data-bf-part="boostSubmenuTrigger"
-                              data-bf-state={skillsFlyoutOpen ? 'open' : undefined}
-                              aria-haspopup="menu"
-                              aria-expanded={skillsFlyoutOpen}
-                              onKeyDown={e => {
-                                if (e.key === 'Escape') {
-                                  e.preventDefault();
-                                  clearSkillsTimer();
-                                  setSkillsFlyoutOpen(false);
-                                  return;
-                                }
-                                if (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'ArrowRight') return;
-                                e.preventDefault();
-                                openSkillsFlyout();
-                              }}
-                            >
-                              <span className="bitfun-chat-input__boost-submenu-trigger-main">
-                                <Sparkles size={14} className="bitfun-chat-input__boost-context-icon" aria-hidden />
-                                <span>{t('chatInput.boostSkills')}</span>
-                              </span>
-                              <ChevronRight size={14} className="bitfun-chat-input__boost-submenu-chevron" aria-hidden />
-                            </div>
-                            <div
-                              className={[
-                                'bitfun-chat-input__boost-submenu-shell',
-                                skillsFlyoutOpen ? 'bitfun-chat-input__boost-submenu-shell--open' : '',
-                                skillsFlyoutLeft ? 'bitfun-chat-input__boost-submenu-shell--left' : '',
-                                skillsFlyoutUp ? 'bitfun-chat-input__boost-submenu-shell--up' : '',
-                              ].filter(Boolean).join(' ')}
-                              onMouseEnter={openSkillsFlyout}
-                              onMouseLeave={closeSkillsFlyout}
-                            >
-                              <div className="bitfun-chat-input__boost-submenu-panel" data-bf-component="chat-input" data-bf-part="boostSubmenuPanel" data-bf-state={skillsFlyoutOpen ? 'open' : undefined}>
-                                {resolvedModeSkillsLoading ? (
-                                  <div className="bitfun-chat-input__boost-submenu-loading" data-bf-component="chat-input" data-bf-part="boostSubmenuState" data-bf-state="loading">
-                                    <Loader2 size={14} className="bitfun-chat-input__boost-submenu-spinner" aria-hidden />
-                                    <span>{t('chatInput.boostSkillsLoading')}</span>
-                                  </div>
-                                ) : resolvedModeSkillsLoadFailed ? (
-                                  <button
-                                    type="button"
-                                    className="bitfun-chat-input__boost-submenu-empty bitfun-chat-input__boost-submenu-retry"
+                            {resolvedModeSkillsLoading ? (
+                              <div className="bitfun-chat-input__boost-submenu-loading" data-bf-component="chat-input" data-bf-part="boostSubmenuState" data-bf-state="loading">
+                                <Loader2 size={14} className="bitfun-chat-input__boost-submenu-spinner" aria-hidden />
+                                <span>{t('chatInput.boostSkillsLoading')}</span>
+                              </div>
+                            ) : resolvedModeSkillsLoadFailed ? (
+                              <button
+                                type="button"
+                                className="bitfun-chat-input__boost-submenu-empty bitfun-chat-input__boost-submenu-retry"
+                                data-bf-component="chat-input"
+                                data-bf-part="boostSubmenuState"
+                                onClick={event => {
+                                  event.stopPropagation();
+                                  retryResolvedModeSkills();
+                                }}
+                              >
+                                <RotateCcw size={13} aria-hidden />
+                                <span>{t('chatInput.boostSkillsLoadFailed')}</span>
+                              </button>
+                            ) : userInvocableSkills.length === 0 ? (
+                              <div className="bitfun-chat-input__boost-submenu-empty" data-bf-component="chat-input" data-bf-part="boostSubmenuState" data-bf-state="empty">{t('chatInput.boostSkillsEmpty')}</div>
+                            ) : (
+                              <div className="bitfun-chat-input__boost-submenu-list">
+                                {userInvocableSkills.map(skill => (
+                                  <div
+                                    key={skill.key}
+                                    role="menuitem"
+                                    tabIndex={0}
+                                    className="bitfun-chat-input__boost-submenu-item"
                                     data-bf-component="chat-input"
-                                    data-bf-part="boostSubmenuState"
-                                    onClick={event => {
-                                      event.stopPropagation();
-                                      retryResolvedModeSkills();
+                                    data-bf-part="boostSubmenuItem"
+                                    data-bf-boost-item-kind="skill"
+                                    title={skill.description || skill.name}
+                                    onClick={e => {
+                                      e.stopPropagation();
+                                      insertSkillIntoInput(skill.name);
                                     }}
+                                    onKeyDown={e => e.key === 'Enter' && insertSkillIntoInput(skill.name)}
                                   >
-                                    <RotateCcw size={13} aria-hidden />
-                                    <span>{t('chatInput.boostSkillsLoadFailed')}</span>
-                                  </button>
-                                ) : userInvocableSkills.length === 0 ? (
-                                  <div className="bitfun-chat-input__boost-submenu-empty" data-bf-component="chat-input" data-bf-part="boostSubmenuState" data-bf-state="empty">{t('chatInput.boostSkillsEmpty')}</div>
-                                ) : (
-                                  <div className="bitfun-chat-input__boost-submenu-list">
-                                    {userInvocableSkills.map(skill => (
-                                      <div
-                                        key={skill.key}
-                                        role="button"
-                                        tabIndex={0}
-                                        className="bitfun-chat-input__boost-submenu-item"
-                                        data-bf-component="chat-input"
-                                        data-bf-part="boostSubmenuItem"
-                                        data-bf-boost-item-kind="skill"
-                                        title={skill.description || skill.name}
-                                        onClick={e => {
-                                          e.stopPropagation();
-                                          insertSkillIntoInput(skill.name);
-                                        }}
-                                        onKeyDown={e => e.key === 'Enter' && insertSkillIntoInput(skill.name)}
-                                      >
-                                        <Sparkles size={12} className="bitfun-chat-input__boost-submenu-item-icon" aria-hidden />
-                                        <span className="bitfun-chat-input__boost-submenu-item-name">
-                                          {[skill.name, skill.argumentHint?.trim()].filter(Boolean).join(' ')}
-                                        </span>
-                                      </div>
-                                    ))}
+                                    <Sparkles size={12} className="bitfun-chat-input__boost-submenu-item-icon" aria-hidden />
+                                    <span className="bitfun-chat-input__boost-submenu-item-name">
+                                      {[skill.name, skill.argumentHint?.trim()].filter(Boolean).join(' ')}
+                                    </span>
                                   </div>
-                                )}
-                                <div
-                                  role="button"
-                                  tabIndex={0}
-                                  className="bitfun-chat-input__boost-submenu-manage"
-                                  data-bf-component="chat-input"
-                                  data-bf-part="boostSubmenuManage"
-                                  data-bf-boost-item-kind="manage"
-                                  onClick={handleOpenSkillsLibrary}
-                                  onKeyDown={e => e.key === 'Enter' && handleOpenSkillsLibrary(e as any)}
-                                >
-                                  {t('chatInput.openSkillsLibrary')}
-                                </div>
+                                ))}
                               </div>
+                            )}
+                            <div
+                              role="menuitem"
+                              tabIndex={0}
+                              className="bitfun-chat-input__boost-submenu-manage"
+                              data-bf-component="chat-input"
+                              data-bf-part="boostSubmenuManage"
+                              data-bf-boost-item-kind="manage"
+                              onClick={handleOpenSkillsLibrary}
+                              onKeyDown={e => e.key === 'Enter' && handleOpenSkillsLibrary(e as any)}
+                            >
+                              {t('chatInput.openSkillsLibrary')}
                             </div>
-                          </div>
+                          </ChatInputBoostSubmenu>
                         )}
 
                         {!!currentSessionId && !isBtwSession && (
diff --git a/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.test.tsx b/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.test.tsx
new file mode 100644
index 0000000000..120b98d554
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.test.tsx
@@ -0,0 +1,58 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { ChatInputBoostSubmenu } from './ChatInputBoostSubmenu';
+
+describe('ChatInputBoostSubmenu', () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean })
+      .IS_REACT_ACT_ENVIRONMENT = true;
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+  });
+
+  it('opens by click or keyboard and closes with the reverse arrow', async () => {
+    await act(async () => {
+      root.render(
+        <ChatInputBoostSubmenu label="Additional modes" icon={<span>+</span>}>
+          <button type="button" role="menuitem">Plan</button>
+        </ChatInputBoostSubmenu>,
+      );
+    });
+
+    const trigger = container.querySelector<HTMLElement>('[role="menuitem"]');
+    const panel = container.querySelector<HTMLElement>('[role="menu"]');
+    expect(trigger?.getAttribute('aria-expanded')).toBe('false');
+    expect(panel?.getAttribute('aria-hidden')).toBe('true');
+
+    await act(async () => {
+      trigger?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+    expect(trigger?.getAttribute('aria-expanded')).toBe('true');
+    expect(panel?.getAttribute('aria-hidden')).toBe('false');
+
+    await act(async () => {
+      trigger?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }));
+    });
+    expect(trigger?.getAttribute('aria-expanded')).toBe('false');
+
+    await act(async () => {
+      trigger?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+    });
+    expect(trigger?.getAttribute('aria-expanded')).toBe('true');
+  });
+});
diff --git a/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.tsx b/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.tsx
new file mode 100644
index 0000000000..10fe683524
--- /dev/null
+++ b/src/web-ui/src/flow_chat/components/ChatInputBoostSubmenu.tsx
@@ -0,0 +1,133 @@
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+
+interface ChatInputBoostSubmenuProps {
+  label: string;
+  icon: React.ReactNode;
+  children: React.ReactNode;
+  estimatedPanelWidth?: number;
+  estimatedPanelHeight?: number;
+  testId?: string;
+}
+
+/** Shared second-level disclosure used by ChatInput's add menu. */
+export const ChatInputBoostSubmenu: React.FC<ChatInputBoostSubmenuProps> = ({
+  label,
+  icon,
+  children,
+  estimatedPanelWidth = 260,
+  estimatedPanelHeight = 200,
+  testId,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [openLeft, setOpenLeft] = useState(false);
+  const [openUp, setOpenUp] = useState(false);
+  const hostRef = useRef<HTMLDivElement>(null);
+  const closeTimerRef = useRef<number | null>(null);
+  const panelId = useId();
+
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+
+  const openFlyout = useCallback(() => {
+    clearCloseTimer();
+    const host = hostRef.current;
+    if (host) {
+      const bounds = host.getBoundingClientRect();
+      setOpenLeft(bounds.right + estimatedPanelWidth > window.innerWidth - 8);
+      setOpenUp(bounds.top + estimatedPanelHeight > window.innerHeight - 8);
+    }
+    setOpen(true);
+  }, [clearCloseTimer, estimatedPanelHeight, estimatedPanelWidth]);
+
+  const closeFlyout = useCallback(() => {
+    clearCloseTimer();
+    closeTimerRef.current = window.setTimeout(() => {
+      closeTimerRef.current = null;
+      setOpen(false);
+    }, 150);
+  }, [clearCloseTimer]);
+
+  const closeImmediately = useCallback(() => {
+    clearCloseTimer();
+    setOpen(false);
+  }, [clearCloseTimer]);
+
+  useEffect(() => clearCloseTimer, [clearCloseTimer]);
+
+  return (
+    <div
+      ref={hostRef}
+      className="bitfun-chat-input__boost-submenu-host"
+      onMouseEnter={openFlyout}
+      onMouseLeave={closeFlyout}
+      data-testid={testId}
+    >
+      <div
+        role="menuitem"
+        tabIndex={0}
+        className="bitfun-chat-input__boost-submenu-trigger"
+        data-bf-component="chat-input"
+        data-bf-part="boostSubmenuTrigger"
+        data-bf-state={open ? 'open' : undefined}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-controls={panelId}
+        onClick={(event) => {
+          event.stopPropagation();
+          openFlyout();
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Escape' || event.key === 'ArrowLeft') {
+            if (!open) return;
+            event.preventDefault();
+            event.stopPropagation();
+            closeImmediately();
+            return;
+          }
+          if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'ArrowRight') return;
+          event.preventDefault();
+          event.stopPropagation();
+          openFlyout();
+        }}
+      >
+        <span className="bitfun-chat-input__boost-submenu-trigger-main">
+          {icon}
+          <span>{label}</span>
+        </span>
+        <ChevronRight
+          size={14}
+          className="bitfun-chat-input__boost-submenu-chevron"
+          aria-hidden
+        />
+      </div>
+      <div
+        className={[
+          'bitfun-chat-input__boost-submenu-shell',
+          open ? 'bitfun-chat-input__boost-submenu-shell--open' : '',
+          openLeft ? 'bitfun-chat-input__boost-submenu-shell--left' : '',
+          openUp ? 'bitfun-chat-input__boost-submenu-shell--up' : '',
+        ].filter(Boolean).join(' ')}
+      >
+        <div
+          id={panelId}
+          role="menu"
+          className="bitfun-chat-input__boost-submenu-panel"
+          data-bf-component="chat-input"
+          data-bf-part="boostSubmenuPanel"
+          data-bf-state={open ? 'open' : undefined}
+          aria-hidden={!open}
+          {...(!open ? { inert: '' } : {})}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatInputBoostSubmenu;
diff --git a/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStripLayout.test.ts b/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStripLayout.test.ts
index 57b8d54b95..00289c355d 100644
--- a/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStripLayout.test.ts
+++ b/src/web-ui/src/flow_chat/components/ChatInputWorkspaceStripLayout.test.ts
@@ -242,21 +242,36 @@ describe('composer context track layout', () => {
     expect(chatInput).toContain('!isMultiLine && executionLevelPolicy.userConfigurable ? (');
   });
 
-  it('keeps enabled workflow Skills as shortcuts at the top of the add menu', () => {
+  it('groups additional modes in one second-level menu immediately after Harness', () => {
     const chatInput = readLocalFile('ChatInput.tsx');
-    const quickSkillsIndex = chatInput.indexOf('{quickSkillShortcuts.length > 0 && (');
-    const reviewIndex = chatInput.indexOf('data-bf-agent-id="Review"');
+    const menuHarnessIndex = chatInput.indexOf('presentation="menu-item"');
+    const additionalModesIndex = chatInput.indexOf("label={t('chatInput.boostAdditionalModes')}");
+    const quickSkillsIndex = chatInput.indexOf('quickSkillShortcuts.map(shortcut => (');
+    const reviewDefinitionIndex = chatInput.indexOf("id: 'review',");
+    const additionalModeItemsIndex = chatInput.indexOf('additionalModeItems.map(item => (');
     const contextIndex = chatInput.indexOf('onClick={handleBoostOpenAtContext}');
 
+    expect(menuHarnessIndex).toBeGreaterThan(-1);
+    expect(additionalModesIndex).toBeGreaterThan(menuHarnessIndex);
     expect(quickSkillsIndex).toBeGreaterThan(-1);
-    expect(reviewIndex).toBeGreaterThan(quickSkillsIndex);
-    expect(contextIndex).toBeGreaterThan(reviewIndex);
+    expect(reviewDefinitionIndex).toBeGreaterThan(quickSkillsIndex);
+    expect(additionalModeItemsIndex).toBeGreaterThan(additionalModesIndex);
+    expect(contextIndex).toBeGreaterThan(additionalModeItemsIndex);
+    expect(chatInput).toContain('additionalModeItems.map(item => (');
+    expect(chatInput).toContain('data-bf-boost-item-kind="additional-mode"');
+    expect(chatInput).toContain('data-testid={`chat-input-additional-mode-${item.id}`}');
+    expect(chatInput).not.toContain('boost-submenu-item--unavailable');
+    expect(chatInput).not.toContain('boost-submenu-item-status');
+    expect(chatInput).not.toContain('data-bf-boost-item-kind="workflow"');
+    expect(chatInput).not.toContain('data-bf-agent-id="Review"');
     expect(chatInput).toContain(
       'resolveChatInputQuickSkillShortcuts(resolvedModeSkills)',
     );
     expect(chatInput).toContain('layoutRevision: boostMenuLayoutRevision');
-    expect(chatInput).toContain('insertSkillIntoInput(shortcut.skill.name)');
-    expect(chatInput).toContain('data-testid={`chat-input-quick-skill-${shortcut.id}`}');
+    expect(chatInput).toContain('skillName: shortcut.skill.name');
+    expect(chatInput).toContain('selectAdditionalMode(item.selection)');
+    expect(chatInput).toContain('insertAdditionalModeIntoInput(selection.modeId)');
+    expect(chatInput).not.toContain("selectSlashCommandAction('review')");
   });
 
   it('moves Harness beside add in expanded layout and keeps the model pair trailing', () => {
diff --git a/src/web-ui/src/flow_chat/components/FlowChatTypographyRoles.test.ts b/src/web-ui/src/flow_chat/components/FlowChatTypographyRoles.test.ts
index 47b12f4555..533b922262 100644
--- a/src/web-ui/src/flow_chat/components/FlowChatTypographyRoles.test.ts
+++ b/src/web-ui/src/flow_chat/components/FlowChatTypographyRoles.test.ts
@@ -69,7 +69,7 @@ describe('FlowChat semantic typography roles', () => {
     expectRole(model, '&__trigger {', 'control');
     expectRole(model, '&__option-name {', 'control');
     expectRole(reasoning, '&__title {', 'control');
-    expectRole(reasoning, 'strong {', 'control');
+    expectRole(reasoning, '&__option-label {', 'control');
     expectRole(workspaceStrip, '&__permission-option-label {', 'control');
   });
 
diff --git a/src/web-ui/src/flow_chat/components/HarnessProfileSelector.scss b/src/web-ui/src/flow_chat/components/HarnessProfileSelector.scss
index 38f9db4db9..a0eae5f903 100644
--- a/src/web-ui/src/flow_chat/components/HarnessProfileSelector.scss
+++ b/src/web-ui/src/flow_chat/components/HarnessProfileSelector.scss
@@ -53,6 +53,47 @@
   text-overflow: ellipsis;
 }
 
+.bitfun-harness-selector__trigger-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bitfun-harness-selector__trigger-meta,
+.bitfun-harness-selector__trigger-current {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.bitfun-harness-selector__trigger-meta {
+  flex: none;
+  gap: 6px;
+  max-width: 62%;
+}
+
+.bitfun-harness-selector__trigger-current {
+  gap: 4px;
+  overflow: hidden;
+  color: var(--bf-appearance-token-color-text-muted);
+  font-size: flow-type.$support-size;
+  font-weight: 400;
+}
+
+.bitfun-harness-selector__trigger-current-separator {
+  flex: none;
+}
+
+.bitfun-harness-selector__trigger-current-value {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--bf-appearance-token-color-text-secondary);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .bitfun-harness-selector__trigger-chevron {
   flex: none;
   color: var(--bf-appearance-token-color-text-muted);
diff --git a/src/web-ui/src/flow_chat/components/HarnessProfileSelector.test.tsx b/src/web-ui/src/flow_chat/components/HarnessProfileSelector.test.tsx
index 73eb1ee62e..b2f13eec18 100644
--- a/src/web-ui/src/flow_chat/components/HarnessProfileSelector.test.tsx
+++ b/src/web-ui/src/flow_chat/components/HarnessProfileSelector.test.tsx
@@ -148,6 +148,15 @@ describe('HarnessProfileSelector', () => {
     );
     expect(selectorRoot?.dataset.bfPresentation).toBe('menu-item');
     expect(trigger?.querySelector('.bitfun-harness-selector__trigger-chevron')).not.toBeNull();
+    expect(
+      trigger?.querySelector('.bitfun-harness-selector__trigger-label')?.textContent,
+    ).toBe('chatInput.harness.menuLabel');
+    expect(
+      trigger?.querySelector('.bitfun-harness-selector__trigger-current')?.textContent,
+    ).toContain('chatInput.current');
+    expect(
+      trigger?.querySelector('.bitfun-harness-selector__trigger-current-value')?.textContent,
+    ).toBe('chatInput.harness.profiles.balanced.name');
 
     await act(async () => {
       trigger?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
diff --git a/src/web-ui/src/flow_chat/components/HarnessProfileSelector.tsx b/src/web-ui/src/flow_chat/components/HarnessProfileSelector.tsx
index 20d17e5cd6..bdbf7154cb 100644
--- a/src/web-ui/src/flow_chat/components/HarnessProfileSelector.tsx
+++ b/src/web-ui/src/flow_chat/components/HarnessProfileSelector.tsx
@@ -332,15 +332,32 @@ export const HarnessProfileSelector: React.FC<HarnessProfileSelectorProps> = ({
           }}
           data-testid="harness-profile-selector"
         >
-          <span className="bitfun-harness-selector__trigger-value">{triggerLabel}</span>
           {presentation === 'menu-item' ? (
-            <ChevronRight
-              className="bitfun-harness-selector__trigger-chevron"
-              size={14}
-              strokeWidth={1.8}
-              aria-hidden
-            />
-          ) : null}
+            <>
+              <span className="bitfun-harness-selector__trigger-label">
+                {t('chatInput.harness.menuLabel')}
+              </span>
+              <span className="bitfun-harness-selector__trigger-meta">
+                <span className="bitfun-harness-selector__trigger-current">
+                  <span>{t('chatInput.current')}</span>
+                  <span className="bitfun-harness-selector__trigger-current-separator" aria-hidden>
+                    ·
+                  </span>
+                  <span className="bitfun-harness-selector__trigger-current-value">
+                    {triggerLabel}
+                  </span>
+                </span>
+                <ChevronRight
+                  className="bitfun-harness-selector__trigger-chevron"
+                  size={14}
+                  strokeWidth={1.8}
+                  aria-hidden
+                />
+              </span>
+            </>
+          ) : (
+            <span className="bitfun-harness-selector__trigger-value">{triggerLabel}</span>
+          )}
         </button>
       </Tooltip>
 
diff --git a/src/web-ui/src/flow_chat/components/ModelSelector.tsx b/src/web-ui/src/flow_chat/components/ModelSelector.tsx
index 41e1a7ebb3..ad0e233a68 100644
--- a/src/web-ui/src/flow_chat/components/ModelSelector.tsx
+++ b/src/web-ui/src/flow_chat/components/ModelSelector.tsx
@@ -52,8 +52,6 @@ import {
   ReasoningIntensityMark,
   ReasoningPresetSelector,
   presetDisplayLabel,
-  presetModeLabel,
-  presetSourceLabel,
   reasoningIntensityLevel,
 } from './ReasoningPresetSelector';
 import {
@@ -859,14 +857,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   const reasoningPresetLabels = orderedReasoningPresets.map(preset => (
     presetDisplayLabel(preset, orderedReasoningPresets, t)
   ));
-  const reasoningLabelCounts = new Map<string, number>();
-  reasoningPresetLabels.forEach((label) => {
-    const normalizedLabel = label.trim().toLowerCase();
-    reasoningLabelCounts.set(
-      normalizedLabel,
-      (reasoningLabelCounts.get(normalizedLabel) ?? 0) + 1,
-    );
-  });
   const hasNativeReasoningSettings = Boolean(sessionId && orderedReasoningPresets.length > 0);
   const nativeSettingsAreDefault = currentNativeModelId === 'primary' && !selectedReasoningPreset;
 
@@ -1947,33 +1937,17 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                   data-bf-state={!selectedReasoningDescriptor ? 'selected' : undefined}
                   onClick={() => handleSelectReasoningPresetFromMenu(null)}
                 >
-                  {defaultReasoningDescriptor && (
-                    <ReasoningIntensityMark
-                      level={reasoningIntensityLevel(defaultReasoningDescriptor, orderedReasoningPresets)}
-                    />
-                  )}
                   <div className="bitfun-model-selector__option-main" data-bf-component="model-selector" data-bf-part="optionMain">
                     <span className="bitfun-model-selector__option-name">
                       {t('reasoningSelector.auto')}
                     </span>
-                    {defaultReasoningDescriptor && (
-                      <span className="bitfun-model-selector__option-desc">
-                        {presetDisplayLabel(defaultReasoningDescriptor, orderedReasoningPresets, t)}
-                      </span>
-                    )}
                   </div>
-                  {!selectedReasoningDescriptor && (
-                    <Check size={14} className="bitfun-model-selector__option-check" />
-                  )}
                 </button>
 
                 {orderedReasoningPresets.map((preset, index) => {
                   const isSelected = selectedReasoningDescriptor?.id === preset.id;
                   const label = reasoningPresetLabels[index]
                     ?? presetDisplayLabel(preset, orderedReasoningPresets, t);
-                  const hasDuplicateLabel = (
-                    reasoningLabelCounts.get(label.trim().toLowerCase()) ?? 0
-                  ) > 1;
 
                   return (
                     <button
@@ -1989,22 +1963,11 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                       data-bf-state={isSelected ? 'selected' : undefined}
                       onClick={() => handleSelectReasoningPresetFromMenu(preset.id)}
                     >
-                      <ReasoningIntensityMark
-                        level={reasoningIntensityLevel(preset, orderedReasoningPresets)}
-                      />
                       <div className="bitfun-model-selector__option-main" data-bf-component="model-selector" data-bf-part="optionMain">
                         <span className="bitfun-model-selector__option-name">
                           {label}
                         </span>
-                        <span className="bitfun-model-selector__option-desc">
-                          {hasDuplicateLabel
-                            ? presetSourceLabel(preset.source, t)
-                            : presetModeLabel(preset, orderedReasoningPresets, t)}
-                        </span>
                       </div>
-                      {isSelected && (
-                        <Check size={14} className="bitfun-model-selector__option-check" />
-                      )}
                     </button>
                   );
                 })}
diff --git a/src/web-ui/src/flow_chat/components/ModelSelectorProviderLevels.test.tsx b/src/web-ui/src/flow_chat/components/ModelSelectorProviderLevels.test.tsx
index 94d8bf5b37..1941230f77 100644
--- a/src/web-ui/src/flow_chat/components/ModelSelectorProviderLevels.test.tsx
+++ b/src/web-ui/src/flow_chat/components/ModelSelectorProviderLevels.test.tsx
@@ -304,6 +304,10 @@ describe('ModelSelector provider levels', () => {
     ));
     expect(options.map(option => option.dataset.presetId))
       .toEqual(['auto', 'medium', 'high']);
+    expect(options.every(option => (
+      option.querySelector('.bitfun-model-selector__option-desc') === null
+    ))).toBe(true);
+    expect(options.every(option => option.querySelector('svg') === null)).toBe(true);
     expect(options.find(option => option.dataset.presetId === 'high')?.getAttribute('aria-checked'))
       .toBe('true');
   });
diff --git a/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.scss b/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.scss
index 0736f65c64..ef6161704a 100644
--- a/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.scss
+++ b/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.scss
@@ -147,7 +147,6 @@
   &__auto {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
     min-width: 0;
     min-height: 22px;
     padding: 2px 5px;
@@ -169,15 +168,6 @@
       color: var(--bf-appearance-token-color-text-primary);
     }
 
-    small {
-      color: var(--bf-appearance-token-color-text-muted);
-      font-size: inherit;
-    }
-  }
-
-  &__auto-check {
-    flex: none;
-    color: var(--bf-appearance-token-color-accent-500);
   }
 
   &__options {
@@ -187,16 +177,12 @@
   }
 
   &__option {
-    position: relative;
     display: flex;
-    flex-direction: row;
     align-items: center;
-    justify-content: flex-start;
-    gap: 7px;
     width: 100%;
     min-width: 0;
-    min-height: 38px;
-    padding: 4px 6px;
+    min-height: 30px;
+    padding: 5px 8px;
     border: 0;
     border-radius: var(--bf-appearance-token-size-radius-base);
     background: transparent;
@@ -215,61 +201,18 @@
       color: var(--bf-appearance-token-color-text-primary);
     }
 
-    strong,
-    small {
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      letter-spacing: 0;
-    }
   }
 
-  &__option-copy {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+  &__option-label {
     flex: 1;
-    gap: 1px;
-    width: 100%;
     min-width: 0;
-
-    strong,
-    small {
-      display: block;
-      max-width: 100%;
-    }
-
-    strong {
-      color: var(--bf-appearance-token-color-text-primary);
-      font-size: flow-type.$control-size;
-      font-weight: 500;
-      line-height: 1.25;
-    }
-
-    small {
-      color: var(--bf-appearance-token-color-text-muted);
-      font-size: flow-type.$support-size;
-      line-height: 1.25;
-    }
-  }
-
-  &__option-check {
-    flex: none;
-    color: var(--bf-appearance-token-color-accent-500);
-  }
-}
-
-@media (max-width: 360px) {
-  .bitfun-reasoning-preset-selector {
-    &__menu {
-      padding: 5px;
-    }
-
-    &__option {
-      min-height: 38px;
-      padding-inline: 5px;
-    }
+    overflow: hidden;
+    color: var(--bf-appearance-token-color-text-primary);
+    font-size: flow-type.$control-size;
+    font-weight: 500;
+    line-height: 1.25;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
diff --git a/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.test.tsx b/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.test.tsx
index ad3734a7b2..263a6dfe9a 100644
--- a/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.test.tsx
+++ b/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.test.tsx
@@ -21,14 +21,7 @@ vi.mock('react-i18next', () => ({
         'reasoningSelector.levels.high': 'High',
         'reasoningSelector.levels.xhigh': 'Extra high',
         'reasoningSelector.levels.max': 'Maximum',
-        'reasoningSelector.modes.off': 'Thinking off',
-        'reasoningSelector.modes.on': 'Thinking on',
-        'reasoningSelector.modes.low': 'Fast mode',
-        'reasoningSelector.modes.medium': 'Balanced mode',
-        'reasoningSelector.modes.high': 'Deep mode',
-        'reasoningSelector.modes.xhigh': 'Intensive mode',
-        'reasoningSelector.modes.max': 'Maximum mode',
-        'reasoningSelector.modes.custom': 'Model preset',
+        'reasoningSelector.auto': 'Auto',
         'reasoningSelector.current': 'Thinking: {{preset}}',
         'reasoningSelector.currentAuto': 'Thinking: auto ({{preset}})',
       } as Record<string, string>)[key] ?? options?.defaultValue ?? key;
@@ -116,7 +109,7 @@ describe('ReasoningPresetSelector', () => {
     expect(onSelect).toHaveBeenCalledWith(null);
   });
 
-  it('only shows preset sources when visible labels need disambiguation', async () => {
+  it('renders Auto and presets as text-only single-line options', async () => {
     await act(async () => {
       root.render(
         <ReasoningPresetSelector
@@ -137,12 +130,17 @@ describe('ReasoningPresetSelector', () => {
       container.querySelector<HTMLButtonElement>('[data-testid="chat-reasoning-preset-selector-btn"]')?.click();
     });
 
-    expect(document.body.querySelector('[data-preset-id="low"] small')?.textContent)
-      .toBe('reasoningSelector.source.models_dev');
-    expect(document.body.querySelector('[data-preset-id="custom-low"] small')?.textContent)
-      .toBe('reasoningSelector.source.model_config');
-    expect(document.body.querySelector('[data-preset-id="high"] small')?.textContent)
-      .toBe('Deep mode');
+    const auto = document.body.querySelector<HTMLButtonElement>(
+      '.bitfun-reasoning-preset-selector__auto',
+    );
+    const options = Array.from(document.body.querySelectorAll<HTMLButtonElement>(
+      '.bitfun-reasoning-preset-selector__options [data-preset-id]',
+    ));
+    expect(auto?.textContent).toBe('Auto');
+    expect(options.map(option => option.textContent)).toEqual(['Low', 'Low', 'High']);
+    expect([auto, ...options].every(option => (
+      option?.querySelector('small, svg') === null
+    ))).toBe(true);
   });
 
   it('uses the concentric series in the compact trigger and accessible name', async () => {
@@ -213,7 +211,7 @@ describe('ReasoningPresetSelector', () => {
     ).toBe('Thinking: Extra high');
   });
 
-  it('renders the common four levels as a low-to-high visual list', async () => {
+  it('renders the common four levels as an ordered text-only list', async () => {
     await act(async () => {
       root.render(
         <ReasoningPresetSelector
@@ -244,17 +242,12 @@ describe('ReasoningPresetSelector', () => {
     );
     expect(options.map(option => option.dataset.presetId))
       .toEqual(['low', 'medium', 'high', 'xhigh']);
-    expect(options.map(option => option.querySelector<HTMLElement>(
-      '.bitfun-reasoning-preset-selector__status-meter',
-    )?.dataset.intensity)).toEqual(['1', '2', '3', '4']);
-    expect(options.map(option => option.querySelector('strong')?.textContent))
+    expect(options.map(option => option.querySelector(
+      '.bitfun-reasoning-preset-selector__option-label',
+    )?.textContent))
       .toEqual(['Low', 'Medium', 'High', 'Extra high']);
-    expect(options.map(option => option.querySelector('small')?.textContent))
-      .toEqual(['Fast mode', 'Balanced mode', 'Deep mode', 'Intensive mode']);
-    expect(options[2]?.querySelector('.bitfun-reasoning-preset-selector__option-check'))
-      .not.toBeNull();
-    expect(options[3]?.querySelector('.bitfun-reasoning-preset-selector__status-peak'))
-      .not.toBeNull();
+    expect(options.every(option => option.querySelector('small, svg') === null)).toBe(true);
+    expect(options[2]?.getAttribute('aria-checked')).toBe('true');
   });
 
   it('presents a merged off/on/effort catalog as four user-facing intensity levels', async () => {
@@ -291,26 +284,14 @@ describe('ReasoningPresetSelector', () => {
     );
     expect(options.map(option => option.dataset.presetId))
       .toEqual(['off', 'on', 'low', 'high', 'max']);
-    expect(options.map(option => option.querySelector<HTMLElement>(
-      '.bitfun-reasoning-preset-selector__status-meter',
-    )?.dataset.intensity)).toEqual(['0', '1', '2', '3', '4']);
-    expect(options.map(option => option.querySelector('strong')?.textContent))
+    expect(options.map(option => option.querySelector(
+      '.bitfun-reasoning-preset-selector__option-label',
+    )?.textContent))
       .toEqual(['Off', 'Low', 'Medium', 'High', 'Maximum']);
-    expect(options.map(option => option.querySelector('small')?.textContent))
-      .toEqual(['Thinking off', 'Fast mode', 'Balanced mode', 'Deep mode', 'Maximum mode']);
-    expect(options.map(option => option.textContent).join(' '))
-      .not.toContain('reasoningSelector.source.models_dev');
+    expect(options.every(option => option.querySelector('small, svg') === null)).toBe(true);
 
     expect(zhCnFlowChat.reasoningSelector.levels)
       .toMatchObject({ off: '关闭', low: '低', medium: '中', high: '高', max: '最高' });
-    expect(zhCnFlowChat.reasoningSelector.modes)
-      .toMatchObject({
-        off: '关闭思考',
-        on: '开启思考',
-        low: '快速模式',
-        high: '深度模式',
-        max: '最高强度',
-      });
   });
 
   it('returns focus to the trigger and keeps keyboard motion suppressed while exiting', async () => {
diff --git a/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.tsx b/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.tsx
index 8327ecff05..bd9671026b 100644
--- a/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.tsx
+++ b/src/web-ui/src/flow_chat/components/ReasoningPresetSelector.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import {
-  Check,
   Circle,
   CircleOff,
 } from 'lucide-react';
@@ -33,34 +32,6 @@ function presetLabel(
   return t(`reasoningEffort.${preset.id}`, { defaultValue: preset.label || preset.id });
 }
 
-export function presetSourceLabel(
-  source: ReasoningPresetDescriptor['source'],
-  t: ReturnType<typeof useTranslation>['t'],
-): string {
-  switch (source) {
-    case 'models_dev':
-      return t('reasoningSelector.source.models_dev');
-    case 'adapter_fallback':
-      return t('reasoningSelector.source.adapter_fallback');
-    case 'model_config':
-      return t('reasoningSelector.source.model_config');
-  }
-}
-
-function presetSourceTooltip(
-  source: ReasoningPresetDescriptor['source'],
-  t: ReturnType<typeof useTranslation>['t'],
-): string {
-  switch (source) {
-    case 'models_dev':
-      return t('reasoningSelector.sourceTooltip.models_dev');
-    case 'adapter_fallback':
-      return t('reasoningSelector.sourceTooltip.adapter_fallback');
-    case 'model_config':
-      return t('reasoningSelector.sourceTooltip.model_config');
-  }
-}
-
 export function presetDisplayLabel(
   preset: ReasoningPresetDescriptor,
   orderedPresets: ReasoningPresetDescriptor[],
@@ -73,19 +44,6 @@ export function presetDisplayLabel(
     : fallback;
 }
 
-export function presetModeLabel(
-  preset: ReasoningPresetDescriptor,
-  orderedPresets: ReasoningPresetDescriptor[],
-  t: ReturnType<typeof useTranslation>['t'],
-): string {
-  const semanticKey = presetVisualSemanticKey(preset, orderedPresets);
-  return semanticKey
-    ? t(`reasoningSelector.modes.${semanticKey}`, {
-        defaultValue: t('reasoningSelector.modes.custom'),
-      })
-    : t('reasoningSelector.modes.custom');
-}
-
 type ReasoningIntensityLevel = 0 | 1 | 2 | 3 | 4;
 
 type ReasoningPresetSemanticKey =
@@ -374,11 +332,6 @@ export const ReasoningPresetSelector: React.FC<ReasoningPresetSelectorProps> = (
   const presetLabels = orderedPresets.map(preset => (
     presetDisplayLabel(preset, orderedPresets, t)
   ));
-  const labelCounts = new Map<string, number>();
-  presetLabels.forEach((label) => {
-    const normalizedLabel = label.trim().toLowerCase();
-    labelCounts.set(normalizedLabel, (labelCounts.get(normalizedLabel) ?? 0) + 1);
-  });
 
   const currentLabel = selected
     ? presetLabel(selected, t)
@@ -491,16 +444,6 @@ export const ReasoningPresetSelector: React.FC<ReasoningPresetSelectorProps> = (
               onClick={() => select(null)}
             >
               <span>{t('reasoningSelector.auto')}</span>
-              {defaultPreset && (
-                <small>{presetDisplayLabel(defaultPreset, orderedPresets, t)}</small>
-              )}
-              {!selected && (
-                <Check
-                  className="bitfun-reasoning-preset-selector__auto-check"
-                  size={12}
-                  aria-hidden="true"
-                />
-              )}
             </button>
           </div>
           <div
@@ -511,43 +454,23 @@ export const ReasoningPresetSelector: React.FC<ReasoningPresetSelectorProps> = (
             {orderedPresets.map((preset, index) => {
               const isSelected = selected?.id === preset.id;
               const label = presetLabels[index] ?? presetLabel(preset, t);
-              const hasDuplicateLabel = (labelCounts.get(label.trim().toLowerCase()) ?? 0) > 1;
-              const optionIntensity = reasoningIntensityLevel(preset, orderedPresets);
               return (
-                <Tooltip
+                <button
                   key={preset.id}
-                  content={presetSourceTooltip(preset.source, t)}
-                  placement="right"
+                  type="button"
+                  role="menuitemradio"
+                  aria-checked={isSelected}
+                  data-preset-id={preset.id}
+                  className="bitfun-reasoning-preset-selector__option"
+                  data-bf-component="reasoning-preset-selector"
+                  data-bf-part="option"
+                  data-bf-state={isSelected ? 'selected' : undefined}
+                  onClick={() => select(preset.id)}
                 >
-                  <button
-                    type="button"
-                    role="menuitemradio"
-                    aria-checked={isSelected}
-                    data-preset-id={preset.id}
-                    className="bitfun-reasoning-preset-selector__option"
-                    data-bf-component="reasoning-preset-selector"
-                    data-bf-part="option"
-                    data-bf-state={isSelected ? 'selected' : undefined}
-                    onClick={() => select(preset.id)}
-                  >
-                    <ReasoningIntensityMark level={optionIntensity} />
-                    <span className="bitfun-reasoning-preset-selector__option-copy">
-                      <strong>{label}</strong>
-                      <small>
-                        {hasDuplicateLabel
-                          ? presetSourceLabel(preset.source, t)
-                          : presetModeLabel(preset, orderedPresets, t)}
-                      </small>
-                    </span>
-                    {isSelected && (
-                      <Check
-                        className="bitfun-reasoning-preset-selector__option-check"
-                        size={12}
-                        aria-hidden="true"
-                      />
-                    )}
-                  </button>
-                </Tooltip>
+                  <span className="bitfun-reasoning-preset-selector__option-label">
+                    {label}
+                  </span>
+                </button>
               );
             })}
           </div>
diff --git a/src/web-ui/src/flow_chat/components/RichTextInput.appearance.ts b/src/web-ui/src/flow_chat/components/RichTextInput.appearance.ts
index cac563fe68..0038e3b65d 100644
--- a/src/web-ui/src/flow_chat/components/RichTextInput.appearance.ts
+++ b/src/web-ui/src/flow_chat/components/RichTextInput.appearance.ts
@@ -28,6 +28,7 @@ export const richTextInputAppearanceDescriptor: AppearanceSurfaceDescriptor = {
         'web-element',
         'widget-reference',
         'skill-reference',
+        'additional-mode-reference',
       ],
     },
   ],
diff --git a/src/web-ui/src/flow_chat/components/RichTextInput.test.tsx b/src/web-ui/src/flow_chat/components/RichTextInput.test.tsx
index 6016a80acf..5387d82f40 100644
--- a/src/web-ui/src/flow_chat/components/RichTextInput.test.tsx
+++ b/src/web-ui/src/flow_chat/components/RichTextInput.test.tsx
@@ -222,6 +222,24 @@ describeWithJsdom('RichTextInput external sync', () => {
     expect(editor.textContent).toContain('pdf');
   });
 
+  it('renders Review with the same capsule anatomy as a Plan skill reference', async () => {
+    const harnessRef = createRef<HarnessHandle>();
+    const editor = await renderHarness(harnessRef);
+
+    await act(async () => {
+      harnessRef.current?.setValue('[[bitfun-additional-mode:review]]');
+    });
+
+    const reviewPill = editor.querySelector(
+      '[data-inline-token-type="additional-mode-ref"]',
+    ) as HTMLElement | null;
+    expect(reviewPill).toBeTruthy();
+    expect(reviewPill?.classList.contains('rich-text-tag-pill--skill-ref')).toBe(true);
+    expect(reviewPill?.getAttribute('data-bf-context-type')).toBe('additional-mode-reference');
+    expect(reviewPill?.querySelector('.lucide-puzzle')).toBeTruthy();
+    expect(reviewPill?.textContent).toContain('Review');
+  });
+
   it('serializes and restores session reference capsules without parsing their labels', async () => {
     const sessionReference: ContextItem = {
       id: 'session-reference-1',
@@ -485,6 +503,34 @@ describeWithJsdom('RichTextInput external sync', () => {
     expect(skillPill?.nextSibling?.textContent).toBe(' ');
   });
 
+  it('can append the Review reference through the same inline-token interaction', async () => {
+    const onChange = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <RichTextInput
+          value="hello"
+          onChange={onChange}
+          contexts={emptyContexts}
+          onRemoveContext={() => {}}
+        />
+      );
+    });
+
+    const editor = container.querySelector('.rich-text-input') as RichTextInputElement | null;
+    expect(editor).toBeTruthy();
+
+    await act(async () => {
+      editor?.appendInlineTokenAtEnd?.('[[bitfun-additional-mode:review]]');
+    });
+
+    expect(onChange).toHaveBeenCalledWith(
+      'hello [[bitfun-additional-mode:review]]',
+      emptyContexts,
+    );
+    expect(editor?.querySelector('.rich-text-tag-pill--additional-mode-ref')).toBeTruthy();
+  });
+
   it('clears placeholder br before appending the first inline skill token', async () => {
     const onChange = vi.fn();
 
diff --git a/src/web-ui/src/flow_chat/components/RichTextInput.tsx b/src/web-ui/src/flow_chat/components/RichTextInput.tsx
index b63c92ff2a..9fb5508f40 100644
--- a/src/web-ui/src/flow_chat/components/RichTextInput.tsx
+++ b/src/web-ui/src/flow_chat/components/RichTextInput.tsx
@@ -16,6 +16,10 @@ import {
   getSkillPromptReferenceMatches,
   parseSkillPromptReferenceToken,
 } from '../utils/skillPromptReference';
+import {
+  getAdditionalModePromptReferenceMatches,
+  parseAdditionalModePromptReferenceToken,
+} from '../utils/additionalModePromptReference';
 import {
   appendComposerTextSegment,
   COMPOSER_PRESENTATION_VERSION,
@@ -344,21 +348,27 @@ export const RichTextInput = React.forwardRef<HTMLDivElement, RichTextInputProps
     return tag;
   }, [internalRef, removeInlineTokenElement]);
 
-  const createSkillReferenceElement = useCallback((token: string): HTMLSpanElement | null => {
-    const payload = parseSkillPromptReferenceToken(token);
-    if (!payload) {
-      return null;
-    }
-
+  const createSkillStyledReferenceElement = useCallback((options: {
+    token: string;
+    contextType: 'skill-reference' | 'additional-mode-reference';
+    inlineTokenType: 'skill-ref' | 'additional-mode-ref';
+    title: string;
+    displayText: string;
+    modifierClass?: string;
+  }): HTMLSpanElement => {
     const tag = document.createElement('span');
-    tag.className = 'rich-text-tag-pill rich-text-tag-pill--skill-ref';
+    tag.className = [
+      'rich-text-tag-pill',
+      'rich-text-tag-pill--skill-ref',
+      options.modifierClass,
+    ].filter(Boolean).join(' ');
     tag.dataset.bfComponent = 'rich-text-input';
     tag.dataset.bfPart = 'contextTag';
-    tag.dataset.bfContextType = 'skill-reference';
+    tag.dataset.bfContextType = options.contextType;
     tag.contentEditable = 'false';
-    tag.dataset.tagFormat = token;
-    tag.dataset.inlineTokenType = 'skill-ref';
-    tag.title = `Skill: ${payload.skillName}`;
+    tag.dataset.tagFormat = options.token;
+    tag.dataset.inlineTokenType = options.inlineTokenType;
+    tag.title = options.title;
 
     const badge = document.createElement('span');
     badge.className = 'rich-text-tag-pill__badge rich-text-tag-pill__badge--icon';
@@ -370,7 +380,7 @@ export const RichTextInput = React.forwardRef<HTMLDivElement, RichTextInputProps
     text.className = 'rich-text-tag-pill__text rich-text-tag-pill__text--skill-ref';
     text.dataset.bfComponent = 'rich-text-input';
     text.dataset.bfPart = 'tagText';
-    text.textContent = payload.skillName;
+    text.textContent = options.displayText;
 
     const remove = document.createElement('button');
     remove.className = 'rich-text-tag-pill__remove';
@@ -395,9 +405,38 @@ export const RichTextInput = React.forwardRef<HTMLDivElement, RichTextInputProps
     return tag;
   }, [internalRef, removeInlineTokenElement]);
 
+  const createSkillReferenceElement = useCallback((token: string): HTMLSpanElement | null => {
+    const payload = parseSkillPromptReferenceToken(token);
+    return payload
+      ? createSkillStyledReferenceElement({
+          token,
+          contextType: 'skill-reference',
+          inlineTokenType: 'skill-ref',
+          title: `Skill: ${payload.skillName}`,
+          displayText: payload.skillName,
+        })
+      : null;
+  }, [createSkillStyledReferenceElement]);
+
+  const createAdditionalModeReferenceElement = useCallback((token: string): HTMLSpanElement | null => {
+    const payload = parseAdditionalModePromptReferenceToken(token);
+    return payload
+      ? createSkillStyledReferenceElement({
+          token,
+          contextType: 'additional-mode-reference',
+          inlineTokenType: 'additional-mode-ref',
+          title: `Additional mode: ${payload.displayText}`,
+          displayText: payload.displayText,
+          modifierClass: 'rich-text-tag-pill--additional-mode-ref',
+        })
+      : null;
+  }, [createSkillStyledReferenceElement]);
+
   const createInlineTokenElement = useCallback((token: string): HTMLSpanElement | null => {
-    return createWidgetReferenceElement(token) ?? createSkillReferenceElement(token);
-  }, [createSkillReferenceElement, createWidgetReferenceElement]);
+    return createWidgetReferenceElement(token)
+      ?? createAdditionalModeReferenceElement(token)
+      ?? createSkillReferenceElement(token);
+  }, [createAdditionalModeReferenceElement, createSkillReferenceElement, createWidgetReferenceElement]);
 
   const buildComposerPresentation = useCallback((): ComposerPresentation | null => {
     const editor = internalRef.current;
@@ -444,6 +483,11 @@ export const RichTextInput = React.forwardRef<HTMLDivElement, RichTextInputProps
       const inlineToken = element.dataset.inlineTokenType;
       const token = element.dataset.tagFormat;
       if (inlineToken && token) {
+        const additionalMode = parseAdditionalModePromptReferenceToken(token);
+        if (additionalMode) {
+          appendText(token);
+          return;
+        }
         const skill = parseSkillPromptReferenceToken(token);
         if (skill) {
           segments.push({
@@ -519,6 +563,10 @@ export const RichTextInput = React.forwardRef<HTMLDivElement, RichTextInputProps
         ...match,
         kind: 'skill-ref' as const,
       })),
+      ...getAdditionalModePromptReferenceMatches(text).map(match => ({
+        ...match,
+        kind: 'additional-mode-ref' as const,
+      })),
     ].sort((a, b) => a.start - b.start);
 
     if (matches.length === 0) {
@@ -534,7 +582,9 @@ export const RichTextInput = React.forwardRef<HTMLDivElement, RichTextInputProps
 
       const tokenElement = match.kind === 'widget-ref'
         ? createWidgetReferenceElement(match.token)
-        : createSkillReferenceElement(match.token);
+        : match.kind === 'additional-mode-ref'
+          ? createAdditionalModeReferenceElement(match.token)
+          : createSkillReferenceElement(match.token);
       if (tokenElement) {
         fragment.appendChild(tokenElement);
       } else {
@@ -548,7 +598,7 @@ export const RichTextInput = React.forwardRef<HTMLDivElement, RichTextInputProps
     }
 
     editor.replaceChildren(fragment);
-  }, [createSkillReferenceElement, createWidgetReferenceElement]);
+  }, [createAdditionalModeReferenceElement, createSkillReferenceElement, createWidgetReferenceElement]);
 
   /** Map textContent offsets to a DOM Range to replace only the @ span. */
   const getRangeByTextOffsets = useCallback((root: Node, start: number, end: number): Range | null => {
diff --git a/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCall.scss b/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCall.scss
index 6844aa6b41..4714dcc1bd 100644
--- a/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCall.scss
+++ b/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCall.scss
@@ -1,40 +1,5 @@
 @use '../../../component-library/styles/tokens' as *;
 
-.bitfun-nav-panel__voice-call {
-  position: relative;
-
-  &:not(.is-active):hover {
-    color: var(--bf-appearance-token-color-success);
-    background: color-mix(in srgb, var(--bf-appearance-token-color-success) 10%, transparent);
-
-    > svg {
-      color: inherit;
-      stroke: currentColor;
-    }
-  }
-
-  &.is-active {
-    color: var(--bf-appearance-token-color-success);
-    background: color-mix(in srgb, var(--bf-appearance-token-color-success) 12%, transparent);
-
-    &:hover > svg {
-      color: inherit;
-      stroke: currentColor;
-    }
-  }
-}
-
-.bitfun-nav-panel__voice-call-dot {
-  position: absolute;
-  right: 3px;
-  bottom: 3px;
-  width: 5px;
-  height: 5px;
-  border: 1px solid var(--bf-appearance-token-color-bg-primary);
-  border-radius: 50%;
-  background: var(--bf-appearance-token-color-success);
-}
-
 .bitfun-realtime-call {
   position: fixed;
   right: 24px;
diff --git a/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallButton.scss b/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallButton.scss
index 67d8a31cd5..88e8cb6862 100644
--- a/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallButton.scss
+++ b/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallButton.scss
@@ -1,6 +1,72 @@
 @use '../../../component-library/styles/overlay-surfaces' as surfaces;
+@use '../../../component-library/styles/tokens' as *;
 @use './RealtimeVoiceCall';
 
+.bitfun-realtime-call__launcher {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: $z-floating;
+  display: inline-flex;
+  width: 84px;
+  height: 40px;
+  align-items: center;
+  justify-content: flex-start;
+  gap: $size-gap-1;
+  padding: 0 11px;
+  border: 0;
+  border-radius: $size-radius-lg 0 0 0;
+  background: color-mix(
+    in srgb,
+    var(--bf-appearance-token-color-static-black) 79%,
+    var(--bf-appearance-token-color-static-white)
+  );
+  color: var(--bf-appearance-token-color-static-white);
+  font-family: $font-family-mono;
+  font-size: var(--bf-appearance-token-font-size-base);
+  font-weight: 300;
+  font-synthesis: none;
+  line-height: $line-height-tight;
+  opacity: 0.22;
+  cursor: pointer;
+  transition:
+    opacity $motion-fast $easing-standard,
+    background $motion-fast $easing-standard;
+
+  &:hover,
+  &:focus-visible,
+  &.is-active {
+    opacity: 1;
+  }
+
+  &:hover,
+  &:focus-visible {
+    background: color-mix(
+      in srgb,
+      var(--bf-appearance-token-color-static-black) 72%,
+      var(--bf-appearance-token-color-static-white)
+    );
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--bf-appearance-token-color-accent-500);
+    outline-offset: -3px;
+  }
+
+  &.is-active {
+    cursor: default;
+  }
+
+  &.is-active .bitfun-realtime-call__launcher-icon {
+    color: var(--bf-appearance-token-color-success);
+  }
+}
+
+.bitfun-realtime-call__launcher-icon {
+  flex: 0 0 auto;
+  color: var(--bf-appearance-token-color-overlay-white-70);
+}
+
 .bitfun-realtime-call {
   @include surfaces.floating-surface;
 
diff --git a/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallButton.tsx b/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallButton.tsx
index 3479761fb3..2e14cbef23 100644
--- a/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallButton.tsx
+++ b/src/web-ui/src/flow_chat/components/voice/RealtimeVoiceCallButton.tsx
@@ -1,6 +1,6 @@
 import { IconButton } from '@bitfun/ui';
 import { createPortal } from 'react-dom';
-import { Bot, Loader2, Mic, MicOff, PhoneCall, PhoneOff, Settings2, User } from 'lucide-react';
+import { Bot, Loader2, Mic, MicOff, PhoneOff, Settings2, User } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Tooltip } from '@/component-library';
 import { getAppearanceOverlayHost } from '@/infrastructure/appearance/runtime/AppearanceOverlayHost';
@@ -18,23 +18,36 @@ export function RealtimeVoiceCallButton() {
     <>
       <Tooltip
         content={active ? t('voiceCall.call.title') : t('voiceCall.call.button')}
-        placement="right"
+        placement="top"
       >
         <button
           type="button"
-          className={`bitfun-nav-panel__utility-action bitfun-nav-panel__voice-call${active ? ' is-active' : ''}`}
+          className={`bitfun-realtime-call__launcher${active ? ' is-active' : ''}`}
           aria-label={t('voiceCall.call.button')}
           aria-pressed={active}
           onClick={active ? undefined : controller.start}
-          data-testid="nav-realtime-voice"
+          data-testid="realtime-voice-launcher"
           data-bf-component="realtime-voice-call"
           data-bf-part="trigger"
           data-bf-state={controller.phase}
         >
-          {controller.phase === 'connecting' || controller.phase === 'ending'
-            ? <Loader2 size={15} className="bitfun-realtime-call__spinner" aria-hidden="true" />
-            : <PhoneCall size={15} aria-hidden="true" />}
-          {active ? <span className="bitfun-nav-panel__voice-call-dot" aria-hidden="true" /> : null}
+          {connecting
+            ? (
+              <Loader2
+                size={13}
+                className="bitfun-realtime-call__launcher-icon bitfun-realtime-call__spinner"
+                aria-hidden="true"
+              />
+            )
+            : (
+              <Mic
+                size={13}
+                strokeWidth={1.6}
+                className="bitfun-realtime-call__launcher-icon"
+                aria-hidden="true"
+              />
+            )}
+          <span>{t('voiceCall.call.launcherLabel')}</span>
         </button>
       </Tooltip>
 
diff --git a/src/web-ui/src/flow_chat/utils/additionalModePromptReference.test.ts b/src/web-ui/src/flow_chat/utils/additionalModePromptReference.test.ts
new file mode 100644
index 0000000000..2ed8ba4206
--- /dev/null
+++ b/src/web-ui/src/flow_chat/utils/additionalModePromptReference.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  appendAdditionalModePromptReferenceToken,
+  createAdditionalModePromptReferenceToken,
+  expandAdditionalModePromptReferenceTokens,
+  getAdditionalModePromptReferenceMatches,
+  parseAdditionalModePromptReferenceToken,
+} from './additionalModePromptReference';
+
+describe('additionalModePromptReference', () => {
+  it('creates and parses the Review capsule token', () => {
+    const token = createAdditionalModePromptReferenceToken('review');
+    expect(token).toBe('[[bitfun-additional-mode:review]]');
+    expect(parseAdditionalModePromptReferenceToken(token)).toEqual({
+      id: 'review',
+      displayText: 'Review',
+      promptCommand: '/review',
+    });
+    expect(parseAdditionalModePromptReferenceToken('[[bitfun-additional-mode:unknown]]')).toBeNull();
+  });
+
+  it('finds and appends mode capsules without exposing command text', () => {
+    const token = createAdditionalModePromptReferenceToken('review');
+    expect(appendAdditionalModePromptReferenceToken('', 'review')).toBe(token);
+    expect(appendAdditionalModePromptReferenceToken('Inspect this', 'review')).toBe(
+      `Inspect this ${token}`,
+    );
+    expect(getAdditionalModePromptReferenceMatches(`Inspect ${token}`)).toEqual([
+      {
+        token,
+        start: 8,
+        end: 8 + token.length,
+        payload: {
+          id: 'review',
+          displayText: 'Review',
+          promptCommand: '/review',
+        },
+      },
+    ]);
+  });
+
+  it('moves Review to the native command boundary only when submitting', () => {
+    const token = createAdditionalModePromptReferenceToken('review');
+    expect(expandAdditionalModePromptReferenceTokens(token)).toBe('/review');
+    expect(expandAdditionalModePromptReferenceTokens(`Inspect this ${token}`)).toBe(
+      '/review Inspect this',
+    );
+    expect(expandAdditionalModePromptReferenceTokens('Inspect this')).toBe('Inspect this');
+  });
+});
diff --git a/src/web-ui/src/flow_chat/utils/additionalModePromptReference.ts b/src/web-ui/src/flow_chat/utils/additionalModePromptReference.ts
new file mode 100644
index 0000000000..f3279d8268
--- /dev/null
+++ b/src/web-ui/src/flow_chat/utils/additionalModePromptReference.ts
@@ -0,0 +1,102 @@
+const TOKEN_PATTERN = /\[\[bitfun-additional-mode:([a-z][a-z0-9-]*)\]\]/g;
+
+const ADDITIONAL_MODE_DEFINITIONS = {
+  review: {
+    displayText: 'Review',
+    promptCommand: '/review',
+  },
+} as const;
+
+export type AdditionalModePromptReferenceId = keyof typeof ADDITIONAL_MODE_DEFINITIONS;
+
+export interface AdditionalModePromptReferencePayload {
+  id: AdditionalModePromptReferenceId;
+  displayText: string;
+  promptCommand: string;
+}
+
+function isAdditionalModeId(value: string): value is AdditionalModePromptReferenceId {
+  return Object.prototype.hasOwnProperty.call(ADDITIONAL_MODE_DEFINITIONS, value);
+}
+
+export function createAdditionalModePromptReferenceToken(
+  id: AdditionalModePromptReferenceId,
+): string {
+  return `[[bitfun-additional-mode:${id}]]`;
+}
+
+export function parseAdditionalModePromptReferenceToken(
+  token: string,
+): AdditionalModePromptReferencePayload | null {
+  const match = token.match(/^\[\[bitfun-additional-mode:([a-z][a-z0-9-]*)\]\]$/);
+  const id = match?.[1];
+  if (!id || !isAdditionalModeId(id)) {
+    return null;
+  }
+
+  return {
+    id,
+    ...ADDITIONAL_MODE_DEFINITIONS[id],
+  };
+}
+
+export function getAdditionalModePromptReferenceMatches(text: string): Array<{
+  token: string;
+  start: number;
+  end: number;
+  payload: AdditionalModePromptReferencePayload;
+}> {
+  const matches: Array<{
+    token: string;
+    start: number;
+    end: number;
+    payload: AdditionalModePromptReferencePayload;
+  }> = [];
+
+  TOKEN_PATTERN.lastIndex = 0;
+  let match: RegExpExecArray | null;
+  while ((match = TOKEN_PATTERN.exec(text)) !== null) {
+    const payload = parseAdditionalModePromptReferenceToken(match[0]);
+    if (!payload) continue;
+    matches.push({
+      token: match[0],
+      start: match.index,
+      end: match.index + match[0].length,
+      payload,
+    });
+  }
+
+  return matches;
+}
+
+export function appendAdditionalModePromptReferenceToken(
+  text: string,
+  id: AdditionalModePromptReferenceId,
+): string {
+  const token = createAdditionalModePromptReferenceToken(id);
+  const trimmed = text.trimEnd();
+  return trimmed ? `${trimmed} ${token}` : token;
+}
+
+/**
+ * Adapts a product-level mode capsule to the native command boundary.
+ * The capsule may sit anywhere in the editor; the command must lead the
+ * submitted text so the existing Review parser remains the runtime owner.
+ */
+export function expandAdditionalModePromptReferenceTokens(text: string): string {
+  const selectedMode = getAdditionalModePromptReferenceMatches(text)[0]?.payload;
+  if (!selectedMode) {
+    return text;
+  }
+
+  TOKEN_PATTERN.lastIndex = 0;
+  const remainingText = text.replace(TOKEN_PATTERN, (token) => {
+    const payload = parseAdditionalModePromptReferenceToken(token);
+    if (!payload) return token;
+    return ' ';
+  }).trim();
+
+  return remainingText
+    ? `${selectedMode.promptCommand} ${remainingText}`
+    : selectedMode.promptCommand;
+}
diff --git a/src/web-ui/src/locales/en-US/common.json b/src/web-ui/src/locales/en-US/common.json
index 5d29704395..54ac393de4 100644
--- a/src/web-ui/src/locales/en-US/common.json
+++ b/src/web-ui/src/locales/en-US/common.json
@@ -242,6 +242,7 @@
     },
     "sessions": {
       "newSession": "New session",
+      "acpSessions": "ACP sessions",
       "dispatchRunningOn": "Runs on {{target}} ({{state}})",
       "dispatchUnreachable": "Connection lost",
       "dispatchUnreachableDetails": "BitFun cannot reach {{target}} right now. The task may still be running there.",
@@ -640,7 +641,9 @@
     "notifications": "Notifications",
     "settingsMenu": {
       "floatingWindow": "Floating window",
+      "theme": "Theme",
       "themeConfiguration": "Theme configuration",
+      "appearanceSwitchFailed": "Could not switch the theme. Try again.",
       "openSettings": "Open settings",
       "about": "About"
     }
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 c32125f37b..ce58af37fc 100644
--- a/src/web-ui/src/locales/en-US/flow-chat.json
+++ b/src/web-ui/src/locales/en-US/flow-chat.json
@@ -696,6 +696,7 @@
       }
     },
     "harness": {
+      "menuLabel": "Agent Harness",
       "selectorTooltip": "Current execution: {{name}}",
       "fixedTooltip": "This session uses {{name}} and is now fixed.",
       "activateBalanced": "Switch to Standard Harness",
@@ -799,6 +800,7 @@
     "boostNewSession": "New session",
     "boostAddContext": "Reference file or folder",
     "boostSkills": "Skills",
+    "boostAdditionalModes": "Additional modes",
     "boostSkillsLoading": "Loading skills…",
     "boostSkillsLoadFailed": "Skills failed to load. Retry",
     "boostSkillsEmpty": "No enabled skills",
@@ -2489,28 +2491,6 @@
       "high": "High",
       "xhigh": "Extra high",
       "max": "Maximum"
-    },
-    "modes": {
-      "off": "Thinking off",
-      "on": "Thinking on",
-      "none": "Thinking off",
-      "minimal": "Fastest mode",
-      "low": "Fast mode",
-      "medium": "Balanced mode",
-      "high": "Deep mode",
-      "xhigh": "Intensive mode",
-      "max": "Maximum mode",
-      "custom": "Model preset"
-    },
-    "source": {
-      "models_dev": "models.dev",
-      "adapter_fallback": "Built in",
-      "model_config": "Custom"
-    },
-    "sourceTooltip": {
-      "models_dev": "Generated automatically from models.dev model metadata",
-      "adapter_fallback": "Built into BitFun for this model adapter",
-      "model_config": "Defined in this model's custom configuration"
     }
   },
   "coworkScope": {
diff --git a/src/web-ui/src/locales/en-US/settings/voice-input.json b/src/web-ui/src/locales/en-US/settings/voice-input.json
index ce9b10ef68..5af4962158 100644
--- a/src/web-ui/src/locales/en-US/settings/voice-input.json
+++ b/src/web-ui/src/locales/en-US/settings/voice-input.json
@@ -52,7 +52,7 @@
     "title": "Realtime voice call",
     "enabled": {
       "label": "Enable the client voice assistant",
-      "description": "Talk to Volcengine's end-to-end realtime voice model from the bottom-left client control, let it understand workspace state, and start BitFun tasks."
+      "description": "Talk to Volcengine's end-to-end realtime voice model from the bottom-right client launcher, let it understand workspace state, and start BitFun tasks."
     },
     "apiKey": {
       "label": "Volcengine API key",
@@ -65,7 +65,7 @@
     },
     "status": {
       "label": "Connection setup",
-      "description": "After saving, the call button at the bottom-left of the client can start a full-duplex voice conversation."
+      "description": "After saving, the Hello launcher at the bottom-right of the client can start a full-duplex voice conversation."
     },
     "save": "Save realtime voice",
     "messages": {
@@ -76,6 +76,7 @@
     "call": {
       "title": "BitFun realtime call",
       "button": "Start a realtime voice call",
+      "launcherLabel": "Hello",
       "empty": "Just start talking. When you ask for work, I will start a new BitFun session.",
       "mute": "Mute microphone",
       "unmute": "Unmute microphone",
diff --git a/src/web-ui/src/locales/zh-CN/common.json b/src/web-ui/src/locales/zh-CN/common.json
index 3691a453fa..dbcd5e2611 100644
--- a/src/web-ui/src/locales/zh-CN/common.json
+++ b/src/web-ui/src/locales/zh-CN/common.json
@@ -242,6 +242,7 @@
     },
     "sessions": {
       "newSession": "新建会话",
+      "acpSessions": "ACP 会话",
       "dispatchRunningOn": "在 {{target}} 上运行（{{state}}）",
       "dispatchUnreachable": "连接中断",
       "dispatchUnreachableDetails": "暂时无法连接 {{target}}。任务可能仍在该设备上运行。",
@@ -640,7 +641,9 @@
     "notifications": "通知",
     "settingsMenu": {
       "floatingWindow": "悬浮窗",
+      "theme": "主题",
       "themeConfiguration": "主题配置",
+      "appearanceSwitchFailed": "主题切换失败，请重试。",
       "openSettings": "打开设置",
       "about": "关于"
     }
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 4c504ae8ee..ec6ea83add 100644
--- a/src/web-ui/src/locales/zh-CN/flow-chat.json
+++ b/src/web-ui/src/locales/zh-CN/flow-chat.json
@@ -696,6 +696,7 @@
       }
     },
     "harness": {
+      "menuLabel": "Agent Harness",
       "selectorTooltip": "当前执行：{{name}}",
       "fixedTooltip": "本会话使用 {{name}}，开始后已固定。",
       "activateBalanced": "切换到标准 Harness",
@@ -799,6 +800,7 @@
     "boostNewSession": "新建会话",
     "boostAddContext": "引用文件或文件夹",
     "boostSkills": "Skills",
+    "boostAdditionalModes": "附加模式",
     "boostSkillsLoading": "正在加载 Skills…",
     "boostSkillsLoadFailed": "Skills 加载失败，点击重试",
     "boostSkillsEmpty": "暂无已启用的 Skill",
@@ -2489,28 +2491,6 @@
       "high": "高",
       "xhigh": "极高",
       "max": "最高"
-    },
-    "modes": {
-      "off": "关闭思考",
-      "on": "开启思考",
-      "none": "关闭思考",
-      "minimal": "极速模式",
-      "low": "快速模式",
-      "medium": "常规模式",
-      "high": "深度模式",
-      "xhigh": "极致模式",
-      "max": "最高强度",
-      "custom": "模型预设"
-    },
-    "source": {
-      "models_dev": "models.dev",
-      "adapter_fallback": "内置",
-      "model_config": "自定义"
-    },
-    "sourceTooltip": {
-      "models_dev": "根据 models.dev 的模型元数据自动生成",
-      "adapter_fallback": "BitFun 为此模型适配器内置的预设",
-      "model_config": "在此模型的自定义配置中定义"
     }
   },
   "coworkScope": {
diff --git a/src/web-ui/src/locales/zh-CN/settings/voice-input.json b/src/web-ui/src/locales/zh-CN/settings/voice-input.json
index 3582509246..21a45e3841 100644
--- a/src/web-ui/src/locales/zh-CN/settings/voice-input.json
+++ b/src/web-ui/src/locales/zh-CN/settings/voice-input.json
@@ -52,7 +52,7 @@
     "title": "实时语音通话",
     "enabled": {
       "label": "启用客户端语音助手",
-      "description": "从客户端左下角与火山引擎端到端实时语音模型通话，并允许它理解工作区状态和启动 BitFun 任务。"
+      "description": "从客户端右下角与火山引擎端到端实时语音模型通话，并允许它理解工作区状态和启动 BitFun 任务。"
     },
     "apiKey": {
       "label": "火山引擎 API Key",
@@ -65,7 +65,7 @@
     },
     "status": {
       "label": "连接配置",
-      "description": "保存后，客户端左下角的电话按钮即可建立全双工语音通话。"
+      "description": "保存后，客户端右下角的 Hello 入口即可建立全双工语音通话。"
     },
     "save": "保存实时语音",
     "messages": {
@@ -76,6 +76,7 @@
     "call": {
       "title": "BitFun 实时通话",
       "button": "开始实时语音通话",
+      "launcherLabel": "Hello",
       "empty": "直接说话即可。需要做事时，我会启动一个新的 BitFun 会话。",
       "mute": "静音麦克风",
       "unmute": "取消静音",
diff --git a/src/web-ui/src/locales/zh-TW/common.json b/src/web-ui/src/locales/zh-TW/common.json
index 5909c32e4b..aa0a5fa5e6 100644
--- a/src/web-ui/src/locales/zh-TW/common.json
+++ b/src/web-ui/src/locales/zh-TW/common.json
@@ -242,6 +242,7 @@
     },
     "sessions": {
       "newSession": "新增會話",
+      "acpSessions": "ACP 會話",
       "dispatchRunningOn": "在 {{target}} 上執行（{{state}}）",
       "dispatchUnreachable": "連線中斷",
       "dispatchUnreachableDetails": "暫時無法連線 {{target}}。任務可能仍在該裝置上執行。",
@@ -640,7 +641,9 @@
     "notifications": "通知",
     "settingsMenu": {
       "floatingWindow": "懸浮窗",
+      "theme": "主題",
       "themeConfiguration": "主題配置",
+      "appearanceSwitchFailed": "主題切換失敗，請重試。",
       "openSettings": "開啟設定",
       "about": "關於"
     }
diff --git a/src/web-ui/src/locales/zh-TW/flow-chat.json b/src/web-ui/src/locales/zh-TW/flow-chat.json
index aa72f98326..e5938723eb 100644
--- a/src/web-ui/src/locales/zh-TW/flow-chat.json
+++ b/src/web-ui/src/locales/zh-TW/flow-chat.json
@@ -696,6 +696,7 @@
       }
     },
     "harness": {
+      "menuLabel": "Agent Harness",
       "selectorTooltip": "目前執行：{{name}}",
       "fixedTooltip": "本工作階段使用 {{name}}，開始後已固定。",
       "activateBalanced": "切換到標準 Harness",
@@ -799,6 +800,7 @@
     "boostNewSession": "新建會話",
     "boostAddContext": "引用檔案或資料夾",
     "boostSkills": "Skills",
+    "boostAdditionalModes": "附加模式",
     "boostSkillsLoading": "正在載入 Skills…",
     "boostSkillsLoadFailed": "Skills 載入失敗，點擊重試",
     "boostSkillsEmpty": "暫無已啟用的 Skill",
@@ -2489,28 +2491,6 @@
       "high": "高",
       "xhigh": "極高",
       "max": "最高"
-    },
-    "modes": {
-      "off": "關閉思考",
-      "on": "開啟思考",
-      "none": "關閉思考",
-      "minimal": "極速模式",
-      "low": "快速模式",
-      "medium": "常規模式",
-      "high": "深度模式",
-      "xhigh": "極致模式",
-      "max": "最高強度",
-      "custom": "模型預設"
-    },
-    "source": {
-      "models_dev": "models.dev",
-      "adapter_fallback": "內置",
-      "model_config": "自定義"
-    },
-    "sourceTooltip": {
-      "models_dev": "根據 models.dev 的模型中繼資料自動產生",
-      "adapter_fallback": "BitFun 為此模型適配器內置的預設",
-      "model_config": "在此模型的自定義設定中定義"
     }
   },
   "coworkScope": {
diff --git a/src/web-ui/src/locales/zh-TW/settings/voice-input.json b/src/web-ui/src/locales/zh-TW/settings/voice-input.json
index 646691235b..501ce1c35b 100644
--- a/src/web-ui/src/locales/zh-TW/settings/voice-input.json
+++ b/src/web-ui/src/locales/zh-TW/settings/voice-input.json
@@ -52,7 +52,7 @@
     "title": "即時語音通話",
     "enabled": {
       "label": "啟用客戶端語音助理",
-      "description": "從客戶端左下角與火山引擎端到端即時語音模型通話，並允許它理解工作區狀態和啟動 BitFun 任務。"
+      "description": "從客戶端右下角與火山引擎端到端即時語音模型通話，並允許它理解工作區狀態和啟動 BitFun 任務。"
     },
     "apiKey": {
       "label": "火山引擎 API Key",
@@ -65,7 +65,7 @@
     },
     "status": {
       "label": "連線設定",
-      "description": "儲存後，客戶端左下角的電話按鈕即可建立全雙工語音通話。"
+      "description": "儲存後，客戶端右下角的 Hello 入口即可建立全雙工語音通話。"
     },
     "save": "儲存即時語音",
     "messages": {
@@ -76,6 +76,7 @@
     "call": {
       "title": "BitFun 即時通話",
       "button": "開始即時語音通話",
+      "launcherLabel": "Hello",
       "empty": "直接說話即可。需要做事時，我會啟動一個新的 BitFun 會話。",
       "mute": "將麥克風靜音",
       "unmute": "取消靜音",