From eaf19cc62f9fac8af8b6863e86c874affc523369 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Wed, 11 Feb 2026 10:08:15 -0800
Subject: [PATCH] fix(chat): fix session return button on mobile. add
 double-click to switch to chat and auto-focus draft (#384)

---
 packages/ui/src/components/chat/ChatInput.tsx | 17 +++++
 .../chat/MobileSessionStatusBar.tsx           | 16 +++++
 .../ui/src/components/layout/MainLayout.tsx   | 25 +++----
 .../ui/src/components/layout/VSCodeLayout.tsx | 69 ++++++++++---------
 .../src/components/session/SessionSidebar.tsx | 10 +++
 5 files changed, 90 insertions(+), 47 deletions(-)

diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx
index 70540287..d5456fef 100644
--- a/packages/ui/src/components/chat/ChatInput.tsx
+++ b/packages/ui/src/components/chat/ChatInput.tsx
@@ -224,6 +224,23 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         }
     }, [currentSessionId, persistChatDraft, message]);
 
+    // Focus textarea when new session draft is opened
+    const prevNewSessionDraftOpenRef = React.useRef(newSessionDraftOpen);
+    React.useEffect(() => {
+        if (!prevNewSessionDraftOpenRef.current && newSessionDraftOpen) {
+            // New session draft just opened - focus the textarea
+            requestAnimationFrame(() => {
+                if (isMobile) {
+                    // On mobile, use preventScroll to avoid viewport jumping
+                    textareaRef.current?.focus({ preventScroll: true });
+                } else {
+                    textareaRef.current?.focus();
+                }
+            });
+        }
+        prevNewSessionDraftOpenRef.current = newSessionDraftOpen;
+    }, [newSessionDraftOpen, isMobile]);
+
     // Persist chat input draft to localStorage (only if setting enabled)
     React.useEffect(() => {
         if (!persistChatDraft) {
diff --git a/packages/ui/src/components/chat/MobileSessionStatusBar.tsx b/packages/ui/src/components/chat/MobileSessionStatusBar.tsx
index 75053f83..e3c5959a 100644
--- a/packages/ui/src/components/chat/MobileSessionStatusBar.tsx
+++ b/packages/ui/src/components/chat/MobileSessionStatusBar.tsx
@@ -183,6 +183,7 @@ function SessionItem({
   getSessionAgentName,
   getSessionTitle,
   onClick,
+  onDoubleClick,
   needsAttention
 }: {
   session: SessionWithStatus;
@@ -190,6 +191,7 @@ function SessionItem({
   getSessionAgentName: (s: Session) => string;
   getSessionTitle: (s: Session) => string;
   onClick: () => void;
+  onDoubleClick?: () => void;
   needsAttention: (sessionId: string) => boolean;
 }) {
   const agentName = getSessionAgentName(session);
@@ -200,6 +202,10 @@ function SessionItem({
     <button
       type="button"
       onClick={onClick}
+      onDoubleClick={(e) => {
+        e.stopPropagation();
+        onDoubleClick?.();
+      }}
       className={cn(
         "flex items-center gap-0.5 px-1.5 py-px text-left transition-colors",
         "hover:bg-[var(--interactive-hover)] active:bg-[var(--interactive-selection)]",
@@ -339,6 +345,7 @@ function ExpandedView({
   onToggleExpand,
   onNewSession,
   onSessionClick,
+  onSessionDoubleClick,
   getSessionAgentName,
   getSessionTitle,
   needsAttention
@@ -353,6 +360,7 @@ function ExpandedView({
   onToggleExpand: () => void;
   onNewSession: () => void;
   onSessionClick: (id: string) => void;
+  onSessionDoubleClick?: () => void;
   getSessionAgentName: (s: Session) => string;
   getSessionTitle: (s: Session) => string;
   needsAttention: (sessionId: string) => boolean;
@@ -419,6 +427,7 @@ function ExpandedView({
             getSessionAgentName={getSessionAgentName}
             getSessionTitle={getSessionTitle}
             onClick={() => onSessionClick(session.id)}
+            onDoubleClick={onSessionDoubleClick}
             needsAttention={needsAttention}
           />
         ))}
@@ -438,6 +447,7 @@ export const MobileSessionStatusBar: React.FC<MobileSessionStatusBarProps> = ({
   const createSession = useSessionStore((state) => state.createSession);
   const agents = useConfigStore((state) => state.agents);
   const { isMobile, isMobileSessionStatusBarCollapsed, setIsMobileSessionStatusBarCollapsed } = useUIStore();
+  const setActiveMainTab = useUIStore((state) => state.setActiveMainTab);
   const [isExpanded, setIsExpanded] = React.useState(false);
 
   const { sessions: sortedSessions, totalRunning, totalUnread, totalCount } = useSessionGrouping(sessions, sessionStatus, sessionAttentionStates);
@@ -456,6 +466,11 @@ export const MobileSessionStatusBar: React.FC<MobileSessionStatusBarProps> = ({
     setIsExpanded(false);
   };
 
+  const handleSessionDoubleClick = () => {
+    // On double-tap, switch to the Chat tab
+    setActiveMainTab('chat');
+  };
+
   const handleCreateSession = async () => {
     const newSession = await createSession();
     if (newSession) {
@@ -491,6 +506,7 @@ export const MobileSessionStatusBar: React.FC<MobileSessionStatusBarProps> = ({
       onToggleExpand={() => setIsExpanded(!isExpanded)}
       onNewSession={handleCreateSession}
       onSessionClick={handleSessionClick}
+      onSessionDoubleClick={handleSessionDoubleClick}
       getSessionAgentName={getSessionAgentName}
       getSessionTitle={getSessionTitle}
       needsAttention={needsAttention}
diff --git a/packages/ui/src/components/layout/MainLayout.tsx b/packages/ui/src/components/layout/MainLayout.tsx
index a523c6ad..b6e4ac15 100644
--- a/packages/ui/src/components/layout/MainLayout.tsx
+++ b/packages/ui/src/components/layout/MainLayout.tsx
@@ -430,22 +430,19 @@ export const MainLayout: React.FC = () => {
                         style={{ paddingTop: 'var(--oc-header-height, 56px)' }}
                     >
                         {/* Mobile drill-down: show sessions sidebar OR main content */}
-                        {isSessionSwitcherOpen ? (
-                            <div className="flex-1 overflow-hidden bg-sidebar">
-                                <ErrorBoundary><SessionSidebar mobileVariant /></ErrorBoundary>
+                        <div className={cn('flex-1 overflow-hidden bg-sidebar', !isSessionSwitcherOpen && 'hidden')}>
+                            <ErrorBoundary><SessionSidebar mobileVariant /></ErrorBoundary>
+                        </div>
+                        <main className={cn('flex-1 overflow-hidden bg-background relative', isSessionSwitcherOpen && 'hidden')}>
+                            <div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
+                                <ErrorBoundary><ChatView /></ErrorBoundary>
                             </div>
-                        ) : (
-                            <main className="flex-1 overflow-hidden bg-background relative">
-                                <div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
-                                    <ErrorBoundary><ChatView /></ErrorBoundary>
+                            {secondaryView && (
+                                <div className="absolute inset-0">
+                                    <ErrorBoundary>{secondaryView}</ErrorBoundary>
                                 </div>
-                                {secondaryView && (
-                                    <div className="absolute inset-0">
-                                        <ErrorBoundary>{secondaryView}</ErrorBoundary>
-                                    </div>
-                                )}
-                            </main>
-                        )}
+                            )}
+                        </main>
                     </div>
 
                     {/* Mobile multi-run launcher: full screen */}
diff --git a/packages/ui/src/components/layout/VSCodeLayout.tsx b/packages/ui/src/components/layout/VSCodeLayout.tsx
index a5ba90bc..a0476ed3 100644
--- a/packages/ui/src/components/layout/VSCodeLayout.tsx
+++ b/packages/ui/src/components/layout/VSCodeLayout.tsx
@@ -6,6 +6,7 @@ import { useSessionStore } from '@/stores/useSessionStore';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
 import { McpDropdown } from '@/components/mcp/McpDropdown';
+import { cn } from '@/lib/utils';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -377,41 +378,43 @@ export const VSCodeLayout: React.FC = () => {
             </div>
           </div>
         </div>
-      ) : currentView === 'sessions' ? (
-        // Compact layout: sessions list (drill-down)
-        <div className="flex flex-col h-full">
-          <VSCodeHeader
-            title="Sessions"
-          />
-          <div className="flex-1 overflow-hidden">
-            <SessionSidebar
-              mobileVariant
-              allowReselect
-              onSessionSelected={() => setCurrentView('chat')}
-              hideDirectoryControls
-              showOnlyMainWorkspace
-            />
-          </div>
-        </div>
       ) : (
-        // Compact layout: chat view (drill-down)
-        <div className="flex flex-col h-full">
-          <VSCodeHeader
-            title={newSessionDraftOpen && !currentSessionId
-              ? 'New session'
-              : sessions.find((session) => session.id === currentSessionId)?.title || 'Chat'}
-            showBack
-            onBack={handleBackToSessions}
-            showMcp
-            showContextUsage
-            showRateLimits
-          />
-          <div className="flex-1 overflow-hidden">
-            <ErrorBoundary>
-              <ChatView />
-            </ErrorBoundary>
+        // Compact layout: drill-down between sessions list and chat
+        <>
+          {/* Sessions list view */}
+          <div className={cn('flex flex-col h-full', currentView !== 'sessions' && 'hidden')}>
+            <VSCodeHeader
+              title="Sessions"
+            />
+            <div className="flex-1 overflow-hidden">
+              <SessionSidebar
+                mobileVariant
+                allowReselect
+                onSessionSelected={() => setCurrentView('chat')}
+                hideDirectoryControls
+                showOnlyMainWorkspace
+              />
+            </div>
           </div>
-        </div>
+          {/* Chat view */}
+          <div className={cn('flex flex-col h-full', currentView !== 'chat' && 'hidden')}>
+            <VSCodeHeader
+              title={newSessionDraftOpen && !currentSessionId
+                ? 'New session'
+                : sessions.find((session) => session.id === currentSessionId)?.title || 'Chat'}
+              showBack
+              onBack={handleBackToSessions}
+              showMcp
+              showContextUsage
+              showRateLimits
+            />
+            <div className="flex-1 overflow-hidden">
+              <ErrorBoundary>
+                <ChatView />
+              </ErrorBoundary>
+            </div>
+          </div>
+        </>
       )}
     </div>
   );
diff --git a/packages/ui/src/components/session/SessionSidebar.tsx b/packages/ui/src/components/session/SessionSidebar.tsx
index 54e85453..76546862 100644
--- a/packages/ui/src/components/session/SessionSidebar.tsx
+++ b/packages/ui/src/components/session/SessionSidebar.tsx
@@ -908,6 +908,11 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     ],
   );
 
+  const handleSessionDoubleClick = React.useCallback(() => {
+    // On double-click/tap, switch to the Chat tab
+    setActiveMainTab('chat');
+  }, [setActiveMainTab]);
+
   const handleSaveEdit = React.useCallback(async () => {
     if (editingId && editTitle.trim()) {
       await updateSessionTitle(editingId, editTitle.trim());
@@ -1788,6 +1793,10 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
                 type="button"
                 disabled={isMissingDirectory}
                 onClick={() => handleSessionSelect(session.id, sessionDirectory, isMissingDirectory, projectId)}
+                onDoubleClick={(e) => {
+                  e.stopPropagation();
+                  handleSessionDoubleClick();
+                }}
                 className={cn(
                   'flex min-w-0 flex-1 flex-col gap-0 overflow-hidden rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 text-foreground select-none',
                 )}
@@ -1981,6 +1990,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
       handleCancelEdit,
       toggleParent,
       handleSessionSelect,
+      handleSessionDoubleClick,
       handleShareSession,
       handleCopyShareUrl,
       handleUnshareSession,