From 022319e23289398e404cecd9a5aef1e3401e966c Mon Sep 17 00:00:00 2001
From: Trae User <trae@example.com>
Date: Tue, 22 Sep 2026 22:55:24 +0800
Subject: [PATCH 1/6] fix: refine sidebar alignment and vertical rhythm

- Center nav, workspace and session leading icons instead of left-aligning
  them so the 24px slots share one optical baseline.
- Replace the fixed 76px trailing column with `auto` and drop the fixed
  width on count/time slots, so rows no longer reserve dead space.
- Move the section disclosure arrow next to the section title and keep it
  always visible; the header becomes a single full-width button with
  pt-3/pb-1 padding instead of the previous group-hover reveal.
- Rebuild the collapsed arrow rotation from -90deg to 0deg.
- Tighten row padding, list gaps and the brand row spacing; update
  sidebarAlignmentArchitecture.test.js to assert the new contract.
---
 web/src/components/Sidebar.jsx                | 80 +++++++++----------
 web/src/components/SidebarQuickMenu.jsx       |  2 +-
 .../lib/sidebarAlignmentArchitecture.test.js  | 50 +++++++-----
 3 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/web/src/components/Sidebar.jsx b/web/src/components/Sidebar.jsx
index 1e0aa9c7b..305bf3490 100644
--- a/web/src/components/Sidebar.jsx
+++ b/web/src/components/Sidebar.jsx
@@ -495,7 +495,7 @@ function SidebarDisclosure({ expanded, className = '' }) {
       name={icon.name}
       size={icon.size}
       className={clsx('block shrink-0 transition-transform', className)}
-      style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
+      style={{ transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
     />
   );
 }
@@ -512,9 +512,9 @@ function SidebarNavItem({ item, onClick }) {
       data-tour-target={item.id === 'new-task' ? 'sidebar-new-task' : undefined}
       onPointerDown={item.id === 'new-task' ? preserveHomeComposerFocus : undefined}
       onClick={onClick}
-      className="ace-sidebar-primary-text w-full flex items-center gap-[7px] pl-[19px] pr-3 h-8 rounded-md text-[14px] text-fg hover:bg-surface-hi transition text-left"
+      className="ace-sidebar-primary-text w-full flex items-center gap-[7px] pl-[19px] pr-[13px] py-[3px] rounded-md text-[14px] text-fg hover:bg-surface-hi transition text-left"
     >
-      <span className="w-6 h-6 flex items-center justify-start shrink-0">
+      <span className="w-6 h-6 flex items-center justify-center shrink-0">
         <VsIcon name={item.icon} size={18} />
       </span>
       <span className="flex-1 min-w-0 truncate">{item.label}</span>
@@ -541,14 +541,14 @@ function CustomSidebarItem({ item, count, onClick }) {
       type="button"
       onClick={onClick}
       data-sidebar-custom-item={item.id}
-      className="ace-sidebar-primary-text w-full flex items-center gap-[7px] pl-[19px] pr-3 h-8 text-[14px] text-fg hover:bg-surface-hi transition text-left"
+      className="ace-sidebar-primary-text w-full flex items-center gap-[7px] pl-[19px] pr-[13px] py-[3px] text-[14px] text-fg hover:bg-surface-hi transition text-left"
     >
-      <span className="w-6 h-6 flex items-center justify-start shrink-0">
+      <span className="w-6 h-6 flex items-center justify-center shrink-0">
         <CustomSidebarIcon icon={item.icon} />
       </span>
       <span className="flex-1 min-w-0 truncate">{item.label}</span>
       {Number.isFinite(count) && (
-        <span className="ace-sidebar-meta-text w-[76px] text-right text-[13px] text-fg-mute shrink-0 tabular-nums">{count}</span>
+        <span className="ace-sidebar-meta-text text-right text-[13px] text-fg-mute shrink-0 tabular-nums">{count}</span>
       )}
     </button>
   );
@@ -597,23 +597,23 @@ function CustomSidebarSection({ workspaceHash = '', onOpenSettingsSection, onOpe
         type="button"
         onClick={() => setExpanded((value) => !value)}
         data-sidebar-custom-section="true"
-        className="ace-sidebar-extensions-trigger ace-sidebar-primary-text w-full flex items-center gap-[7px] pl-[19px] pr-3 h-8 rounded-md text-[14px] text-fg hover:bg-surface-hi transition"
+        className="ace-sidebar-extensions-trigger ace-sidebar-primary-text w-full flex items-center gap-[7px] pl-[19px] pr-[13px] py-[3px] rounded-md text-[14px] text-fg hover:bg-surface-hi transition"
         aria-expanded={expanded}
         aria-controls={listId}
       >
-        <span className="w-6 h-6 flex items-center justify-start shrink-0">
+        <span className="w-6 h-6 flex items-center justify-center shrink-0">
           <span className="ace-sidebar-extensions-icon flex"><VsIcon name="extension" size={18} /></span>
         </span>
         <span className="flex-1 min-w-0 text-left truncate">扩展</span>
         <span className="relative w-6 h-6 flex items-center justify-end shrink-0">
           {totalCount != null && (
-            <span className="ace-sidebar-extensions-count ace-sidebar-meta-text w-[76px] text-right text-[13px] text-fg-mute tabular-nums">{totalCount}</span>
+            <span className="ace-sidebar-extensions-count ace-sidebar-meta-text text-right text-[13px] text-fg-mute tabular-nums">{totalCount}</span>
           )}
           <span className="ace-sidebar-extensions-arrow absolute inset-0 flex items-center justify-end"><SidebarDisclosure expanded={expanded} /></span>
         </span>
       </button>
       {expanded && (
-        <div id={listId} className="ace-sidebar-custom-list flex flex-col gap-0.5">
+        <div id={listId} className="ace-sidebar-custom-list">
           {SIDEBAR_CUSTOM_ITEMS.map((item) => (
             <CustomSidebarItem
               key={item.id}
@@ -636,24 +636,24 @@ function SidebarSectionHeader({ sectionId, count, expanded, onToggle, actions =
   return (
     <div
       data-sidebar-section={sectionId}
-      className="ace-sidebar-section-header ace-sidebar-section-text group flex h-6 items-center gap-0.5 pl-[19px] pr-3 mt-2 mb-0 text-[13px] font-medium text-fg-mute"
+      className="ace-sidebar-section-header ace-sidebar-section-text flex items-center px-0 pt-3 pb-1 text-[13px] font-medium text-fg-mute"
     >
       <button
         type="button"
         onClick={onToggle}
-        className="group/section-header flex min-w-0 flex-1 items-center gap-[7px] cursor-pointer text-left rounded-md text-[13px] font-medium text-fg-mute hover:text-fg focus:outline-none focus-visible:bg-button-ghost-hover focus-visible:text-primary transition"
+        className="flex w-full min-w-0 items-center pl-[23px] pr-3 rounded text-left hover:text-fg hover:bg-surface-hi transition"
+        title={expanded ? `折叠${title}` : `展开${title}`}
         aria-expanded={expanded}
       >
-        <span
-          data-sidebar-section-disclosure={sectionId}
-          className="inline-flex w-6 h-6 shrink-0 items-center justify-center opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible/section-header:opacity-100"
-          title={expanded ? `折叠${title}` : `展开${title}`}
-          aria-hidden="true"
-        >
-          <SidebarDisclosure expanded={expanded} />
-        </span>
-        <span className={clsx('min-w-0 truncate', (sectionId === SIDEBAR_SECTION_IDS.TASKS || sectionId === SIDEBAR_SECTION_IDS.WORKSPACES) && 'ace-sidebar-section-title text-[12px]')}>
-          {title}
+        <span className="inline-flex min-w-0 items-center gap-0.5">
+          <span className="min-w-0 truncate">{title}</span>
+          <span
+            data-sidebar-section-disclosure={sectionId}
+            className="inline-flex w-5 h-6 items-center justify-center shrink-0"
+            aria-hidden="true"
+          >
+            <SidebarDisclosure expanded={expanded} />
+          </span>
         </span>
       </button>
       {actions && (
@@ -1142,7 +1142,7 @@ function SessionRow({
       data-sidebar-workspace-session-workspace={workspaceReorderable ? workspaceHash || undefined : undefined}
       aria-describedby={hoverCardVisible ? hoverCardId : undefined}
       className={clsx(
-        'ace-sidebar-session-row ace-sidebar-tree-row-grid ace-sidebar-primary-text group grid h-8 grid-cols-[24px_minmax(0,1fr)_76px] items-center gap-x-[7px] mx-1.5 pl-[13px] pr-2 rounded-md text-[14px] transition',
+        'ace-sidebar-session-row ace-sidebar-tree-row-grid ace-sidebar-primary-text group grid grid-cols-[24px_minmax(0,1fr)_auto] items-center gap-x-[7px] ml-1.5 mr-0 my-px pl-[13px] pr-[1px] rounded-md text-[14px] transition',
         pinned && 'ace-sidebar-pinned-session-row',
         workspaceReorderable && 'ace-sidebar-workspace-session-row',
         dragging && 'is-dragging',
@@ -1221,7 +1221,7 @@ function SessionRow({
           onAnimationEnd={() => finishRemoteControlSurge(activeRemoteControlSurgeSequenceRef.current)}
         />
       )}
-      <span className="relative flex w-6 h-7 items-center justify-start shrink-0">
+      <span className="relative flex w-6 h-7 items-center justify-center shrink-0">
         <SessionAttentionIndicator attention={attention} meta={meta} />
       </span>
       {editing ? (
@@ -1265,7 +1265,7 @@ function SessionRow({
           <SidebarSessionTitle title={marqueeTitle} marqueeReady={marqueeReady} />
         </button>
       )}
-      <span className="flex w-full min-w-0 items-center justify-end gap-1">
+      <span className="flex w-full min-w-0 items-center justify-end gap-0">
         {!editing && pendingPermission ? (
           <span
             data-sidebar-permission-prompt="true"
@@ -1284,7 +1284,7 @@ function SessionRow({
           </span>
         ) : null}
         {showSessionTime && !editing && !pendingPermission && !pendingQuestion && (
-          <span className="ace-sidebar-row-idle-slot ace-sidebar-meta-text w-[76px] whitespace-nowrap text-right text-[13px] text-fg-mute shrink-0 tabular-nums">
+          <span className="ace-sidebar-row-idle-slot ace-sidebar-meta-text whitespace-nowrap text-right text-[13px] text-fg-mute shrink-0 tabular-nums">
             {relativeTime(s.updated_at || s.created_at)}
           </span>
         )}
@@ -1298,7 +1298,7 @@ function SessionRow({
               onTogglePin?.(s, !pinned);
             }}
             className={clsx(
-              'ace-session-pin-btn ace-sidebar-row-hover-action w-5 h-7 rounded items-center justify-center shrink-0 transition',
+              'ace-session-pin-btn ace-sidebar-row-hover-action w-[18px] h-7 rounded items-center justify-center shrink-0 transition',
               pinned
                 ? 'flex text-accent'
                 : 'hidden group-hover:flex group-focus-within:flex text-fg-mute hover:text-fg hover:bg-surface-hi',
@@ -1318,7 +1318,7 @@ function SessionRow({
             onArchive?.(s);
           }}
           className={clsx(
-            'ace-sidebar-row-hover-action w-5 h-7 rounded items-center justify-center shrink-0 text-fg-mute hover:text-fg hover:bg-surface-hi transition',
+            'ace-sidebar-row-hover-action w-[18px] h-7 rounded items-center justify-center shrink-0 text-fg-mute hover:text-fg hover:bg-surface-hi transition',
             sessionMarker
               ? 'flex'
               : 'hidden group-hover:flex group-focus-within:flex',
@@ -1669,7 +1669,7 @@ function WorkspaceGroup({
         data-desktop-workspace-opencode-import-count={opencodeImportCount > 0 ? String(opencodeImportCount) : undefined}
         data-folder-reorderable={folderReorderable && !editing ? 'true' : undefined}
         className={clsx(
-          'ace-sidebar-workspace-row ace-sidebar-tree-row-grid ace-sidebar-primary-text group grid h-8 grid-cols-[24px_minmax(0,1fr)_76px] items-center gap-x-[7px] mx-1.5 pl-[13px] pr-2 rounded-md text-[14px] cursor-pointer transition',
+          'ace-sidebar-workspace-row ace-sidebar-tree-row-grid ace-sidebar-primary-text group grid grid-cols-[24px_minmax(0,1fr)_auto] items-center gap-x-[7px] mx-1.5 pl-[13px] pr-[14px] py-[3px] rounded-md text-[14px] cursor-pointer transition',
           ws.active ? 'bg-accent-bg text-fg' : 'text-fg hover:bg-surface-hi',
         )}
         role="button"
@@ -1690,7 +1690,7 @@ function WorkspaceGroup({
           }
         }}
       >
-        <span className="w-6 h-6 flex items-center justify-start shrink-0">
+        <span className="w-6 h-6 flex items-center justify-center shrink-0">
           <VsIcon name={expanded ? 'folderOpen' : 'folder'} size={18} />
         </span>
         {editing ? (
@@ -1733,9 +1733,9 @@ function WorkspaceGroup({
         </span>
       </div>
       {expanded && (
-        <div className="mt-0.5 mb-2 flex flex-col gap-0.5">
+        <div className="mt-px mb-[10px]">
           {sessions.length === 0 ? (
-            <div className="ace-sidebar-tree-row-grid ace-sidebar-meta-text grid grid-cols-[24px_minmax(0,1fr)_76px] items-center gap-x-[7px] mx-1.5 pl-[13px] pr-2 py-[4px] text-[13px] text-fg-mute italic">
+            <div className="ace-sidebar-tree-row-grid ace-sidebar-meta-text grid grid-cols-[24px_minmax(0,1fr)_auto] items-center gap-x-[7px] mx-1.5 pl-[13px] pr-[14px] py-[4px] text-[13px] text-fg-mute italic">
               <span aria-hidden="true" />
               <span>{sessionsLoading ? '加载中...' : '暂无任务'}</span>
             </div>
@@ -1765,7 +1765,7 @@ function WorkspaceGroup({
                 );
               })}
               {projectedSessions.collapsible && (
-                <div className="ace-sidebar-tree-row-grid grid grid-cols-[24px_minmax(0,1fr)_76px] items-center gap-x-[7px] mx-1.5 pl-[13px] pr-2">
+                <div className="ace-sidebar-tree-row-grid grid grid-cols-[24px_minmax(0,1fr)_auto] items-center gap-x-[7px] mx-1.5 pl-[13px] pr-[14px]">
                   <span aria-hidden="true" />
                   <button
                     type="button"
@@ -1803,9 +1803,9 @@ function NoWorkspaceSessionGroup({
   const projectedSessions = sidebarSessionProjection(sessions, sessionListVisibleLimit);
 
   return (
-    <div className="mt-0.5 flex flex-col gap-0.5">
+    <div className="mt-px mb-[10px]">
       {sessions.length === 0 ? (
-        <div className="ace-sidebar-tree-row-grid ace-sidebar-meta-text grid grid-cols-[24px_minmax(0,1fr)_76px] items-center gap-x-[7px] mx-1.5 pl-[13px] pr-2 py-[4px] text-[13px] text-fg-mute italic">
+        <div className="ace-sidebar-tree-row-grid ace-sidebar-meta-text grid grid-cols-[24px_minmax(0,1fr)_auto] items-center gap-x-[7px] mx-1.5 pl-[13px] pr-[14px] py-[4px] text-[13px] text-fg-mute italic">
           <span aria-hidden="true" />
           <span>{sessionsLoading ? '加载中...' : '暂无任务'}</span>
         </div>
@@ -1827,7 +1827,7 @@ function NoWorkspaceSessionGroup({
             />
           ))}
           {projectedSessions.collapsible && (
-            <div className="ace-sidebar-tree-row-grid grid grid-cols-[24px_minmax(0,1fr)_76px] items-center gap-x-[7px] mx-1.5 pl-[13px] pr-2">
+            <div className="ace-sidebar-tree-row-grid grid grid-cols-[24px_minmax(0,1fr)_auto] items-center gap-x-[7px] mx-1.5 pl-[13px] pr-[14px]">
               <span aria-hidden="true" />
               <button
                 type="button"
@@ -3659,7 +3659,7 @@ export function Sidebar({
         style={collapsed ? undefined : { width, minWidth: width }}
       >
       <div className="ace-sidebar-content flex-1 flex flex-col min-h-0">
-        <div data-sidebar-brand="true" className="flex shrink-0 items-center gap-[11px] pl-[19px] pr-[18px] py-3 select-none">
+        <div data-sidebar-brand="true" className="flex shrink-0 items-center gap-[7px] pl-[23px] pr-[18px] py-3 select-none">
           <BrandLogo width="20" height="20" className="ace-brand-logo block shrink-0" />
           <span className="text-[15px] font-bold tracking-tight">ACECode</span>
           {appVersionLabel && (
@@ -3669,7 +3669,7 @@ export function Sidebar({
           )}
         </div>
         <div className="ace-sidebar-main flex-1 flex flex-col min-h-0">
-          <div className="ace-sidebar-fixed-nav shrink-0 flex flex-col gap-0.5 overflow-y-auto">
+          <div className="ace-sidebar-fixed-nav shrink-0 overflow-y-auto pb-2">
             {SIDEBAR_NAV_ITEMS.map((item) => (
               item.action === 'extensions' ? (
                 <CustomSidebarSection
@@ -3705,7 +3705,7 @@ export function Sidebar({
               onToggle={() => toggleSidebarSection(SIDEBAR_SECTION_IDS.PINNED)}
             />
             {sidebarSectionIsVisible(sectionCounts.pinned) && sectionExpansion.pinned && (
-              <div className="mt-0.5 flex flex-col gap-0.5">
+              <div className="my-1">
                 {pinnedSessions.map((s) => {
                   const pinScope = sessionPinScope(s);
                   const rowKey = sidebarSessionDragKey(pinScope, s.id);
@@ -3766,7 +3766,7 @@ export function Sidebar({
             />
             {sidebarSectionIsVisible(sectionCounts.workspaces) && sectionExpansion.workspaces && (
               <div
-                className="mt-0.5 flex flex-col gap-0.5"
+                className="my-1"
                 ref={folderReorder.listRef}
                 data-sidebar-workspace-folder-list
                 aria-busy={workspaceOrderSaving}
diff --git a/web/src/components/SidebarQuickMenu.jsx b/web/src/components/SidebarQuickMenu.jsx
index 23c93e009..757a76153 100644
--- a/web/src/components/SidebarQuickMenu.jsx
+++ b/web/src/components/SidebarQuickMenu.jsx
@@ -48,7 +48,7 @@ export function SidebarQuickMenu({
           if (!open) onBeforeOpen?.();
           setOpen((value) => !value);
         }}
-        className="w-6 h-8 shrink-0 flex items-center justify-start rounded-md text-fg-mute hover:text-fg hover:bg-surface-hi transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/20"
+        className="w-6 h-8 shrink-0 flex items-center justify-center rounded-md text-fg-mute hover:text-fg hover:bg-surface-hi transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/20"
       >
         <VsIcon name="settings" size={18} />
       </button>
diff --git a/web/src/lib/sidebarAlignmentArchitecture.test.js b/web/src/lib/sidebarAlignmentArchitecture.test.js
index 2ed0b7520..167bf7dc5 100644
--- a/web/src/lib/sidebarAlignmentArchitecture.test.js
+++ b/web/src/lib/sidebarAlignmentArchitecture.test.js
@@ -5,32 +5,44 @@ import { fileURLToPath } from 'node:url';
 
 const srcRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const sidebar = fs.readFileSync(path.join(srcRoot, 'components/Sidebar.jsx'), 'utf8');
+const sidebarQuickMenu = fs.readFileSync(path.join(srcRoot, 'components/SidebarQuickMenu.jsx'), 'utf8');
 const topbar = fs.readFileSync(path.join(srcRoot, 'components/TopBar.jsx'), 'utf8');
 
-assert.match(sidebar, /SidebarNavItem[\s\S]*?pl-\[19px\]/);
-assert.match(sidebar, /CustomSidebarItem[\s\S]*?pl-\[19px\]/);
-assert.match(sidebar, /SidebarNavItem[\s\S]*?items-center justify-start shrink-0/);
-assert.match(sidebar, /CustomSidebarItem[\s\S]*?items-center justify-start shrink-0/);
-assert.match(sidebar, /grid-cols-\[24px_minmax\(0,1fr\)_76px\][\s\S]*?gap-x-\[7px\] mx-1\.5 pl-\[13px\] pr-2/);
+assert.match(sidebar, /SidebarNavItem[\s\S]*?pl-\[19px\] pr-\[13px\] py-\[3px\]/);
+assert.match(sidebar, /CustomSidebarItem[\s\S]*?pl-\[19px\] pr-\[13px\] py-\[3px\]/);
+assert.match(sidebar, /SidebarNavItem[\s\S]*?items-center justify-center shrink-0/);
+assert.match(sidebar, /CustomSidebarItem[\s\S]*?items-center justify-center shrink-0/);
+assert.match(sidebar, /ace-sidebar-meta-text text-right text-\[13px\] text-fg-mute shrink-0 tabular-nums/);
+assert.doesNotMatch(sidebar, /ace-sidebar-meta-text w-\[76px\] text-right text-\[13px\]/);
+assert.match(sidebar, /grid-cols-\[24px_minmax\(0,1fr\)_auto\][\s\S]*?gap-x-\[7px\] ml-1\.5 mr-0 my-px pl-\[13px\] pr-\[1px\]/);
+assert.match(sidebar, /ace-sidebar-row-idle-slot ace-sidebar-meta-text[^\n]*text-right/);
+assert.doesNotMatch(sidebar, /ace-sidebar-row-idle-slot ace-sidebar-meta-text w-\[58px\]/);
+assert.doesNotMatch(sidebar, /!pinned && !sessionMarker[\s\S]*?ace-sidebar-row-idle-slot w-\[18px\] shrink-0/);
+assert.match(sidebar, /flex w-full min-w-0 items-center justify-end gap-0/);
+assert.match(sidebar, /ace-session-pin-btn ace-sidebar-row-hover-action w-\[18px\]/);
+assert.match(sidebar, /ace-sidebar-row-hover-action w-\[18px\] h-7/);
 assert.match(sidebar, /ace-sidebar-session-title-button ace-sidebar-tree-content[^\n]*px-0/);
 assert.match(sidebar, /ace-sidebar-tree-content min-w-0 truncate/);
 assert.match(sidebar, /ace-sidebar-tree-content ace-sidebar-meta-text px-0 py-\[5px\]/);
 assert.doesNotMatch(topbar, /className="ml-\[8px\]"/);
-assert.match(sidebar, /SidebarSectionHeader[\s\S]*?group flex h-6 items-center/);
-assert.match(sidebar, /group\/section-header flex min-w-0 flex-1 items-center/);
-assert.match(sidebar, /data-sidebar-section-disclosure=\{sectionId\}[\s\S]*?opacity-0/);
+assert.match(sidebar, /SidebarSectionHeader[\s\S]*?px-0 pt-3 pb-1/);
+assert.match(sidebar, /SidebarSectionHeader[\s\S]*?flex w-full min-w-0 items-center pl-\[23px\] pr-3/);
+assert.match(sidebar, /SidebarSectionHeader[\s\S]*?inline-flex min-w-0 items-center gap-0\.5/);
+assert.match(sidebar, /data-sidebar-section-disclosure=\{sectionId\}[\s\S]*?inline-flex w-5 h-6/);
 const sectionHeader = sidebar.match(/function SidebarSectionHeader[\s\S]*?\r?\n}\r?\n/)[0];
-assert.doesNotMatch(sectionHeader, /group-focus-within:opacity-100/);
-assert.doesNotMatch(sectionHeader, /data-sidebar-section-disclosure=\{sectionId\}[\s\S]*?hover:bg-surface-hi/);
-assert.doesNotMatch(sidebar, /\[aria-expanded="true"\].*ace-sidebar-extensions-arrow/);
-assert.match(sidebar, /SidebarSectionHeader[\s\S]*?group flex h-6 items-center/);
-assert.match(sidebar, /SidebarSectionHeader[\s\S]*?mt-2/);
-assert.match(sidebar, /ace-sidebar-section-title text-\[12px\]/);
-assert.match(sidebar, /ace-sidebar-fixed-nav shrink-0 flex flex-col gap-0\.5/);
-assert.match(sidebar, /ace-sidebar-custom-list flex flex-col gap-0\.5/);
-assert.match(sidebar, /mt-0\.5 mb-2 flex flex-col gap-0\.5/);
-assert.match(sidebar, /mt-0\.5 flex flex-col gap-0\.5/);
+assert.equal((sectionHeader.match(/<button/g) || []).length, 1);
+assert.doesNotMatch(sectionHeader, /opacity-0/);
+assert.doesNotMatch(sidebar, /ace-sidebar-section-title text-\[12px\]/);
+assert.match(sidebar, /ace-sidebar-fixed-nav shrink-0 overflow-y-auto pb-2/);
+assert.match(sidebar, /ace-sidebar-custom-list/);
+assert.doesNotMatch(sidebar, /ace-sidebar-custom-list my-1/);
+assert.match(sidebar, /mt-px mb-\[10px\]/);
+assert.match(sidebar, /my-1/);
 assert.doesNotMatch(sidebar, /-mt-1/);
-assert.match(sidebar, /ace-sidebar-workspace-row[\s\S]*?grid h-8 grid-cols-\[24px_minmax\(0,1fr\)_76px\][\s\S]*?gap-x-\[7px\] mx-1\.5 pl-\[13px\] pr-2/);
+assert.match(sidebar, /ace-sidebar-workspace-row[\s\S]*?grid-cols-\[24px_minmax\(0,1fr\)_auto\][\s\S]*?gap-x-\[7px\] mx-1\.5 pl-\[13px\] pr-\[14px\] py-\[3px\]/);
+assert.match(sidebar, /data-sidebar-brand="true"[^\n]*gap-\[7px\] pl-\[23px\]/);
+assert.match(sidebar, /ace-sidebar-footer shrink-0 pl-\[19px\]/);
+assert.match(sidebarQuickMenu, /w-6 h-8 shrink-0 flex items-center justify-center/);
+assert.doesNotMatch(sidebarQuickMenu, /w-6 h-8 shrink-0 flex items-center justify-start/);
 
 console.log('[pass] sidebar alignment and vertical rhythm preserve shared baselines');

From 10f12f53d7c8bb595c63b7aedc4dd9fcedde718b Mon Sep 17 00:00:00 2001
From: Trae User <trae@example.com>
Date: Tue, 22 Sep 2026 23:09:17 +0800
Subject: [PATCH 2/6] fix: restore the conversation spinner for sidebar running
 sessions

Running sessions in the sidebar used a bespoke 12-dot "abstract A" matrix
while the conversation used the ace-spinner ring, so the same state read
as two different icons. Reuse the chat's spinner in the session row.

- SessionAttentionIndicator renders the same `ace-spinner h-3 w-3` markup
  as ActivityLine and keeps the status role, label and title.
- Drop the now-unused .ace-session-loading/-matrix/-dot rules, the
  dot-pulse keyframes and the dot reduced-motion block.
- Remove web/scripts/check-session-loading-motion.py, which only asserted
  the removed dot matrix and is not wired into any task.
- permissionSidebarArchitecture.test.js now requires the shared spinner
  and rejects any ace-session-loading leftover.
---
 web/scripts/check-session-loading-motion.py   | 162 ------------------
 web/src/components/Sidebar.jsx                |  20 +--
 .../lib/permissionSidebarArchitecture.test.js |  15 +-
 web/src/styles/globals.css                    |  45 -----
 4 files changed, 10 insertions(+), 232 deletions(-)
 delete mode 100644 web/scripts/check-session-loading-motion.py

diff --git a/web/scripts/check-session-loading-motion.py b/web/scripts/check-session-loading-motion.py
deleted file mode 100644
index 3abd39f09..000000000
--- a/web/scripts/check-session-loading-motion.py
+++ /dev/null
@@ -1,162 +0,0 @@
-"""Check the built sidebar indicator with Playwright, including older Chromium.
-
-Run pnpm build first. Requires Python's playwright package and a Chromium install.
-Optional: --browser PATH adds a legacy Chromium executable to the default browser.
-"""
-
-import argparse
-import json
-import subprocess
-from html.parser import HTMLParser
-from pathlib import Path
-
-from playwright.sync_api import sync_playwright
-
-
-WEB = Path(__file__).resolve().parents[1]
-
-
-class Styles(HTMLParser):
-    def __init__(self, source):
-        super().__init__()
-        self.active = False
-        self.parts = []
-        self.feed(source)
-
-    def handle_starttag(self, tag, attrs):
-        if tag == 'style':
-            self.active = True
-
-    def handle_endtag(self, tag):
-        if tag == 'style':
-            self.active = False
-
-    def handle_data(self, data):
-        if self.active:
-            self.parts.append(data)
-
-
-def production_markup():
-    # Render the actual component; the fixture does not duplicate its markup.
-    script = r'''
-import fs from 'node:fs';
-import vm from 'node:vm';
-import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { transformWithEsbuild } from 'vite';
-import clsx from 'clsx';
-const source = fs.readFileSync('src/components/Sidebar.jsx', 'utf8');
-const start = source.indexOf('function SessionAttentionIndicator');
-const end = source.indexOf('function SessionHoverCard', start);
-if (start < 0 || end < start) throw new Error('Missing production indicator');
-const { code } = await transformWithEsbuild(source.slice(start, end), 'Indicator.jsx', {
-  loader: 'jsx', jsxFactory: 'React.createElement', jsxFragment: 'React.Fragment',
-});
-const Component = vm.runInNewContext(`${code}; SessionAttentionIndicator`, { React, clsx });
-process.stdout.write(renderToStaticMarkup(React.createElement(Component, {
-  attention: 'in_progress', meta: { label: 'Running' },
-})));
-'''
-    return subprocess.run(
-        ['node', '--input-type=module'], input=script, cwd=WEB,
-        text=True, encoding='utf-8', capture_output=True, check=True,
-    ).stdout
-
-
-SNAPSHOT = '''() => {
-  const host = document.querySelector('.ace-session-loading');
-  const dots = [...host.querySelectorAll('.ace-session-loading-dot')];
-  const center = node => { const r = node.getBoundingClientRect(); return [r.x+r.width/2, r.y+r.height/2]; };
-  return { centers:dots.map(center), hostCenter:center(host),
-    diameter:dots.map(node => parseFloat(getComputedStyle(node).width)),
-    slot:[host.offsetWidth, host.offsetHeight],
-    opacity:dots.map(node => parseFloat(getComputedStyle(node).opacity)),
-    transforms:dots.map(node => getComputedStyle(node).transform),
-    label:host.getAttribute('aria-label') };
-}'''
-
-
-def main():
-    parser = argparse.ArgumentParser(description=__doc__)
-    parser.add_argument('--browser', action='append', default=[])
-    parser.add_argument('--build-html', type=Path, default=WEB / 'dist/index.html')
-    parser.add_argument('--output', type=Path)
-    parser.add_argument('--screenshot-dir', type=Path)
-    args = parser.parse_args()
-    css = '\n'.join(Styles(args.build_html.read_text(encoding='utf-8')).parts)
-    assert css, 'Build HTML must contain the production CSS'
-    markup = production_markup()
-    results = []
-    with sync_playwright() as playwright:
-        for executable in [None, *args.browser]:
-            options = {'headless': True}
-            if executable:
-                options['executable_path'] = executable
-            browser = playwright.chromium.launch(**options)
-            page = browser.new_page()
-
-            def mount(theme='light', motion='no-preference', width=390):
-                page.set_viewport_size({'width': width, 'height': 240})
-                page.emulate_media(reduced_motion=motion)
-                page.set_content(f'<!doctype html><html data-theme="{theme}"><head>'
-                                 f'<style>{css}</style></head><body>{markup}</body></html>')
-
-            for theme in ['light', 'dark']:
-                for width in [390, 1280]:
-                    for motion in ['no-preference', 'reduce']:
-                        mount(theme, motion, width)
-                        frames = page.evaluate('''snapshot => {
-                          const read = new Function('return (' + snapshot + ')')();
-                          const animations = document.querySelector('.ace-session-loading').getAnimations({subtree:true});
-                          animations.forEach(a => a.pause());
-                          const frames = [];
-                          for (let time=0; time<=6480; time+=40) {
-                            animations.forEach(a => a.currentTime=time);
-                            frames.push(read());
-                          }
-                          return frames;
-                        }''', SNAPSHOT)
-                        for frame in frames:
-                            assert frame['slot'] == [16, 16], frame
-                            assert len(frame['centers']) == 12 and frame['label'] == 'Running'
-                            assert all(abs(d - 2) < 0.01 for d in frame['diameter'])
-                            assert len({tuple(c) for c in frame['centers']}) == 12
-                        if motion == 'reduce':
-                            assert all(frame['transforms'] == frames[0]['transforms'] for frame in frames)
-                            assert all(opacity == 1 for frame in frames for opacity in frame['opacity'])
-                        else:
-                            assert any(a['opacity'] != b['opacity']
-                                       for a, b in zip(frames, frames[1:])), 'Dot-matrix animation must not stall'
-                        results.append({'browser': browser.version, 'theme': theme, 'width': width, 'motion': motion, 'passed': True})
-
-            # Live preference changes must stop and resume the dot pulse.
-            mount()
-            for motion in ['no-preference', 'reduce', 'no-preference']:
-                page.emulate_media(reduced_motion=motion)
-                first = page.evaluate(SNAPSHOT)
-                page.wait_for_timeout(350)
-                last = page.evaluate(SNAPSHOT)
-                if motion == 'reduce':
-                    assert first['transforms'] == last['transforms']
-                    assert first['opacity'] == last['opacity'] == [1] * 12
-                else:
-                    assert first['opacity'] != last['opacity']
-
-            # The resting dot matrix remains an abstract A with twelve distinct points.
-            mount()
-            page.add_style_tag(content='.ace-session-loading * { animation: none !important; opacity: 1 !important; }')
-            resting = page.evaluate(SNAPSHOT)
-            assert len({tuple(c) for c in resting['centers']}) == 12
-            if args.screenshot_dir:
-                args.screenshot_dir.mkdir(parents=True, exist_ok=True)
-                page.locator('.ace-session-loading').screenshot(
-                    path=str(args.screenshot_dir / f'indicator-{browser.version}.png'))
-            browser.close()
-    output = json.dumps(results, indent=2)
-    if args.output:
-        args.output.write_text(output + '\n', encoding='utf-8')
-    print(output)
-
-
-if __name__ == '__main__':
-    main()
diff --git a/web/src/components/Sidebar.jsx b/web/src/components/Sidebar.jsx
index 305bf3490..257a37b28 100644
--- a/web/src/components/Sidebar.jsx
+++ b/web/src/components/Sidebar.jsx
@@ -669,27 +669,13 @@ function SessionAttentionIndicator({ attention, meta }) {
   if (attention !== 'in_progress' && attention !== 'unread') return null;
 
   return attention === 'in_progress' ? (
+    // 与对话流 ActivityLine 的运行中图标共用 ace-spinner,两处状态视觉保持一致。
     <span
-      className="ace-session-loading shrink-0"
+      className="ace-spinner h-3 w-3 shrink-0"
       title={meta.label}
       role="status"
       aria-label={meta.label}
-    >
-      <span className="ace-session-loading-matrix" aria-hidden="true">
-        <span className="ace-session-loading-dot is-a-0" />
-        <span className="ace-session-loading-dot is-a-1" />
-        <span className="ace-session-loading-dot is-a-2" />
-        <span className="ace-session-loading-dot is-a-3" />
-        <span className="ace-session-loading-dot is-a-4" />
-        <span className="ace-session-loading-dot is-a-5" />
-        <span className="ace-session-loading-dot is-a-6" />
-        <span className="ace-session-loading-dot is-a-7" />
-        <span className="ace-session-loading-dot is-a-8" />
-        <span className="ace-session-loading-dot is-a-9" />
-        <span className="ace-session-loading-dot is-a-10" />
-        <span className="ace-session-loading-dot is-a-11" />
-      </span>
-    </span>
+    />
   ) : (
     <span className={clsx('w-2 h-2 rounded-full shrink-0 box-border', meta.dot)} title={meta.label} />
   );
diff --git a/web/src/lib/permissionSidebarArchitecture.test.js b/web/src/lib/permissionSidebarArchitecture.test.js
index 4504178b1..87bd949c0 100644
--- a/web/src/lib/permissionSidebarArchitecture.test.js
+++ b/web/src/lib/permissionSidebarArchitecture.test.js
@@ -45,19 +45,18 @@ run('SessionRow uses the AskUserQuestion slot with exact permission wording', ()
   assert.match(row, /onSelect\?\.\(s\)/);
 });
 
-run('running sessions use the abstract A dot-matrix indicator', () => {
+run('running sessions reuse the conversation spinner indicator', () => {
   const sidebar = source('components/Sidebar.jsx');
   const styles = source('styles/globals.css');
   const indicator = between(sidebar, 'function SessionAttentionIndicator', 'function SessionHoverCard');
   assert.match(indicator, /if \(attention !== 'in_progress' && attention !== 'unread'\) return null/);
-  assert.equal((indicator.match(/ace-session-loading-dot is-a-/g) || []).length, 12);
-  assert.match(indicator, /ace-session-loading-matrix/);
+  assert.match(indicator, /className="ace-spinner h-3 w-3 shrink-0"/);
   assert.match(indicator, /role="status"/);
-  assert.match(styles, /@keyframes ace-session-loading-dot-pulse/);
-  assert.match(styles, /\/\* Abstract A: two interrupted strokes joined by a crossbar\. \*\//);
-  assert.match(styles, /\.ace-session-loading-dot\.is-a-0/);
-  assert.match(styles, /\.ace-session-loading-dot\.is-a-11/);
-  assert.match(styles, /@media \(prefers-reduced-motion: reduce\)[\s\S]*\.ace-session-loading \.ace-session-loading-dot[\s\S]*opacity: 1/);
+  assert.doesNotMatch(indicator, /ace-session-loading/);
+  // 侧栏运行中状态必须复用对话流 ActivityLine 的同一个 spinner。
+  assert.match(source('components/ActivityLine.jsx'), /ace-spinner h-3 w-3/);
+  assert.match(styles, /\.ace-spinner \{[\s\S]*?animation: ace-spin/);
+  assert.doesNotMatch(styles, /ace-session-loading/);
 });
 
 run('permission state reaches pinned, no-workspace, and workspace session rows', () => {
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 17de23608..e38af01eb 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -2593,10 +2593,6 @@ body {
   50%      { opacity: 1;   transform: scale(1); }
 }
 @keyframes ace-spin { to { transform: rotate(360deg); } }
-@keyframes ace-session-loading-dot-pulse {
-  0%, 18%, 100% { opacity: 0.24; transform: scale(0.7); }
-  9% { opacity: 1; transform: scale(1); }
-}
 .ace-spinner {
   display: inline-block; width: 1em; height: 1em;
   border: calc(.05em + .2px) solid rgba(var(--ace-fg-mute-rgb), 0.40);
@@ -2609,47 +2605,6 @@ body {
   animation: none;
   border-top-color: rgba(var(--ace-fg-mute-rgb), 0.40);
 }
-.ace-session-loading {
-  position: relative;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  color: var(--ace-accent);
-}
-.ace-session-loading-matrix {
-  position: absolute;
-  inset: 0;
-}
-.ace-session-loading-dot {
-  position: absolute;
-  width: 2px;
-  height: 2px;
-  border-radius: 9999px;
-  background: currentColor;
-  animation: ace-session-loading-dot-pulse 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
-}
-/* Abstract A: two interrupted strokes joined by a crossbar. */
-.ace-session-loading-dot.is-a-0 { left: 7px; top: 1px; animation-delay: 0ms; }
-.ace-session-loading-dot.is-a-1 { left: 5px; top: 3px; animation-delay: 150ms; }
-.ace-session-loading-dot.is-a-2 { left: 9px; top: 3px; animation-delay: 300ms; }
-.ace-session-loading-dot.is-a-3 { left: 4px; top: 6px; animation-delay: 450ms; }
-.ace-session-loading-dot.is-a-4 { left: 10px; top: 6px; animation-delay: 600ms; }
-.ace-session-loading-dot.is-a-5 { left: 5px; top: 8px; animation-delay: 750ms; }
-.ace-session-loading-dot.is-a-6 { left: 7px; top: 8px; animation-delay: 900ms; }
-.ace-session-loading-dot.is-a-7 { left: 9px; top: 8px; animation-delay: 1050ms; }
-.ace-session-loading-dot.is-a-8 { left: 3px; top: 11px; animation-delay: 1200ms; }
-.ace-session-loading-dot.is-a-9 { left: 11px; top: 11px; animation-delay: 1350ms; }
-.ace-session-loading-dot.is-a-10 { left: 2px; top: 14px; animation-delay: 1500ms; }
-.ace-session-loading-dot.is-a-11 { left: 12px; top: 14px; animation-delay: 1650ms; }
-
-@media (prefers-reduced-motion: reduce) {
-  /* Keep the abstract A visible without movement. */
-  .ace-session-loading .ace-session-loading-dot {
-    animation: none;
-    opacity: 1;
-    transform: none;
-  }
-}
 
 /* Upgrade progress is deliberately quicker than the 350ms status polling interval,
    so each target settles promptly while the striped surface keeps activity visible. */

From 000e0ff571c3fa5079f6c90b8f2511529942c83c Mon Sep 17 00:00:00 2001
From: Trae User <trae@example.com>
Date: Tue, 22 Sep 2026 23:20:20 +0800
Subject: [PATCH 3/6] fix: keep a gap between the sidebar border and the
 session title

The topbar navigation block is sized as sidebar - leading-inset - 4px, but it
starts at the topbar's own 8px padding while --ace-topbar-leading-inset was
19px. The block therefore ended 11px early, leaving the session title 3px to
the left of the sidebar border painted by .ace-topbar::before, i.e. flush on
the line and visibly cramped.

Set the inset to the topbar's real left padding (8px), matching the macOS
frameless override, which already pairs an 80px padding with an 80px inset.
The title now clears the border by 8px on every surface.

sidebarAlignmentArchitecture.test.js asserts the inset and the topbar padding
stay equal and that the title's own padding still clears the border.
---
 web/src/lib/sidebarAlignmentArchitecture.test.js | 11 +++++++++++
 web/src/styles/globals.css                       | 11 +++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/sidebarAlignmentArchitecture.test.js b/web/src/lib/sidebarAlignmentArchitecture.test.js
index 167bf7dc5..1bade7f0e 100644
--- a/web/src/lib/sidebarAlignmentArchitecture.test.js
+++ b/web/src/lib/sidebarAlignmentArchitecture.test.js
@@ -45,4 +45,15 @@ assert.match(sidebar, /ace-sidebar-footer shrink-0 pl-\[19px\]/);
 assert.match(sidebarQuickMenu, /w-6 h-8 shrink-0 flex items-center justify-center/);
 assert.doesNotMatch(sidebarQuickMenu, /w-6 h-8 shrink-0 flex items-center justify-start/);
 
+// 顶栏会话标题必须落在侧栏右边框的右侧。导航块宽度由 --ace-topbar-leading-inset 推出,
+// 它必须等于顶栏自身的左内边距,否则导航块会提前结束、把标题顶到边框上,显得很挤。
+const styles = fs.readFileSync(path.join(srcRoot, 'styles/globals.css'), 'utf8');
+const topbarRule = styles.match(/\.ace-topbar \{[\s\S]*?\n\}/)[0];
+const sessionTitleRule = styles.match(/\.ace-topbar-session-title \{[^}]*\}/)[0];
+const leadingInset = Number(topbarRule.match(/--ace-topbar-leading-inset:\s*(\d+)px/)[1]);
+const topbarPaddingLeft = Number(topbar.match(/ace-topbar (?:px|pl)-(\d+)/)[1]) * 4;
+const sessionTitlePadding = Number(sessionTitleRule.match(/padding-left:\s*(\d+)px/)[1]);
+assert.equal(leadingInset, topbarPaddingLeft);
+assert.ok(sessionTitlePadding > 4, 'session title must clear the sidebar border by its own padding');
+
 console.log('[pass] sidebar alignment and vertical rhythm preserve shared baselines');
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index e38af01eb..6777c17a1 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -1751,9 +1751,14 @@ body {
 .ace-topbar {
   /* Add 5px above and 6px below the original 30px row without enlarging controls. */
   --ace-topbar-control-size: 24px;
-  /* Four controls, three gaps, and the shared 19px sidebar first-column inset. */
+  /* Four 24px controls, three 4px gaps, and the topbar's own 8px left padding. */
   --ace-topbar-navigation-min-width: 116px;
-  --ace-topbar-leading-inset: 19px;
+  /* Must equal the topbar's own left padding (px-2 in TopBar.jsx; the macOS
+     frameless override pairs an 80px padding with an 80px inset). The navigation
+     block is sized to end 4px before the sidebar border, and the session title
+     then clears that border with its own left padding. A larger inset keeps the
+     block narrower and pulls the title back onto the border. */
+  --ace-topbar-leading-inset: 8px;
   box-sizing: border-box;
   min-height: var(--ace-topbar-height);
   height: auto;
@@ -1782,6 +1787,8 @@ body {
   max-width: calc(100% - 8px);
   overflow-wrap: anywhere;
 }
+/* 12px minus the 4px the navigation block keeps clear of the sidebar border
+   leaves an 8px gap between that border and the session title. */
 .ace-topbar-session-title { padding-left: 12px; }
 .ace-topbar-controls { gap: 40px; }
 .ace-topbar-controls > .ace-window-controls { margin-left: 0; }

From 319d3194b0867387af60d711614db1a72c81ae5a Mon Sep 17 00:00:00 2001
From: Trae User <trae@example.com>
Date: Tue, 22 Sep 2026 23:28:27 +0800
Subject: [PATCH 4/6] fix: stop viewport caps from pulling the session title
 onto the sidebar border

The navigation block exists only to push the session title past the sidebar
border, so any cap below sidebar - inset - 4px drags the title back onto it.
max-width: 35vw did exactly that: with a 360px sidebar the title landed up to
116px left of the border once the window dropped under ~994px. The
max-width: 640px breakpoint reproduced the same overlap, and its
padding-left: 0 put the title 4px inside the border.

Drop both. Neither was the overflow guard: the title (flex-1 with min-w-0)
truncates to zero before anything else shrinks, and the navigation block keeps
min-width: 116px plus flex-shrink: 1 for rows that genuinely cannot fit.

The title now sits a constant 8px right of the border at every window width.
sidebarAlignmentArchitecture.test.js rejects a max-width on the navigation
block and any second .ace-topbar-session-title rule.
---
 web/src/lib/sidebarAlignmentArchitecture.test.js |  9 +++++++++
 web/src/styles/globals.css                       | 10 +++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/sidebarAlignmentArchitecture.test.js b/web/src/lib/sidebarAlignmentArchitecture.test.js
index 1bade7f0e..2440c7c30 100644
--- a/web/src/lib/sidebarAlignmentArchitecture.test.js
+++ b/web/src/lib/sidebarAlignmentArchitecture.test.js
@@ -49,11 +49,20 @@ assert.doesNotMatch(sidebarQuickMenu, /w-6 h-8 shrink-0 flex items-center justif
 // 它必须等于顶栏自身的左内边距,否则导航块会提前结束、把标题顶到边框上,显得很挤。
 const styles = fs.readFileSync(path.join(srcRoot, 'styles/globals.css'), 'utf8');
 const topbarRule = styles.match(/\.ace-topbar \{[\s\S]*?\n\}/)[0];
+const navigationRule = styles.match(/\.ace-topbar-navigation \{[\s\S]*?\n\}/)[0];
 const sessionTitleRule = styles.match(/\.ace-topbar-session-title \{[^}]*\}/)[0];
 const leadingInset = Number(topbarRule.match(/--ace-topbar-leading-inset:\s*(\d+)px/)[1]);
 const topbarPaddingLeft = Number(topbar.match(/ace-topbar (?:px|pl)-(\d+)/)[1]) * 4;
 const sessionTitlePadding = Number(sessionTitleRule.match(/padding-left:\s*(\d+)px/)[1]);
 assert.equal(leadingInset, topbarPaddingLeft);
 assert.ok(sessionTitlePadding > 4, 'session title must clear the sidebar border by its own padding');
+// 导航块的宽度只能由侧栏宽度推出。按视口加的上限或断点会在窗口变窄时提前结束留白,
+// 把标题重新拽回边框左侧。
+assert.doesNotMatch(navigationRule.replace(/\/\*[\s\S]*?\*\//g, ''), /max-width/);
+assert.equal(
+  (styles.match(/\.ace-topbar-session-title \{[^}]*\}/g) || []).length,
+  1,
+  'only one .ace-topbar-session-title rule may exist',
+);
 
 console.log('[pass] sidebar alignment and vertical rhythm preserve shared baselines');
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 6777c17a1..f3c4deace 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -1778,8 +1778,12 @@ body {
   margin-top: 3px;
 }
 .ace-topbar-navigation {
+  /* 这块留白唯一的作用就是把会话标题顶到侧栏右边框之外,所以宽度必须严格等于
+     侧栏宽度减去 inset 和 4px。任何按视口计算的上限(例如从前的 max-width: 35vw)
+     或按视口收窄的断点,都会在窗口变窄时提前结束这块留白,把标题拽回边框左侧。
+     真正放不下时由 min-width 保住按钮尺寸、由 flex-shrink 让位给右侧控件,
+     那时标题已经缩到 0,不会再出现压线。 */
   width: max(var(--ace-topbar-navigation-min-width), calc(var(--ace-topbar-sidebar-width) - var(--ace-topbar-leading-inset, 8px) - 4px));
-  max-width: 35vw;
   min-width: var(--ace-topbar-navigation-min-width);
   flex-shrink: 1;
 }
@@ -1800,10 +1804,6 @@ body {
   width: var(--ace-topbar-control-size);
   height: var(--ace-topbar-control-size);
 }
-@media (max-width: 640px) {
-  .ace-topbar-navigation { width: var(--ace-topbar-navigation-min-width); }
-  .ace-topbar-session-title { padding-left: 0; }
-}
 .ace-topbar-update-button {
   height: var(--ace-topbar-control-size);
 }

From e58ce20502777d508fa4cfb6e770c0c39cd854e9 Mon Sep 17 00:00:00 2001
From: Trae User <trae@example.com>
Date: Tue, 22 Sep 2026 23:54:15 +0800
Subject: [PATCH 5/6] fix: keep the sidebar list width stable and align section
 header hover blocks

- globals.css: reserve a stable scrollbar gutter on .ace-sidebar-scroll and
  .ace-file-tree. Revealing rows when the active session changes used to push
  the list past the viewport, and the 12px custom scrollbar then stole 12px of
  content width, shifting the whole list sideways.
- Sidebar.jsx: the section header hover block now matches workspace rows
  (mx-1.5 inset, py-[3px] row height, rounded-md) while the label keeps its
  absolute position; container padding compensates so section rhythm is intact.
- sidebarAlignmentArchitecture.test.js: update the section header assertions
  and pin the shared hover-block geometry.

Verified with node src/lib/runTests.js (2725 pass), vite build and
check-regex-compat; measured block geometry in the running app before and
after switching sessions.
---
 web/src/components/Sidebar.jsx                   | 4 ++--
 web/src/lib/sidebarAlignmentArchitecture.test.js | 5 +++--
 web/src/styles/globals.css                       | 4 ++++
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/src/components/Sidebar.jsx b/web/src/components/Sidebar.jsx
index 257a37b28..2096bec25 100644
--- a/web/src/components/Sidebar.jsx
+++ b/web/src/components/Sidebar.jsx
@@ -636,12 +636,12 @@ function SidebarSectionHeader({ sectionId, count, expanded, onToggle, actions =
   return (
     <div
       data-sidebar-section={sectionId}
-      className="ace-sidebar-section-header ace-sidebar-section-text flex items-center px-0 pt-3 pb-1 text-[13px] font-medium text-fg-mute"
+      className="ace-sidebar-section-header ace-sidebar-section-text flex items-center px-0 pt-[6px] pb-1 text-[13px] font-medium text-fg-mute"
     >
       <button
         type="button"
         onClick={onToggle}
-        className="flex w-full min-w-0 items-center pl-[23px] pr-3 rounded text-left hover:text-fg hover:bg-surface-hi transition"
+        className="flex min-w-0 flex-1 items-center mx-1.5 pl-[17px] pr-[6px] py-[3px] rounded-md text-left hover:text-fg hover:bg-surface-hi transition"
         title={expanded ? `折叠${title}` : `展开${title}`}
         aria-expanded={expanded}
       >
diff --git a/web/src/lib/sidebarAlignmentArchitecture.test.js b/web/src/lib/sidebarAlignmentArchitecture.test.js
index 2440c7c30..0e17d7c4c 100644
--- a/web/src/lib/sidebarAlignmentArchitecture.test.js
+++ b/web/src/lib/sidebarAlignmentArchitecture.test.js
@@ -25,8 +25,9 @@ assert.match(sidebar, /ace-sidebar-session-title-button ace-sidebar-tree-content
 assert.match(sidebar, /ace-sidebar-tree-content min-w-0 truncate/);
 assert.match(sidebar, /ace-sidebar-tree-content ace-sidebar-meta-text px-0 py-\[5px\]/);
 assert.doesNotMatch(topbar, /className="ml-\[8px\]"/);
-assert.match(sidebar, /SidebarSectionHeader[\s\S]*?px-0 pt-3 pb-1/);
-assert.match(sidebar, /SidebarSectionHeader[\s\S]*?flex w-full min-w-0 items-center pl-\[23px\] pr-3/);
+assert.match(sidebar, /SidebarSectionHeader[\s\S]*?px-0 pt-\[6px\] pb-1/);
+// 分节标题的 hover 色块必须与工作区行同宽同高:同样的 mx-1.5 内缩、py-[3px] 行高、rounded-md 圆角。
+assert.match(sidebar, /SidebarSectionHeader[\s\S]*?flex min-w-0 flex-1 items-center mx-1\.5 pl-\[17px\] pr-\[6px\] py-\[3px\] rounded-md/);
 assert.match(sidebar, /SidebarSectionHeader[\s\S]*?inline-flex min-w-0 items-center gap-0\.5/);
 assert.match(sidebar, /data-sidebar-section-disclosure=\{sectionId\}[\s\S]*?inline-flex w-5 h-6/);
 const sectionHeader = sidebar.match(/function SidebarSectionHeader[\s\S]*?\r?\n}\r?\n/)[0];
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index f3c4deace..a04e9ba47 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -1826,6 +1826,10 @@ body {
     transparent 100%);
   padding-bottom: calc(var(--ace-list-edge-fade) + 2px);
   scroll-padding-bottom: calc(var(--ace-list-edge-fade) + 2px);
+  /* 稳定滚动条槽位:列表内容高度越过视口时自定义滚动条(--ace-scrollbar-hit-size:
+     12px)会挤掉 12px 内容宽度,切会话触发 reveal 展开时列表会明显左右抖一下。
+     常驻槽位让宽度与是否溢出无关。轨道默认透明,短列表时右侧空槽不可见。 */
+  scrollbar-gutter: stable;
   -webkit-mask-image: var(--ace-list-edge-mask);
   mask-image: var(--ace-list-edge-mask);
 }

From 00a9224f2ef2df45ddbf9bf270c5b956bb260408 Mon Sep 17 00:00:00 2001
From: tmoonlight <shaohaozhi@live.cn>
Date: Wed, 23 Sep 2026 01:55:43 +0800
Subject: [PATCH 6/6] Fix sidebar divider sync at fractional display scales

---
 web/src/styles/globals.css | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index a04e9ba47..4093714d2 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -4478,7 +4478,9 @@ a.ace-thread-link:focus-visible {
   cursor: col-resize;
   touch-action: none;
 }
-.ace-resize-handle::after {
+/* Paint both highlights as filled strips; borders snap differently at fractional DPI. */
+.ace-resize-handle::after,
+.ace-topbar::after {
   content: "";
   position: absolute;
   top: 0;
@@ -4490,16 +4492,25 @@ a.ace-thread-link:focus-visible {
   transition: opacity .12s ease;
   pointer-events: none;
 }
+.ace-topbar::after {
+  left: calc(var(--ace-topbar-sidebar-width, 0px) - 1px);
+  transition: left 250ms ease, opacity .12s ease;
+}
 .ace-resize-handle:hover::after,
-.ace-resize-handle:focus-visible::after { opacity: 1; }
+.ace-resize-handle:focus-visible::after,
+.ace-topbar:has(+ .ace-single-shell > .ace-resize-handle-left:is(:hover, :focus-visible))::after { opacity: 1; }
 .ace-resize-handle:focus-visible { outline: none; }
-.ace-resize-handle:focus-visible::after { width: 2px; left: -1px; }
+.ace-resize-handle:focus-visible::after,
+.ace-topbar:has(+ .ace-single-shell > .ace-resize-handle-left:focus-visible)::after { width: 2px; }
 .ace-resizing,
 .ace-resizing * {
   cursor: col-resize !important;
   user-select: none !important;
 }
-.ace-resizing .ace-sidebar { transition: none !important; }
+/* Follow the pointer immediately while preserving the shared highlight fade. */
+.ace-resizing .ace-sidebar,
+.ace-resizing .ace-topbar::before { transition: none !important; }
+.ace-resizing .ace-topbar::after { transition: opacity .12s ease !important; }
 
 /* Preview/details panel between chat and SidePanel */
 .ace-preview-details-shell {