🤖 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"
         />
       )}
@@ -301,68 +329,72 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
 
           <div className="flex min-w-0 flex-1 flex-col">
             <div
-              className="bg-background-secondary border-border relative flex border-b [&>*]:flex-1"
+              className="bg-background-secondary border-border flex items-center border-b px-2 py-2 max-md:gap-2"
               role="tablist"
               aria-label="Metadata views"
             >
               {/* 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",
-                  "hover:bg-hover hover:border-bg-light",
-                  "active:scale-95"
+                  "hidden max-md:inline-flex h-7 w-7 items-center justify-center rounded-md",
+                  "border border-border-light/80 bg-separator/90 text-xs font-semibold text-foreground",
+                  "shadow-[0_1px_2px_rgba(0,0,0,0.2)] transition-all duration-200",
+                  "hover:bg-hover hover:border-bg-light active:scale-95"
                 )}
               >
-                ✕
+                ×
               </button>
 
-              <TooltipWrapper inline>
-                <button
-                  className={cn(
-                    "w-full py-2.5 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
-                    selectedTab === "costs"
-                      ? "text-white bg-separator border-b-2 border-b-plan-mode"
-                      : "bg-transparent text-secondary border-b-2 border-b-transparent hover:bg-background-secondary hover:text-foreground"
-                  )}
-                  onClick={() => setSelectedTab("costs")}
-                  id={costsTabId}
-                  role="tab"
-                  type="button"
-                  aria-selected={selectedTab === "costs"}
-                  aria-controls={costsPanelId}
-                >
-                  Costs
-                </button>
-                <Tooltip className="tooltip" position="bottom" align="center">
-                  {formatKeybind(KEYBINDS.COSTS_TAB)}
-                </Tooltip>
-              </TooltipWrapper>
-              <TooltipWrapper inline>
-                <button
-                  className={cn(
-                    "w-full py-2.5 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
-                    selectedTab === "review"
-                      ? "text-white bg-separator border-b-2 border-b-plan-mode"
-                      : "bg-transparent text-secondary border-b-2 border-b-transparent hover:bg-background-secondary hover:text-foreground"
-                  )}
-                  onClick={() => setSelectedTab("review")}
-                  id={reviewTabId}
-                  role="tab"
-                  type="button"
-                  aria-selected={selectedTab === "review"}
-                  aria-controls={reviewPanelId}
-                >
-                  Review
-                </button>
-                <Tooltip className="tooltip" position="bottom" align="center">
-                  {formatKeybind(KEYBINDS.REVIEW_TAB)}
-                </Tooltip>
-              </TooltipWrapper>
+              <div className="flex flex-1 gap-1 [&>*]:flex-1">
+                <TooltipWrapper inline>
+                  <button
+                    className={cn(
+                      "w-full py-2 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
+                      selectedTab === "costs"
+                        ? "text-white bg-separator border-b-2 border-b-plan-mode"
+                        : "bg-transparent text-secondary border-b-2 border-b-transparent hover:bg-background-secondary hover:text-foreground"
+                    )}
+                    onClick={() => setSelectedTab("costs")}
+                    id={costsTabId}
+                    role="tab"
+                    type="button"
+                    aria-selected={selectedTab === "costs"}
+                    aria-controls={costsPanelId}
+                  >
+                    Costs
+                  </button>
+                  <Tooltip className="tooltip" position="bottom" align="center">
+                    {formatKeybind(KEYBINDS.COSTS_TAB)}
+                  </Tooltip>
+                </TooltipWrapper>
+                <TooltipWrapper inline>
+                  <button
+                    className={cn(
+                      "w-full py-2 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
+                      selectedTab === "review"
+                        ? "text-white bg-separator border-b-2 border-b-plan-mode"
+                        : "bg-transparent text-secondary border-b-2 border-b-transparent hover:bg-background-secondary hover:text-foreground"
+                    )}
+                    onClick={() => {
+                      setSelectedTab("review");
+                      setFocusTrigger((prev) => prev + 1);
+                    }}
+                    id={reviewTabId}
+                    role="tab"
+                    type="button"
+                    aria-selected={selectedTab === "review"}
+                    aria-controls={reviewPanelId}
+                  >
+                    Review
+                  </button>
+                  <Tooltip className="tooltip" position="bottom" align="center">
+                    {formatKeybind(KEYBINDS.REVIEW_TAB)}
+                  </Tooltip>
+                </TooltipWrapper>
+              </div>
             </div>
             <div
               className={cn(