🤖 Fix CostsTab re-render storm & consumer calculation issues (#282)

## Summary

Complete fix for consumer token breakdown feature with massive
performance improvements. Addresses console spam, missing data on
workspace switches, UI flash issues, and unnecessary re-renders.

## Issues Fixed

1. **Console spam** - "Cancelled by newer request" errors flooded
console during streaming
2. **Consumer breakdown never loads** - Showed "No consumer data
available" on workspace switch
3. **UI flash** - Brief flash of empty state before "Calculating..."
appeared
4. **Text alignment** - Consumer breakdown empty state wasn't aligned
correctly
5. **Excessive re-renders** - CostsTab re-rendered 50+ times during
streaming (now: 1 time)

## Architecture Improvements

### Created WorkspaceConsumerManager (182 → 208 lines)
- **Single responsibility**: consumer tokenization calculations
- Handles: debouncing (150ms), caching, lazy triggers, Web Worker,
cleanup
- Clean API: `getState()`, `scheduleCalculation()`, `removeWorkspace()`,
`dispose()`
- Separated `scheduledCalcs` (debounce window) from `pendingCalcs`
(executing)

### Created ConsumerBreakdown Component (186 lines)
- Extracted consumer breakdown UI from CostsTab
- Handles all three states: calculating, empty, data display
- Fixed text alignment issues
- Memoized to prevent unnecessary re-renders

### Simplified WorkspaceStore (-70 lines net)
- Removed calculation implementation details
- Delegates to WorkspaceConsumerManager
- Clear orchestration layer (decides when to calculate)

### Optimized CostsTab & ChatMetaSidebar
- Memoized all three components (CostsTab, ConsumerBreakdown,
ChatMetaSidebar)
- Prevents re-renders when parent (AIView) re-renders during streaming
- Still re-renders when data actually changes

## Key Technical Changes

### 1. Silent Cancellations
```typescript
catch (error) {
  if (error instanceof Error && error.message === "Cancelled by newer request") {
    return; // Don't cache, don't log - let lazy trigger retry
  }
  // Real errors still logged
}
```

### 2. Lazy Loading on Every Access
Moved lazy trigger **outside** MapStore.get() so it runs on every
access:
```typescript
getWorkspaceConsumers(workspaceId) {
  const cached = this.consumerManager.getCachedState(workspaceId);
  const isPending = this.consumerManager.isPending(workspaceId);
  
  if (!cached && !isPending && isCaughtUp) {
    this.consumerManager.scheduleCalculation(workspaceId, aggregator);
  }
  
  return this.consumersStore.get(workspaceId, () => {
    return this.consumerManager.getStateSync(workspaceId);
  });
}
```

### 3. Immediate Scheduling State
Mark as "calculating" immediately when scheduling (not when timer
fires):
```typescript
scheduleCalculation(workspaceId, aggregator) {
  this.scheduledCalcs.add(workspaceId); // Immediate
  this.onCalculationComplete(workspaceId); // Trigger UI update
  
  setTimeout(() => {
    this.scheduledCalcs.delete(workspaceId);
    this.executeCalculation(workspaceId, aggregator);
  }, 150);
}
```

### 4. React.memo Optimization
```typescript
const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
  // ... component logic
};

export const CostsTab = React.memo(CostsTabComponent);
```

## Performance Gains

### Before
- **Console**: Flooded with cancellation errors during streaming
- **Workspace switch**: "No consumer data available" forever
- **UI flash**: 150ms empty state before "Calculating..."
- **Re-renders**: 50+ per streaming message (CostsTab × 50,
ConsumerBreakdown × 50, ChatMetaSidebar × 50)

### After
- **Console**: Clean ✅
- **Workspace switch**: Consumer breakdown loads automatically ✅
- **UI flash**: Eliminated - instant "Calculating..." state ✅
- **Re-renders**: ~98% reduction - 0 during streaming, 1 when data
changes ✅

## Dual-Cache Architecture

**WorkspaceConsumerManager.cache**:
- Source of truth for calculated consumer data
- Manages calculation lifecycle

**WorkspaceStore.consumersStore (MapStore)**:
- Handles subscription management (components subscribe to changes)
- Delegates actual state to manager

## Files Changed

### Created
- `src/stores/WorkspaceConsumerManager.ts` (208 lines)
- `src/components/ChatMetaSidebar/ConsumerBreakdown.tsx` (189 lines)

### Modified
- `src/stores/WorkspaceStore.ts` (-70 lines net)
- `src/components/ChatMetaSidebar/CostsTab.tsx` (simplified, memoized)
- `src/components/ChatMetaSidebar.tsx` (memoized)

**Net**: +475 lines (well-organized, well-documented code)

## Testing

- ✅ Typecheck passes
- ✅ Build succeeds  
- ✅ No console spam during streaming
- ✅ Consumer breakdown loads on workspace switch
- ✅ No UI flash when switching workspaces
- ✅ Sidebar doesn't re-render during streaming
- ✅ Data updates correctly when calculations complete

## Commits

1. `1c08ec3b` - Fix consumer calculation spam and lazy loading
2. `c26ab425` - Extract consumer calculation logic and fix lazy loading
3. `6acd98d7` - Fix consumer calculation cancellations and lazy loading
4. `80809c2b` - Eliminate flash of 'No consumer data available'
5. `45f40efb` - Memoize CostsTab, ConsumerBreakdown, and ChatMetaSidebar
6. `d6b701e2` - Add missing React.memo export for ChatMetaSidebar

---

_Generated with `cmux`_

Author: ammar-agent

src/components/AIView.tsx

@@ -13,7 +13,6 @@ import {
   mergeConsecutiveStreamErrors,
 } from "@/utils/messages/messageUtils";
 import { hasInterruptedStream } from "@/utils/messages/retryEligibility";
-import { ChatProvider } from "@/contexts/ChatContext";
 import { ThinkingProvider } from "@/contexts/ThinkingContext";
 import { ModeProvider } from "@/contexts/ModeContext";
 import { formatKeybind, KEYBINDS } from "@/utils/ui/keybinds";
@@ -379,8 +378,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   }
 
   // Extract state from workspace state
-  const { messages, canInterrupt, isCompacting, loading, cmuxMessages, currentModel } =
-    workspaceState;
+  const { messages, canInterrupt, isCompacting, loading, currentModel } = workspaceState;
 
   // Get active stream message ID for token counting
   const activeStreamMessageId = aggregator.getActiveStreamMessageId();
@@ -426,147 +424,143 @@ const AIViewInner: React.FC<AIViewProps> = ({
   }
 
   return (
-    <ChatProvider messages={messages} cmuxMessages={cmuxMessages} model={currentModel ?? "unknown"}>
-      <ViewContainer className={className}>
-        <ChatArea ref={chatAreaRef}>
-          <ViewHeader>
-            <WorkspaceTitle>
-              <StatusIndicator
-                streaming={canInterrupt}
-                title={
-                  canInterrupt && currentModel ? `${getModelName(currentModel)} streaming` : "Idle"
+    <ViewContainer className={className}>
+      <ChatArea ref={chatAreaRef}>
+        <ViewHeader>
+          <WorkspaceTitle>
+            <StatusIndicator
+              streaming={canInterrupt}
+              title={
+                canInterrupt && currentModel ? `${getModelName(currentModel)} streaming` : "Idle"
+              }
+            />
+            <GitStatusIndicator
+              gitStatus={gitStatus}
+              workspaceId={workspaceId}
+              tooltipPosition="bottom"
+            />
+            {projectName} / {branch}
+            <WorkspacePath>{namedWorkspacePath}</WorkspacePath>
+            <TooltipWrapper inline>
+              <TerminalIconButton onClick={handleOpenTerminal}>
+                <svg viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25H1.75zM7.25 8a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 01-1.06-1.06L5.44 8 3.72 6.28a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm1.5 1.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z" />
+                </svg>
+              </TerminalIconButton>
+              <Tooltip className="tooltip" position="bottom" align="center">
+                Open in terminal ({formatKeybind(KEYBINDS.OPEN_TERMINAL)})
+              </Tooltip>
+            </TooltipWrapper>
+          </WorkspaceTitle>
+        </ViewHeader>
+
+        <OutputContainer>
+          <OutputContent
+            ref={contentRef}
+            onWheel={markUserInteraction}
+            onTouchMove={markUserInteraction}
+            onScroll={handleScroll}
+            role="log"
+            aria-live={canInterrupt ? "polite" : "off"}
+            aria-busy={canInterrupt}
+            aria-label="Conversation transcript"
+            tabIndex={0}
+          >
+            {mergedMessages.length === 0 ? (
+              <EmptyState>
+                <h3>No Messages Yet</h3>
+                <p>Send a message below to begin</p>
+              </EmptyState>
+            ) : (
+              <>
+                {mergedMessages.map((msg) => {
+                  const isAtCutoff =
+                    editCutoffHistoryId !== undefined &&
+                    msg.type !== "history-hidden" &&
+                    msg.historyId === editCutoffHistoryId;
+
+                  return (
+                    <React.Fragment key={msg.id}>
+                      <div
+                        data-message-id={msg.type !== "history-hidden" ? msg.historyId : undefined}
+                      >
+                        <MessageRenderer
+                          message={msg}
+                          onEditUserMessage={handleEditUserMessage}
+                          workspaceId={workspaceId}
+                          isCompacting={isCompacting}
+                        />
+                      </div>
+                      {isAtCutoff && (
+                        <EditBarrier>
+                          ⚠️ Messages below this line will be removed when you submit the edit
+                        </EditBarrier>
+                      )}
+                      {shouldShowInterruptedBarrier(msg) && <InterruptedBarrier />}
+                    </React.Fragment>
+                  );
+                })}
+                {/* Show RetryBarrier after the last message if needed */}
+                {showRetryBarrier && (
+                  <RetryBarrier
+                    workspaceId={workspaceId}
+                    autoRetry={autoRetry}
+                    onStopAutoRetry={() => setAutoRetry(false)}
+                    onResetAutoRetry={() => setAutoRetry(true)}
+                  />
+                )}
+              </>
+            )}
+            <PinnedTodoList workspaceId={workspaceId} />
+            {canInterrupt && (
+              <StreamingBarrier
+                statusText={
+                  isCompacting
+                    ? currentModel
+                      ? `${getModelName(currentModel)} compacting...`
+                      : "compacting..."
+                    : currentModel
+                      ? `${getModelName(currentModel)} streaming...`
+                      : "streaming..."
+                }
+                cancelText={`hit ${formatKeybind(KEYBINDS.INTERRUPT_STREAM)} to cancel`}
+                tokenCount={
+                  activeStreamMessageId
+                    ? aggregator.getStreamingTokenCount(activeStreamMessageId)
+                    : undefined
+                }
+                tps={
+                  activeStreamMessageId
+                    ? aggregator.getStreamingTPS(activeStreamMessageId)
+                    : undefined
                 }
               />
-              <GitStatusIndicator
-                gitStatus={gitStatus}
-                workspaceId={workspaceId}
-                tooltipPosition="bottom"
-              />
-              {projectName} / {branch}
-              <WorkspacePath>{namedWorkspacePath}</WorkspacePath>
-              <TooltipWrapper inline>
-                <TerminalIconButton onClick={handleOpenTerminal}>
-                  <svg viewBox="0 0 16 16" fill="currentColor">
-                    <path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25H1.75zM7.25 8a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 01-1.06-1.06L5.44 8 3.72 6.28a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm1.5 1.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z" />
-                  </svg>
-                </TerminalIconButton>
-                <Tooltip className="tooltip" position="bottom" align="center">
-                  Open in terminal ({formatKeybind(KEYBINDS.OPEN_TERMINAL)})
-                </Tooltip>
-              </TooltipWrapper>
-            </WorkspaceTitle>
-          </ViewHeader>
-
-          <OutputContainer>
-            <OutputContent
-              ref={contentRef}
-              onWheel={markUserInteraction}
-              onTouchMove={markUserInteraction}
-              onScroll={handleScroll}
-              role="log"
-              aria-live={canInterrupt ? "polite" : "off"}
-              aria-busy={canInterrupt}
-              aria-label="Conversation transcript"
-              tabIndex={0}
-            >
-              {mergedMessages.length === 0 ? (
-                <EmptyState>
-                  <h3>No Messages Yet</h3>
-                  <p>Send a message below to begin</p>
-                </EmptyState>
-              ) : (
-                <>
-                  {mergedMessages.map((msg) => {
-                    const isAtCutoff =
-                      editCutoffHistoryId !== undefined &&
-                      msg.type !== "history-hidden" &&
-                      msg.historyId === editCutoffHistoryId;
-
-                    return (
-                      <React.Fragment key={msg.id}>
-                        <div
-                          data-message-id={
-                            msg.type !== "history-hidden" ? msg.historyId : undefined
-                          }
-                        >
-                          <MessageRenderer
-                            message={msg}
-                            onEditUserMessage={handleEditUserMessage}
-                            workspaceId={workspaceId}
-                            isCompacting={isCompacting}
-                          />
-                        </div>
-                        {isAtCutoff && (
-                          <EditBarrier>
-                            ⚠️ Messages below this line will be removed when you submit the edit
-                          </EditBarrier>
-                        )}
-                        {shouldShowInterruptedBarrier(msg) && <InterruptedBarrier />}
-                      </React.Fragment>
-                    );
-                  })}
-                  {/* Show RetryBarrier after the last message if needed */}
-                  {showRetryBarrier && (
-                    <RetryBarrier
-                      workspaceId={workspaceId}
-                      autoRetry={autoRetry}
-                      onStopAutoRetry={() => setAutoRetry(false)}
-                      onResetAutoRetry={() => setAutoRetry(true)}
-                    />
-                  )}
-                </>
-              )}
-              <PinnedTodoList workspaceId={workspaceId} />
-              {canInterrupt && (
-                <StreamingBarrier
-                  statusText={
-                    isCompacting
-                      ? currentModel
-                        ? `${getModelName(currentModel)} compacting...`
-                        : "compacting..."
-                      : currentModel
-                        ? `${getModelName(currentModel)} streaming...`
-                        : "streaming..."
-                  }
-                  cancelText={`hit ${formatKeybind(KEYBINDS.INTERRUPT_STREAM)} to cancel`}
-                  tokenCount={
-                    activeStreamMessageId
-                      ? aggregator.getStreamingTokenCount(activeStreamMessageId)
-                      : undefined
-                  }
-                  tps={
-                    activeStreamMessageId
-                      ? aggregator.getStreamingTPS(activeStreamMessageId)
-                      : undefined
-                  }
-                />
-              )}
-            </OutputContent>
-            {!autoScroll && (
-              <JumpToBottomIndicator onClick={jumpToBottom} type="button">
-                Press {formatKeybind(KEYBINDS.JUMP_TO_BOTTOM)} to jump to bottom
-              </JumpToBottomIndicator>
             )}
-          </OutputContainer>
-
-          <ChatInput
-            workspaceId={workspaceId}
-            onMessageSent={handleMessageSent}
-            onTruncateHistory={handleClearHistory}
-            onProviderConfig={handleProviderConfig}
-            disabled={!projectName || !branch}
-            isCompacting={isCompacting}
-            editingMessage={editingMessage}
-            onCancelEdit={handleCancelEdit}
-            onEditLastUserMessage={handleEditLastUserMessage}
-            canInterrupt={canInterrupt}
-            onReady={handleChatInputReady}
-          />
-        </ChatArea>
-
-        <ChatMetaSidebar workspaceId={workspaceId} chatAreaRef={chatAreaRef} />
-      </ViewContainer>
-    </ChatProvider>
+          </OutputContent>
+          {!autoScroll && (
+            <JumpToBottomIndicator onClick={jumpToBottom} type="button">
+              Press {formatKeybind(KEYBINDS.JUMP_TO_BOTTOM)} to jump to bottom
+            </JumpToBottomIndicator>
+          )}
+        </OutputContainer>
+
+        <ChatInput
+          workspaceId={workspaceId}
+          onMessageSent={handleMessageSent}
+          onTruncateHistory={handleClearHistory}
+          onProviderConfig={handleProviderConfig}
+          disabled={!projectName || !branch}
+          isCompacting={isCompacting}
+          editingMessage={editingMessage}
+          onCancelEdit={handleCancelEdit}
+          onEditLastUserMessage={handleEditLastUserMessage}
+          canInterrupt={canInterrupt}
+          onReady={handleChatInputReady}
+        />
+      </ChatArea>
+
+      <ChatMetaSidebar workspaceId={workspaceId} chatAreaRef={chatAreaRef} />
+    </ViewContainer>
   );
 };
 

src/components/ChatMetaSidebar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import { usePersistedState } from "@/hooks/usePersistedState";
-import { useChatContext } from "@/contexts/ChatContext";
+import { useWorkspaceUsage } from "@/stores/WorkspaceStore";
 import { use1MContext } from "@/hooks/use1MContext";
 import { useResizeObserver } from "@/hooks/useResizeObserver";
 import { CostsTab } from "./ChatMetaSidebar/CostsTab";
@@ -87,13 +87,13 @@ interface ChatMetaSidebarProps {
   chatAreaRef: React.RefObject<HTMLDivElement>;
 }
 
-export const ChatMetaSidebar: React.FC<ChatMetaSidebarProps> = ({ workspaceId, chatAreaRef }) => {
+const ChatMetaSidebarComponent: React.FC<ChatMetaSidebarProps> = ({ workspaceId, chatAreaRef }) => {
   const [selectedTab, setSelectedTab] = usePersistedState<TabType>(
     `chat-meta-sidebar-tab:${workspaceId}`,
     "costs"
   );
 
-  const { stats } = useChatContext();
+  const usage = useWorkspaceUsage(workspaceId);
   const [use1M] = use1MContext();
   const chatAreaSize = useResizeObserver(chatAreaRef);
 
@@ -103,14 +103,16 @@ export const ChatMetaSidebar: React.FC<ChatMetaSidebarProps> = ({ workspaceId, c
   const costsPanelId = `${baseId}-panel-costs`;
   const toolsPanelId = `${baseId}-panel-tools`;
 
-  const lastUsage = stats?.usageHistory[stats.usageHistory.length - 1];
+  const lastUsage = usage?.usageHistory[usage.usageHistory.length - 1];
 
   // Memoize vertical meter data calculation to prevent unnecessary re-renders
   const verticalMeterData = React.useMemo(() => {
-    return lastUsage && stats
-      ? calculateTokenMeterData(lastUsage, stats.model, use1M, true)
+    // Get model from last usage
+    const model = lastUsage?.model ?? "unknown";
+    return lastUsage
+      ? calculateTokenMeterData(lastUsage, model, use1M, true)
       : { segments: [], totalTokens: 0, totalPercentage: 0 };
-  }, [lastUsage, stats, use1M]);
+  }, [lastUsage, use1M]);
 
   // Calculate if we should show collapsed view with hysteresis
   // Strategy: Observe ChatArea width directly (independent of sidebar width)
@@ -168,7 +170,7 @@ export const ChatMetaSidebar: React.FC<ChatMetaSidebarProps> = ({ workspaceId, c
         <TabContent>
           {selectedTab === "costs" && (
             <div role="tabpanel" id={costsPanelId} aria-labelledby={costsTabId}>
-              <CostsTab />
+              <CostsTab workspaceId={workspaceId} />
             </div>
           )}
           {selectedTab === "tools" && (
@@ -184,3 +186,7 @@ export const ChatMetaSidebar: React.FC<ChatMetaSidebarProps> = ({ workspaceId, c
     </SidebarContainer>
   );
 };
+
+// Memoize to prevent re-renders when parent (AIView) re-renders during streaming
+// Only re-renders when workspaceId or chatAreaRef changes, or internal state updates
+export const ChatMetaSidebar = React.memo(ChatMetaSidebarComponent);