🤖 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

@@ -51,7 +51,7 @@ export function LeftSidebar(props: LeftSidebarProps) {
         className={cn(
           "h-screen bg-sidebar border-r border-border flex flex-col shrink-0",
           "transition-all duration-200 overflow-hidden relative z-20",
-          collapsed ? "w-8" : "w-72",
+          collapsed ? "w-5" : "w-72",
           "mobile-sidebar",
           collapsed && "mobile-sidebar-collapsed"
         )}

src/browser/components/LeftSidebar.tsx

@@ -19,6 +19,7 @@ import {
   AGE_THRESHOLDS_DAYS,
 } from "@/browser/utils/ui/workspaceFiltering";
 import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
+import { SidebarCollapseButton } from "./ui/SidebarCollapseButton";
 import SecretsModal from "./SecretsModal";
 import type { Secret } from "@/common/types/secrets";
 import { ForceDeleteModal } from "./ForceDeleteModal";
@@ -714,21 +715,12 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
               </div>
             </>
           )}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={onToggleCollapsed}
-                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"} (
-              {formatKeybind(KEYBINDS.TOGGLE_SIDEBAR)})
-            </TooltipContent>
-          </Tooltip>
+          <SidebarCollapseButton
+            collapsed={collapsed}
+            onToggle={onToggleCollapsed}
+            side="left"
+            shortcut={formatKeybind(KEYBINDS.TOGGLE_SIDEBAR)}
+          />
           {secretsModalState && (
             <SecretsModal
               isOpen={secretsModalState.isOpen}

src/browser/components/ProjectSidebar.tsx

@@ -2,19 +2,15 @@ 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";
+import { SidebarCollapseButton } from "./ui/SidebarCollapseButton";
 import { cn } from "@/common/lib/utils";
 import type { ReviewNoteData } from "@/common/types/review";
 
@@ -34,7 +30,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 +45,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 +60,7 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
   "aria-label": ariaLabel,
 }) => {
   const width = collapsed
-    ? "20px"
+    ? "20px" // Match left sidebar collapsed width (w-5 = 20px)
     : customWidth
       ? `${customWidth}px`
       : wide
@@ -74,10 +70,8 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
   return (
     <div
       className={cn(
-        "bg-sidebar border-l border-border-light flex flex-col overflow-hidden flex-shrink-0",
+        "bg-sidebar border-l border-border-light relative 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 +91,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 +106,6 @@ interface RightSidebarProps {
 const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   workspaceId,
   workspacePath,
-  chatAreaRef,
   width,
   onStartResize,
   isResizing = false,
@@ -123,6 +115,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 +155,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 +163,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,109 +193,30 @@ 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")}>
-        {/* Resize handle (left edge) */}
-        {onStartResize && (
-          <div
-            className={cn(
-              "w-0.5 flex-shrink-0 z-10 transition-[background] duration-150 cursor-col-resize",
-              isResizing ? "bg-accent" : "bg-border-light hover:bg-accent"
-            )}
-            onMouseDown={(e) => onStartResize(e as unknown as React.MouseEvent)}
-          />
-        )}
+      {!collapsed && (
+        <>
+          {/* Resize handle (left edge) */}
+          {onStartResize && (
+            <div
+              className={cn(
+                "absolute left-0 top-0 bottom-0 w-0.5 z-10 transition-[background] duration-150 cursor-col-resize",
+                isResizing ? "bg-accent" : "bg-border-light hover:bg-accent"
+              )}
+              onMouseDown={(e) => onStartResize(e as unknown as React.MouseEvent)}
+            />
+          )}
 
-        {/* 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"
+            className="border-border-light flex h-8 shrink-0 items-center gap-1 border-b px-2"
             role="tablist"
             aria-label="Metadata views"
           >
@@ -440,10 +348,14 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
               </div>
             )}
           </div>
-        </div>
-      </div>
-      {/* Render meter in collapsed view when sidebar is collapsed */}
-      <div className={cn("h-full", showCollapsed ? "flex" : "hidden")}>{verticalMeter}</div>
+        </>
+      )}
+
+      <SidebarCollapseButton
+        collapsed={collapsed}
+        onToggle={() => setCollapsed(!collapsed)}
+        side="right"
+      />
     </SidebarContainer>
   );
 };