🤖 refactor: move mobile sidebar toggle to header

Replace bottom-right FAB with a header button for better accessibility:
- Add panel icon button next to terminal button in WorkspaceHeader
- Only visible on mobile (max-md breakpoint)
- Remove FAB that was blocking chat input area
- Keep swipe gestures and backdrop overlay
- Expose sidebar open function via callback prop chain

The header button is more discoverable and doesn't interfere with
other mobile UI elements like the chat input.

_Generated with `cmux`_

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

Author: Test

src/components/AIView.tsx

@@ -102,6 +102,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
     chatInputAPI.current?.appendText(note);
   }, []);
 
+  // Ref to store the sidebar open function (for mobile header button)
+  const openRightSidebarRef = useRef<(() => void) | null>(null);
+  const handleOpenRightSidebar = useCallback(() => {
+    openRightSidebarRef.current?.();
+  }, []);
+
   // Thinking level state from context
   const { thinkingLevel: currentWorkspaceThinking, setThinkingLevel } = useThinking();
 
@@ -328,6 +334,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
           branch={branch}
           namedWorkspacePath={namedWorkspacePath}
           runtimeConfig={runtimeConfig}
+          onOpenRightSidebar={handleOpenRightSidebar}
         />
 
         <div className="relative flex-1 overflow-hidden">
@@ -482,6 +489,9 @@ const AIViewInner: React.FC<AIViewProps> = ({
         onStartResize={isReviewTabActive ? startResize : undefined} // Pass resize handler when Review active
         isResizing={isResizing} // Pass resizing state
         onReviewNote={handleReviewNote} // Pass review note handler to append to chat
+        onMountOpenCallback={(openFn) => {
+          openRightSidebarRef.current = openFn;
+        }}
       />
     </div>
   );

src/components/RightSidebar.tsx

@@ -85,6 +85,8 @@ interface RightSidebarProps {
   isResizing?: boolean;
   /** Callback when user adds a review note from Code Review tab */
   onReviewNote?: (note: string) => void;
+  /** Callback to expose the open sidebar function (for mobile header button) */
+  onMountOpenCallback?: (openFn: () => void) => void;
 }
 
 const RightSidebarComponent: React.FC<RightSidebarProps> = ({
@@ -96,6 +98,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   onStartResize,
   isResizing = false,
   onReviewNote,
+  onMountOpenCallback,
 }) => {
   // Global tab preference (not per-workspace)
   const [selectedTab, setSelectedTab] = usePersistedState<TabType>("right-sidebar-tab", "costs");
@@ -187,6 +190,13 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   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]);
+
   // Swipe gesture detection for mobile - right-to-left swipe to open sidebar
   React.useEffect(() => {
     // Only enable swipe on mobile when sidebar is collapsed
@@ -252,25 +262,6 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
 
   return (
     <>
-      {/* FAB - Floating Action Button for mobile, only visible when collapsed */}
-      {showCollapsed && (
-        <button
-          onClick={() => setShowCollapsed(false)}
-          title={`Open ${selectedTab} panel`}
-          aria-label={`Open ${selectedTab} panel`}
-          className={cn(
-            "hidden max-md:flex fixed bottom-20 right-4 z-[998]",
-            "w-12 h-12 bg-accent border border-accent rounded-full cursor-pointer",
-            "items-center justify-center text-white text-lg transition-all duration-200",
-            "shadow-[0_4px_12px_rgba(0,0,0,0.4)]",
-            "hover:bg-accent-hover hover:scale-105",
-            "active:scale-95"
-          )}
-        >
-          {selectedTab === "costs" ? "💰" : "📋"}
-        </button>
-      )}
-
       {/* Backdrop overlay - only on mobile when sidebar is expanded */}
       {!showCollapsed && (
         <div

src/components/WorkspaceHeader.tsx

@@ -13,6 +13,7 @@ interface WorkspaceHeaderProps {
   branch: string;
   namedWorkspacePath: string;
   runtimeConfig?: RuntimeConfig;
+  onOpenRightSidebar?: () => void;
 }
 
 export const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
@@ -21,6 +22,7 @@ export const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
   branch,
   namedWorkspacePath,
   runtimeConfig,
+  onOpenRightSidebar,
 }) => {
   const gitStatus = useGitStatus(workspaceId);
   const handleOpenTerminal = useCallback(() => {
@@ -56,6 +58,24 @@ export const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
             Open in terminal ({formatKeybind(KEYBINDS.OPEN_TERMINAL)})
           </Tooltip>
         </TooltipWrapper>
+
+        {/* Open sidebar button - only visible on mobile */}
+        {onOpenRightSidebar && (
+          <TooltipWrapper inline>
+            <button
+              onClick={onOpenRightSidebar}
+              className="text-muted hover:text-foreground hidden cursor-pointer items-center justify-center border-none bg-transparent p-1 transition-colors max-md:flex [&_svg]:h-4 [&_svg]:w-4"
+              aria-label="Open costs and review panel"
+            >
+              <svg viewBox="0 0 16 16" fill="currentColor">
+                <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25V1.75zm1.75-.25a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25H9.5v-13H1.75zm12.5 13H11v-13h3.25a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25z" />
+              </svg>
+            </button>
+            <Tooltip className="tooltip" position="bottom" align="center">
+              Open review panel
+            </Tooltip>
+          </TooltipWrapper>
+        )}
       </div>
     </div>
   );

vite.config.ts

@@ -85,7 +85,7 @@ export default defineConfig(({ mode }) => ({
     host: devServerHost, // Configurable via CMUX_VITE_HOST (defaults to 127.0.0.1 for security)
     port: devServerPort,
     strictPort: true,
-    allowedHosts: devServerHost === "0.0.0.0" ? undefined : ["localhost", "127.0.0.1"],
+    allowedHosts: devServerHost === "0.0.0.0" ? [".ts.net"] : ["localhost", "127.0.0.1"],
     sourcemapIgnoreList: () => false, // Show all sources in DevTools
   },
   preview: {