diff --git a/desktop/src/components/layout/AppShell.tsx b/desktop/src/components/layout/AppShell.tsx
index 37e3e10e..44245885 100644
--- a/desktop/src/components/layout/AppShell.tsx
+++ b/desktop/src/components/layout/AppShell.tsx
@@ -14,6 +14,7 @@ import { useTranslation } from '../../i18n'
 
 export function AppShell() {
   const fetchSettings = useSettingsStore((s) => s.fetchAll)
+  const sidebarOpen = useUIStore((s) => s.sidebarOpen)
   const [ready, setReady] = useState(false)
   const [startupError, setStartupError] = useState<string | null>(null)
   const t = useTranslation()
@@ -94,9 +95,19 @@ export function AppShell() {
   }
 
   return (
-    <div className="h-screen flex overflow-hidden">
-      <Sidebar />
-      <main id="content-area" className="flex-1 flex flex-col overflow-hidden">
+    <div className="h-screen flex overflow-hidden bg-[var(--color-surface)]">
+      <div
+        data-testid="sidebar-shell"
+        data-state={sidebarOpen ? 'open' : 'closed'}
+        className="sidebar-shell"
+      >
+        <Sidebar />
+      </div>
+      <main
+        id="content-area"
+        data-sidebar-state={sidebarOpen ? 'open' : 'closed'}
+        className="min-w-0 flex-1 flex flex-col overflow-hidden"
+      >
         <TabBar />
         <ContentRouter />
       </main>
diff --git a/desktop/src/components/layout/Sidebar.test.tsx b/desktop/src/components/layout/Sidebar.test.tsx
index a44f04ae..48bd620a 100644
--- a/desktop/src/components/layout/Sidebar.test.tsx
+++ b/desktop/src/components/layout/Sidebar.test.tsx
@@ -25,6 +25,8 @@ vi.mock('../../i18n', () => ({
       'sidebar.timeGroup.last30days': 'Last 30 Days',
       'sidebar.timeGroup.older': 'Older',
       'sidebar.missingDir': 'Missing',
+      'sidebar.collapse': 'Collapse sidebar',
+      'sidebar.expand': 'Expand sidebar',
     }
 
     return translations[key] ?? key
@@ -70,6 +72,7 @@ describe('Sidebar', () => {
       disconnectSession,
     } as Partial<ReturnType<typeof useChatStore.getState>>)
     useUIStore.setState({
+      sidebarOpen: true,
       addToast,
     } as Partial<ReturnType<typeof useUIStore.getState>>)
   })
@@ -155,4 +158,25 @@ describe('Sidebar', () => {
     expect(useTabStore.getState().tabs).toEqual([])
     expect(useTabStore.getState().activeTabId).toBeNull()
   })
+
+  it('collapses into an icon rail and expands back', async () => {
+    render(<Sidebar />)
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Collapse sidebar' }))
+    })
+
+    expect(useUIStore.getState().sidebarOpen).toBe(false)
+    expect(screen.queryByPlaceholderText('Search sessions')).not.toBeInTheDocument()
+    expect(screen.getByRole('complementary')).toHaveAttribute('data-state', 'closed')
+    expect(screen.getByTestId('sidebar-expand-button')).toHaveClass('sidebar-toggle-button--collapsed')
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Expand sidebar' }))
+    })
+
+    expect(useUIStore.getState().sidebarOpen).toBe(true)
+    expect(screen.getByPlaceholderText('Search sessions')).toBeInTheDocument()
+    expect(screen.getByRole('complementary')).toHaveAttribute('data-state', 'open')
+  })
 })
diff --git a/desktop/src/components/layout/Sidebar.tsx b/desktop/src/components/layout/Sidebar.tsx
index 1eeef738..3599f2b2 100644
--- a/desktop/src/components/layout/Sidebar.tsx
+++ b/desktop/src/components/layout/Sidebar.tsx
@@ -22,6 +22,8 @@ export function Sidebar() {
   const deleteSession = useSessionStore((s) => s.deleteSession)
   const renameSession = useSessionStore((s) => s.renameSession)
   const addToast = useUIStore((s) => s.addToast)
+  const sidebarOpen = useUIStore((s) => s.sidebarOpen)
+  const toggleSidebar = useUIStore((s) => s.toggleSidebar)
   const activeTabId = useTabStore((s) => s.activeTabId)
   const closeTab = useTabStore((s) => s.closeTab)
   const disconnectSession = useChatStore((s) => s.disconnectSession)
@@ -34,7 +36,11 @@ export function Sidebar() {
     fetchSessions()
   }, [fetchSessions])
 
-  // Close context menu on click outside
+  useEffect(() => {
+    if (!contextMenu || sidebarOpen) return
+    setContextMenu(null)
+  }, [contextMenu, sidebarOpen])
+
   useEffect(() => {
     if (!contextMenu) return
     const close = () => setContextMenu(null)
@@ -42,7 +48,6 @@ export function Sidebar() {
     return () => document.removeEventListener('click', close)
   }, [contextMenu])
 
-  // Filter by selected projects, then by search query
   const filteredSessions = useMemo(() => {
     let result = sessions
     if (selectedProjects.length > 0) {
@@ -55,7 +60,6 @@ export function Sidebar() {
     return result
   }, [sessions, selectedProjects, searchQuery])
 
-  // Group by time
   const timeGroups = useMemo(() => groupByTime(filteredSessions), [filteredSessions])
 
   const handleContextMenu = useCallback((e: React.MouseEvent, id: string) => {
@@ -103,7 +107,7 @@ export function Sidebar() {
 
   const t = useTranslation()
 
-  const TIME_GROUP_LABELS: Record<TimeGroup, string> = {
+  const timeGroupLabels: Record<TimeGroup, string> = {
     today: t('sidebar.timeGroup.today'),
     yesterday: t('sidebar.timeGroup.yesterday'),
     last7days: t('sidebar.timeGroup.last7days'),
@@ -112,32 +116,56 @@ export function Sidebar() {
   }
 
   return (
-    <aside onMouseDown={handleSidebarDrag} className="w-[var(--sidebar-width)] h-full flex flex-col bg-[var(--color-surface-sidebar)] border-r border-[var(--color-border)] select-none">
-      {/* Brand logo — extra top padding in desktop to clear macOS traffic lights (not needed on Windows) */}
-      <div className={`px-3 pb-1.5 flex items-center justify-between ${isTauri && !isWindows ? 'pt-[44px]' : 'pt-3'}`}>
-        <div className="flex items-center gap-2.5">
-          <img src="/app-icon.jpg" alt="" className="h-8 w-8 rounded-lg flex-shrink-0" />
-          <span className="text-[13px] font-semibold tracking-tight text-[var(--color-text-primary)]" style={{ fontFamily: 'var(--font-headline)' }}>
-            Claude Code <span className="text-[var(--color-primary-container)]">Haha</span>
-          </span>
+    <aside
+      onMouseDown={handleSidebarDrag}
+      className="sidebar-panel relative h-full flex flex-col bg-[var(--color-surface-sidebar)] border-r border-[var(--color-border)] select-none"
+      data-state={sidebarOpen ? 'open' : 'closed'}
+      aria-label="Sidebar"
+    >
+      <div className={`px-3 pb-2 ${isTauri && !isWindows ? 'pt-[44px]' : 'pt-3'}`}>
+        <div className={`flex ${sidebarOpen ? 'items-center justify-between gap-3' : 'flex-col items-center gap-2'}`}>
+          <div className={`flex min-w-0 items-center ${sidebarOpen ? 'gap-2.5' : 'justify-center'}`}>
+            <img src="/app-icon.jpg" alt="" className="h-8 w-8 rounded-lg flex-shrink-0" />
+            <span
+              className={`sidebar-copy ${sidebarOpen ? 'sidebar-copy--visible' : 'sidebar-copy--hidden'} text-[13px] font-semibold tracking-tight text-[var(--color-text-primary)]`}
+              style={{ fontFamily: 'var(--font-headline)' }}
+            >
+              Claude Code <span className="text-[var(--color-primary-container)]">Haha</span>
+            </span>
+          </div>
+          <div className={`flex items-center ${sidebarOpen ? 'gap-1.5' : 'flex-col gap-2'}`}>
+            <a
+              href="https://github.com/NanmiCoder/cc-haha"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={`sidebar-copy ${sidebarOpen ? 'sidebar-copy--visible' : 'sidebar-copy--hidden'} inline-flex items-center justify-center rounded-md p-1 text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]`}
+              title="GitHub"
+              tabIndex={sidebarOpen ? undefined : -1}
+              aria-hidden={!sidebarOpen}
+            >
+              <GitHubIcon />
+            </a>
+            <button
+              type="button"
+              onClick={toggleSidebar}
+              data-testid={sidebarOpen ? 'sidebar-collapse-button' : 'sidebar-expand-button'}
+              className={`sidebar-toggle-button ${sidebarOpen ? 'sidebar-toggle-button--open h-8 w-8' : 'sidebar-toggle-button--collapsed h-8 w-8'} flex items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-sidebar)]`}
+              aria-label={sidebarOpen ? t('sidebar.collapse') : t('sidebar.expand')}
+              title={sidebarOpen ? t('sidebar.collapse') : t('sidebar.expand')}
+            >
+              <SidebarToggleIcon collapsed={!sidebarOpen} />
+            </button>
+          </div>
         </div>
-        <a
-          href="https://github.com/NanmiCoder/cc-haha"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="rounded-md p-1 text-[var(--color-text-tertiary)] transition-colors hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]"
-          title="GitHub"
-        >
-          <GitHubIcon />
-        </a>
       </div>
-      {/* Navigation */}
-      <div className="px-3 pb-3 flex flex-col gap-0.5">
+
+      <div className={`px-3 pb-3 flex flex-col ${sidebarOpen ? 'gap-0.5' : 'items-center gap-2'}`}>
         <NavItem
           active={false}
+          collapsed={!sidebarOpen}
+          label={t('sidebar.newSession')}
           onClick={async () => {
             try {
-              // Use current active session's workDir as default for new session
               const currentTabId = useTabStore.getState().activeTabId
               const currentSession = currentTabId
                 ? useSessionStore.getState().sessions.find((s) => s.id === currentTabId)
@@ -149,8 +177,7 @@ export function Sidebar() {
             } catch (error) {
               addToast({
                 type: 'error',
-                message:
-                  error instanceof Error ? error.message : t('sidebar.sessionListFailed'),
+                message: error instanceof Error ? error.message : t('sidebar.sessionListFailed'),
               })
             }
           }}
@@ -160,6 +187,8 @@ export function Sidebar() {
         </NavItem>
         <NavItem
           active={activeTabId === SCHEDULED_TAB_ID}
+          collapsed={!sidebarOpen}
+          label={t('sidebar.scheduled')}
           onClick={() => useTabStore.getState().openTab(SCHEDULED_TAB_ID, t('sidebar.scheduled'), 'scheduled')}
           icon={<ClockIcon />}
         >
@@ -167,108 +196,124 @@ export function Sidebar() {
         </NavItem>
       </div>
 
-      {/* Project filter */}
-      <div className="px-3 pb-1 flex items-center justify-between">
-        <ProjectFilter />
-      </div>
-
-      {/* Search */}
-      <div className="px-3 pb-2">
-        <input
-          id="sidebar-search"
-          type="text"
-          placeholder={t('sidebar.searchPlaceholder')}
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="w-full h-7 px-2 text-xs rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] outline-none focus:border-[var(--color-border-focus)]"
-        />
-      </div>
-
-      {/* Session list — grouped by time */}
-      <div className="flex-1 overflow-y-auto px-3">
-        {error && (
-          <div className="mx-1 mt-2 rounded-[var(--radius-md)] border border-[var(--color-error)]/20 bg-[var(--color-error)]/5 px-3 py-2">
-            <div className="text-xs font-medium text-[var(--color-error)]">{t('sidebar.sessionListFailed')}</div>
-            <div className="mt-1 text-[11px] text-[var(--color-text-secondary)] break-words">{error}</div>
-            <button
-              onClick={() => fetchSessions()}
-              className="mt-2 text-[11px] font-medium text-[var(--color-brand)] hover:underline"
-            >
-              {t('common.retry')}
-            </button>
-          </div>
-        )}
-        {filteredSessions.length === 0 && (
-          <div className="px-3 py-4 text-xs text-[var(--color-text-tertiary)] text-center">
-            {searchQuery ? t('sidebar.noMatching') : t('sidebar.noSessions')}
-          </div>
-        )}
-        {TIME_GROUP_ORDER.map((group) => {
-          const items = timeGroups.get(group)
-          if (!items || items.length === 0) return null
-          return (
-            <div key={group} className="mb-1">
-              <div className="px-2 pt-3 pb-1 text-[11px] font-semibold text-[var(--color-text-tertiary)] tracking-wide">
-                {TIME_GROUP_LABELS[group]}
-              </div>
-              {items.map((session) => (
-                <div key={session.id} className="relative">
-                  {renamingId === session.id ? (
-                    <input
-                      autoFocus
-                      value={renameValue}
-                      onChange={(e) => setRenameValue(e.target.value)}
-                      onBlur={handleFinishRename}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter') handleFinishRename()
-                        if (e.key === 'Escape') { setRenamingId(null); setRenameValue('') }
-                      }}
-                      className="w-full px-3 py-2 text-sm rounded-[var(--radius-md)] border border-[var(--color-border-focus)] bg-[var(--color-surface)] text-[var(--color-text-primary)] outline-none ml-1"
-                    />
-                  ) : (
-                    <button
-                      onClick={() => {
-                        useTabStore.getState().openTab(session.id, session.title)
-                        useChatStore.getState().connectToSession(session.id)
-                      }}
-                      onContextMenu={(e) => handleContextMenu(e, session.id)}
-                      className={`
-                        w-full flex items-center gap-2 pl-4 pr-3 py-1.5 text-sm text-left rounded-[var(--radius-md)] transition-colors duration-200 group
-                        ${session.id === activeTabId
-                          ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
-                          : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
-                        }
-                      `}
-                    >
-                      <span className="w-1 h-1 rounded-full flex-shrink-0" style={{
-                        backgroundColor: session.id === activeTabId ? 'var(--color-brand)' : 'var(--color-text-tertiary)',
-                        opacity: session.id === activeTabId ? 1 : 0.5,
-                      }} />
-                      <span className="truncate flex-1">{session.title || 'Untitled'}</span>
-                      {!session.workDirExists && (
-                        <span
-                          className="text-[10px] text-[var(--color-warning)] flex-shrink-0"
-                          title={session.workDir ?? ''}
-                        >
-                          {t('sidebar.missingDir')}
-                        </span>
-                      )}
-                      <span className="text-[10px] text-[var(--color-text-tertiary)] flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
-                        {formatRelativeTime(session.modifiedAt)}
-                      </span>
-                    </button>
-                  )}
-                </div>
-              ))}
+      {sidebarOpen ? (
+        <>
+          <div className="sidebar-section sidebar-section--visible flex-none px-3 pb-1">
+            <div className="flex items-center justify-between">
+              <ProjectFilter />
             </div>
-          )
-        })}
-      </div>
+          </div>
 
-      {/* Settings button at bottom */}
-      <div className="p-3 border-t border-[var(--color-border)]">
+          <div className="sidebar-section sidebar-section--visible flex-none px-3 pb-2">
+            <input
+              id="sidebar-search"
+              type="text"
+              placeholder={t('sidebar.searchPlaceholder')}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full h-8 px-2.5 text-xs rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] outline-none transition-colors focus:border-[var(--color-border-focus)]"
+            />
+          </div>
+
+          <div className="sidebar-section sidebar-section--visible flex-1 min-h-0">
+            <div className="flex-1 overflow-y-auto px-3">
+              {error && (
+                <div className="mx-1 mt-2 rounded-[var(--radius-md)] border border-[var(--color-error)]/20 bg-[var(--color-error)]/5 px-3 py-2">
+                  <div className="text-xs font-medium text-[var(--color-error)]">{t('sidebar.sessionListFailed')}</div>
+                  <div className="mt-1 text-[11px] text-[var(--color-text-secondary)] break-words">{error}</div>
+                  <button
+                    onClick={() => fetchSessions()}
+                    className="mt-2 text-[11px] font-medium text-[var(--color-brand)] hover:underline"
+                  >
+                    {t('common.retry')}
+                  </button>
+                </div>
+              )}
+              {filteredSessions.length === 0 && (
+                <div className="px-3 py-4 text-center text-xs text-[var(--color-text-tertiary)]">
+                  {searchQuery ? t('sidebar.noMatching') : t('sidebar.noSessions')}
+                </div>
+              )}
+              {TIME_GROUP_ORDER.map((group) => {
+                const items = timeGroups.get(group)
+                if (!items || items.length === 0) return null
+                return (
+                  <div key={group} className="mb-1">
+                    <div className="px-2 pb-1 pt-3 text-[11px] font-semibold tracking-wide text-[var(--color-text-tertiary)]">
+                      {timeGroupLabels[group]}
+                    </div>
+                    {items.map((session) => (
+                      <div key={session.id} className="relative">
+                        {renamingId === session.id ? (
+                          <input
+                            autoFocus
+                            value={renameValue}
+                            onChange={(e) => setRenameValue(e.target.value)}
+                            onBlur={handleFinishRename}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') handleFinishRename()
+                              if (e.key === 'Escape') {
+                                setRenamingId(null)
+                                setRenameValue('')
+                              }
+                            }}
+                            className="ml-1 w-full rounded-[var(--radius-md)] border border-[var(--color-border-focus)] bg-[var(--color-surface)] px-3 py-2 text-sm text-[var(--color-text-primary)] outline-none"
+                          />
+                        ) : (
+                          <button
+                            onClick={() => {
+                              useTabStore.getState().openTab(session.id, session.title)
+                              useChatStore.getState().connectToSession(session.id)
+                            }}
+                            onContextMenu={(e) => handleContextMenu(e, session.id)}
+                            className={`
+                              group w-full rounded-[var(--radius-md)] py-1.5 pl-4 pr-3 text-left text-sm transition-colors duration-200
+                              ${session.id === activeTabId
+                                ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
+                                : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
+                              }
+                            `}
+                          >
+                            <span className="flex items-center gap-2">
+                              <span
+                                className="h-1 w-1 flex-shrink-0 rounded-full"
+                                style={{
+                                  backgroundColor: session.id === activeTabId ? 'var(--color-brand)' : 'var(--color-text-tertiary)',
+                                  opacity: session.id === activeTabId ? 1 : 0.5,
+                                }}
+                              />
+                              <span className="flex-1 truncate">{session.title || 'Untitled'}</span>
+                              {!session.workDirExists && (
+                                <span
+                                  className="flex-shrink-0 text-[10px] text-[var(--color-warning)]"
+                                  title={session.workDir ?? ''}
+                                >
+                                  {t('sidebar.missingDir')}
+                                </span>
+                              )}
+                              <span className="flex-shrink-0 text-[10px] text-[var(--color-text-tertiary)] opacity-0 transition-opacity group-hover:opacity-100">
+                                {formatRelativeTime(session.modifiedAt)}
+                              </span>
+                            </span>
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="flex-1" aria-hidden="true" />
+      )}
+
+      <div className={`border-t border-[var(--color-border)] p-3 ${sidebarOpen ? '' : 'flex justify-center'}`}>
         <NavItem
           active={activeTabId === SETTINGS_TAB_ID}
+          collapsed={!sidebarOpen}
+          label={t('sidebar.settings')}
           onClick={() => useTabStore.getState().openTab(SETTINGS_TAB_ID, t('sidebar.settings'), 'settings')}
           icon={<span className="material-symbols-outlined text-[18px]">settings</span>}
         >
@@ -276,24 +321,23 @@ export function Sidebar() {
         </NavItem>
       </div>
 
-      {/* Context menu */}
-      {contextMenu && (
+      {contextMenu && sidebarOpen && (
         <div
-          className="fixed z-50 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] py-1 min-w-[140px]"
+          className="fixed z-50 min-w-[140px] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] py-1"
           style={{ left: contextMenu.x, top: contextMenu.y, boxShadow: 'var(--shadow-dropdown)' }}
         >
           <button
             onClick={() => {
-              const session = sessions.find(s => s.id === contextMenu.id)
+              const session = sessions.find((s) => s.id === contextMenu.id)
               handleStartRename(contextMenu.id, session?.title || '')
             }}
-            className="w-full px-3 py-1.5 text-xs text-left text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors"
+            className="w-full px-3 py-1.5 text-left text-xs text-[var(--color-text-primary)] transition-colors hover:bg-[var(--color-surface-hover)]"
           >
             {t('common.rename')}
           </button>
           <button
             onClick={() => handleDelete(contextMenu.id)}
-            className="w-full px-3 py-1.5 text-xs text-left text-[var(--color-error)] hover:bg-[var(--color-surface-hover)] transition-colors"
+            className="w-full px-3 py-1.5 text-left text-xs text-[var(--color-error)] transition-colors hover:bg-[var(--color-surface-hover)]"
           >
             {t('common.delete')}
           </button>
@@ -327,20 +371,41 @@ function groupByTime(sessions: SessionListItem[]): Map<TimeGroup, SessionListIte
   return groups
 }
 
-function NavItem({ active, onClick, icon, children }: { active: boolean; onClick: () => void; icon: React.ReactNode; children: React.ReactNode }) {
+function NavItem({
+  active,
+  collapsed,
+  label,
+  onClick,
+  icon,
+  children,
+}: {
+  active: boolean
+  collapsed: boolean
+  label: string
+  onClick: () => void
+  icon: React.ReactNode
+  children: React.ReactNode
+}) {
   return (
     <button
       onClick={onClick}
+      aria-label={label}
+      title={collapsed ? label : undefined}
       className={`
-        w-full flex items-center gap-2.5 px-3 py-2 text-sm rounded-[var(--radius-md)] transition-colors duration-200
+        flex items-center rounded-[var(--radius-md)] transition-all duration-200
+        ${collapsed ? 'h-10 w-10 justify-center px-0 py-0' : 'w-full gap-2.5 px-3 py-2 text-sm'}
         ${active
-          ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)] font-medium'
+          ? 'bg-[var(--color-surface-selected)] font-medium text-[var(--color-text-primary)] shadow-[0_8px_24px_rgba(15,23,42,0.08)]'
           : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
         }
       `}
     >
-      {icon}
-      {children}
+      <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center">
+        {icon}
+      </span>
+      <span className={`sidebar-copy ${collapsed ? 'sidebar-copy--hidden' : 'sidebar-copy--visible'}`}>
+        {children}
+      </span>
     </button>
   )
 }
@@ -382,3 +447,21 @@ function ClockIcon() {
     </svg>
   )
 }
+
+function SidebarToggleIcon({ collapsed }: { collapsed: boolean }) {
+  return (
+    <svg
+      width={collapsed ? 16 : 14}
+      height={collapsed ? 16 : 14}
+      viewBox="0 0 14 14"
+      fill="none"
+      className={`sidebar-toggle-icon ${collapsed ? 'sidebar-toggle-icon--collapsed' : 'sidebar-toggle-icon--open'}`}
+      aria-hidden="true"
+    >
+      <path
+        d={collapsed ? 'M5 3 9 7l-4 4' : 'M9 3 5 7l4 4'}
+        className="sidebar-toggle-chevron"
+      />
+    </svg>
+  )
+}
diff --git a/desktop/src/hooks/useKeyboardShortcuts.ts b/desktop/src/hooks/useKeyboardShortcuts.ts
index 2fc633b9..d2178760 100644
--- a/desktop/src/hooks/useKeyboardShortcuts.ts
+++ b/desktop/src/hooks/useKeyboardShortcuts.ts
@@ -7,6 +7,7 @@ import { useUIStore } from '../stores/uiStore'
 export function useKeyboardShortcuts() {
   const setActiveSession = useSessionStore((s) => s.setActiveSession)
   const setActiveView = useUIStore((s) => s.setActiveView)
+  const setSidebarOpen = useUIStore((s) => s.setSidebarOpen)
   const closeModal = useUIStore((s) => s.closeModal)
   const activeModal = useUIStore((s) => s.activeModal)
   const stopGeneration = useChatStore((s) => s.stopGeneration)
@@ -34,8 +35,12 @@ export function useKeyboardShortcuts() {
       // Cmd+K — Focus search (sidebar search input)
       if (meta && e.key === 'k') {
         e.preventDefault()
-        const searchInput = document.querySelector('aside input[type="text"]') as HTMLInputElement
-        searchInput?.focus()
+        setSidebarOpen(true)
+        requestAnimationFrame(() => {
+          const searchInput = document.querySelector('#sidebar-search') as HTMLInputElement | null
+          searchInput?.focus()
+          searchInput?.select()
+        })
       }
 
       // Escape — Close modal or clear state
@@ -56,5 +61,5 @@ export function useKeyboardShortcuts() {
 
     document.addEventListener('keydown', handler)
     return () => document.removeEventListener('keydown', handler)
-  }, [closeModal, setActiveSession, setActiveView, stopGeneration])
+  }, [closeModal, setActiveSession, setActiveView, setSidebarOpen, stopGeneration])
 }
diff --git a/desktop/src/i18n/locales/en.ts b/desktop/src/i18n/locales/en.ts
index 6131a5ed..c7d877d7 100644
--- a/desktop/src/i18n/locales/en.ts
+++ b/desktop/src/i18n/locales/en.ts
@@ -31,6 +31,8 @@ export const en = {
   'sidebar.timeGroup.last7days': 'Last 7 days',
   'sidebar.timeGroup.last30days': 'Last 30 days',
   'sidebar.timeGroup.older': 'Older',
+  'sidebar.collapse': 'Collapse sidebar',
+  'sidebar.expand': 'Expand sidebar',
 
   // ─── Title Bar ──────────────────────────────────────
   'titlebar.code': 'Code',
diff --git a/desktop/src/i18n/locales/zh.ts b/desktop/src/i18n/locales/zh.ts
index 1fbb596d..f22512e2 100644
--- a/desktop/src/i18n/locales/zh.ts
+++ b/desktop/src/i18n/locales/zh.ts
@@ -33,6 +33,8 @@ export const zh: Record<TranslationKey, string> = {
   'sidebar.timeGroup.last7days': '最近 7 天',
   'sidebar.timeGroup.last30days': '最近 30 天',
   'sidebar.timeGroup.older': '更早',
+  'sidebar.collapse': '折叠侧边栏',
+  'sidebar.expand': '展开侧边栏',
 
   // ─── Title Bar ──────────────────────────────────────
   'titlebar.code': '代码',
diff --git a/desktop/src/theme/globals.css b/desktop/src/theme/globals.css
index d1340de7..a24d6125 100644
--- a/desktop/src/theme/globals.css
+++ b/desktop/src/theme/globals.css
@@ -146,8 +146,11 @@
 
   /* Layout dimensions */
   --sidebar-width: 280px;
+  --sidebar-rail-width: 72px;
   --titlebar-height: 40px;
   --statusbar-height: 36px;
+  --motion-sidebar-duration: 280ms;
+  --motion-sidebar-easing: cubic-bezier(0.22, 1, 0.36, 1);
 
   /* Surface aliases */
   --color-surface-sidebar: var(--color-surface-container-low);
@@ -424,6 +427,151 @@ button, input, textarea, select, a, [role="button"] {
   box-shadow: var(--shadow-focus-ring), var(--shadow-dropdown);
 }
 
+.sidebar-shell {
+  width: var(--sidebar-width);
+  flex-shrink: 0;
+  overflow: hidden;
+  transition: width var(--motion-sidebar-duration) var(--motion-sidebar-easing);
+  will-change: width;
+}
+
+.sidebar-shell[data-state="closed"] {
+  width: var(--sidebar-rail-width);
+}
+
+.sidebar-panel {
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  transition:
+    background-color var(--motion-sidebar-duration) var(--motion-sidebar-easing),
+    border-color var(--motion-sidebar-duration) var(--motion-sidebar-easing);
+}
+
+.sidebar-panel[data-state="closed"] {
+  width: var(--sidebar-rail-width);
+  min-width: var(--sidebar-rail-width);
+}
+
+.sidebar-toggle-button {
+  color: color-mix(in srgb, var(--color-text-secondary) 72%, transparent);
+  background: transparent;
+  transition:
+    color 180ms ease,
+    background-color 180ms ease,
+    transform 180ms ease;
+  border: 0;
+  box-shadow: none;
+}
+
+.sidebar-toggle-button:hover {
+  color: color-mix(in srgb, var(--color-text-primary) 88%, transparent);
+  background: color-mix(in srgb, var(--color-surface-hover) 34%, transparent);
+}
+
+.sidebar-toggle-button:active {
+  transform: translateY(0.5px);
+  background: color-mix(in srgb, var(--color-surface-hover) 54%, transparent);
+}
+
+.sidebar-toggle-button--open {
+  color: color-mix(in srgb, var(--color-text-secondary) 68%, transparent);
+}
+
+.sidebar-toggle-button--open:hover {
+  color: color-mix(in srgb, var(--color-text-primary) 82%, transparent);
+}
+
+.sidebar-toggle-button--collapsed {
+  color: color-mix(in srgb, var(--color-text-primary) 78%, transparent);
+}
+
+.sidebar-toggle-button--collapsed:hover {
+  color: var(--color-text-primary);
+}
+
+.sidebar-toggle-button--collapsed:active {
+}
+
+.sidebar-toggle-icon {
+  overflow: visible;
+}
+
+.sidebar-toggle-chevron {
+  stroke: currentColor;
+  transition:
+    opacity 180ms ease,
+    transform 180ms ease;
+  vector-effect: non-scaling-stroke;
+}
+
+.sidebar-toggle-chevron {
+  opacity: 0.95;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.85;
+  transform-origin: 50% 50%;
+}
+
+.sidebar-toggle-icon--open .sidebar-toggle-chevron {
+  transform: translateX(-0.2px);
+}
+
+.sidebar-toggle-button--collapsed .sidebar-toggle-chevron {
+  stroke-width: 2;
+  transform: translateX(0.4px);
+}
+
+.sidebar-copy {
+  overflow: hidden;
+  white-space: nowrap;
+  transition:
+    max-width var(--motion-sidebar-duration) var(--motion-sidebar-easing),
+    opacity calc(var(--motion-sidebar-duration) - 40ms) ease,
+    transform var(--motion-sidebar-duration) var(--motion-sidebar-easing);
+}
+
+.sidebar-copy--visible {
+  max-width: 240px;
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.sidebar-copy--hidden {
+  max-width: 0;
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+.sidebar-section {
+  overflow: hidden;
+  transition:
+    max-height var(--motion-sidebar-duration) var(--motion-sidebar-easing),
+    opacity calc(var(--motion-sidebar-duration) - 40ms) ease,
+    transform var(--motion-sidebar-duration) var(--motion-sidebar-easing);
+}
+
+.sidebar-section--visible {
+  max-height: 1200px;
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.sidebar-section--hidden {
+  max-height: 0;
+  opacity: 0;
+  transform: translateX(-12px);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-shell,
+  .sidebar-panel,
+  .sidebar-copy,
+  .sidebar-section {
+    transition-duration: 0.01ms !important;
+  }
+}
+
 .markdown-prose .md-table-wrap table {
   border-collapse: separate;
   border-spacing: 0;