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

@@ -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) {

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}