Major UI refresh: sidebar redesign, theme expansion, and chat performance optimizations (#706)

## Summary
Complete sidebar redesign and comprehensive UI polish pass with performance optimizations, theme system refinements, and desktop integration improvements.

## Key Changes

**Sidebar & Navigation Redesign**
- Redesigned sessions sidebar layout with unified button primitives
- Added activity sections with project grouping and improved session organization
- Refined sidebar corners, spacing, and visual hierarchy
- Removed NavRail component in favor of streamlined sidebar
- Stabilized sessions bar toggle position in fullscreen mode

**Performance Optimizations**
- Reduced chat streaming CPU usage and storage churn
- Optimized task tool polling and live timers with debouncing
- Prevented chat state races and reduced background request load
- Debounced draft writes and coalesced session reloads
- Optimized message store updates and turn tracking

**Theme & Visual System**
- Added theme-aware window corners (desktop) and border radius tokens
- Introduced glassmorphism effects on desktop sidebar
- Added backdrop blur to UI elements

**Chat Experience**
- Added session-based permission auto-accept toggle in chat input
- Polished permission shield UX with improved icon sizing and spacing
- Fixed chat scroll-to-bottom behavior and timeline tracking
- Enhanced tool output display with better path label detection
- Removed duplicate draft context details in chat header
- Added text selection menu to chat messages

**Git Improvements**
- Refreshed git history visual design with cleaner dividers
- Added remote removal action in sync selector
- Stabilized git polling to prevent excessive requests
- Improved tool output rendering for git operations

**Settings & Panels**
- Fixed mobile scrolling on settings pages
- Made outside-click settings close instantly
- Reduced settings load churn and CPU spikes
- Improved services dropdown layout and spacing
- Softened panel resize handles

**Desktop Integration**
- Synced macOS window theme with app theme
- Restored window dragging in sidebar header zones
- Fixed system window corners on macOS
- Improved header session metadata and action controls

**Button & Component Standardization**
- Unified button primitives across all components
- Standardized destructive action patterns
- Removed unused button variants (button-large, button-small)
- Aligned context tab close hit areas

---------

Co-authored-by: Iuliia Ivashko <yulia.ivashko@gmail.com>

packages/ui/src/components/session/SessionFolderItem.tsx

@@ -148,8 +148,8 @@ const SessionFolderItemBase = <TSessionNode,>({
       <div
         ref={droppableRef}
         className={cn(
-          'group/folder flex items-center justify-between gap-1.5 py-1 min-w-0 rounded-sm',
-          'hover:bg-interactive-hover/50 cursor-pointer',
+          'group/folder relative flex items-center justify-between gap-1.5 py-1 min-w-0 rounded-md',
+          'cursor-pointer',
           isDropTarget && 'bg-primary/10 ring-1 ring-inset ring-primary/30',
         )}
         onClick={renaming ? undefined : onToggle}
@@ -167,7 +167,12 @@ const SessionFolderItemBase = <TSessionNode,>({
         }
         aria-label={isCollapsed ? `Expand folder ${folder.name}` : `Collapse folder ${folder.name}`}
       >
-        <div className="min-w-0 flex items-center gap-1.5 pl-1.5 flex-1">
+        <div className={cn(
+          'min-w-0 flex items-center gap-1.5 pl-1.5 flex-1 transition-[padding]',
+          archivedBucket
+            ? (mobileVariant ? 'pr-7' : 'group-hover/folder:pr-7 group-focus-within/folder:pr-7')
+            : '',
+        )}>
           <FolderIcon className={cn('h-3.5 w-3.5 flex-shrink-0', isDropTarget ? 'text-primary' : 'text-muted-foreground')} />
 
           {renaming ? (
@@ -243,15 +248,16 @@ const SessionFolderItemBase = <TSessionNode,>({
         </div>
 
         {/* Action buttons */}
-        {!renaming && !hideActions ? (
+        {!renaming && (!hideActions || archivedBucket) ? (
           <div className="flex items-center gap-0.5 px-0.5">
             <div
               className={cn(
                 'flex items-center gap-0.5 transition-opacity',
                 mobileVariant ? 'opacity-100' : 'opacity-0 group-hover/folder:opacity-100 group-focus-within/folder:opacity-100',
+                archivedBucket && 'absolute right-0.5 top-1/2 z-10 -translate-y-1/2 px-0',
               )}
             >
-              {onNewSession ? (
+              {!archivedBucket && onNewSession ? (
                 <button
                   type="button"
                   onClick={(event) => {
@@ -266,7 +272,7 @@ const SessionFolderItemBase = <TSessionNode,>({
                 </button>
               ) : null}
               {/* Only allow sub-folders at depth 0 (one level deep max) */}
-              {onNewSubFolder && depth === 0 ? (
+              {!archivedBucket && onNewSubFolder && depth === 0 ? (
                 <button
                   type="button"
                   onClick={(event) => {
@@ -280,17 +286,19 @@ const SessionFolderItemBase = <TSessionNode,>({
                   <RiFolderAddLine className="h-3.5 w-3.5" />
                 </button>
               ) : null}
-              <button
-                type="button"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  handleStartRename();
-                }}
-                className="inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-                aria-label={`Rename folder ${folder.name}`}
-              >
-                <RiPencilAiLine className="h-3.5 w-3.5" />
-              </button>
+              {!archivedBucket ? (
+                <button
+                  type="button"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    handleStartRename();
+                  }}
+                  className="inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                  aria-label={`Rename folder ${folder.name}`}
+                >
+                  <RiPencilAiLine className="h-3.5 w-3.5" />
+                </button>
+              ) : null}
               <button
                 type="button"
                 onClick={(event) => {
@@ -298,7 +306,7 @@ const SessionFolderItemBase = <TSessionNode,>({
                   onDelete();
                 }}
                 className="inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-                aria-label={`Delete folder ${folder.name}`}
+                aria-label={archivedBucket ? `Delete archived sessions in folder ${folder.name}` : `Delete folder ${folder.name}`}
               >
                 <RiDeleteBinLine className="h-3.5 w-3.5" />
               </button>

packages/ui/src/components/session/SessionSidebar.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { Session } from '@opencode-ai/sdk/v2';
+import { RiLayoutLeftLine } from '@remixicon/react';
 import { toast } from '@/components/ui';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { isDesktopLocalOriginActive, isDesktopShell, isTauriShell } from '@/lib/desktop';
 import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
 import { sessionEvents } from '@/lib/sessionEvents';
@@ -9,10 +11,8 @@ import { useSessionStore } from '@/stores/useSessionStore';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
 import { useProjectsStore } from '@/stores/useProjectsStore';
 import { useUIStore } from '@/stores/useUIStore';
-import { useConfigStore } from '@/stores/useConfigStore';
 import type { GitHubPullRequestStatus } from '@/lib/api/types';
 import { getSafeStorage } from '@/stores/utils/safeStorage';
-import { createWorktreeSession } from '@/lib/worktreeSessionCreator';
 import { useGitStore } from '@/stores/useGitStore';
 import { useDeviceInfo } from '@/lib/device';
 import { isVSCodeRuntime } from '@/lib/desktop';
@@ -35,10 +35,14 @@ import { useProjectSessionLists } from './sidebar/hooks/useProjectSessionLists';
 import { useSessionFolderCleanup } from './sidebar/hooks/useSessionFolderCleanup';
 import { useStickyProjectHeaders } from './sidebar/hooks/useStickyProjectHeaders';
 import { useGitHubPrStatusStore } from '@/stores/useGitHubPrStatusStore';
+import { ProjectEditDialog } from '@/components/layout/ProjectEditDialog';
 import { SessionGroupSection } from './sidebar/SessionGroupSection';
 import { SidebarHeader } from './sidebar/SidebarHeader';
+import { SidebarActivitySections } from './sidebar/SidebarActivitySections';
+import { SidebarFooter } from './sidebar/SidebarFooter';
 import { SidebarProjectsList } from './sidebar/SidebarProjectsList';
 import { SessionNodeItem } from './sidebar/SessionNodeItem';
+import type { SortableDragHandleProps } from './sidebar/sortableItems';
 import {
   FolderDeleteConfirmDialog,
   SessionDeleteConfirmDialog,
@@ -46,6 +50,13 @@ import {
   type DeleteSessionConfirmState,
 } from './sidebar/ConfirmDialogs';
 import { type SessionGroup, type SessionNode } from './sidebar/types';
+import {
+  addActiveNowSession,
+  deriveActiveNowSessions,
+  persistActiveNowEntries,
+  pruneActiveNowEntries,
+  readActiveNowEntries,
+} from './sidebar/activitySections';
 import {
   compareSessionsByPinnedAndTime,
   formatProjectLabel,
@@ -130,7 +141,6 @@ interface SessionSidebarProps {
   onSessionSelected?: (sessionId: string) => void;
   allowReselect?: boolean;
   hideDirectoryControls?: boolean;
-  hideProjectSelector?: boolean;
   showOnlyMainWorkspace?: boolean;
 }
 
@@ -139,7 +149,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   onSessionSelected,
   allowReselect = false,
   hideDirectoryControls = false,
-  hideProjectSelector = true,
   showOnlyMainWorkspace = false,
 }) => {
   const [isSessionSearchOpen, setIsSessionSearchOpen] = React.useState(false);
@@ -148,13 +157,13 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   const sessionSearchInputRef = React.useRef<HTMLInputElement | null>(null);
   const [editingId, setEditingId] = React.useState<string | null>(null);
   const [editTitle, setEditTitle] = React.useState('');
-  const [editingProjectId, setEditingProjectId] = React.useState<string | null>(null);
-  const [editProjectTitle, setEditProjectTitle] = React.useState('');
+  const [editingProjectDialogId, setEditingProjectDialogId] = React.useState<string | null>(null);
   const [expandedParents, setExpandedParents] = React.useState<Set<string>>(new Set());
   const [directoryStatus, setDirectoryStatus] = React.useState<Map<string, 'unknown' | 'exists' | 'missing'>>(
     () => new Map(),
   );
   const safeStorage = React.useMemo(() => getSafeStorage(), []);
+  const [activeNowEntries, setActiveNowEntries] = React.useState(() => readActiveNowEntries(safeStorage));
   const [collapsedProjects, setCollapsedProjects] = React.useState<Set<string>>(new Set());
 
   const [projectRepoStatus, setProjectRepoStatus] = React.useState<Map<string, boolean | null>>(new Map());
@@ -162,7 +171,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   const [hoveredProjectId, setHoveredProjectId] = React.useState<string | null>(null);
   const [newWorktreeDialogOpen, setNewWorktreeDialogOpen] = React.useState(false);
   const [projectNotesPanelOpen, setProjectNotesPanelOpen] = React.useState(false);
-  const [openMenuSessionId, setOpenMenuSessionId] = React.useState<string | null>(null);
+  const [openSidebarMenuKey, setOpenSidebarMenuKey] = React.useState<string | null>(null);
   const [renamingFolderId, setRenamingFolderId] = React.useState<string | null>(null);
   const [renameFolderDraft, setRenameFolderDraft] = React.useState('');
   const [deleteSessionConfirm, setDeleteSessionConfirm] = React.useState<DeleteSessionConfirmState>(null);
@@ -228,8 +237,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     }
   });
 
-  const [isProjectRenameInline, setIsProjectRenameInline] = React.useState(false);
-  const [projectRenameDraft, setProjectRenameDraft] = React.useState('');
   const [projectRootBranches, setProjectRootBranches] = React.useState<Map<string, string>>(new Map());
   const projectHeaderSentinelRefs = React.useRef<Map<string, HTMLDivElement | null>>(new Map());
   const ignoreIntersectionUntil = React.useRef<number>(0);
@@ -243,17 +250,21 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   const addProject = useProjectsStore((state) => state.addProject);
   const removeProject = useProjectsStore((state) => state.removeProject);
   const setActiveProjectIdOnly = useProjectsStore((state) => state.setActiveProjectIdOnly);
-  const renameProject = useProjectsStore((state) => state.renameProject);
+  const updateProjectMeta = useProjectsStore((state) => state.updateProjectMeta);
+  const reorderProjects = useProjectsStore((state) => state.reorderProjects);
 
   const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
   const openContextPanelTab = useUIStore((state) => state.openContextPanelTab);
+  const setSettingsDialogOpen = useUIStore((state) => state.setSettingsDialogOpen);
+  const toggleHelpDialog = useUIStore((state) => state.toggleHelpDialog);
+  const setAboutDialogOpen = useUIStore((state) => state.setAboutDialogOpen);
   const deviceInfo = useDeviceInfo();
   const setSessionSwitcherOpen = useUIStore((state) => state.setSessionSwitcherOpen);
+  const toggleSidebar = useUIStore((state) => state.toggleSidebar);
   const openMultiRunLauncher = useUIStore((state) => state.openMultiRunLauncher);
   const notifyOnSubtasks = useUIStore((state) => state.notifyOnSubtasks);
   const showDeletionDialog = useUIStore((state) => state.showDeletionDialog);
   const setShowDeletionDialog = useUIStore((state) => state.setShowDeletionDialog);
-  const settingsAutoCreateWorktree = useConfigStore((state) => state.settingsAutoCreateWorktree);
 
   const debouncedSessionSearchQuery = useDebouncedValue(sessionSearchQuery, 120);
   const normalizedSessionSearchQuery = React.useMemo(
@@ -307,8 +318,89 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
 
   const tauriIpcAvailable = React.useMemo(() => isTauriShell(), []);
   const isDesktopShellRuntime = React.useMemo(() => isDesktopShell(), []);
+  const [isDesktopWindowFullscreen, setIsDesktopWindowFullscreen] = React.useState(false);
 
   const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
+  const isMacPlatform = React.useMemo(() => {
+    if (typeof navigator === 'undefined') {
+      return false;
+    }
+    return /Macintosh|Mac OS X/.test(navigator.userAgent || '');
+  }, []);
+  const showDesktopSidebarChrome = !mobileVariant && !isVSCode;
+  const desktopSidebarTopPaddingClass = isDesktopShellRuntime && isMacPlatform && !isDesktopWindowFullscreen ? 'pl-[5.5rem]' : 'pl-3';
+  const desktopSidebarToggleButtonClass = 'app-region-no-drag inline-flex h-8 w-8 items-center justify-center rounded-md typography-ui-label font-medium text-foreground transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50';
+
+  React.useEffect(() => {
+    if (!isDesktopShellRuntime || !isMacPlatform) {
+      setIsDesktopWindowFullscreen(false);
+      return;
+    }
+
+    let disposed = false;
+    let unlistenResize: (() => void) | null = null;
+
+    const syncFullscreenState = async () => {
+      try {
+        const { getCurrentWindow } = await import('@tauri-apps/api/window');
+        const currentWindow = getCurrentWindow();
+        const fullscreen = await currentWindow.isFullscreen();
+        if (!disposed) {
+          setIsDesktopWindowFullscreen(fullscreen);
+        }
+      } catch {
+        if (!disposed) {
+          setIsDesktopWindowFullscreen(false);
+        }
+      }
+    };
+
+    const attach = async () => {
+      try {
+        const { getCurrentWindow } = await import('@tauri-apps/api/window');
+        const currentWindow = getCurrentWindow();
+        unlistenResize = await currentWindow.onResized(() => {
+          void syncFullscreenState();
+        });
+      } catch {
+        // Ignore listener setup failures; fallback state remains false.
+      }
+    };
+
+    void syncFullscreenState();
+    void attach();
+
+    return () => {
+      disposed = true;
+      if (unlistenResize) {
+        unlistenResize();
+      }
+    };
+  }, [isDesktopShellRuntime, isMacPlatform]);
+
+  const handleDesktopSidebarDragStart = React.useCallback(async (event: React.MouseEvent) => {
+    const target = event.target as HTMLElement;
+    if (target.closest('.app-region-no-drag')) {
+      return;
+    }
+    if (target.closest('button, a, input, select, textarea')) {
+      return;
+    }
+    if (event.button !== 0) {
+      return;
+    }
+    if (!isDesktopShellRuntime) {
+      return;
+    }
+
+    try {
+      const { getCurrentWindow } = await import('@tauri-apps/api/window');
+      const appWindow = getCurrentWindow();
+      await appWindow.startDragging();
+    } catch (error) {
+      console.error('Failed to start window dragging:', error);
+    }
+  }, [isDesktopShellRuntime]);
 
   const {
     buildGroupSearchText,
@@ -359,11 +451,93 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     return [...sessions].sort((a, b) => compareSessionsByPinnedAndTime(a, b, pinnedSessionIds));
   }, [sessions, pinnedSessionIds]);
 
-  useSessionPrefetch({
-    currentSessionId,
-    sortedSessions,
-    loadMessages,
-  });
+  const allKnownSessionsById = React.useMemo(() => {
+    const next = new Map<string, Session>();
+    [...sessions, ...archivedSessions].forEach((session) => {
+      next.set(session.id, session);
+    });
+    return next;
+  }, [sessions, archivedSessions]);
+
+  React.useEffect(() => {
+    const pruned = pruneActiveNowEntries(activeNowEntries, allKnownSessionsById);
+    if (pruned.length === activeNowEntries.length && pruned.every((entry, index) => entry.sessionId === activeNowEntries[index]?.sessionId)) {
+      return;
+    }
+    setActiveNowEntries(pruned);
+    persistActiveNowEntries(safeStorage, pruned);
+  }, [activeNowEntries, allKnownSessionsById, safeStorage]);
+
+  const previousStreamingIdsRef = React.useRef<Set<string>>(new Set());
+  React.useEffect(() => {
+    const nextStreamingIds = new Set<string>();
+    sessionStatus?.forEach((status, sessionId) => {
+      if (status?.type === 'busy' || status?.type === 'retry') {
+        nextStreamingIds.add(sessionId);
+      }
+    });
+
+    const previousStreamingIds = previousStreamingIdsRef.current;
+    const startedStreamingIds = Array.from(nextStreamingIds).filter((sessionId) => !previousStreamingIds.has(sessionId));
+    if (startedStreamingIds.length > 0) {
+      setActiveNowEntries((prev) => {
+        const next = startedStreamingIds.reduce((entries, sessionId) => addActiveNowSession(entries, sessionId), prev);
+        if (next === prev) {
+          return prev;
+        }
+        persistActiveNowEntries(safeStorage, next);
+        return next;
+      });
+    }
+
+    previousStreamingIdsRef.current = nextStreamingIds;
+  }, [sessionStatus, safeStorage]);
+
+  React.useEffect(() => {
+    const busyIds: string[] = [];
+    sessionStatus?.forEach((status, sessionId) => {
+      if (status?.type === 'busy' || status?.type === 'retry') {
+        busyIds.push(sessionId);
+      }
+    });
+
+    if (busyIds.length === 0) {
+      return;
+    }
+
+    setActiveNowEntries((prev) => {
+      const known = new Set(prev.map((entry) => entry.sessionId));
+      let next = prev;
+      let changed = false;
+
+      busyIds.forEach((sessionId) => {
+        if (known.has(sessionId)) {
+          return;
+        }
+
+        const session = allKnownSessionsById.get(sessionId);
+        if (!session || session.time?.archived) {
+          return;
+        }
+
+        const isSubtask = Boolean((session as Session & { parentID?: string | null }).parentID);
+        if (isSubtask) {
+          return;
+        }
+
+        next = addActiveNowSession(next, sessionId);
+        known.add(sessionId);
+        changed = true;
+      });
+
+      if (!changed) {
+        return prev;
+      }
+
+      persistActiveNowEntries(safeStorage, next);
+      return next;
+    });
+  }, [sessionStatus, allKnownSessionsById, safeStorage]);
 
   const childrenMap = React.useMemo(() => {
     const map = new Map<string, Session[]>();
@@ -394,17 +568,21 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     </div>
   );
 
-  const handleSaveProjectEdit = React.useCallback(() => {
-    if (editingProjectId && editProjectTitle.trim()) {
-      renameProject(editingProjectId, editProjectTitle.trim());
-      setEditingProjectId(null);
-      setEditProjectTitle('');
-    }
-  }, [editingProjectId, editProjectTitle, renameProject]);
+  const editingProject = React.useMemo(
+    () => projects.find((project) => project.id === editingProjectDialogId) ?? null,
+    [projects, editingProjectDialogId],
+  );
 
-  const handleCancelProjectEdit = React.useCallback(() => {
-    setEditingProjectId(null);
-    setEditProjectTitle('');
+  const handleSaveProjectEdit = React.useCallback((data: { label: string; icon: string | null; color: string | null; iconBackground: string | null }) => {
+    if (!editingProjectDialogId) {
+      return;
+    }
+    updateProjectMeta(editingProjectDialogId, data);
+    setEditingProjectDialogId(null);
+  }, [editingProjectDialogId, updateProjectMeta]);
+
+  const openNewWorktreeDialog = React.useCallback(() => {
+    setNewWorktreeDialogOpen(true);
   }, []);
 
   const deleteSession = useSessionStore((state) => state.deleteSession);
@@ -569,6 +747,10 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
         path: string;
         label?: string;
         normalizedPath: string;
+        icon?: string;
+        color?: string;
+        iconImage?: { mime: string; updatedAt: number; source: 'custom' | 'auto' };
+        iconBackground?: string;
       }>;
   }, [projects]);
 
@@ -627,7 +809,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     searchMatchCount,
   } = useSessionSidebarSections({
     normalizedProjects,
-    activeProjectId,
     getSessionsForProject,
     getArchivedSessionsForProject,
     availableWorktreesByProject,
@@ -671,7 +852,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   const stableActiveProjectIsRepo = activeProjectForHeader && projectRepoStatus.has(activeProjectForHeader.id)
     ? activeProjectIsRepo
     : lastRepoStatusRef.current;
-  const reserveHeaderActionsSpace = Boolean(activeProjectForHeader);
+  const reserveHeaderActionsSpace = true;
   const useMobileNotesPanel = mobileVariant || deviceInfo.isMobile;
 
   React.useEffect(() => {
@@ -687,7 +868,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     setActiveSessionByProject,
     currentSessionId,
     handleSessionSelect,
-    isVSCode,
     newSessionDraftOpen,
     mobileVariant,
     openNewSessionDraft,
@@ -698,30 +878,141 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   });
 
   const { getOrderedGroups } = useGroupOrdering(groupOrderByProject);
+  const hasInitializedArchivedCollapseRef = React.useRef(false);
 
-  const handleStartInlineProjectRename = React.useCallback(() => {
-    if (!activeProjectForHeader) {
+  React.useEffect(() => {
+    if (hasInitializedArchivedCollapseRef.current || projectSections.length === 0) {
       return;
     }
-    setProjectRenameDraft(formatProjectLabel(
-      activeProjectForHeader.label?.trim()
-      || formatDirectoryName(activeProjectForHeader.normalizedPath, homeDirectory)
-      || activeProjectForHeader.normalizedPath,
-    ));
-    setIsProjectRenameInline(true);
-  }, [activeProjectForHeader, homeDirectory]);
+    const archivedGroupKeys = projectSections.flatMap((section) =>
+      section.groups
+        .filter((group) => group.isArchivedBucket)
+        .map((group) => `${section.project.id}:${group.id}`),
+    );
+    if (archivedGroupKeys.length > 0) {
+      setCollapsedGroups((prev) => new Set([...prev, ...archivedGroupKeys]));
+    }
+    hasInitializedArchivedCollapseRef.current = true;
+  }, [projectSections]);
 
-  const handleSaveInlineProjectRename = React.useCallback(() => {
-    if (!activeProjectForHeader) {
-      return;
+  const sessionSidebarMetaById = React.useMemo(() => {
+    const meta = new Map<string, {
+      node: SessionNode;
+      projectId: string | null;
+      groupDirectory: string | null;
+      secondaryMeta: {
+        projectLabel?: string | null;
+        branchLabel?: string | null;
+      } | null;
+    }>();
+
+    projectSections.forEach((section) => {
+      const projectLabel = formatProjectLabel(
+        section.project.label?.trim()
+        || formatDirectoryName(section.project.normalizedPath, homeDirectory)
+        || section.project.normalizedPath,
+      );
+      section.groups.forEach((group) => {
+        const secondaryMeta = group.branch && group.branch !== projectLabel
+          ? { projectLabel, branchLabel: group.branch }
+          : { projectLabel, branchLabel: null };
+
+        const visit = (nodes: SessionNode[]) => {
+          nodes.forEach((node) => {
+            meta.set(node.session.id, {
+              node,
+              projectId: section.project.id,
+              groupDirectory: group.directory,
+              secondaryMeta,
+            });
+            if (node.children.length > 0) {
+              visit(node.children);
+            }
+          });
+        };
+
+        visit(group.sessions);
+      });
+    });
+
+    return meta;
+  }, [projectSections, homeDirectory]);
+
+  const activeNowSessions = React.useMemo(
+    () => deriveActiveNowSessions(activeNowEntries, new Map(sessions.map((session) => [session.id, session]))),
+    [activeNowEntries, sessions],
+  );
+
+  useSessionPrefetch({
+    currentSessionId,
+    sortedSessions,
+    recentSessionIds: activeNowSessions.map((session) => session.id),
+    loadMessages,
+  });
+
+  const activitySections = React.useMemo(() => {
+    const toItem = (session: Session) => {
+      const existing = sessionSidebarMetaById.get(session.id);
+      const sessionDirectory = normalizePath((session as Session & { directory?: string | null }).directory ?? null);
+      return {
+        node: existing?.node ?? { session, children: [], worktree: null },
+        projectId: existing?.projectId ?? null,
+        groupDirectory: existing?.groupDirectory ?? sessionDirectory,
+        secondaryMeta: existing?.secondaryMeta ?? null,
+      };
+    };
+
+    return [
+      { key: 'active-now' as const, title: 'recent', items: activeNowSessions.map(toItem) },
+    ];
+  }, [activeNowSessions, sessionSidebarMetaById]);
+
+  const activitySessionIds = React.useMemo(() => {
+    const next = new Set<string>();
+    activitySections.forEach((section) => {
+      section.items.forEach((item) => {
+        next.add(item.node.session.id);
+      });
+    });
+    return next;
+  }, [activitySections]);
+
+  const filteredProjectSections = React.useMemo(() => {
+    if (hasSessionSearchQuery || activitySessionIds.size === 0) {
+      return projectSections;
     }
-    const trimmed = projectRenameDraft.trim();
-    if (!trimmed) {
-      return;
+
+    const filterNodes = (nodes: SessionNode[]): SessionNode[] => {
+      return nodes.flatMap((node) => {
+        if (activitySessionIds.has(node.session.id)) {
+          return [];
+        }
+        return [{
+          ...node,
+          children: filterNodes(node.children),
+        }];
+      });
+    };
+
+    return projectSections.map((section) => ({
+      ...section,
+      groups: section.groups.map((group) => ({
+        ...group,
+        sessions: filterNodes(group.sessions),
+      })),
+    }));
+  }, [hasSessionSearchQuery, activitySessionIds, projectSections]);
+
+  const filteredSectionsForRender = React.useMemo(() => {
+    if (hasSessionSearchQuery || activitySessionIds.size === 0) {
+      return sectionsForRender;
     }
-    renameProject(activeProjectForHeader.id, trimmed);
-    setIsProjectRenameInline(false);
-  }, [activeProjectForHeader, projectRenameDraft, renameProject]);
+
+    const sectionsByProjectId = new Map(filteredProjectSections.map((section) => [section.project.id, section]));
+    return sectionsForRender
+      .map((section) => sectionsByProjectId.get(section.project.id) ?? section)
+      .filter(Boolean);
+  }, [hasSessionSearchQuery, activitySessionIds, filteredProjectSections, sectionsForRender]);
 
   const desktopHeaderActionButtonClass =
     'inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md leading-none text-foreground hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed';
@@ -729,14 +1020,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     'inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md leading-none text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed';
   const headerActionButtonClass = mobileVariant ? mobileHeaderActionButtonClass : desktopHeaderActionButtonClass;
   const headerActionIconClass = 'h-4.5 w-4.5';
-  const addProjectButtonClass = cn(
-    'inline-flex cursor-pointer items-center justify-center rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed',
-    mobileVariant
-      ? 'h-8 w-8 text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50'
-      : 'h-8 w-8 text-foreground hover:bg-interactive-hover',
-    !isDesktopShellRuntime && 'bg-transparent hover:bg-sidebar/40',
-  );
-
   const stuckProjectHeaders = useStickyProjectHeaders({
     isDesktopShellRuntime,
     projectSections,
@@ -750,6 +1033,8 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       groupDirectory?: string | null,
       projectId?: string | null,
       archivedBucket = false,
+      secondaryMeta?: { projectLabel?: string | null; branchLabel?: string | null } | null,
+      renderContext: 'project' | 'recent' = 'project',
     ): React.ReactNode => (
       <SessionNodeItem
         node={node}
@@ -782,8 +1067,8 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
         copiedSessionId={copiedSessionId}
         handleCopyShareUrl={handleCopyShareUrl}
         handleUnshareSession={handleUnshareSession}
-        openMenuSessionId={openMenuSessionId}
-        setOpenMenuSessionId={setOpenMenuSessionId}
+        openSidebarMenuKey={openSidebarMenuKey}
+        setOpenSidebarMenuKey={setOpenSidebarMenuKey}
         renamingFolderId={renamingFolderId}
         getFoldersForScope={getFoldersForScope}
         getSessionFolderId={getSessionFolderId}
@@ -794,6 +1079,8 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
         handleDeleteSession={handleDeleteSession}
         mobileVariant={mobileVariant}
         renderSessionNode={renderSessionNode}
+        secondaryMeta={secondaryMeta}
+        renderContext={renderContext}
       />
     ),
     [
@@ -822,8 +1109,8 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       copiedSessionId,
       handleCopyShareUrl,
       handleUnshareSession,
-      openMenuSessionId,
-      setOpenMenuSessionId,
+      openSidebarMenuKey,
+      setOpenSidebarMenuKey,
       renamingFolderId,
       getFoldersForScope,
       getSessionFolderId,
@@ -898,7 +1185,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   }, [prStatusEntries]);
 
   const renderGroupSessions = React.useCallback(
-    (group: SessionGroup, groupKey: string, projectId?: string | null, hideGroupLabel?: boolean) => (
+    (group: SessionGroup, groupKey: string, projectId?: string | null, hideGroupLabel?: boolean, dragHandleProps?: SortableDragHandleProps | null) => (
       <SessionGroupSection
         group={group}
         groupKey={groupKey}
@@ -937,6 +1224,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
         pinnedSessionIds={pinnedSessionIds}
         prVisualStateByDirectoryBranch={prVisualStateByDirectoryBranch}
         onToggleCollapsedGroup={toggleCollapsedGroup}
+        dragHandleProps={dragHandleProps}
       />
     ),
     [
@@ -972,44 +1260,62 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     ],
   );
 
-  const isInlineEditing = Boolean(renamingFolderId || editingId || editingProjectId);
+  const topContent = !hasSessionSearchQuery ? (
+    <SidebarActivitySections
+      sections={activitySections}
+      renderSessionNode={renderSessionNode}
+    />
+  ) : null;
+  const isInlineEditing = Boolean(renamingFolderId || editingId || editingProjectDialogId);
+  const handleSidebarNewSession = React.useCallback(() => {
+    setActiveMainTab('chat');
+    if (mobileVariant) {
+      setSessionSwitcherOpen(false);
+    }
+    openNewSessionDraft();
+  }, [mobileVariant, openNewSessionDraft, setActiveMainTab, setSessionSwitcherOpen]);
 
   return (
     <div
       ref={sessionSearchContainerRef}
       className={cn(
-        'flex h-full flex-col text-foreground overflow-x-hidden',
+        'relative flex h-full flex-col text-foreground overflow-x-hidden',
         mobileVariant ? '' : 'bg-transparent',
       )}
     >
+      {showDesktopSidebarChrome ? (
+        <div
+          onMouseDown={handleDesktopSidebarDragStart}
+          className={cn(
+            'app-region-drag flex h-[var(--oc-header-height,56px)] flex-shrink-0 items-center pr-3',
+            desktopSidebarTopPaddingClass,
+          )}
+        >
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                onClick={toggleSidebar}
+                className={desktopSidebarToggleButtonClass}
+                aria-label="Close sessions"
+              >
+                <RiLayoutLeftLine className="h-[18px] w-[18px]" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Close sessions</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      ) : null}
+
       <SidebarHeader
         hideDirectoryControls={hideDirectoryControls}
-        hideProjectSelector={hideProjectSelector}
-        activeProjectForHeader={activeProjectForHeader}
-        homeDirectory={homeDirectory}
-        normalizedProjects={normalizedProjects}
-        activeProjectId={activeProjectId}
-        setActiveProjectIdOnly={setActiveProjectIdOnly}
-        isProjectRenameInline={isProjectRenameInline}
-        setIsProjectRenameInline={setIsProjectRenameInline}
-        handleStartInlineProjectRename={handleStartInlineProjectRename}
-        handleSaveInlineProjectRename={handleSaveInlineProjectRename}
-        projectRenameDraft={projectRenameDraft}
-        setProjectRenameDraft={setProjectRenameDraft}
-        removeProject={removeProject}
         handleOpenDirectoryDialog={handleOpenDirectoryDialog}
-        addProjectButtonClass={addProjectButtonClass}
+        handleNewSession={handleSidebarNewSession}
         headerActionIconClass={headerActionIconClass}
         reserveHeaderActionsSpace={reserveHeaderActionsSpace}
-        stableActiveProjectIsRepo={stableActiveProjectIsRepo}
-        useMobileNotesPanel={useMobileNotesPanel}
-        projectNotesPanelOpen={projectNotesPanelOpen}
-        setProjectNotesPanelOpen={setProjectNotesPanelOpen}
-        activeProjectRefForHeader={activeProjectRefForHeader}
-        openMultiRunLauncher={openMultiRunLauncher}
         headerActionButtonClass={headerActionButtonClass}
-        setNewWorktreeDialogOpen={setNewWorktreeDialogOpen}
-        setActiveMainTab={setActiveMainTab}
         isSessionSearchOpen={isSessionSearchOpen}
         setIsSessionSearchOpen={setIsSessionSearchOpen}
         sessionSearchInputRef={sessionSearchInputRef}
@@ -1020,8 +1326,9 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       />
 
       <SidebarProjectsList
-        sectionsForRender={sectionsForRender}
-        projectSections={projectSections}
+        topContent={topContent}
+        sectionsForRender={filteredSectionsForRender}
+        projectSections={filteredProjectSections}
         activeProjectId={activeProjectId}
         showOnlyMainWorkspace={showOnlyMainWorkspace}
         hasSessionSearchQuery={hasSessionSearchQuery}
@@ -1042,22 +1349,43 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
         setActiveMainTab={setActiveMainTab}
         setSessionSwitcherOpen={setSessionSwitcherOpen}
         openNewSessionDraft={openNewSessionDraft}
-        createWorktreeSession={createWorktreeSession}
+        openNewWorktreeDialog={openNewWorktreeDialog}
         openMultiRunLauncher={openMultiRunLauncher}
-        setEditingProjectId={setEditingProjectId}
-        setEditProjectTitle={setEditProjectTitle}
-        editingProjectId={editingProjectId}
-        editProjectTitle={editProjectTitle}
-        handleSaveProjectEdit={handleSaveProjectEdit}
-        handleCancelProjectEdit={handleCancelProjectEdit}
+        openProjectEditDialog={setEditingProjectDialogId}
         removeProject={removeProject}
         projectHeaderSentinelRefs={projectHeaderSentinelRefs}
-        settingsAutoCreateWorktree={settingsAutoCreateWorktree}
+        reorderProjects={reorderProjects}
         getOrderedGroups={getOrderedGroups}
         setGroupOrderByProject={setGroupOrderByProject}
+        openSidebarMenuKey={openSidebarMenuKey}
+        setOpenSidebarMenuKey={setOpenSidebarMenuKey}
         isInlineEditing={isInlineEditing}
       />
 
+      <SidebarFooter
+        onOpenSettings={() => setSettingsDialogOpen(true)}
+        onOpenShortcuts={toggleHelpDialog}
+        onOpenAbout={() => setAboutDialogOpen(true)}
+      />
+
+      {editingProject ? (
+        <ProjectEditDialog
+          open={Boolean(editingProject)}
+          onOpenChange={(open) => {
+            if (!open) {
+              setEditingProjectDialogId(null);
+            }
+          }}
+          projectId={editingProject.id}
+          projectName={editingProject.label || formatDirectoryName(editingProject.path, homeDirectory)}
+          projectPath={editingProject.path}
+          initialIcon={editingProject.icon}
+          initialColor={editingProject.color}
+          initialIconBackground={editingProject.iconBackground}
+          onSave={handleSaveProjectEdit}
+        />
+      ) : null}
+
       <NewWorktreeDialog
         open={newWorktreeDialogOpen}
         onOpenChange={setNewWorktreeDialogOpen}

packages/ui/src/components/session/sidebar/DOCUMENTATION.md

@@ -3,24 +3,29 @@
 ## Refactor result
 
 - `SessionSidebar.tsx` now acts mainly as orchestration; core logic moved to focused hooks/components.
-- Sidebar behavior stays intact: global+archived session grouping, folder operations, delete/archive semantics, project/worktree rendering, and search.
-- Recent migration gaps were fixed (persistence + repo-status hooks fully wired).
+- Sidebar is now a single multi-project tree: `recent` top section, then projects, then worktrees/archived groups, then sessions.
+- `NavRail` is no longer part of sidebar/navigation flow.
+- Project headers now own root sessions directly; there is no separate rendered `project root` subgroup.
+- Active/hover row styling is text-first; selected sessions use primary text instead of background fills.
+- Archived groups are collapsed by default and support bulk deletion at group/folder level.
+- Session rows support compact inline dates in minimal mode and simplified metadata in default mode.
 - New extractions in latest pass reduced local effect/callback bulk further:
   - project session list builders
   - folder cleanup sync
   - sticky project header observer
-- Baseline checks pass after refactor: `type-check`, `lint`, `build`.
 
 ## File summaries
 
 ### Components
 
-- `SidebarHeader.tsx`: Top header UI (project selector/rename, search, add/open actions, notes/worktree entry points).
-- `SidebarProjectsList.tsx`: Main scrollable list renderer for project sections/groups, empty states, and project-level interactions.
-- `SessionGroupSection.tsx`: Renders a single group (root sessions + folders), collapse/expand, and group-level controls.
-- `SessionNodeItem.tsx`: Renders one session row/tree node with metadata, menu actions, inline rename, and nested children.
+- `SidebarHeader.tsx`: Top header UI for add-project, session search, and display mode.
+- `SidebarActivitySections.tsx`: Global top section renderer; currently used for the `recent` section only.
+- `SidebarFooter.tsx`: Static footer with icon-only settings, shortcuts, and about actions.
+- `SidebarProjectsList.tsx`: Main scrollable tree renderer for projects, root sessions, worktrees/groups, and empty/search states.
+- `SessionGroupSection.tsx`: Renders a single worktree/archived group, collapse/expand, folder subtree, and group-level controls.
+- `SessionNodeItem.tsx`: Renders one session row/tree node with inline metadata, menu actions, minimal/default variants, and nested children.
 - `ConfirmDialogs.tsx`: Shared confirm dialog wrappers for session delete and folder delete flows.
-- `sortableItems.tsx`: DnD sortable wrappers for project and group ordering with drag handles/overlays.
+- `sortableItems.tsx`: DnD sortable wrappers for project and group ordering plus project-row action affordances.
 - `sessionFolderDnd.tsx`: Folder/session DnD scope and wrappers for dropping/moving sessions into folders.
 
 ### Hooks
@@ -32,7 +37,7 @@
 - `hooks/useSessionGrouping.ts`: Builds grouped session structures and search text/filter helpers.
 - `hooks/useSessionSidebarSections.ts`: Composes final per-project sections and group search metadata for rendering.
 - `hooks/useProjectSessionSelection.ts`: Resolves active/current project-session selection logic and session-directory context.
-- `hooks/useGroupOrdering.ts`: Applies persisted/custom group order with stable fallback ordering.
+- `hooks/useGroupOrdering.ts`: Applies persisted/custom group order with stable fallback ordering; archived groups are reorderable.
 - `hooks/useArchivedAutoFolders.ts`: Maintains archived auto-folder structure and assignment behavior.
 - `hooks/useSidebarPersistence.ts`: Persists sidebar UI state (expanded/collapsed/pinned/group order/active session) to storage + desktop settings.
 - `hooks/useProjectRepoStatus.ts`: Tracks per-project git-repo state and root branch metadata.
@@ -43,4 +48,5 @@
 ### Types and utilities
 
 - `types.ts`: Shared sidebar types (`SessionNode`, `SessionGroup`, summary/search metadata).
-- `utils.tsx`: Shared sidebar utilities (path normalization, sorting, dedupe, archived scope keys, project relation checks, text highlight, labels).
+- `activitySections.ts`: Persisted top-section storage/helpers for the current `recent` session list.
+- `utils.tsx`: Shared sidebar utilities (path normalization, sorting, dedupe, archived scope keys, project relation checks, text highlight, labels, compact/default date formatting).

packages/ui/src/components/session/sidebar/SessionGroupSection.tsx

@@ -15,9 +15,11 @@ import { sessionEvents } from '@/lib/sessionEvents';
 import type { MainTab } from '@/stores/useUIStore';
 import { SessionFolderItem } from '../SessionFolderItem';
 import { DroppableFolderWrapper, SessionFolderDndScope } from './sessionFolderDnd';
+import type { SortableDragHandleProps } from './sortableItems';
 import type { GroupSearchData, SessionGroup, SessionNode } from './types';
 import { compareSessionsByPinnedAndTime, isBranchDifferentFromLabel, normalizePath, renderHighlightedText } from './utils';
 import type { SessionFolder } from '@/stores/useSessionFoldersStore';
+import { useSessionDisplayStore } from '@/stores/useSessionDisplayStore';
 
 type DeleteFolderConfirm = {
   scopeKey: string;
@@ -45,7 +47,7 @@ type Props = {
   deleteFolder: (scopeKey: string, folderId: string) => void;
   showDeletionDialog: boolean;
   setDeleteFolderConfirm: React.Dispatch<React.SetStateAction<DeleteFolderConfirm>>;
-  renderSessionNode: (node: SessionNode, depth?: number, groupDirectory?: string | null, projectId?: string | null, archivedBucket?: boolean) => React.ReactNode;
+  renderSessionNode: (node: SessionNode, depth?: number, groupDirectory?: string | null, projectId?: string | null, archivedBucket?: boolean, secondaryMeta?: { projectLabel?: string | null; branchLabel?: string | null } | null) => React.ReactNode;
   currentSessionDirectory: string | null;
   projectRepoStatus: Map<string, boolean | null>;
   lastRepoStatus: boolean;
@@ -87,6 +89,7 @@ type Props = {
     } | null;
   }>;
   onToggleCollapsedGroup: (groupKey: string) => void;
+  dragHandleProps?: SortableDragHandleProps | null;
 };
 
 export function SessionGroupSection(props: Props): React.ReactNode {
@@ -109,7 +112,6 @@ export function SessionGroupSection(props: Props): React.ReactNode {
     showDeletionDialog,
     setDeleteFolderConfirm,
     renderSessionNode,
-    currentSessionDirectory,
     projectRepoStatus,
     lastRepoStatus,
     toggleGroupSessionLimit,
@@ -128,9 +130,12 @@ export function SessionGroupSection(props: Props): React.ReactNode {
     pinnedSessionIds,
     prVisualStateByDirectoryBranch,
     onToggleCollapsedGroup,
+    dragHandleProps,
   } = props;
 
   const searchData = hasSessionSearchQuery ? groupSearchDataByGroup.get(group) : null;
+  const displayMode = useSessionDisplayStore((state) => state.displayMode);
+  const isMinimalMode = displayMode === 'minimal';
   const isExpanded = expandedSessionGroups.has(groupKey);
   const isCollapsed = hasSessionSearchQuery ? false : collapsedGroups.has(groupKey);
   const maxVisible = hideDirectoryControls ? 10 : 5;
@@ -204,24 +209,17 @@ export function SessionGroupSection(props: Props): React.ReactNode {
   };
 
   const allGroupSessions = collectGroupSessions(sourceGroupNodes);
-  const normalizedGroupDirectory = normalizePath(group.directory ?? null);
   const isGitProject = projectId && projectRepoStatus.has(projectId)
     ? Boolean(projectRepoStatus.get(projectId))
     : lastRepoStatus;
-  const isActiveGroup = Boolean(
-    normalizedGroupDirectory
-      && currentSessionDirectory
-      && normalizedGroupDirectory === currentSessionDirectory,
-  );
   const groupDirectoryKey = normalizePath(group.directory ?? null);
   const groupBranchKey = group.branch?.trim() ?? null;
   const prIndicator = groupDirectoryKey && groupBranchKey
     ? (prVisualStateByDirectoryBranch.get(`${groupDirectoryKey}::${groupBranchKey}`) ?? null)
     : null;
   const showInlinePrTitle = Boolean(prIndicator && group.branch);
-  const showBranchSubtitle = !group.isMain && (isBranchDifferentFromLabel(group.branch, group.label) || Boolean(prIndicator));
+  const showBranchSubtitle = !prIndicator && !group.isMain && Boolean(group.branch);
   const prVisualState = prIndicator?.visualState ?? null;
-  const branchIconColor = prVisualState ? `var(--pr-${prVisualState})` : undefined;
   const checksSummary = prIndicator && prIndicator.state === 'open' && prIndicator.checks
     ? `${prIndicator.checks.success}/${prIndicator.checks.total} checks passed`
     : null;
@@ -241,6 +239,33 @@ export function SessionGroupSection(props: Props): React.ReactNode {
     : null;
   const baseBranchLabel = prIndicator?.base ?? null;
   const headBranchLabel = prIndicator?.head ?? null;
+  const statusLine = (() => {
+    if (!prIndicator) {
+      return group.branch && isBranchDifferentFromLabel(group.branch, group.label)
+        ? { label: group.branch, color: null as string | null }
+        : null;
+    }
+    switch (prIndicator.visualState) {
+      case 'merged':
+        return { label: 'Merged', color: 'var(--pr-merged)' };
+      case 'open':
+        return (prIndicator.canMerge === true || prIndicator.mergeableState === 'clean' || prIndicator.checks?.state === 'success')
+          ? { label: 'Ready to merge', color: 'var(--pr-open)' }
+          : { label: 'PR open', color: 'var(--pr-open)' };
+      case 'blocked':
+        return {
+          label: prIndicator.mergeableState === 'dirty' ? 'Merge conflicts' : 'Merge blocked',
+          color: 'var(--pr-blocked)',
+        };
+      case 'draft':
+        return { label: 'Draft PR', color: 'var(--pr-draft)' };
+      case 'closed':
+        return { label: 'Closed', color: 'var(--pr-closed)' };
+      default:
+        return null;
+    }
+  })();
+  const branchIconColor = statusLine?.color ?? (prVisualState ? `var(--pr-${prVisualState})` : undefined);
   const handlePrLinkClick = (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault();
     event.stopPropagation();
@@ -263,6 +288,15 @@ export function SessionGroupSection(props: Props): React.ReactNode {
     const subFolderItems = directSubFolders.length > 0
       ? <>{directSubFolders.map(({ folder: sf, nodes: sn }) => renderOneFolderItem(sf, sn, depth + 1))}</>
       : undefined;
+    const collectFolderSessions = (targetFolderId: string): Session[] => {
+      const directNodes = allFoldersForGroup.find(({ folder: candidate }) => candidate.id === targetFolderId)?.nodes ?? [];
+      const childFolders = allFoldersForGroup.filter(({ folder: candidate }) => candidate.parentId === targetFolderId);
+      return [
+        ...collectGroupSessions(directNodes),
+        ...childFolders.flatMap(({ folder: child }) => collectFolderSessions(child.id)),
+      ];
+    };
+    const folderSessionsForDelete = group.isArchivedBucket ? collectFolderSessions(folder.id) : [];
 
     return (
       <DroppableFolderWrapper key={folder.id} folderId={folder.id}>
@@ -277,6 +311,13 @@ export function SessionGroupSection(props: Props): React.ReactNode {
               if (folderScopeKey) renameFolder(folderScopeKey, folder.id, name);
             }}
             onDelete={() => {
+              if (group.isArchivedBucket) {
+                sessionEvents.requestDelete({
+                  sessions: folderSessionsForDelete,
+                  mode: 'session',
+                });
+                return;
+              }
               if (!folderScopeKey) return;
               if (!showDeletionDialog) {
                 deleteFolder(folderScopeKey, folder.id);
@@ -324,7 +365,7 @@ export function SessionGroupSection(props: Props): React.ReactNode {
               if (!folderScopeKey) return;
               createFolderAndStartRename(folderScopeKey, folder.id);
             } : undefined}
-            hideActions={group.isArchivedBucket === true}
+            hideActions={false}
             archivedBucket={group.isArchivedBucket === true}
           />
         )}
@@ -333,6 +374,16 @@ export function SessionGroupSection(props: Props): React.ReactNode {
   };
 
   const renderFolderItems = () => rootFolders.map(({ folder, nodes }) => renderOneFolderItem(folder, nodes, 0));
+  const hasWorktreeDeleteAction = Boolean(!group.isMain && group.worktree);
+  const groupHeaderRightPadding = mobileVariant
+    ? (hasWorktreeDeleteAction ? 'pr-14' : 'pr-7')
+    : isMinimalMode
+      ? (hasWorktreeDeleteAction
+          ? 'pr-10 group-hover/gh:pr-14 group-focus-within/gh:pr-14'
+          : 'pr-10')
+      : (hasWorktreeDeleteAction
+          ? 'pr-5 group-hover/gh:pr-14 group-focus-within/gh:pr-14'
+          : 'pr-5');
 
   const body = (
     <SessionFolderDndScope
@@ -371,13 +422,13 @@ export function SessionGroupSection(props: Props): React.ReactNode {
   );
 
   if (hideGroupLabel) {
-    return <div className="oc-group"><div className="oc-group-body pb-3">{body}</div></div>;
+    return <div className="oc-group"><div className="oc-group-body pb-3 pl-4">{body}</div></div>;
   }
 
   return (
     <div className="oc-group">
       <div
-        className={cn('group/gh relative flex items-center justify-between gap-1 py-1 min-w-0 rounded-sm', 'hover:bg-interactive-hover/50 cursor-pointer')}
+        className={cn('group/gh relative flex items-start justify-between gap-1 py-1 min-w-0 rounded-md', 'cursor-pointer')}
         onClick={() => onToggleCollapsedGroup(groupKey)}
         role="button"
         tabIndex={0}
@@ -388,78 +439,43 @@ export function SessionGroupSection(props: Props): React.ReactNode {
           }
         }}
         aria-label={isCollapsed ? `Expand ${group.label}` : `Collapse ${group.label}`}
+        aria-expanded={!isCollapsed}
       >
-        <div className={cn(
-          'min-w-0 flex items-center gap-1.5 pl-1.5 transition-[padding]',
-          mobileVariant
-            ? (!group.isMain && group.worktree ? 'pr-14' : 'pr-7')
-            : (!group.isMain && group.worktree ? 'group-hover/gh:pr-14 group-focus-within/gh:pr-14' : 'group-hover/gh:pr-7 group-focus-within/gh:pr-7'),
-        )}>
-          {group.isArchivedBucket ? (
-            <RiArchiveLine className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
-          ) : (!group.isMain || isGitProject) ? (
-            showInlinePrTitle && prIndicator ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="inline-flex">
-                    <RiGitBranchLine
-                      className="h-3.5 w-3.5 flex-shrink-0 translate-y-[0.5px] text-muted-foreground"
-                      style={branchIconColor ? { color: branchIconColor } : undefined}
-                    />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent side="top" sideOffset={6} align="start" className="max-w-sm">
-                  <div className="space-y-1 text-xs">
-                    {(baseBranchLabel || headBranchLabel) ? (
-                      <div className="text-muted-foreground truncate">
-                        {baseBranchLabel && headBranchLabel ? (
-                          <>
-                            <span>{baseBranchLabel}</span>
-                            <RiArrowLeftLongLine className="mx-0.5 inline h-3 w-3 align-[-2px]" />
-                            <span>{headBranchLabel}</span>
-                          </>
-                        ) : (
-                          <span>{baseBranchLabel ?? headBranchLabel ?? ''}</span>
-                        )}
-                      </div>
-                    ) : null}
-                    {mergeStateLabel ? <div className="text-muted-foreground truncate">{mergeStateLabel}</div> : null}
-                    {(mergeabilityLabel || checksSummary) ? (
-                      <div className="text-muted-foreground truncate">
-                        {mergeabilityLabel ?? ''}
-                        {mergeabilityLabel && checksSummary ? ' • ' : ''}
-                        {checksSummary ?? ''}
-                        {checksTail ? ` (${checksTail})` : ''}
-                      </div>
-                    ) : null}
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            ) : (
-              <RiGitBranchLine
-                className="h-3.5 w-3.5 flex-shrink-0 translate-y-[0.5px] text-muted-foreground"
-                style={branchIconColor ? { color: branchIconColor } : undefined}
-              />
-            )
-          ) : null}
-          <div className="min-w-0 flex flex-col justify-center">
-            <p className={cn('text-[14px] font-semibold truncate', isActiveGroup ? 'text-primary' : 'text-muted-foreground')}>
+        <div
+          ref={dragHandleProps?.setActivatorNodeRef}
+          className={cn(
+            'min-w-0 flex items-start gap-1 pl-0.5 transition-[padding] cursor-grab active:cursor-grabbing',
+            groupHeaderRightPadding,
+          )}
+          {...(dragHandleProps?.listeners ?? {})}
+        >
+          <div className="min-w-0 flex flex-col justify-center gap-0.5">
+            <p className="text-[14px] font-normal truncate text-foreground/92">
               {showInlinePrTitle && prIndicator ? (
-                <>
+                <span className="inline-flex min-w-0 max-w-full items-center">
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <span className="inline-flex items-baseline gap-1">
+                      <span className="inline-flex shrink-0 items-center gap-1 leading-none align-middle">
+                        <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+                          <RiGitBranchLine
+                            className="h-3.5 w-3.5 shrink-0 group-hover/gh:hidden"
+                            style={branchIconColor ? { color: branchIconColor } : undefined}
+                          />
+                          <span className="hidden text-muted-foreground group-hover/gh:inline-flex h-3.5 w-3.5 items-center justify-center">
+                            {isCollapsed ? <RiArrowRightSLine className="h-3.5 w-3.5" /> : <RiArrowDownSLine className="h-3.5 w-3.5" />}
+                          </span>
+                        </span>
                         {prIndicator.url ? (
                           <button
                             type="button"
-                            className="inline-flex items-baseline leading-none underline hover:no-underline"
+                            className="inline-flex shrink-0 items-center leading-none"
                             onMouseDown={(event) => event.stopPropagation()}
                             onClick={handlePrLinkClick}
                           >
                             #{prIndicator.number}
                           </button>
                         ) : (
-                          <span className="leading-none">#{prIndicator.number}</span>
+                          <span className="inline-flex shrink-0 items-center leading-none">#{prIndicator.number}</span>
                         )}
                       </span>
                     </TooltipTrigger>
@@ -490,42 +506,117 @@ export function SessionGroupSection(props: Props): React.ReactNode {
                       </div>
                     </TooltipContent>
                   </Tooltip>
-                  <span>{` ${group.branch}`}</span>
-                </>
+                  <span className="ml-1 min-w-0 flex-1 truncate leading-none align-middle">{group.branch}</span>
+                </span>
+              ) : group.isArchivedBucket ? (
+                <span className="inline-flex min-w-0 items-center gap-1">
+                  <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+                    <RiArchiveLine className="h-3.5 w-3.5 shrink-0 text-muted-foreground group-hover/gh:hidden" />
+                    <span className="hidden text-muted-foreground group-hover/gh:inline-flex h-3.5 w-3.5 items-center justify-center">
+                      {isCollapsed ? <RiArrowRightSLine className="h-3.5 w-3.5" /> : <RiArrowDownSLine className="h-3.5 w-3.5" />}
+                    </span>
+                  </span>
+                  <span className="truncate">{renderHighlightedText(group.label, normalizedSessionSearchQuery)}</span>
+                </span>
+              ) : (!group.isMain || group.worktree) ? (
+                <span className="inline-flex min-w-0 items-center gap-1">
+                  <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+                    <RiGitBranchLine
+                      className="h-3.5 w-3.5 shrink-0 text-muted-foreground group-hover/gh:hidden"
+                      style={branchIconColor ? { color: branchIconColor } : undefined}
+                    />
+                    <span className="hidden text-muted-foreground group-hover/gh:inline-flex h-3.5 w-3.5 items-center justify-center">
+                      {isCollapsed ? <RiArrowRightSLine className="h-3.5 w-3.5" /> : <RiArrowDownSLine className="h-3.5 w-3.5" />}
+                    </span>
+                  </span>
+                  <span className="truncate">{renderHighlightedText(group.label, normalizedSessionSearchQuery)}</span>
+                </span>
               ) : (
                 renderHighlightedText(group.label, normalizedSessionSearchQuery)
               )}
             </p>
-            {!showInlinePrTitle && showBranchSubtitle ? (
-              <span className="text-[10px] sm:text-[11px] text-muted-foreground/80 truncate leading-tight">
-                {prIndicator ? (
-                  <>
-                    {prIndicator.url ? (
-                      <button
-                        type="button"
-                        className="underline hover:no-underline"
-                        onMouseDown={(event) => event.stopPropagation()}
-                        onClick={handlePrLinkClick}
-                      >
-                        #{prIndicator.number}
-                      </button>
-                    ) : (
-                      <span>#{prIndicator.number}</span>
-                    )}
-                    {group.branch ? <span>{` ${group.branch}`}</span> : null}
-                  </>
-                ) : (
-                  group.branch
-                )}
+            {showBranchSubtitle && statusLine ? (
+              <span className="inline-flex min-w-0 items-center gap-1.5 leading-tight">
+                {group.isArchivedBucket ? (
+                  <RiArchiveLine className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
+                ) : (!group.isMain || isGitProject) ? (
+                  showInlinePrTitle && prIndicator ? (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span className="inline-flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
+                          <RiGitBranchLine
+                            className="h-3.5 w-3.5 text-muted-foreground"
+                            style={branchIconColor ? { color: branchIconColor } : undefined}
+                          />
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent side="top" sideOffset={6} align="start" className="max-w-sm">
+                        <div className="space-y-1 text-xs">
+                          {(baseBranchLabel || headBranchLabel) ? (
+                            <div className="text-muted-foreground truncate">
+                              {baseBranchLabel && headBranchLabel ? (
+                                <>
+                                  <span>{baseBranchLabel}</span>
+                                  <RiArrowLeftLongLine className="mx-0.5 inline h-3 w-3 align-[-2px]" />
+                                  <span>{headBranchLabel}</span>
+                                </>
+                              ) : (
+                                <span>{baseBranchLabel ?? headBranchLabel ?? ''}</span>
+                              )}
+                            </div>
+                          ) : null}
+                          {mergeStateLabel ? <div className="text-muted-foreground truncate">{mergeStateLabel}</div> : null}
+                          {(mergeabilityLabel || checksSummary) ? (
+                            <div className="text-muted-foreground truncate">
+                              {mergeabilityLabel ?? ''}
+                              {mergeabilityLabel && checksSummary ? ' • ' : ''}
+                              {checksSummary ?? ''}
+                              {checksTail ? ` (${checksTail})` : ''}
+                            </div>
+                          ) : null}
+                        </div>
+                      </TooltipContent>
+                    </Tooltip>
+                  ) : (
+                    <RiGitBranchLine
+                      className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground"
+                      style={branchIconColor ? { color: branchIconColor } : undefined}
+                    />
+                  )
+                ) : null}
+                <span
+                  className={cn('min-w-0 truncate text-[11px] font-medium', !statusLine.color && 'text-muted-foreground/80')}
+                  style={statusLine.color ? { color: statusLine.color } : undefined}
+                >
+                  {statusLine.label}
+                </span>
               </span>
             ) : null}
           </div>
-          {isCollapsed ? (
-            <RiArrowRightSLine className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
-          ) : (
-            <RiArrowDownSLine className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
-          )}
         </div>
+        {group.isArchivedBucket && allGroupSessions.length > 0 ? (
+          <div className={cn('absolute right-0.5 top-1/2 -translate-y-1/2 z-10 transition-opacity', mobileVariant ? 'opacity-100' : 'opacity-0 group-hover/gh:opacity-100 group-focus-within/gh:opacity-100')}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    sessionEvents.requestDelete({
+                      sessions: allGroupSessions,
+                      mode: 'session',
+                    });
+                  }}
+                  className="inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                  aria-label={`Delete archived sessions in ${group.label}`}
+                >
+                  <RiDeleteBinLine className="h-4 w-4" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" sideOffset={4}><p>Delete archived sessions</p></TooltipContent>
+            </Tooltip>
+          </div>
+        ) : null}
         {group.directory && !group.isMain && group.worktree ? (
           <div className={cn('absolute right-7 top-1/2 -translate-y-1/2 z-10 transition-opacity', mobileVariant ? 'opacity-100' : 'opacity-0 group-hover/gh:opacity-100 group-focus-within/gh:opacity-100')}>
             <Tooltip>
@@ -564,17 +655,17 @@ export function SessionGroupSection(props: Props): React.ReactNode {
                     openNewSessionDraft({ directoryOverride: group.directory });
                   }}
                   className="inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-                  aria-label={`New session in ${group.label}`}
-                >
-                  <RiAddLine className="h-4 w-4" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom" sideOffset={4}><p>New session</p></TooltipContent>
-            </Tooltip>
-          </div>
-        ) : null}
+                   aria-label={`New draft session in ${group.label}`}
+                 >
+                   <RiAddLine className="h-4 w-4" />
+                 </button>
+               </TooltipTrigger>
+               <TooltipContent side="bottom" sideOffset={4}><p>New draft session</p></TooltipContent>
+             </Tooltip>
+           </div>
+         ) : null}
       </div>
-      {!isCollapsed ? <div className="oc-group-body pb-3">{body}</div> : null}
+      {!isCollapsed ? <div className="oc-group-body pb-3 pl-4">{body}</div> : null}
     </div>
   );
 }

packages/ui/src/components/session/sidebar/SessionNodeItem.tsx

@@ -22,22 +22,21 @@ import {
   RiDeleteBinLine,
   RiErrorWarningLine,
   RiFileCopyLine,
-  RiFileEditLine,
   RiFolderLine,
   RiLinkUnlinkM,
   RiMore2Line,
   RiPencilAiLine,
   RiPushpinLine,
-  RiRobot2Line,
   RiShare2Line,
   RiShieldLine,
   RiUnpinLine,
+  RiGitBranchLine,
 } from '@remixicon/react';
 import { cn } from '@/lib/utils';
 import { isVSCodeRuntime } from '@/lib/desktop';
 import { DraggableSessionRow } from './sessionFolderDnd';
 import type { SessionNode, SessionSummaryMeta } from './types';
-import { formatSessionDateLabel, normalizePath, renderHighlightedText, resolveSessionDiffStats } from './utils';
+import { formatSessionCompactDateLabel, formatSessionDateLabel, normalizePath, renderHighlightedText, resolveSessionDiffStats } from './utils';
 import { useSessionDisplayStore } from '@/stores/useSessionDisplayStore';
 
 const ATTENTION_DIAMOND_INDICES = new Set([1, 3, 4, 5, 7]);
@@ -48,6 +47,11 @@ const getAttentionDiamondDelay = (index: number): string => {
 
 type Folder = { id: string; name: string; sessionIds: string[] };
 
+type SecondaryMeta = {
+  projectLabel?: string | null;
+  branchLabel?: string | null;
+};
+
 type Props = {
   node: SessionNode;
   depth?: number;
@@ -79,8 +83,8 @@ type Props = {
   copiedSessionId: string | null;
   handleCopyShareUrl: (url: string, sessionId: string) => void;
   handleUnshareSession: (sessionId: string) => void;
-  openMenuSessionId: string | null;
-  setOpenMenuSessionId: (id: string | null) => void;
+  openSidebarMenuKey: string | null;
+  setOpenSidebarMenuKey: (key: string | null) => void;
   renamingFolderId: string | null;
   getFoldersForScope: (scopeKey: string) => Folder[];
   getSessionFolderId: (scopeKey: string, sessionId: string) => string | null;
@@ -90,7 +94,9 @@ type Props = {
   openContextPanelTab: (directory: string, options: { mode: 'chat'; dedupeKey: string; label: string }) => void;
   handleDeleteSession: (session: Session, source?: { archivedBucket?: boolean }) => void;
   mobileVariant: boolean;
-  renderSessionNode: (node: SessionNode, depth?: number, groupDirectory?: string | null, projectId?: string | null, archivedBucket?: boolean) => React.ReactNode;
+  renderSessionNode: (node: SessionNode, depth?: number, groupDirectory?: string | null, projectId?: string | null, archivedBucket?: boolean, secondaryMeta?: SecondaryMeta | null, renderContext?: 'project' | 'recent') => React.ReactNode;
+  secondaryMeta?: SecondaryMeta | null;
+  renderContext?: 'project' | 'recent';
 };
 
 export function SessionNodeItem(props: Props): React.ReactNode {
@@ -125,8 +131,8 @@ export function SessionNodeItem(props: Props): React.ReactNode {
     copiedSessionId,
     handleCopyShareUrl,
     handleUnshareSession,
-    openMenuSessionId,
-    setOpenMenuSessionId,
+    openSidebarMenuKey,
+    setOpenSidebarMenuKey,
     renamingFolderId,
     getFoldersForScope,
     getSessionFolderId,
@@ -137,13 +143,19 @@ export function SessionNodeItem(props: Props): React.ReactNode {
     handleDeleteSession,
     mobileVariant,
     renderSessionNode,
+    secondaryMeta,
+    renderContext = 'project',
   } = props;
+  const hasSecondaryProjectLabel = Boolean(secondaryMeta?.projectLabel);
+  const hasSecondaryBranchLabel = Boolean(secondaryMeta?.branchLabel);
 
   const displayMode = useSessionDisplayStore((state) => state.displayMode);
   const isMinimalMode = displayMode === 'minimal';
   const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
+  const suppressNextSelectRef = React.useRef(false);
 
   const session = node.session;
+  const menuInstanceKey = `${renderContext}:${archivedBucket ? 'archived' : 'active'}:${session.id}`;
   const sessionDirectory =
     normalizePath((session as Session & { directory?: string | null }).directory ?? null)
     ?? normalizePath(groupDirectory ?? null);
@@ -160,12 +172,16 @@ export function SessionNodeItem(props: Props): React.ReactNode {
   const needsAttention = rawNeedsAttention && (!isSubtaskSession || notifyOnSubtasks);
   const sessionSummary = session.summary as SessionSummaryMeta | undefined;
   const sessionDiffStats = resolveSessionDiffStats(sessionSummary);
+  const sessionTimestamp = session.time?.updated || session.time?.created || Date.now();
+  const sessionUpdatedLabel = formatSessionDateLabel(sessionTimestamp);
+  const sessionCompactUpdatedLabel = formatSessionCompactDateLabel(sessionTimestamp);
+  const isMenuOpen = openSidebarMenuKey === menuInstanceKey;
 
   if (editingId === session.id) {
     return (
       <div
         key={session.id}
-        className={cn('group relative flex items-center rounded-md px-1.5 py-1', 'bg-interactive-selection', depth > 0 && 'pl-[20px]')}
+        className={cn('group relative flex items-center rounded-sm px-1.5 py-1', depth > 0 && 'pl-[20px]')}
       >
         <div className="flex min-w-0 flex-1 flex-col gap-0">
           <form
@@ -197,17 +213,14 @@ export function SessionNodeItem(props: Props): React.ReactNode {
             <button type="button" onClick={handleCancelEdit} className="shrink-0 text-muted-foreground hover:text-foreground"><RiCloseLine className="size-4" /></button>
           </form>
           {!isMinimalMode ? (
-            <div className="flex items-center gap-2 text-muted-foreground/60 min-w-0 overflow-hidden leading-tight" style={{ fontSize: 'calc(var(--text-ui-label) * 0.85)' }}>
-              {hasChildren ? <span className="inline-flex items-center justify-center flex-shrink-0">{isExpanded ? <RiArrowDownSLine className="h-3 w-3" /> : <RiArrowRightSLine className="h-3 w-3" />}</span> : null}
-              <span className="flex-shrink-0">{formatSessionDateLabel(session.time?.updated || session.time?.created || Date.now())}</span>
-              {sessionDiffStats ? <span className="flex-shrink-0"><span className="text-status-success/80">+{sessionDiffStats.additions}</span><span className="text-muted-foreground/60">/</span><span className="text-status-error/80">-{sessionDiffStats.deletions}</span></span> : null}
-              {session.share ? <RiShare2Line className="h-3 w-3 text-[color:var(--status-info)] flex-shrink-0" /> : null}
-              {(sessionSummary?.files ?? 0) > 0 || hasChildren ? (
-                <span className="flex items-center gap-2 flex-shrink-0">
-                  {(sessionSummary?.files ?? 0) > 0 ? <Tooltip><TooltipTrigger asChild><span className="inline-flex items-center gap-0.5"><RiFileEditLine className="h-3 w-3 text-muted-foreground/70" /><span>{sessionSummary!.files}</span></span></TooltipTrigger><TooltipContent side="bottom" sideOffset={4}><p>{sessionSummary!.files} changed {sessionSummary!.files === 1 ? 'file' : 'files'}</p></TooltipContent></Tooltip> : null}
-                  {hasChildren ? <Tooltip><TooltipTrigger asChild><span className="inline-flex items-center gap-0.5"><RiRobot2Line className="h-3 w-3 text-muted-foreground/70" /><span>{node.children.length}</span></span></TooltipTrigger><TooltipContent side="bottom" sideOffset={4}><p>{node.children.length} {node.children.length === 1 ? 'sub-session' : 'sub-sessions'}</p></TooltipContent></Tooltip> : null}
-                </span>
-              ) : null}
+            <div className="flex items-center justify-between gap-3 text-muted-foreground/60 min-w-0 overflow-hidden leading-tight" style={{ fontSize: 'calc(var(--text-ui-label) * 0.85)' }}>
+              <div className="flex min-w-0 items-center gap-1.5 overflow-hidden">
+                {hasChildren ? <span className="inline-flex items-center justify-center flex-shrink-0">{isExpanded ? <RiArrowDownSLine className="h-3 w-3" /> : <RiArrowRightSLine className="h-3 w-3" />}</span> : null}
+                <span className="flex-shrink-0">{sessionUpdatedLabel}</span>
+                {sessionDiffStats ? <span className="flex flex-shrink-0 items-center gap-0 text-[0.92em]"><span className="text-status-success/80">+{sessionDiffStats.additions}</span><span className="text-status-error/65">/-{sessionDiffStats.deletions}</span></span> : null}
+                {hasSecondaryProjectLabel ? <span className="truncate">{secondaryMeta?.projectLabel}</span> : null}
+                {hasSecondaryBranchLabel ? <span className="inline-flex min-w-0 items-center gap-0.5"><RiGitBranchLine className="h-3 w-3 flex-shrink-0 text-muted-foreground/70" /><span className="truncate">{secondaryMeta?.branchLabel}</span></span> : null}
+              </div>
             </div>
           ) : null}
         </div>
@@ -220,21 +233,191 @@ export function SessionNodeItem(props: Props): React.ReactNode {
   const pendingPermissionCount = permissions.get(session.id)?.length ?? 0;
   const showUnreadStatus = !isStreaming && needsAttention && !isActive;
   const showStatusMarker = isStreaming || showUnreadStatus;
+  const statusMarkerContent = isStreaming
+    ? <GridLoader size="xs" className="text-primary" />
+    : (
+        <span className="grid grid-cols-3 gap-[1px] text-[var(--status-info)]" aria-label="Unread updates" title="Unread updates">
+          {Array.from({ length: 9 }, (_, i) => (
+            ATTENTION_DIAMOND_INDICES.has(i) ? (
+              <span key={i} className="h-[3px] w-[3px] rounded-full bg-current animate-attention-diamond-pulse" style={{ animationDelay: getAttentionDiamondDelay(i) }} />
+            ) : (
+              <span key={i} className="h-[3px] w-[3px]" />
+            )
+          ))}
+        </span>
+      );
+  const inlineStatusMarker = !isMinimalMode && showStatusMarker ? (
+    <span className="inline-flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
+      {statusMarkerContent}
+    </span>
+  ) : null;
+  const minimalLeadingStatusMarker = isMinimalMode && showStatusMarker ? (
+    <span
+      className={cn(
+        'pointer-events-none absolute left-[-10px] top-1/2 inline-flex h-3.5 w-3.5 -translate-y-1/2 items-center justify-center transition-opacity',
+        hasChildren ? 'opacity-100 group-hover:opacity-0 group-focus-within:opacity-0' : '',
+      )}
+    >
+      {statusMarkerContent}
+    </span>
+  ) : null;
+  const subsessionChevron = hasChildren ? (
+    <span
+      role="button"
+      tabIndex={0}
+      onClick={(event) => {
+        event.stopPropagation();
+        toggleParent(session.id);
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          event.stopPropagation();
+          toggleParent(session.id);
+        }
+      }}
+      className={cn(
+        'absolute left-[-10px] top-1/2 inline-flex h-3.5 w-3.5 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
+        isMinimalMode && showStatusMarker
+          ? 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto'
+          : '',
+      )}
+      aria-label={isExpanded ? 'Collapse subsessions' : 'Expand subsessions'}
+    >
+      {isExpanded ? <RiArrowDownSLine className="h-3 w-3" /> : <RiArrowRightSLine className="h-3 w-3" />}
+    </span>
+  ) : null;
 
   const streamingIndicator = memoryState?.isZombie
     ? <RiErrorWarningLine className="h-4 w-4 text-status-warning" />
     : null;
 
+  const handleMenuOpenChange = (open: boolean) => {
+    setOpenSidebarMenuKey(open ? menuInstanceKey : null);
+  };
+
+  const handleMenuTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+  };
+
+  const handleRowSelect = () => {
+    if (suppressNextSelectRef.current) {
+      suppressNextSelectRef.current = false;
+      return;
+    }
+    handleSessionSelect(session.id, sessionDirectory, isMissingDirectory, projectId);
+  };
+
+  const handleRowMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (event.button === 2 || (event.button === 0 && event.ctrlKey)) {
+      suppressNextSelectRef.current = true;
+    }
+  };
+
+  const sessionMenuContent = (
+    <DropdownMenuContent align="end" className="min-w-[180px]" onCloseAutoFocus={(event) => { if (renamingFolderId) event.preventDefault(); }}>
+      <DropdownMenuItem
+        onClick={() => {
+          setEditingId(session.id);
+          setEditTitle(sessionTitle);
+        }}
+        className="[&>svg]:mr-1"
+      >
+        <RiPencilAiLine className="mr-1 h-4 w-4" />
+        Rename
+      </DropdownMenuItem>
+      <DropdownMenuItem onClick={() => togglePinnedSession(session.id)} className="[&>svg]:mr-1">
+        {isPinnedSession ? <RiUnpinLine className="mr-1 h-4 w-4" /> : <RiPushpinLine className="mr-1 h-4 w-4" />}
+        {isPinnedSession ? 'Unpin session' : 'Pin session'}
+      </DropdownMenuItem>
+      {!session.share ? (
+        <DropdownMenuItem onClick={() => handleShareSession(session)} className="[&>svg]:mr-1">
+          <RiShare2Line className="mr-1 h-4 w-4" />
+          Share
+        </DropdownMenuItem>
+      ) : (
+        <>
+          <DropdownMenuItem onClick={() => { if (session.share?.url) handleCopyShareUrl(session.share.url, session.id); }} className="[&>svg]:mr-1">
+            {copiedSessionId === session.id ? <><RiCheckLine className="mr-1 h-4 w-4" style={{ color: 'var(--status-success)' }} />Copied</> : <><RiFileCopyLine className="mr-1 h-4 w-4" />Copy link</>}
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => handleUnshareSession(session.id)} className="[&>svg]:mr-1">
+            <RiLinkUnlinkM className="mr-1 h-4 w-4" />
+            Unshare
+          </DropdownMenuItem>
+        </>
+      )}
+
+      {sessionDirectory && !archivedBucket ? (() => {
+        const scopeFolders = getFoldersForScope(sessionDirectory);
+        const currentFolderId = getSessionFolderId(sessionDirectory, session.id);
+        return (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger className="[&>svg]:mr-1"><RiFolderLine className="h-4 w-4" />Move to folder</DropdownMenuSubTrigger>
+              <DropdownMenuSubContent className="min-w-[180px]">
+                {scopeFolders.length === 0 ? (
+                  <DropdownMenuItem disabled className="text-muted-foreground">No folders yet</DropdownMenuItem>
+                ) : (
+                  scopeFolders.map((folder) => (
+                    <DropdownMenuItem key={folder.id} onClick={() => { if (currentFolderId === folder.id) removeSessionFromFolder(sessionDirectory, session.id); else addSessionToFolder(sessionDirectory, folder.id, session.id); }}>
+                      <span className="flex-1 truncate">{folder.name}</span>
+                      {currentFolderId === folder.id ? <RiCheckLine className="ml-2 h-3.5 w-3.5 text-primary flex-shrink-0" /> : null}
+                    </DropdownMenuItem>
+                  ))
+                )}
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => { const newFolder = createFolderAndStartRename(sessionDirectory); if (!newFolder) return; addSessionToFolder(sessionDirectory, newFolder.id, session.id); }}>
+                  <RiAddLine className="mr-1 h-4 w-4" />
+                  New folder...
+                </DropdownMenuItem>
+                {currentFolderId ? (
+                  <DropdownMenuItem onClick={() => { removeSessionFromFolder(sessionDirectory, session.id); }} className="text-destructive focus:text-destructive">
+                    <RiCloseLine className="mr-1 h-4 w-4" />
+                    Remove from folder
+                  </DropdownMenuItem>
+                ) : null}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          </>
+        );
+      })() : null}
+
+      {!isVSCode ? (
+        <DropdownMenuItem
+          disabled={!sessionDirectory}
+          onClick={() => {
+            if (!sessionDirectory) return;
+            openContextPanelTab(sessionDirectory, {
+              mode: 'chat',
+              dedupeKey: `session:${session.id}`,
+              label: sessionTitle,
+            });
+          }}
+          className="[&>svg]:mr-1"
+        >
+          <RiChat4Line className="mr-1 h-4 w-4" />
+          <span className="truncate">Open in Side Panel</span>
+          <span className="shrink-0 typography-micro px-1 rounded leading-none pb-px text-[var(--status-warning)] bg-[var(--status-warning)]/10">beta</span>
+        </DropdownMenuItem>
+      ) : null}
+
+      <DropdownMenuSeparator />
+      <DropdownMenuItem className="text-destructive focus:text-destructive [&>svg]:mr-1" onClick={() => handleDeleteSession(session, { archivedBucket })}>
+        <RiDeleteBinLine className="mr-1 h-4 w-4" />
+        {archivedBucket ? 'Delete' : 'Archive'}
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  );
+
   return (
     <React.Fragment key={session.id}>
       <DraggableSessionRow sessionId={session.id} sessionDirectory={sessionDirectory ?? null} sessionTitle={sessionTitle}>
         <div
-          className={cn('group relative flex items-center rounded-md px-1.5 py-1', isActive ? 'bg-interactive-selection' : 'hover:bg-interactive-hover', isMissingDirectory ? 'opacity-75' : '', depth > 0 && 'pl-[20px]')}
-          onContextMenu={(e) => {
-            e.preventDefault();
-            setOpenMenuSessionId(session.id);
-          }}
+          className={cn('group relative flex items-center rounded-sm px-1.5 py-1', isMissingDirectory ? 'opacity-75' : '', depth > 0 && 'pl-[20px]')}
         >
+          {minimalLeadingStatusMarker}
+          {subsessionChevron}
           <div className="flex min-w-0 flex-1 items-center">
             {isMinimalMode ? (
               <Tooltip>
@@ -242,38 +425,52 @@ export function SessionNodeItem(props: Props): React.ReactNode {
                   <button
                     type="button"
                     disabled={isMissingDirectory}
-                    onClick={() => handleSessionSelect(session.id, sessionDirectory, isMissingDirectory, projectId)}
+                    onMouseDown={handleRowMouseDown}
+                    onClick={handleRowSelect}
                     onDoubleClick={(e) => {
                       e.stopPropagation();
                       handleSessionDoubleClick();
                     }}
-                    className={cn('flex min-w-0 flex-1 cursor-pointer flex-col gap-0 overflow-hidden rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 text-foreground select-none disabled:cursor-not-allowed transition-[padding]', mobileVariant ? 'pr-7' : 'group-hover:pr-5 group-focus-within:pr-5')}
+                    className={cn(
+                      'flex min-w-0 flex-1 cursor-pointer flex-col gap-0 overflow-hidden rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 text-foreground select-none disabled:cursor-not-allowed transition-[padding]',
+                      mobileVariant ? 'pr-7' : '',
+                    )}
                   >
-                    <div className={cn('flex w-full items-center min-w-0 flex-1 overflow-hidden', isMinimalMode ? 'gap-1' : 'gap-2')}>
-                      {isMinimalMode && hasChildren ? (
-                        <span role="button" tabIndex={0} onClick={(event) => { event.stopPropagation(); toggleParent(session.id); }} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); event.stopPropagation(); toggleParent(session.id); } }} className="inline-flex items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 flex-shrink-0 rounded-sm" aria-label={isExpanded ? 'Collapse subsessions' : 'Expand subsessions'}>
-                          {isExpanded ? <RiArrowDownSLine className="h-3 w-3" /> : <RiArrowRightSLine className="h-3 w-3" />}
-                        </span>
-                      ) : null}
-                      {showStatusMarker ? (
-                        <span className="inline-flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
-                          {isStreaming ? (
-                            <GridLoader size="xs" className="text-primary" />
-                          ) : (
-                            <span className="grid grid-cols-3 gap-[1px] text-[var(--status-info)]" aria-label="Unread updates" title="Unread updates">
-                              {Array.from({ length: 9 }, (_, i) => (
-                                ATTENTION_DIAMOND_INDICES.has(i) ? (
-                                  <span key={i} className="h-[3px] w-[3px] rounded-full bg-current animate-attention-diamond-pulse" style={{ animationDelay: getAttentionDiamondDelay(i) }} />
-                                ) : (
-                                  <span key={i} className="h-[3px] w-[3px]" />
-                                )
-                              ))}
-                            </span>
-                          )}
-                        </span>
-                      ) : null}
+                    <div className={cn('flex w-full items-center min-w-0 flex-1 overflow-hidden', isMinimalMode ? 'gap-1' : 'gap-1')}>
                       {isPinnedSession ? <RiPushpinLine className="h-3 w-3 flex-shrink-0 text-primary" aria-label="Pinned session" /> : null}
-                      <div className="block min-w-0 flex-1 truncate typography-ui-label font-normal text-foreground">{renderHighlightedText(sessionTitle, normalizedSessionSearchQuery)}</div>
+                      <div className={cn('block min-w-0 flex-1 truncate typography-ui-label font-normal', isActive ? 'text-primary' : 'text-foreground')}>{renderHighlightedText(sessionTitle, normalizedSessionSearchQuery)}</div>
+                      {mobileVariant ? <span className="ml-2 flex-shrink-0 text-[0.72rem] text-muted-foreground/75">{sessionCompactUpdatedLabel}</span> : null}
+                      {!mobileVariant ? (
+                        <div className="relative ml-1 flex h-4 min-w-4 flex-shrink-0 items-center justify-end">
+                          <span className={cn(
+                            'whitespace-nowrap text-right text-[0.72rem] text-muted-foreground/75 transition-opacity duration-150',
+                            isMenuOpen
+                              ? 'opacity-0'
+                              : 'group-hover:opacity-0 group-focus-within:opacity-0',
+                          )}>
+                            {sessionCompactUpdatedLabel}
+                          </span>
+                          <DropdownMenu open={isMenuOpen} onOpenChange={handleMenuOpenChange}>
+                            <DropdownMenuTrigger asChild>
+                              <button
+                                type="button"
+                                className={cn(
+                                  'absolute inset-y-0 right-0 inline-flex h-4 w-4 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
+                                  isMenuOpen
+                                    ? 'opacity-100 pointer-events-auto'
+                                    : 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto',
+                                )}
+                                aria-label="Session menu"
+                                onClick={handleMenuTriggerClick}
+                                onKeyDown={(event) => event.stopPropagation()}
+                              >
+                                <RiMore2Line className="h-2.5 w-2.5" />
+                              </button>
+                            </DropdownMenuTrigger>
+                            {sessionMenuContent}
+                          </DropdownMenu>
+                        </div>
+                      ) : null}
                       {pendingPermissionCount > 0 ? (
                         <span className="inline-flex items-center gap-1 rounded bg-destructive/10 px-1 py-0.5 text-[0.7rem] text-destructive flex-shrink-0" title="Permission required" aria-label="Permission required">
                           <RiShieldLine className="h-3 w-3" />
@@ -283,40 +480,20 @@ export function SessionNodeItem(props: Props): React.ReactNode {
                     </div>
                   </button>
                 </TooltipTrigger>
-                <TooltipContent side="right" sideOffset={8} className="max-w-xs">
-                  <div className="flex flex-col gap-1 text-xs">
-                    <div className="flex items-center gap-2">
-                      <span className="text-muted-foreground">{formatSessionDateLabel(session.time?.updated || session.time?.created || Date.now())}</span>
-                      {sessionDiffStats ? (
-                        <span className="flex items-center gap-1">
-                          <span className="text-status-success">+{sessionDiffStats.additions}</span>
-                          <span className="text-muted-foreground">/</span>
-                          <span className="text-status-error">-{sessionDiffStats.deletions}</span>
-                        </span>
-                      ) : null}
+                <TooltipContent side="right" sideOffset={8} className="max-w-xs text-left">
+                  <div className="flex flex-col gap-1 text-left text-xs">
+                    <div className={cn('flex items-center gap-3 text-left text-muted-foreground', secondaryMeta?.projectLabel ? 'justify-between' : 'justify-start')}>
+                      {secondaryMeta?.projectLabel ? <div className="min-w-0 truncate">{secondaryMeta.projectLabel}</div> : null}
+                      <div className="flex-shrink-0">{sessionUpdatedLabel}</div>
                     </div>
-                    {session.share ? (
-                      <div className="flex items-center gap-1 text-[color:var(--status-info)]">
-                        <RiShare2Line className="h-3 w-3" />
-                        <span>Shared session</span>
-                      </div>
-                    ) : null}
-                    {(sessionSummary?.files ?? 0) > 0 ? (
-                      <div className="flex items-center gap-1">
-                        <RiFileEditLine className="h-3 w-3 text-muted-foreground" />
-                        <span className="text-muted-foreground">{sessionSummary!.files} changed {sessionSummary!.files === 1 ? 'file' : 'files'}</span>
-                      </div>
-                    ) : null}
-                    {hasChildren ? (
-                      <div className="flex items-center gap-1">
-                        <RiRobot2Line className="h-3 w-3 text-muted-foreground" />
-                        <span className="text-muted-foreground">{node.children.length} {node.children.length === 1 ? 'sub-session' : 'sub-sessions'}</span>
-                      </div>
-                    ) : null}
-                    {isMissingDirectory ? (
-                      <div className="flex items-center gap-1 text-status-warning">
-                        <RiErrorWarningLine className="h-3 w-3" />
-                        <span>Directory missing</span>
+                    {secondaryMeta?.branchLabel || sessionDiffStats ? (
+                      <div className={cn('flex items-center gap-3 text-left text-muted-foreground', secondaryMeta?.branchLabel ? 'justify-between' : 'justify-start')}>
+                        {secondaryMeta?.branchLabel ? (
+                          <div className="flex min-w-0 items-center gap-1.5 overflow-hidden">
+                            <span className="inline-flex min-w-0 items-center gap-0.5"><RiGitBranchLine className="h-3 w-3 flex-shrink-0" /><span className="truncate">{secondaryMeta.branchLabel}</span></span>
+                          </div>
+                        ) : null}
+                        {sessionDiffStats ? <span className="flex flex-shrink-0 items-center gap-0.5"><span className="text-status-success">+{sessionDiffStats.additions}</span><span className="text-status-error">-{sessionDiffStats.deletions}</span></span> : null}
                       </div>
                     ) : null}
                   </div>
@@ -326,176 +503,85 @@ export function SessionNodeItem(props: Props): React.ReactNode {
               <button
                 type="button"
                 disabled={isMissingDirectory}
-                onClick={() => handleSessionSelect(session.id, sessionDirectory, isMissingDirectory, projectId)}
+                onMouseDown={handleRowMouseDown}
+                onClick={handleRowSelect}
                 onDoubleClick={(e) => {
                   e.stopPropagation();
                   handleSessionDoubleClick();
                 }}
                 className={cn('flex min-w-0 flex-1 cursor-pointer flex-col gap-0 overflow-hidden rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 text-foreground select-none disabled:cursor-not-allowed transition-[padding]', mobileVariant ? 'pr-7' : 'group-hover:pr-5 group-focus-within:pr-5')}
               >
-                <div className={cn('flex w-full items-center min-w-0 flex-1 overflow-hidden', isMinimalMode ? 'gap-1' : 'gap-2')}>
-                  {showStatusMarker ? (
-                    <span className="inline-flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
-                      {isStreaming ? (
-                        <GridLoader size="xs" className="text-primary" />
-                      ) : (
-                        <span className="grid grid-cols-3 gap-[1px] text-[var(--status-info)]" aria-label="Unread updates" title="Unread updates">
-                          {Array.from({ length: 9 }, (_, i) => (
-                            ATTENTION_DIAMOND_INDICES.has(i) ? (
-                              <span key={i} className="h-[3px] w-[3px] rounded-full bg-current animate-attention-diamond-pulse" style={{ animationDelay: getAttentionDiamondDelay(i) }} />
-                            ) : (
-                              <span key={i} className="h-[3px] w-[3px]" />
-                            )
-                          ))}
-                        </span>
-                      )}
-                    </span>
-                  ) : null}
-                  {isPinnedSession ? <RiPushpinLine className="h-3 w-3 flex-shrink-0 text-primary" aria-label="Pinned session" /> : null}
-                  <div className="block min-w-0 flex-1 truncate typography-ui-label font-normal text-foreground">{renderHighlightedText(sessionTitle, normalizedSessionSearchQuery)}</div>
-                  {pendingPermissionCount > 0 ? (
-                    <span className="inline-flex items-center gap-1 rounded bg-destructive/10 px-1 py-0.5 text-[0.7rem] text-destructive flex-shrink-0" title="Permission required" aria-label="Permission required">
-                      <RiShieldLine className="h-3 w-3" />
-                      <span className="leading-none">{pendingPermissionCount}</span>
-                    </span>
-                  ) : null}
-                </div>
-
-              {!isMinimalMode ? (
-                <div className="flex items-center gap-2 text-muted-foreground/60 min-w-0 overflow-hidden leading-tight" style={{ fontSize: 'calc(var(--text-ui-label) * 0.85)' }}>
-                  {hasChildren ? (
-                    <span role="button" tabIndex={0} onClick={(event) => { event.stopPropagation(); toggleParent(session.id); }} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); event.stopPropagation(); toggleParent(session.id); } }} className="inline-flex items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 flex-shrink-0 rounded-sm" aria-label={isExpanded ? 'Collapse subsessions' : 'Expand subsessions'}>
-                      {isExpanded ? <RiArrowDownSLine className="h-3 w-3" /> : <RiArrowRightSLine className="h-3 w-3" />}
-                    </span>
-                  ) : null}
-                  <span className="flex-shrink-0">{formatSessionDateLabel(session.time?.updated || session.time?.created || Date.now())}</span>
-                  {sessionDiffStats ? <span className="flex-shrink-0"><span className="text-status-success/80">+{sessionDiffStats.additions}</span><span className="text-muted-foreground/60">/</span><span className="text-status-error/80">-{sessionDiffStats.deletions}</span></span> : null}
-                  {session.share ? <RiShare2Line className="h-3 w-3 text-[color:var(--status-info)] flex-shrink-0" /> : null}
-                  {(sessionSummary?.files ?? 0) > 0 || hasChildren ? (
-                    <span className="flex items-center gap-2 flex-shrink-0">
-                      {(sessionSummary?.files ?? 0) > 0 ? <Tooltip><TooltipTrigger asChild><span className="inline-flex items-center gap-0.5"><RiFileEditLine className="h-3 w-3 text-muted-foreground/70" /><span>{sessionSummary!.files}</span></span></TooltipTrigger><TooltipContent side="bottom" sideOffset={4}><p>{sessionSummary!.files} changed {sessionSummary!.files === 1 ? 'file' : 'files'}</p></TooltipContent></Tooltip> : null}
-                      {hasChildren ? <Tooltip><TooltipTrigger asChild><span className="inline-flex items-center gap-0.5"><RiRobot2Line className="h-3 w-3 text-muted-foreground/70" /><span>{node.children.length}</span></span></TooltipTrigger><TooltipContent side="bottom" sideOffset={4}><p>{node.children.length} {node.children.length === 1 ? 'sub-session' : 'sub-sessions'}</p></TooltipContent></Tooltip> : null}
-                    </span>
-                  ) : null}
-                  {isMissingDirectory ? <span className="inline-flex items-center gap-0.5 text-status-warning flex-shrink-0"><RiErrorWarningLine className="h-3 w-3" />Missing</span> : null}
-                </div>
-              ) : null}
+                <div className={cn('flex w-full items-center min-w-0 flex-1 overflow-hidden', isMinimalMode ? 'gap-1' : 'gap-1')}>
+                    {inlineStatusMarker}
+                    {isPinnedSession ? <RiPushpinLine className="h-3 w-3 flex-shrink-0 text-primary" aria-label="Pinned session" /> : null}
+                    <div className={cn('block min-w-0 flex-1 truncate typography-ui-label font-normal', isActive ? 'text-primary' : 'text-foreground')}>{renderHighlightedText(sessionTitle, normalizedSessionSearchQuery)}</div>
+                    {pendingPermissionCount > 0 ? (
+                      <span className="inline-flex items-center gap-1 rounded bg-destructive/10 px-1 py-0.5 text-[0.7rem] text-destructive flex-shrink-0" title="Permission required" aria-label="Permission required">
+                        <RiShieldLine className="h-3 w-3" />
+                        <span className="leading-none">{pendingPermissionCount}</span>
+                      </span>
+                    ) : null}
+                  </div>
+ 
+                {!isMinimalMode ? (
+                  <div className="flex items-center justify-between gap-3 text-muted-foreground/60 min-w-0 overflow-hidden leading-tight" style={{ fontSize: 'calc(var(--text-ui-label) * 0.85)' }}>
+                    <div className="flex min-w-0 items-center gap-1.5 overflow-hidden">
+                      <span className="flex-shrink-0">{sessionUpdatedLabel}</span>
+                      {sessionDiffStats ? <span className="flex flex-shrink-0 items-center gap-0 text-[0.92em]"><span className="text-status-success/80">+{sessionDiffStats.additions}</span><span className="text-muted-foreground/60">/</span><span className="text-status-error/65">-{sessionDiffStats.deletions}</span></span> : null}
+                      {hasSecondaryProjectLabel ? <span className="truncate">{secondaryMeta?.projectLabel}</span> : null}
+                      {hasSecondaryBranchLabel ? <span className="inline-flex min-w-0 items-center gap-0.5"><RiGitBranchLine className="h-3 w-3 flex-shrink-0 text-muted-foreground/70" /><span className="truncate">{secondaryMeta?.branchLabel}</span></span> : null}
+                    </div>
+                  </div>
+                ) : null}
               </button>
             )}
           </div>
 
           {streamingIndicator && !mobileVariant ? (
-            <div className={cn('absolute top-1/2 -translate-y-1/2 z-10', isMinimalMode ? 'right-7' : 'right-[30px]')}>
+            <div className={cn('absolute top-1/2 -translate-y-1/2 z-10', isMinimalMode ? 'right-0' : 'right-[30px]')}>
               {streamingIndicator}
             </div>
           ) : null}
 
-          <div className={cn('absolute right-0.5 top-1/2 -translate-y-1/2 z-10 transition-opacity', mobileVariant ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100')}>
-            <DropdownMenu open={openMenuSessionId === session.id} onOpenChange={(open) => setOpenMenuSessionId(open ? session.id : null)}>
-              <DropdownMenuTrigger asChild>
-                <button type="button" className="inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50" aria-label="Session menu" onClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()}>
-                  <RiMore2Line className="h-3.5 w-3.5" />
-                </button>
-              </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="min-w-[180px]" onCloseAutoFocus={(event) => { if (renamingFolderId) event.preventDefault(); }}>
-                  <DropdownMenuItem
-                    onClick={() => {
-                      setEditingId(session.id);
-                      setEditTitle(sessionTitle);
-                    }}
-                    className="[&>svg]:mr-1"
-                  >
-                    <RiPencilAiLine className="mr-1 h-4 w-4" />
-                    Rename
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => togglePinnedSession(session.id)} className="[&>svg]:mr-1">
-                    {isPinnedSession ? <RiUnpinLine className="mr-1 h-4 w-4" /> : <RiPushpinLine className="mr-1 h-4 w-4" />}
-                    {isPinnedSession ? 'Unpin session' : 'Pin session'}
-                  </DropdownMenuItem>
-                  {!session.share ? (
-                    <DropdownMenuItem onClick={() => handleShareSession(session)} className="[&>svg]:mr-1">
-                      <RiShare2Line className="mr-1 h-4 w-4" />
-                      Share
-                    </DropdownMenuItem>
-                  ) : (
-                    <>
-                      <DropdownMenuItem onClick={() => { if (session.share?.url) handleCopyShareUrl(session.share.url, session.id); }} className="[&>svg]:mr-1">
-                        {copiedSessionId === session.id ? <><RiCheckLine className="mr-1 h-4 w-4" style={{ color: 'var(--status-success)' }} />Copied</> : <><RiFileCopyLine className="mr-1 h-4 w-4" />Copy link</>}
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => handleUnshareSession(session.id)} className="[&>svg]:mr-1">
-                        <RiLinkUnlinkM className="mr-1 h-4 w-4" />
-                        Unshare
-                      </DropdownMenuItem>
-                    </>
-                  )}
-
-                  {sessionDirectory && !archivedBucket ? (() => {
-                    const scopeFolders = getFoldersForScope(sessionDirectory);
-                    const currentFolderId = getSessionFolderId(sessionDirectory, session.id);
-                    return (
-                      <>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuSub>
-                          <DropdownMenuSubTrigger className="[&>svg]:mr-1"><RiFolderLine className="h-4 w-4" />Move to folder</DropdownMenuSubTrigger>
-                          <DropdownMenuSubContent className="min-w-[180px]">
-                            {scopeFolders.length === 0 ? (
-                              <DropdownMenuItem disabled className="text-muted-foreground">No folders yet</DropdownMenuItem>
-                            ) : (
-                              scopeFolders.map((folder) => (
-                                <DropdownMenuItem key={folder.id} onClick={() => { if (currentFolderId === folder.id) removeSessionFromFolder(sessionDirectory, session.id); else addSessionToFolder(sessionDirectory, folder.id, session.id); }}>
-                                  <span className="flex-1 truncate">{folder.name}</span>
-                                  {currentFolderId === folder.id ? <RiCheckLine className="ml-2 h-3.5 w-3.5 text-primary flex-shrink-0" /> : null}
-                                </DropdownMenuItem>
-                              ))
-                            )}
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem onClick={() => { const newFolder = createFolderAndStartRename(sessionDirectory); if (!newFolder) return; addSessionToFolder(sessionDirectory, newFolder.id, session.id); }}>
-                              <RiAddLine className="mr-1 h-4 w-4" />
-                              New folder...
-                            </DropdownMenuItem>
-                            {currentFolderId ? (
-                              <DropdownMenuItem onClick={() => { removeSessionFromFolder(sessionDirectory, session.id); }} className="text-destructive focus:text-destructive">
-                                <RiCloseLine className="mr-1 h-4 w-4" />
-                                Remove from folder
-                              </DropdownMenuItem>
-                            ) : null}
-                          </DropdownMenuSubContent>
-                        </DropdownMenuSub>
-                      </>
-                    );
-                  })() : null}
-
-                  {!isVSCode ? (
-                    <DropdownMenuItem
-                      disabled={!sessionDirectory}
-                      onClick={() => {
-                        if (!sessionDirectory) return;
-                        openContextPanelTab(sessionDirectory, {
-                          mode: 'chat',
-                          dedupeKey: `session:${session.id}`,
-                          label: sessionTitle,
-                        });
-                      }}
-                      className="[&>svg]:mr-1"
+          {!isMinimalMode || mobileVariant ? (
+            <div className={cn(
+              'absolute right-0 top-1/2 z-10 -translate-y-1/2',
+              cn(
+                'transition-opacity',
+                isMenuOpen
+                  ? 'opacity-100 pointer-events-auto'
+                  : mobileVariant
+                    ? 'opacity-100 pointer-events-auto'
+                    : 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto',
+              ),
+            )}>
+              <DropdownMenu open={isMenuOpen} onOpenChange={handleMenuOpenChange}>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    type="button"
+                    className={cn(
+                      'inline-flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-opacity',
+                      isMinimalMode && !mobileVariant
+                        ? (isMenuOpen
+                            ? 'h-4 w-4 opacity-100 pointer-events-auto'
+                            : 'h-4 w-4 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto')
+                        : 'h-6 w-6 opacity-100',
+                    )}
+                    aria-label="Session menu"
+                    onClick={handleMenuTriggerClick}
+                    onKeyDown={(event) => event.stopPropagation()}
                     >
-                      <RiChat4Line className="mr-1 h-4 w-4" />
-                      <span className="truncate">Open in Side Panel</span>
-                      <span className="shrink-0 typography-micro px-1 rounded leading-none pb-px text-[var(--status-warning)] bg-[var(--status-warning)]/10">beta</span>
-                    </DropdownMenuItem>
-                  ) : null}
-
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="text-destructive focus:text-destructive [&>svg]:mr-1" onClick={() => handleDeleteSession(session, { archivedBucket })}>
-                    <RiDeleteBinLine className="mr-1 h-4 w-4" />
-                    {archivedBucket ? 'Delete' : 'Archive'}
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
+                      <RiMore2Line className={cn(isMinimalMode && !mobileVariant ? 'h-2.5 w-2.5' : 'h-3.5 w-3.5')} />
+                  </button>
+                </DropdownMenuTrigger>
+                {sessionMenuContent}
+                </DropdownMenu>
+              </div>
+            ) : null}
         </div>
       </DraggableSessionRow>
       {hasChildren && isExpanded
-        ? node.children.map((child) => renderSessionNode(child, depth + 1, sessionDirectory ?? groupDirectory, projectId, archivedBucket))
+        ? node.children.map((child) => renderSessionNode(child, depth + 1, sessionDirectory ?? groupDirectory, projectId, archivedBucket, undefined, renderContext))
         : null}
     </React.Fragment>
   );

packages/ui/src/components/session/sidebar/SidebarActivitySections.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react';
+import { cn } from '@/lib/utils';
+import type { SessionNode } from './types';
+
+type ActivityItem = {
+  node: SessionNode;
+  projectId: string | null;
+  groupDirectory: string | null;
+  secondaryMeta: {
+    projectLabel?: string | null;
+    branchLabel?: string | null;
+  } | null;
+};
+
+type ActivitySection = {
+  key: 'active-now';
+  title: string;
+  items: ActivityItem[];
+};
+
+type Props = {
+  sections: ActivitySection[];
+  renderSessionNode: (node: SessionNode, depth?: number, groupDirectory?: string | null, projectId?: string | null, archivedBucket?: boolean, secondaryMeta?: { projectLabel?: string | null; branchLabel?: string | null } | null, renderContext?: 'project' | 'recent') => React.ReactNode;
+};
+
+const MAX_VISIBLE_RECENT_SESSIONS = 7;
+
+export function SidebarActivitySections({ sections, renderSessionNode }: Props): React.ReactNode {
+  const [collapsed, setCollapsed] = React.useState<Set<string>>(new Set());
+  const [expandedSections, setExpandedSections] = React.useState<Set<string>>(new Set());
+
+  const toggleSection = React.useCallback((key: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+
+  const toggleSectionLimit = React.useCallback((key: string) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+
+  const visibleSections = sections.filter((section) => section.items.length > 0);
+  if (visibleSections.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2 pb-2 pt-1">
+      {visibleSections.map((section) => {
+        const isCollapsed = collapsed.has(section.key);
+        const isExpanded = expandedSections.has(section.key);
+        const visibleItems = isExpanded ? section.items : section.items.slice(0, MAX_VISIBLE_RECENT_SESSIONS);
+        const remainingCount = section.items.length - visibleItems.length;
+        return (
+          <div key={section.key} className="space-y-1">
+            <button
+              type="button"
+              onClick={() => toggleSection(section.key)}
+              className="group flex w-full items-center gap-1 rounded-md px-0.5 py-0.5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+              aria-expanded={!isCollapsed}
+            >
+              <span className="inline-flex h-4 w-4 items-center justify-center text-muted-foreground">
+                {isCollapsed ? <RiArrowRightSLine className="h-3.5 w-3.5" /> : <RiArrowDownSLine className="h-3.5 w-3.5" />}
+              </span>
+              <span className="text-[14px] font-normal text-foreground/95">{section.title}</span>
+            </button>
+            {!isCollapsed ? (
+              <div className={cn('space-y-0.5 pl-7')}>
+                {visibleItems.map((item) => renderSessionNode(item.node, 0, item.groupDirectory, item.projectId, false, item.secondaryMeta, 'recent'))}
+                {remainingCount > 0 && !isExpanded ? (
+                  <button
+                    type="button"
+                    onClick={() => toggleSectionLimit(section.key)}
+                    className="mt-0.5 flex items-center justify-start rounded-md px-1.5 py-0.5 text-left text-xs text-muted-foreground/70 leading-tight hover:text-foreground hover:underline"
+                  >
+                    Show {remainingCount} more {remainingCount === 1 ? 'session' : 'sessions'}
+                  </button>
+                ) : null}
+                {isExpanded && section.items.length > MAX_VISIBLE_RECENT_SESSIONS ? (
+                  <button
+                    type="button"
+                    onClick={() => toggleSectionLimit(section.key)}
+                    className="mt-0.5 flex items-center justify-start rounded-md px-1.5 py-0.5 text-left text-xs text-muted-foreground/70 leading-tight hover:text-foreground hover:underline"
+                  >
+                    Show fewer sessions
+                  </button>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

packages/ui/src/components/session/sidebar/SidebarFooter.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { RiInformationLine, RiQuestionLine, RiSettings3Line } from '@remixicon/react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+type Props = {
+  onOpenSettings: () => void;
+  onOpenShortcuts: () => void;
+  onOpenAbout: () => void;
+};
+
+const footerButtonClassName = 'inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-interactive-hover/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50';
+
+export function SidebarFooter({ onOpenSettings, onOpenShortcuts, onOpenAbout }: Props): React.ReactNode {
+  return (
+    <div className="flex shrink-0 items-center justify-start gap-1 px-2.5 py-2">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button type="button" onClick={onOpenSettings} className={footerButtonClassName} aria-label="Settings">
+            <RiSettings3Line className="h-4.5 w-4.5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top" sideOffset={4}><p>Settings</p></TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button type="button" onClick={onOpenShortcuts} className={footerButtonClassName} aria-label="Shortcuts">
+            <RiQuestionLine className="h-4.5 w-4.5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top" sideOffset={4}><p>Shortcuts</p></TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button type="button" onClick={onOpenAbout} className={footerButtonClassName} aria-label="About OpenChamber">
+            <RiInformationLine className="h-4.5 w-4.5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top" sideOffset={4}><p>About OpenChamber</p></TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}

packages/ui/src/components/session/sidebar/SidebarHeader.tsx

@@ -7,62 +7,22 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import {
-  RiArrowDownSLine,
   RiCheckLine,
-  RiCloseLine,
+  RiChatNewLine,
   RiEqualizer2Line,
-  RiNodeTree,
-  RiPencilAiLine,
+  RiFolderAddLine,
   RiSearchLine,
-  RiStickyNoteLine,
+  RiCloseLine,
 } from '@remixicon/react';
-import { ArrowsMerge } from '@/components/icons/ArrowsMerge';
-import { ProjectNotesTodoPanel } from '../ProjectNotesTodoPanel';
-import { formatDirectoryName } from '@/lib/utils';
-import { formatProjectLabel } from './utils';
-import type { ProjectRef } from '@/lib/openchamberConfig';
 import { useSessionDisplayStore } from '@/stores/useSessionDisplayStore';
 
-type ProjectItem = {
-  id: string;
-  label?: string;
-  normalizedPath: string;
-};
-
-type ActiveProject = {
-  id: string;
-  label?: string;
-  normalizedPath: string;
-} | null;
-
 type Props = {
   hideDirectoryControls: boolean;
-  hideProjectSelector: boolean;
-  activeProjectForHeader: ActiveProject;
-  homeDirectory: string | null;
-  normalizedProjects: ProjectItem[];
-  activeProjectId: string | null;
-  setActiveProjectIdOnly: (projectId: string) => void;
-  isProjectRenameInline: boolean;
-  setIsProjectRenameInline: (value: boolean) => void;
-  handleStartInlineProjectRename: () => void;
-  handleSaveInlineProjectRename: () => void;
-  projectRenameDraft: string;
-  setProjectRenameDraft: (value: string) => void;
-  removeProject: (projectId: string) => void;
   handleOpenDirectoryDialog: () => void;
-  addProjectButtonClass: string;
+  handleNewSession: () => void;
   headerActionIconClass: string;
   reserveHeaderActionsSpace: boolean;
-  stableActiveProjectIsRepo: boolean;
-  useMobileNotesPanel: boolean;
-  projectNotesPanelOpen: boolean;
-  setProjectNotesPanelOpen: (open: boolean) => void;
-  activeProjectRefForHeader: ProjectRef | null;
-  openMultiRunLauncher: () => void;
   headerActionButtonClass: string;
-  setNewWorktreeDialogOpen: (open: boolean) => void;
-  setActiveMainTab: (tab: 'chat' | 'plan' | 'git' | 'diff' | 'terminal' | 'files') => void;
   isSessionSearchOpen: boolean;
   setIsSessionSearchOpen: (open: boolean | ((prev: boolean) => boolean)) => void;
   sessionSearchInputRef: React.RefObject<HTMLInputElement | null>;
@@ -75,31 +35,11 @@ type Props = {
 export function SidebarHeader(props: Props): React.ReactNode {
   const {
     hideDirectoryControls,
-    hideProjectSelector,
-    activeProjectForHeader,
-    homeDirectory,
-    normalizedProjects,
-    activeProjectId,
-    setActiveProjectIdOnly,
-    isProjectRenameInline,
-    setIsProjectRenameInline,
-    handleStartInlineProjectRename,
-    handleSaveInlineProjectRename,
-    projectRenameDraft,
-    setProjectRenameDraft,
-    removeProject,
-    addProjectButtonClass,
+    handleOpenDirectoryDialog,
+    handleNewSession,
     headerActionIconClass,
     reserveHeaderActionsSpace,
-    stableActiveProjectIsRepo,
-    useMobileNotesPanel,
-    projectNotesPanelOpen,
-    setProjectNotesPanelOpen,
-    activeProjectRefForHeader,
-    openMultiRunLauncher,
     headerActionButtonClass,
-    setNewWorktreeDialogOpen,
-    setActiveMainTab,
     isSessionSearchOpen,
     setIsSessionSearchOpen,
     sessionSearchInputRef,
@@ -117,321 +57,129 @@ export function SidebarHeader(props: Props): React.ReactNode {
   }
 
   return (
-    <div className={`select-none pl-3.5 pr-2 flex-shrink-0 border-b border-border/60 ${hideProjectSelector ? 'py-1' : 'py-1.5'}`}>
-      {!hideProjectSelector && (
-        <div className="flex h-8 items-center justify-between gap-2">
-          <DropdownMenu
-            onOpenChange={(open) => {
-              if (!open) setIsProjectRenameInline(false);
-            }}
-          >
-            <DropdownMenuTrigger asChild>
-              <button
-                type="button"
-                className="flex h-8 min-w-0 max-w-[calc(100%-2.5rem)] cursor-pointer items-center gap-1 rounded-md px-2 text-left text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-              >
-                <span className="text-base font-semibold truncate">
-                  {activeProjectForHeader
-                    ? formatProjectLabel(
-                      activeProjectForHeader.label?.trim()
-                      || formatDirectoryName(activeProjectForHeader.normalizedPath, homeDirectory)
-                      || activeProjectForHeader.normalizedPath,
-                    )
-                    : 'Projects'}
-                </span>
-                <RiArrowDownSLine className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="min-w-[220px] max-w-[320px]">
-              {normalizedProjects.map((project) => {
-                const label = formatProjectLabel(
-                  project.label?.trim()
-                  || formatDirectoryName(project.normalizedPath, homeDirectory)
-                  || project.normalizedPath,
-                );
-                return (
-                  <DropdownMenuItem
-                    key={project.id}
-                    onClick={() => setActiveProjectIdOnly(project.id)}
-                    className={`truncate ${project.id === activeProjectId ? 'text-primary' : ''}`}
-                  >
-                    <span className="truncate">{label}</span>
-                  </DropdownMenuItem>
-                );
-              })}
-              <div className="my-1 h-px bg-border/70" />
-              {!isProjectRenameInline ? (
-                <DropdownMenuItem
-                  onClick={(event) => {
-                    event.preventDefault();
-                    handleStartInlineProjectRename();
-                  }}
-                  className="gap-2"
-                >
-                  <RiPencilAiLine className="h-4 w-4" />
-                  Rename project
-                </DropdownMenuItem>
-              ) : (
-                <div className="px-2 py-1.5">
-                  <form
-                    className="flex items-center gap-1"
-                    onSubmit={(event) => {
-                      event.preventDefault();
-                      handleSaveInlineProjectRename();
-                    }}
-                  >
-                    <input
-                      value={projectRenameDraft}
-                      onChange={(event) => setProjectRenameDraft(event.target.value)}
-                      className="h-7 flex-1 rounded border border-border bg-transparent px-2 typography-ui-label text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-                      placeholder="Rename project"
-                      autoFocus
-                      onKeyDown={(event) => {
-                        if (event.key === 'Escape') {
-                          event.stopPropagation();
-                          setIsProjectRenameInline(false);
-                          return;
-                        }
-                        if (event.key === ' ' || event.key === 'Enter') {
-                          event.stopPropagation();
-                        }
-                      }}
-                    />
-                    <button type="submit" className="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground">
-                      <RiCheckLine className="h-4 w-4" />
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setIsProjectRenameInline(false)}
-                      className="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground"
-                    >
-                      <RiCloseLine className="h-4 w-4" />
-                    </button>
-                  </form>
-                </div>
-              )}
-              <DropdownMenuItem
-                onClick={() => {
-                  if (!activeProjectForHeader) return;
-                  removeProject(activeProjectForHeader.id);
-                }}
-                className="text-destructive focus:text-destructive gap-2"
-              >
-                <RiCloseLine className="h-4 w-4" />
-                Close project
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <DropdownMenu>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <DropdownMenuTrigger asChild>
+    <div className="select-none flex-shrink-0 px-2.5 py-1">
+      {reserveHeaderActionsSpace ? (
+        <div className="flex h-auto min-h-8 flex-col gap-1">
+          <div className="flex h-8 items-center justify-between gap-2">
+            <div className="flex items-center gap-1.5">
+              <Tooltip>
+                <TooltipTrigger asChild>
                   <button
                     type="button"
-                    className={addProjectButtonClass}
-                    aria-label="Session display mode"
+                    onClick={handleOpenDirectoryDialog}
+                    className={headerActionButtonClass}
+                    aria-label="Add project"
                   >
-                    <RiEqualizer2Line className={headerActionIconClass} />
+                    <RiFolderAddLine className={headerActionIconClass} />
                   </button>
-                </DropdownMenuTrigger>
-              </TooltipTrigger>
-              <TooltipContent side="bottom" sideOffset={4}><p>Display mode</p></TooltipContent>
-            </Tooltip>
-            <DropdownMenuContent align="end" className="min-w-[160px]">
-              <DropdownMenuItem
-                onClick={() => setDisplayMode('default')}
-                className="flex items-center justify-between"
-              >
-                <span>Default</span>
-                {displayMode === 'default' ? <RiCheckLine className="h-4 w-4 text-primary" /> : null}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => setDisplayMode('minimal')}
-                className="flex items-center justify-between"
-              >
-                <span>Minimal</span>
-                {displayMode === 'minimal' ? <RiCheckLine className="h-4 w-4 text-primary" /> : null}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      )}
+                </TooltipTrigger>
+                <TooltipContent side="bottom" sideOffset={4}><p>Add project</p></TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    onClick={handleNewSession}
+                    className={headerActionButtonClass}
+                    aria-label="New session"
+                  >
+                    <RiChatNewLine className={headerActionIconClass} />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" sideOffset={4}><p>New session</p></TooltipContent>
+              </Tooltip>
+            </div>
 
-      {reserveHeaderActionsSpace ? (
-        <div className="-ml-1 flex h-auto min-h-8 flex-col gap-1">
-          {activeProjectForHeader ? (
-            <>
-              <div className="flex h-8 -translate-y-px items-center justify-between gap-1.5 rounded-md pl-0 pr-1">
-                <div className="flex items-center gap-1.5">
-                {stableActiveProjectIsRepo ? (
-                  <>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <button
-                          type="button"
-                          onClick={async () => {
-                            if (!activeProjectForHeader) return;
-                            if (activeProjectForHeader.id !== activeProjectId) {
-                              setActiveProjectIdOnly(activeProjectForHeader.id);
-                            }
-                            setActiveMainTab('chat');
-                            setNewWorktreeDialogOpen(true);
-                          }}
-                          className={headerActionButtonClass}
-                          aria-label="New worktree"
-                        >
-                          <RiNodeTree className={headerActionIconClass} />
-                        </button>
-                      </TooltipTrigger>
-                      <TooltipContent side="bottom" sideOffset={4}><p>New worktree</p></TooltipContent>
-                    </Tooltip>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <button
-                          type="button"
-                          onClick={openMultiRunLauncher}
-                          className={headerActionButtonClass}
-                          aria-label="New multi-run"
-                        >
-                          <ArrowsMerge className={headerActionIconClass} />
-                        </button>
-                      </TooltipTrigger>
-                      <TooltipContent side="bottom" sideOffset={4}><p>New multi-run</p></TooltipContent>
-                    </Tooltip>
-                  </>
-                ) : null}
-
-                {useMobileNotesPanel ? (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <button
-                        type="button"
-                        onClick={() => setProjectNotesPanelOpen(true)}
-                        className={headerActionButtonClass}
-                        aria-label="Project notes and todos"
-                      >
-                        <RiStickyNoteLine className={headerActionIconClass} />
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom" sideOffset={4}><p>Project notes</p></TooltipContent>
-                  </Tooltip>
-                ) : (
-                  <DropdownMenu open={projectNotesPanelOpen} onOpenChange={setProjectNotesPanelOpen} modal={false}>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <DropdownMenuTrigger asChild>
-                          <button
-                            type="button"
-                            className={headerActionButtonClass}
-                            aria-label="Project notes and todos"
-                          >
-                            <RiStickyNoteLine className={headerActionIconClass} />
-                          </button>
-                        </DropdownMenuTrigger>
-                      </TooltipTrigger>
-                      <TooltipContent side="bottom" sideOffset={4}><p>Project notes</p></TooltipContent>
-                    </Tooltip>
-                    <DropdownMenuContent align="start" className="w-[340px] p-0">
-                      <ProjectNotesTodoPanel
-                        projectRef={activeProjectRefForHeader}
-                        canCreateWorktree={stableActiveProjectIsRepo}
-                        onActionComplete={() => setProjectNotesPanelOpen(false)}
-                      />
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                )}
+            <div className="flex items-center gap-1.5">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    onClick={() => setIsSessionSearchOpen((prev) => !prev)}
+                    className={headerActionButtonClass}
+                    aria-label="Search sessions"
+                    aria-expanded={isSessionSearchOpen}
+                  >
+                    <RiSearchLine className={headerActionIconClass} />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" sideOffset={4}><p>Search sessions</p></TooltipContent>
+              </Tooltip>
 
+              <DropdownMenu>
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <button
-                      type="button"
-                      onClick={() => setIsSessionSearchOpen((prev) => !prev)}
-                      className={headerActionButtonClass}
-                      aria-label="Search sessions"
-                      aria-expanded={isSessionSearchOpen}
-                    >
-                      <RiSearchLine className={headerActionIconClass} />
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom" sideOffset={4}><p>Search sessions</p></TooltipContent>
-                </Tooltip>
-                </div>
-
-                <DropdownMenu>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <DropdownMenuTrigger asChild>
-                        <button
-                          type="button"
-                          className={headerActionButtonClass}
-                          aria-label="Session display mode"
-                        >
-                          <RiEqualizer2Line className={headerActionIconClass} />
-                        </button>
-                      </DropdownMenuTrigger>
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom" sideOffset={4}><p>Display mode</p></TooltipContent>
-                  </Tooltip>
-                  <DropdownMenuContent align="end" className="min-w-[160px]">
-                    <DropdownMenuItem
-                      onClick={() => setDisplayMode('default')}
-                      className="flex items-center justify-between"
-                    >
-                      <span>Default</span>
-                      {displayMode === 'default' ? <RiCheckLine className="h-4 w-4 text-primary" /> : null}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => setDisplayMode('minimal')}
-                      className="flex items-center justify-between"
-                    >
-                      <span>Minimal</span>
-                      {displayMode === 'minimal' ? <RiCheckLine className="h-4 w-4 text-primary" /> : null}
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-
-              {isSessionSearchOpen ? (
-                <div className="px-1 pb-1">
-                  <div className="mb-1 flex items-center justify-between px-0.5 typography-micro text-muted-foreground/80">
-                    {hasSessionSearchQuery ? (
-                      <span>{searchMatchCount} {searchMatchCount === 1 ? 'match' : 'matches'}</span>
-                    ) : <span />}
-                    <span>Esc to clear</span>
-                  </div>
-                  <div className="relative">
-                    <RiSearchLine className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                    <input
-                      ref={sessionSearchInputRef}
-                      value={sessionSearchQuery}
-                      onChange={(event) => setSessionSearchQuery(event.target.value)}
-                      placeholder="Search sessions..."
-                      className="h-8 w-full rounded-md border border-border bg-transparent pl-8 pr-8 typography-ui-label text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-                      onKeyDown={(event) => {
-                        if (event.key === 'Escape') {
-                          event.stopPropagation();
-                          if (hasSessionSearchQuery) {
-                            setSessionSearchQuery('');
-                          } else {
-                            setIsSessionSearchOpen(false);
-                          }
-                        }
-                      }}
-                    />
-                    {sessionSearchQuery.length > 0 ? (
+                    <DropdownMenuTrigger asChild>
                       <button
                         type="button"
-                        onClick={() => setSessionSearchQuery('')}
-                        className="absolute right-1 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground hover:bg-interactive-hover/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-                        aria-label="Clear search"
+                        className={headerActionButtonClass}
+                        aria-label="Session display mode"
                       >
-                        <RiCloseLine className="h-3.5 w-3.5" />
+                        <RiEqualizer2Line className={headerActionIconClass} />
                       </button>
-                    ) : null}
-                  </div>
-                </div>
-              ) : null}
-            </>
+                    </DropdownMenuTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" sideOffset={4}><p>Display mode</p></TooltipContent>
+                </Tooltip>
+                <DropdownMenuContent align="end" className="min-w-[160px]">
+                  <DropdownMenuItem
+                    onClick={() => setDisplayMode('default')}
+                    className="flex items-center justify-between"
+                  >
+                    <span>Default</span>
+                    {displayMode === 'default' ? <RiCheckLine className="h-4 w-4 text-primary" /> : null}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => setDisplayMode('minimal')}
+                    className="flex items-center justify-between"
+                  >
+                    <span>Minimal</span>
+                    {displayMode === 'minimal' ? <RiCheckLine className="h-4 w-4 text-primary" /> : null}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+
+          {isSessionSearchOpen ? (
+            <div className="pb-1">
+              <div className="mb-1 flex items-center justify-between px-0.5 typography-micro text-muted-foreground/80">
+                {hasSessionSearchQuery ? (
+                  <span>{searchMatchCount} {searchMatchCount === 1 ? 'match' : 'matches'}</span>
+                ) : <span />}
+                <span>Esc to clear</span>
+              </div>
+              <div className="relative">
+                <RiSearchLine className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <input
+                  ref={sessionSearchInputRef}
+                  value={sessionSearchQuery}
+                  onChange={(event) => setSessionSearchQuery(event.target.value)}
+                  placeholder="Search sessions..."
+                  className="h-8 w-full rounded-md border border-border bg-transparent pl-8 pr-8 typography-ui-label text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                  onKeyDown={(event) => {
+                    if (event.key === 'Escape') {
+                      event.stopPropagation();
+                      if (hasSessionSearchQuery) {
+                        setSessionSearchQuery('');
+                      } else {
+                        setIsSessionSearchOpen(false);
+                      }
+                    }
+                  }}
+                />
+                {sessionSearchQuery.length > 0 ? (
+                  <button
+                    type="button"
+                    onClick={() => setSessionSearchQuery('')}
+                    className="absolute right-1 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground hover:bg-interactive-hover/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                    aria-label="Clear search"
+                  >
+                    <RiCloseLine className="h-3.5 w-3.5" />
+                  </button>
+                ) : null}
+              </div>
+            </div>
           ) : null}
         </div>
       ) : null}

packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx

@@ -12,6 +12,7 @@ import { SortableContext, arrayMove, sortableKeyboardCoordinates, verticalListSo
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { formatDirectoryName, formatPathForDisplay, cn } from '@/lib/utils';
 import type { SessionGroup } from './types';
+import type { SortableDragHandleProps } from './sortableItems';
 import { SortableGroupItem, SortableProjectItem } from './sortableItems';
 import { formatProjectLabel } from './utils';
 
@@ -20,11 +21,16 @@ type ProjectSection = {
     id: string;
     label?: string;
     normalizedPath: string;
+    icon?: string;
+    color?: string;
+    iconImage?: { mime: string; updatedAt: number; source: 'custom' | 'auto' };
+    iconBackground?: string;
   };
   groups: SessionGroup[];
 };
 
 type Props = {
+  topContent?: React.ReactNode;
   sectionsForRender: ProjectSection[];
   projectSections: ProjectSection[];
   activeProjectId: string | null;
@@ -32,7 +38,7 @@ type Props = {
   hasSessionSearchQuery: boolean;
   emptyState: React.ReactNode;
   searchEmptyState: React.ReactNode;
-  renderGroupSessions: (group: SessionGroup, groupKey: string, projectId?: string | null, hideGroupLabel?: boolean) => React.ReactNode;
+  renderGroupSessions: (group: SessionGroup, groupKey: string, projectId?: string | null, hideGroupLabel?: boolean, dragHandleProps?: SortableDragHandleProps | null) => React.ReactNode;
   homeDirectory: string | null;
   collapsedProjects: Set<string>;
   hideDirectoryControls: boolean;
@@ -47,38 +53,39 @@ type Props = {
   setActiveMainTab: (tab: 'chat' | 'plan' | 'git' | 'diff' | 'terminal' | 'files') => void;
   setSessionSwitcherOpen: (open: boolean) => void;
   openNewSessionDraft: (options?: { directoryOverride?: string | null }) => void;
-  createWorktreeSession: () => void;
+  openNewWorktreeDialog: () => void;
   openMultiRunLauncher: () => void;
-  setEditingProjectId: (id: string | null) => void;
-  setEditProjectTitle: (title: string) => void;
-  editingProjectId: string | null;
-  editProjectTitle: string;
-  handleSaveProjectEdit: () => void;
-  handleCancelProjectEdit: () => void;
+  openProjectEditDialog: (id: string) => void;
   removeProject: (id: string) => void;
   projectHeaderSentinelRefs: React.MutableRefObject<Map<string, HTMLDivElement | null>>;
-  settingsAutoCreateWorktree: boolean;
+  reorderProjects: (fromIndex: number, toIndex: number) => void;
   getOrderedGroups: (projectId: string, groups: SessionGroup[]) => SessionGroup[];
   setGroupOrderByProject: React.Dispatch<React.SetStateAction<Map<string, string[]>>>;
+  openSidebarMenuKey: string | null;
+  setOpenSidebarMenuKey: (key: string | null) => void;
   isInlineEditing: boolean;
 };
 
 export function SidebarProjectsList(props: Props): React.ReactNode {
-  const sensors = useSensors(
+  const projectSensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
   );
+  const groupSensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+  );
 
   if (props.projectSections.length === 0) {
-    return <ScrollableOverlay outerClassName="flex-1 min-h-0" className={cn('space-y-1 pb-1 pl-2.5 pr-1', props.mobileVariant ? '' : '')}>{props.emptyState}</ScrollableOverlay>;
+    return <ScrollableOverlay useScrollShadow scrollShadowSize={96} outerClassName="flex-1 min-h-0" className={cn('space-y-1 pb-1 pl-2.5 pr-2', props.mobileVariant ? '' : '')}>{props.topContent}{props.emptyState}</ScrollableOverlay>;
   }
 
   if (props.sectionsForRender.length === 0) {
-    return <ScrollableOverlay outerClassName="flex-1 min-h-0" className={cn('space-y-1 pb-1 pl-2.5 pr-1', props.mobileVariant ? '' : '')}>{props.searchEmptyState}</ScrollableOverlay>;
+    return <ScrollableOverlay useScrollShadow scrollShadowSize={96} outerClassName="flex-1 min-h-0" className={cn('space-y-1 pb-1 pl-2.5 pr-2', props.mobileVariant ? '' : '')}>{props.searchEmptyState}</ScrollableOverlay>;
   }
 
   return (
-    <ScrollableOverlay outerClassName="flex-1 min-h-0" className={cn('space-y-1 pb-1 pl-2.5 pr-1', props.mobileVariant ? '' : '')}>
+    <ScrollableOverlay useScrollShadow scrollShadowSize={96} outerClassName="flex-1 min-h-0" className={cn('space-y-1 pb-1 pl-2.5 pr-2', props.mobileVariant ? '' : '')}>
+      {props.topContent}
       {props.showOnlyMainWorkspace ? (
         <div className="space-y-[0.6rem] py-1">
           {(() => {
@@ -113,117 +120,128 @@ export function SidebarProjectsList(props: Props): React.ReactNode {
         </div>
       ) : (
         <>
-          {props.sectionsForRender.map((section) => {
-            const project = section.project;
-            const projectKey = project.id;
-            const projectLabel = formatProjectLabel(
-              project.label?.trim()
-              || formatDirectoryName(project.normalizedPath, props.homeDirectory)
-              || project.normalizedPath,
-            );
-            const projectDescription = formatPathForDisplay(project.normalizedPath, props.homeDirectory);
-            const isCollapsed = props.collapsedProjects.has(projectKey) && props.hideDirectoryControls;
-            const isActiveProject = projectKey === props.activeProjectId;
-            const isRepo = props.projectRepoStatus.get(projectKey);
-            const isHovered = props.hoveredProjectId === projectKey;
-            const orderedGroups = props.getOrderedGroups(projectKey, section.groups);
-            const sortableEntries = orderedGroups.map((group) => ({
-              sortableId: `${projectKey}:${group.id}`,
-              groupId: group.id,
-            }));
-            const sortableGroupIds = sortableEntries.map((entry) => entry.sortableId);
-            const sortableIdToGroupId = new Map(sortableEntries.map((entry) => [entry.sortableId, entry.groupId]));
+          <DndContext
+            sensors={projectSensors}
+            collisionDetection={closestCenter}
+            onDragEnd={(event) => {
+              if (props.isInlineEditing) return;
+              const { active, over } = event;
+              if (!over || active.id === over.id) return;
+              const oldIndex = props.sectionsForRender.findIndex((section) => section.project.id === active.id);
+              const newIndex = props.sectionsForRender.findIndex((section) => section.project.id === over.id);
+              if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return;
+              props.reorderProjects(oldIndex, newIndex);
+            }}
+          >
+            <SortableContext items={props.sectionsForRender.map((section) => section.project.id)} strategy={verticalListSortingStrategy}>
+              {props.sectionsForRender.map((section) => {
+                const project = section.project;
+                const projectKey = project.id;
+                const projectLabel = formatProjectLabel(
+                  project.label?.trim()
+                  || formatDirectoryName(project.normalizedPath, props.homeDirectory)
+                  || project.normalizedPath,
+                );
+                const projectDescription = formatPathForDisplay(project.normalizedPath, props.homeDirectory);
+                const isCollapsed = props.collapsedProjects.has(projectKey);
+                const isActiveProject = projectKey === props.activeProjectId;
+                const isHovered = props.hoveredProjectId === projectKey;
+                const isRepo = props.projectRepoStatus.get(projectKey);
+                const orderedGroups = props.getOrderedGroups(projectKey, section.groups);
+                const rootGroup = orderedGroups.find((group) => group.isMain) ?? null;
+                const nestedGroups = rootGroup
+                  ? orderedGroups.filter((group) => group.id !== rootGroup.id)
+                  : orderedGroups;
 
-            return (
-              <SortableProjectItem
-                key={projectKey}
-                id={projectKey}
-                projectLabel={projectLabel}
-                projectDescription={projectDescription}
-                isCollapsed={isCollapsed}
-                isActiveProject={isActiveProject}
-                isRepo={Boolean(isRepo)}
-                isHovered={isHovered}
-                isDesktopShell={props.isDesktopShellRuntime}
-                isStuck={props.stuckProjectHeaders.has(projectKey)}
-                hideDirectoryControls={props.hideDirectoryControls}
-                mobileVariant={props.mobileVariant}
-                onToggle={() => props.toggleProject(projectKey)}
-                onHoverChange={(hovered) => props.setHoveredProjectId(hovered ? projectKey : null)}
-                onNewSession={() => {
-                  if (projectKey !== props.activeProjectId) props.setActiveProjectIdOnly(projectKey);
-                  props.setActiveMainTab('chat');
-                  if (props.mobileVariant) props.setSessionSwitcherOpen(false);
-                  props.openNewSessionDraft({ directoryOverride: project.normalizedPath });
-                }}
-                onNewWorktreeSession={() => {
-                  if (projectKey !== props.activeProjectId) props.setActiveProjectIdOnly(projectKey);
-                  props.setActiveMainTab('chat');
-                  if (props.mobileVariant) props.setSessionSwitcherOpen(false);
-                  props.createWorktreeSession();
-                }}
-                onOpenMultiRunLauncher={() => {
-                  if (projectKey !== props.activeProjectId) props.setActiveProjectIdOnly(projectKey);
-                  props.openMultiRunLauncher();
-                }}
-                onRenameStart={() => {
-                  props.setEditingProjectId(projectKey);
-                  props.setEditProjectTitle(project.label?.trim() || formatDirectoryName(project.normalizedPath, props.homeDirectory) || project.normalizedPath);
-                }}
-                onRenameSave={props.handleSaveProjectEdit}
-                onRenameCancel={props.handleCancelProjectEdit}
-                onRenameValueChange={props.setEditProjectTitle}
-                renameValue={props.editingProjectId === projectKey ? props.editProjectTitle : ''}
-                isRenaming={props.editingProjectId === projectKey}
-                onClose={() => props.removeProject(projectKey)}
-                sentinelRef={(el) => { props.projectHeaderSentinelRefs.current.set(projectKey, el); }}
-                settingsAutoCreateWorktree={props.settingsAutoCreateWorktree}
-                showCreateButtons={false}
-                hideHeader
-              >
-                {!isCollapsed ? (
-                  <div className="space-y-[0.6rem] py-1">
-                    {section.groups.length > 0 ? (
-                      <DndContext
-                        sensors={sensors}
-                        collisionDetection={closestCenter}
-                        onDragEnd={(event) => {
-                          const { active, over } = event;
-                          if (!over || active.id === over.id) return;
-                          const activeId = typeof active.id === 'string' ? sortableIdToGroupId.get(active.id) : null;
-                          const overId = typeof over.id === 'string' ? sortableIdToGroupId.get(over.id) : null;
-                          if (!activeId || !overId) return;
-                          const oldIndex = orderedGroups.findIndex((item) => item.id === activeId);
-                          const newIndex = orderedGroups.findIndex((item) => item.id === overId);
-                          if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return;
-                          const next = arrayMove(orderedGroups, oldIndex, newIndex).map((item) => item.id);
-                          props.setGroupOrderByProject((prev) => {
-                            const map = new Map(prev);
-                            map.set(projectKey, next);
-                            return map;
-                          });
-                        }}
-                      >
-                        <SortableContext items={sortableGroupIds} strategy={verticalListSortingStrategy}>
-                          {orderedGroups.map((group) => {
-                            const groupKey = `${projectKey}:${group.id}`;
-                            return (
-                              <SortableGroupItem key={groupKey} id={groupKey} disabled={props.isInlineEditing}>
-                                {props.renderGroupSessions(group, groupKey, projectKey)}
-                              </SortableGroupItem>
-                            );
-                          })}
-                        </SortableContext>
-                        <DragOverlay dropAnimation={null} />
-                      </DndContext>
-                    ) : (
-                      <div className="py-1 text-left typography-micro text-muted-foreground">No sessions yet.</div>
-                    )}
-                  </div>
-                ) : null}
-              </SortableProjectItem>
-            );
-          })}
+                return (
+                  <SortableProjectItem
+                    key={projectKey}
+                    id={projectKey}
+                    projectLabel={projectLabel}
+                    projectDescription={projectDescription}
+                    projectIcon={project.icon}
+                    projectColor={project.color}
+                    projectIconImage={project.iconImage}
+                    projectIconBackground={project.iconBackground}
+                    isCollapsed={isCollapsed}
+                    isActiveProject={isActiveProject}
+                    isHovered={isHovered}
+                    isRepo={Boolean(isRepo)}
+                    isDesktopShell={props.isDesktopShellRuntime}
+                    isStuck={props.stuckProjectHeaders.has(projectKey)}
+                    hideDirectoryControls={props.hideDirectoryControls}
+                    mobileVariant={props.mobileVariant}
+                    onToggle={() => props.toggleProject(projectKey)}
+                    onHoverChange={(hovered) => props.setHoveredProjectId(hovered ? projectKey : null)}
+                    onNewSession={() => {
+                      if (projectKey !== props.activeProjectId) props.setActiveProjectIdOnly(projectKey);
+                      props.setActiveMainTab('chat');
+                      if (props.mobileVariant) props.setSessionSwitcherOpen(false);
+                      props.openNewSessionDraft({ directoryOverride: project.normalizedPath });
+                    }}
+                    onNewWorktreeSession={() => {
+                      if (projectKey !== props.activeProjectId) props.setActiveProjectIdOnly(projectKey);
+                      props.setActiveMainTab('chat');
+                      if (props.mobileVariant) props.setSessionSwitcherOpen(false);
+                      props.openNewWorktreeDialog();
+                    }}
+                    onOpenMultiRunLauncher={() => {
+                      if (projectKey !== props.activeProjectId) props.setActiveProjectIdOnly(projectKey);
+                      props.openMultiRunLauncher();
+                    }}
+                    onRenameStart={() => props.openProjectEditDialog(projectKey)}
+                    onClose={() => props.removeProject(projectKey)}
+                    sentinelRef={(el) => { props.projectHeaderSentinelRefs.current.set(projectKey, el); }}
+                    showCreateButtons
+                    openSidebarMenuKey={props.openSidebarMenuKey}
+                    setOpenSidebarMenuKey={props.setOpenSidebarMenuKey}
+                  >
+                    {!isCollapsed ? (
+                      <div className="space-y-0 pt-0 pb-0.5 pl-3">
+                        {section.groups.length > 0 ? (
+                          <DndContext
+                            sensors={groupSensors}
+                            collisionDetection={closestCenter}
+                            onDragEnd={(event) => {
+                              if (props.isInlineEditing) return;
+                              const { active, over } = event;
+                              if (!over || active.id === over.id) return;
+                              const oldIndex = nestedGroups.findIndex((item) => item.id === active.id);
+                              const newIndex = nestedGroups.findIndex((item) => item.id === over.id);
+                              if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return;
+                              const nextNested = arrayMove(nestedGroups, oldIndex, newIndex).map((item) => item.id);
+                              const next = rootGroup ? [rootGroup.id, ...nextNested] : nextNested;
+                              props.setGroupOrderByProject((prev) => {
+                                const map = new Map(prev);
+                                map.set(projectKey, next);
+                                return map;
+                              });
+                            }}
+                          >
+                            {rootGroup ? props.renderGroupSessions(rootGroup, `${projectKey}:${rootGroup.id}`, projectKey, true) : null}
+                            <SortableContext items={nestedGroups.map((group) => group.id)} strategy={verticalListSortingStrategy}>
+                              {nestedGroups.map((group) => {
+                                const groupKey = `${projectKey}:${group.id}`;
+                                return (
+                                  <SortableGroupItem key={group.id} id={group.id} disabled={props.isInlineEditing}>
+                                    {(dragHandleProps) => props.renderGroupSessions(group, groupKey, projectKey, false, dragHandleProps)}
+                                  </SortableGroupItem>
+                                );
+                              })}
+                            </SortableContext>
+                            <DragOverlay dropAnimation={null} />
+                          </DndContext>
+                        ) : (
+                          <div className="py-1 text-left typography-micro text-muted-foreground">No sessions yet.</div>
+                        )}
+                      </div>
+                    ) : null}
+                  </SortableProjectItem>
+                );
+              })}
+            </SortableContext>
+            <DragOverlay dropAnimation={null} />
+          </DndContext>
         </>
       )}
     </ScrollableOverlay>

packages/ui/src/components/session/sidebar/activitySections.ts

@@ -0,0 +1,107 @@
+import type { Session } from '@opencode-ai/sdk/v2';
+
+export const ACTIVE_NOW_STORAGE_KEY = 'oc.sessions.activeNow';
+export const ACTIVE_NOW_MAX_AGE_MS = 36 * 60 * 60 * 1000;
+
+export type ActiveNowEntry = {
+  sessionId: string;
+};
+
+const isSubtaskSession = (session: Session): boolean => {
+  return Boolean((session as Session & { parentID?: string | null }).parentID);
+};
+
+const isArchivedSession = (session: Session): boolean => {
+  return Boolean(session.time?.archived);
+};
+
+const getSessionUpdatedAt = (session: Session): number => {
+  const updated = session.time?.updated;
+  const created = session.time?.created;
+  if (typeof updated === 'number' && Number.isFinite(updated)) {
+    return updated;
+  }
+  if (typeof created === 'number' && Number.isFinite(created)) {
+    return created;
+  }
+  return 0;
+};
+
+export const readActiveNowEntries = (storage: Storage): ActiveNowEntry[] => {
+  try {
+    const raw = storage.getItem(ACTIVE_NOW_STORAGE_KEY);
+    if (!raw) {
+      return [];
+    }
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+    const seen = new Set<string>();
+    const next: ActiveNowEntry[] = [];
+    parsed.forEach((item) => {
+      const sessionId = typeof item === 'string'
+        ? item
+        : (item && typeof item === 'object' && 'sessionId' in item && typeof item.sessionId === 'string' ? item.sessionId : null);
+      if (!sessionId || seen.has(sessionId)) {
+        return;
+      }
+      seen.add(sessionId);
+      next.push({ sessionId });
+    });
+    return next;
+  } catch {
+    return [];
+  }
+};
+
+export const persistActiveNowEntries = (storage: Storage, entries: ActiveNowEntry[]): void => {
+  try {
+    storage.setItem(ACTIVE_NOW_STORAGE_KEY, JSON.stringify(entries));
+  } catch {
+    // ignored
+  }
+};
+
+export const pruneActiveNowEntries = (
+  entries: ActiveNowEntry[],
+  sessionsById: Map<string, Session>,
+  now = Date.now(),
+): ActiveNowEntry[] => {
+  const minUpdatedAt = now - ACTIVE_NOW_MAX_AGE_MS;
+  return entries.filter((entry) => {
+    const session = sessionsById.get(entry.sessionId);
+    if (!session) {
+      return true;
+    }
+    if (isArchivedSession(session)) {
+      return false;
+    }
+    return getSessionUpdatedAt(session) >= minUpdatedAt;
+  });
+};
+
+export const addActiveNowSession = (entries: ActiveNowEntry[], sessionId: string): ActiveNowEntry[] => {
+  if (!sessionId || entries.some((entry) => entry.sessionId === sessionId)) {
+    return entries;
+  }
+  return [{ sessionId }, ...entries];
+};
+
+export const sortSessionsByUpdated = (sessions: Session[]): Session[] => {
+  return [...sessions].sort((a, b) => getSessionUpdatedAt(b) - getSessionUpdatedAt(a));
+};
+
+export const deriveActiveNowSessions = (
+  entries: ActiveNowEntry[],
+  sessionsById: Map<string, Session>,
+): Session[] => {
+  const sessions = entries
+    .map((entry) => sessionsById.get(entry.sessionId) ?? null)
+    .filter((session): session is Session => Boolean(session))
+    .filter((session) => !isArchivedSession(session))
+    .filter((session) => !isSubtaskSession(session));
+  return sortSessionsByUpdated(sessions);
+};
+
+export const getSessionUpdatedAtMs = getSessionUpdatedAt;

packages/ui/src/components/session/sidebar/hooks/useGroupOrdering.ts

@@ -4,13 +4,11 @@ import type { SessionGroup } from '../types';
 export const useGroupOrdering = (groupOrderByProject: Map<string, string[]>) => {
   const getOrderedGroups = React.useCallback(
     (projectId: string, groups: SessionGroup[]) => {
-      const archivedGroup = groups.find((group) => group.isArchivedBucket === true) ?? null;
-      const reorderableGroups = archivedGroup ? groups.filter((group) => group !== archivedGroup) : groups;
       const preferredOrder = groupOrderByProject.get(projectId);
       if (!preferredOrder || preferredOrder.length === 0) {
-        return archivedGroup ? [...reorderableGroups, archivedGroup] : reorderableGroups;
+        return groups;
       }
-      const groupById = new Map(reorderableGroups.map((group) => [group.id, group]));
+      const groupById = new Map(groups.map((group) => [group.id, group]));
       const ordered: SessionGroup[] = [];
       preferredOrder.forEach((id) => {
         const group = groupById.get(id);
@@ -19,12 +17,12 @@ export const useGroupOrdering = (groupOrderByProject: Map<string, string[]>) =>
           groupById.delete(id);
         }
       });
-      reorderableGroups.forEach((group) => {
+      groups.forEach((group) => {
         if (groupById.has(group.id)) {
           ordered.push(group);
         }
       });
-      return archivedGroup ? [...ordered, archivedGroup] : ordered;
+      return ordered;
     },
     [groupOrderByProject],
   );

packages/ui/src/components/session/sidebar/hooks/useProjectSessionSelection.ts

@@ -15,7 +15,6 @@ type Args = {
   setActiveSessionByProject: React.Dispatch<React.SetStateAction<Map<string, string>>>;
   currentSessionId: string | null;
   handleSessionSelect: (sessionId: string, sessionDirectory: string | null, isMissingDirectory: boolean, projectId?: string | null) => void;
-  isVSCode: boolean;
   newSessionDraftOpen: boolean;
   mobileVariant: boolean;
   openNewSessionDraft: (options?: { directoryOverride?: string | null }) => void;
@@ -33,7 +32,6 @@ export const useProjectSessionSelection = (args: Args): { currentSessionDirector
     setActiveSessionByProject,
     currentSessionId,
     handleSessionSelect,
-    isVSCode,
     newSessionDraftOpen,
     mobileVariant,
     openNewSessionDraft,
@@ -84,18 +82,13 @@ export const useProjectSessionSelection = (args: Args): { currentSessionDirector
   }, [projectSections]);
 
   const previousActiveProjectRef = React.useRef<string | null>(null);
-  const lastSeenActiveProjectRef = React.useRef<string | null>(null);
 
   React.useLayoutEffect(() => {
     if (!activeProjectId) {
       return;
     }
 
-    const previousSeenProjectId = lastSeenActiveProjectRef.current;
-    const isProjectSwitch = Boolean(previousSeenProjectId && previousSeenProjectId !== activeProjectId);
-    lastSeenActiveProjectRef.current = activeProjectId;
-
-    if (newSessionDraftOpen && (isVSCode || !isProjectSwitch)) {
+    if (newSessionDraftOpen) {
       return;
     }
 
@@ -146,7 +139,6 @@ export const useProjectSessionSelection = (args: Args): { currentSessionDirector
     activeSessionByProject,
     currentSessionId,
     handleSessionSelect,
-    isVSCode,
     newSessionDraftOpen,
     mobileVariant,
     openNewSessionDraft,

packages/ui/src/components/session/sidebar/hooks/useSessionActions.ts

@@ -83,6 +83,11 @@ export const useSessionActions = (args: Args) => {
 
       if (sessionId === args.currentSessionId) {
         if (args.allowReselect) {
+          if (typeof window !== 'undefined') {
+            window.dispatchEvent(new CustomEvent<string>('openchamber:session-reselected', {
+              detail: sessionId,
+            }));
+          }
           args.onSessionSelected?.(sessionId);
         }
         resetSessionSearch();

packages/ui/src/components/session/sidebar/hooks/useSessionGrouping.ts

@@ -19,6 +19,8 @@ type Args = {
   isVSCode: boolean;
 };
 
+const isArchivedSession = (session: Session): boolean => Boolean(session.time?.archived);
+
 export const useSessionGrouping = (args: Args) => {
   const buildGroupSearchText = React.useCallback((group: SessionGroup): string => {
     return [group.label, group.branch ?? '', group.description ?? '', group.directory ?? ''].join(' ').toLowerCase();
@@ -70,6 +72,10 @@ export const useSessionGrouping = (args: Args) => {
       sortedProjectSessions.forEach((session) => {
         const parentID = (session as Session & { parentID?: string | null }).parentID;
         if (!parentID) return;
+        const parentSession = sessionMap.get(parentID);
+        if (!parentSession || isArchivedSession(parentSession) !== isArchivedSession(session)) {
+          return;
+        }
         const collection = childrenMap.get(parentID) ?? [];
         collection.push(session);
         childrenMap.set(parentID, collection);
@@ -105,7 +111,9 @@ export const useSessionGrouping = (args: Args) => {
       const roots = sortedProjectSessions.filter((session) => {
         const parentID = (session as Session & { parentID?: string | null }).parentID;
         if (!parentID) return true;
-        return !sessionMap.has(parentID);
+        const parentSession = sessionMap.get(parentID);
+        if (!parentSession) return true;
+        return isArchivedSession(parentSession) !== isArchivedSession(session);
       });
 
       const groupedNodes = new Map<string, SessionNode[]>();

packages/ui/src/components/session/sidebar/hooks/useSessionPrefetch.ts

@@ -9,10 +9,11 @@ const SESSION_PREFETCH_PENDING_LIMIT = 6;
 type Args = {
   currentSessionId: string | null;
   sortedSessions: Session[];
+  recentSessionIds?: string[];
   loadMessages: (sessionId: string, limit?: number) => Promise<void>;
 };
 
-export const useSessionPrefetch = ({ currentSessionId, sortedSessions, loadMessages }: Args): void => {
+export const useSessionPrefetch = ({ currentSessionId, sortedSessions, recentSessionIds = [], loadMessages }: Args): void => {
   const sessionPrefetchTimersRef = React.useRef<Map<string, number>>(new Map());
   const sessionPrefetchQueueRef = React.useRef<string[]>([]);
   const sessionPrefetchInFlightRef = React.useRef<Set<string>>(new Set());
@@ -100,6 +101,20 @@ export const useSessionPrefetch = ({ currentSessionId, sortedSessions, loadMessa
     scheduleSessionPrefetch(sortedSessions[currentIndex + 1]?.id);
   }, [currentSessionId, scheduleSessionPrefetch, sortedSessions]);
 
+  React.useEffect(() => {
+    if (!currentSessionId || recentSessionIds.length === 0) {
+      return;
+    }
+
+    const currentIndex = recentSessionIds.indexOf(currentSessionId);
+    if (currentIndex < 0) {
+      return;
+    }
+
+    scheduleSessionPrefetch(recentSessionIds[currentIndex - 1]);
+    scheduleSessionPrefetch(recentSessionIds[currentIndex + 1]);
+  }, [currentSessionId, recentSessionIds, scheduleSessionPrefetch]);
+
   React.useEffect(() => {
     const prefetchTimers = sessionPrefetchTimersRef.current;
     return () => {

packages/ui/src/components/session/sidebar/hooks/useSessionSidebarSections.ts

@@ -9,6 +9,10 @@ type ProjectItem = {
   path: string;
   label?: string;
   normalizedPath: string;
+  icon?: string;
+  color?: string;
+  iconImage?: { mime: string; updatedAt: number; source: 'custom' | 'auto' };
+  iconBackground?: string;
 };
 
 type ProjectSection = {
@@ -18,7 +22,6 @@ type ProjectSection = {
 
 type Args = {
   normalizedProjects: ProjectItem[];
-  activeProjectId: string | null;
   getSessionsForProject: (project: { normalizedPath: string }) => Session[];
   getArchivedSessionsForProject: (project: { normalizedPath: string }) => Session[];
   availableWorktreesByProject: Map<string, WorktreeMetadata[]>;
@@ -42,7 +45,6 @@ type Args = {
 export const useSessionSidebarSections = (args: Args) => {
   const {
     normalizedProjects,
-    activeProjectId,
     getSessionsForProject,
     getArchivedSessionsForProject,
     availableWorktreesByProject,
@@ -88,12 +90,8 @@ export const useSessionSidebarSections = (args: Args) => {
   ]);
 
   const visibleProjectSections = React.useMemo(() => {
-    if (projectSections.length === 0) {
-      return projectSections;
-    }
-    const active = projectSections.find((section) => section.project.id === activeProjectId);
-    return active ? [active] : [projectSections[0]];
-  }, [projectSections, activeProjectId]);
+    return projectSections;
+  }, [projectSections]);
 
   const groupSearchDataByGroup = React.useMemo(() => {
     const result = new WeakMap<SessionGroup, GroupSearchData>();

packages/ui/src/components/session/sidebar/sortableItems.tsx

@@ -10,23 +10,31 @@ import {
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
 import {
   RiAddLine,
-  RiCheckLine,
+  RiArrowDownSLine,
+  RiArrowRightSLine,
   RiCloseLine,
-  RiGitBranchLine,
+  RiFolderLine,
   RiMore2Line,
+  RiNodeTree,
   RiPencilAiLine,
 } from '@remixicon/react';
 import { ArrowsMerge } from '@/components/icons/ArrowsMerge';
 import { cn } from '@/lib/utils';
+import { PROJECT_COLOR_MAP, PROJECT_ICON_MAP, getProjectIconImageUrl } from '@/lib/projectMeta';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
 
 export interface SortableProjectItemProps {
   id: string;
   projectLabel: string;
   projectDescription: string;
+  projectIcon?: string;
+  projectColor?: string;
+  projectIconImage?: { mime: string; updatedAt: number; source: 'custom' | 'auto' };
+  projectIconBackground?: string;
   isCollapsed: boolean;
   isActiveProject: boolean;
-  isRepo: boolean;
   isHovered: boolean;
+  isRepo: boolean;
   isDesktopShell: boolean;
   isStuck: boolean;
   hideDirectoryControls: boolean;
@@ -37,27 +45,32 @@ export interface SortableProjectItemProps {
   onNewWorktreeSession?: () => void;
   onOpenMultiRunLauncher: () => void;
   onRenameStart: () => void;
-  onRenameSave: () => void;
-  onRenameCancel: () => void;
-  onRenameValueChange: (value: string) => void;
-  renameValue: string;
-  isRenaming: boolean;
   onClose: () => void;
   sentinelRef: (el: HTMLDivElement | null) => void;
   children?: React.ReactNode;
-  settingsAutoCreateWorktree: boolean;
   showCreateButtons?: boolean;
   hideHeader?: boolean;
+  openSidebarMenuKey: string | null;
+  setOpenSidebarMenuKey: (key: string | null) => void;
 }
 
+export type SortableDragHandleProps = {
+  listeners: ReturnType<typeof useSortable>['listeners'];
+  setActivatorNodeRef: ReturnType<typeof useSortable>['setActivatorNodeRef'];
+};
+
 export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
   id,
   projectLabel,
   projectDescription,
+  projectIcon,
+  projectColor,
+  projectIconImage,
+  projectIconBackground,
   isCollapsed,
   isActiveProject,
-  isRepo,
   isHovered,
+  isRepo,
   isDesktopShell,
   isStuck,
   hideDirectoryControls,
@@ -68,18 +81,15 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
   onNewWorktreeSession,
   onOpenMultiRunLauncher,
   onRenameStart,
-  onRenameSave,
-  onRenameCancel,
-  onRenameValueChange,
-  renameValue,
-  isRenaming,
   onClose,
   sentinelRef,
   children,
-  settingsAutoCreateWorktree,
   showCreateButtons = true,
   hideHeader = false,
+  openSidebarMenuKey,
+  setOpenSidebarMenuKey,
 }) => {
+  const { currentTheme } = useThemeSystem();
   const {
     attributes,
     listeners,
@@ -89,7 +99,45 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
     isDragging,
   } = useSortable({ id });
 
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [imageFailed, setImageFailed] = React.useState(false);
+  const suppressNextToggleRef = React.useRef(false);
+  const menuInstanceKey = `project:${id}`;
+  const isMenuOpen = openSidebarMenuKey === menuInstanceKey;
+
+  React.useEffect(() => {
+    setImageFailed(false);
+  }, [id, projectIconImage?.updatedAt]);
+
+  const ProjectIcon = projectIcon ? PROJECT_ICON_MAP[projectIcon] : null;
+  const iconColor = projectColor ? (PROJECT_COLOR_MAP[projectColor] ?? null) : null;
+  const imageUrl = !imageFailed
+    ? getProjectIconImageUrl({ id, iconImage: projectIconImage }, {
+      themeVariant: currentTheme.metadata.variant,
+      iconColor: currentTheme.colors.surface.foreground,
+    })
+    : null;
+
+  const handleMenuOpenChange = React.useCallback((open: boolean) => {
+    setOpenSidebarMenuKey(open ? menuInstanceKey : null);
+  }, [menuInstanceKey, setOpenSidebarMenuKey]);
+
+  const handleMenuTriggerClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+  }, []);
+
+  const handleToggleMouseDown = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    if (event.button === 2 || (event.button === 0 && event.ctrlKey)) {
+      suppressNextToggleRef.current = true;
+    }
+  }, []);
+
+  const handleToggleClick = React.useCallback(() => {
+    if (suppressNextToggleRef.current) {
+      suppressNextToggleRef.current = false;
+      return;
+    }
+    onToggle();
+  }, [onToggle]);
 
   return (
     <div
@@ -110,123 +158,115 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
 
           <div
             className={cn(
-              'sticky top-0 z-10 pt-2 pb-1.5 w-full text-left cursor-pointer group/project border-b select-none',
-              !isDesktopShell && 'bg-transparent',
+              'w-full text-left group/project select-none',
             )}
-            style={{
-              backgroundColor: isDesktopShell
-                ? (isStuck ? 'transparent' : 'transparent')
-                : undefined,
-              borderColor: isHovered
-                ? 'var(--color-border-hover)'
-                : isCollapsed
-                  ? 'color-mix(in srgb, var(--color-border) 35%, transparent)'
-                  : 'var(--color-border)',
-            }}
+            style={{ backgroundColor: isDesktopShell && isStuck ? 'transparent' : undefined }}
             onMouseEnter={() => onHoverChange(true)}
             onMouseLeave={() => onHoverChange(false)}
-            onContextMenu={(event) => {
-              event.preventDefault();
-              if (!isRenaming) {
-                setIsMenuOpen(true);
-              }
-            }}
           >
-            <div className="relative flex items-center gap-1 px-1" {...attributes}>
-              {isRenaming ? (
-                <form
-                  className="flex min-w-0 flex-1 items-center gap-2"
-                  data-keyboard-avoid="true"
-                  onSubmit={(event) => {
-                    event.preventDefault();
-                    onRenameSave();
-                  }}
-                >
-                  <input
-                    value={renameValue}
-                    onChange={(event) => onRenameValueChange(event.target.value)}
-                    className="flex-1 min-w-0 bg-transparent typography-ui-label outline-none placeholder:text-muted-foreground"
-                    autoFocus
-                    placeholder="Rename project"
-                    onKeyDown={(event) => {
-                      if (event.key === 'Escape') {
-                        event.stopPropagation();
-                        onRenameCancel();
-                        return;
-                      }
-                      if (event.key === ' ' || event.key === 'Enter') {
-                        event.stopPropagation();
-                      }
-                    }}
-                  />
-                  <button
-                    type="submit"
-                    className="shrink-0 text-muted-foreground hover:text-foreground"
-                  >
-                    <RiCheckLine className="size-4" />
-                  </button>
-                  <button
-                    type="button"
-                    onClick={onRenameCancel}
-                    className="shrink-0 text-muted-foreground hover:text-foreground"
-                  >
-                    <RiCloseLine className="size-4" />
-                  </button>
-                </form>
-              ) : (
-                <Tooltip delayDuration={1500}>
-                  <TooltipTrigger asChild>
+            <div className="relative flex items-center gap-1 px-0.5 py-0.5" {...attributes}>
+              <Tooltip delayDuration={1500}>
+                <TooltipTrigger asChild>
                     <button
                       type="button"
-                      onClick={onToggle}
+                      onMouseDown={handleToggleMouseDown}
+                      onClick={handleToggleClick}
                       {...listeners}
-                      className="flex-1 min-w-0 flex items-center gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded-sm cursor-grab active:cursor-grabbing"
+                      className={cn(
+                        'flex-1 min-w-0 flex items-center gap-1.5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded-md cursor-grab active:cursor-grabbing transition-[padding]',
+                        isRepo && !hideDirectoryControls
+                          ? (mobileVariant ? 'pr-20' : isHovered ? 'pr-20' : 'pr-7')
+                          : (mobileVariant ? 'pr-14' : isHovered ? 'pr-14' : 'pr-7'),
+                      )}
                     >
-                      <span className={cn(
-                        'typography-ui font-semibold truncate',
-                        isActiveProject ? 'text-primary' : 'text-foreground group-hover/project:text-foreground',
-                      )}>
-                        {projectLabel}
+                    <span className="inline-flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
+                      <span className={cn('hidden text-muted-foreground h-3.5 w-3.5 items-center justify-center', isHovered && 'inline-flex')}>
+                        {isCollapsed ? <RiArrowRightSLine className="h-3.5 w-3.5" /> : <RiArrowDownSLine className="h-3.5 w-3.5" />}
                       </span>
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={8}>
-                    {projectDescription}
-                  </TooltipContent>
-                </Tooltip>
-              )}
+                      {imageUrl ? (
+                        <span
+                          className={cn('inline-flex h-3.5 w-3.5 items-center justify-center overflow-hidden rounded-[3px]', isHovered && 'hidden')}
+                          style={projectIconBackground ? { backgroundColor: projectIconBackground } : undefined}
+                        >
+                          <img
+                            src={imageUrl}
+                            alt=""
+                            className="h-full w-full object-contain"
+                            draggable={false}
+                            onError={() => setImageFailed(true)}
+                          />
+                        </span>
+                      ) : ProjectIcon ? (
+                        <ProjectIcon className={cn('h-3.5 w-3.5', isHovered && 'hidden')} style={iconColor ? { color: iconColor } : undefined} />
+                      ) : (
+                        <RiFolderLine className={cn('h-3.5 w-3.5 text-muted-foreground/80', isHovered && 'hidden')} style={iconColor ? { color: iconColor } : undefined} />
+                      )}
+                    </span>
+                    <span className={cn(
+                      'text-[14px] font-normal truncate lowercase',
+                      isActiveProject ? 'text-foreground' : 'text-foreground group-hover/project:text-foreground',
+                    )}>
+                      {projectLabel}
+                    </span>
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="right" sideOffset={8}>
+                  {projectDescription}
+                </TooltipContent>
+              </Tooltip>
+
+              <div className={cn(
+                'absolute top-1/2 z-10 flex -translate-y-1/2 items-center gap-1',
+                isRepo && !hideDirectoryControls ? 'right-7' : 'right-0.5',
+              )}>
+                {showCreateButtons && isRepo && !hideDirectoryControls && onNewWorktreeSession ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onNewWorktreeSession();
+                        }}
+                        className={cn(
+                        'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 hover:text-foreground transition-opacity',
+                          mobileVariant ? 'opacity-100' : isHovered ? 'opacity-100' : 'opacity-0 pointer-events-none',
+                        )}
+                        aria-label="New worktree"
+                      >
+                        <RiNodeTree className="h-4 w-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom" sideOffset={4}>
+                      <p>New worktree...</p>
+                    </TooltipContent>
+                  </Tooltip>
+                ) : null}
 
-              {!isRenaming ? (
                 <DropdownMenu
                   open={isMenuOpen}
-                  onOpenChange={setIsMenuOpen}
+                  onOpenChange={handleMenuOpenChange}
                 >
-                  <DropdownMenuTrigger asChild>
-                    <button
-                      type="button"
-                      className={cn(
-                        'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 hover:text-foreground',
-                        mobileVariant ? 'opacity-70' : 'opacity-0 group-hover/project:opacity-100',
-                      )}
-                      aria-label="Project menu"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <RiMore2Line className="h-3.5 w-3.5" />
-                    </button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="min-w-[180px]">
-                    {showCreateButtons && isRepo && !hideDirectoryControls && settingsAutoCreateWorktree && onNewSession && (
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        type="button"
+                        className={cn(
+                          'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 hover:text-foreground',
+                          isMenuOpen ? 'opacity-100 pointer-events-auto' : mobileVariant ? 'opacity-100' : isHovered ? 'opacity-100' : 'opacity-0 pointer-events-none',
+                        )}
+                        aria-label="Project menu"
+                        onClick={handleMenuTriggerClick}
+                      >
+                        <RiMore2Line className="h-3.5 w-3.5" />
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="min-w-[180px]">
+                      {showCreateButtons && !isRepo && !hideDirectoryControls && onNewSession && (
                       <DropdownMenuItem onClick={onNewSession}>
                         <RiAddLine className="mr-1.5 h-4 w-4" />
                         New Session
                       </DropdownMenuItem>
                     )}
-                    {showCreateButtons && isRepo && !hideDirectoryControls && !settingsAutoCreateWorktree && onNewWorktreeSession && (
-                      <DropdownMenuItem onClick={onNewWorktreeSession}>
-                        <RiGitBranchLine className="mr-1.5 h-4 w-4" />
-                        New Session in Worktree
-                      </DropdownMenuItem>
-                    )}
                     {showCreateButtons && isRepo && !hideDirectoryControls && (
                       <DropdownMenuItem onClick={onOpenMultiRunLauncher}>
                         <ArrowsMerge className="mr-1.5 h-4 w-4" />
@@ -244,53 +284,35 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
                       <RiCloseLine className="mr-1.5 h-4 w-4" />
                       Close Project
                     </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              ) : null}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+              </div>
 
-              {showCreateButtons && isRepo && !hideDirectoryControls && onNewWorktreeSession && settingsAutoCreateWorktree && !isRenaming && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onNewWorktreeSession();
-                      }}
-                      className={cn(
-                        'inline-flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 hover:text-foreground hover:bg-interactive-hover/50 flex-shrink-0',
-                        mobileVariant ? 'opacity-70' : 'opacity-100',
-                      )}
-                      aria-label="New session in worktree"
-                    >
-                      <RiGitBranchLine className="h-4 w-4" />
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom" sideOffset={4}>
-                    <p>New session in worktree</p>
-                  </TooltipContent>
-                </Tooltip>
-              )}
-              {showCreateButtons && (!settingsAutoCreateWorktree || !isRepo) && !isRenaming && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onNewSession();
-                      }}
-                      className="inline-flex h-6 w-6 items-center justify-center text-muted-foreground hover:text-foreground hover:bg-interactive-hover/50 flex-shrink-0 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
-                      aria-label="New session"
-                    >
-                      <RiAddLine className="h-4 w-4" />
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom" sideOffset={4}>
-                    <p>New session</p>
-                  </TooltipContent>
-                </Tooltip>
-              )}
+              {showCreateButtons && onNewSession ? (
+                <div className="absolute right-0.5 top-1/2 z-10 -translate-y-1/2">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onNewSession();
+                        }}
+                        className={cn(
+                          'h-6 w-6 rounded-md text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+                          mobileVariant ? 'inline-flex items-center justify-center' : isHovered ? 'inline-flex items-center justify-center' : 'hidden',
+                        )}
+                        aria-label={isRepo ? 'New draft session' : 'New session'}
+                      >
+                        <RiAddLine className="h-4 w-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom" sideOffset={4}>
+                      <p>{isRepo ? 'New draft session' : 'New session'}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+              ) : null}
             </div>
           </div>
         </>
@@ -304,17 +326,22 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
 const SortableGroupItemBase: React.FC<{
   id: string;
   disabled?: boolean;
-  children: React.ReactNode;
+  children: React.ReactNode | ((dragHandleProps: SortableDragHandleProps) => React.ReactNode);
 }> = ({ id, disabled = false, children }) => {
   const {
-    attributes,
     listeners,
     setNodeRef,
+    setActivatorNodeRef,
     transform,
     transition,
     isDragging,
   } = useSortable({ id, disabled });
 
+  const dragHandleProps = React.useMemo<SortableDragHandleProps>(() => ({
+    listeners,
+    setActivatorNodeRef,
+  }), [listeners, setActivatorNodeRef]);
+
   return (
     <div
       ref={setNodeRef}
@@ -326,10 +353,8 @@ const SortableGroupItemBase: React.FC<{
         'space-y-0.5 rounded-md',
         isDragging && 'opacity-50',
       )}
-      {...attributes}
-      {...listeners}
     >
-      {children}
+      {typeof children === 'function' ? children(dragHandleProps) : children}
     </div>
   );
 };

packages/ui/src/components/session/sidebar/utils.tsx

@@ -45,6 +45,34 @@ export const formatSessionDateLabel = (updatedMs: number): string => {
   return formatDateLabel(updatedMs);
 };
 
+export const formatSessionCompactDateLabel = (updatedMs: number): string => {
+  const diff = Math.max(0, Date.now() - updatedMs);
+
+  const minute = 60_000;
+  const hour = 60 * minute;
+  const day = 24 * hour;
+  const week = 7 * day;
+  const month = 30 * day;
+  const year = 365 * day;
+
+  if (diff < hour) {
+    return `${Math.max(1, Math.floor(diff / minute))}m`;
+  }
+  if (diff < day) {
+    return `${Math.floor(diff / hour)}h`;
+  }
+  if (diff < week) {
+    return `${Math.floor(diff / day)}d`;
+  }
+  if (diff < 5 * week) {
+    return `${Math.floor(diff / week)}w`;
+  }
+  if (diff < year) {
+    return `${Math.floor(diff / month)}mo`;
+  }
+  return `${Math.floor(diff / year)}y`;
+};
+
 export const normalizePath = (value?: string | null) => {
   if (!value) {
     return null;