From 10851bd7acf8f37e767326992821d2d19a86c8ca Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Wed, 25 Feb 2026 14:32:23 +0200
Subject: [PATCH] feat: move projects to sidebar rail and speed up session
 switching (#506)

* feat: move projects from header tabs to left sidebar rail

* refactor: remove variant from git generation session context

* feat: implemented drandrop action for navrails

* refactor: improve sidebar drag-and-drop smoothness and remove floating overlay

* fix: prevent mobile nav rail touch from closing drawer and opening menu

* fix: hide header tabs on desktop

* fix: prevent session flicker when switching projects

* style: soften chat panel divider borders

* style: improve icon contrast across core navigation

* fix: stabilize session selection during project switching

* style: unify sidebar surfaces and transparent section layers

* style: remove UI shadows and keep only scroll shadow

* perf: speed up project switching with cached session loading

* perf: speed up Git changes view and background refresh

* perf: make session switching lighter and less aggressive

* perf: optimized sessions list loading while project switching

* perf: smooth chat rendering and reduce interaction spikes

* fix: restore reliable load older messages visibility
---
 packages/ui/src/App.css                       |   4 +-
 .../chat/AgentMentionAutocomplete.tsx         |   4 +-
 .../ui/src/components/chat/ChatContainer.tsx  |  17 +-
 packages/ui/src/components/chat/ChatInput.tsx |   8 +-
 .../ui/src/components/chat/ChatMessage.tsx    |   2 +-
 .../components/chat/CommandAutocomplete.tsx   |   4 +-
 .../chat/FileMentionAutocomplete.tsx          |   4 +-
 .../src/components/chat/MarkdownRenderer.tsx  |   4 +-
 .../ui/src/components/chat/MessageList.tsx    |  86 +-
 .../src/components/chat/SkillAutocomplete.tsx |   2 +-
 packages/ui/src/components/chat/StatusRow.tsx |   2 +-
 .../chat/contexts/TurnGroupingContext.tsx     | 225 ++++-
 .../chat/message/TextSelectionMenu.tsx        |   2 +-
 .../components/comments/InlineCommentCard.tsx |   2 +-
 .../comments/InlineCommentInput.tsx           |   2 +-
 .../components/desktop/OpenInAppButton.tsx    |   2 +-
 .../ui/src/components/layout/ContextPanel.tsx |   3 +-
 packages/ui/src/components/layout/Header.tsx  | 884 ++----------------
 .../ui/src/components/layout/MainLayout.tsx   |  27 +-
 packages/ui/src/components/layout/NavRail.tsx | 690 ++++++++++++++
 .../ui/src/components/layout/RightSidebar.tsx |   2 +-
 .../components/layout/RightSidebarTabs.tsx    |   4 +-
 packages/ui/src/components/layout/Sidebar.tsx | 159 +---
 .../components/layout/SidebarFilesTree.tsx    |   6 +-
 .../components/multirun/ModelMultiSelect.tsx  |   2 +-
 .../session/DirectoryAutocomplete.tsx         |   2 +-
 .../src/components/session/SessionSidebar.tsx | 346 ++++---
 packages/ui/src/components/ui/HelpDialog.tsx  |   2 +-
 .../ui/src/components/ui/animated-tabs.tsx    |   2 +-
 .../ui/src/components/ui/dropdown-menu.tsx    |   4 +-
 packages/ui/src/components/ui/select.tsx      |   2 +-
 packages/ui/src/components/ui/slider.tsx      |   4 +-
 packages/ui/src/components/ui/switch.tsx      |   4 +-
 packages/ui/src/components/views/GitView.tsx  |  48 +-
 .../src/components/views/SettingsWindow.tsx   |   2 +-
 .../components/views/git/AIHighlightsBox.tsx  |   2 +-
 .../ui/src/components/views/git/ChangeRow.tsx |  18 +-
 .../components/views/git/ChangesSection.tsx   | 100 +-
 .../src/components/views/git/CommitInput.tsx  |   2 +-
 .../ui/src/components/views/git/GitHeader.tsx |   4 +-
 .../views/git/PullRequestSection.tsx          |   6 +-
 packages/ui/src/hooks/useGitPollingHook.ts    |   2 +-
 packages/ui/src/index.css                     |  57 ++
 packages/ui/src/lib/gitApi.ts                 |  10 -
 .../ui/src/lib/theme/themes/flexoki-dark.json |  16 +-
 packages/ui/src/stores/messageStore.ts        |  15 +-
 packages/ui/src/stores/sessionStore.ts        | 407 +++++---
 packages/ui/src/stores/useGitStore.ts         | 148 ++-
 packages/ui/src/stores/useProjectsStore.ts    |  20 +
 packages/ui/src/stores/useSessionStore.ts     |  23 +-
 packages/ui/src/styles/fireworks.css          |   1 -
 51 files changed, 1995 insertions(+), 1399 deletions(-)
 create mode 100644 packages/ui/src/components/layout/NavRail.tsx

diff --git a/packages/ui/src/App.css b/packages/ui/src/App.css
index b9d355df..6ee5bff3 100644
--- a/packages/ui/src/App.css
+++ b/packages/ui/src/App.css
@@ -12,10 +12,10 @@
   transition: filter 300ms;
 }
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+  filter: none;
 }
 .logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+  filter: none;
 }
 
 @keyframes logo-spin {
diff --git a/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx b/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx
index 05fc0acf..3a1aa39d 100644
--- a/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx
+++ b/packages/ui/src/components/chat/AgentMentionAutocomplete.tsx
@@ -182,7 +182,7 @@ export const AgentMentionAutocomplete = React.forwardRef<AgentMentionAutocomplet
   return (
     <div
       ref={containerRef}
-      className="absolute z-[100] min-w-0 w-full max-w-[360px] max-h-60 bg-background border-2 border-border/60 rounded-xl shadow-md bottom-full mb-2 left-0 flex flex-col"
+      className="absolute z-[100] min-w-0 w-full max-w-[360px] max-h-60 bg-background border-2 border-border/60 rounded-xl shadow-none bottom-full mb-2 left-0 flex flex-col"
     >
       {showTabs ? (
         <div className="px-2 pt-2 pb-1 border-b border-border/60">
@@ -198,7 +198,7 @@ export const AgentMentionAutocomplete = React.forwardRef<AgentMentionAutocomplet
                 className={cn(
                   'flex-1 px-2.5 py-1 rounded-md typography-meta font-semibold transition-none',
                   activeTab === tab.id
-                    ? 'bg-interactive-selection text-interactive-selection-foreground shadow-sm'
+                    ? 'bg-interactive-selection text-interactive-selection-foreground shadow-none'
                     : 'text-muted-foreground hover:bg-interactive-hover/50'
                 )}
                 onPointerDown={(event) => {
diff --git a/packages/ui/src/components/chat/ChatContainer.tsx b/packages/ui/src/components/chat/ChatContainer.tsx
index a9f9aeb3..5741e882 100644
--- a/packages/ui/src/components/chat/ChatContainer.tsx
+++ b/packages/ui/src/components/chat/ChatContainer.tsx
@@ -176,8 +176,8 @@ export const ChatContainer: React.FC = () => {
     const [turnStart, setTurnStart] = React.useState(0);
     const turnHandleRef = React.useRef<number | null>(null);
     const turnIdleRef = React.useRef(false);
-    const TURN_INIT = 20;
-    const TURN_BATCH = 20;
+    const TURN_INIT = 5;
+    const TURN_BATCH = 8;
 
     const userTurnIndexes = React.useMemo(() => {
         const indexes: number[] = [];
@@ -304,7 +304,7 @@ export const ChatContainer: React.FC = () => {
 
     const hasMoreAbove = React.useMemo(() => {
         if (!memoryState) {
-            return false;
+            return sessionMessages.length >= getMemoryLimits().HISTORICAL_MESSAGES;
         }
         if (memoryState.historyComplete === true) {
             return false;
@@ -323,6 +323,13 @@ export const ChatContainer: React.FC = () => {
 
         return false;
     }, [memoryState, sessionMessages.length]);
+
+    const hasHistoryMetadata = React.useMemo(() => {
+        if (!memoryState) {
+            return false;
+        }
+        return memoryState.hasMoreAbove !== undefined || memoryState.historyComplete !== undefined;
+    }, [memoryState]);
     const [isLoadingOlder, setIsLoadingOlder] = React.useState(false);
     React.useEffect(() => {
         setIsLoadingOlder(false);
@@ -384,7 +391,7 @@ export const ChatContainer: React.FC = () => {
         }
 
         const hasSessionMessages = hasSessionMessagesEntry;
-        if (hasSessionMessages) {
+        if (hasSessionMessages && hasHistoryMetadata) {
             return;
         }
 
@@ -410,7 +417,7 @@ export const ChatContainer: React.FC = () => {
         };
 
         void load();
-    }, [currentSessionId, hasSessionMessagesEntry, isPinned, loadMessages, scrollToBottom, sessionMessages.length, sessionStatusForCurrent.type]);
+    }, [currentSessionId, hasHistoryMetadata, hasSessionMessagesEntry, isPinned, loadMessages, scrollToBottom, sessionMessages.length, sessionStatusForCurrent.type]);
 
     if (!currentSessionId && !draftOpen) {
         return (
diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx
index 8afddffd..22389f94 100644
--- a/packages/ui/src/components/chat/ChatInput.tsx
+++ b/packages/ui/src/components/chat/ChatInput.tsx
@@ -1820,7 +1820,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
     const stopIconSizeClass = isMobile ? 'h-6 w-6' : (isVSCode ? 'h-4 w-4' : 'h-5 w-5');
     const iconSizeClass = isMobile ? 'h-[18px] w-[18px]' : (isVSCode ? 'h-4 w-4' : 'h-[18px] w-[18px]');
 
-    const iconButtonBaseClass = 'flex items-center justify-center text-muted-foreground transition-none outline-none focus:outline-none flex-shrink-0';
+    const iconButtonBaseClass = 'flex items-center justify-center text-foreground transition-none outline-none focus:outline-none flex-shrink-0';
     const footerIconButtonClass = cn(iconButtonBaseClass, buttonSizeClass);
 
     // Send button - respects queue mode setting
@@ -1981,8 +1981,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                     type="button"
                     className={cn(
                         footerIconButtonClass,
-                        'rounded-md text-muted-foreground',
-                        'hover:bg-interactive-hover/40 hover:text-foreground'
+                        'rounded-md',
+                        'hover:bg-interactive-hover/40'
                     )}
                     onPointerDownCapture={(event) => {
                         if (event.pointerType === 'touch') {
@@ -2288,7 +2288,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                                                     'rounded-md',
                                                     isExpandedInput
                                                         ? 'text-primary'
-                                                        : 'text-muted-foreground hover:bg-[var(--interactive-hover)]/40 hover:text-foreground'
+                                                        : 'text-foreground hover:bg-[var(--interactive-hover)]/40'
                                                 )}
                                                 onMouseDown={(event) => {
                                                     event.preventDefault();
diff --git a/packages/ui/src/components/chat/ChatMessage.tsx b/packages/ui/src/components/chat/ChatMessage.tsx
index 74cac807..93204349 100644
--- a/packages/ui/src/components/chat/ChatMessage.tsx
+++ b/packages/ui/src/components/chat/ChatMessage.tsx
@@ -920,7 +920,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
                         displayParts.length === 0 ? null : (
                         <FadeInOnReveal>
                             <div className="flex justify-end">
-                                <div style={{ backgroundColor: 'var(--chat-user-message-bg)' }} className="max-w-[85%] rounded-2xl rounded-br-sm px-5 py-3 shadow-sm border border-primary/5">
+                                <div style={{ backgroundColor: 'var(--chat-user-message-bg)' }} className="max-w-[85%] rounded-2xl rounded-br-sm px-5 py-3 shadow-none border border-primary/5">
                                     <MessageBody
                                         messageId={message.info.id}
                                         parts={displayParts}
diff --git a/packages/ui/src/components/chat/CommandAutocomplete.tsx b/packages/ui/src/components/chat/CommandAutocomplete.tsx
index 548dec65..97565ec3 100644
--- a/packages/ui/src/components/chat/CommandAutocomplete.tsx
+++ b/packages/ui/src/components/chat/CommandAutocomplete.tsx
@@ -252,7 +252,7 @@ export const CommandAutocomplete = React.forwardRef<CommandAutocompleteHandle, C
   return (
     <div
       ref={containerRef}
-      className="absolute z-[100] min-w-0 w-full max-w-[450px] max-h-64 bg-background border-2 border-border/60 rounded-xl shadow-md bottom-full mb-2 left-0 flex flex-col"
+      className="absolute z-[100] min-w-0 w-full max-w-[450px] max-h-64 bg-background border-2 border-border/60 rounded-xl shadow-none bottom-full mb-2 left-0 flex flex-col"
       style={style}
     >
       {showTabs ? (
@@ -269,7 +269,7 @@ export const CommandAutocomplete = React.forwardRef<CommandAutocompleteHandle, C
                 className={cn(
                   'flex-1 px-2.5 py-1 rounded-md typography-meta font-semibold transition-none',
                   activeTab === tab.id
-                    ? 'bg-interactive-selection text-interactive-selection-foreground shadow-sm'
+                    ? 'bg-interactive-selection text-interactive-selection-foreground shadow-none'
                     : 'text-muted-foreground hover:bg-interactive-hover/50'
                 )}
                 onPointerDown={(event) => {
diff --git a/packages/ui/src/components/chat/FileMentionAutocomplete.tsx b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
index 3c3ad059..fa5fa84a 100644
--- a/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
+++ b/packages/ui/src/components/chat/FileMentionAutocomplete.tsx
@@ -368,7 +368,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
   return (
       <div
         ref={containerRef}
-        className="absolute z-[100] min-w-0 w-full max-w-[520px] max-h-64 bg-background border-2 border-border/60 rounded-xl shadow-md bottom-full mb-2 left-0 flex flex-col"
+        className="absolute z-[100] min-w-0 w-full max-w-[520px] max-h-64 bg-background border-2 border-border/60 rounded-xl shadow-none bottom-full mb-2 left-0 flex flex-col"
         style={style}
       >
         {showTabs ? (
@@ -385,7 +385,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
                   className={cn(
                     'flex-1 px-2.5 py-1 rounded-md typography-meta font-semibold transition-none',
                     activeTab === tab.id
-                      ? 'bg-interactive-selection text-interactive-selection-foreground shadow-sm'
+                      ? 'bg-interactive-selection text-interactive-selection-foreground shadow-none'
                       : 'text-muted-foreground hover:bg-interactive-hover/50'
                   )}
                   onPointerDown={(event) => {
diff --git a/packages/ui/src/components/chat/MarkdownRenderer.tsx b/packages/ui/src/components/chat/MarkdownRenderer.tsx
index 1a41daf3..8d4e80f6 100644
--- a/packages/ui/src/components/chat/MarkdownRenderer.tsx
+++ b/packages/ui/src/components/chat/MarkdownRenderer.tsx
@@ -303,7 +303,7 @@ const TableCopyButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement | nul
         {copied ? <RiCheckLine className="size-3.5" /> : <RiFileCopyLine className="size-3.5" />}
       </button>
       {showMenu && (
-        <div className="absolute top-full right-0 z-10 mt-1 min-w-[100px] overflow-hidden rounded-md border border-border bg-background shadow-lg">
+        <div className="absolute top-full right-0 z-10 mt-1 min-w-[100px] overflow-hidden rounded-md border border-border bg-background shadow-none">
           <button
             className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-interactive-hover/40"
             onClick={() => handleCopy('csv')}
@@ -364,7 +364,7 @@ const TableDownloadButton: React.FC<{ tableRef: React.RefObject<HTMLDivElement |
         <RiDownloadLine className="size-3.5" />
       </button>
       {showMenu && (
-        <div className="absolute top-full right-0 z-10 mt-1 min-w-[100px] overflow-hidden rounded-md border border-border bg-background shadow-lg">
+        <div className="absolute top-full right-0 z-10 mt-1 min-w-[100px] overflow-hidden rounded-md border border-border bg-background shadow-none">
           <button
             className="w-full px-3 py-1.5 text-left text-sm transition-colors hover:bg-interactive-hover/40"
             onClick={() => handleDownload('csv')}
diff --git a/packages/ui/src/components/chat/MessageList.tsx b/packages/ui/src/components/chat/MessageList.tsx
index c3f2bf33..3c511f7e 100644
--- a/packages/ui/src/components/chat/MessageList.tsx
+++ b/packages/ui/src/components/chat/MessageList.tsx
@@ -45,6 +45,34 @@ const getMessageParentId = (message: ChatMessageEntry): string | null => {
     return typeof parentID === 'string' && parentID.trim().length > 0 ? parentID : null;
 };
 
+const hasSameTurnStructure = (prev: ChatMessageEntry[], next: ChatMessageEntry[]): boolean => {
+    if (prev === next) {
+        return true;
+    }
+    if (prev.length !== next.length) {
+        return false;
+    }
+
+    for (let index = 0; index < prev.length; index += 1) {
+        const prevMessage = prev[index];
+        const nextMessage = next[index];
+
+        if (prevMessage.info.id !== nextMessage.info.id) {
+            return false;
+        }
+
+        if (resolveMessageRole(prevMessage) !== resolveMessageRole(nextMessage)) {
+            return false;
+        }
+
+        if (getMessageParentId(prevMessage) !== getMessageParentId(nextMessage)) {
+            return false;
+        }
+    }
+
+    return true;
+};
+
 const isUserShellMarkerMessage = (message: ChatMessageEntry | undefined): boolean => {
     if (!message) return false;
     if (resolveMessageRole(message) !== 'user') return false;
@@ -423,6 +451,13 @@ const MessageList: React.FC<MessageListProps> = ({
     scrollToBottom,
 }) => {
     const { isMobile } = useDeviceInfo();
+    const turnStructureCacheRef = React.useRef<{
+        messages: ChatMessageEntry[];
+        turns: Turn[];
+        ungroupedMessages: ChatMessageEntry[];
+    } | null>(null);
+    const normalizedMessageCacheRef = React.useRef<Map<string, { source: ChatMessageEntry; normalized: ChatMessageEntry }>>(new Map());
+
     React.useEffect(() => {
         if (permissions.length === 0 && questions.length === 0) {
             return;
@@ -432,6 +467,7 @@ const MessageList: React.FC<MessageListProps> = ({
 
     const baseDisplayMessages = React.useMemo(() => {
         const seenIds = new Set<string>();
+        const nextNormalizedCache = new Map<string, { source: ChatMessageEntry; normalized: ChatMessageEntry }>();
         const normalizedMessages = messages
             .filter((message) => {
                 const messageId = message.info?.id;
@@ -443,19 +479,30 @@ const MessageList: React.FC<MessageListProps> = ({
                 }
                 return true;
             })
-            .map((message) => {
-                const filteredParts = filterSyntheticParts(message.parts);
-                // Optimization: If parts haven't changed, return the original message object.
-                // This preserves referential equality and prevents unnecessary re-renders of ChatMessage (which is memoized).
-                if (filteredParts === message.parts) {
-                    return message;
+            .map((message, index) => {
+                const messageId = typeof message.info?.id === 'string' && message.info.id.length > 0
+                    ? message.info.id
+                    : `__idx_${index}`;
+                const cacheKey = `${messageId}:${resolveMessageRole(message) ?? 'unknown'}`;
+                const cached = normalizedMessageCacheRef.current.get(cacheKey);
+                if (cached && cached.source === message) {
+                    nextNormalizedCache.set(cacheKey, cached);
+                    return cached.normalized;
                 }
-                return {
-                    ...message,
-                    parts: filteredParts,
-                };
+
+                const filteredParts = filterSyntheticParts(message.parts);
+                const normalized = filteredParts === message.parts
+                    ? message
+                    : {
+                        ...message,
+                        parts: filteredParts,
+                    };
+                nextNormalizedCache.set(cacheKey, { source: message, normalized });
+                return normalized;
             });
 
+        normalizedMessageCacheRef.current = nextNormalizedCache;
+
         const output: ChatMessageEntry[] = [];
 
         for (let index = 0; index < normalizedMessages.length; index += 1) {
@@ -573,6 +620,14 @@ const MessageList: React.FC<MessageListProps> = ({
     }, [activeRetryStatus, baseDisplayMessages]);
 
     const { turns, ungroupedMessages } = React.useMemo(() => {
+        const cached = turnStructureCacheRef.current;
+        if (cached && hasSameTurnStructure(cached.messages, displayMessages)) {
+            return {
+                turns: cached.turns,
+                ungroupedMessages: cached.ungroupedMessages,
+            };
+        }
+
         const groupedTurns = detectTurns(displayMessages);
         const groupedMessageIds = new Set<string>();
 
@@ -584,11 +639,18 @@ const MessageList: React.FC<MessageListProps> = ({
         });
 
         const ungrouped = displayMessages.filter((message) => !groupedMessageIds.has(message.info.id));
-
-        return {
+        const nextValue = {
             turns: groupedTurns,
             ungroupedMessages: ungrouped,
         };
+
+        turnStructureCacheRef.current = {
+            messages: displayMessages,
+            turns: groupedTurns,
+            ungroupedMessages: ungrouped,
+        };
+
+        return nextValue;
     }, [displayMessages]);
 
     return (
diff --git a/packages/ui/src/components/chat/SkillAutocomplete.tsx b/packages/ui/src/components/chat/SkillAutocomplete.tsx
index 41059509..f5f0c4e3 100644
--- a/packages/ui/src/components/chat/SkillAutocomplete.tsx
+++ b/packages/ui/src/components/chat/SkillAutocomplete.tsx
@@ -148,7 +148,7 @@ export const SkillAutocomplete = React.forwardRef<SkillAutocompleteHandle, Skill
   return (
     <div
       ref={containerRef}
-      className="absolute z-[100] min-w-0 w-full max-w-[360px] max-h-60 bg-background border-2 border-border/60 rounded-xl shadow-md bottom-full mb-2 left-0 flex flex-col"
+      className="absolute z-[100] min-w-0 w-full max-w-[360px] max-h-60 bg-background border-2 border-border/60 rounded-xl shadow-none bottom-full mb-2 left-0 flex flex-col"
       style={style}
     >
       <ScrollableOverlay outerClassName="flex-1 min-h-0" className="px-0 pb-2" fillContainer={false}>
diff --git a/packages/ui/src/components/chat/StatusRow.tsx b/packages/ui/src/components/chat/StatusRow.tsx
index 21b4cc55..88065a00 100644
--- a/packages/ui/src/components/chat/StatusRow.tsx
+++ b/packages/ui/src/components/chat/StatusRow.tsx
@@ -229,7 +229,7 @@ export const StatusRow: React.FC<StatusRowProps> = ({
               className={cn(
                 "absolute right-0 bottom-full mb-1 z-50",
                 "w-max min-w-[200px]",
-                "rounded-xl border border-border bg-background shadow-md",
+                "rounded-xl border border-border bg-background shadow-none",
                 "animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2",
                 "duration-150"
               )}
diff --git a/packages/ui/src/components/chat/contexts/TurnGroupingContext.tsx b/packages/ui/src/components/chat/contexts/TurnGroupingContext.tsx
index 0a7e6295..f1671f09 100644
--- a/packages/ui/src/components/chat/contexts/TurnGroupingContext.tsx
+++ b/packages/ui/src/components/chat/contexts/TurnGroupingContext.tsx
@@ -510,6 +510,26 @@ const getMessageRole = (message: ChatMessageEntry): string => {
     return typeof role === 'string' ? role : '';
 };
 
+const hasSameTurnStructure = (prev: ChatMessageEntry[], next: ChatMessageEntry[]): boolean => {
+    if (prev === next) {
+        return true;
+    }
+    if (prev.length !== next.length) {
+        return false;
+    }
+
+    for (let index = 0; index < prev.length; index += 1) {
+        if (prev[index]?.info?.id !== next[index]?.info?.id) {
+            return false;
+        }
+        if (getMessageRole(prev[index]) !== getMessageRole(next[index])) {
+            return false;
+        }
+    }
+
+    return true;
+};
+
 const getStructureKey = (messages: ChatMessageEntry[]): string => {
     if (messages.length === 0) return '';
     return messages
@@ -517,13 +537,116 @@ const getStructureKey = (messages: ChatMessageEntry[]): string => {
         .join('|');
 };
 
+const isAppendOnlyChange = (prev: ChatMessageEntry[], next: ChatMessageEntry[]): boolean => {
+    if (prev.length > next.length) {
+        return false;
+    }
+
+    for (let index = 0; index < prev.length; index += 1) {
+        if (prev[index]?.info?.id !== next[index]?.info?.id) {
+            return false;
+        }
+        if (getMessageRole(prev[index]) !== getMessageRole(next[index])) {
+            return false;
+        }
+    }
+
+    return true;
+};
+
+const appendTurnsIncremental = (prevTurns: Turn[], appendedMessages: ChatMessageEntry[]): Turn[] => {
+    if (appendedMessages.length === 0) {
+        return prevTurns;
+    }
+
+    const nextTurns = prevTurns.length > 0
+        ? [
+            ...prevTurns.slice(0, -1),
+            {
+                ...prevTurns[prevTurns.length - 1],
+                assistantMessages: [...prevTurns[prevTurns.length - 1].assistantMessages],
+            },
+        ]
+        : [];
+
+    let currentTurn = nextTurns.length > 0 ? nextTurns[nextTurns.length - 1] : null;
+
+    appendedMessages.forEach((message) => {
+        const role = getMessageRole(message);
+        if (role === 'user') {
+            currentTurn = {
+                turnId: message.info.id,
+                userMessage: message,
+                assistantMessages: [],
+            };
+            nextTurns.push(currentTurn);
+            return;
+        }
+
+        if (role === 'assistant' && currentTurn) {
+            currentTurn.assistantMessages.push(message);
+        }
+    });
+
+    return nextTurns;
+};
+
+const appendNeighborsIncremental = (
+    prevNeighbors: Map<string, NeighborInfo>,
+    prevMessages: ChatMessageEntry[],
+    nextMessages: ChatMessageEntry[],
+): Map<string, NeighborInfo> => {
+    if (nextMessages.length <= prevMessages.length) {
+        return prevNeighbors;
+    }
+
+    const appended = nextMessages.slice(prevMessages.length);
+    if (appended.length === 0) {
+        return prevNeighbors;
+    }
+
+    const nextNeighbors = new Map(prevNeighbors);
+    const previousTail = prevMessages.length > 0 ? prevMessages[prevMessages.length - 1] : undefined;
+    if (previousTail) {
+        nextNeighbors.set(previousTail.info.id, {
+            previousMessage: prevMessages.length > 1 ? prevMessages[prevMessages.length - 2] : undefined,
+            nextMessage: appended[0],
+        });
+    }
+
+    appended.forEach((message, index) => {
+        const previousMessage = index === 0 ? previousTail : appended[index - 1];
+        const nextMessage = index < appended.length - 1 ? appended[index + 1] : undefined;
+        nextNeighbors.set(message.info.id, {
+            previousMessage,
+            nextMessage,
+        });
+    });
+
+    return nextNeighbors;
+};
+
 export const TurnGroupingProvider: React.FC<TurnGroupingProviderProps> = ({ messages, children }) => {
     const { isWorking: sessionIsWorking } = useCurrentSessionActivity();
     const toolCallExpansion = useUIStore((state) => state.toolCallExpansion);
     const showTextJustificationActivity = useUIStore((state) => state.showTextJustificationActivity);
     const defaultActivityExpanded = toolCallExpansion === 'activity' || toolCallExpansion === 'detailed';
-    const structureKey = React.useMemo(() => getStructureKey(messages), [messages]);
+    const structureKeyCacheRef = React.useRef<{ messages: ChatMessageEntry[]; key: string } | null>(null);
+    const structureKey = React.useMemo(() => {
+        const cached = structureKeyCacheRef.current;
+        if (cached && hasSameTurnStructure(cached.messages, messages)) {
+            return cached.key;
+        }
+
+        const key = getStructureKey(messages);
+        structureKeyCacheRef.current = {
+            messages,
+            key,
+        };
+        return key;
+    }, [messages]);
     const staticCacheRef = React.useRef<{
+        messages: ChatMessageEntry[];
         structureKey: string;
         defaultActivityExpanded: boolean;
         showTextJustificationActivity: boolean;
@@ -542,6 +665,76 @@ export const TurnGroupingProvider: React.FC<TurnGroupingProviderProps> = ({ mess
             return cached.value;
         }
 
+        if (
+            cached &&
+            cached.defaultActivityExpanded === defaultActivityExpanded &&
+            cached.showTextJustificationActivity === showTextJustificationActivity &&
+            isAppendOnlyChange(cached.messages, messages)
+        ) {
+            const appendedMessages = messages.slice(cached.messages.length);
+            const turns = appendTurnsIncremental(cached.value.turns, appendedMessages);
+            const lastTurnId = turns.length > 0 ? turns[turns.length - 1]!.turnId : null;
+
+            const messageToTurn = new Map(cached.value.messageToTurn);
+            let currentTurn = turns.length > 0 ? turns[turns.length - 1] : null;
+            appendedMessages.forEach((message) => {
+                const role = getMessageRole(message);
+                if (role === 'user') {
+                    currentTurn = turns.find((turn) => turn.turnId === message.info.id) ?? null;
+                    if (currentTurn) {
+                        messageToTurn.set(message.info.id, currentTurn);
+                    }
+                    return;
+                }
+                if (role === 'assistant' && currentTurn) {
+                    messageToTurn.set(message.info.id, currentTurn);
+                }
+            });
+
+            const turnActivityInfo = new Map(cached.value.turnActivityInfo);
+            const previousLastTurnId = cached.value.lastTurnId;
+            if (previousLastTurnId && previousLastTurnId !== lastTurnId) {
+                const finalizedTurn = turns.find((turn) => turn.turnId === previousLastTurnId);
+                if (finalizedTurn) {
+                    turnActivityInfo.set(previousLastTurnId, getTurnActivityInfo(finalizedTurn, showTextJustificationActivity));
+                }
+            }
+            if (lastTurnId) {
+                turnActivityInfo.delete(lastTurnId);
+            }
+
+            const messageNeighbors = appendNeighborsIncremental(cached.value.messageNeighbors, cached.messages, messages);
+
+            const lastTurnMessageIds = new Set<string>();
+            if (turns.length > 0) {
+                const lastTurn = turns[turns.length - 1]!;
+                lastTurnMessageIds.add(lastTurn.userMessage.info.id);
+                lastTurn.assistantMessages.forEach((msg) => {
+                    lastTurnMessageIds.add(msg.info.id);
+                });
+            }
+
+            const value: TurnGroupingStaticData = {
+                turns,
+                messageToTurn,
+                turnActivityInfo,
+                lastTurnId,
+                lastTurnMessageIds,
+                defaultActivityExpanded,
+                messageNeighbors,
+            };
+
+            staticCacheRef.current = {
+                messages,
+                structureKey,
+                defaultActivityExpanded,
+                showTextJustificationActivity,
+                value,
+            };
+
+            return value;
+        }
+
         const turns = detectTurns(messages);
         const lastTurnId = turns.length > 0 ? turns[turns.length - 1]!.turnId : null;
         
@@ -582,6 +775,7 @@ export const TurnGroupingProvider: React.FC<TurnGroupingProviderProps> = ({ mess
         };
 
         staticCacheRef.current = {
+            messages,
             structureKey,
             defaultActivityExpanded,
             showTextJustificationActivity,
@@ -601,12 +795,29 @@ export const TurnGroupingProvider: React.FC<TurnGroupingProviderProps> = ({ mess
         if (!lastTurn) return undefined;
         // Re-slice assistant messages from the live `messages` array so that
         // streamed part updates are reflected without re-detecting all turns.
-        const userIdx = messages.findIndex((m) => m.info.id === lastTurn.userMessage.info.id);
-        if (userIdx < 0) return getTurnActivityInfo(lastTurn, showTextJustificationActivity);
-        const liveAssistant = messages.slice(userIdx + 1).filter((m) => {
-            const role = (m.info as { clientRole?: string | null }).clientRole ?? m.info.role;
-            return role === 'assistant';
-        });
+        const lastTurnUserId = lastTurn.userMessage.info.id;
+        const liveAssistant: ChatMessageEntry[] = [];
+        for (let index = messages.length - 1; index >= 0; index -= 1) {
+            const candidate = messages[index];
+            if (!candidate) {
+                continue;
+            }
+
+            if (candidate.info.id === lastTurnUserId) {
+                break;
+            }
+
+            const role = (candidate.info as { clientRole?: string | null }).clientRole ?? candidate.info.role;
+            if (role === 'assistant') {
+                liveAssistant.push(candidate);
+            }
+        }
+
+        if (liveAssistant.length === 0 && messages.every((message) => message.info.id !== lastTurnUserId)) {
+            return getTurnActivityInfo(lastTurn, showTextJustificationActivity);
+        }
+
+        liveAssistant.reverse();
         const liveTurn: Turn = { ...lastTurn, assistantMessages: liveAssistant };
         return getTurnActivityInfo(liveTurn, showTextJustificationActivity);
     }, [staticValue, messages, showTextJustificationActivity]);
diff --git a/packages/ui/src/components/chat/message/TextSelectionMenu.tsx b/packages/ui/src/components/chat/message/TextSelectionMenu.tsx
index eb4c777c..64d672b3 100644
--- a/packages/ui/src/components/chat/message/TextSelectionMenu.tsx
+++ b/packages/ui/src/components/chat/message/TextSelectionMenu.tsx
@@ -321,7 +321,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
         className={cn(
           'flex items-center gap-1',
           'rounded-lg border border-[var(--interactive-border)]',
-          'bg-[var(--surface-elevated)] shadow-lg',
+          'bg-[var(--surface-elevated)] shadow-none',
           'px-1.5 py-1',
           'transition-[opacity,transform] duration-200 ease-out will-change-[opacity,transform]',
           isClosing
diff --git a/packages/ui/src/components/comments/InlineCommentCard.tsx b/packages/ui/src/components/comments/InlineCommentCard.tsx
index 9146f836..2ca822d4 100644
--- a/packages/ui/src/components/comments/InlineCommentCard.tsx
+++ b/packages/ui/src/components/comments/InlineCommentCard.tsx
@@ -38,7 +38,7 @@ export function InlineCommentCard({
   return (
     <div
       className={cn(
-        "rounded-lg border shadow-sm w-full max-w-[min(100%,calc(var(--oc-context-panel-width,100vw)-var(--oc-editor-gutter-width,0px)))] overflow-hidden transition-all duration-200",
+        "rounded-lg border shadow-none w-full max-w-[min(100%,calc(var(--oc-context-panel-width,100vw)-var(--oc-editor-gutter-width,0px)))] overflow-hidden transition-all duration-200",
         className
       )}
       style={{
diff --git a/packages/ui/src/components/comments/InlineCommentInput.tsx b/packages/ui/src/components/comments/InlineCommentInput.tsx
index ad12d92c..5a93cd5b 100644
--- a/packages/ui/src/components/comments/InlineCommentInput.tsx
+++ b/packages/ui/src/components/comments/InlineCommentInput.tsx
@@ -114,7 +114,7 @@ export function InlineCommentInput({
   return (
     <div
       className={cn(
-        "rounded-lg border shadow-sm w-full max-w-[min(100%,calc(var(--oc-context-panel-width,100vw)-var(--oc-editor-gutter-width,0px)))] overflow-hidden animate-in fade-in zoom-in-95 duration-200",
+        "rounded-lg border shadow-none w-full max-w-[min(100%,calc(var(--oc-context-panel-width,100vw)-var(--oc-editor-gutter-width,0px)))] overflow-hidden animate-in fade-in zoom-in-95 duration-200",
         className
       )}
       style={{
diff --git a/packages/ui/src/components/desktop/OpenInAppButton.tsx b/packages/ui/src/components/desktop/OpenInAppButton.tsx
index c527afbe..db61afb6 100644
--- a/packages/ui/src/components/desktop/OpenInAppButton.tsx
+++ b/packages/ui/src/components/desktop/OpenInAppButton.tsx
@@ -315,7 +315,7 @@ export const OpenInAppButton = ({ directory, className }: OpenInAppButtonProps)
     <div
         className={cn(
           'app-region-no-drag inline-flex h-7 items-center self-center rounded-md border border-[var(--interactive-border)]',
-          'bg-[var(--surface-elevated)] shadow-sm overflow-hidden',
+          'bg-[var(--surface-elevated)] shadow-none overflow-hidden',
           className
         )}
     >
diff --git a/packages/ui/src/components/layout/ContextPanel.tsx b/packages/ui/src/components/layout/ContextPanel.tsx
index 8eb8980f..721e9a28 100644
--- a/packages/ui/src/components/layout/ContextPanel.tsx
+++ b/packages/ui/src/components/layout/ContextPanel.tsx
@@ -211,7 +211,8 @@ export const ContextPanel: React.FC = () => {
       data-context-panel="true"
       tabIndex={-1}
       className={cn(
-        'flex min-h-0 flex-col overflow-hidden border-l border-border bg-background',
+        'flex min-h-0 flex-col overflow-hidden bg-background',
+        !isExpanded && 'border-l border-border/40',
         isExpanded
           ? 'absolute inset-0 z-20 min-w-0'
           : 'relative h-full flex-shrink-0',
diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index e9b369ad..e5aabd37 100644
--- a/packages/ui/src/components/layout/Header.tsx
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -4,7 +4,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-import { toast } from '@/components/ui';
+
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -15,19 +15,20 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { AnimatedTabs } from '@/components/ui/animated-tabs';
 
-import { RiArrowLeftSLine, RiChat4Line, RiCheckLine, RiCloseLine, RiCommandLine, RiFileTextLine, RiFolder6Line, RiFolderAddLine, RiGithubFill, RiLayoutLeftLine, RiLayoutRightLine, RiMore2Fill, RiPencilLine, RiPlayListAddLine, RiRefreshLine, RiServerLine, RiStackLine, RiTerminalBoxLine, RiTimerLine, type RemixiconComponentType } from '@remixicon/react';
+import { RiArrowLeftSLine, RiChat4Line, RiCheckLine, RiCloseLine, RiCommandLine, RiFileTextLine, RiFolder6Line, RiGithubFill, RiLayoutLeftLine, RiLayoutRightLine, RiPlayListAddLine, RiRefreshLine, RiServerLine, RiStackLine, RiTerminalBoxLine, RiTimerLine, type RemixiconComponentType } from '@remixicon/react';
 import { DiffIcon } from '@/components/icons/DiffIcon';
 import { useUIStore, type MainTab } from '@/stores/useUIStore';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { useSessionStore } from '@/stores/useSessionStore';
+import { useProjectsStore } from '@/stores/useProjectsStore';
 import { useQuotaAutoRefresh, useQuotaStore } from '@/stores/useQuotaStore';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
-import { useProjectsStore } from '@/stores/useProjectsStore';
+
 import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
 import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
 import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
 import { useDeviceInfo } from '@/lib/device';
-import { cn, hasModifier, formatDirectoryName } from '@/lib/utils';
+import { cn, hasModifier } from '@/lib/utils';
 import { McpDropdownContent } from '@/components/mcp/McpDropdown';
 import { McpIcon } from '@/components/icons/McpIcon';
 import { ProviderLogo } from '@/components/ui/ProviderLogo';
@@ -54,18 +55,9 @@ import type { GitHubAuthStatus } from '@/lib/api/types';
 import type { SessionContextUsage } from '@/stores/types/sessionTypes';
 import { DesktopHostSwitcherDialog } from '@/components/desktop/DesktopHostSwitcher';
 import { OpenInAppButton } from '@/components/desktop/OpenInAppButton';
-import { isDesktopLocalOriginActive, isDesktopShell, isTauriShell, isVSCodeRuntime } from '@/lib/desktop';
-import { sessionEvents } from '@/lib/sessionEvents';
+import { isDesktopShell, isVSCodeRuntime } from '@/lib/desktop';
 import { desktopHostsGet, locationMatchesHost, redactSensitiveUrl } from '@/lib/desktopHosts';
-import { ProjectEditDialog } from '@/components/layout/ProjectEditDialog';
-import { GridLoader } from '@/components/ui/grid-loader';
-import { PROJECT_ICON_MAP, PROJECT_COLOR_MAP } from '@/lib/projectMeta';
 
-const ATTENTION_DIAMOND_INDICES = new Set([1, 3, 4, 5, 7]);
-
-const getAttentionDiamondDelay = (index: number): string => {
-  return index === 4 ? '0ms' : '130ms';
-};
 
 const isSameContextUsage = (
   a: SessionContextUsage | null,
@@ -173,11 +165,24 @@ export const Header: React.FC<HeaderProps> = ({
     return state.messages.get(currentSessionId);
   });
   const sessions = useSessionStore((state) => state.sessions);
-  const sessionsByDirectory = useSessionStore((state) => state.sessionsByDirectory);
-  const getSessionsByDirectory = useSessionStore((state) => state.getSessionsByDirectory);
-  const availableWorktreesByProject = useSessionStore((state) => state.availableWorktreesByProject);
-  const sessionStatus = useSessionStore((state) => state.sessionStatus);
-  const sessionAttentionStates = useSessionStore((state) => state.sessionAttentionStates);
+  const activeProjectLabel = useProjectsStore((state) => {
+    if (!state.activeProjectId) {
+      return null;
+    }
+
+    const activeProject = state.projects.find((project) => project.id === state.activeProjectId);
+    if (!activeProject) {
+      return null;
+    }
+
+    const trimmedLabel = activeProject.label?.trim();
+    if (trimmedLabel) {
+      return trimmedLabel;
+    }
+
+    const pathSegments = activeProject.path.split(/[\\/]/).filter(Boolean);
+    return pathSegments[pathSegments.length - 1] ?? null;
+  });
   const quotaResults = useQuotaStore((state) => state.results);
   const fetchAllQuotas = useQuotaStore((state) => state.fetchAllQuotas);
   const isQuotaLoading = useQuotaStore((state) => state.isLoading);
@@ -187,12 +192,6 @@ export const Header: React.FC<HeaderProps> = ({
   const loadQuotaSettings = useQuotaStore((state) => state.loadSettings);
   const setQuotaDisplayMode = useQuotaStore((state) => state.setDisplayMode);
   const homeDirectory = useDirectoryStore((state) => state.homeDirectory);
-  const projects = useProjectsStore((state) => state.projects);
-  const activeProjectId = useProjectsStore((state) => state.activeProjectId);
-  const setActiveProject = useProjectsStore((state) => state.setActiveProject);
-  const reorderProjects = useProjectsStore((state) => state.reorderProjects);
-  const addProject = useProjectsStore((state) => state.addProject);
-  const removeProject = useProjectsStore((state) => state.removeProject);
 
   const { isMobile } = useDeviceInfo();
   const githubAuthStatus = useGitHubAuthStore((state) => state.status);
@@ -292,256 +291,8 @@ export const Header: React.FC<HeaderProps> = ({
     }
   }, [desktopServicesTab, isDesktopApp]);
 
-  // --- Project tabs state (desktop, non-vscode only) ---
   const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
-  const showProjectTabs = !isMobile && !isVSCode && projects.length > 0;
   const showDesktopHeaderContextUsage = !isVSCode && activeMainTab === 'chat' && !!stableDesktopContextUsage && stableDesktopContextUsage.totalTokens > 0;
-  const tauriIpcAvailable = React.useMemo(() => isTauriShell(), []);
-
-  const [editingProject, setEditingProject] = React.useState<{ id: string; name: string; path: string; icon?: string | null; color?: string | null } | null>(null);
-  const [projectTabMenuOpen, setProjectTabMenuOpen] = React.useState<string | null>(null);
-  const projectTabsScrollRef = React.useRef<HTMLDivElement>(null);
-  const projectTabsContainerRef = React.useRef<HTMLDivElement>(null);
-  const projectTabIndicatorRef = React.useRef<HTMLDivElement>(null);
-  const projectTabRefs = React.useRef<Map<string, HTMLElement>>(new Map());
-  const [projectTabsReady, setProjectTabsReady] = React.useState(false);
-  const [projectTabsOverflow, setProjectTabsOverflow] = React.useState<{ left: boolean; right: boolean }>({ left: false, right: false });
-
-  // --- Pointer-based drag reorder state ---
-  const dragStateRef = React.useRef<{
-    projectId: string;
-    startX: number;
-    startY: number;
-    pointerId: number;
-    active: boolean;
-    overlay: HTMLDivElement | null;
-    sourceRect: DOMRect | null;
-    // Immutable after drag activation — never re-read from DOM
-    tabWidths: Map<string, number>;
-    layoutOriginX: number; // left edge of first tab
-    gap: number;
-    // Mutable virtual layout
-    virtualRects: Array<{ id: string; left: number; right: number; centerX: number; width: number }>;
-    currentOrder: string[];
-    originalOrder: string[];
-    scrollInterval: ReturnType<typeof setInterval> | null;
-    lastClientX: number;
-  } | null>(null);
-  const [draggingProjectId, setDraggingProjectId] = React.useState<string | null>(null);
-  const [dragCurrentOrder, setDragCurrentOrder] = React.useState<string[] | null>(null);
-
-  /** Lay out tabs left-to-right using fixed widths. Pure computation, no DOM reads. */
-  const computeVirtualRects = React.useCallback(
-    (order: string[], widths: Map<string, number>, originX: number, gap: number) => {
-      let x = originX;
-      return order.map((id) => {
-        const w = widths.get(id) ?? 0;
-        const rect = { id, left: x, right: x + w, centerX: x + w / 2, width: w };
-        x += w + gap;
-        return rect;
-      });
-    },
-    []
-  );
-
-  const formatProjectTabLabel = React.useCallback((project: { label?: string; path: string }): string => {
-    return project.label?.trim()
-      || formatDirectoryName(project.path, homeDirectory)
-      || project.path;
-  }, [homeDirectory]);
-
-  const updateProjectTabsOverflow = React.useCallback(() => {
-    const el = projectTabsScrollRef.current;
-    if (!el) return;
-    const next = {
-      left: el.scrollLeft > 2,
-      right: el.scrollLeft + el.clientWidth < el.scrollWidth - 2,
-    };
-    setProjectTabsOverflow((prev) => {
-      if (prev.left === next.left && prev.right === next.right) {
-        return prev;
-      }
-      return next;
-    });
-  }, []);
-
-  const updateProjectTabIndicator = React.useCallback(() => {
-    const container = projectTabsContainerRef.current;
-    const indicator = projectTabIndicatorRef.current;
-    if (!container || !indicator || !activeProjectId) return;
-    // Hide indicator when the active tab itself is being dragged
-    if (draggingProjectId === activeProjectId) {
-      indicator.style.opacity = '0';
-      return;
-    }
-    const activeTab = projectTabRefs.current.get(activeProjectId);
-    if (!activeTab) {
-      indicator.style.opacity = '0';
-      return;
-    }
-    const containerRect = container.getBoundingClientRect();
-    const tabRect = activeTab.getBoundingClientRect();
-    const indicatorX = Math.round(tabRect.left - containerRect.left);
-    const indicatorWidth = Math.round(tabRect.width);
-    indicator.style.transform = `translateX(${indicatorX}px)`;
-    indicator.style.width = `${indicatorWidth}px`;
-    indicator.style.opacity = '1';
-  }, [activeProjectId, draggingProjectId]);
-
-  // Track metadata that affects tab width (label, icon) to re-measure indicator
-  const projectTabMeta = React.useMemo(
-    () => projects.map((p) => `${p.id}:${p.label ?? ''}:${p.icon ?? ''}`).join('|'),
-    [projects]
-  );
-
-  const projectTabSessionIndicators = React.useMemo(() => {
-    const result = new Map<string, { hasStreaming: boolean; hasNeedsAttention: boolean }>();
-    if (!showProjectTabs || projects.length === 0) {
-      return result;
-    }
-
-    for (const project of projects) {
-      const projectRoot = normalize(project.path);
-      if (!projectRoot) {
-        result.set(project.id, { hasStreaming: false, hasNeedsAttention: false });
-        continue;
-      }
-
-      const dirs: string[] = [projectRoot];
-      const worktrees = availableWorktreesByProject.get(projectRoot) ?? [];
-      for (const meta of worktrees) {
-        const p = (meta && typeof meta === 'object' && 'path' in meta) ? (meta as { path?: unknown }).path : null;
-        if (typeof p === 'string' && p.trim()) {
-          const normalized = normalize(p);
-          if (normalized && normalized !== projectRoot) {
-            dirs.push(normalized);
-          }
-        }
-      }
-
-      const seen = new Set<string>();
-      let hasStreaming = false;
-      let hasNeedsAttention = false;
-
-      for (const dir of dirs) {
-        const list = sessionsByDirectory.get(dir) ?? getSessionsByDirectory(dir);
-        for (const session of list) {
-          if (!session?.id || seen.has(session.id)) {
-            continue;
-          }
-          seen.add(session.id);
-
-          const statusType = sessionStatus?.get(session.id)?.type ?? 'idle';
-          if (statusType === 'busy' || statusType === 'retry') {
-            hasStreaming = true;
-          }
-
-          const isCurrentVisibleSession = session.id === currentSessionId && project.id === activeProjectId;
-          if (!isCurrentVisibleSession && sessionAttentionStates.get(session.id)?.needsAttention === true) {
-            hasNeedsAttention = true;
-          }
-
-          if (hasStreaming && hasNeedsAttention) {
-            break;
-          }
-        }
-        if (hasStreaming && hasNeedsAttention) {
-          break;
-        }
-      }
-
-      result.set(project.id, { hasStreaming, hasNeedsAttention });
-    }
-
-    return result;
-  }, [activeProjectId, availableWorktreesByProject, currentSessionId, getSessionsByDirectory, projects, sessionAttentionStates, sessionStatus, sessionsByDirectory, showProjectTabs]);
-
-  React.useLayoutEffect(() => {
-    if (!showProjectTabs) return;
-    updateProjectTabIndicator();
-    if (!projectTabsReady) {
-      setProjectTabsReady(true);
-    }
-  }, [showProjectTabs, updateProjectTabIndicator, projectTabsReady, activeProjectId, projectTabMeta]);
-
-  React.useEffect(() => {
-    if (!showProjectTabs) return;
-    const ro = new ResizeObserver(() => updateProjectTabIndicator());
-    const container = projectTabsContainerRef.current;
-    if (container) ro.observe(container);
-    // Also observe the active tab element for size changes
-    if (activeProjectId) {
-      const activeTab = projectTabRefs.current.get(activeProjectId);
-      if (activeTab) ro.observe(activeTab);
-    }
-    return () => ro.disconnect();
-  }, [showProjectTabs, updateProjectTabIndicator, activeProjectId]);
-
-  React.useEffect(() => {
-    const el = projectTabsScrollRef.current;
-    if (!el || !showProjectTabs) return;
-    updateProjectTabsOverflow();
-    el.addEventListener('scroll', updateProjectTabsOverflow, { passive: true });
-    const ro = new ResizeObserver(updateProjectTabsOverflow);
-    ro.observe(el);
-    return () => {
-      el.removeEventListener('scroll', updateProjectTabsOverflow);
-      ro.disconnect();
-    };
-  }, [showProjectTabs, updateProjectTabsOverflow, projects.length]);
-
-  const handleAddProject = React.useCallback(() => {
-    if (!tauriIpcAvailable || !isDesktopLocalOriginActive()) {
-      sessionEvents.requestDirectoryDialog();
-      return;
-    }
-    import('@/lib/desktop')
-      .then(({ requestDirectoryAccess }) => requestDirectoryAccess(''))
-      .then((result) => {
-        if (result.success && result.path) {
-          const added = addProject(result.path, { id: result.projectId });
-          if (!added) {
-            toast.error('Failed to add project', {
-              description: 'Please select a valid directory.',
-            });
-          }
-        } else if (result.error && result.error !== 'Directory selection cancelled') {
-          toast.error('Failed to select directory', {
-            description: result.error,
-          });
-        }
-      })
-      .catch((error) => {
-        console.error('Failed to select directory:', error);
-        toast.error('Failed to select directory');
-      });
-  }, [addProject, tauriIpcAvailable]);
-
-  const updateProjectMeta = useProjectsStore((state) => state.updateProjectMeta);
-
-  const handleOpenProjectEdit = React.useCallback((projectId: string) => {
-    const project = projects.find((p) => p.id === projectId);
-    if (!project) return;
-    setEditingProject({
-      id: project.id,
-      name: formatProjectTabLabel(project),
-      path: project.path,
-      icon: project.icon,
-      color: project.color,
-    });
-    setProjectTabMenuOpen(null);
-  }, [projects, formatProjectTabLabel]);
-
-  const handleSaveProjectEdit = React.useCallback((data: { label: string; icon: string | null; color: string | null }) => {
-    if (!editingProject) return;
-    updateProjectMeta(editingProject.id, data);
-    setEditingProject(null);
-  }, [editingProject, updateProjectMeta]);
-
-  const handleCloseProject = React.useCallback((projectId: string) => {
-    removeProject(projectId);
-    setProjectTabMenuOpen(null);
-  }, [removeProject]);
 
   const refreshCurrentInstanceLabel = React.useCallback(async () => {
     if (typeof window === 'undefined' || !isDesktopApp) {
@@ -921,7 +672,8 @@ export const Header: React.FC<HeaderProps> = ({
     return Boolean(panelState?.isOpen && panelState.mode === 'plan');
   }, [contextPanelByDirectory, openDirectory]);
 
-  const headerIconButtonClass = 'app-region-no-drag inline-flex h-9 w-9 items-center justify-center gap-2 p-2 rounded-md typography-ui-label font-medium text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:text-foreground hover:bg-interactive-hover transition-colors';
+  const desktopHeaderIconButtonClass = 'app-region-no-drag inline-flex h-8 w-8 items-center justify-center gap-2 rounded-md typography-ui-label font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:bg-interactive-hover transition-colors';
+  const mobileHeaderIconButtonClass = 'app-region-no-drag inline-flex h-9 w-9 items-center justify-center gap-2 p-2 rounded-md typography-ui-label font-medium text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 hover:text-foreground hover:bg-interactive-hover transition-colors';
 
   const desktopPaddingClass = React.useMemo(() => {
     if (isDesktopApp && isMacPlatform) {
@@ -1009,31 +761,26 @@ export const Header: React.FC<HeaderProps> = ({
   }, [isDesktopApp]);
 
   const tabs: TabConfig[] = React.useMemo(() => {
-    const base: TabConfig[] = [
-      { id: 'chat', label: 'Chat', icon: RiChat4Line },
-    ];
-
-    if (showPlanTab) {
-      base.push({ id: 'plan', label: 'Plan', icon: RiFileTextLine });
-    }
-
     if (isMobile) {
+      const base: TabConfig[] = [
+        { id: 'chat', label: 'Chat', icon: RiChat4Line },
+      ];
+
+      if (showPlanTab) {
+        base.push({ id: 'plan', label: 'Plan', icon: RiFileTextLine });
+      }
+
       base.push(
-        {
-          id: 'diff',
-          label: 'Diff',
-          icon: 'diff',
-        },
+        { id: 'diff', label: 'Diff', icon: 'diff' },
         { id: 'files', label: 'Files', icon: RiFolder6Line },
-        {
-          id: 'terminal',
-          label: 'Terminal',
-          icon: RiTerminalBoxLine,
-        },
+        { id: 'terminal', label: 'Terminal', icon: RiTerminalBoxLine },
       );
+
+      return base;
     }
 
-    return base;
+    // Desktop: no tabs in header
+    return [];
   }, [isMobile, showPlanTab]);
 
   const shortcutLabel = React.useCallback((actionId: string) => {
@@ -1069,17 +816,6 @@ export const Header: React.FC<HeaderProps> = ({
     const handleKeyDown = (e: KeyboardEvent) => {
       if (hasModifier(e) && !e.shiftKey && !e.altKey) {
         const num = parseInt(e.key, 10);
-        if (showProjectTabs) {
-          if (num >= 1 && num <= projects.length) {
-            e.preventDefault();
-            const targetProject = projects[num - 1];
-            if (targetProject && targetProject.id !== activeProjectId) {
-              setActiveProject(targetProject.id);
-            }
-          }
-          return;
-        }
-
         if (num >= 1 && num <= tabs.length) {
           e.preventDefault();
           setActiveMainTab(tabs[num - 1].id);
@@ -1088,7 +824,7 @@ export const Header: React.FC<HeaderProps> = ({
     };
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [tabs, setActiveMainTab, showProjectTabs, projects, activeProjectId, setActiveProject]);
+  }, [tabs, setActiveMainTab]);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -1169,7 +905,7 @@ export const Header: React.FC<HeaderProps> = ({
           className={cn(
             'relative flex h-8 items-center gap-2 px-3 rounded-lg typography-ui-label font-medium transition-colors',
             isActive
-              ? 'app-region-no-drag bg-interactive-selection text-interactive-selection-foreground shadow-sm'
+              ? 'app-region-no-drag bg-interactive-selection text-interactive-selection-foreground shadow-none'
               : 'app-region-no-drag text-muted-foreground hover:bg-interactive-hover/50 hover:text-foreground',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
             isChatTab && !isMobile && 'min-w-[100px] justify-center'
@@ -1198,285 +934,6 @@ export const Header: React.FC<HeaderProps> = ({
     return <React.Fragment key={tab.id}>{tabButton}</React.Fragment>;
   };
 
-  // --- Pointer-based drag reorder handlers ---
-  const DRAG_DEAD_ZONE = 5;
-
-  const cleanupDrag = React.useCallback(() => {
-    const ds = dragStateRef.current;
-    if (!ds) return;
-    if (ds.overlay && ds.overlay.parentNode) {
-      ds.overlay.parentNode.removeChild(ds.overlay);
-    }
-    if (ds.scrollInterval) {
-      clearInterval(ds.scrollInterval);
-    }
-    dragStateRef.current = null;
-    setDraggingProjectId(null);
-    setDragCurrentOrder(null);
-  }, []);
-
-  // Cleanup overlay on unmount + Escape to cancel drag
-  React.useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && dragStateRef.current) {
-        // Reset order to original (don't commit)
-        cleanupDrag();
-      }
-    };
-    window.addEventListener('keydown', handleEscape);
-    return () => {
-      window.removeEventListener('keydown', handleEscape);
-      const ds = dragStateRef.current;
-      if (ds?.overlay?.parentNode) {
-        ds.overlay.parentNode.removeChild(ds.overlay);
-      }
-      if (ds?.scrollInterval) {
-        clearInterval(ds.scrollInterval);
-      }
-      dragStateRef.current = null;
-    };
-  }, [cleanupDrag]);
-
-  const commitDragOrder = React.useCallback(() => {
-    const ds = dragStateRef.current;
-    if (!ds) return;
-    const { originalOrder, currentOrder } = ds;
-    // Find the dragged project's positions in original vs current order
-    if (JSON.stringify(originalOrder) !== JSON.stringify(currentOrder)) {
-      const fromIndex = originalOrder.indexOf(ds.projectId);
-      const toIndex = currentOrder.indexOf(ds.projectId);
-      if (fromIndex !== -1 && toIndex !== -1 && fromIndex !== toIndex) {
-        reorderProjects(fromIndex, toIndex);
-      }
-    }
-  }, [reorderProjects]);
-
-  const handleProjectTabPointerDown = React.useCallback((e: React.PointerEvent<HTMLDivElement>, projectId: string) => {
-    // Don't start drag from buttons (dropdown trigger, etc.)
-    const target = e.target as HTMLElement;
-    if (target.closest('button')) return;
-    // Only primary button
-    if (e.button !== 0) return;
-    // Don't start if a menu is open
-    if (projectTabMenuOpen) return;
-
-    const tabEl = projectTabRefs.current.get(projectId);
-    if (!tabEl) return;
-
-    const currentProjectIds = projects.map((p) => p.id);
-
-    dragStateRef.current = {
-      projectId,
-      startX: e.clientX,
-      startY: e.clientY,
-      pointerId: e.pointerId,
-      active: false,
-      overlay: null,
-      sourceRect: null,
-      tabWidths: new Map(),
-      layoutOriginX: 0,
-      gap: 2,
-      virtualRects: [],
-      currentOrder: [...currentProjectIds],
-      originalOrder: [...currentProjectIds],
-      scrollInterval: null,
-      lastClientX: e.clientX,
-    };
-
-    tabEl.setPointerCapture(e.pointerId);
-  }, [projectTabMenuOpen, projects]);
-
-  const handleProjectTabPointerMove = React.useCallback((e: React.PointerEvent<HTMLDivElement>) => {
-    const ds = dragStateRef.current;
-    if (!ds) return;
-
-    const dx = e.clientX - ds.startX;
-    const dy = e.clientY - ds.startY;
-
-    if (!ds.active) {
-      // Check dead zone
-      if (Math.abs(dx) < DRAG_DEAD_ZONE && Math.abs(dy) < DRAG_DEAD_ZONE) return;
-
-      // Activate drag
-      ds.active = true;
-      setDraggingProjectId(ds.projectId);
-
-      const sourceEl = projectTabRefs.current.get(ds.projectId);
-      if (!sourceEl) { cleanupDrag(); return; }
-
-      ds.sourceRect = sourceEl.getBoundingClientRect();
-
-      // Snapshot widths once — these never change for the duration of the drag
-      const widths = new Map<string, number>();
-      for (const id of ds.currentOrder) {
-        const el = projectTabRefs.current.get(id);
-        if (el) widths.set(id, el.getBoundingClientRect().width);
-      }
-      ds.tabWidths = widths;
-
-      // Compute layout origin and gap from DOM (one-time read)
-      const firstEl = projectTabRefs.current.get(ds.currentOrder[0]);
-      ds.layoutOriginX = firstEl ? firstEl.getBoundingClientRect().left : ds.sourceRect.left;
-      if (ds.currentOrder.length >= 2) {
-        const a = projectTabRefs.current.get(ds.currentOrder[0]);
-        const b = projectTabRefs.current.get(ds.currentOrder[1]);
-        if (a && b) {
-          ds.gap = Math.max(0, b.getBoundingClientRect().left - a.getBoundingClientRect().right);
-        }
-      }
-
-      // Build initial virtual rects
-      ds.virtualRects = computeVirtualRects(ds.currentOrder, ds.tabWidths, ds.layoutOriginX, ds.gap);
-
-      // Create overlay clone
-      const overlay = document.createElement('div');
-      overlay.style.position = 'fixed';
-      overlay.style.zIndex = '99999';
-      overlay.style.pointerEvents = 'none';
-      overlay.style.width = `${ds.sourceRect.width}px`;
-      overlay.style.height = `${ds.sourceRect.height}px`;
-      overlay.style.left = `${ds.sourceRect.left}px`;
-      overlay.style.top = `${ds.sourceRect.top}px`;
-      overlay.style.transition = 'box-shadow 150ms ease';
-      overlay.style.boxShadow = '0 4px 16px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.10)';
-      overlay.style.willChange = 'transform';
-      overlay.style.cursor = 'grabbing';
-
-      // Clone visual content
-      overlay.innerHTML = sourceEl.innerHTML;
-      // Copy computed styles for visual fidelity
-      const computed = getComputedStyle(sourceEl);
-      overlay.style.borderRadius = computed.borderRadius;
-      overlay.style.display = computed.display;
-      overlay.style.alignItems = computed.alignItems;
-      overlay.style.gap = computed.gap;
-      overlay.style.padding = computed.padding;
-      overlay.style.fontSize = computed.fontSize;
-      overlay.style.fontWeight = computed.fontWeight;
-      overlay.style.fontFamily = computed.fontFamily;
-      overlay.style.color = computed.color;
-      overlay.style.backgroundColor = 'var(--surface-elevated)';
-      overlay.style.border = '1px solid var(--interactive-border)';
-      overlay.style.boxSizing = 'border-box';
-      overlay.style.whiteSpace = 'nowrap';
-      overlay.style.opacity = '1';
-      const isDraggedActive = ds.projectId === activeProjectId;
-      if (isDraggedActive) {
-        overlay.style.outline = '1px solid var(--interactive-border)';
-        overlay.style.outlineOffset = '-1px';
-      } else {
-        overlay.style.outline = 'none';
-        overlay.style.outlineOffset = '0';
-      }
-
-      document.body.appendChild(overlay);
-      ds.overlay = overlay;
-
-      // Set current order in state for rendering
-      setDragCurrentOrder([...ds.currentOrder]);
-
-      // Auto-scroll setup
-      const scrollEl = projectTabsScrollRef.current;
-      if (scrollEl) {
-        ds.scrollInterval = setInterval(() => {
-          const state = dragStateRef.current;
-          if (!state) return;
-          const scrollRect = scrollEl.getBoundingClientRect();
-          const edgeZone = 40;
-          if (state.lastClientX < scrollRect.left + edgeZone && scrollEl.scrollLeft > 0) {
-            scrollEl.scrollLeft -= 4;
-          } else if (state.lastClientX > scrollRect.right - edgeZone && scrollEl.scrollLeft + scrollEl.clientWidth < scrollEl.scrollWidth) {
-            scrollEl.scrollLeft += 4;
-          }
-        }, 16);
-      }
-    }
-
-    // Track cursor position for auto-scroll
-    ds.lastClientX = e.clientX;
-
-    // Move overlay — clamped to the visible tabs container
-    if (ds.overlay && ds.sourceRect) {
-      let offsetX = e.clientX - ds.startX;
-      const scrollEl = projectTabsScrollRef.current;
-      if (scrollEl) {
-        const bounds = scrollEl.getBoundingClientRect();
-        const overlayLeft = ds.sourceRect.left + offsetX;
-        const clampedLeft = Math.max(bounds.left, Math.min(overlayLeft, bounds.right - ds.sourceRect.width));
-        offsetX = clampedLeft - ds.sourceRect.left;
-      }
-      ds.overlay.style.transform = `translate(${offsetX}px, 0px) scale(1.03)`;
-    }
-
-    // Determine new order via virtual rects (no DOM reads — fully deterministic)
-    if (ds.virtualRects.length > 0) {
-      const cursorX = e.clientX;
-      const draggedIdx = ds.currentOrder.indexOf(ds.projectId);
-      if (draggedIdx === -1) return;
-
-      // Hysteresis: require cursor to pass center ± margin to prevent borderline oscillation
-      const HYSTERESIS = 6;
-      let targetIdx = draggedIdx;
-      for (let i = 0; i < ds.virtualRects.length; i++) {
-        if (ds.currentOrder[i] === ds.projectId) continue;
-        const rect = ds.virtualRects[i];
-        if (i < draggedIdx && cursorX < rect.centerX - HYSTERESIS) {
-          targetIdx = i;
-          break;
-        }
-        if (i > draggedIdx && cursorX > rect.centerX + HYSTERESIS) {
-          targetIdx = i;
-        }
-      }
-
-      if (targetIdx !== draggedIdx) {
-        const newOrder = [...ds.currentOrder];
-        const [moved] = newOrder.splice(draggedIdx, 1);
-        newOrder.splice(targetIdx, 0, moved);
-        ds.currentOrder = newOrder;
-
-        // Recompute virtual rects from fixed widths — deterministic, no DOM
-        ds.virtualRects = computeVirtualRects(newOrder, ds.tabWidths, ds.layoutOriginX, ds.gap);
-
-        setDragCurrentOrder([...newOrder]);
-      }
-    }
-  }, [activeProjectId, cleanupDrag, computeVirtualRects]);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const handleProjectTabPointerUp = React.useCallback((_e: React.PointerEvent<HTMLDivElement>) => {
-    const ds = dragStateRef.current;
-    if (!ds) return;
-
-    const tabEl = projectTabRefs.current.get(ds.projectId);
-    if (tabEl) {
-      try { tabEl.releasePointerCapture(ds.pointerId); } catch { /* ignore */ }
-    }
-
-    if (ds.active) {
-      commitDragOrder();
-    } else {
-      // It was a click, not a drag — activate the project
-      if (ds.projectId !== activeProjectId) {
-        setActiveProject(ds.projectId);
-      }
-    }
-
-    cleanupDrag();
-  }, [activeProjectId, cleanupDrag, commitDragOrder, setActiveProject]);
-
-  const handleProjectTabPointerCancel = React.useCallback(() => {
-    cleanupDrag();
-  }, [cleanupDrag]);
-
-  // Determine the display order of projects (reordered during drag, normal otherwise)
-  const displayProjects = React.useMemo(() => {
-    if (!dragCurrentOrder) return projects;
-    // Map the order of IDs to actual project objects
-    const projectMap = new Map(projects.map((p) => [p.id, p]));
-    return dragCurrentOrder.map((id) => projectMap.get(id)).filter(Boolean) as typeof projects;
-  }, [dragCurrentOrder, projects]);
-
   const renderDesktop = () => (
     <div
       onMouseDown={handleDragStart}
@@ -1494,9 +951,9 @@ export const Header: React.FC<HeaderProps> = ({
             type="button"
             onClick={handleOpenSessionSwitcher}
             aria-label="Open sessions"
-            className={`${headerIconButtonClass} mr-2 shrink-0`}
+            className={`${desktopHeaderIconButtonClass} mr-2 shrink-0`}
           >
-            <RiLayoutLeftLine className="h-5 w-5" />
+            <RiLayoutLeftLine className="h-[18px] w-[18px]" />
           </button>
         </TooltipTrigger>
         <TooltipContent>
@@ -1504,196 +961,19 @@ export const Header: React.FC<HeaderProps> = ({
         </TooltipContent>
       </Tooltip>
 
-      {/* Project tabs */}
-      {showProjectTabs && (
-        <div className="ml-6 mr-3 flex min-w-0 flex-1 items-center">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                onClick={handleAddProject}
-                className={`${headerIconButtonClass} mr-1 shrink-0`}
-                aria-label="Add project"
-              >
-                <RiFolderAddLine className="h-5 w-5" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>Add project</TooltipContent>
-          </Tooltip>
-          <div className="app-region-no-drag relative min-w-0 w-fit max-w-full">
-            {/* Left fade */}
-            {projectTabsOverflow.left && (
-              <div className="pointer-events-none absolute left-0 top-0 bottom-0 w-6 z-20 bg-gradient-to-r from-[var(--surface-background)] to-transparent rounded-l-lg" />
-            )}
-            {/* Right fade */}
-            {projectTabsOverflow.right && (
-              <div className="pointer-events-none absolute right-0 top-0 bottom-0 w-6 z-20 bg-gradient-to-l from-[var(--surface-background)] to-transparent rounded-r-lg" />
-            )}
-            <div
-              ref={projectTabsScrollRef}
-              className="max-w-full overflow-x-auto scrollbar-none"
-              style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
-            >
-              <div
-                ref={projectTabsContainerRef}
-                className="relative inline-flex items-center h-9 gap-0.5 rounded-lg bg-[var(--surface-muted)]/50 py-0.5 px-px"
-              >
-                {/* Sliding indicator */}
-                <div
-                  ref={projectTabIndicatorRef}
-                  className={cn(
-                    'absolute top-0.5 bottom-0.5 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] shadow-sm'
-                  )}
-                  style={{ width: 0, transform: 'translateX(0)', opacity: 0 }}
-                />
-              {displayProjects.map((project) => {
-                const isActive = project.id === activeProjectId;
-                const isDragged = draggingProjectId === project.id;
-                const sessionIndicator = projectTabSessionIndicators.get(project.id);
-                const showProjectStreaming = sessionIndicator?.hasStreaming === true;
-                const showProjectUnread = !showProjectStreaming
-                  && project.id !== activeProjectId
-                  && sessionIndicator?.hasNeedsAttention === true;
-                const ProjectIcon = project.icon ? PROJECT_ICON_MAP[project.icon] : null;
-                const projectColorVar = project.color ? (PROJECT_COLOR_MAP[project.color] ?? null) : null;
-
-                 const statusMarker = showProjectStreaming
-                   ? (
-                     <GridLoader size="xs" className="text-primary" />
-                   )
-                   : showProjectUnread
-                     ? (
-                      <span
-                        className="grid grid-cols-3 place-items-center gap-[1px] text-[var(--status-info)]"
-                        style={{ width: '11px', height: '11px' }}
-                        aria-label="Unread updates"
-                        title="Unread updates"
-                      >
-                        {Array.from({ length: 9 }, (_, i) => (
-                          ATTENTION_DIAMOND_INDICES.has(i) ? (
-                            <span
-                              key={i}
-                              className="shrink-0 h-[3px] w-[3px] rounded-full bg-current animate-attention-diamond-pulse"
-                              style={{ animationDelay: getAttentionDiamondDelay(i) }}
-                            />
-                          ) : (
-                            <span key={i} className="shrink-0 h-[3px] w-[3px]" />
-                          )
-                        ))}
-                      </span>
-                    )
-                    : null;
-
-                return (
-                  <div
-                    key={project.id}
-                    ref={(el) => {
-                      if (el) { projectTabRefs.current.set(project.id, el); }
-                      else { projectTabRefs.current.delete(project.id); }
-                    }}
-                    role="tab"
-                    tabIndex={0}
-                    aria-selected={isActive}
-                    onPointerDown={(e) => handleProjectTabPointerDown(e, project.id)}
-                    onPointerMove={handleProjectTabPointerMove}
-                    onPointerUp={handleProjectTabPointerUp}
-                    onPointerCancel={handleProjectTabPointerCancel}
-                    onContextMenu={(e) => {
-                      e.preventDefault();
-                      setProjectTabMenuOpen(project.id);
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        if (project.id !== activeProjectId) {
-                          setActiveProject(project.id);
-                        }
-                      }
-                    }}
-                    className={cn(
-                      'relative z-10 flex h-8 shrink-0 items-center gap-1 rounded-lg pr-1 text-[0.9375rem] font-medium whitespace-nowrap group',
-                      isDragged
-                        ? 'opacity-30 scale-[0.97]'
-                        : 'cursor-pointer',
-                      statusMarker ? 'pl-[9px]' : 'pl-[7px]',
-                      isActive
-                        ? 'text-foreground'
-                        : 'text-muted-foreground hover:text-foreground',
-                      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--interactive-focus-ring)] focus-visible:ring-offset-1 focus-visible:ring-offset-background'
-                    )}
-                    style={{ touchAction: 'none' }}
-                    title={project.path}
-                  >
-                     <span
-                       className="relative flex h-3.5 items-center justify-center overflow-visible"
-                        style={{ width: statusMarker ? '13px' : '0px' }}
-                     >
-                       {statusMarker && (
-                         <span className="absolute left-0 flex items-center justify-center">
-                           {statusMarker}
-                         </span>
-                       )}
-                     </span>
-                    {ProjectIcon && (
-                      <ProjectIcon
-                        className="h-4 w-4 shrink-0"
-                        style={projectColorVar ? { color: projectColorVar } : undefined}
-                      />
-                    )}
-                    <span>{formatProjectTabLabel(project)}</span>
-                    <DropdownMenu
-                      open={projectTabMenuOpen === project.id}
-                      onOpenChange={(open) => setProjectTabMenuOpen(open ? project.id : null)}
-                    >
-                      <DropdownMenuTrigger asChild>
-                        <button
-                          type="button"
-                          className={cn(
-                            '-ml-0.5 inline-flex h-3.5 w-3.5 items-center justify-center rounded-sm',
-                            'text-muted-foreground hover:text-foreground',
-                            isActive || projectTabMenuOpen === project.id
-                              ? 'opacity-60 hover:opacity-100'
-                              : 'opacity-0 group-hover:opacity-60 hover:!opacity-100'
-                          )}
-                          aria-label="Project options"
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <RiMore2Fill className="h-3.5 w-3.5" />
-                        </button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start" className="min-w-[160px]">
-                        <DropdownMenuItem
-                          onClick={() => handleOpenProjectEdit(project.id)}
-                          className="gap-2"
-                        >
-                          <RiPencilLine className="h-4 w-4" />
-                          Edit project
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => handleCloseProject(project.id)}
-                          className="text-destructive focus:text-destructive gap-2"
-                        >
-                          <RiCloseLine className="h-4 w-4" />
-                          Close project
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </div>
-                );
-              })}
-              </div>
-            </div>
-          </div>
+      {activeProjectLabel && (
+        <div className="mr-3 min-w-0 max-w-[16rem] truncate typography-ui-label font-medium text-foreground">
+          {activeProjectLabel}
         </div>
       )}
 
-      {!showProjectTabs && (
+      {tabs.length > 0 && (
         <div className="flex items-center gap-1 rounded-lg bg-[var(--surface-muted)]/50 p-1">
           {tabs.map((tab) => renderTab(tab))}
         </div>
       )}
 
-      {!showProjectTabs && <div className="flex-1" />}
+      <div className="flex-1" />
 
       <div className="flex items-center gap-1 pr-3 shrink-0">
         {showDesktopHeaderContextUsage && stableDesktopContextUsage && (
@@ -1719,9 +999,9 @@ export const Header: React.FC<HeaderProps> = ({
                 type="button"
                 aria-label="Open plan"
                 onClick={handleOpenContextPlan}
-                className={cn(headerIconButtonClass, isContextPlanActive && 'bg-[var(--interactive-hover)] text-foreground')}
+                className={cn(desktopHeaderIconButtonClass, isContextPlanActive && 'bg-[var(--interactive-hover)]')}
               >
-                <RiFileTextLine className="h-5 w-5" />
+                <RiFileTextLine className="h-[18px] w-[18px]" />
               </button>
             </TooltipTrigger>
             <TooltipContent>
@@ -1751,13 +1031,13 @@ export const Header: React.FC<HeaderProps> = ({
                       ? `Open instance, usage and MCP (current: ${currentInstanceLabel})`
                       : 'Open services, usage and MCP'}
                     className={cn(
-                      headerIconButtonClass,
+                      desktopHeaderIconButtonClass,
                       isDesktopApp
                         ? 'w-auto max-w-[14rem] justify-start gap-1.5 px-2.5'
-                        : 'h-9 w-9'
+                        : 'h-8 w-8'
                     )}
                   >
-                    <RiStackLine className="h-5 w-5" />
+                    <RiStackLine className="h-[18px] w-[18px]" />
                     {isDesktopApp && <span className="truncate typography-ui-label font-medium text-foreground">{currentInstanceLabel}</span>}
                   </button>
                 </DropdownMenuTrigger>
@@ -1994,9 +1274,9 @@ export const Header: React.FC<HeaderProps> = ({
               type="button"
               onClick={toggleBottomTerminal}
               aria-label="Toggle terminal panel"
-              className={headerIconButtonClass}
+              className={desktopHeaderIconButtonClass}
             >
-              <RiTerminalBoxLine className="h-5 w-5" />
+              <RiTerminalBoxLine className="h-[18px] w-[18px]" />
             </button>
           </TooltipTrigger>
           <TooltipContent>
@@ -2010,9 +1290,9 @@ export const Header: React.FC<HeaderProps> = ({
               type="button"
               onClick={toggleRightSidebar}
               aria-label="Toggle right sidebar"
-              className={headerIconButtonClass}
+              className={desktopHeaderIconButtonClass}
             >
-              <RiLayoutRightLine className="h-5 w-5" />
+              <RiLayoutRightLine className="h-[18px] w-[18px]" />
             </button>
           </TooltipTrigger>
           <TooltipContent>
@@ -2027,8 +1307,8 @@ export const Header: React.FC<HeaderProps> = ({
                 <button
                   type="button"
                   className={cn(
-                    headerIconButtonClass,
-                    'h-8 w-8 p-0 overflow-hidden rounded-full border border-border/60 bg-muted/80'
+                    desktopHeaderIconButtonClass,
+                    'h-7 w-7 p-0 overflow-hidden rounded-full border border-border/60 bg-muted/80'
                   )}
                   title={githubLogin ? `GitHub: ${githubLogin}` : 'GitHub connected'}
                   disabled={isSwitchingGitHubAccount}
@@ -2042,7 +1322,7 @@ export const Header: React.FC<HeaderProps> = ({
                       referrerPolicy="no-referrer"
                     />
                   ) : (
-                    <RiGithubFill className="h-4 w-4 text-muted-foreground" />
+                    <RiGithubFill className="h-3.5 w-3.5 text-foreground" />
                   )}
                 </button>
               </DropdownMenuTrigger>
@@ -2098,7 +1378,7 @@ export const Header: React.FC<HeaderProps> = ({
             </DropdownMenu>
           ) : (
             <div
-              className="app-region-no-drag flex h-8 w-8 items-center justify-center overflow-hidden rounded-full border border-border/60 bg-muted/80"
+              className="app-region-no-drag flex h-7 w-7 items-center justify-center overflow-hidden rounded-full border border-border/60 bg-muted/80"
               title={githubLogin ? `GitHub: ${githubLogin}` : 'GitHub connected'}
             >
               {githubAvatarUrl ? (
@@ -2110,7 +1390,7 @@ export const Header: React.FC<HeaderProps> = ({
                   referrerPolicy="no-referrer"
                 />
               ) : (
-                <RiGithubFill className="h-4 w-4 text-muted-foreground" />
+                <RiGithubFill className="h-3.5 w-3.5 text-foreground" />
               )}
             </div>
           )
@@ -2128,7 +1408,7 @@ export const Header: React.FC<HeaderProps> = ({
             type="button"
             onClick={onToggleLeftDrawer}
             className={cn(
-              headerIconButtonClass,
+              mobileHeaderIconButtonClass,
               leftDrawerOpen && 'bg-interactive-selection text-interactive-selection-foreground'
             )}
             aria-label={leftDrawerOpen ? 'Close sessions' : 'Open sessions'}
@@ -2190,7 +1470,7 @@ export const Header: React.FC<HeaderProps> = ({
                             aria-selected={isActive}
                             role="tab"
                             className={cn(
-                              headerIconButtonClass,
+                              mobileHeaderIconButtonClass,
                               'relative rounded-lg',
                               isActive && 'bg-interactive-selection text-interactive-selection-foreground'
                             )}
@@ -2242,7 +1522,7 @@ export const Header: React.FC<HeaderProps> = ({
                     <button
                       type="button"
                       aria-label="View services"
-                      className={headerIconButtonClass}
+                      className={mobileHeaderIconButtonClass}
                     >
                       <RiStackLine className="h-5 w-5" />
                     </button>
@@ -2481,7 +1761,7 @@ export const Header: React.FC<HeaderProps> = ({
                     type="button"
                     onClick={onToggleRightDrawer}
                     className={cn(
-                      headerIconButtonClass,
+                      mobileHeaderIconButtonClass,
                       'relative',
                       rightDrawerOpen && 'bg-interactive-selection text-interactive-selection-foreground'
                     )}
@@ -2502,30 +1782,18 @@ export const Header: React.FC<HeaderProps> = ({
   );
 
   const headerClassName = cn(
-    'header-safe-area border-b border-border/50 relative z-10',
+    'header-safe-area relative z-10',
+    isMobile && 'border-b border-border/50',
     isDesktopApp ? 'bg-background' : 'bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80'
   );
 
   return (
-    <>
-      <header
-        ref={headerRef}
-        className={headerClassName}
-        style={{ ['--padding-scale' as string]: '1' } as React.CSSProperties}
-      >
-        {isMobile ? renderMobile() : renderDesktop()}
-      </header>
-      {editingProject && (
-        <ProjectEditDialog
-          open={Boolean(editingProject)}
-          onOpenChange={(open) => { if (!open) setEditingProject(null); }}
-          projectName={editingProject.name}
-          projectPath={editingProject.path}
-          initialIcon={editingProject.icon}
-          initialColor={editingProject.color}
-          onSave={handleSaveProjectEdit}
-        />
-      )}
-    </>
+    <header
+      ref={headerRef}
+      className={headerClassName}
+      style={{ ['--padding-scale' as string]: '1' } as React.CSSProperties}
+    >
+      {isMobile ? renderMobile() : renderDesktop()}
+    </header>
   );
 };
diff --git a/packages/ui/src/components/layout/MainLayout.tsx b/packages/ui/src/components/layout/MainLayout.tsx
index bba27b53..d0baad9a 100644
--- a/packages/ui/src/components/layout/MainLayout.tsx
+++ b/packages/ui/src/components/layout/MainLayout.tsx
@@ -1,9 +1,9 @@
 import React, { useRef, useEffect } from 'react';
 import { motion, useMotionValue, animate } from 'motion/react';
-import { RiSettings3Line } from '@remixicon/react';
 import { Header } from './Header';
 import { BottomTerminalDock } from './BottomTerminalDock';
 import { Sidebar } from './Sidebar';
+import { NavRail } from './NavRail';
 import { RightSidebar } from './RightSidebar';
 import { RightSidebarTabs } from './RightSidebarTabs';
 import { ContextPanel } from './ContextPanel';
@@ -659,25 +659,15 @@ export const MainLayout: React.FC = () => {
                         )}
                         aria-hidden={!mobileLeftDrawerOpen}
                     >
-                        <div className="h-full overflow-hidden flex flex-col bg-sidebar shadow-xl drawer-safe-area">
-                            <div className="flex-1 overflow-hidden">
+                        <div className="h-full overflow-hidden flex bg-sidebar shadow-none drawer-safe-area">
+                            <div onPointerDownCapture={(e) => e.stopPropagation()}>
+                              <NavRail className="shrink-0" mobile />
+                            </div>
+                            <div className="flex-1 min-w-0 overflow-hidden flex flex-col">
                                 <ErrorBoundary>
                                     <SessionSidebar mobileVariant />
                                 </ErrorBoundary>
                             </div>
-                            <div className="border-t border-border p-3">
-                                <button
-                                    type="button"
-                                    onClick={() => {
-                                        setMobileLeftDrawerOpen(false);
-                                        setSettingsDialogOpen(true);
-                                    }}
-                                    className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-muted-foreground hover:bg-interactive-hover hover:text-foreground transition-colors"
-                                >
-                                    <RiSettings3Line className="h-5 w-5" />
-                                    <span className="typography-ui-label">Settings</span>
-                                </button>
-                            </div>
                         </div>
                     </motion.aside>
                     
@@ -720,7 +710,7 @@ export const MainLayout: React.FC = () => {
                         )}
                         aria-hidden={!isRightSidebarOpen}
                     >
-                        <div className="h-full overflow-hidden flex flex-col bg-background shadow-xl drawer-safe-area">
+                        <div className="h-full overflow-hidden flex flex-col bg-background shadow-none drawer-safe-area">
                             <ErrorBoundary>
                                 <GitView mode="sidebar" />
                             </ErrorBoundary>
@@ -775,6 +765,8 @@ export const MainLayout: React.FC = () => {
                         <div className={cn('absolute inset-0 flex flex-col', isMultiRunLauncherOpen && 'invisible')}>
                             <Header />
                             <div className="flex flex-1 overflow-hidden">
+                                <NavRail />
+                                <div className="flex flex-1 min-w-0 overflow-hidden border-t border-l border-border/50 rounded-tl-xl">
                                 <Sidebar isOpen={isSidebarOpen} isMobile={isMobile}>
                                     <SessionSidebar hideProjectSelector />
                                 </Sidebar>
@@ -801,6 +793,7 @@ export const MainLayout: React.FC = () => {
                                         <ErrorBoundary><TerminalView /></ErrorBoundary>
                                     </BottomTerminalDock>
                                 </div>
+                                </div>
                             </div>
                         </div>
 
diff --git a/packages/ui/src/components/layout/NavRail.tsx b/packages/ui/src/components/layout/NavRail.tsx
new file mode 100644
index 00000000..ef1a337b
--- /dev/null
+++ b/packages/ui/src/components/layout/NavRail.tsx
@@ -0,0 +1,690 @@
+import React from 'react';
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type Modifier,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import {
+  RiFolderAddLine,
+  RiSettings3Line,
+  RiQuestionLine,
+  RiDownloadLine,
+  RiInformationLine,
+  RiPencilLine,
+  RiCloseLine,
+} from '@remixicon/react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { toast } from '@/components/ui';
+
+import { UpdateDialog } from '@/components/ui/UpdateDialog';
+import { ProjectEditDialog } from '@/components/layout/ProjectEditDialog';
+import { useUIStore } from '@/stores/useUIStore';
+import { useProjectsStore } from '@/stores/useProjectsStore';
+import { useSessionStore } from '@/stores/useSessionStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useUpdateStore } from '@/stores/useUpdateStore';
+import { cn, formatDirectoryName, hasModifier } from '@/lib/utils';
+import { PROJECT_ICON_MAP, PROJECT_COLOR_MAP } from '@/lib/projectMeta';
+import { isDesktopLocalOriginActive, isDesktopShell, isTauriShell } from '@/lib/desktop';
+import { useLongPress } from '@/hooks/useLongPress';
+import { sessionEvents } from '@/lib/sessionEvents';
+import type { ProjectEntry } from '@/lib/api/types';
+
+const normalize = (value: string): string => {
+  if (!value) return '';
+  const replaced = value.replace(/\\/g, '/');
+  return replaced === '/' ? '/' : replaced.replace(/\/+$/, '');
+};
+
+const NAV_RAIL_WIDTH = 56;
+
+/** Tinted background for project tiles — uses project color at low opacity, or neutral fallback */
+const TileBackground: React.FC<{ colorVar: string | null; children: React.ReactNode }> = ({
+  colorVar,
+  children,
+}) => (
+  <span
+    className="relative flex h-full w-full items-center justify-center rounded-lg overflow-hidden"
+    style={{ backgroundColor: 'var(--surface-muted)' }}
+  >
+    {colorVar && (
+      <span
+        className="absolute inset-0 opacity-15"
+        style={{ backgroundColor: colorVar }}
+      />
+    )}
+    <span className="relative z-10 flex items-center justify-center">
+      {children}
+    </span>
+  </span>
+);
+
+/** First-letter avatar fallback */
+const LetterAvatar: React.FC<{ label: string; color?: string | null }> = ({
+  label,
+  color,
+}) => {
+  const letter = label.charAt(0).toUpperCase() || '?';
+  const colorVar = color ? (PROJECT_COLOR_MAP[color] ?? null) : null;
+  return (
+    <span
+      className="flex h-4 w-4 items-center justify-center text-[15px] font-medium leading-none select-none"
+      style={{ color: colorVar ?? 'var(--surface-foreground)', fontFamily: 'var(--font-mono, monospace)' }}
+    >
+      {letter}
+    </span>
+  );
+};
+
+const ProjectStatusDots: React.FC<{
+  color: string;
+  variant?: 'streaming' | 'attention' | 'none';
+  size?: 'sm' | 'md';
+}> = ({ color, variant = 'none', size = 'md' }) => (
+  <span className="inline-flex items-center justify-center gap-px" aria-hidden="true">
+    {Array.from({ length: 3 }).map((_, index) => (
+      <span key={index} className="inline-flex h-[3px] w-[3px] items-center justify-center">
+        <span
+          className={cn(
+            size === 'sm' ? 'h-[2.5px] w-[2.5px]' : 'h-[3px] w-[3px]',
+            'rounded-full',
+            variant === 'streaming' && 'animate-grid-pulse',
+            variant === 'attention' && 'animate-attention-diamond-pulse'
+          )}
+          style={{
+            backgroundColor: color,
+            animationDelay: variant === 'streaming'
+              ? `${index * 150}ms`
+              : variant === 'attention'
+                ? (index === 1 ? '0ms' : '130ms')
+                : undefined,
+          }}
+        />
+      </span>
+    ))}
+  </span>
+);
+
+/** Single project tile in the nav rail — right-click for context menu (no visible 3-dot) */
+const ProjectTile: React.FC<{
+  project: ProjectEntry;
+  isActive: boolean;
+  hasStreaming: boolean;
+  hasUnread: boolean;
+  label: string;
+  onClick: () => void;
+  onEdit: () => void;
+  onClose: () => void;
+}> = ({ project, isActive, hasStreaming, hasUnread, label, onClick, onEdit, onClose }) => {
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const ProjectIcon = project.icon ? PROJECT_ICON_MAP[project.icon] : null;
+  const projectColorVar = project.color ? (PROJECT_COLOR_MAP[project.color] ?? null) : null;
+  const showStreamingDots = hasStreaming;
+  const showAttentionDots = !hasStreaming && hasUnread;
+
+  const longPressHandlers = useLongPress({
+    onLongPress: () => setMenuOpen(true),
+    onTap: onClick,
+  });
+
+  return (
+    <>
+    <Tooltip delayDuration={400}>
+      <TooltipTrigger asChild>
+        <div
+          className="relative"
+          onContextMenu={(e) => {
+            // Only handle right-click (desktop), not long-tap (mobile)
+            if (e.nativeEvent instanceof MouseEvent && e.nativeEvent.button === 2) {
+              e.preventDefault();
+              setMenuOpen(true);
+            }
+          }}
+        >
+          {hasStreaming ? (
+            <button
+              type="button"
+              {...longPressHandlers}
+              className={cn(
+                'flex h-9 w-9 items-center justify-center rounded-lg overflow-hidden cursor-default',
+                isActive
+                  ? 'bg-transparent border border-[var(--surface-foreground)]'
+                  : 'bg-transparent border border-transparent hover:bg-[var(--interactive-hover)]/50 hover:border-[var(--interactive-border)]',
+                menuOpen && !isActive && 'bg-[var(--interactive-hover)]/50 border-[var(--interactive-border)]',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--interactive-focus-ring)]',
+              )}
+              >
+                <TileBackground colorVar={projectColorVar}>
+                  <span className="relative h-full w-full leading-none">
+                    <span className="pointer-events-none absolute inset-0 flex items-center justify-center">
+                      {ProjectIcon ? (
+                        <ProjectIcon
+                          className="h-4 w-4 shrink-0"
+                          style={projectColorVar ? { color: projectColorVar } : { color: 'var(--surface-foreground)' }}
+                        />
+                      ) : (
+                        <LetterAvatar label={label} color={project.color} />
+                      )}
+                    </span>
+                    {showStreamingDots && (
+                      <span className="pointer-events-none absolute inset-x-0 top-[calc(50%+9px)] flex justify-center">
+                        <ProjectStatusDots color="var(--primary)" variant="streaming" />
+                      </span>
+                    )}
+                  </span>
+                </TileBackground>
+              </button>
+            ) : (
+            <button
+              type="button"
+              {...longPressHandlers}
+              className={cn(
+                'flex h-9 w-9 items-center justify-center rounded-lg overflow-hidden cursor-default',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--interactive-focus-ring)]',
+                isActive
+                  ? 'bg-transparent border border-[var(--surface-foreground)]'
+                  : 'bg-transparent border border-transparent hover:bg-[var(--interactive-hover)]/50 hover:border-[var(--interactive-border)]',
+                menuOpen && !isActive && 'bg-[var(--interactive-hover)]/50 border-[var(--interactive-border)]',
+              )}
+            >
+              <TileBackground colorVar={projectColorVar}>
+                <span className="relative h-full w-full leading-none">
+                  <span className="pointer-events-none absolute inset-0 flex items-center justify-center">
+                    {ProjectIcon ? (
+                      <ProjectIcon
+                        className="h-4 w-4 shrink-0"
+                        style={projectColorVar ? { color: projectColorVar } : { color: 'var(--surface-foreground)' }}
+                      />
+                    ) : (
+                        <LetterAvatar label={label} color={project.color} />
+                    )}
+                  </span>
+                  {showAttentionDots && (
+                    <span className="pointer-events-none absolute inset-x-0 top-[calc(50%+9px)] flex justify-center">
+                      <ProjectStatusDots color="var(--status-info)" variant="attention" />
+                    </span>
+                  )}
+                </span>
+              </TileBackground>
+            </button>
+          )}
+
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="right" sideOffset={8}>
+        {label}
+      </TooltipContent>
+    </Tooltip>
+    <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+      <DropdownMenuTrigger asChild>
+        <span className="sr-only">Project options</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" side="right" sideOffset={4} className="min-w-[160px]">
+        <DropdownMenuItem onClick={onEdit} className="gap-2">
+          <RiPencilLine className="h-4 w-4" />
+          Edit project
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onClick={onClose}
+          className="text-destructive focus:text-destructive gap-2"
+        >
+          <RiCloseLine className="h-4 w-4" />
+          Close project
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+    </>
+  );
+};
+
+/** Constrain drag to Y axis only */
+const restrictToYAxis: Modifier = ({ transform }) => ({
+  ...transform,
+  x: 0,
+});
+
+/** Sortable wrapper for ProjectTile */
+const SortableProjectTile: React.FC<{
+  id: string;
+  children: React.ReactNode;
+}> = ({ id, children }) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
+      className={cn(isDragging && 'opacity-30 z-50')}
+      {...attributes}
+      {...listeners}
+    >
+      {children}
+    </div>
+  );
+};
+
+interface NavRailProps {
+  className?: string;
+  mobile?: boolean;
+}
+
+export const NavRail: React.FC<NavRailProps> = ({ className, mobile }) => {
+  const projects = useProjectsStore((s) => s.projects);
+  const activeProjectId = useProjectsStore((s) => s.activeProjectId);
+  const setActiveProjectIdOnly = useProjectsStore((s) => s.setActiveProjectIdOnly);
+  const addProject = useProjectsStore((s) => s.addProject);
+  const removeProject = useProjectsStore((s) => s.removeProject);
+  const reorderProjects = useProjectsStore((s) => s.reorderProjects);
+  const updateProjectMeta = useProjectsStore((s) => s.updateProjectMeta);
+  const homeDirectory = useDirectoryStore((s) => s.homeDirectory);
+  const setSettingsDialogOpen = useUIStore((s) => s.setSettingsDialogOpen);
+  const setAboutDialogOpen = useUIStore((s) => s.setAboutDialogOpen);
+  const toggleHelpDialog = useUIStore((s) => s.toggleHelpDialog);
+
+  const sessionStatus = useSessionStore((s) => s.sessionStatus);
+  const sessionAttentionStates = useSessionStore((s) => s.sessionAttentionStates);
+  const sessionsByDirectory = useSessionStore((s) => s.sessionsByDirectory);
+  const getSessionsByDirectory = useSessionStore((s) => s.getSessionsByDirectory);
+  const currentSessionId = useSessionStore((s) => s.currentSessionId);
+  const availableWorktreesByProject = useSessionStore((s) => s.availableWorktreesByProject);
+
+  const updateStore = useUpdateStore();
+  const { available: updateAvailable, downloaded: updateDownloaded } = updateStore;
+  const [updateDialogOpen, setUpdateDialogOpen] = React.useState(false);
+
+  const [editingProject, setEditingProject] = React.useState<{
+    id: string;
+    name: string;
+    path: string;
+    icon?: string | null;
+    color?: string | null;
+  } | null>(null);
+
+  const isDesktopApp = React.useMemo(() => isDesktopShell(), []);
+  const tauriIpcAvailable = React.useMemo(() => isTauriShell(), []);
+
+  const formatLabel = React.useCallback(
+    (project: ProjectEntry): string => {
+      return (
+        project.label?.trim() ||
+        formatDirectoryName(project.path, homeDirectory) ||
+        project.path
+      );
+    },
+    [homeDirectory],
+  );
+
+  const projectIndicators = React.useMemo(() => {
+    const result = new Map<string, { hasStreaming: boolean; hasUnread: boolean }>();
+    for (const project of projects) {
+      const projectRoot = normalize(project.path);
+      if (!projectRoot) {
+        result.set(project.id, { hasStreaming: false, hasUnread: false });
+        continue;
+      }
+
+      const dirs: string[] = [projectRoot];
+      const worktrees = availableWorktreesByProject.get(projectRoot) ?? [];
+      for (const meta of worktrees) {
+        const p =
+          meta && typeof meta === 'object' && 'path' in meta
+            ? (meta as { path?: unknown }).path
+            : null;
+        if (typeof p === 'string' && p.trim()) {
+          const normalized = normalize(p);
+          if (normalized && normalized !== projectRoot) {
+            dirs.push(normalized);
+          }
+        }
+      }
+
+      const seen = new Set<string>();
+      let hasStreaming = false;
+      let hasUnread = false;
+
+      for (const dir of dirs) {
+        const list = sessionsByDirectory.get(dir) ?? getSessionsByDirectory(dir);
+        for (const session of list) {
+          if (!session?.id || seen.has(session.id)) continue;
+          seen.add(session.id);
+
+          const statusType = sessionStatus?.get(session.id)?.type ?? 'idle';
+          if (statusType === 'busy' || statusType === 'retry') {
+            hasStreaming = true;
+          }
+
+          const isCurrentVisible =
+            session.id === currentSessionId && project.id === activeProjectId;
+          if (
+            !isCurrentVisible &&
+            sessionAttentionStates.get(session.id)?.needsAttention === true
+          ) {
+            hasUnread = true;
+          }
+
+          if (hasStreaming && hasUnread) break;
+        }
+        if (hasStreaming && hasUnread) break;
+      }
+
+      result.set(project.id, { hasStreaming, hasUnread });
+    }
+    return result;
+  }, [
+    activeProjectId,
+    availableWorktreesByProject,
+    currentSessionId,
+    getSessionsByDirectory,
+    projects,
+    sessionAttentionStates,
+    sessionStatus,
+    sessionsByDirectory,
+  ]);
+
+  const handleAddProject = React.useCallback(() => {
+    if (!tauriIpcAvailable || !isDesktopLocalOriginActive()) {
+      sessionEvents.requestDirectoryDialog();
+      return;
+    }
+    import('@/lib/desktop')
+      .then(({ requestDirectoryAccess }) => requestDirectoryAccess(''))
+      .then((result) => {
+        if (result.success && result.path) {
+          const added = addProject(result.path, { id: result.projectId });
+          if (!added) {
+            toast.error('Failed to add project', {
+              description: 'Please select a valid directory.',
+            });
+          }
+        } else if (result.error && result.error !== 'Directory selection cancelled') {
+          toast.error('Failed to select directory', { description: result.error });
+        }
+      })
+      .catch((error) => {
+        console.error('Failed to select directory:', error);
+        toast.error('Failed to select directory');
+      });
+  }, [addProject, tauriIpcAvailable]);
+
+  const handleEditProject = React.useCallback(
+    (projectId: string) => {
+      const project = projects.find((p) => p.id === projectId);
+      if (!project) return;
+      setEditingProject({
+        id: project.id,
+        name: formatLabel(project),
+        path: project.path,
+        icon: project.icon,
+        color: project.color,
+      });
+    },
+    [projects, formatLabel],
+  );
+
+  const handleSaveProjectEdit = React.useCallback(
+    (data: { label: string; icon: string | null; color: string | null }) => {
+      if (!editingProject) return;
+      updateProjectMeta(editingProject.id, data);
+      setEditingProject(null);
+    },
+    [editingProject, updateProjectMeta],
+  );
+
+  const handleCloseProject = React.useCallback(
+    (projectId: string) => {
+      removeProject(projectId);
+    },
+    [removeProject],
+  );
+
+  // Cmd/Ctrl+number to switch projects
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (hasModifier(e) && !e.shiftKey && !e.altKey) {
+        const num = parseInt(e.key, 10);
+        if (num >= 1 && num <= projects.length) {
+          e.preventDefault();
+          const target = projects[num - 1];
+          if (target && target.id !== activeProjectId) {
+            setActiveProjectIdOnly(target.id);
+          }
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [projects, activeProjectId, setActiveProjectIdOnly]);
+
+  // Drag-to-reorder
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+  );
+
+  const projectIds = React.useMemo(() => projects.map((p) => p.id), [projects]);
+
+  const handleDragEnd = React.useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const fromIndex = projects.findIndex((p) => p.id === active.id);
+      const toIndex = projects.findIndex((p) => p.id === over.id);
+      if (fromIndex !== -1 && toIndex !== -1) {
+        reorderProjects(fromIndex, toIndex);
+      }
+    },
+    [projects, reorderProjects],
+  );
+
+  const navRailActionButtonClass = cn(
+    'flex h-8 w-8 items-center justify-center rounded-lg',
+    'text-foreground hover:bg-interactive-hover',
+    'transition-colors',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--interactive-focus-ring)]',
+  );
+
+  const navRailActionIconClass = 'h-4.5 w-4.5';
+
+  return (
+    <>
+      <nav
+        className={cn(
+          'flex h-full w-14 shrink-0 flex-col items-center bg-[var(--surface-background)] overflow-hidden',
+          className,
+        )}
+        aria-label="Project navigation"
+      >
+        {/* Projects list */}
+        <div className="flex-1 min-h-0 w-full overflow-y-auto overflow-x-hidden scrollbar-none">
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+            modifiers={[restrictToYAxis]}
+          >
+          <SortableContext items={projectIds} strategy={verticalListSortingStrategy}>
+          <div className="flex flex-col items-center gap-3 px-1 py-3">
+            {projects.map((project) => {
+              const isActive = project.id === activeProjectId;
+              const indicators = projectIndicators.get(project.id);
+              return (
+                <SortableProjectTile key={project.id} id={project.id}>
+                  <ProjectTile
+                    project={project}
+                    isActive={isActive}
+                    hasStreaming={indicators?.hasStreaming ?? false}
+                    hasUnread={indicators?.hasUnread ?? false}
+                    label={formatLabel(project)}
+                    onClick={() => {
+                      if (project.id !== activeProjectId) {
+                        setActiveProjectIdOnly(project.id);
+                      }
+                    }}
+                    onEdit={() => handleEditProject(project.id)}
+                    onClose={() => handleCloseProject(project.id)}
+                  />
+                </SortableProjectTile>
+              );
+            })}
+
+          </div>
+          </SortableContext>
+          </DndContext>
+
+            {/* Add project button */}
+            <div className="flex flex-col items-center px-1 pb-3">
+            <Tooltip delayDuration={400}>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={handleAddProject}
+                  className={navRailActionButtonClass}
+                  aria-label="Add project"
+                >
+                  <RiFolderAddLine className={navRailActionIconClass} />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={8}>
+                Add project
+              </TooltipContent>
+            </Tooltip>
+            </div>
+        </div>
+
+        {/* Bottom actions */}
+        <div className="shrink-0 w-full pt-3 pb-4 flex flex-col items-center gap-2">
+          {(updateAvailable || updateDownloaded) && (
+            <Tooltip delayDuration={400}>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => setUpdateDialogOpen(true)}
+                  className={cn(
+                    'flex h-8 w-8 items-center justify-center rounded-lg',
+                    'bg-[var(--primary)]/10 text-[var(--primary)]',
+                    'hover:bg-[var(--primary)]/20 transition-colors',
+                  )}
+                  aria-label="Update available"
+                >
+                  <RiDownloadLine className={navRailActionIconClass} />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={8}>
+                Update available
+              </TooltipContent>
+            </Tooltip>
+          )}
+
+          {!isDesktopApp && !(updateAvailable || updateDownloaded) && (
+            <Tooltip delayDuration={400}>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => setAboutDialogOpen(true)}
+                  className={navRailActionButtonClass}
+                  aria-label="About"
+                >
+                  <RiInformationLine className={navRailActionIconClass} />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={8}>
+                About OpenChamber
+              </TooltipContent>
+            </Tooltip>
+          )}
+
+          {!mobile && (
+            <Tooltip delayDuration={400}>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={toggleHelpDialog}
+                  className={navRailActionButtonClass}
+                  aria-label="Keyboard shortcuts"
+                >
+                  <RiQuestionLine className={navRailActionIconClass} />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={8}>
+                Keyboard shortcuts
+              </TooltipContent>
+            </Tooltip>
+          )}
+
+          <Tooltip delayDuration={400}>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                onClick={() => setSettingsDialogOpen(true)}
+                className={navRailActionButtonClass}
+                aria-label="Settings"
+              >
+                <RiSettings3Line className={navRailActionIconClass} />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right" sideOffset={8}>
+              Settings
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </nav>
+
+      {/* Dialogs */}
+      {editingProject && (
+        <ProjectEditDialog
+          open={!!editingProject}
+          onOpenChange={(open) => {
+            if (!open) setEditingProject(null);
+          }}
+          projectName={editingProject.name}
+          projectPath={editingProject.path}
+          initialIcon={editingProject.icon}
+          initialColor={editingProject.color}
+          onSave={handleSaveProjectEdit}
+        />
+      )}
+
+      <UpdateDialog
+        open={updateDialogOpen}
+        onOpenChange={setUpdateDialogOpen}
+        info={updateStore.info}
+        downloading={updateStore.downloading}
+        downloaded={updateStore.downloaded}
+        progress={updateStore.progress}
+        error={updateStore.error}
+        onDownload={updateStore.downloadUpdate}
+        onRestart={updateStore.restartToUpdate}
+        runtimeType={updateStore.runtimeType}
+      />
+    </>
+  );
+};
+
+export { NAV_RAIL_WIDTH };
diff --git a/packages/ui/src/components/layout/RightSidebar.tsx b/packages/ui/src/components/layout/RightSidebar.tsx
index e91bf3e2..253beeef 100644
--- a/packages/ui/src/components/layout/RightSidebar.tsx
+++ b/packages/ui/src/components/layout/RightSidebar.tsx
@@ -61,7 +61,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children })
   return (
     <aside
       className={cn(
-        'relative flex h-full overflow-hidden border-l border-border bg-sidebar',
+        'relative flex h-full overflow-hidden border-l border-border/40 bg-sidebar/50',
         isResizing ? 'transition-none' : 'transition-[width] duration-300 ease-in-out',
         !isOpen && 'border-l-0'
       )}
diff --git a/packages/ui/src/components/layout/RightSidebarTabs.tsx b/packages/ui/src/components/layout/RightSidebarTabs.tsx
index b43b539e..95d32675 100644
--- a/packages/ui/src/components/layout/RightSidebarTabs.tsx
+++ b/packages/ui/src/components/layout/RightSidebarTabs.tsx
@@ -13,8 +13,8 @@ export const RightSidebarTabs: React.FC = () => {
   const setRightSidebarTab = useUIStore((state) => state.setRightSidebarTab);
 
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-sidebar">
-      <div className="border-b border-border/40 bg-background px-3 py-1.5">
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-transparent">
+      <div className="border-b border-border/40 bg-transparent px-3 py-1.5">
         <AnimatedTabs<RightTab>
           value={rightSidebarTab}
           onValueChange={setRightSidebarTab}
diff --git a/packages/ui/src/components/layout/Sidebar.tsx b/packages/ui/src/components/layout/Sidebar.tsx
index 64a94d84..ee53cacb 100644
--- a/packages/ui/src/components/layout/Sidebar.tsx
+++ b/packages/ui/src/components/layout/Sidebar.tsx
@@ -1,17 +1,11 @@
 import React from 'react';
-import { RiDownloadLine, RiInformationLine, RiQuestionLine, RiSettings3Line } from '@remixicon/react';
-import { toast } from '@/components/ui';
 import { cn } from '@/lib/utils';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { useUIStore } from '@/stores/useUIStore';
-import { useUpdateStore } from '@/stores/useUpdateStore';
-import { UpdateDialog } from '../ui/UpdateDialog';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 
-export const SIDEBAR_CONTENT_WIDTH = 264;
-const SIDEBAR_MIN_WIDTH = 300;
+export const SIDEBAR_CONTENT_WIDTH = 250;
+const SIDEBAR_MIN_WIDTH = 250;
 const SIDEBAR_MAX_WIDTH = 500;
-const CHECK_FOR_UPDATES_EVENT = 'openchamber:check-for-updates';
 
 interface SidebarProps {
     isOpen: boolean;
@@ -20,70 +14,10 @@ interface SidebarProps {
 }
 
 export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children }) => {
-    const { sidebarWidth, setSidebarWidth, setSettingsDialogOpen, setAboutDialogOpen, toggleHelpDialog } = useUIStore();
+    const { sidebarWidth, setSidebarWidth } = useUIStore();
     const [isResizing, setIsResizing] = React.useState(false);
     const startXRef = React.useRef(0);
     const startWidthRef = React.useRef(sidebarWidth || SIDEBAR_CONTENT_WIDTH);
-    const [updateDialogOpen, setUpdateDialogOpen] = React.useState(false);
-
-    const updateStore = useUpdateStore();
-    const pendingMenuUpdateCheckRef = React.useRef(false);
-
-    const checkForUpdates = updateStore.checkForUpdates;
-    const { available, downloaded, checking } = updateStore;
-
-    const [isDesktopApp, setIsDesktopApp] = React.useState<boolean>(() => {
-        if (typeof window === 'undefined') {
-            return false;
-        }
-        return Boolean((window as unknown as { __TAURI__?: unknown }).__TAURI__);
-    });
-
-
-
-    React.useEffect(() => {
-        if (typeof window === 'undefined') {
-            return;
-        }
-        setIsDesktopApp(Boolean((window as unknown as { __TAURI__?: unknown }).__TAURI__));
-    }, []);
-
-    React.useEffect(() => {
-        if (typeof window === 'undefined') {
-            return;
-        }
-
-        const handleMenuUpdateCheck = () => {
-            if (!(window as unknown as { __TAURI__?: unknown }).__TAURI__) {
-                return;
-            }
-            pendingMenuUpdateCheckRef.current = true;
-            void checkForUpdates();
-        };
-
-        window.addEventListener(CHECK_FOR_UPDATES_EVENT, handleMenuUpdateCheck as EventListener);
-        return () => {
-            window.removeEventListener(CHECK_FOR_UPDATES_EVENT, handleMenuUpdateCheck as EventListener);
-        };
-    }, [checkForUpdates]);
-
-    React.useEffect(() => {
-        if (!pendingMenuUpdateCheckRef.current) {
-            return;
-        }
-        if (checking) {
-            return;
-        }
-
-        if (available || downloaded) {
-            setUpdateDialogOpen(true);
-        } else {
-            toast.success('No updates available', {
-                description: 'You are running the latest version.',
-            });
-        }
-        pendingMenuUpdateCheckRef.current = false;
-    }, [available, downloaded, checking]);
 
     React.useEffect(() => {
         if (isMobile || !isResizing) {
@@ -119,7 +53,6 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children })
     }, [isMobile, isResizing]);
 
     if (isMobile) {
-
         return null;
     }
 
@@ -141,10 +74,8 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children })
     return (
         <aside
             className={cn(
-                'relative flex h-full overflow-hidden border-r border-border',
-                isDesktopApp
-                    ? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
-                    : 'bg-sidebar',
+                'relative flex h-full overflow-hidden border-r border-border/40',
+                'bg-sidebar/50',
                 isResizing ? 'transition-none' : 'transition-[width] duration-300 ease-in-out',
                 !isOpen && 'border-r-0'
             )}
@@ -179,86 +110,6 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children })
                 <div className="flex-1 overflow-hidden">
                     <ErrorBoundary>{children}</ErrorBoundary>
                 </div>
-                <div className="flex-shrink-0 border-t border-border h-12 px-2 bg-sidebar">
-                    <div className="flex h-full items-center justify-between gap-2">
-                        <button
-                            onClick={() => setSettingsDialogOpen(true)}
-                            className={cn(
-                                'flex h-8 items-center gap-2 rounded-md px-2',
-                                'text-sm font-semibold text-sidebar-foreground/90',
-                                'hover:text-sidebar-foreground hover:bg-interactive-hover',
-                                'transition-all duration-200'
-                            )}
-                        >
-                            <RiSettings3Line className="h-4 w-4" />
-                            <span>Settings</span>
-                        </button>
-                        <div className="flex items-center gap-1">
-                            {(available || downloaded) ? (
-                                    <button
-                                        onClick={() => setUpdateDialogOpen(true)}
-                                        className={cn(
-                                            'flex items-center gap-1.5 rounded-md px-2 py-1',
-                                            'text-xs font-semibold',
-                                            'bg-primary/10 text-primary',
-                                            'hover:bg-primary/20',
-                                            'transition-colors'
-                                        )}
-                                    >
-                                        <RiDownloadLine className="h-3.5 w-3.5" />
-                                        <span>Update</span>
-                                    </button>
-
-                            ) : !isDesktopApp && (
-                                <Tooltip>
-                                    <TooltipTrigger asChild>
-                                        <button
-                                            onClick={() => setAboutDialogOpen(true)}
-                                            className={cn(
-                                                'flex h-8 w-8 items-center justify-center rounded-md',
-                                                'text-sidebar-foreground/70',
-                                                'hover:text-sidebar-foreground hover:bg-interactive-hover',
-                                                'transition-all duration-200'
-                                            )}
-                                        >
-                                            <RiInformationLine className="h-4 w-4" />
-                                        </button>
-                                    </TooltipTrigger>
-                                    <TooltipContent side="top">About OpenChamber</TooltipContent>
-                                </Tooltip>
-                            )}
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <button
-                                        onClick={toggleHelpDialog}
-                                        className={cn(
-                                            'flex h-8 w-8 items-center justify-center rounded-md',
-                                            'text-sidebar-foreground/70',
-                                            'hover:text-sidebar-foreground hover:bg-interactive-hover',
-                                            'transition-all duration-200'
-                                        )}
-                                        aria-label="Keyboard shortcuts"
-                                    >
-                                        <RiQuestionLine className="h-4 w-4" />
-                                    </button>
-                                </TooltipTrigger>
-                                <TooltipContent side="top">Keyboard shortcuts</TooltipContent>
-                            </Tooltip>
-                        </div>
-                    </div>
-                </div>
-                <UpdateDialog
-                    open={updateDialogOpen}
-                    onOpenChange={setUpdateDialogOpen}
-                    info={updateStore.info}
-                    downloading={updateStore.downloading}
-                    downloaded={updateStore.downloaded}
-                    progress={updateStore.progress}
-                    error={updateStore.error}
-                    onDownload={updateStore.downloadUpdate}
-                    onRestart={updateStore.restartToUpdate}
-                    runtimeType={updateStore.runtimeType}
-                />
             </div>
         </aside>
     );
diff --git a/packages/ui/src/components/layout/SidebarFilesTree.tsx b/packages/ui/src/components/layout/SidebarFilesTree.tsx
index 4e7ce503..72aa6f62 100644
--- a/packages/ui/src/components/layout/SidebarFilesTree.tsx
+++ b/packages/ui/src/components/layout/SidebarFilesTree.tsx
@@ -744,7 +744,7 @@ export const SidebarFilesTree: React.FC = () => {
             <>
               <span className="absolute top-3.5 left-[-12px] w-3 h-px bg-border/40" />
               {isLast && (
-                <span className="absolute top-3.5 bottom-0 left-[-13px] w-[2px] bg-background" />
+                <span className="absolute top-3.5 bottom-0 left-[-13px] w-[2px] bg-sidebar/50" />
               )}
             </>
           )}
@@ -770,12 +770,12 @@ export const SidebarFilesTree: React.FC = () => {
         </li>
       );
     });
-  }, [childrenByDir, expandedPaths, handleOpenFile, selectedPath, toggleDirectory, handleOpenDialog, canCreateFile, canCreateFolder, canRename, canDelete, contextMenuPath, getFileStatus, getFolderBadge]);
+  }, [childrenByDir, expandedPaths, handleOpenFile, selectedPath, toggleDirectory, handleOpenDialog, canCreateFile, canCreateFolder, canRename, canDelete, canReveal, contextMenuPath, getFileStatus, getFolderBadge, handleRevealPath]);
 
   const hasTree = Boolean(root && childrenByDir[root]);
 
   return (
-    <section className="flex h-full min-h-0 flex-col overflow-hidden bg-background">
+    <section className="flex h-full min-h-0 flex-col overflow-hidden bg-transparent">
       <div className="flex items-center gap-2 border-b border-border/40 px-3 py-2">
         <div className="relative min-w-0 flex-1">
           <RiSearchLine className="pointer-events-none absolute left-2 top-2 h-4 w-4 text-muted-foreground" />
diff --git a/packages/ui/src/components/multirun/ModelMultiSelect.tsx b/packages/ui/src/components/multirun/ModelMultiSelect.tsx
index 2c1c99be..997e6247 100644
--- a/packages/ui/src/components/multirun/ModelMultiSelect.tsx
+++ b/packages/ui/src/components/multirun/ModelMultiSelect.tsx
@@ -379,7 +379,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
             let currentFlatIndex = 0;
 
             return (
-              <div style={{ backgroundColor: 'var(--surface-elevated)' }} className="absolute bottom-full left-0 mb-1 z-50 border border-border/30 rounded-xl overflow-hidden shadow-lg w-[min(380px,calc(100vw-2rem))] flex flex-col">
+              <div style={{ backgroundColor: 'var(--surface-elevated)' }} className="absolute bottom-full left-0 mb-1 z-50 border border-border/30 rounded-xl overflow-hidden shadow-none w-[min(380px,calc(100vw-2rem))] flex flex-col">
                 {/* Search input */}
                 <div className="p-2 border-b border-border/40">
                   <div className="relative">
diff --git a/packages/ui/src/components/session/DirectoryAutocomplete.tsx b/packages/ui/src/components/session/DirectoryAutocomplete.tsx
index 3d876f9c..48d146fa 100644
--- a/packages/ui/src/components/session/DirectoryAutocomplete.tsx
+++ b/packages/ui/src/components/session/DirectoryAutocomplete.tsx
@@ -276,7 +276,7 @@ export const DirectoryAutocomplete = React.forwardRef<DirectoryAutocompleteHandl
   return (
     <div
       ref={containerRef}
-      className="absolute z-[100] w-full max-h-48 bg-background border border-border rounded-lg shadow-lg top-full mt-1 left-0 flex flex-col overflow-hidden"
+      className="absolute z-[100] w-full max-h-48 bg-background border border-border rounded-lg shadow-none top-full mt-1 left-0 flex flex-col overflow-hidden"
     >
       {loading ? (
         <div className="flex items-center justify-center py-3">
diff --git a/packages/ui/src/components/session/SessionSidebar.tsx b/packages/ui/src/components/session/SessionSidebar.tsx
index f31758f1..23a10191 100644
--- a/packages/ui/src/components/session/SessionSidebar.tsx
+++ b/packages/ui/src/components/session/SessionSidebar.tsx
@@ -13,7 +13,6 @@ import {
   useSensors,
   useDraggable,
   useDroppable,
-  type Modifier,
   type DragEndEvent,
 } from '@dnd-kit/core';
 import {
@@ -114,6 +113,10 @@ const PROJECT_ACTIVE_SESSION_STORAGE_KEY = 'oc.sessions.activeSessionByProject';
 const SESSION_EXPANDED_STORAGE_KEY = 'oc.sessions.expandedParents';
 const SESSION_PINNED_STORAGE_KEY = 'oc.sessions.pinned';
 
+const SESSION_PREFETCH_HOVER_DELAY_MS = 180;
+const SESSION_PREFETCH_CONCURRENCY = 1;
+const SESSION_PREFETCH_PENDING_LIMIT = 6;
+
 const formatDateLabel = (value: string | number) => {
   const targetDate = new Date(value);
   const today = new Date();
@@ -218,19 +221,6 @@ const compareSessionsByPinnedAndTime = (
   return getSessionUpdatedAt(b) - getSessionUpdatedAt(a);
 };
 
-const centerDragOverlayUnderPointer: Modifier = ({ transform, activeNodeRect, activatorEvent }) => {
-  if (!(activatorEvent instanceof MouseEvent) || !activeNodeRect) {
-    return transform;
-  }
-  const overlayHeight = 32;
-  const pointerLiftY = 16;
-  return {
-    ...transform,
-    x: transform.x,
-    y: transform.y - overlayHeight / 2 - pointerLiftY,
-  };
-};
-
 // Format project label: kebab-case/snake_case → Title Case
 const formatProjectLabel = (label: string): string => {
   return label
@@ -289,7 +279,7 @@ const DraggableSessionRow: React.FC<{
       ref={setNodeRef}
       {...attributes}
       onPointerDown={handlePointerDown}
-      className={isDragging ? 'opacity-40' : undefined}
+      className={isDragging ? 'opacity-30' : undefined}
     >
       {children}
     </div>
@@ -375,14 +365,14 @@ const SessionFolderDndScope: React.FC<{
       onDragEnd={handleDragEnd}
     >
       {children}
-      <DragOverlay dropAnimation={null}>
+      <DragOverlay>
         {activeDragId && hasFolders ? (
           <div 
             style={{ 
               width: activeDragWidth ? `${activeDragWidth}px` : 'auto',
               height: activeDragHeight ? `${activeDragHeight}px` : 'auto'
             }}
-            className="flex items-center rounded-md border border-border bg-sidebar px-1.5 py-1 shadow-lg opacity-90 pointer-events-none"
+            className="flex items-center rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] px-2.5 py-1 shadow-none pointer-events-none"
           >
             <RiStickyNoteLine className="h-4 w-4 text-muted-foreground mr-2 flex-shrink-0" />
             <div className="min-w-0 flex-1 truncate typography-ui-label font-normal text-foreground">
@@ -466,13 +456,19 @@ const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
     attributes,
     listeners,
     setNodeRef,
+    transform,
+    transition,
     isDragging,
   } = useSortable({ id });
 
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
 
   return (
-    <div ref={setNodeRef} className={cn('relative', isDragging && 'opacity-40')}>
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn('relative', isDragging && 'opacity-30')}
+    >
       {!hideHeader ? (
         <>
           {/* Sentinel for sticky detection */}
@@ -489,11 +485,11 @@ 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-sidebar',
+              !isDesktopShell && 'bg-transparent',
             )}
             style={{
               backgroundColor: isDesktopShell
-                ? isStuck ? 'var(--sidebar-stuck-bg)' : 'transparent'
+                ? (isStuck ? 'transparent' : 'transparent')
                 : undefined,
               borderColor: isHovered
                 ? 'var(--color-border-hover)'
@@ -708,10 +704,13 @@ const SortableGroupItemBase: React.FC<{
   return (
     <div
       ref={setNodeRef}
-      style={{ transform: CSS.Transform.toString(transform), transition, willChange: 'transform' }}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
       className={cn(
         'space-y-0.5 rounded-md',
-        isDragging && 'opacity-0',
+        isDragging && 'opacity-50',
       )}
       {...attributes}
       {...listeners}
@@ -723,16 +722,7 @@ const SortableGroupItemBase: React.FC<{
 
 const SortableGroupItem = React.memo(SortableGroupItemBase);
 
-const GroupDragOverlayBase: React.FC<{ label: string; showBranchIcon: boolean; width?: number }> = ({ label, showBranchIcon, width }) => {
-  return (
-    <div style={width ? { width: `${width}px` } : undefined} className="h-8 min-w-[180px] max-w-[320px] rounded-sm border border-border bg-sidebar px-2 shadow-lg flex items-center gap-1.5">
-      {showBranchIcon ? <RiGitBranchLine className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" /> : null}
-      <p className="text-[15px] font-semibold truncate text-foreground">{label}</p>
-    </div>
-  );
-};
 
-const GroupDragOverlay = React.memo(GroupDragOverlayBase);
 
 interface SessionSidebarProps {
   mobileVariant?: boolean;
@@ -748,7 +738,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   onSessionSelected,
   allowReselect = false,
   hideDirectoryControls = false,
-  hideProjectSelector = false,
+  hideProjectSelector = true,
   showOnlyMainWorkspace = false,
 }) => {
   const [editingId, setEditingId] = React.useState<string | null>(null);
@@ -761,6 +751,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   const [directoryStatus, setDirectoryStatus] = React.useState<Map<string, 'unknown' | 'exists' | 'missing'>>(
     () => new Map(),
   );
+  const directoryStatusRef = React.useRef<Map<string, 'unknown' | 'exists' | 'missing'>>(new Map());
   const checkingDirectories = React.useRef<Set<string>>(new Set());
   const safeStorage = React.useMemo(() => getSafeStorage(), []);
   const [collapsedProjects, setCollapsedProjects] = React.useState<Set<string>>(new Set());
@@ -847,8 +838,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       return new Map();
     }
   });
-  const [activeDraggedGroupId, setActiveDraggedGroupId] = React.useState<string | null>(null);
-  const [activeDraggedGroupWidth, setActiveDraggedGroupWidth] = React.useState<number | null>(null);
+
   const [isProjectRenameInline, setIsProjectRenameInline] = React.useState(false);
   const [projectRenameDraft, setProjectRenameDraft] = React.useState('');
   const [projectRootBranches, setProjectRootBranches] = React.useState<Map<string, string>>(new Map());
@@ -865,7 +855,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   const activeProjectId = useProjectsStore((state) => state.activeProjectId);
   const addProject = useProjectsStore((state) => state.addProject);
   const removeProject = useProjectsStore((state) => state.removeProject);
-  const setActiveProject = useProjectsStore((state) => state.setActiveProject);
   const setActiveProjectIdOnly = useProjectsStore((state) => state.setActiveProjectIdOnly);
   const renameProject = useProjectsStore((state) => state.renameProject);
 
@@ -879,9 +868,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   const settingsAutoCreateWorktree = useConfigStore((state) => state.settingsAutoCreateWorktree);
 
   // Session Folders store
-  // Subscribe to foldersMap so renderSessionNode/renderGroupSessions re-run when any folder changes.
-  // getFoldersForScope is a stable function selector and does not trigger re-renders on its own.
-  const foldersMap = useSessionFoldersStore((state) => state.foldersMap);
   const collapsedFolderIds = useSessionFoldersStore((state) => state.collapsedFolderIds);
   const getFoldersForScope = useSessionFoldersStore((state) => state.getFoldersForScope);
   const createFolder = useSessionFoldersStore((state) => state.createFolder);
@@ -900,6 +886,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   const currentSessionId = useSessionStore((state) => state.currentSessionId);
   const newSessionDraftOpen = useSessionStore((state) => Boolean(state.newSessionDraft?.open));
   const setCurrentSession = useSessionStore((state) => state.setCurrentSession);
+  const loadMessages = useSessionStore((state) => state.loadMessages);
   const updateSessionTitle = useSessionStore((state) => state.updateSessionTitle);
   const shareSession = useSessionStore((state) => state.shareSession);
   const unshareSession = useSessionStore((state) => state.unshareSession);
@@ -1022,6 +1009,99 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     return [...sessions].sort((a, b) => compareSessionsByPinnedAndTime(a, b, pinnedSessionIds));
   }, [sessions, pinnedSessionIds]);
 
+  React.useEffect(() => {
+    directoryStatusRef.current = directoryStatus;
+  }, [directoryStatus]);
+
+  const sessionPrefetchTimersRef = React.useRef<Map<string, number>>(new Map());
+  const sessionPrefetchQueueRef = React.useRef<string[]>([]);
+  const sessionPrefetchInFlightRef = React.useRef<Set<string>>(new Set());
+
+  const pumpSessionPrefetchQueue = React.useCallback(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    while (sessionPrefetchInFlightRef.current.size < SESSION_PREFETCH_CONCURRENCY && sessionPrefetchQueueRef.current.length > 0) {
+      const nextSessionId = sessionPrefetchQueueRef.current.shift();
+      if (!nextSessionId) {
+        break;
+      }
+
+      const state = useSessionStore.getState();
+      if (state.currentSessionId === nextSessionId) {
+        continue;
+      }
+
+      const hasMessages = state.messages.has(nextSessionId);
+      const memory = state.sessionMemoryState.get(nextSessionId);
+      const isHydrated = hasMessages && memory?.historyComplete !== undefined;
+      if (isHydrated) {
+        continue;
+      }
+
+      sessionPrefetchInFlightRef.current.add(nextSessionId);
+      void loadMessages(nextSessionId)
+        .catch(() => {
+          return;
+        })
+        .finally(() => {
+          sessionPrefetchInFlightRef.current.delete(nextSessionId);
+          pumpSessionPrefetchQueue();
+        });
+    }
+  }, [loadMessages]);
+
+  const scheduleSessionPrefetch = React.useCallback((sessionId: string | null | undefined) => {
+    if (!sessionId || sessionId === currentSessionId || typeof window === 'undefined') {
+      return;
+    }
+
+    const state = useSessionStore.getState();
+    const hasMessages = state.messages.has(sessionId);
+    const memory = state.sessionMemoryState.get(sessionId);
+    const isHydrated = hasMessages && memory?.historyComplete !== undefined;
+    if (isHydrated) {
+      return;
+    }
+
+    if (sessionPrefetchInFlightRef.current.has(sessionId)) {
+      return;
+    }
+
+    if (sessionPrefetchQueueRef.current.includes(sessionId)) {
+      return;
+    }
+
+    if (sessionPrefetchQueueRef.current.length >= SESSION_PREFETCH_PENDING_LIMIT) {
+      sessionPrefetchQueueRef.current.shift();
+    }
+
+    const existingTimer = sessionPrefetchTimersRef.current.get(sessionId);
+    if (existingTimer !== undefined) {
+      window.clearTimeout(existingTimer);
+    }
+
+    const timer = window.setTimeout(() => {
+      sessionPrefetchTimersRef.current.delete(sessionId);
+      sessionPrefetchQueueRef.current.push(sessionId);
+      pumpSessionPrefetchQueue();
+    }, SESSION_PREFETCH_HOVER_DELAY_MS);
+    sessionPrefetchTimersRef.current.set(sessionId, timer);
+  }, [currentSessionId, pumpSessionPrefetchQueue]);
+
+  React.useEffect(() => {
+    if (!currentSessionId || sortedSessions.length === 0) {
+      return;
+    }
+    const currentIndex = sortedSessions.findIndex((session) => session.id === currentSessionId);
+    if (currentIndex < 0) {
+      return;
+    }
+    scheduleSessionPrefetch(sortedSessions[currentIndex - 1]?.id);
+    scheduleSessionPrefetch(sortedSessions[currentIndex + 1]?.id);
+  }, [currentSessionId, scheduleSessionPrefetch, sortedSessions]);
+
   React.useEffect(() => {
     let cancelled = false;
     const normalizedProjects = projects
@@ -1094,7 +1174,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     });
 
     directories.forEach((directory) => {
-      const known = directoryStatus.get(directory);
+      const known = directoryStatusRef.current.get(directory);
       if ((known && known !== 'unknown') || checkingDirectories.current.has(directory)) {
         return;
       }
@@ -1147,13 +1227,19 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
           checkingDirectories.current.delete(directory);
         });
     });
-  }, [sortedSessions, projects, directoryStatus]);
+  }, [sortedSessions, projects]);
 
   React.useEffect(() => {
+    const prefetchTimers = sessionPrefetchTimersRef.current;
     return () => {
       if (copyTimeout.current) {
         clearTimeout(copyTimeout.current);
       }
+      prefetchTimers.forEach((timer) => {
+        clearTimeout(timer);
+      });
+      prefetchTimers.clear();
+      sessionPrefetchQueueRef.current = [];
     };
   }, []);
 
@@ -2035,8 +2121,19 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     setIsProjectRenameInline(false);
   }, [activeProjectForHeader, projectRenameDraft, renameProject]);
 
-  const headerActionButtonClass =
+  const desktopHeaderActionButtonClass =
+    'inline-flex h-6 w-6 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';
+  const mobileHeaderActionButtonClass =
     'inline-flex h-6 w-6 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';
+  const headerActionButtonClass = mobileVariant ? mobileHeaderActionButtonClass : desktopHeaderActionButtonClass;
+  const headerActionIconClass = 'h-4.5 w-4.5';
+  const addProjectButtonClass = cn(
+    'inline-flex items-center justify-center rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+    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',
+  );
 
   // Track when project sticky headers become "stuck"
   React.useEffect(() => {
@@ -2508,7 +2605,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       removeSessionFromFolder,
       createFolderAndStartRename,
       notifyOnSubtasks,
-      foldersMap, // trigger re-render when folder data changes (getFoldersForScope is a stable fn selector)
     ],
   );
 
@@ -2626,7 +2722,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                 depth={depth}
                 onNewSession={() => {
                   if (projectId && projectId !== activeProjectId) {
-                    setActiveProject(projectId);
+                    setActiveProjectIdOnly(projectId);
                   }
                   setActiveMainTab('chat');
                   if (mobileVariant) {
@@ -2697,7 +2793,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
         <div className="oc-group">
           <div
             className={cn(
-              "group/gh flex items-center justify-between gap-2 py-1 min-w-0 rounded-sm",
+              "group/gh relative flex items-center justify-between gap-1 py-1 min-w-0 rounded-sm",
               !hideGroupLabel && "hover:bg-interactive-hover/50 cursor-pointer"
             )}
             onClick={!hideGroupLabel ? () => {
@@ -2730,12 +2826,19 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
             aria-label={!hideGroupLabel ? (isCollapsed ? `Expand ${group.label}` : `Collapse ${group.label}`) : undefined}
           >
             {!hideGroupLabel ? (
-              <div className="min-w-0 flex items-center gap-1.5 pl-1.5">
+              <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.isMain || isGitProject ? (
                   <RiGitBranchLine className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
                 ) : null}
                 <div className="min-w-0 flex flex-col justify-center">
-                  <p className={cn('text-[15px] font-semibold truncate', isActiveGroup ? 'text-primary' : 'text-muted-foreground')}>
+                  <p className={cn('text-[14px] font-semibold truncate', isActiveGroup ? 'text-primary' : 'text-muted-foreground')}>
                     {group.label}
                   </p>
                   {showBranchSubtitle ? (
@@ -2752,60 +2855,67 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
               </div>
             ) : <div />}
             {group.directory ? (
-              <div className="flex items-center gap-1 px-0.5">
+              <>
                 {!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>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            sessionEvents.requestDelete({
+                              sessions: allGroupSessions,
+                              mode: 'worktree',
+                              worktree: group.worktree,
+                            });
+                          }}
+                          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 ${group.label}`}
+                        >
+                          <RiDeleteBinLine className="h-4 w-4" />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent side="bottom" sideOffset={4}>
+                        <p>Delete worktree</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </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/gh:opacity-100 group-focus-within/gh:opacity-100',
+                )}>
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <button
                         type="button"
                         onClick={(event) => {
                           event.stopPropagation();
-                          sessionEvents.requestDelete({
-                            sessions: allGroupSessions,
-                            mode: 'worktree',
-                            worktree: group.worktree,
-                          });
+                          if (projectId && projectId !== activeProjectId) {
+                            setActiveProjectIdOnly(projectId);
+                          }
+                          setActiveMainTab('chat');
+                          if (mobileVariant) {
+                            setSessionSwitcherOpen(false);
+                          }
+                          openNewSessionDraft({ directoryOverride: group.directory });
                         }}
-                        className={cn(
-                          '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 transition-opacity',
-                          mobileVariant ? 'opacity-100' : 'opacity-0 group-hover/gh:opacity-100 group-focus-within/gh:opacity-100',
-                        )}
-                        aria-label={`Delete ${group.label}`}
+                        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}`}
                       >
-                        <RiDeleteBinLine className="h-4 w-4" />
+                        <RiAddLine className="h-4 w-4" />
                       </button>
                     </TooltipTrigger>
                     <TooltipContent side="bottom" sideOffset={4}>
-                      <p>Delete worktree</p>
+                      <p>New session</p>
                     </TooltipContent>
                   </Tooltip>
-                ) : null}
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      type="button"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        if (projectId && projectId !== activeProjectId) {
-                          setActiveProject(projectId);
-                        }
-                        setActiveMainTab('chat');
-                        if (mobileVariant) {
-                          setSessionSwitcherOpen(false);
-                        }
-                        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>
+                </div>
+              </>
             ) : null}
           </div>
           {!isCollapsed ? (
@@ -2857,7 +2967,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       renderSessionNode,
       toggleGroupSessionLimit,
       activeProjectId,
-      setActiveProject,
+      setActiveProjectIdOnly,
       setActiveMainTab,
       mobileVariant,
       setSessionSwitcherOpen,
@@ -2873,7 +2983,6 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       renamingFolderId,
       renameFolderDraft,
       pinnedSessionIds,
-      foldersMap, // trigger re-render when folder data changes (getFoldersForScope is a stable fn selector)
     ]
   );
 
@@ -2893,7 +3002,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     <div
       className={cn(
         'flex h-full flex-col text-foreground overflow-x-hidden',
-        mobileVariant ? '' : 'bg-sidebar',
+        mobileVariant ? '' : 'bg-transparent',
       )}
     >
       {!hideDirectoryControls && (
@@ -2934,7 +3043,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                   return (
                     <DropdownMenuItem
                       key={project.id}
-                      onClick={() => setActiveProject(project.id)}
+                      onClick={() => setActiveProjectIdOnly(project.id)}
                       className={cn('truncate', project.id === activeProjectId && 'text-primary')}
                     >
                       <span className="truncate">{label}</span>
@@ -3009,14 +3118,11 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
             <button
               type="button"
               onClick={handleOpenDirectoryDialog}
-              className={cn(
-                'inline-flex h-8 w-8 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',
-                    !isDesktopShellRuntime && 'bg-sidebar/60 hover:bg-sidebar',
-              )}
+              className={addProjectButtonClass}
               aria-label="Add project"
               title="Add project"
             >
-              <RiFolderAddLine className="h-4.5 w-4.5" />
+              <RiFolderAddLine className={headerActionIconClass} />
             </button>
           </div>
           )}
@@ -3035,7 +3141,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                         return;
                       }
                       if (activeProjectForHeader.id !== activeProjectId) {
-                        setActiveProject(activeProjectForHeader.id);
+                        setActiveProjectIdOnly(activeProjectForHeader.id);
                       }
                       const newWorktreePath = await createWorktreeOnly();
                       if (!newWorktreePath) {
@@ -3050,7 +3156,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                     className={headerActionButtonClass}
                     aria-label="New worktree"
                   >
-                    <RiNodeTree className="h-4.5 w-4.5" />
+                    <RiNodeTree className={headerActionIconClass} />
                   </button>
                 </TooltipTrigger>
                 <TooltipContent side="bottom" sideOffset={4}><p>New worktree</p></TooltipContent>
@@ -3063,7 +3169,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                     className={headerActionButtonClass}
                     aria-label="New from issue"
                   >
-                    <RiGithubLine className="h-4.5 w-4.5" />
+                    <RiGithubLine className={headerActionIconClass} />
                   </button>
                 </TooltipTrigger>
                 <TooltipContent side="bottom" sideOffset={4}><p>New from issue</p></TooltipContent>
@@ -3076,7 +3182,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                     className={headerActionButtonClass}
                     aria-label="New from PR"
                   >
-                    <RiGitPullRequestLine className="h-4.5 w-4.5" />
+                    <RiGitPullRequestLine className={headerActionIconClass} />
                   </button>
                 </TooltipTrigger>
                 <TooltipContent side="bottom" sideOffset={4}><p>New from PR</p></TooltipContent>
@@ -3089,7 +3195,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                     className={headerActionButtonClass}
                     aria-label="New multi-run"
                   >
-                    <ArrowsMerge className="h-4.5 w-4.5" />
+                    <ArrowsMerge className={headerActionIconClass} />
                   </button>
                 </TooltipTrigger>
                 <TooltipContent side="bottom" sideOffset={4}><p>New multi-run</p></TooltipContent>
@@ -3105,7 +3211,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                       className={headerActionButtonClass}
                       aria-label="Manage branches"
                     >
-                      <RiGitRepositoryLine className="h-4.5 w-4.5" />
+                      <RiGitRepositoryLine className={headerActionIconClass} />
                     </button>
                   </TooltipTrigger>
                   <TooltipContent side="bottom" sideOffset={4}><p>Manage branches</p></TooltipContent>
@@ -3120,7 +3226,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                       className={headerActionButtonClass}
                       aria-label="Project notes and todos"
                     >
-                      <RiStickyNoteLine className="h-4.5 w-4.5" />
+                      <RiStickyNoteLine className={headerActionIconClass} />
                     </button>
                   </TooltipTrigger>
                   <TooltipContent side="bottom" sideOffset={4}><p>Project notes</p></TooltipContent>
@@ -3135,7 +3241,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                           className={headerActionButtonClass}
                           aria-label="Project notes and todos"
                         >
-                          <RiStickyNoteLine className="h-4.5 w-4.5" />
+                          <RiStickyNoteLine className={headerActionIconClass} />
                         </button>
                       </DropdownMenuTrigger>
                     </TooltipTrigger>
@@ -3225,7 +3331,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                     onHoverChange={(hovered) => setHoveredProjectId(hovered ? projectKey : null)}
                     onNewSession={() => {
                       if (projectKey !== activeProjectId) {
-                        setActiveProject(projectKey);
+                        setActiveProjectIdOnly(projectKey);
                       }
                       setActiveMainTab('chat');
                       if (mobileVariant) {
@@ -3235,7 +3341,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                     }}
                     onNewWorktreeSession={() => {
                       if (projectKey !== activeProjectId) {
-                        setActiveProject(projectKey);
+                        setActiveProjectIdOnly(projectKey);
                       }
                       setActiveMainTab('chat');
                       if (mobileVariant) {
@@ -3245,19 +3351,19 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                     }}
                     onNewSessionFromGitHubIssue={() => {
                       if (projectKey !== activeProjectId) {
-                        setActiveProject(projectKey);
+                        setActiveProjectIdOnly(projectKey);
                       }
                       setIssuePickerOpen(true);
                     }}
                     onNewSessionFromGitHubPR={() => {
                       if (projectKey !== activeProjectId) {
-                        setActiveProject(projectKey);
+                        setActiveProjectIdOnly(projectKey);
                       }
                       setPullRequestPickerOpen(true);
                     }}
                     onOpenMultiRunLauncher={() => {
                       if (projectKey !== activeProjectId) {
-                        setActiveProject(projectKey);
+                        setActiveProjectIdOnly(projectKey);
                       }
                       openMultiRunLauncher();
                     }}
@@ -3282,19 +3388,8 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                           <DndContext
                             sensors={sensors}
                             collisionDetection={closestCenter}
-                            onDragStart={(event) => {
-                              setActiveDraggedGroupId(String(event.active.id));
-                              const width = (event.active.rect.current.initial?.width ?? null);
-                              setActiveDraggedGroupWidth(typeof width === 'number' ? width : null);
-                            }}
-                            onDragCancel={() => {
-                              setActiveDraggedGroupId(null);
-                              setActiveDraggedGroupWidth(null);
-                            }}
                             onDragEnd={(event) => {
                               const { active, over } = event;
-                              setActiveDraggedGroupId(null);
-                              setActiveDraggedGroupWidth(null);
                               if (!over || active.id === over.id) {
                                 return;
                               }
@@ -3324,18 +3419,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                                 );
                               })}
                             </SortableContext>
-                            <DragOverlay modifiers={[centerDragOverlayUnderPointer]} dropAnimation={null}>
-                              {activeDraggedGroupId ? (
-                                (() => {
-                                  const dragGroup = orderedGroups.find((group) => group.id === activeDraggedGroupId);
-                                  if (!dragGroup) {
-                                    return null;
-                                  }
-                                  const showBranchIcon = !dragGroup.isMain || Boolean(isRepo);
-                                  return <GroupDragOverlay label={dragGroup.label} showBranchIcon={showBranchIcon} width={activeDraggedGroupWidth ?? undefined} />;
-                                })()
-                              ) : null}
-                            </DragOverlay>
+                            <DragOverlay dropAnimation={null} />
                           </DndContext>
                         ) : (
                           <div className="py-1 text-left typography-micro text-muted-foreground">
diff --git a/packages/ui/src/components/ui/HelpDialog.tsx b/packages/ui/src/components/ui/HelpDialog.tsx
index e51293de..a40eea74 100644
--- a/packages/ui/src/components/ui/HelpDialog.tsx
+++ b/packages/ui/src/components/ui/HelpDialog.tsx
@@ -185,7 +185,7 @@ export const HelpDialog: React.FC = () => {
         },
         {
           keys: [`${mod} + 1...9`],
-          description: "Switch Project or Main Tab",
+          description: "Switch Project",
           icon: RiLayoutLeftLine,
         },
         {
diff --git a/packages/ui/src/components/ui/animated-tabs.tsx b/packages/ui/src/components/ui/animated-tabs.tsx
index 4963623c..7d9d5264 100644
--- a/packages/ui/src/components/ui/animated-tabs.tsx
+++ b/packages/ui/src/components/ui/animated-tabs.tsx
@@ -92,7 +92,7 @@ export function AnimatedTabs<T extends string>({
         <div
           ref={indicatorRef}
           className={cn(
-            'absolute top-0.5 bottom-0.5 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] shadow-sm',
+            'absolute top-0.5 bottom-0.5 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] shadow-none',
             animate && isReadyToAnimate ? 'transition-[transform,width] duration-200 ease-out' : null
           )}
           style={{ width: 0, transform: 'translateX(0)' }}
diff --git a/packages/ui/src/components/ui/dropdown-menu.tsx b/packages/ui/src/components/ui/dropdown-menu.tsx
index b224bcac..43ac4307 100644
--- a/packages/ui/src/components/ui/dropdown-menu.tsx
+++ b/packages/ui/src/components/ui/dropdown-menu.tsx
@@ -44,7 +44,7 @@ function DropdownMenuContent({
           color: 'var(--surface-elevated-foreground)',
         }}
         className={cn(
-          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-visible rounded-xl border-2 border-border/60 p-1 shadow-md",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-visible rounded-xl border-2 border-border/60 p-1 shadow-none",
           className
         )}
         {...props}
@@ -236,7 +236,7 @@ function DropdownMenuSubContent({
           color: 'var(--surface-elevated-foreground)',
         }}
         className={cn(
-          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-visible rounded-xl border-2 border-border/60 p-1 shadow-md",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-visible rounded-xl border-2 border-border/60 p-1 shadow-none",
           className
         )}
         {...props}
diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
index 4b30e325..3edc2886 100644
--- a/packages/ui/src/components/ui/select.tsx
+++ b/packages/ui/src/components/ui/select.tsx
@@ -69,7 +69,7 @@ function SelectContent({
         color: 'var(--surface-elevated-foreground)',
       }}
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden rounded-xl border-2 border-border/60 shadow-md transform-gpu will-change-transform",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden rounded-xl border-2 border-border/60 shadow-none transform-gpu will-change-transform",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         fitContent && "w-max min-w-0",
diff --git a/packages/ui/src/components/ui/slider.tsx b/packages/ui/src/components/ui/slider.tsx
index 5943f46e..3c79b842 100644
--- a/packages/ui/src/components/ui/slider.tsx
+++ b/packages/ui/src/components/ui/slider.tsx
@@ -45,10 +45,10 @@ export const Slider: React.FC<SliderProps> = ({
             'disabled:cursor-not-allowed disabled:opacity-50',
             '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4',
             '[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary',
-            '[&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:transition-transform',
+            '[&::-webkit-slider-thumb]:shadow-none [&::-webkit-slider-thumb]:transition-transform',
             '[&::-webkit-slider-thumb]:hover:scale-110 [&::-webkit-slider-thumb]:active:scale-95',
             '[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full',
-            '[&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:shadow-md'
+            '[&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:shadow-none'
           )}
           aria-label={label}
           aria-valuemin={min}
diff --git a/packages/ui/src/components/ui/switch.tsx b/packages/ui/src/components/ui/switch.tsx
index 34eef41c..13022997 100644
--- a/packages/ui/src/components/ui/switch.tsx
+++ b/packages/ui/src/components/ui/switch.tsx
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--interactive-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-[var(--interactive-border)]',
+      'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--interactive-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-[var(--interactive-border)]',
       className
     )}
     style={{ width: '36px', height: '20px', minWidth: '36px', minHeight: '20px' }}
@@ -18,7 +18,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+        'pointer-events-none block rounded-full bg-background shadow-none ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
       )}
       style={{ width: '16px', height: '16px', minWidth: '16px', minHeight: '16px' }}
     />
diff --git a/packages/ui/src/components/views/GitView.tsx b/packages/ui/src/components/views/GitView.tsx
index 92fe6be2..5052b0e3 100644
--- a/packages/ui/src/components/views/GitView.tsx
+++ b/packages/ui/src/components/views/GitView.tsx
@@ -97,6 +97,8 @@ type GitmojiCachePayload = {
 const GITMOJI_CACHE_KEY = 'gitmojiCache';
 const GITMOJI_CACHE_TTL_MS = 1000 * 60 * 60 * 24 * 7;
 const GITMOJI_CACHE_VERSION = '1';
+const GIT_DIFF_PRIORITY_PREFETCH_LIMIT = 40;
+const GIT_DIFF_PRIORITY_BASELINE_LIMIT = 20;
 const GITMOJI_SOURCE_URL =
   'https://raw.githubusercontent.com/carloscuesta/gitmoji/master/packages/gitmojis/src/gitmojis.json';
 
@@ -245,6 +247,7 @@ export const GitView: React.FC<GitViewProps> = ({ mode = 'full' }) => {
     fetchBranches,
     fetchLog,
     fetchIdentity,
+    prefetchDiffs,
     setLogMaxCount,
   } = useGitStore();
   const isMobile = useUIStore((state) => state.isMobile);
@@ -310,6 +313,7 @@ export const GitView: React.FC<GitViewProps> = ({ mode = 'full' }) => {
   const [commitMessage, setCommitMessage] = React.useState(
     initialSnapshot?.commitMessage ?? ''
   );
+  const [visibleChangePaths, setVisibleChangePaths] = React.useState<string[]>([]);
   const [isGitmojiPickerOpen, setIsGitmojiPickerOpen] = React.useState(false);
   const actionPanelScrollRef = React.useRef<HTMLElement | null>(null);
   const [syncAction, setSyncAction] = React.useState<SyncAction>(null);
@@ -620,10 +624,12 @@ export const GitView: React.FC<GitViewProps> = ({ mode = 'full' }) => {
 
       const dirState = useGitStore.getState().directories.get(currentDirectory);
       if (!dirState?.status) {
-        fetchAll(currentDirectory, git, { force: true });
+        void fetchAll(currentDirectory, git, { force: true });
+      } else {
+        void fetchStatus(currentDirectory, git, { silent: true });
       }
     }
-  }, [currentDirectory, setActiveDirectory, fetchAll, git]);
+  }, [currentDirectory, setActiveDirectory, fetchAll, fetchStatus, git]);
 
   const refreshStatusAndBranches = React.useCallback(
     async (showErrors = true) => {
@@ -706,6 +712,39 @@ export const GitView: React.FC<GitViewProps> = ({ mode = 'full' }) => {
     return Array.from(unique.values()).sort((a, b) => a.path.localeCompare(b.path));
   }, [status]);
 
+  React.useEffect(() => {
+    if (!currentDirectory || changeEntries.length === 0) {
+      return;
+    }
+
+    const orderedPaths: string[] = [];
+    const seen = new Set<string>();
+
+    const pushPath = (path: string) => {
+      if (!path || seen.has(path)) {
+        return;
+      }
+      seen.add(path);
+      orderedPaths.push(path);
+    };
+
+    Array.from(selectedPaths).forEach(pushPath);
+    visibleChangePaths.forEach(pushPath);
+    changeEntries.slice(0, GIT_DIFF_PRIORITY_BASELINE_LIMIT).forEach((entry) => pushPath(entry.path));
+
+    if (orderedPaths.length === 0) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      void prefetchDiffs(currentDirectory, git, orderedPaths, { maxFiles: GIT_DIFF_PRIORITY_PREFETCH_LIMIT });
+    }, 120);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [changeEntries, currentDirectory, git, prefetchDiffs, selectedPaths, visibleChangePaths]);
+
 
   React.useEffect(() => {
     if (!status || changeEntries.length === 0) {
@@ -1628,7 +1667,7 @@ export const GitView: React.FC<GitViewProps> = ({ mode = 'full' }) => {
   }
 
   return (
-    <div className="flex h-full flex-col overflow-hidden bg-background" data-keyboard-avoid="true">
+    <div className={cn('flex h-full flex-col overflow-hidden', isSidebarMode ? 'bg-transparent' : 'bg-background')} data-keyboard-avoid="true">
       <GitHeader
         status={status}
         localBranches={localBranches}
@@ -1670,7 +1709,7 @@ export const GitView: React.FC<GitViewProps> = ({ mode = 'full' }) => {
 
       <div className="flex-1 min-h-0 overflow-hidden">
         <div className="h-full min-h-0 flex flex-col">
-          <div className={cn('min-w-0 min-h-0 h-full bg-muted/10 flex flex-col', isSidebarMode && 'border-t border-border/40')}>
+          <div className={cn('min-w-0 min-h-0 h-full flex flex-col', isSidebarMode ? 'bg-transparent border-t border-border/40' : 'bg-muted/10')}>
             <div className="px-3 py-1.5">
               <AnimatedTabs<ActionTab>
                 value={actionTab}
@@ -1704,6 +1743,7 @@ export const GitView: React.FC<GitViewProps> = ({ mode = 'full' }) => {
                         variant="plain"
                         maxListHeightClassName="max-h-[40vh]"
                         changeEntries={changeEntries}
+                        onVisiblePathsChange={setVisibleChangePaths}
                         selectedPaths={selectedPaths}
                         diffStats={status?.diffStats}
                         revertingPaths={revertingPaths}
diff --git a/packages/ui/src/components/views/SettingsWindow.tsx b/packages/ui/src/components/views/SettingsWindow.tsx
index e1e7cf52..270f12b9 100644
--- a/packages/ui/src/components/views/SettingsWindow.tsx
+++ b/packages/ui/src/components/views/SettingsWindow.tsx
@@ -25,7 +25,7 @@ export const SettingsWindow: React.FC<SettingsWindowProps> = ({ open, onOpenChan
           className={cn(
             'fixed z-50 top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]',
             'w-[90vw] max-w-[960px] h-[85vh] max-h-[900px]',
-            'rounded-xl border shadow-2xl overflow-hidden',
+            'rounded-xl border shadow-none overflow-hidden',
             'bg-background'
           )}
         >
diff --git a/packages/ui/src/components/views/git/AIHighlightsBox.tsx b/packages/ui/src/components/views/git/AIHighlightsBox.tsx
index 347085b3..26338160 100644
--- a/packages/ui/src/components/views/git/AIHighlightsBox.tsx
+++ b/packages/ui/src/components/views/git/AIHighlightsBox.tsx
@@ -24,7 +24,7 @@ export const AIHighlightsBox: React.FC<AIHighlightsBoxProps> = ({
   };
 
   return (
-    <div className="space-y-2 rounded-xl border border-border/60 bg-background/60 px-3 py-2">
+    <div className="space-y-2 rounded-xl border border-border/60 bg-transparent px-3 py-2">
       <div className="flex items-center justify-between gap-2">
         <p className="typography-micro text-muted-foreground">AI highlights</p>
         <Tooltip delayDuration={1000}>
diff --git a/packages/ui/src/components/views/git/ChangeRow.tsx b/packages/ui/src/components/views/git/ChangeRow.tsx
index d8873034..6e5d9e40 100644
--- a/packages/ui/src/components/views/git/ChangeRow.tsx
+++ b/packages/ui/src/components/views/git/ChangeRow.tsx
@@ -96,14 +96,13 @@ export const ChangeRow = React.memo<ChangeRowProps>(function ChangeRow({
   );
 
   return (
-    <li>
-      <div
-        className="group flex items-center gap-2 px-3 py-1.5 hover:bg-sidebar/40 cursor-pointer"
-        role="button"
-        tabIndex={0}
-        onClick={onViewDiff}
-        onKeyDown={handleKeyDown}
-      >
+    <div
+      className="group flex items-center gap-2 px-3 py-1.5 hover:bg-sidebar/40 cursor-pointer"
+      role="button"
+      tabIndex={0}
+      onClick={onViewDiff}
+      onKeyDown={handleKeyDown}
+    >
         <button
           type="button"
           onClick={handleToggleClick}
@@ -175,7 +174,6 @@ export const ChangeRow = React.memo<ChangeRowProps>(function ChangeRow({
           </TooltipTrigger>
           <TooltipContent sideOffset={8}>Revert changes</TooltipContent>
         </Tooltip>
-      </div>
-    </li>
+    </div>
   );
 });
diff --git a/packages/ui/src/components/views/git/ChangesSection.tsx b/packages/ui/src/components/views/git/ChangesSection.tsx
index 9b68325a..f5ed85da 100644
--- a/packages/ui/src/components/views/git/ChangesSection.tsx
+++ b/packages/ui/src/components/views/git/ChangesSection.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { Button } from '@/components/ui/button';
 import { ScrollShadow } from '@/components/ui/ScrollShadow';
 import { OverlayScrollbar } from '@/components/ui/OverlayScrollbar';
@@ -18,8 +19,12 @@ interface ChangesSectionProps {
   onRevertFile: (path: string) => void;
   variant?: 'framed' | 'plain';
   maxListHeightClassName?: string;
+  onVisiblePathsChange?: (paths: string[]) => void;
 }
 
+const CHANGE_LIST_VIRTUALIZE_THRESHOLD = 120;
+const CHANGE_ROW_ESTIMATE_PX = 34;
+
 export const ChangesSection: React.FC<ChangesSectionProps> = ({
   changeEntries,
   selectedPaths,
@@ -32,10 +37,43 @@ export const ChangesSection: React.FC<ChangesSectionProps> = ({
   onRevertFile,
   variant = 'framed',
   maxListHeightClassName,
+  onVisiblePathsChange,
 }) => {
   const scrollRef = React.useRef<HTMLDivElement | null>(null);
   const selectedCount = selectedPaths.size;
   const totalCount = changeEntries.length;
+  const shouldVirtualize = totalCount >= CHANGE_LIST_VIRTUALIZE_THRESHOLD;
+
+  const rowVirtualizer = useVirtualizer({
+    count: totalCount,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => CHANGE_ROW_ESTIMATE_PX,
+    overscan: 10,
+    enabled: shouldVirtualize,
+  });
+
+  const virtualRows = React.useMemo(
+    () => (shouldVirtualize ? rowVirtualizer.getVirtualItems() : []),
+    [rowVirtualizer, shouldVirtualize],
+  );
+
+  React.useEffect(() => {
+    if (!onVisiblePathsChange) {
+      return;
+    }
+
+    if (totalCount === 0) {
+      onVisiblePathsChange([]);
+      return;
+    }
+
+    if (!shouldVirtualize) {
+      onVisiblePathsChange(changeEntries.slice(0, Math.min(30, totalCount)).map((entry) => entry.path));
+      return;
+    }
+
+    onVisiblePathsChange(virtualRows.map((row) => changeEntries[row.index]?.path).filter((value): value is string => Boolean(value)));
+  }, [changeEntries, onVisiblePathsChange, shouldVirtualize, totalCount, virtualRows]);
 
   const containerClassName =
     variant === 'framed'
@@ -86,20 +124,54 @@ export const ChangesSection: React.FC<ChangesSectionProps> = ({
           ref={scrollRef}
           className="overlay-scrollbar-target overlay-scrollbar-container flex-1 min-h-0 w-full overflow-y-auto overflow-x-hidden"
         >
-          <ul className="divide-y divide-border/60">
-            {changeEntries.map((file) => (
-              <ChangeRow
-                key={file.path}
-                file={file}
-                checked={selectedPaths.has(file.path)}
-                stats={diffStats?.[file.path]}
-                onToggle={() => onToggleFile(file.path)}
-                onViewDiff={() => onViewDiff(file.path)}
-                onRevert={() => onRevertFile(file.path)}
-                isReverting={revertingPaths.has(file.path)}
-              />
-            ))}
-          </ul>
+          {shouldVirtualize ? (
+            <div
+              className="relative w-full divide-y divide-border/60"
+              style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
+            >
+              {virtualRows.map((row) => {
+                const file = changeEntries[row.index];
+                if (!file) {
+                  return null;
+                }
+
+                return (
+                  <div
+                    key={file.path}
+                    ref={rowVirtualizer.measureElement}
+                    data-index={row.index}
+                    className="absolute left-0 top-0 w-full"
+                    style={{ transform: `translateY(${row.start}px)` }}
+                  >
+                    <ChangeRow
+                      file={file}
+                      checked={selectedPaths.has(file.path)}
+                      stats={diffStats?.[file.path]}
+                      onToggle={() => onToggleFile(file.path)}
+                      onViewDiff={() => onViewDiff(file.path)}
+                      onRevert={() => onRevertFile(file.path)}
+                      isReverting={revertingPaths.has(file.path)}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="divide-y divide-border/60" role="list" aria-label="Changed files">
+              {changeEntries.map((file) => (
+                <ChangeRow
+                  key={file.path}
+                  file={file}
+                  checked={selectedPaths.has(file.path)}
+                  stats={diffStats?.[file.path]}
+                  onToggle={() => onToggleFile(file.path)}
+                  onViewDiff={() => onViewDiff(file.path)}
+                  onRevert={() => onRevertFile(file.path)}
+                  isReverting={revertingPaths.has(file.path)}
+                />
+              ))}
+            </div>
+          )}
         </ScrollShadow>
         <OverlayScrollbar containerRef={scrollRef} disableHorizontal />
       </div>
diff --git a/packages/ui/src/components/views/git/CommitInput.tsx b/packages/ui/src/components/views/git/CommitInput.tsx
index 720f892c..b24c7876 100644
--- a/packages/ui/src/components/views/git/CommitInput.tsx
+++ b/packages/ui/src/components/views/git/CommitInput.tsx
@@ -45,7 +45,7 @@ export const CommitInput: React.FC<CommitInputProps> = ({
       autoCapitalize={hasTouchInput ? 'sentences' : 'off'}
       spellCheck={hasTouchInput ? true : false}
       className={cn(
-        'rounded-lg bg-background/80 resize-none overflow-y-auto',
+        'rounded-lg bg-transparent resize-none overflow-y-auto',
         disabled && 'opacity-50'
       )}
       style={{ minHeight: MIN_HEIGHT, maxHeight: MAX_HEIGHT }}
diff --git a/packages/ui/src/components/views/git/GitHeader.tsx b/packages/ui/src/components/views/git/GitHeader.tsx
index ce9d845a..81dd4869 100644
--- a/packages/ui/src/components/views/git/GitHeader.tsx
+++ b/packages/ui/src/components/views/git/GitHeader.tsx
@@ -285,7 +285,7 @@ export const GitHeader: React.FC<GitHeaderProps> = ({
 
   if (useTwoRowHeader) {
     return (
-      <header className="@container/git-header border-b border-border/40 px-3 py-2 bg-background">
+      <header className={`@container/git-header border-b border-border/40 px-3 py-2 ${isSidebarMode ? 'bg-transparent' : 'bg-background'}`}>
         <div className="flex items-center justify-between gap-2 min-w-0">
           <div className="min-w-0 flex-1">
             {isWorktreeMode ? (
@@ -320,7 +320,7 @@ export const GitHeader: React.FC<GitHeaderProps> = ({
   }
 
   return (
-    <header className="@container/git-header flex items-center gap-2 border-b border-border/40 px-3 py-2 bg-background">
+    <header className={`@container/git-header flex items-center gap-2 border-b border-border/40 px-3 py-2 ${isSidebarMode ? 'bg-transparent' : 'bg-background'}`}>
       <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
         {isWorktreeMode ? (
           <WorktreeBranchDisplay
diff --git a/packages/ui/src/components/views/git/PullRequestSection.tsx b/packages/ui/src/components/views/git/PullRequestSection.tsx
index 43d0609b..d1078014 100644
--- a/packages/ui/src/components/views/git/PullRequestSection.tsx
+++ b/packages/ui/src/components/views/git/PullRequestSection.tsx
@@ -698,7 +698,7 @@ export const PullRequestSection: React.FC<{
           </div>
         ) : null}
         {run.output?.text ? (
-          <div className="rounded border border-border/40 bg-background/40 px-2 py-2 typography-micro text-muted-foreground whitespace-pre-wrap max-h-48 overflow-y-auto">
+          <div className="rounded border border-border/40 bg-transparent px-2 py-2 typography-micro text-muted-foreground whitespace-pre-wrap max-h-48 overflow-y-auto">
             {run.output.text}
           </div>
         ) : null}
@@ -776,7 +776,7 @@ export const PullRequestSection: React.FC<{
                       {step.conclusion ? <span className="ml-auto flex-shrink-0">{step.conclusion}</span> : null}
                     </button>
                     <CollapsibleContent>
-                      <div className="ml-6 mt-1 rounded border border-border/40 bg-background/40 px-2 py-2 typography-micro text-muted-foreground space-y-1">
+                      <div className="ml-6 mt-1 rounded border border-border/40 bg-transparent px-2 py-2 typography-micro text-muted-foreground space-y-1">
                         {typeof step.number === 'number' ? <div>Step: {step.number}</div> : null}
                         {step.status ? <div>Status: {step.status}</div> : null}
                         {step.conclusion ? <div>Conclusion: {step.conclusion}</div> : null}
@@ -1304,7 +1304,7 @@ export const PullRequestSection: React.FC<{
 
   const containerClassName =
     variant === 'framed'
-      ? 'rounded-xl border border-border/60 bg-background/70 overflow-hidden'
+      ? 'rounded-xl border border-border/60 bg-transparent overflow-hidden'
       : 'border-0 bg-transparent rounded-none';
   const headerClassName =
     variant === 'framed'
diff --git a/packages/ui/src/hooks/useGitPollingHook.ts b/packages/ui/src/hooks/useGitPollingHook.ts
index 6e18b176..954c3819 100644
--- a/packages/ui/src/hooks/useGitPollingHook.ts
+++ b/packages/ui/src/hooks/useGitPollingHook.ts
@@ -33,7 +33,7 @@ export function useGitPolling() {
 
         setActiveDirectory(effectiveDirectory);
 
-        fetchAll(effectiveDirectory, git);
+        void fetchAll(effectiveDirectory, git, { silentIfCached: true });
 
         startPolling(git);
 
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
index fe747ff5..93b5eb2d 100644
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -1040,6 +1040,63 @@ textarea[data-terminal-hidden-input="true"]::placeholder {
   animation: attention-diamond-pulse 2.3s ease-in-out infinite;
 }
 
+@keyframes navrail-dot-wave {
+  0%, 100% {
+    transform: scale(0.72);
+    opacity: 0.52;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animate-navrail-dot-wave {
+  animation: navrail-dot-wave 1.2s ease-in-out infinite;
+}
+
+@keyframes border-glow-pulse {
+  0%, 100% {
+    border-color: var(--interactive-border);
+    outline-color: transparent;
+  }
+  12.5% {
+    border-color: color-mix(in srgb, var(--primary) 22%, var(--interactive-border));
+    outline-color: color-mix(in srgb, var(--primary) 8%, transparent);
+  }
+  25% {
+    border-color: color-mix(in srgb, var(--primary) 40%, var(--interactive-border));
+    outline-color: color-mix(in srgb, var(--primary) 16%, transparent);
+  }
+  37.5% {
+    border-color: color-mix(in srgb, var(--primary) 62%, var(--interactive-border));
+    outline-color: color-mix(in srgb, var(--primary) 26%, transparent);
+  }
+  50% {
+    border-color: color-mix(in srgb, var(--primary) 78%, var(--interactive-border));
+    outline-color: color-mix(in srgb, var(--primary) 34%, transparent);
+  }
+  62.5% {
+    border-color: color-mix(in srgb, var(--primary) 62%, var(--interactive-border));
+    outline-color: color-mix(in srgb, var(--primary) 26%, transparent);
+  }
+  75% {
+    border-color: color-mix(in srgb, var(--primary) 40%, var(--interactive-border));
+    outline-color: color-mix(in srgb, var(--primary) 16%, transparent);
+  }
+  87.5% {
+    border-color: color-mix(in srgb, var(--primary) 22%, var(--interactive-border));
+    outline-color: color-mix(in srgb, var(--primary) 8%, transparent);
+  }
+}
+
+.animate-border-glow-pulse {
+  outline: 1px solid transparent;
+  outline-offset: 1px;
+  will-change: border-color, outline-color;
+  animation: border-glow-pulse 3.8s linear infinite;
+}
+
 @keyframes marquee-scroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-100%); }
diff --git a/packages/ui/src/lib/gitApi.ts b/packages/ui/src/lib/gitApi.ts
index 6e33e74f..22bcade7 100644
--- a/packages/ui/src/lib/gitApi.ts
+++ b/packages/ui/src/lib/gitApi.ts
@@ -128,7 +128,6 @@ export async function generateCommitMessage(
     providerId: generationSession.providerID,
     modelId: generationSession.modelID,
     agent: generationSession.agent,
-    variant: generationSession.variant,
   });
 
   const prompt = `You are generating a Conventional Commits subject line using session context and selected file paths.
@@ -251,7 +250,6 @@ export async function generatePullRequestDescription(
     providerId: generationSession.providerID,
     modelId: generationSession.modelID,
     agent: generationSession.agent,
-    variant: generationSession.variant,
     base: payload.base,
     head: payload.head,
     commits: commits.length,
@@ -324,7 +322,6 @@ type SessionGenerationContext = {
   providerID: string;
   modelID: string;
   agent?: string;
-  variant?: string;
 };
 
 const resolveSessionGenerationContext = (): SessionGenerationContext | null => {
@@ -347,16 +344,11 @@ const resolveSessionGenerationContext = (): SessionGenerationContext | null => {
     return null;
   }
 
-  const variant = agent
-    ? context.getAgentModelVariantForSession(sessionId, agent, selectedModel.providerId, selectedModel.modelId)
-    : (config.currentVariant || undefined);
-
   return {
     sessionId,
     providerID: selectedModel.providerId,
     modelID: selectedModel.modelId,
     agent,
-    variant,
   };
 };
 
@@ -381,7 +373,6 @@ const runStructuredGenerationInActiveSession = async ({
     providerID: generationSession.providerID,
     modelID: generationSession.modelID,
     agent: generationSession.agent,
-    variant: generationSession.variant,
   });
   const trimmedDirectory = typeof directory === 'string' ? directory.trim() : '';
   const firstNewlineIndex = prompt.indexOf('\n');
@@ -407,7 +398,6 @@ const runStructuredGenerationInActiveSession = async ({
         modelID: generationSession.modelID,
       },
       ...(generationSession.agent ? { agent: generationSession.agent } : {}),
-      ...(generationSession.variant ? { variant: generationSession.variant } : {}),
       format: {
         type: 'json_schema',
         schema,
diff --git a/packages/ui/src/lib/theme/themes/flexoki-dark.json b/packages/ui/src/lib/theme/themes/flexoki-dark.json
index 367808cd..f8250ab2 100644
--- a/packages/ui/src/lib/theme/themes/flexoki-dark.json
+++ b/packages/ui/src/lib/theme/themes/flexoki-dark.json
@@ -12,12 +12,12 @@
       "base": "#DA702C",
       "hover": "#DA702C",
       "active": "#F9AE77",
-      "foreground": "#111010",
+      "foreground": "#151313",
       "muted": "#DA702C80",
       "emphasis": "#F9AE77"
     },
     "surface": {
-      "background": "#111010",
+      "background": "#151313",
       "foreground": "#CECDC3",
       "muted": "#1C1B1A",
       "mutedForeground": "#878580",
@@ -40,19 +40,19 @@
     },
     "status": {
       "error": "#D14D41",
-      "errorForeground": "#111010",
+      "errorForeground": "#151313",
       "errorBackground": "#AF302920",
       "errorBorder": "#AF302950",
       "warning": "#DA702C",
-      "warningForeground": "#111010",
+      "warningForeground": "#151313",
       "warningBackground": "#BC521520",
       "warningBorder": "#BC521550",
       "success": "#A0AF54",
-      "successForeground": "#111010",
+      "successForeground": "#151313",
       "successBackground": "#66800B20",
       "successBorder": "#66800B50",
       "info": "#4385BE",
-      "infoForeground": "#111010",
+      "infoForeground": "#151313",
       "infoBackground": "#205EA620",
       "infoBorder": "#205EA650"
     },
@@ -138,9 +138,9 @@
     },
     "chat": {
       "userMessage": "#CECDC3",
-      "userMessageBackground": "#2E1B10",
+      "userMessageBackground": "#27180E",
       "assistantMessage": "#CECDC3",
-      "assistantMessageBackground": "#111010",
+      "assistantMessageBackground": "#151313",
       "timestamp": "#878580",
       "divider": "#343331"
     },
diff --git a/packages/ui/src/stores/messageStore.ts b/packages/ui/src/stores/messageStore.ts
index 9cb838e8..819b0de8 100644
--- a/packages/ui/src/stores/messageStore.ts
+++ b/packages/ui/src/stores/messageStore.ts
@@ -499,18 +499,19 @@ export const useMessageStore = create<MessageStore>()(
                                 : Math.max(baseLimit, userExpandedLimit ?? 0);
 
                         // Don't pass Infinity to API - use undefined for "fetch all".
-                        // For finite loads, overfetch by 1 so hasMoreAbove is accurate.
-                        const fetchLimit = noLimit ? undefined : targetLimit + 1;
+                        // Use targetLimit directly and infer "has more" when payload fills the window,
+                        // matching OpenCode behavior and avoiding hidden "load older" on exact-limit responses.
+                        const fetchLimit = noLimit ? undefined : targetLimit;
                         const allMessages = await executeWithSessionDirectory(sessionId, () => opencodeClient.getSessionMessages(sessionId, fetchLimit));
 
                         // Filter out reverted messages first
                         const revertMessageId = getSessionRevertMessageId(sessionId);
                         const messagesWithoutReverted = filterRevertedMessages(allMessages, revertMessageId);
 
-                        // Accurate older-history detection for finite loads.
-                        // If server returns > targetLimit, there are older messages above current window.
+                        // If server fills the requested window, assume there may be more above.
+                        // This is intentionally optimistic and corrected on subsequent load-more calls.
                         const hasMoreAbove = typeof fetchLimit === 'number'
-                            ? messagesWithoutReverted.length > targetLimit
+                            ? messagesWithoutReverted.length >= targetLimit
                             : false;
 
                         const watermark = get().sessionMemoryState.get(sessionId)?.trimmedHeadMaxId;
@@ -2626,7 +2627,7 @@ export const useMessageStore = create<MessageStore>()(
                     });
 
                     try {
-                        const fetchLimit = desiredLimit + 1;
+                        const fetchLimit = desiredLimit;
                         const allMessages = await executeWithSessionDirectory(
                             sessionId,
                             () => opencodeClient.getSessionMessages(sessionId, fetchLimit)
@@ -2634,7 +2635,7 @@ export const useMessageStore = create<MessageStore>()(
 
                         if (direction === "up" && currentMessages.length > 0) {
                             const dedupedMessages = dedupeMessagesById(allMessages);
-                            const hasPotentialMore = allMessages.length >= fetchLimit;
+                            const hasPotentialMore = allMessages.length >= desiredLimit;
                             const firstCurrentMessage = currentMessages[0];
                             const indexInAll = dedupedMessages.findIndex((message) => message.info.id === firstCurrentMessage.info.id);
 
diff --git a/packages/ui/src/stores/sessionStore.ts b/packages/ui/src/stores/sessionStore.ts
index 4809e2d0..f7652f5d 100644
--- a/packages/ui/src/stores/sessionStore.ts
+++ b/packages/ui/src/stores/sessionStore.ts
@@ -77,6 +77,81 @@ const readSessionSelectionMap = (): SessionSelectionMap => {
 };
 
 let sessionSelectionCache: SessionSelectionMap | null = null;
+let loadSessionsRequestSeq = 0;
+
+type ProjectSessionResult = {
+    projectId: string;
+    projectPath: string | null;
+    sessions: Session[];
+    discoveredWorktrees: WorktreeMetadata[];
+    validPaths: Set<string>;
+};
+
+type ProjectSessionCacheEntry = {
+    cachedAt: number;
+    result: ProjectSessionResult;
+};
+
+type ProjectRepoCacheEntry = {
+    cachedAt: number;
+    isGitRepo: boolean;
+};
+
+const PROJECT_SESSION_CACHE_TTL_MS = 30_000;
+const PROJECT_REPO_STATUS_CACHE_TTL_MS = 120_000;
+const projectSessionCache = new Map<string, ProjectSessionCacheEntry>();
+const projectRepoStatusCache = new Map<string, ProjectRepoCacheEntry>();
+
+const getFreshProjectSessionCache = (projectPath: string): ProjectSessionResult | null => {
+    const key = normalizePath(projectPath) ?? projectPath;
+    const cached = projectSessionCache.get(key);
+    if (!cached) {
+        return null;
+    }
+    if (Date.now() - cached.cachedAt > PROJECT_SESSION_CACHE_TTL_MS) {
+        projectSessionCache.delete(key);
+        return null;
+    }
+    return cached.result;
+};
+
+const setProjectSessionCache = (projectPath: string, result: ProjectSessionResult) => {
+    const key = normalizePath(projectPath) ?? projectPath;
+    projectSessionCache.set(key, { cachedAt: Date.now(), result });
+};
+
+const pruneProjectCaches = (validProjectPaths: Iterable<string>) => {
+    const valid = new Set<string>();
+    for (const path of validProjectPaths) {
+        const normalized = normalizePath(path) ?? path;
+        if (normalized) {
+            valid.add(normalized);
+        }
+    }
+
+    for (const key of projectSessionCache.keys()) {
+        if (!valid.has(key)) {
+            projectSessionCache.delete(key);
+        }
+    }
+    for (const key of projectRepoStatusCache.keys()) {
+        if (!valid.has(key)) {
+            projectRepoStatusCache.delete(key);
+        }
+    }
+};
+
+const getProjectRepoStatus = async (projectPath: string): Promise<boolean> => {
+    const key = normalizePath(projectPath) ?? projectPath;
+    const cached = projectRepoStatusCache.get(key);
+    if (cached && Date.now() - cached.cachedAt <= PROJECT_REPO_STATUS_CACHE_TTL_MS) {
+        return cached.isGitRepo;
+    }
+
+    const isGitRepo = await checkIsGitRepository(key).catch(() => false);
+    projectRepoStatusCache.set(key, { cachedAt: Date.now(), isGitRepo });
+    return isGitRepo;
+};
 
 const getSessionSelectionMap = (): SessionSelectionMap => {
     if (!sessionSelectionCache) {
@@ -262,7 +337,8 @@ const getSessionDirectory = (sessions: Session[], sessionId: string): string | n
 const hydrateSessionWorktreeMetadata = async (
     sessions: Session[],
     projectDirectory: string | null,
-    existingMetadata: Map<string, WorktreeMetadata>
+    existingMetadata: Map<string, WorktreeMetadata>,
+    preloadedWorktrees?: WorktreeMetadata[]
 ): Promise<Map<string, WorktreeMetadata> | null> => {
     const normalizedProject = normalizePath(projectDirectory);
     if (!normalizedProject || sessions.length === 0) {
@@ -278,11 +354,15 @@ const hydrateSessionWorktreeMetadata = async (
     }
 
     let worktreeEntries: WorktreeMetadata[];
-    try {
-        worktreeEntries = await listProjectWorktrees({ id: `path:${normalizedProject}`, path: normalizedProject });
-    } catch (error) {
-        console.debug("Failed to hydrate worktree metadata from worktree list:", error);
-        return null;
+    if (Array.isArray(preloadedWorktrees)) {
+        worktreeEntries = preloadedWorktrees;
+    } else {
+        try {
+            worktreeEntries = await listProjectWorktrees({ id: `path:${normalizedProject}`, path: normalizedProject });
+        } catch (error) {
+            console.debug("Failed to hydrate worktree metadata from worktree list:", error);
+            return null;
+        }
     }
 
     if (!Array.isArray(worktreeEntries) || worktreeEntries.length === 0) {
@@ -377,6 +457,8 @@ export const useSessionStore = create<SessionStore>()(
                 availableWorktreesByProject: new Map(),
 
                 loadSessions: async () => {
+                    const requestSeq = ++loadSessionsRequestSeq;
+                    const isLatestRequest = () => requestSeq === loadSessionsRequestSeq;
                     set({ isLoading: true, error: null });
                     try {
                         const directoryStore = useDirectoryStore.getState();
@@ -548,15 +630,148 @@ export const useSessionStore = create<SessionStore>()(
                             ? projectsStore.projects
                             : (legacyRoot ? [{ id: 'legacy', path: legacyRoot }] : []);
 
-                        type ProjectSessionResult = {
-                            projectId: string;
-                            projectPath: string | null;
-                            sessions: Session[];
-                            discoveredWorktrees: WorktreeMetadata[];
-                            validPaths: Set<string>;
+                        const applyProjectResults = async (projectResults: ProjectSessionResult[]) => {
+                            const sessionsByDirectory = new Map<string, Session[]>();
+                            projectResults.forEach((result) => {
+                                if (!result.projectPath) {
+                                    return;
+                                }
+
+                                result.validPaths.forEach((directory) => {
+                                    const directoryKey = normalizePath(directory) ?? directory;
+                                    const directorySessions = result.sessions.filter((session) => {
+                                        const dir = normalizePath((session as { directory?: string | null }).directory ?? null) ?? directoryKey;
+                                        return dir === directoryKey;
+                                    });
+                                    sessionsByDirectory.set(directoryKey, dedupeSessionsById(directorySessions));
+                                });
+                            });
+
+                            const mergedSessions: Session[] = dedupeSessionsById(Array.from(sessionsByDirectory.values()).flat());
+                            const stateSnapshot = get();
+
+                            let nextWorktreeMetadata = stateSnapshot.worktreeMetadata;
+                            for (const result of projectResults) {
+                                if (!result.projectPath) {
+                                    continue;
+                                }
+                                try {
+                                    const hydratedMetadata = await hydrateSessionWorktreeMetadata(
+                                        result.sessions,
+                                        result.projectPath,
+                                        nextWorktreeMetadata,
+                                        result.discoveredWorktrees
+                                    );
+                                    if (hydratedMetadata) {
+                                        nextWorktreeMetadata = hydratedMetadata;
+                                    }
+                                } catch (metadataError) {
+                                    console.debug("Failed to refresh worktree metadata during session load:", metadataError);
+                                }
+                            }
+
+                            const worktreesByProject = new Map<string, WorktreeMetadata[]>();
+                            projectResults.forEach((result) => {
+                                if (result.projectPath) {
+                                    worktreesByProject.set(result.projectPath, result.discoveredWorktrees);
+                                }
+                            });
+
+                            const allValidPaths = new Set<string>();
+                            projectResults.forEach((result) => {
+                                result.validPaths.forEach((value) => {
+                                    const key = normalizePath(value) ?? value;
+                                    if (key) {
+                                        allValidPaths.add(key);
+                                    }
+                                });
+                            });
+
+                            const activeDirectoryCandidate = normalizedFallback ?? activeProjectRoot ?? null;
+                            const activeDirectory = activeDirectoryCandidate && allValidPaths.has(activeDirectoryCandidate)
+                                ? activeDirectoryCandidate
+                                : (activeProjectRoot ?? activeDirectoryCandidate);
+
+                            const activeDirectorySessions = activeDirectory
+                                ? sessionsByDirectory.get(activeDirectory) ?? []
+                                : mergedSessions;
+
+                            const validSessionIds = new Set(mergedSessions.map((session) => session.id));
+
+                            // Keep directory-scoped stored selections tidy.
+                            for (const [directoryKey, directorySessions] of sessionsByDirectory.entries()) {
+                                clearInvalidSessionSelection(directoryKey, directorySessions.map((session) => session.id));
+                            }
+
+                            const directoryChanged = (activeDirectory ?? null) !== (stateSnapshot.lastLoadedDirectory ?? null);
+
+                            let nextCurrentId = stateSnapshot.currentSessionId;
+                            const currentSessionInActiveDirectory = Boolean(
+                                nextCurrentId && activeDirectorySessions.some((session) => session.id === nextCurrentId)
+                            );
+                            if (!nextCurrentId || !validSessionIds.has(nextCurrentId) || (directoryChanged && !currentSessionInActiveDirectory)) {
+                                nextCurrentId = activeDirectorySessions[0]?.id ?? mergedSessions[0]?.id ?? null;
+                            }
+
+                            if (activeDirectory) {
+                                const storedSelection = getStoredSessionForDirectory(activeDirectory);
+                                if (storedSelection && validSessionIds.has(storedSelection)) {
+                                    nextCurrentId = storedSelection;
+                                }
+                            }
+
+                            const resolvedDirectoryForCurrent = (() => {
+                                if (!nextCurrentId) {
+                                    return activeDirectory ?? null;
+                                }
+                                const metadataPath = nextWorktreeMetadata.get(nextCurrentId)?.path;
+                                if (metadataPath) {
+                                    return normalizePath(metadataPath) ?? metadataPath;
+                                }
+                                const sessionDir = getSessionDirectory(mergedSessions, nextCurrentId);
+                                if (sessionDir) {
+                                    return sessionDir;
+                                }
+                                return activeDirectory ?? null;
+                            })();
+
+                            if (!isLatestRequest()) {
+                                return;
+                            }
+
+                            try {
+                                opencodeClient.setDirectory(resolvedDirectoryForCurrent ?? undefined);
+                            } catch (error) {
+                                console.warn("Failed to sync OpenCode directory after session load:", error);
+                            }
+
+                            const activeWorktrees = activeProjectRoot
+                                ? projectResults.find((result) => result.projectPath === activeProjectRoot)?.discoveredWorktrees ?? []
+                                : [];
+
+                            set({
+                                sessions: mergedSessions,
+                                sessionsByDirectory,
+                                currentSessionId: nextCurrentId,
+                                lastLoadedDirectory: activeDirectory ?? null,
+                                isLoading: false,
+                                worktreeMetadata: nextWorktreeMetadata,
+                                availableWorktrees: activeWorktrees,
+                                availableWorktreesByProject: worktreesByProject,
+                            });
+
+                            if (activeDirectory) {
+                                storeSessionForDirectory(activeDirectory, nextCurrentId);
+                            }
+                            if (resolvedDirectoryForCurrent && resolvedDirectoryForCurrent !== activeDirectory) {
+                                storeSessionForDirectory(resolvedDirectoryForCurrent, nextCurrentId);
+                            }
                         };
 
                         if (projectEntries.length === 0) {
+                            if (!isLatestRequest()) {
+                                return;
+                            }
                             set({
                                 sessions: [],
                                 sessionsByDirectory: new Map(),
@@ -570,6 +785,29 @@ export const useSessionStore = create<SessionStore>()(
                             return;
                         }
 
+                        pruneProjectCaches(projectEntries.map((entry) => entry.path));
+
+                        const activeProjectId = projectsStore.activeProjectId;
+                        const cachedProjectResults: ProjectSessionResult[] = [];
+                        projectEntries.forEach((project) => {
+                            const normalizedProject = normalizePath(project.path);
+                            if (!normalizedProject) {
+                                return;
+                            }
+                            const cached = getFreshProjectSessionCache(normalizedProject);
+                            if (cached) {
+                                cachedProjectResults.push(cached);
+                            }
+                        });
+
+                        const hasCachedActiveProject = cachedProjectResults.some(
+                            (result) => result.projectId === activeProjectId
+                        );
+
+                        if (hasCachedActiveProject && isLatestRequest()) {
+                            await applyProjectResults(cachedProjectResults);
+                        }
+
                         const projectResults: ProjectSessionResult[] = await Promise.all(
                             projectEntries.map(async (project: Pick<ProjectEntry, 'id' | 'path'>) => {
                                 const normalizedProject = normalizePath(project.path);
@@ -583,7 +821,13 @@ export const useSessionStore = create<SessionStore>()(
                                     };
                                 }
 
-                                const isGitRepo = await checkIsGitRepository(normalizedProject).catch(() => false);
+                                const cached = getFreshProjectSessionCache(normalizedProject);
+                                const isActiveProject = project.id === activeProjectId;
+                                if (cached && !isActiveProject) {
+                                    return cached;
+                                }
+
+                                const isGitRepo = await getProjectRepoStatus(normalizedProject);
                                 const parentSessions = await fetchSessionsForDirectory(normalizedProject || null);
                                 vscodeDebugLog("projectSessions", {
                                     projectId: project.id,
@@ -634,144 +878,23 @@ export const useSessionStore = create<SessionStore>()(
 
                                 const mergedSessions = dedupeSessionsById([...parentSessions, ...subdirectorySessions]);
 
-                                return {
+                                const result: ProjectSessionResult = {
                                     projectId: project.id,
                                     projectPath: normalizedProject,
                                     sessions: mergedSessions,
                                     discoveredWorktrees,
                                     validPaths,
                                 };
+
+                                setProjectSessionCache(normalizedProject, result);
+                                return result;
                             })
                         );
-
-                        const sessionsByDirectory = new Map<string, Session[]>();
-                        projectResults.forEach((result) => {
-                            if (!result.projectPath) {
-                                return;
-                            }
-
-                            result.validPaths.forEach((directory) => {
-                                const directoryKey = normalizePath(directory) ?? directory;
-                                const directorySessions = result.sessions.filter((session) => {
-                                    const dir = normalizePath((session as { directory?: string | null }).directory ?? null) ?? directoryKey;
-                                    return dir === directoryKey;
-                                });
-                                sessionsByDirectory.set(directoryKey, dedupeSessionsById(directorySessions));
-                            });
-                        });
-
-                        const mergedSessions: Session[] = dedupeSessionsById(Array.from(sessionsByDirectory.values()).flat());
-                        const stateSnapshot = get();
-
-                        let nextWorktreeMetadata = stateSnapshot.worktreeMetadata;
-                        for (const result of projectResults) {
-                            if (!result.projectPath) {
-                                continue;
-                            }
-                            try {
-                                const hydratedMetadata = await hydrateSessionWorktreeMetadata(
-                                    result.sessions,
-                                    result.projectPath,
-                                    nextWorktreeMetadata
-                                );
-                                if (hydratedMetadata) {
-                                    nextWorktreeMetadata = hydratedMetadata;
-                                }
-                            } catch (metadataError) {
-                                console.debug("Failed to refresh worktree metadata during session load:", metadataError);
-                            }
-                        }
-
-                        const worktreesByProject = new Map<string, WorktreeMetadata[]>();
-                        projectResults.forEach((result) => {
-                            if (result.projectPath) {
-                                worktreesByProject.set(result.projectPath, result.discoveredWorktrees);
-                            }
-                        });
-
-                        const allValidPaths = new Set<string>();
-                        projectResults.forEach((result) => {
-                            result.validPaths.forEach((value) => {
-                                const key = normalizePath(value) ?? value;
-                                if (key) {
-                                    allValidPaths.add(key);
-                                }
-                            });
-                        });
-
-                        const activeDirectoryCandidate = normalizedFallback ?? activeProjectRoot ?? null;
-                        const activeDirectory = activeDirectoryCandidate && allValidPaths.has(activeDirectoryCandidate)
-                            ? activeDirectoryCandidate
-                            : (activeProjectRoot ?? activeDirectoryCandidate);
-
-                        const activeDirectorySessions = activeDirectory
-                            ? sessionsByDirectory.get(activeDirectory) ?? []
-                            : mergedSessions;
-
-                        const validSessionIds = new Set(mergedSessions.map((session) => session.id));
-
-                        // Keep directory-scoped stored selections tidy.
-                        for (const [directoryKey, directorySessions] of sessionsByDirectory.entries()) {
-                            clearInvalidSessionSelection(directoryKey, directorySessions.map((session) => session.id));
-                        }
-
-                        const directoryChanged = (activeDirectory ?? null) !== (stateSnapshot.lastLoadedDirectory ?? null);
-
-                        let nextCurrentId = stateSnapshot.currentSessionId;
-                        if (!nextCurrentId || !validSessionIds.has(nextCurrentId) || directoryChanged) {
-                            nextCurrentId = activeDirectorySessions[0]?.id ?? mergedSessions[0]?.id ?? null;
-                        }
-
-                        if (activeDirectory) {
-                            const storedSelection = getStoredSessionForDirectory(activeDirectory);
-                            if (storedSelection && validSessionIds.has(storedSelection)) {
-                                nextCurrentId = storedSelection;
-                            }
-                        }
-
-                        const resolvedDirectoryForCurrent = (() => {
-                            if (!nextCurrentId) {
-                                return activeDirectory ?? null;
-                            }
-                            const metadataPath = nextWorktreeMetadata.get(nextCurrentId)?.path;
-                            if (metadataPath) {
-                                return normalizePath(metadataPath) ?? metadataPath;
-                            }
-                            const sessionDir = getSessionDirectory(mergedSessions, nextCurrentId);
-                            if (sessionDir) {
-                                return sessionDir;
-                            }
-                            return activeDirectory ?? null;
-                        })();
-
-                        try {
-                            opencodeClient.setDirectory(resolvedDirectoryForCurrent ?? undefined);
-                        } catch (error) {
-                            console.warn("Failed to sync OpenCode directory after session load:", error);
-                        }
-
-                        const activeWorktrees = activeProjectRoot
-                            ? projectResults.find((result) => result.projectPath === activeProjectRoot)?.discoveredWorktrees ?? []
-                            : [];
-
-                        set({
-                            sessions: mergedSessions,
-                            sessionsByDirectory,
-                            currentSessionId: nextCurrentId,
-                            lastLoadedDirectory: activeDirectory ?? null,
-                            isLoading: false,
-                            worktreeMetadata: nextWorktreeMetadata,
-                            availableWorktrees: activeWorktrees,
-                            availableWorktreesByProject: worktreesByProject,
-                        });
-
-                        if (activeDirectory) {
-                            storeSessionForDirectory(activeDirectory, nextCurrentId);
-                        }
-                        if (resolvedDirectoryForCurrent && resolvedDirectoryForCurrent !== activeDirectory) {
-                            storeSessionForDirectory(resolvedDirectoryForCurrent, nextCurrentId);
-                        }
+                        await applyProjectResults(projectResults);
                     } catch (error) {
+                        if (!isLatestRequest()) {
+                            return;
+                        }
                         set({
                             error: error instanceof Error ? error.message : "Failed to load sessions",
                             isLoading: false,
diff --git a/packages/ui/src/stores/useGitStore.ts b/packages/ui/src/stores/useGitStore.ts
index 6b603ff6..d50865b4 100644
--- a/packages/ui/src/stores/useGitStore.ts
+++ b/packages/ui/src/stores/useGitStore.ts
@@ -12,8 +12,10 @@ const GIT_POLL_MAX_INTERVAL = 10000;
 const GIT_POLL_BACKOFF_STEP = 5000;
 const LOG_STALE_THRESHOLD = 10000;
 const DIFF_PREFETCH_MAX_FILES = 25;
+const DIFF_PREFETCH_FOCUS_MAX_FILES = 40;
 const DIFF_PREFETCH_CONCURRENCY = 4;
 const DIFF_PREFETCH_TIMEOUT_MS = 15000;
+const RECENT_DIRECTORIES_LIMIT = 3;
 
 // Diff cache limits to prevent memory bloat with many modified files
 const DIFF_CACHE_MAX_ENTRIES = 30;
@@ -37,6 +39,7 @@ interface GitStore {
   directories: Map<string, DirectoryGitState>;
 
   activeDirectory: string | null;
+  recentDirectories: string[];
 
   isLoadingStatus: boolean;
   isLoadingLog: boolean;
@@ -53,12 +56,13 @@ interface GitStore {
   fetchBranches: (directory: string, git: GitAPI) => Promise<void>;
   fetchLog: (directory: string, git: GitAPI, maxCount?: number) => Promise<void>;
   fetchIdentity: (directory: string, git: GitAPI) => Promise<void>;
-  fetchAll: (directory: string, git: GitAPI, options?: { force?: boolean }) => Promise<void>;
+  fetchAll: (directory: string, git: GitAPI, options?: { force?: boolean; silentIfCached?: boolean }) => Promise<void>;
 
   getDiff: (directory: string, filePath: string) => { original: string; modified: string; fetchedAt: number; isBinary?: boolean } | null;
   setDiff: (directory: string, filePath: string, diff: { original: string; modified: string; isBinary?: boolean }) => void;
   clearDiffCache: (directory: string) => void;
   fetchAllDiffs: (directory: string, git: GitAPI) => Promise<void>;
+  prefetchDiffs: (directory: string, git: GitAPI, filePaths: string[], options?: { maxFiles?: number }) => Promise<void>;
 
   setLogMaxCount: (directory: string, maxCount: number) => void;
 
@@ -84,6 +88,28 @@ interface GitAPI {
   getGitFileDiff: (directory: string, options: { path: string }) => Promise<GitFileDiffResponse>;
 }
 
+const inFlightDiffFetchesByDirectory = new Map<string, Set<string>>();
+const diffFetchGenerationByDirectory = new Map<string, number>();
+
+const getDiffFetchGeneration = (directory: string): number =>
+  diffFetchGenerationByDirectory.get(directory) ?? 0;
+
+const bumpDiffFetchGeneration = (directory: string): number => {
+  const next = getDiffFetchGeneration(directory) + 1;
+  diffFetchGenerationByDirectory.set(directory, next);
+  return next;
+};
+
+const getInFlightDiffs = (directory: string): Set<string> => {
+  const existing = inFlightDiffFetchesByDirectory.get(directory);
+  if (existing) {
+    return existing;
+  }
+  const created = new Set<string>();
+  inFlightDiffFetchesByDirectory.set(directory, created);
+  return created;
+};
+
 const createEmptyDirectoryState = (): DirectoryGitState => ({
   isGitRepo: null,
   status: null,
@@ -241,6 +267,7 @@ export const useGitStore = create<GitStore>()(
     (set, get) => ({
       directories: new Map(),
       activeDirectory: null,
+      recentDirectories: [],
       isLoadingStatus: false,
       isLoadingLog: false,
       isLoadingBranches: false,
@@ -249,15 +276,26 @@ export const useGitStore = create<GitStore>()(
       currentPollInterval: GIT_POLL_BASE_INTERVAL,
 
       setActiveDirectory: (directory) => {
-        const { activeDirectory, directories } = get();
+        const { activeDirectory, directories, recentDirectories } = get();
         if (activeDirectory === directory) return;
 
+        if (activeDirectory) {
+          bumpDiffFetchGeneration(activeDirectory);
+        }
+        if (directory) {
+          bumpDiffFetchGeneration(directory);
+        }
+
+        const nextRecentDirectories = directory
+          ? [directory, ...recentDirectories.filter((entry) => entry !== directory)].slice(0, RECENT_DIRECTORIES_LIMIT)
+          : recentDirectories;
+
         if (directory && !directories.has(directory)) {
           const newDirectories = new Map(directories);
           newDirectories.set(directory, createEmptyDirectoryState());
-          set({ activeDirectory: directory, directories: newDirectories });
+          set({ activeDirectory: directory, recentDirectories: nextRecentDirectories, directories: newDirectories });
         } else {
-          set({ activeDirectory: directory });
+          set({ activeDirectory: directory, recentDirectories: nextRecentDirectories });
         }
       },
 
@@ -322,6 +360,9 @@ export const useGitStore = create<GitStore>()(
             }
 
             const hasFileContentChange = changedPaths.size > 0;
+            if (hasFileContentChange) {
+              bumpDiffFetchGeneration(directory);
+            }
 
             newDirectories.set(directory, {
               ...currentDirState,
@@ -423,10 +464,12 @@ export const useGitStore = create<GitStore>()(
           set({ directories: newDirectories });
         }
 
-        const { force = false } = options;
+        const { force = false, silentIfCached = false } = options;
         const now = Date.now();
 
-        await get().fetchStatus(directory, git);
+        await get().fetchStatus(directory, git, {
+          silent: silentIfCached && Boolean(dirState?.status),
+        });
 
         const updatedDirState = get().directories.get(directory);
         if (!updatedDirState?.isGitRepo) return;
@@ -462,6 +505,7 @@ export const useGitStore = create<GitStore>()(
       },
 
       clearDiffCache: (directory) => {
+        bumpDiffFetchGeneration(directory);
         const newDirectories = new Map(get().directories);
         const dirState = newDirectories.get(directory);
         if (dirState) {
@@ -474,13 +518,49 @@ export const useGitStore = create<GitStore>()(
         const dirState = get().directories.get(directory);
         if (!dirState?.status?.files || dirState.status.files.length === 0) return;
 
-        const files = dirState.status.files;
+        const limitedFilesToFetch = dirState.status.files
+          .map((file) => file.path)
+          .slice(0, DIFF_PREFETCH_MAX_FILES);
+        await get().prefetchDiffs(directory, git, limitedFilesToFetch, { maxFiles: DIFF_PREFETCH_MAX_FILES });
+      },
 
-        // Find files that need fetching (no cache)
-        const filesToFetch = files.filter((file) => !dirState.diffCache.has(file.path));
+      prefetchDiffs: async (directory, git, filePaths, options = {}) => {
+        const dirState = get().directories.get(directory);
+        if (!dirState?.status?.files || dirState.status.files.length === 0 || filePaths.length === 0) return;
 
-        const limitedFilesToFetch = filesToFetch.slice(0, DIFF_PREFETCH_MAX_FILES);
-        if (limitedFilesToFetch.length === 0) return;
+        const { maxFiles = DIFF_PREFETCH_FOCUS_MAX_FILES } = options;
+        const availablePaths = new Set(dirState.status.files.map((file) => file.path));
+        const inFlight = getInFlightDiffs(directory);
+
+        const dedupedPaths: string[] = [];
+        const seen = new Set<string>();
+        for (const filePath of filePaths) {
+          if (!filePath || seen.has(filePath)) {
+            continue;
+          }
+          seen.add(filePath);
+          if (!availablePaths.has(filePath)) {
+            continue;
+          }
+          if (dirState.diffCache.has(filePath)) {
+            continue;
+          }
+          if (inFlight.has(filePath)) {
+            continue;
+          }
+          dedupedPaths.push(filePath);
+        }
+
+        const limitedFilePaths = dedupedPaths.slice(0, Math.max(1, maxFiles));
+        if (limitedFilePaths.length === 0) return;
+
+        const generation = getDiffFetchGeneration(directory);
+
+        if (typeof document !== 'undefined' && document.hidden) {
+          return;
+        }
+
+        limitedFilePaths.forEach((path) => inFlight.add(path));
 
         let nextIndex = 0;
         const results: Array<{ path: string; diff: { original: string; modified: string; isBinary?: boolean } }> = [];
@@ -488,7 +568,7 @@ export const useGitStore = create<GitStore>()(
         const takeNext = () => {
           const current = nextIndex;
           nextIndex += 1;
-          return current < limitedFilesToFetch.length ? limitedFilesToFetch[current] : null;
+          return current < limitedFilePaths.length ? limitedFilePaths[current] : null;
         };
 
         const fetchWithTimeout = async (filePath: string) => {
@@ -505,19 +585,30 @@ export const useGitStore = create<GitStore>()(
 
         const worker = async () => {
           for (;;) {
+            if (generation !== getDiffFetchGeneration(directory)) {
+              return;
+            }
             const next = takeNext();
             if (!next) return;
             try {
-              results.push(await fetchWithTimeout(next.path));
+              results.push(await fetchWithTimeout(next));
             } catch {
               // Ignore individual failures/timeouts during prefetch.
+            } finally {
+              inFlight.delete(next);
             }
           }
         };
 
-        const workerCount = Math.min(DIFF_PREFETCH_CONCURRENCY, limitedFilesToFetch.length);
+        const workerCount = Math.min(DIFF_PREFETCH_CONCURRENCY, limitedFilePaths.length);
         await Promise.allSettled(Array.from({ length: workerCount }, () => worker()));
 
+        limitedFilePaths.forEach((path) => inFlight.delete(path));
+
+        if (generation !== getDiffFetchGeneration(directory)) {
+          return;
+        }
+
         // Update diff cache with results
         const newDirectories = new Map(get().directories);
         const currentDirState = newDirectories.get(directory);
@@ -559,17 +650,34 @@ export const useGitStore = create<GitStore>()(
               return;
             }
 
-            const { activeDirectory } = get();
+            const { activeDirectory, recentDirectories } = get();
             if (!activeDirectory) {
               set({ pollIntervalId: schedulePoll() });
               return;
             }
 
-            const statusChanged = await get().fetchStatus(activeDirectory, git, { silent: true });
-            if (statusChanged) {
-              await get().fetchLog(activeDirectory, git);
-              // Pre-fetch all diffs so they're ready when user opens Diff tab
-              void get().fetchAllDiffs(activeDirectory, git);
+            const pollTargets = [
+              activeDirectory,
+              ...recentDirectories
+                .filter((directory) => directory !== activeDirectory)
+                .slice(0, Math.max(0, RECENT_DIRECTORIES_LIMIT - 1)),
+            ];
+
+            let anyStatusChanged = false;
+
+            for (const targetDirectory of pollTargets) {
+              const statusChanged = await get().fetchStatus(targetDirectory, git, { silent: true });
+              if (statusChanged) {
+                anyStatusChanged = true;
+                if (targetDirectory === activeDirectory) {
+                  await get().fetchLog(activeDirectory, git);
+                  // Pre-fetch all diffs so they're ready when user opens Diff tab
+                  void get().fetchAllDiffs(activeDirectory, git);
+                }
+              }
+            }
+
+            if (anyStatusChanged) {
               // Reset to base interval on changes
               set({ currentPollInterval: GIT_POLL_BASE_INTERVAL });
             } else {
diff --git a/packages/ui/src/stores/useProjectsStore.ts b/packages/ui/src/stores/useProjectsStore.ts
index 4bcfbcdd..41f102cd 100644
--- a/packages/ui/src/stores/useProjectsStore.ts
+++ b/packages/ui/src/stores/useProjectsStore.ts
@@ -7,6 +7,25 @@ import { updateDesktopSettings } from '@/lib/persistence';
 import { getSafeStorage } from './utils/safeStorage';
 import { useDirectoryStore } from './useDirectoryStore';
 import { streamDebugEnabled } from '@/stores/utils/streamDebug';
+import { PROJECT_COLORS } from '@/lib/projectMeta';
+
+/** Pick a color key that's least used among existing projects */
+const pickAutoColor = (projects: ProjectEntry[]): string => {
+  const colorKeys = PROJECT_COLORS.map((c) => c.key);
+  const usageCounts = new Map<string, number>();
+  for (const key of colorKeys) {
+    usageCounts.set(key, 0);
+  }
+  for (const p of projects) {
+    if (p.color && usageCounts.has(p.color)) {
+      usageCounts.set(p.color, (usageCounts.get(p.color) ?? 0) + 1);
+    }
+  }
+  // Find minimum usage, then pick randomly among those with min usage
+  const minUsage = Math.min(...usageCounts.values());
+  const candidates = colorKeys.filter((k) => usageCounts.get(k) === minUsage);
+  return candidates[Math.floor(Math.random() * candidates.length)];
+};
 
 interface ProjectPathValidationResult {
   ok: boolean;
@@ -280,6 +299,7 @@ export const useProjectsStore = create<ProjectsStore>()(
         id,
         path: normalizedPath,
         label,
+        color: pickAutoColor(get().projects),
         addedAt: now,
         lastOpenedAt: now,
       };
diff --git a/packages/ui/src/stores/useSessionStore.ts b/packages/ui/src/stores/useSessionStore.ts
index ba496889..8b5a306f 100644
--- a/packages/ui/src/stores/useSessionStore.ts
+++ b/packages/ui/src/stores/useSessionStore.ts
@@ -45,6 +45,19 @@ const normalizePath = (value?: string | null): string | null => {
     return replaced.length > 1 ? replaced.replace(/\/+$/, "") : replaced;
 };
 
+const sessionChoiceAnalysisSignature = new Map<string, string>();
+const ENABLE_ACTIVE_SESSION_TRIM = false;
+
+const buildSessionChoiceAnalysisSignature = (messages: Array<{ info: Message; parts: Part[] }>): string => {
+    const lastMessage = messages[messages.length - 1];
+    const lastMessageId = typeof lastMessage?.info?.id === 'string' ? lastMessage.info.id : '';
+    const lastAssistant = [...messages]
+        .reverse()
+        .find((message) => message.info?.role === 'assistant');
+    const lastAssistantId = typeof lastAssistant?.info?.id === 'string' ? lastAssistant.info.id : '';
+    return `${messages.length}:${lastMessageId}:${lastAssistantId}`;
+};
+
 const resolveSessionDirectory = (
     sessions: Session[],
     sessionId: string | null | undefined,
@@ -319,7 +332,9 @@ export const useSessionStore = create<SessionStore>()(
                             await get().loadMessages(id);
                         }
 
-                        get().trimToViewportWindow(id, getMessageLimit());
+                        if (ENABLE_ACTIVE_SESSION_TRIM) {
+                            get().trimToViewportWindow(id, getMessageLimit());
+                        }
 
                         // Analyze session messages to extract agent/model/variant choices
                         // This ensures context is available even when ModelControls isn't mounted
@@ -327,12 +342,18 @@ export const useSessionStore = create<SessionStore>()(
                         if (sessionMessages && sessionMessages.length > 0) {
                             const agents = useConfigStore.getState().agents;
                             if (agents.length > 0) {
+                                const analysisSignature = buildSessionChoiceAnalysisSignature(sessionMessages);
+                                if (sessionChoiceAnalysisSignature.get(id) === analysisSignature) {
+                                    get().evictLeastRecentlyUsed();
+                                    return;
+                                }
                                 try {
                                     await useContextStore.getState().analyzeAndSaveExternalSessionChoices(
                                         id,
                                         agents,
                                         get().messages
                                     );
+                                    sessionChoiceAnalysisSignature.set(id, analysisSignature);
                                 } catch (error) {
                                     console.warn('Failed to analyze session choices:', error);
                                 }
diff --git a/packages/ui/src/styles/fireworks.css b/packages/ui/src/styles/fireworks.css
index d076a8fb..aae7507e 100644
--- a/packages/ui/src/styles/fireworks.css
+++ b/packages/ui/src/styles/fireworks.css
@@ -33,7 +33,6 @@
   height: var(--particle-size, 6px);
   border-radius: 999px;
   background: var(--firework-color, var(--status-success));
-  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
   opacity: 0;
   transform: translate(-50%, -50%) scale(0.4);
   animation: firework-pop var(--firework-duration, var(--fireworks-duration-ms)) ease-out forwards;