Refactor: Clean up chart components state and styles

Author: dlab-anton

webview-ui/src/components/chat/CostTrendChart.tsx

@@ -160,7 +160,7 @@ const CostTrendChart: React.FC<CostTrendChartProps> = ({
 					},
 					ticks: {
 						show: showXAxis,
-						stroke: resolvedStyles.widgetBorder,
+						stroke: resolvedStyles.tabsBorder, // Use grid color for ticks
 						width: 1 / (window.devicePixelRatio || 1),
 						size: 10,
 					},
@@ -189,7 +189,7 @@ const CostTrendChart: React.FC<CostTrendChartProps> = ({
 					},
 					ticks: {
 						show: showYAxis,
-						stroke: resolvedStyles.widgetBorder,
+						stroke: resolvedStyles.tabsBorder, // Use grid color for ticks
 						width: 1 / (window.devicePixelRatio || 1),
 						size: 10,
 					},

webview-ui/src/components/chat/TaskCostChartSection.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo, useRef, useEffect } from "react"
+import React, { useState, useCallback, useMemo, useRef } from "react"
 import { useTranslation } from "react-i18next"
 import CostTrendChart from "./CostTrendChart"
 import {} from "@src/components/ui"
@@ -19,8 +19,6 @@ interface TaskCostChartSectionProps {
 
 export type ChartType = "costDelta" | "cumulativeCost" | "tokensIn" | "tokensOut" | "gridView"
 
-const NARROW_THRESHOLD_PX = 300
-
 const TaskCostChartSection: React.FC<TaskCostChartSectionProps> = ({ costHistory }) => {
 	const { t } = useTranslation()
 	const [selectedChartType, setSelectedChartType] = useState<ChartType>("gridView")
@@ -31,30 +29,8 @@ const TaskCostChartSection: React.FC<TaskCostChartSectionProps> = ({ costHistory
 		value?: number
 		type?: ChartType
 	} | null>(null)
-	const [_isNarrow, setIsNarrow] = useState(false)
 	const gridContainerRef = useRef<HTMLDivElement>(null)
 
-	useEffect(() => {
-		const container = gridContainerRef.current
-		if (!container) return
-
-		const observer = new ResizeObserver((entries) => {
-			for (let entry of entries) {
-				const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width
-				setIsNarrow(width < NARROW_THRESHOLD_PX)
-			}
-		})
-
-		observer.observe(container)
-
-		const initialWidth = container.getBoundingClientRect().width
-		setIsNarrow(initialWidth < NARROW_THRESHOLD_PX)
-
-		return () => {
-			observer.disconnect()
-		}
-	}, [selectedChartType])
-
 	const handleChartHoverChange = useCallback(
 		(
 			hoverData: { isHovering: boolean; index?: number; yValue?: number } | null,