🤖 Fix circular dependency - observe ChatArea width directly

Previous approach had circular dependency:
- Measured ViewContainer (includes ChatArea + Sidebar)
- Sidebar width affected container width being measured
- Could never collapse properly

New architecture:
- Observe ChatArea width directly (independent of sidebar)
- ChatArea has flex:1 and min-width:750px
- When ChatArea compressed (≤800px) → collapse sidebar
- When sidebar collapses → ChatArea expands → positive feedback

Logic:
- chatAreaWidth ≤ 800px → showCollapsed = true
- No circular dependency - ChatArea width independent of sidebar
- 800px threshold = min(750px) + 50px comfort buffer

Debug logging included to verify behavior in live testing.

_Generated with `cmux`_

Author: ammar-agent

src/components/AIView.tsx

@@ -203,7 +203,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   workspacePath,
   className,
 }) => {
-  const viewContainerRef = useRef<HTMLDivElement>(null);
+  const chatAreaRef = useRef<HTMLDivElement>(null);
 
   // NEW: Get workspace state from store (only re-renders when THIS workspace changes)
   const workspaceState = useWorkspaceState(workspaceId);
@@ -534,7 +534,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
           />
         </ChatArea>
 
-        <ChatMetaSidebar workspaceId={workspaceId} containerRef={viewContainerRef} />
+        <ChatMetaSidebar workspaceId={workspaceId} chatAreaRef={chatAreaRef} />
       </ViewContainer>
     </ChatProvider>
   );

src/components/ChatMetaSidebar.tsx

@@ -74,18 +74,18 @@ type TabType = "costs" | "tools";
 
 interface ChatMetaSidebarProps {
   workspaceId: string;
-  containerRef: React.RefObject<HTMLDivElement>;
+  chatAreaRef: React.RefObject<HTMLDivElement>;
 }
 
-export const ChatMetaSidebar: React.FC<ChatMetaSidebarProps> = ({ workspaceId, containerRef }) => {
+export const ChatMetaSidebar: React.FC<ChatMetaSidebarProps> = ({ workspaceId, chatAreaRef }) => {
   const [selectedTab, setSelectedTab] = usePersistedState<TabType>(
     `chat-meta-sidebar-tab:${workspaceId}`,
     "costs"
   );
 
   const { stats } = useChatContext();
   const [use1M] = use1MContext();
-  const containerSize = useResizeObserver(containerRef);
+  const chatAreaSize = useResizeObserver(chatAreaRef);
 
   const baseId = `chat-meta-${workspaceId}`;
   const costsTabId = `${baseId}-tab-costs`;
@@ -99,24 +99,22 @@ export const ChatMetaSidebar: React.FC<ChatMetaSidebarProps> = ({ workspaceId, c
     : { segments: [], totalTokens: 0, totalPercentage: 0 };
 
   // Calculate if we should show collapsed view
-  // Problem: Container includes both ChatArea + Sidebar, creating circular dependency
-  // Solution: Check if container has enough width for ChatArea + full sidebar + buffer
-  // When collapsed: container = ChatArea(750+) + CollapsedSidebar(20) = 770+
-  // When expanded: container = ChatArea(750+) + FullSidebar(300) = 1050+
-  // Threshold: If container < 1050px, there's not enough room for full sidebar
-  const containerWidth = containerSize?.width ?? 2000; // Default to large to avoid flash
-  const FULL_SIDEBAR_THRESHOLD = 1050; // ChatArea(750) + FullSidebar(300)
-  const showCollapsed = containerWidth < FULL_SIDEBAR_THRESHOLD;
-
-  // Debug logging (temporary)
-  if (containerSize) {
-    console.log(
-      "[ChatMetaSidebar] containerWidth:",
-      containerWidth,
-      "showCollapsed:",
-      showCollapsed
-    );
-  }
+  // Strategy: Observe ChatArea width directly (independent of sidebar width)
+  // - ChatArea has min-width: 750px and flex: 1
+  // - When ChatArea is compressed near its minimum, space is tight → collapse sidebar
+  // - When sidebar collapses (300→20), ChatArea gains 280px → positive feedback loop
+  // - No circular dependency: ChatArea width doesn't include sidebar
+  const CHAT_AREA_COMFORTABLE_WIDTH = 800; // Buffer above min-width (750px)
+  const chatAreaWidth = chatAreaSize?.width ?? 1000; // Default to large to avoid flash
+  const showCollapsed = chatAreaWidth <= CHAT_AREA_COMFORTABLE_WIDTH;
+
+  // Debug logging
+  console.log(
+    "[ChatMetaSidebar] chatAreaWidth:",
+    chatAreaWidth,
+    "showCollapsed:",
+    showCollapsed
+  );
 
   return (
     <SidebarContainer