🤖 feat: add timing stats indicator in workspace sidebar (#1177)

Add a new **Stats** tab in the right sidebar that displays timing
statistics for streaming sessions. The tab shows elapsed time, time to
first token (TTFT), model inference time, and tool execution duration.

## Features

- **Stats tab in right sidebar** - New tab after Review with keyboard
shortcut `Cmd/Ctrl+3`
- **Session/Last Request toggle** - Switch between aggregate session
stats and last request details
- **Tab title shows duration** - Like Costs shows "$2.71", Stats shows
total session time (e.g., "Stats 12s")
- **Aggregated timing stats** - Progress bar + component breakdown table
- **Per-model breakdown** - Each model gets its own timing section with
mini progress bar
- **Live updates** - Timer updates every second during active streams
- **Persistent across restarts** - Session timing stats saved to
localStorage

## Screenshot

The Stats tab displays timing information in a format consistent with
the Costs tab:

```
┌─────────────────────────────────────────┐
│ Costs $2.71    Review    Stats 12s      │
├─────────────────────────────────────────┤
│ Timing ●  [Session] [Last Request]  12s │
│ 1 response                              │
│ ████████████████████░░░░░              │
│                                         │
│ Component              Duration    %    │
│ ● Avg. Time to First Token  3.1s   —   │
│ ● Model Time               9.5s   79%  │
│ ● Tool Execution           2.5s   21%  │
│                                         │
│ By Model                                │
│ Sonnet 4                   12s (1 req)  │
│ ████████████████████░░░░░              │
│ TTFT: 3.1s  Model: 9.5s  Tools: 2.5s   │
└─────────────────────────────────────────┘
```

## Implementation

- **StatsTab component** - Displays timing stats with toggle and
per-model breakdown
- **StreamingMessageAggregator** - Tracks timing data (startTime,
firstTokenTime, toolExecutionMs)
- **WorkspaceStore** - Exposes `StreamTimingStats` and
`SessionTimingStats` via sidebar state
- **localStorage persistence** - Session stats persist across app
restarts

---
_Generated with `mux`_

Signed-off-by: Thomas Kosiewski <[email protected]>

Author: ThomasK33

.storybook/mocks/orpc.ts

@@ -6,7 +6,11 @@
 import type { APIClient } from "@/browser/contexts/API";
 import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
 import type { ProjectConfig } from "@/node/config";
-import type { WorkspaceChatMessage, ProvidersConfigMap } from "@/common/orpc/types";
+import type {
+  WorkspaceChatMessage,
+  ProvidersConfigMap,
+  WorkspaceStatsSnapshot,
+} from "@/common/orpc/types";
 import type { ChatStats } from "@/common/types/chatStats";
 import { DEFAULT_RUNTIME_CONFIG } from "@/common/constants/workspace";
 import { createAsyncMessageQueue } from "@/common/utils/asyncMessageQueue";
@@ -69,6 +73,8 @@ export interface MockORPCClientOptions {
     }>
   >;
   /** Session usage data per workspace (for Costs tab) */
+  workspaceStatsSnapshots?: Map<string, WorkspaceStatsSnapshot>;
+  statsTabVariant?: "control" | "stats";
   sessionUsage?: Map<string, MockSessionUsage>;
   /** MCP server configuration per project */
   mcpServers?: Map<
@@ -112,11 +118,27 @@ export function createMockORPCClient(options: MockORPCClientOptions = {}): APICl
     onProjectRemove,
     backgroundProcesses = new Map(),
     sessionUsage = new Map(),
+    workspaceStatsSnapshots = new Map<string, WorkspaceStatsSnapshot>(),
+    statsTabVariant = "control",
     mcpServers = new Map(),
     mcpOverrides = new Map(),
     mcpTestResults = new Map(),
   } = options;
 
+  // Feature flags
+  let statsTabOverride: "default" | "on" | "off" = "default";
+
+  const getStatsTabState = () => {
+    const enabled =
+      statsTabOverride === "on"
+        ? true
+        : statsTabOverride === "off"
+          ? false
+          : statsTabVariant === "stats";
+
+    return { enabled, variant: statsTabVariant, override: statsTabOverride } as const;
+  };
+
   const workspaceMap = new Map(workspaces.map((w) => [w.id, w]));
 
   const mockStats: ChatStats = {
@@ -135,6 +157,16 @@ export function createMockORPCClient(options: MockORPCClientOptions = {}): APICl
         _input.texts.map(() => 0),
       calculateStats: async () => mockStats,
     },
+    features: {
+      getStatsTabState: async () => getStatsTabState(),
+      setStatsTabOverride: async (input: { override: "default" | "on" | "off" }) => {
+        statsTabOverride = input.override;
+        return getStatsTabState();
+      },
+    },
+    telemetry: {
+      track: async () => undefined,
+    },
     server: {
       getLaunchProject: async () => null,
       getSshHost: async () => null,
@@ -250,12 +282,12 @@ export function createMockORPCClient(options: MockORPCClientOptions = {}): APICl
       },
       onMetadata: async function* () {
         // Empty generator - no metadata updates in mock
-        await new Promise(() => {}); // Never resolves, keeps stream open
+        return;
       },
       activity: {
         list: async () => ({}),
         subscribe: async function* () {
-          await new Promise(() => {}); // Never resolves
+          return;
         },
       },
       backgroundBashes: {
@@ -271,6 +303,18 @@ export function createMockORPCClient(options: MockORPCClientOptions = {}): APICl
         terminate: async () => ({ success: true, data: undefined }),
         sendToBackground: async () => ({ success: true, data: undefined }),
       },
+      stats: {
+        subscribe: async function* (input: { workspaceId: string }) {
+          const snapshot = workspaceStatsSnapshots.get(input.workspaceId);
+          if (snapshot) {
+            yield snapshot;
+          }
+        },
+        clear: async (input: { workspaceId: string }) => {
+          workspaceStatsSnapshots.delete(input.workspaceId);
+          return { success: true, data: undefined };
+        },
+      },
       getSessionUsage: async (input: { workspaceId: string }) => sessionUsage.get(input.workspaceId),
       mcp: {
         get: async (input: { workspaceId: string }) => mcpOverrides.get(input.workspaceId) ?? {},

src/browser/App.tsx

@@ -55,6 +55,8 @@ import { SplashScreenProvider } from "./components/splashScreens/SplashScreenPro
 import { TutorialProvider } from "./contexts/TutorialContext";
 import { ConnectionStatusIndicator } from "./components/ConnectionStatusIndicator";
 import { TooltipProvider } from "./components/ui/tooltip";
+import { useFeatureFlags } from "./contexts/FeatureFlagsContext";
+import { FeatureFlagsProvider } from "./contexts/FeatureFlagsContext";
 import { ExperimentsProvider } from "./contexts/ExperimentsContext";
 import { getWorkspaceSidebarKey } from "./utils/workspace";
 
@@ -131,6 +133,11 @@ function AppInner() {
   // Get workspace store for command palette
   const workspaceStore = useWorkspaceStoreRaw();
 
+  const { statsTabState } = useFeatureFlags();
+  useEffect(() => {
+    workspaceStore.setStatsEnabled(Boolean(statsTabState?.enabled));
+  }, [workspaceStore, statsTabState?.enabled]);
+
   // Track telemetry when workspace selection changes
   const prevWorkspaceRef = useRef<WorkspaceSelection | null>(null);
   useEffect(() => {
@@ -449,6 +456,7 @@ function AppInner() {
     onToggleTheme: toggleTheme,
     onSetTheme: setThemePreference,
     onOpenSettings: openSettings,
+    onClearTimingStats: (workspaceId: string) => workspaceStore.clearTimingStats(workspaceId),
     api,
   };
 
@@ -761,17 +769,19 @@ function App() {
   return (
     <ThemeProvider>
       <ExperimentsProvider>
-        <TooltipProvider delayDuration={200}>
-          <SettingsProvider>
-            <SplashScreenProvider>
-              <TutorialProvider>
-                <CommandRegistryProvider>
-                  <AppInner />
-                </CommandRegistryProvider>
-              </TutorialProvider>
-            </SplashScreenProvider>
-          </SettingsProvider>
-        </TooltipProvider>
+        <FeatureFlagsProvider>
+          <TooltipProvider delayDuration={200}>
+            <SettingsProvider>
+              <SplashScreenProvider>
+                <TutorialProvider>
+                  <CommandRegistryProvider>
+                    <AppInner />
+                  </CommandRegistryProvider>
+                </TutorialProvider>
+              </SplashScreenProvider>
+            </SettingsProvider>
+          </TooltipProvider>
+        </FeatureFlagsProvider>
       </ExperimentsProvider>
     </ThemeProvider>
   );

src/browser/components/AIView.tsx

@@ -41,11 +41,13 @@ import { useAutoScroll } from "@/browser/hooks/useAutoScroll";
 import { useOpenTerminal } from "@/browser/hooks/useOpenTerminal";
 import { useOpenInEditor } from "@/browser/hooks/useOpenInEditor";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
+import { useFeatureFlags } from "@/browser/contexts/FeatureFlagsContext";
 import { useThinking } from "@/browser/contexts/ThinkingContext";
 import {
   useWorkspaceState,
   useWorkspaceAggregator,
   useWorkspaceUsage,
+  useWorkspaceStatsSnapshot,
 } from "@/browser/stores/WorkspaceStore";
 import { WorkspaceHeader } from "./WorkspaceHeader";
 import { getModelName } from "@/common/utils/ai/models";
@@ -106,7 +108,8 @@ const AIViewInner: React.FC<AIViewProps> = ({
 
   // Resizable RightSidebar width - separate hooks per tab for independent persistence
   const costsSidebar = useResizableSidebar({
-    enabled: selectedRightTab === "costs",
+    // Costs + Stats share the same resizable width persistence
+    enabled: selectedRightTab === "costs" || selectedRightTab === "stats",
     defaultWidth: 300,
     minWidth: 300,
     maxWidth: 1200,
@@ -127,6 +130,9 @@ const AIViewInner: React.FC<AIViewProps> = ({
   const startResize =
     selectedRightTab === "review" ? reviewSidebar.startResize : costsSidebar.startResize;
 
+  const statsSnapshot = useWorkspaceStatsSnapshot(workspaceId);
+  const { statsTabState } = useFeatureFlags();
+  const statsEnabled = Boolean(statsTabState?.enabled);
   const workspaceState = useWorkspaceState(workspaceId);
   const aggregator = useWorkspaceAggregator(workspaceId);
   const workspaceUsage = useWorkspaceUsage(workspaceId);
@@ -705,14 +711,18 @@ const AIViewInner: React.FC<AIViewProps> = ({
                     awaitingUserQuestion
                       ? undefined
                       : activeStreamMessageId
-                        ? aggregator?.getStreamingTokenCount(activeStreamMessageId)
+                        ? statsEnabled && statsSnapshot?.active?.messageId === activeStreamMessageId
+                          ? statsSnapshot.active.liveTokenCount
+                          : aggregator?.getStreamingTokenCount(activeStreamMessageId)
                         : undefined
                   }
                   tps={
                     awaitingUserQuestion
                       ? undefined
                       : activeStreamMessageId
-                        ? aggregator?.getStreamingTPS(activeStreamMessageId)
+                        ? statsEnabled && statsSnapshot?.active?.messageId === activeStreamMessageId
+                          ? statsSnapshot.active.liveTPS
+                          : aggregator?.getStreamingTPS(activeStreamMessageId)
                         : undefined
                   }
                 />