🤖 feat: add timing stats indicator in workspace sidebar

src/browser/App.tsx

@@ -407,6 +407,7 @@ function AppInner() {
     onToggleTheme: toggleTheme,
     onSetTheme: setThemePreference,
     onOpenSettings: openSettings,
+    onClearTimingStats: (workspaceId: string) => workspaceStore.clearTimingStats(workspaceId),
     api,
   };
 

src/browser/components/AIView.tsx

@@ -105,7 +105,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,

src/browser/components/RightSidebar.tsx

@@ -1,11 +1,14 @@
 import React from "react";
 import { RIGHT_SIDEBAR_TAB_KEY, RIGHT_SIDEBAR_COLLAPSED_KEY } from "@/common/constants/storage";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
-import { useWorkspaceUsage } from "@/browser/stores/WorkspaceStore";
+import { useWorkspaceUsage, useWorkspaceSidebarState } from "@/browser/stores/WorkspaceStore";
 import { useProviderOptions } from "@/browser/hooks/useProviderOptions";
 import { useResizeObserver } from "@/browser/hooks/useResizeObserver";
+import { useLiveTimer } from "@/browser/hooks/useLiveTimer";
 import { useAutoCompactionSettings } from "@/browser/hooks/useAutoCompactionSettings";
+import { ErrorBoundary } from "./ErrorBoundary";
 import { CostsTab } from "./RightSidebar/CostsTab";
+import { StatsTab } from "./RightSidebar/StatsTab";
 import { VerticalTokenMeter } from "./RightSidebar/VerticalTokenMeter";
 import { ReviewPanel } from "./RightSidebar/CodeReview/ReviewPanel";
 import { calculateTokenMeterData } from "@/common/utils/tokens/tokenMeterUtils";
@@ -21,6 +24,15 @@ export interface ReviewStats {
   read: number;
 }
 
+/** Format duration for tab display (compact format) */
+function formatTabDuration(ms: number): string {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60000) return `${Math.round(ms / 1000)}s`;
+  const mins = Math.floor(ms / 60000);
+  const secs = Math.round((ms % 60000) / 1000);
+  return secs > 0 ? `${mins}m${secs}s` : `${mins}m`;
+}
+
 interface SidebarContainerProps {
   collapsed: boolean;
   wide?: boolean;
@@ -78,7 +90,7 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
   );
 };
 
-type TabType = "costs" | "review";
+type TabType = "costs" | "stats" | "review";
 
 export type { TabType };
 
@@ -127,6 +139,9 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
         e.preventDefault();
         setSelectedTab("review");
         setFocusTrigger((prev) => prev + 1);
+      } else if (matchesKeybind(e, KEYBINDS.STATS_TAB)) {
+        e.preventDefault();
+        setSelectedTab("stats");
       }
     };
 
@@ -141,8 +156,10 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
 
   const baseId = `right-sidebar-${workspaceId}`;
   const costsTabId = `${baseId}-tab-costs`;
+  const statsTabId = `${baseId}-tab-stats`;
   const reviewTabId = `${baseId}-tab-review`;
   const costsPanelId = `${baseId}-panel-costs`;
+  const statsPanelId = `${baseId}-panel-stats`;
   const reviewPanelId = `${baseId}-panel-review`;
 
   // Use lastContextUsage for context window display (last step = actual context size)
@@ -169,6 +186,21 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
     return total > 0 ? total : null;
   }, [usage.sessionTotal, usage.liveCostUsage]);
 
+  // Get timing stats for tab display
+  const { timingStats, sessionStats } = useWorkspaceSidebarState(workspaceId);
+
+  // Live timer for active streams (updates tab title every second)
+  const now = useLiveTimer(Boolean(timingStats?.isActive));
+
+  const sessionDuration = React.useMemo(() => {
+    // Include active stream duration if present
+    const baseDuration = sessionStats?.totalDurationMs ?? 0;
+    if (timingStats?.isActive) {
+      return baseDuration + (now - timingStats.startTime);
+    }
+    return baseDuration > 0 ? baseDuration : null;
+  }, [sessionStats?.totalDurationMs, timingStats?.isActive, timingStats?.startTime, now]);
+
   // Auto-compaction settings: threshold per-model
   const { threshold: autoCompactThreshold, setThreshold: setAutoCompactThreshold } =
     useAutoCompactionSettings(workspaceId, model);
@@ -338,6 +370,34 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
                 {formatKeybind(KEYBINDS.REVIEW_TAB)}
               </TooltipContent>
             </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  className={cn(
+                    "rounded-md px-3 py-1 text-xs font-medium transition-all duration-150 flex items-baseline gap-1.5",
+                    selectedTab === "stats"
+                      ? "bg-hover text-foreground"
+                      : "bg-transparent text-muted hover:bg-hover/50 hover:text-foreground"
+                  )}
+                  onClick={() => setSelectedTab("stats")}
+                  id={statsTabId}
+                  role="tab"
+                  type="button"
+                  aria-selected={selectedTab === "stats"}
+                  aria-controls={statsPanelId}
+                >
+                  Stats
+                  {sessionDuration !== null && (
+                    <span className="text-muted text-[10px]">
+                      {formatTabDuration(sessionDuration)}
+                    </span>
+                  )}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" align="center">
+                {formatKeybind(KEYBINDS.STATS_TAB)}
+              </TooltipContent>
+            </Tooltip>
           </div>
           <div
             className={cn("flex-1 overflow-y-auto", selectedTab === "review" ? "p-0" : "p-[15px]")}
@@ -365,6 +425,13 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
                 />
               </div>
             )}
+            {selectedTab === "stats" && (
+              <div role="tabpanel" id={statsPanelId} aria-labelledby={statsTabId}>
+                <ErrorBoundary workspaceInfo="Stats tab">
+                  <StatsTab workspaceId={workspaceId} now={now} />
+                </ErrorBoundary>
+              </div>
+            )}
           </div>
         </div>
       </div>