🤖 refactor: remove VerticalTokenMeter component

Now that we have the context usage indicator in the chat area,
the VerticalTokenMeter in the right sidebar is no longer needed.

Removed:
- VerticalTokenMeter.tsx component
- ChatMetaSidebar.tsx (only existed to show the meter when collapsed)
- Related imports and usage in RightSidebar.tsx

-229 lines

Author: ammar-agent

src/browser/components/ChatMetaSidebar.tsx

@@ -2,16 +2,12 @@ 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, useWorkspaceStatsSnapshot } from "@/browser/stores/WorkspaceStore";
-import { useProviderOptions } from "@/browser/hooks/useProviderOptions";
 import { useResizeObserver } from "@/browser/hooks/useResizeObserver";
 import { useFeatureFlags } from "@/browser/contexts/FeatureFlagsContext";
-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";
 import { sumUsageHistory, type ChatUsageDisplay } from "@/common/utils/tokens/usageAggregator";
 import { matchesKeybind, KEYBINDS, formatKeybind } from "@/browser/utils/ui/keybinds";
 import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
@@ -160,8 +156,6 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
 
   const usage = useWorkspaceUsage(workspaceId);
 
-  const { options } = useProviderOptions();
-  const use1M = options.anthropic?.use1MContext ?? false;
   const chatAreaSize = useResizeObserver(chatAreaRef);
 
   const baseId = `right-sidebar-${workspaceId}`;
@@ -172,10 +166,6 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   const statsPanelId = `${baseId}-panel-stats`;
   const reviewPanelId = `${baseId}-panel-review`;
 
-  // Use lastContextUsage for context window display (last step = actual context size)
-  const lastUsage = usage?.liveUsage ?? usage?.lastContextUsage;
-  const model = lastUsage?.model ?? null;
-
   // Calculate session cost for tab display
   const sessionCost = React.useMemo(() => {
     const parts: ChatUsageDisplay[] = [];
@@ -206,17 +196,6 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
     return total > 0 ? total : null;
   })();
 
-  // Auto-compaction settings: threshold per-model
-  const { threshold: autoCompactThreshold, setThreshold: setAutoCompactThreshold } =
-    useAutoCompactionSettings(workspaceId, model);
-
-  // Memoize vertical meter data calculation to prevent unnecessary re-renders
-  const verticalMeterData = React.useMemo(() => {
-    return lastUsage
-      ? calculateTokenMeterData(lastUsage, model ?? "unknown", use1M, true)
-      : { segments: [], totalTokens: 0, totalPercentage: 0 };
-  }, [lastUsage, model, use1M]);
-
   // Calculate if we should show collapsed view with hysteresis
   // Strategy: Observe ChatArea width directly (independent of sidebar width)
   // - ChatArea has min-width: 750px and flex: 1
@@ -265,20 +244,6 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
     // Between thresholds: maintain current state (no change)
   }, [chatAreaWidth, selectedTab, showCollapsed, setShowCollapsed, width]);
 
-  // Single render point for VerticalTokenMeter
-  // Shows when: (1) collapsed, OR (2) Review tab is active
-  const showMeter = showCollapsed || selectedTab === "review";
-  const autoCompactionProps = React.useMemo(
-    () => ({
-      threshold: autoCompactThreshold,
-      setThreshold: setAutoCompactThreshold,
-    }),
-    [autoCompactThreshold, setAutoCompactThreshold]
-  );
-  const verticalMeter = showMeter ? (
-    <VerticalTokenMeter data={verticalMeterData} autoCompaction={autoCompactionProps} />
-  ) : null;
-
   return (
     <SidebarContainer
       collapsed={showCollapsed}
@@ -301,11 +266,6 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
           />
         )}
 
-        {/* Render meter when Review tab is active */}
-        {selectedTab === "review" && (
-          <div className="bg-sidebar flex w-5 shrink-0 flex-col">{verticalMeter}</div>
-        )}
-
         <div className="flex min-w-0 flex-1 flex-col">
           <div
             className="border-border-light flex gap-1 border-b px-2 py-1.5"
@@ -442,8 +402,6 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
           </div>
         </div>
       </div>
-      {/* Render meter in collapsed view when sidebar is collapsed */}
-      <div className={cn("h-full", showCollapsed ? "flex" : "hidden")}>{verticalMeter}</div>
     </SidebarContainer>
   );
 };