feat: add ShimmerText component (#3938)

* feat: add ShimmerText component with simplified API

- Create ShimmerText component that wraps any text with shimmer effect
- Component inherits text size from parent (no size prop needed)
- Rename all CSS from glimmer to shimmer
- Add simple Storybook stories demonstrating usage

* feat(ui): add custom color support to ShimmerText component

Add foregroundColor and highlightColor props to allow custom shimmer colors,
with fallback to VSCode theme colors. Updated Storybook stories to demonstrate
usage via props and CSS variables.

Author: hassoncs

apps/storybook/stories/ShimmerText.stories.tsx

@@ -0,0 +1,96 @@
+// kilocode_change - new file
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { ShimmerText } from "../../../webview-ui/src/components/ui/shimmer-text"
+
+const meta = {
+	title: "Components/ShimmerText",
+	component: ShimmerText,
+	tags: ["autodocs"],
+	argTypes: {
+		children: {
+			control: "text",
+			description: "The text content to display with shimmer effect",
+		},
+		asChild: {
+			control: "boolean",
+			description: "Render as child element instead of wrapper span",
+		},
+		foregroundColor: {
+			control: "color",
+			description: "Custom foreground/base color for the shimmer",
+		},
+		highlightColor: {
+			control: "color",
+			description: "Custom highlight color for the shimmer effect",
+		},
+	},
+	args: {
+		children: "API Request...",
+	},
+	decorators: [
+		(Story) => (
+			<div className="w-full max-w-4xl mx-auto bg-[var(--vscode-editor-background)] p-8">
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta<typeof ShimmerText>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		children: "API Request...",
+	},
+}
+
+export const Examples: Story = {
+	render: () => (
+		<div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+			<div style={{ fontSize: "12px" }}>
+				<ShimmerText>Small text with shimmer</ShimmerText>
+			</div>
+			<div style={{ fontSize: "16px" }}>
+				<ShimmerText>Normal text with shimmer</ShimmerText>
+			</div>
+			<div style={{ fontSize: "24px" }}>
+				<ShimmerText>Large text with shimmer</ShimmerText>
+			</div>
+			<ShimmerText>
+				<span className="codicon codicon-loading" style={{ marginRight: "8px" }} />
+				Loading with icon
+			</ShimmerText>
+			<ShimmerText>
+				<span className="codicon codicon-sparkle" style={{ fontSize: "64px" }} />
+			</ShimmerText>
+
+			<div style={{ marginTop: "8px" }}>
+				<strong style={{ color: "var(--vscode-foreground)" }}>Custom colors via props:</strong>
+			</div>
+			<ShimmerText foregroundColor="#3b82f6" style={{ fontSize: "18px" }}>
+				Blue (foreground only, highlight auto-generated)
+			</ShimmerText>
+			<ShimmerText foregroundColor="#6366f1" highlightColor="#c4b5fd" style={{ fontSize: "18px" }}>
+				Purple with custom highlight
+			</ShimmerText>
+
+			<div style={{ marginTop: "8px" }}>
+				<strong style={{ color: "var(--vscode-foreground)" }}>CSS variables from parent:</strong>
+			</div>
+			<div
+				style={
+					{
+						"--shimmer-foreground": "#059669",
+						"--shimmer-highlight-color": "#a7f3d0",
+						padding: "12px",
+						border: "1px solid var(--vscode-panel-border)",
+						borderRadius: "4px",
+					} as React.CSSProperties
+				}>
+				<ShimmerText style={{ fontSize: "18px" }}>Inherits green from parent container</ShimmerText>
+			</div>
+		</div>
+	),
+}

webview-ui/src/components/ui/shimmer-text.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cn } from "@/lib/utils"
+
+export interface ShimmerTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+	children: React.ReactNode
+	asChild?: boolean
+	/** Custom foreground/base color (e.g., "#ff0000" or "rgb(255, 0, 0)") */
+	foregroundColor?: string
+	/** Custom highlight color for the shimmer effect */
+	highlightColor?: string
+}
+
+const ShimmerText = React.forwardRef<HTMLSpanElement, ShimmerTextProps>(
+	({ className, children, asChild = false, foregroundColor, highlightColor, style, ...props }, ref) => {
+		const Comp = asChild ? Slot : "span"
+
+		const customStyle = {
+			...style,
+			...(foregroundColor && { "--shimmer-foreground": foregroundColor }),
+			...(highlightColor && { "--shimmer-highlight-color": highlightColor }),
+		} as React.CSSProperties
+
+		return (
+			<Comp ref={ref} {...props} style={customStyle} className={cn("shimmer-text", className)}>
+				{children}
+			</Comp>
+		)
+	},
+)
+ShimmerText.displayName = "ShimmerText"
+
+export { ShimmerText }

webview-ui/src/kilocode.css

@@ -60,3 +60,37 @@
 .animate-message-highlight {
 	animation: message-highlight 1s ease-out forwards;
 }
+
+/* Shimmer text animation - horizontal shimmer effect */
+@keyframes shimmer {
+	0% {
+		background-position: 200% center;
+	}
+	100% {
+		background-position: -200% center;
+	}
+}
+
+.shimmer-text {
+	/* Allow custom colors via CSS variables, with fallback to VSCode theme colors */
+	--shimmer-base: var(--shimmer-foreground, color-mix(in srgb, var(--vscode-descriptionForeground) 80%, black));
+	--shimmer-highlight: var(--shimmer-highlight-color, color-mix(in srgb, var(--shimmer-base) 70%, white));
+
+	color: var(--shimmer-base);
+	background: linear-gradient(
+		90deg,
+		var(--shimmer-base) 0%,
+		var(--shimmer-base) 35%,
+		var(--shimmer-highlight) 45%,
+		var(--shimmer-highlight) 50%,
+		var(--shimmer-highlight) 55%,
+		var(--shimmer-base) 65%,
+		var(--shimmer-base) 100%
+	);
+	background-size: 200% 100%;
+	-webkit-background-clip: text;
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+	display: inline-block;
+	animation: shimmer 2.5s linear infinite;
+}