🤖 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/AIView.tsx

@@ -797,7 +797,6 @@ const AIViewInner: React.FC<AIViewProps> = ({
         key={workspaceId}
         workspaceId={workspaceId}
         workspacePath={namedWorkspacePath}
-        chatAreaRef={chatAreaRef}
         width={sidebarWidth}
         onStartResize={startResize}
         isResizing={isResizing}

src/browser/components/ChatMetaSidebar.tsx

@@ -2,16 +2,11 @@ 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";
@@ -34,7 +29,7 @@ function formatTabDuration(ms: number): string {
 }
 
 interface SidebarContainerProps {
-  collapsed: boolean;
+  collapsed?: boolean;
   wide?: boolean;
   /** Custom width from drag-resize (persisted per-tab by AIView) */
   customWidth?: number;
@@ -49,7 +44,7 @@ interface SidebarContainerProps {
  * SidebarContainer - Main sidebar wrapper with dynamic width
  *
  * Width priority (first match wins):
- * 1. collapsed (20px) - Shows vertical token meter only
+ * 1. collapsed (20px) - Manual collapse via toggle
  * 2. customWidth - From drag-resize (persisted per-tab)
  * 3. wide - Auto-calculated max width for Review tab (when not drag-resizing)
  * 4. default (300px) - Costs tab when no customWidth saved
@@ -64,7 +59,7 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
   "aria-label": ariaLabel,
 }) => {
   const width = collapsed
-    ? "20px"
+    ? "32px" // Match left sidebar collapsed width (w-8 = 32px)
     : customWidth
       ? `${customWidth}px`
       : wide
@@ -76,8 +71,6 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
       className={cn(
         "bg-sidebar border-l border-border-light flex flex-col overflow-hidden flex-shrink-0",
         !isResizing && "transition-[width] duration-200",
-        collapsed && "sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]",
-        // Mobile: Show vertical meter when collapsed (20px), full width when expanded
         "max-md:border-l-0 max-md:border-t max-md:border-border-light",
         !collapsed && "max-md:w-full max-md:relative max-md:max-h-[50vh]"
       )}
@@ -97,7 +90,6 @@ export type { TabType };
 interface RightSidebarProps {
   workspaceId: string;
   workspacePath: string;
-  chatAreaRef: React.RefObject<HTMLDivElement>;
   /** Custom width in pixels (persisted per-tab, provided by AIView) */
   width?: number;
   /** Drag start handler for resize */
@@ -113,7 +105,6 @@ interface RightSidebarProps {
 const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   workspaceId,
   workspacePath,
-  chatAreaRef,
   width,
   onStartResize,
   isResizing = false,
@@ -123,6 +114,9 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   // Global tab preference (not per-workspace)
   const [selectedTab, setSelectedTab] = usePersistedState<TabType>(RIGHT_SIDEBAR_TAB_KEY, "costs");
 
+  // Manual collapse state (persisted globally)
+  const [collapsed, setCollapsed] = usePersistedState<boolean>(RIGHT_SIDEBAR_COLLAPSED_KEY, false);
+
   const { statsTabState } = useFeatureFlags();
   const statsTabEnabled = Boolean(statsTabState?.enabled);
 
@@ -160,10 +154,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}`;
   const costsTabId = `${baseId}-tab-costs`;
   const statsTabId = `${baseId}-tab-stats`;
@@ -172,10 +162,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,90 +192,17 @@ 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
-  // - Use hysteresis to prevent oscillation:
-  //   * Collapse when chatAreaWidth <= 800px (tight space)
-  //   * Expand when chatAreaWidth >= 1100px (lots of space)
-  //   * Between 800-1100: maintain current state (dead zone)
-  const COLLAPSE_THRESHOLD = 800; // Collapse below this
-  const EXPAND_THRESHOLD = 1100; // Expand above this
-  const chatAreaWidth = chatAreaSize?.width ?? 1000; // Default to large to avoid flash
-
-  // Persist collapsed state globally (not per-workspace) since chat area width is shared
-  // This prevents animation flash when switching workspaces - sidebar maintains its state
-  const [showCollapsed, setShowCollapsed] = usePersistedState<boolean>(
-    RIGHT_SIDEBAR_COLLAPSED_KEY,
-    false
-  );
-
-  React.useEffect(() => {
-    // Never collapse when Review tab is active - code review needs space
-    if (selectedTab === "review") {
-      if (showCollapsed) {
-        setShowCollapsed(false);
-      }
-      return;
-    }
-
-    // If the sidebar is custom-resized (wider than the default Costs width),
-    // auto-collapse based on chatAreaWidth can oscillate between expanded and
-    // collapsed states (because collapsed is 20px but expanded can be much wider),
-    // which looks like a constant flash. In that case, keep it expanded and let
-    // the user resize manually.
-    if (width !== undefined && width > 300) {
-      if (showCollapsed) {
-        setShowCollapsed(false);
-      }
-      return;
-    }
-
-    // Normal hysteresis for Costs/Tools tabs
-    if (chatAreaWidth <= COLLAPSE_THRESHOLD) {
-      setShowCollapsed(true);
-    } else if (chatAreaWidth >= EXPAND_THRESHOLD) {
-      setShowCollapsed(false);
-    }
-    // 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}
+      collapsed={collapsed}
       wide={selectedTab === "review" && !width} // Auto-wide only if not drag-resizing
       customWidth={width} // Per-tab resized width from AIView
       isResizing={isResizing}
       role="complementary"
       aria-label="Workspace insights"
     >
       {/* Full view when not collapsed */}
-      <div className={cn("flex-row h-full", !showCollapsed ? "flex" : "hidden")}>
+      <div className={cn("flex h-full flex-row", collapsed && "hidden")}>
         {/* Resize handle (left edge) */}
         {onStartResize && (
           <div
@@ -301,11 +214,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 +350,22 @@ 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>
+
+      {/* Collapse/expand toggle at bottom - matches left sidebar pattern */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={() => setCollapsed(!collapsed)}
+            aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+            className="text-muted border-dark hover:bg-hover hover:text-foreground mt-auto flex h-9 w-full cursor-pointer items-center justify-center border-t border-none bg-transparent p-0 text-sm transition-all duration-200"
+          >
+            {collapsed ? "«" : "»"}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent align="center">
+          {collapsed ? "Expand sidebar" : "Collapse sidebar"}
+        </TooltipContent>
+      </Tooltip>
     </SidebarContainer>
   );
 };