diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx
index 6b33a9b7f7..332ef18511 100644
--- a/webview-ui/src/App.tsx
+++ b/webview-ui/src/App.tsx
@@ -20,6 +20,8 @@ import ModesView from "./components/modes/ModesView"
import { HumanRelayDialog } from "./components/human-relay/HumanRelayDialog"
import { AccountView } from "./components/account/AccountView"
import { useAddNonInteractiveClickListener } from "./components/ui/hooks/useNonInteractiveClick"
+import { TooltipProvider } from "./components/ui/tooltip"
+import { STANDARD_TOOLTIP_DELAY } from "./components/ui/standard-tooltip"
type Tab = "settings" | "history" | "mcp" | "modes" | "chat" | "marketplace" | "account"
@@ -215,7 +217,9 @@ const AppWithProviders = () => (
-
+
+
+
diff --git a/webview-ui/src/__tests__/App.spec.tsx b/webview-ui/src/__tests__/App.spec.tsx
index d4e8b26818..2c55d1cf07 100644
--- a/webview-ui/src/__tests__/App.spec.tsx
+++ b/webview-ui/src/__tests__/App.spec.tsx
@@ -1,7 +1,7 @@
// npx vitest run src/__tests__/App.spec.tsx
import React from "react"
-import { render, screen, act, cleanup } from "@testing-library/react"
+import { render, screen, act, cleanup } from "@/utils/test-utils"
import AppWithProviders from "../App"
diff --git a/webview-ui/src/__tests__/ContextWindowProgress.spec.tsx b/webview-ui/src/__tests__/ContextWindowProgress.spec.tsx
index 5a5ff463ef..4220fd1d3a 100644
--- a/webview-ui/src/__tests__/ContextWindowProgress.spec.tsx
+++ b/webview-ui/src/__tests__/ContextWindowProgress.spec.tsx
@@ -1,6 +1,6 @@
// npm run test ContextWindowProgress.spec.tsx
-import { render, screen } from "@testing-library/react"
+import { render, screen } from "@/utils/test-utils"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import TaskHeader from "@src/components/chat/TaskHeader"
@@ -103,18 +103,22 @@ describe("ContextWindowProgress", () => {
it("calculates percentages correctly", () => {
renderComponent({ contextTokens: 1000, contextWindow: 4000 })
- // Instead of checking the title attribute, verify the data-test-id
- // which identifies the element containing info about the percentage of tokens used
- const tokenUsageDiv = screen.getByTestId("context-tokens-used")
- expect(tokenUsageDiv).toBeInTheDocument()
+ // Verify that the token count and window size are displayed correctly
+ const tokenCount = screen.getByTestId("context-tokens-count")
+ const windowSize = screen.getByTestId("context-window-size")
- // Just verify that the element has a title attribute (the actual text is translated and may vary)
- expect(tokenUsageDiv).toHaveAttribute("title")
+ expect(tokenCount).toBeInTheDocument()
+ expect(tokenCount).toHaveTextContent("1000")
- // We can't reliably test computed styles in JSDOM, so we'll just check
- // that the component appears to be working correctly by checking for expected elements
- // The context-window-label is not part of the ContextWindowProgress component
- expect(screen.getByTestId("context-tokens-count")).toBeInTheDocument()
- expect(screen.getByTestId("context-tokens-count")).toHaveTextContent("1000")
+ expect(windowSize).toBeInTheDocument()
+ expect(windowSize).toHaveTextContent("4000")
+
+ // The progress bar is now wrapped in tooltips, but we can verify the structure exists
+ // by checking for the progress bar container
+ const progressBarContainer = screen.getByTestId("context-tokens-count").parentElement
+ expect(progressBarContainer).toBeInTheDocument()
+
+ // Verify the flex container has the expected structure
+ expect(progressBarContainer?.querySelector(".flex-1.relative")).toBeInTheDocument()
})
})
diff --git a/webview-ui/src/components/account/__tests__/AccountView.spec.tsx b/webview-ui/src/components/account/__tests__/AccountView.spec.tsx
index 53b7c0a4ce..d6fd3013e6 100644
--- a/webview-ui/src/components/account/__tests__/AccountView.spec.tsx
+++ b/webview-ui/src/components/account/__tests__/AccountView.spec.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react"
+import { render, screen } from "@/utils/test-utils"
import { describe, it, expect, vi } from "vitest"
import { AccountView } from "../AccountView"
diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx
index 910b671725..dc07764077 100644
--- a/webview-ui/src/components/chat/ChatTextArea.tsx
+++ b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -19,7 +19,7 @@ import {
SearchResult,
} from "@src/utils/context-mentions"
import { convertToMentionPath } from "@/utils/path-mentions"
-import { SelectDropdown, DropdownOptionType, Button } from "@/components/ui"
+import { SelectDropdown, DropdownOptionType, Button, StandardTooltip } from "@/components/ui"
import Thumbnails from "../common/Thumbnails"
import ModeSelector from "./ModeSelector"
@@ -1094,8 +1094,7 @@ const ChatTextArea = forwardRef(