Refine Agent sidebar icons and manual expansion

tests/unit/main-layout-sidebar-peek.test.tsx

@@ -1,5 +1,5 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MemoryRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { MainLayout } from '@/components/layout/MainLayout';
 import { codingWorkspaceStore } from '@/stores/coding-workspace';
@@ -8,6 +8,7 @@ import { useSettingsStore } from '@/stores/settings';
 type PeekProps = {
   sidebarPeekOpen?: boolean;
   onSidebarPeekChange?: (open: boolean, source: 'toggle' | 'focus' | 'sidebar' | 'titlebar') => void;
+  forceExpanded?: boolean;
 };
 
 vi.mock('@/components/layout/TitleBar', () => ({
@@ -17,8 +18,12 @@ vi.mock('@/components/layout/TitleBar', () => ({
         type="button"
         data-testid="peek-trigger"
         data-peek-open={sidebarPeekOpen ? 'true' : 'false'}
+        aria-label={useSettingsStore.getState().sidebarCollapsed ? '展开侧栏' : '折叠侧栏'}
+        onClick={() => useSettingsStore.getState().setSidebarCollapsed(!useSettingsStore.getState().sidebarCollapsed)}
         onPointerEnter={() => onSidebarPeekChange?.(true, 'toggle')}
         onPointerLeave={() => onSidebarPeekChange?.(false, 'toggle')}
+        onFocus={() => onSidebarPeekChange?.(true, 'focus')}
+        onBlur={() => onSidebarPeekChange?.(false, 'focus')}
       />
       <div
         data-testid="peek-titlebar"
@@ -30,22 +35,33 @@ vi.mock('@/components/layout/TitleBar', () => ({
 }));
 
 vi.mock('@/components/layout/Sidebar', () => ({
-  Sidebar: ({ sidebarPeekOpen, onSidebarPeekChange }: PeekProps) => (
+  Sidebar: ({ sidebarPeekOpen, onSidebarPeekChange, forceExpanded }: PeekProps) => (
     <aside
       data-testid="peek-sidebar"
       data-peek-open={sidebarPeekOpen ? 'true' : 'false'}
+      data-force-expanded={forceExpanded ? 'true' : 'false'}
       onPointerEnter={() => onSidebarPeekChange?.(true, 'sidebar')}
       onPointerLeave={() => onSidebarPeekChange?.(false, 'sidebar')}
     />
   ),
 }));
 
-function renderLayout() {
+function NavigationProbe() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  return <>
+    <output data-testid="layout-location">{location.pathname}</output>
+    <button onClick={() => navigate('/cloud-agents')}>进入智能体</button>
+    <button onClick={() => navigate('/chat')}>进入编程</button>
+  </>;
+}
+
+function renderLayout(path = '/chat') {
   render(
-    <MemoryRouter initialEntries={['/chat']}>
+    <MemoryRouter initialEntries={[path]}>
       <Routes>
         <Route element={<MainLayout />}>
-          <Route path="*" element={null} />
+          <Route path="*" element={<NavigationProbe />} />
         </Route>
       </Routes>
     </MemoryRouter>,
@@ -140,4 +156,85 @@ describe('MainLayout sidebar hover preview', () => {
     });
     expect(trigger).toHaveAttribute('data-peek-open', 'false');
   });
+
+  it.each(['/cloud-agents', '/cloud-agents/channels'])('ignores every pointer and focus preview source on %s', (path) => {
+    renderLayout(path);
+    const trigger = screen.getByTestId('peek-trigger');
+    const sidebar = screen.getByTestId('peek-sidebar');
+    const titlebar = screen.getByTestId('peek-titlebar');
+    for (const target of [trigger, titlebar, sidebar]) {
+      fireEvent.pointerEnter(target);
+      expect(trigger).toHaveAttribute('data-peek-open', 'false');
+      expect(sidebar).toHaveAttribute('data-peek-open', 'false');
+      fireEvent.pointerLeave(target);
+    }
+    fireEvent.focus(trigger);
+    expect(trigger).toHaveAttribute('data-peek-open', 'false');
+    expect(sidebar).toHaveAttribute('data-peek-open', 'false');
+    fireEvent.blur(trigger);
+    act(() => vi.advanceTimersByTime(180));
+    expect(sidebar).toHaveAttribute('data-peek-open', 'false');
+    expect(useSettingsStore.getState().sidebarCollapsed).toBe(true);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it.each(['/cloud-agents', '/cloud-agents/channels'])('allows explicit sidebar expansion and collapse on %s', (path) => {
+    renderLayout(path);
+    fireEvent.click(screen.getByRole('button', { name: '展开侧栏' }));
+    expect(useSettingsStore.getState().sidebarCollapsed).toBe(false);
+    expect(screen.getByRole('button', { name: '折叠侧栏' })).toHaveAttribute('data-peek-open', 'false');
+    fireEvent.click(screen.getByRole('button', { name: '折叠侧栏' }));
+    expect(useSettingsStore.getState().sidebarCollapsed).toBe(true);
+    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
+    fireEvent.focus(screen.getByTestId('peek-trigger'));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+  });
+
+  it('clears active Code preview sources when entering Agents and does not restore them on return', () => {
+    renderLayout();
+    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
+    fireEvent.pointerEnter(screen.getByTestId('peek-titlebar'));
+    fireEvent.pointerEnter(screen.getByTestId('peek-sidebar'));
+    fireEvent.focus(screen.getByTestId('peek-trigger'));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'true');
+
+    fireEvent.click(screen.getByRole('button', { name: '进入智能体' }));
+    expect(screen.getByTestId('layout-location')).toHaveTextContent('/cloud-agents');
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+    fireEvent.click(screen.getByRole('button', { name: '进入编程' }));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'true');
+    fireEvent.pointerLeave(screen.getByTestId('peek-trigger'));
+    act(() => vi.advanceTimersByTime(180));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+  });
+
+  it('cancels a stale Code close timer at the Agents boundary before Code starts a fresh preview', () => {
+    renderLayout();
+    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
+    fireEvent.pointerLeave(screen.getByTestId('peek-trigger'));
+    expect(vi.getTimerCount()).toBe(1);
+    fireEvent.click(screen.getByRole('button', { name: '进入智能体' }));
+    expect(vi.getTimerCount()).toBe(0);
+    act(() => vi.advanceTimersByTime(180));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+
+    fireEvent.click(screen.getByRole('button', { name: '进入编程' }));
+    fireEvent.pointerEnter(screen.getByTestId('peek-titlebar'));
+    act(() => vi.advanceTimersByTime(180));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'true');
+    fireEvent.pointerLeave(screen.getByTestId('peek-titlebar'));
+    act(() => vi.advanceTimersByTime(180));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+  });
+
+  it('retains the fixed expanded Canvas workspace sidebar', () => {
+    renderLayout('/image-canvas');
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-force-expanded', 'true');
+    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
+    fireEvent.focus(screen.getByTestId('peek-trigger'));
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
+    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-force-expanded', 'true');
+  });
 });