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

Author: hassoncs

apps/storybook/stories/ShimmerText.stories.tsx

@@ -0,0 +1,62 @@
+// 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",
+		},
+	},
+	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>
+	),
+}

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

@@ -0,0 +1,23 @@
+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
+}
+
+const ShimmerText = React.forwardRef<HTMLSpanElement, ShimmerTextProps>(
+	({ className, children, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "span"
+
+		return (
+			<Comp ref={ref} {...props} className={cn("shimmer-text", className)}>
+				{children}
+			</Comp>
+		)
+	},
+)
+ShimmerText.displayName = "ShimmerText"
+
+export { ShimmerText }

webview-ui/src/kilocode.css

@@ -60,3 +60,45 @@
 .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;
+	}
+}
+
+@keyframes progress-indicator-spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.shimmer-text {
+	--shimmer-base: color-mix(in srgb, var(--vscode-descriptionForeground) 80%, black);
+	--shimmer-highlight: 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;
+}