[ENG-514] Introduce UI library (#3222)

* update tailwind

* install heroui

* Introduce HeroUIProvider and reorganize providers

* changeset

* use tailwind config

* use custom theme

* changeset

* Delete .changeset/large-boxes-behave.md

.changeset/ninety-numbers-decide.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Introduce UI library for future UI development

webview-ui/package.json

@@ -15,11 +15,13 @@
 	},
 	"dependencies": {
 		"@floating-ui/react": "^0.27.4",
+		"@heroui/react": "^2.8.0-beta.2",
 		"@vscode/webview-ui-toolkit": "^1.4.0",
 		"debounce": "^2.1.1",
 		"dompurify": "^3.2.4",
 		"fast-deep-equal": "^3.1.3",
 		"firebase": "^11.3.0",
+		"framer-motion": "^12.7.4",
 		"fuse.js": "^7.0.0",
 		"fzf": "^0.5.2",
 		"mermaid": "^11.4.1",
@@ -42,7 +44,7 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.17.0",
-		"@tailwindcss/vite": "^4.0.12",
+		"@tailwindcss/vite": "^4.1.4",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/react": "^16.2.0",
 		"@testing-library/user-event": "^14.6.1",
@@ -60,7 +62,7 @@
 		"eslint-plugin-react-refresh": "^0.4.16",
 		"globals": "^15.14.0",
 		"jsdom": "^26.0.0",
-		"tailwindcss": "^4.0.12",
+		"tailwindcss": "^4.1.4",
 		"typescript": "^5.7.3",
 		"typescript-eslint": "^8.18.2",
 		"vite": "^6.2.6",

webview-ui/src/App.tsx

@@ -6,10 +6,10 @@ import HistoryView from "./components/history/HistoryView"
 import SettingsView from "./components/settings/SettingsView"
 import WelcomeView from "./components/welcome/WelcomeView"
 import AccountView from "./components/account/AccountView"
-import { ExtensionStateContextProvider, useExtensionState } from "./context/ExtensionStateContext"
-import { FirebaseAuthProvider } from "./context/FirebaseAuthContext"
+import { useExtensionState } from "./context/ExtensionStateContext"
 import { vscode } from "./utils/vscode"
 import McpView from "./components/mcp/configuration/McpConfigurationView"
+import { Providers } from "./Providers"
 
 const AppContent = () => {
 	const { didHydrateState, showWelcome, shouldShowAnnouncement, showMcp, mcpTab } = useExtensionState()
@@ -126,11 +126,9 @@ const AppContent = () => {
 
 const App = () => {
 	return (
-		<ExtensionStateContextProvider>
-			<FirebaseAuthProvider>
-				<AppContent />
-			</FirebaseAuthProvider>
-		</ExtensionStateContextProvider>
+		<Providers>
+			<AppContent />
+		</Providers>
 	)
 }
 

webview-ui/src/Providers.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react"
+
+import { ExtensionStateContextProvider } from "./context/ExtensionStateContext"
+import { FirebaseAuthProvider } from "./context/FirebaseAuthContext"
+import { HeroUIProvider } from "@heroui/react"
+
+export function Providers({ children }: { children: ReactNode }) {
+	return (
+		<ExtensionStateContextProvider>
+			<FirebaseAuthProvider>
+				<HeroUIProvider>{children}</HeroUIProvider>
+			</FirebaseAuthProvider>
+		</ExtensionStateContextProvider>
+	)
+}

webview-ui/src/index.css

@@ -4,6 +4,8 @@
 /* @import "tailwindcss/preflight.css" layer(base); */
 @import "tailwindcss/utilities.css" layer(utilities);
 
+@config "../tailwind.config.js";
+
 textarea:focus {
 	outline: 1.5px solid var(--vscode-focusBorder, #007fd4);
 }

webview-ui/tailwind.config.js

@@ -0,0 +1,22 @@
+const { heroui } = require("@heroui/react")
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}"],
+	theme: {
+		extend: {},
+	},
+	darkMode: "class",
+	plugins: [
+		heroui({
+			defaultTheme: "vscode",
+			themes: {
+				vscode: {
+					colors: {
+						background: "",
+					},
+				},
+			},
+		}),
+	],
+}