🤖 fix: maintain manual open state for mobile review panel

Prevent the mobile review panel from immediately auto-collapsing after
the user taps the new header button:
- Track manual expansions to disable hysteresis auto-collapse until the
  user dismisses the panel
- Wire the mobile header button through AIView -> RightSidebar to open
  in manual mode
- Reuse the same close helper across overlay, close button, and swipe
  gestures
- Remove the bottom FAB entirely in favor of the header entrypoint

This fixes the flicker where the panel opened and instantly closed on
mobile devices.

_Generated with `cmux`_

Change-Id: Id6fbe1a850808355c16a88c76bd43958c522f0dd
Signed-off-by: Test <test@example.com>

Author: Test

src/components/RightSidebar.tsx

@@ -167,35 +167,63 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
     false
   );
 
+  // Single render point for VerticalTokenMeter
+  // Shows when: (1) collapsed, OR (2) Review tab is active
+  const showMeter = showCollapsed || selectedTab === "review";
+  const verticalMeter = showMeter ? <VerticalTokenMeter data={verticalMeterData} /> : null;
+
+  // Track manual expansion to prevent auto-collapse immediately after user opens sidebar
+  const manualExpandRef = React.useRef(false);
+
+  const openSidebar = React.useCallback(
+    (manual: boolean) => {
+      manualExpandRef.current = manual;
+      setShowCollapsed(false);
+    },
+    [setShowCollapsed]
+  );
+
+  const closeSidebar = React.useCallback(() => {
+    manualExpandRef.current = false;
+    setShowCollapsed(true);
+  }, [setShowCollapsed]);
+
+  // Expose open function to parent (for mobile header button)
+  React.useEffect(() => {
+    if (onMountOpenCallback) {
+      onMountOpenCallback(() => openSidebar(true));
+    }
+  }, [onMountOpenCallback, openSidebar]);
+
+  const openSidebarAuto = React.useCallback(() => openSidebar(false), [openSidebar]);
+  const openSidebarManual = React.useCallback(() => openSidebar(true), [openSidebar]);
+
   React.useEffect(() => {
     // Never collapse when Review tab is active - code review needs space
     if (selectedTab === "review") {
       if (showCollapsed) {
-        setShowCollapsed(false);
+        openSidebarAuto();
       }
+      manualExpandRef.current = false;
+      return;
+    }
+
+    // If user manually expanded on mobile, keep sidebar open until they close it
+    if (manualExpandRef.current) {
       return;
     }
 
-    // Normal hysteresis for Costs/Tools tabs
     if (chatAreaWidth <= COLLAPSE_THRESHOLD) {
-      setShowCollapsed(true);
+      if (!showCollapsed) {
+        closeSidebar();
+      }
     } else if (chatAreaWidth >= EXPAND_THRESHOLD) {
-      setShowCollapsed(false);
+      if (showCollapsed) {
+        openSidebarAuto();
+      }
     }
     // Between thresholds: maintain current state (no change)
-  }, [chatAreaWidth, selectedTab, showCollapsed, setShowCollapsed]);
-
-  // Single render point for VerticalTokenMeter
-  // Shows when: (1) collapsed, OR (2) Review tab is active
-  const showMeter = showCollapsed || selectedTab === "review";
-  const verticalMeter = showMeter ? <VerticalTokenMeter data={verticalMeterData} /> : null;
-
-  // Expose open function to parent (for mobile header button)
-  React.useEffect(() => {
-    if (onMountOpenCallback) {
-      onMountOpenCallback(() => setShowCollapsed(false));
-    }
-  }, [onMountOpenCallback, setShowCollapsed]);
+  }, [chatAreaWidth, selectedTab, showCollapsed, closeSidebar, openSidebarAuto]);
 
   // Swipe gesture detection for mobile - right-to-left swipe to open sidebar
   React.useEffect(() => {
@@ -243,11 +271,11 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
 
       // Open sidebar on left swipe from right edge when collapsed
       if (isLeftSwipe && isHorizontal && isFastEnough && showCollapsed) {
-        setShowCollapsed(false);
+        openSidebarManual();
       }
       // Close sidebar on right swipe when open (from anywhere on screen)
       else if (isRightSwipe && isHorizontal && isFastEnough && !showCollapsed) {
-        setShowCollapsed(true);
+        closeSidebar();
       }
     };
 
@@ -258,15 +286,15 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
       window.removeEventListener("touchstart", handleTouchStart);
       window.removeEventListener("touchend", handleTouchEnd);
     };
-  }, [showCollapsed, setShowCollapsed]);
+  }, [showCollapsed, closeSidebar, openSidebarManual]);
 
   return (
     <>
       {/* Backdrop overlay - only on mobile when sidebar is expanded */}
       {!showCollapsed && (
         <div
           className="fixed inset-0 z-[998] hidden bg-black/50 backdrop-blur-sm max-md:block"
-          onClick={() => setShowCollapsed(true)}
+          onClick={closeSidebar}
           aria-hidden="true"
         />
       )}
@@ -307,18 +335,19 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
             >
               {/* Close button - only visible on mobile */}
               <button
-                onClick={() => setShowCollapsed(true)}
+                onClick={closeSidebar}
                 title="Close panel"
                 aria-label="Close panel"
                 className={cn(
                   "hidden max-md:flex absolute top-2 right-2 z-10",
-                  "w-8 h-8 bg-separator border border-border-light rounded cursor-pointer",
-                  "items-center justify-center text-foreground transition-all duration-200",
+                  "h-6 w-6 rounded-md bg-separator/90 border border-border-light/80",
+                  "items-center justify-center text-[11px] font-semibold text-foreground transition-all duration-200",
+                  "shadow-[0_1px_2px_rgba(0,0,0,0.2)]",
                   "hover:bg-hover hover:border-bg-light",
                   "active:scale-95"
                 )}
               >
-                ✕
+                ×
               </button>
 
               <TooltipWrapper inline>