fix: polish workspace layout, settings exit, and selection toolbar chrome.

Auto-collapse the right panel when the window narrows, unify settings back navigation with drawer-style menus, and tighten toolbar button active states and compact padding.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: Travisun

client-ui/src/chat/ChatApp.tsx

@@ -128,10 +128,38 @@ export default function ChatApp() {
     return window.innerWidth >= DESKTOP_SIDEBAR_EXPAND_THRESHOLD
   })
 
+  const {
+    current: view,
+    canGoBack,
+    canGoForward,
+    navigate,
+    goBack,
+    goForward,
+  } = useAppNavigation('chat')
+
+  const electronChrome = isElectron() && !isMobile
+  const splitEnabled = !isMobile && view === 'chat'
+
+  const {
+    workspaceRef,
+    rightPanelOpen: rightPanelVisible,
+    chatVisible,
+    rightPanelWidth,
+    showSplitter,
+    chatWidth,
+    isDragging,
+    canToggleChatColumn,
+    beginDrag,
+    collapseRightPanel,
+    toggleRightPanel: handleToggleRightPanel,
+    toggleChatColumn: handleToggleChatColumn,
+  } = useWorkspaceSplit({ enabled: splitEnabled })
+
   const collapseSidebars = useCallback(() => {
     setSidebarVisible(false)
     setSettingsSidebarVisible(false)
-  }, [setSidebarVisible])
+    collapseRightPanel(true)
+  }, [collapseRightPanel, setSidebarVisible])
 
   const expandSidebars = useCallback(() => {
     setSidebarVisible(true)
@@ -140,15 +168,6 @@ export default function ChatApp() {
 
   useSidebarResizeSync(!isMobile, collapseSidebars, expandSidebars)
 
-  const {
-    current: view,
-    canGoBack,
-    canGoForward,
-    navigate,
-    goBack,
-    goForward,
-  } = useAppNavigation('chat')
-
   const handleToggleSidebar = useCallback(() => {
     if (view === 'settings') {
       setSettingsSidebarVisible(prev => !prev)
@@ -170,23 +189,6 @@ export default function ChatApp() {
   const [llmLabel, setLlmLabel] = useState('连接中…')
   const [backendOk, setBackendOk] = useState(false)
 
-  const electronChrome = isElectron() && !isMobile
-  const splitEnabled = !isMobile && view === 'chat'
-
-  const {
-    workspaceRef,
-    rightPanelOpen: rightPanelVisible,
-    chatVisible,
-    rightPanelWidth,
-    showSplitter,
-    chatWidth,
-    isDragging,
-    canToggleChatColumn,
-    beginDrag,
-    toggleRightPanel: handleToggleRightPanel,
-    toggleChatColumn: handleToggleChatColumn,
-  } = useWorkspaceSplit({ enabled: splitEnabled })
-
   const refreshModels = useCallback(async () => {
     try {
       const { models } = await listAvailableModels()
@@ -258,6 +260,10 @@ export default function ChatApp() {
     navigate('settings')
   }
 
+  const handleExitSettings = useCallback(() => {
+    navigate('chat')
+  }, [navigate])
+
   const handleNew = async () => {
     try {
       const { session } = await createSession()
@@ -484,12 +490,12 @@ export default function ChatApp() {
           showSidebarToggle={!isSettings || sidebarOverlayMode}
           sidebarHoverReveal={sidebarOverlayMode}
           onRevealSidebar={handleEdgeRevealSidebar}
-          canGoBack={canGoBack}
-          canGoForward={canGoForward}
+          canGoBack={!isSettings && canGoBack}
+          canGoForward={!isSettings && canGoForward}
           onToggleSidebar={handleToggleSidebar}
           onNewChat={handleNew}
-          onGoBack={goBack}
-          onGoForward={goForward}
+          onGoBack={!isSettings ? goBack : undefined}
+          onGoForward={!isSettings ? goForward : undefined}
           rightPanelOpen={!isSettings ? rightPanelVisible : undefined}
           chatColumnVisible={!isSettings ? chatVisible : undefined}
           onToggleRightPanel={!isSettings && !isMobile ? handleToggleRightPanel : undefined}
@@ -513,7 +519,7 @@ export default function ChatApp() {
               isMobile={isMobile}
               sidebarVisible={settingsSidebarVisible}
               onSidebarClose={() => setSettingsSidebarVisible(false)}
-              onBack={goBack}
+              onBack={handleExitSettings}
               onSaved={async () => {
                 await refreshHealth()
               }}

client-ui/src/chat/ChatView.tsx

@@ -425,6 +425,7 @@ export default function ChatView({
                   <ChromeToolButton
                     label={rightPanelOpen ? '收起右侧面板' : '展开右侧面板'}
                     iconPadding={DESKTOP_SIDEBAR_TOOL_ICON_PADDING}
+                    active={rightPanelOpen}
                     onClick={onToggleRightPanel}
                   >
                     {rightPanelOpen

client-ui/src/chat/MessageSelectionToolbar.tsx

@@ -39,9 +39,8 @@ const useStyles = makeStyles({
     zIndex: 20,
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'stretch',
+    alignItems: 'flex-start',
     width: 'fit-content',
-    minWidth: '148px',
     maxWidth: 'min(400px, calc(100vw - 24px))',
     gap: '2px',
     padding: '2px',
@@ -57,6 +56,10 @@ const useStyles = makeStyles({
     transitionDuration: motion.normal,
     transitionTimingFunction: motion.easeOut,
   },
+  toolbarExpanded: {
+    alignItems: 'stretch',
+    minWidth: '240px',
+  },
   toolbarConversation: {
     minWidth: '280px',
     maxWidth: 'min(400px, calc(100vw - 24px))',
@@ -365,10 +368,16 @@ export default function MessageSelectionToolbar({
   }
 
   const inConversation = mode === 'conversation'
+  const isExpanded = mode !== 'compact'
 
   return (
     <div
-      className={mergeClasses(s.toolbar, inConversation && s.toolbarConversation, className)}
+      className={mergeClasses(
+        s.toolbar,
+        isExpanded && s.toolbarExpanded,
+        inConversation && s.toolbarConversation,
+        className,
+      )}
       style={style}
       role="toolbar"
       aria-label="选区工具"

client-ui/src/desktop/ChromeToolButton.tsx

@@ -31,28 +31,39 @@ const useStyles = makeStyles({
       },
     },
   },
+  btnActive: {
+    backgroundColor: innoTokens.accentSoft,
+    color: innoTokens.accent,
+    ':hover': {
+      backgroundColor: innoTokens.accentSoft,
+      color: innoTokens.accent,
+    },
+  },
 })
 
 interface ChromeToolButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode
   label: string
   /** Inner padding — smaller values leave room for a larger glyph in the same hit target */
   iconPadding?: number
+  active?: boolean
 }
 
 export default function ChromeToolButton({
   children,
   label,
   className,
   iconPadding = DESKTOP_TOOL_ICON_PADDING,
+  active = false,
   style,
   ...rest
 }: ChromeToolButtonProps) {
   const s = useStyles()
   return (
     <button
       type="button"
-      className={mergeClasses(s.btn, 'inno-focusable', className)}
+      className={mergeClasses(s.btn, active && s.btnActive, 'inno-focusable', className)}
+      aria-pressed={active || undefined}
       aria-label={label}
       title={label}
       style={{ padding: `${iconPadding}px`, ...style }}

client-ui/src/desktop/DesktopWindowChrome.tsx

@@ -183,17 +183,17 @@ export default function DesktopWindowChrome({
                 : <PanelLeftExpandRegular fontSize={DESKTOP_SIDEBAR_TOOL_ICON_SIZE} />}
             </ChromeToolButton>
           )}
-          {onGoBack && (
+          {!isSettings && onGoBack && (
             <ChromeToolButton label="后退" disabled={!canGoBack} onClick={onGoBack}>
               <ArrowLeftRegular fontSize={DESKTOP_TOOL_ICON_SIZE} />
             </ChromeToolButton>
           )}
-          {onGoForward && (
+          {!isSettings && onGoForward && (
             <ChromeToolButton label="前进" disabled={!canGoForward} onClick={onGoForward}>
               <ArrowRightRegular fontSize={DESKTOP_TOOL_ICON_SIZE} />
             </ChromeToolButton>
           )}
-          {!isSettings && onNewChat && (
+          {!isSettings && onNewChat && !sidebarOpen && (
             <ChromeToolButton label="新建对话" onClick={onNewChat}>
               <ChatAddRegular fontSize={DESKTOP_TOOL_ICON_SIZE} />
             </ChromeToolButton>
@@ -221,6 +221,7 @@ export default function DesktopWindowChrome({
             <ChromeToolButton
               label={rightPanelOpen ? '收起右侧面板' : '展开右侧面板'}
               iconPadding={DESKTOP_SIDEBAR_TOOL_ICON_PADDING}
+              active={rightPanelOpen}
               onClick={onToggleRightPanel}
             >
               {rightPanelOpen

client-ui/src/desktop/constants.ts

@@ -47,6 +47,30 @@ export const WORKSPACE_RIGHT_PANEL_DEFAULT_WIDTH = 456
 export const WORKSPACE_RIGHT_PANEL_MIN_WIDTH = 228
 export const WORKSPACE_SPLITTER_WIDTH = 5
 
+/** Inline left sidebar width — keep in sync with innoTokens.sidebarWidthPx */
+export const SIDEBAR_INLINE_WIDTH = 228
+
+/**
+ * Minimum workspace width (chat area) to keep chat + splitter + right panel open.
+ * Below this, the right panel auto-collapses so chat keeps a usable 350px column.
+ */
+export const WORKSPACE_CHAT_RIGHT_MIN_WIDTH =
+  WORKSPACE_CHAT_MIN_WIDTH + WORKSPACE_SPLITTER_WIDTH + WORKSPACE_RIGHT_PANEL_MIN_WIDTH
+
+/**
+ * Minimum window width for three inline columns (left sidebar + chat + right panel).
+ * Matches SIDEBAR_INLINE_WIDTH + WORKSPACE_CHAT_RIGHT_MIN_WIDTH.
+ */
+export const WORKSPACE_TRIPLE_COLUMN_MIN_WIDTH =
+  SIDEBAR_INLINE_WIDTH + WORKSPACE_CHAT_RIGHT_MIN_WIDTH
+
+/** Hysteresis buffer so right panel does not flicker at the collapse boundary. */
+export const WORKSPACE_PANEL_HYSTERESIS = 28
+
+/** Auto-restore right panel once workspace grows past collapse minimum + hysteresis. */
+export const WORKSPACE_RIGHT_PANEL_RESTORE_WIDTH =
+  WORKSPACE_CHAT_RIGHT_MIN_WIDTH + WORKSPACE_PANEL_HYSTERESIS
+
 /** Title bar stacking — overlay sidebar sits between title and toolbar */
 export const DESKTOP_Z_TITLE = 1100
 export const DESKTOP_Z_OVERLAY_SIDEBAR = 1150

client-ui/src/hooks/useWorkspaceSplit.ts

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import {
   WORKSPACE_CHAT_MIN_WIDTH,
+  WORKSPACE_CHAT_RIGHT_MIN_WIDTH,
   WORKSPACE_RIGHT_PANEL_DEFAULT_WIDTH,
   WORKSPACE_RIGHT_PANEL_MIN_WIDTH,
+  WORKSPACE_RIGHT_PANEL_RESTORE_WIDTH,
   WORKSPACE_SPLITTER_WIDTH,
 } from '../desktop/constants'
 
@@ -30,6 +32,7 @@ export function useWorkspaceSplit({
   const [isDragging, setIsDragging] = useState(false)
   const savedRightWidthRef = useRef(defaultRightWidth)
   const rightPanelWidthRef = useRef(defaultRightWidth)
+  const autoCollapsedByWidthRef = useRef(false)
   const dragRef = useRef<{ startX: number; startWidth: number } | null>(null)
 
   useEffect(() => {
@@ -56,12 +59,22 @@ export function useWorkspaceSplit({
       ? workspaceWidth
       : 0
 
+  const canFitRightPanel = workspaceWidth <= 0 || workspaceWidth >= WORKSPACE_CHAT_RIGHT_MIN_WIDTH
+
   const commitWidth = useCallback((nextWidth: number, wsWidth: number) => {
     const clamped = clampRightWidth(nextWidth, wsWidth)
     savedRightWidthRef.current = clamped
     setRightPanelWidth(clamped)
   }, [])
 
+  const collapseRightPanel = useCallback((markAuto = true) => {
+    if (!rightPanelOpen) return
+    savedRightWidthRef.current = rightPanelWidthRef.current
+    if (markAuto) autoCollapsedByWidthRef.current = true
+    setRightPanelOpen(false)
+    setChatVisible(true)
+  }, [rightPanelOpen])
+
   const beginDrag = useCallback((clientX: number) => {
     if (!enabled || !chatVisible || !rightPanelOpen) return
     dragRef.current = { startX: clientX, startWidth: rightPanelWidthRef.current }
@@ -110,24 +123,55 @@ export function useWorkspaceSplit({
 
   useEffect(() => {
     if (!enabled || isDragging || workspaceWidth <= 0) return
-    if (!chatVisible || !rightPanelOpen) return
+
+    if (rightPanelOpen && workspaceWidth < WORKSPACE_CHAT_RIGHT_MIN_WIDTH) {
+      collapseRightPanel(true)
+      return
+    }
+
+    if (
+      !rightPanelOpen
+      && autoCollapsedByWidthRef.current
+      && workspaceWidth >= WORKSPACE_RIGHT_PANEL_RESTORE_WIDTH
+    ) {
+      autoCollapsedByWidthRef.current = false
+      setRightPanelWidth(savedRightWidthRef.current || defaultRightWidth)
+      setRightPanelOpen(true)
+      setChatVisible(true)
+      return
+    }
+
+    if (!rightPanelOpen || !chatVisible) return
 
     const clamped = clampRightWidth(rightPanelWidth, workspaceWidth)
     if (clamped !== rightPanelWidth) {
       commitWidth(clamped, workspaceWidth)
     }
-  }, [chatVisible, commitWidth, enabled, isDragging, rightPanelOpen, rightPanelWidth, workspaceWidth])
+  }, [
+    chatVisible,
+    collapseRightPanel,
+    commitWidth,
+    defaultRightWidth,
+    enabled,
+    isDragging,
+    rightPanelOpen,
+    rightPanelWidth,
+    workspaceWidth,
+  ])
 
   const toggleRightPanel = useCallback(() => {
     if (rightPanelOpen) {
       savedRightWidthRef.current = rightPanelWidthRef.current
+      autoCollapsedByWidthRef.current = false
       setRightPanelOpen(false)
       setChatVisible(true)
       return
     }
+    if (enabled && workspaceWidth > 0 && workspaceWidth < WORKSPACE_CHAT_RIGHT_MIN_WIDTH) return
+    autoCollapsedByWidthRef.current = false
     setRightPanelWidth(savedRightWidthRef.current || defaultRightWidth)
     setRightPanelOpen(true)
-  }, [defaultRightWidth, rightPanelOpen])
+  }, [defaultRightWidth, enabled, rightPanelOpen, workspaceWidth])
 
   const toggleChatColumn = useCallback(() => {
     if (!rightPanelOpen) return
@@ -152,7 +196,9 @@ export function useWorkspaceSplit({
     chatWidth,
     isDragging,
     canToggleChatColumn,
+    canFitRightPanel,
     beginDrag,
+    collapseRightPanel,
     toggleRightPanel,
     toggleChatColumn,
   }