Kilo-Org · hassoncs · Oct 8, 2025
diff --git a/.changeset/brown-snails-occur.md b/.changeset/brown-snails-occur.md
@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Add subtle fade animation when switching between tabs
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/webview-ui/package.json b/webview-ui/package.json
@@ -32,9 +32,9 @@
 		"@roo-code/types": "workspace:^",
 		"@tailwindcss/vite": "^4.0.0",
 		"@tanstack/react-query": "^5.68.0",
+		"@types/qrcode": "^1.5.5",
 		"@types/seedrandom": "^3.0.8",
 		"@use-gesture/react": "^10.3.1",
-		"@types/qrcode": "^1.5.5",
 		"@vscode/codicons": "^0.0.36",
 		"@vscode/webview-ui-toolkit": "^1.4.0",
 		"axios": "^1.12.0",
@@ -45,6 +45,7 @@
 		"debounce": "^2.1.1",
 		"dompurify": "^3.2.6",
 		"fast-deep-equal": "^3.1.3",
+		"framer-motion": "12.15.0",
 		"fzf": "^0.5.2",
 		"hast-util-to-jsx-runtime": "^2.3.6",
 		"i18next": "^25.0.0",

diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx
@@ -27,6 +27,7 @@ import { DeleteMessageDialog, EditMessageDialog } from "./components/chat/Messag
 import ErrorBoundary from "./components/ErrorBoundary"
 // import { AccountView } from "./components/account/AccountView" // kilocode_change: we have our own profile view
 // import { CloudView } from "./components/cloud/CloudView" // kilocode_change: not rendering this
+import { AnimatedTabContainer } from "./components/ui/AnimatedTabContainer" // kilocode_change
 import { useAddNonInteractiveClickListener } from "./components/ui/hooks/useNonInteractiveClick"
 import { TooltipProvider } from "./components/ui/tooltip"
 import { STANDARD_TOOLTIP_DELAY } from "./components/ui/standard-tooltip"
@@ -278,7 +279,8 @@ const App = () => {
 	return showWelcome ? (
 		<WelcomeView />
 	) : (
-		<>
+		// kilocode_change- wrap tabs in AnimatedTabContainer
+		<AnimatedTabContainer tabKey={tab}>
 			{tab === "modes" && <ModesView onDone={() => switchTab("chat")} />}
 			{tab === "mcp" && <McpView onDone={() => switchTab("chat")} />}
 			{tab === "history" && <HistoryView onDone={() => switchTab("chat")} />}
@@ -389,7 +391,7 @@ const App = () => {
 					<BottomControls />
 				</div>
 			)}
-		</>
+		</AnimatedTabContainer>
 	)
 }


diff --git a/webview-ui/src/__tests__/App.spec.tsx b/webview-ui/src/__tests__/App.spec.tsx
@@ -17,6 +17,11 @@ vi.mock("@src/components/ErrorBoundary", () => ({
 	default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
 }))

+// Mock AnimatedTabContainer to remove animation delays in tests
+vi.mock("@src/components/ui/AnimatedTabContainer", () => ({
+	AnimatedTabContainer: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+
 // Mock the telemetry client
 vi.mock("@src/utils/TelemetryClient", () => ({
 	telemetryClient: {

diff --git a/webview-ui/src/components/ui/AnimatedTabContainer.tsx b/webview-ui/src/components/ui/AnimatedTabContainer.tsx
@@ -0,0 +1,42 @@
+import React from "react"
+import { motion, AnimatePresence } from "framer-motion"
+
+interface AnimatedTabContainerProps {
+	children: React.ReactNode
+	tabKey: string
+	className?: string
+}
+
+const fadeVariants = {
+	initial: {
+		opacity: 0,
+	},
+	animate: {
+		opacity: 1,
+	},
+	exit: {
+		opacity: 0,
+	},
+}
+
+const transition = {
+	duration: 0.1,
+	ease: "easeOut",
+}
+
+export const AnimatedTabContainer: React.FC<AnimatedTabContainerProps> = ({ children, tabKey, className = "" }) => {
+	return (
+		<AnimatePresence mode="wait" initial={false}>
+			<motion.div
+				key={tabKey}
+				variants={fadeVariants}
+				initial="initial"
+				animate="animate"
+				exit="exit"
+				transition={transition}
+				className={className}>
+				{children}
+			</motion.div>
+		</AnimatePresence>
+	)
+}
diff --git a/webview-ui/src/components/ui/__tests__/AnimatedTabContainer.spec.tsx b/webview-ui/src/components/ui/__tests__/AnimatedTabContainer.spec.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react"
+import { AnimatedTabContainer } from "../AnimatedTabContainer"
+
+describe("AnimatedTabContainer", () => {
+	it("should render children correctly", () => {
+		render(
+			<AnimatedTabContainer tabKey="test-tab">
+				<div data-testid="test-content">Test Content</div>
+			</AnimatedTabContainer>,
+		)
+
+		expect(screen.getByTestId("test-content")).toBeInTheDocument()
+		expect(screen.getByText("Test Content")).toBeInTheDocument()
+	})
+
+	it("should apply custom className", () => {
+		const { container } = render(
+			<AnimatedTabContainer tabKey="test-tab" className="custom-class">
+				<div>Test Content</div>
+			</AnimatedTabContainer>,
+		)
+
+		const motionDiv = container.querySelector(".custom-class")
+		expect(motionDiv).toBeInTheDocument()
+	})
+})