style(ui): refine left sidebar navigation

apps/ui/src/features/shell/AppSidebar.tsx

@@ -67,14 +67,20 @@ export function AppSidebar({
 }: AppSidebarProps) {
   const topContent = (
     <>
-      <nav className="nav-list">
+      <nav className="nav-list" aria-label="主导航">
         {[
           { id: "chat" as const, label: "对话" },
           { id: "knowledge" as const, label: ui.knowledge },
           { id: "plugins" as const, label: ui.plugins },
           { id: "settings" as const, label: ui.settings }
         ].map((item) => (
-          <button key={item.id} type="button" className={"nav-item app-no-drag" + (viewMode === item.id ? " active" : "")} onClick={() => onNavSelection(item.id)}>
+          <button
+            key={item.id}
+            type="button"
+            className={"nav-item app-no-drag" + (viewMode === item.id ? " active" : "")}
+            aria-current={viewMode === item.id ? "page" : undefined}
+            onClick={() => onNavSelection(item.id)}
+          >
             <span className="nav-item-icon" aria-hidden="true">
               {navIcon(item.id)}
             </span>

apps/ui/src/features/shell/ExpertTree.tsx

@@ -140,7 +140,7 @@ export function ExpertTree({
             const hasExperts = categoryExperts.length > 0
 
             return (
-              <div key={category.id} className="expert-category-item expert-tree-category">
+              <div key={category.id} className={"expert-category-item expert-tree-category" + (isExpanded && hasExperts ? " expanded" : "")}>
                 <button
                   type="button"
                   className="expert-category-header expert-tree-category-trigger app-no-drag"

apps/ui/src/features/shell/SessionList.tsx

@@ -45,7 +45,13 @@ export function SessionList({
       <div className="sidebar-session-list">
         {sessions.map((session, index) => (
           <div key={session.id} className={"sidebar-session-card" + (activeSessionId === session.id ? " active" : "")}>
-            <button type="button" className="sidebar-session-main app-no-drag" disabled={projectActionPending} onClick={() => onOpenSession(session.id)}>
+            <button
+              type="button"
+              className="sidebar-session-main app-no-drag"
+              aria-current={activeSessionId === session.id ? "true" : undefined}
+              disabled={projectActionPending}
+              onClick={() => onOpenSession(session.id)}
+            >
               <strong>{sessionTitles[session.id] ?? formatSessionTitle(session.title, index)}</strong>
             </button>
             {sessions.length > 1 ? (
@@ -57,7 +63,9 @@ export function SessionList({
                 disabled={projectActionPending || (sendPhase !== "idle" && activeStreamSessionId === session.id)}
                 onClick={() => onCloseSession(session.id)}
               >
-                x
+                <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+                  <path d="M4.25 4.25 11.75 11.75M11.75 4.25 4.25 11.75" />
+                </svg>
               </button>
             ) : null}
           </div>

apps/ui/src/styles/chat.css

@@ -173,12 +173,12 @@
 
 .conversation-shell .sidebar-bottom {
   min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
+  display: grid;
+  grid-template-rows: minmax(0, 55fr) minmax(120px, 45fr);
+  overflow: hidden;
   overflow-x: hidden;
   gap: 14px;
-  padding-right: 4px;
+  padding-right: 0;
   scrollbar-width: thin;
   scrollbar-color: rgba(94, 164, 216, 0.44) transparent;
 }
@@ -208,18 +208,15 @@
 }
 
 .conversation-shell .sidebar-experts-entry {
-  flex: 0 0 calc(55% - 6px);
-  min-height: calc(55% - 6px);
+  min-height: 0;
   display: grid;
-  grid-template-rows: auto auto;
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 10px;
-  align-content: start;
-  overflow: visible;
+  overflow: hidden;
 }
 
 .conversation-shell .sidebar-session-section {
-  flex: 0 0 calc(45% - 6px);
-  min-height: calc(45% - 6px);
+  min-height: 0;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   overflow: hidden;
@@ -250,14 +247,33 @@
 
 .conversation-shell .sidebar-expert-scroll {
   min-height: 0;
-  overflow-y: visible;
+  overflow-y: auto;
   overflow-x: hidden;
-  padding-right: 0;
+  padding-right: 2px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(94, 164, 216, 0.44) transparent;
+}
+
+.conversation-shell .sidebar-expert-scroll::-webkit-scrollbar {
+  width: 4px;
+}
+
+.conversation-shell .sidebar-expert-scroll::-webkit-scrollbar-track {
+  background: transparent;
 }
 
+.conversation-shell .sidebar-expert-scroll::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(94, 164, 216, 0.44);
+}
+
+.conversation-shell .nav-item:focus-visible,
+.conversation-shell .conversation-new-session:focus-visible,
 .conversation-shell .expert-category-header:focus-visible,
-.conversation-shell .expert-category-expert-item:focus-visible {
-  outline: 2px solid rgba(21, 132, 209, 0.42);
+.conversation-shell .expert-category-expert-item:focus-visible,
+.conversation-shell .sidebar-session-main:focus-visible,
+.conversation-shell .sidebar-session-close:focus-visible {
+  outline: 2px solid rgba(21, 132, 209, 0.58);
   outline-offset: 2px;
 }
 
@@ -273,7 +289,7 @@
 }
 
 .conversation-shell .sidebar-session-list::-webkit-scrollbar {
-  width: 2px;
+  width: 4px;
   opacity: 0;
 }
 
@@ -299,10 +315,22 @@
 }
 
 .conversation-shell .expert-category-item {
+  position: relative;
   border-radius: 16px;
   border: 1px solid rgba(173, 214, 239, 0.48);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(235, 247, 255, 0.62));
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 22px rgba(85, 147, 192, 0.08);
+  overflow: hidden;
+}
+
+.conversation-shell .expert-category-item::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  background: linear-gradient(180deg, #86d7ff 0%, #1490db 100%);
+  opacity: 0;
+  transition: opacity 180ms ease;
 }
 
 .conversation-shell .expert-category-item:hover {
@@ -310,6 +338,15 @@
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 14px 26px rgba(78, 145, 194, 0.12);
 }
 
+.conversation-shell .expert-category-item.expanded {
+  border-color: rgba(84, 166, 225, 0.72);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(222, 241, 255, 0.72));
+}
+
+.conversation-shell .expert-category-item.expanded::before {
+  opacity: 1;
+}
+
 .conversation-shell .expert-category-header {
   min-height: 44px;
   padding: 0 12px;
@@ -365,9 +402,9 @@
 }
 
 .conversation-shell .sidebar-session-card {
+  position: relative;
   min-height: 54px;
   height: 54px;
-  flex: 0 0 54px;
   align-self: start;
   padding: 4px;
   border-radius: 18px;
@@ -376,6 +413,17 @@
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 24px rgba(66, 132, 177, 0.12);
 }
 
+.conversation-shell .sidebar-session-card::before {
+  content: "";
+  position: absolute;
+  inset: 8px auto 8px 0;
+  width: 3px;
+  border-radius: 999px;
+  background: #1490db;
+  opacity: 0;
+  transition: opacity 180ms ease;
+}
+
 .conversation-shell .sidebar-session-card:hover {
   background: linear-gradient(180deg, rgba(251, 254, 255, 0.9), rgba(206, 233, 249, 0.8));
   border-color: rgba(109, 178, 223, 0.6);
@@ -388,9 +436,13 @@
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 18px 30px rgba(56, 123, 170, 0.2);
 }
 
+.conversation-shell .sidebar-session-card.active::before {
+  opacity: 1;
+}
+
 .conversation-shell .sidebar-session-main {
   min-height: 46px;
-  padding: 0 12px;
+  padding: 0 8px 0 12px;
   border-radius: 14px;
   color: var(--conversation-ink);
 }
@@ -400,9 +452,26 @@
 }
 
 .conversation-shell .sidebar-session-close {
+  display: inline-grid;
+  place-items: center;
   background: rgba(255, 255, 255, 0.9);
   box-shadow: inset 0 0 0 1px rgba(167, 209, 236, 0.72);
   color: #64809d;
+  opacity: 0.58;
+}
+
+.conversation-shell .sidebar-session-close svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+}
+
+.conversation-shell .sidebar-session-card:hover .sidebar-session-close,
+.conversation-shell .sidebar-session-card:focus-within .sidebar-session-close {
+  opacity: 1;
 }
 
 .conversation-shell .sidebar-session-close:hover:not(:disabled) {