@khal-os/ui 1.0.0

package/src/components/data-row.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../utils';
+
+/**
+ * DataRow — LP section-level key-value / data display component.
+ *
+ * Extracted from khal-landing section components:
+ * - Architecture.tsx: font-mono code rules (IF/THEN/ELSE patterns)
+ * - Architecture.tsx: connection rows with status dots
+ * - Omnichannel-spotlight.tsx: channel count rows (font-mono tabular-nums)
+ * - Omnichannel-spotlight.tsx: observability inline data
+ *
+ * Renders a horizontal key-value pair with monospace font and optional accent.
+ */
+const dataRowVariants = cva('flex items-center gap-3 rounded-lg border border-[#FFFFFF14] font-mono', {
+	variants: {
+		variant: {
+			/** Standard data row — subtle bg */
+			default: 'bg-[#FFFFFF08] py-2.5 px-3',
+			/** Inline/compact — for observability-style data */
+			inline: 'bg-[#FFFFFF06] py-1.5 px-2.5 text-[11px]',
+			/** Nested rule row — for indented rule displays */
+			rule: 'bg-[#FFFFFF05] py-2.5 px-3',
+		},
+	},
+	defaultVariants: {
+		variant: 'default',
+	},
+});
+
+interface DataRowProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dataRowVariants> {
+	/** The label/key portion (left side) */
+	label: string;
+	/** The value portion (right side, pushed to end) */
+	value?: string;
+	/** Accent color for the value text */
+	accentColor?: string;
+	/** Show a status dot before the label */
+	statusDot?: boolean;
+	/** Custom status dot color */
+	dotColor?: string;
+	/** Optional tag/badge to show before the label (e.g. "IF", "THEN") */
+	tag?: string;
+	/** Tag color — defaults to accent */
+	tagColor?: string;
+}
+
+const DataRow = React.forwardRef<HTMLDivElement, DataRowProps>(
+	({ className, variant, label, value, accentColor, statusDot, dotColor, tag, tagColor, children, ...props }, ref) => {
+		return (
+			<div ref={ref} className={cn(dataRowVariants({ variant }), className)} {...props}>
+				{/* Status dot */}
+				{statusDot && (
+					<span className="size-[6px] shrink-0 rounded-full" style={{ backgroundColor: dotColor || '#FFFFFF40' }} />
+				)}
+
+				{/* Tag badge (IF/THEN/ELSE style) */}
+				{tag && (
+					<span
+						className="shrink-0 rounded py-0.5 px-2 text-[10px] font-bold uppercase tracking-wide leading-3.5"
+						style={{
+							color: tagColor || 'var(--color-accent, #D49355)',
+							backgroundColor: tagColor
+								? `color-mix(in srgb, ${tagColor} 10%, transparent)`
+								: 'rgba(var(--color-accent-rgb, 212,147,85), 0.1)',
+						}}
+					>
+						{tag}
+					</span>
+				)}
+
+				{/* Label */}
+				<span className="text-[12px] text-[#FFFFFFCC] leading-4 min-w-0 truncate">{label}</span>
+
+				{/* Spacer if value present */}
+				{(value || children) && <span className="grow" />}
+
+				{/* Value */}
+				{value && (
+					<span className="text-[12px] leading-4 tabular-nums shrink-0" style={{ color: accentColor || '#FFFFFF99' }}>
+						{value}
+					</span>
+				)}
+
+				{/* Custom children (for complex right-side content) */}
+				{children}
+			</div>
+		);
+	}
+);
+DataRow.displayName = 'DataRow';
+
+export type { DataRowProps };
+export { DataRow, dataRowVariants };

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+import { cn } from '../utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+		inset?: boolean;
+	}
+>(({ className, inset, children, ...props }, ref) => (
+	<DropdownMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			'flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-copy-13 outline-none select-none',
+			'focus:bg-[var(--khal-menu-hover)]',
+			'data-[state=open]:bg-[var(--khal-menu-hover)]',
+			inset && 'pl-8',
+			className
+		)}
+		style={{ color: 'var(--khal-text-primary)' }}
+		{...props}
+	>
+		{children}
+	</DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+	<DropdownMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			'z-[9999] min-w-[8rem] overflow-hidden rounded-xl p-1',
+			'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+			'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+			'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+			className
+		)}
+		style={{
+			background: 'var(--khal-menu-bg)',
+			border: '1px solid var(--khal-menu-border)',
+			boxShadow: 'var(--khal-menu-shadow)',
+			color: 'var(--khal-text-primary)',
+		}}
+		{...props}
+	/>
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<DropdownMenuPrimitive.Portal>
+		<DropdownMenuPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				'z-[9999] min-w-[8rem] overflow-hidden rounded-xl p-1',
+				'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+				'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+				'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+				className
+			)}
+			style={{
+				background: 'var(--khal-menu-bg)',
+				border: '1px solid var(--khal-menu-border)',
+				boxShadow: 'var(--khal-menu-shadow)',
+				color: 'var(--khal-text-primary)',
+			}}
+			{...props}
+		/>
+	</DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+		inset?: boolean;
+		prefix?: React.ReactNode;
+		suffix?: React.ReactNode;
+	}
+>(({ className, inset, prefix, suffix, children, ...props }, ref) => (
+	<DropdownMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			'relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-copy-13 outline-none select-none transition-colors',
+			'focus:bg-[var(--khal-menu-hover)]',
+			'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			inset && 'pl-8',
+			className
+		)}
+		style={{ color: 'var(--khal-text-primary)' }}
+		{...props}
+	>
+		{prefix && <span className="inline-flex shrink-0">{prefix}</span>}
+		{children}
+		{suffix && (
+			<span className="ml-auto inline-flex shrink-0" style={{ color: 'var(--khal-text-muted)' }}>
+				{suffix}
+			</span>
+		)}
+	</DropdownMenuPrimitive.Item>
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+	<DropdownMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			'relative flex cursor-default items-center rounded-lg py-1.5 pl-8 pr-2 text-copy-13 outline-none select-none transition-colors',
+			'focus:bg-[var(--khal-menu-hover)]',
+			'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			className
+		)}
+		style={{ color: 'var(--khal-text-primary)' }}
+		checked={checked}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path
+						d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3354 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.5553 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+						fill="currentColor"
+						fillRule="evenodd"
+						clipRule="evenodd"
+					></path>
+				</svg>
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+	<DropdownMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			'relative flex cursor-default items-center rounded-lg py-1.5 pl-8 pr-2 text-copy-13 outline-none select-none transition-colors',
+			'focus:bg-[var(--khal-menu-hover)]',
+			'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			className
+		)}
+		style={{ color: 'var(--khal-text-primary)' }}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<svg width="8" height="8" viewBox="0 0 8 8" fill="none">
+					<circle cx="4" cy="4" r="4" fill="currentColor" />
+				</svg>
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<DropdownMenuPrimitive.Label
+		ref={ref}
+		className={cn('px-2 py-1.5 text-label-12 font-semibold', inset && 'pl-8', className)}
+		style={{ color: 'var(--khal-text-secondary)' }}
+		{...props}
+	/>
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<DropdownMenuPrimitive.Separator
+		ref={ref}
+		className={cn('-mx-1 my-1 h-px', className)}
+		style={{ background: 'var(--khal-border-default)' }}
+		{...props}
+	/>
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn('ml-auto text-label-12 tracking-widest', className)}
+			style={{ color: 'var(--khal-text-muted)' }}
+			{...props}
+		/>
+	);
+};
+
+export {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+};

package/src/components/glass-card.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../utils';
+
+const glassCardVariants = cva(
+	'relative overflow-hidden border transition-all [background:var(--khal-glass-tint)] [border-color:var(--khal-glass-border)]',
+	{
+		variants: {
+			variant: {
+				default: '[box-shadow:var(--khal-shadow-sm)]',
+				raised: '[box-shadow:var(--khal-shadow-md)]',
+			},
+			padding: {
+				sm: 'p-3',
+				md: 'p-4',
+				lg: 'p-6',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			padding: 'md',
+		},
+	}
+);
+
+interface GlassCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof glassCardVariants> {
+	hover?: boolean;
+	glow?: string;
+}
+
+const GlassCard = React.forwardRef<HTMLDivElement, GlassCardProps>(
+	({ className, variant, padding, hover = false, glow, style, children, ...props }, ref) => {
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					glassCardVariants({ variant, padding }),
+					hover && [
+						'cursor-pointer',
+						'hover:-translate-y-0.5',
+						'hover:[border-color:var(--khal-border-strong)]',
+						'hover:[box-shadow:var(--khal-shadow-lg)]',
+					],
+					className
+				)}
+				style={{
+					backdropFilter: 'var(--khal-glass-filter)',
+					WebkitBackdropFilter: 'var(--khal-glass-filter)',
+					borderRadius: 'var(--khal-radius-xl)',
+					transitionTimingFunction: 'var(--khal-ease-spring)',
+					transitionDuration: 'var(--khal-duration-normal)',
+					...style,
+				}}
+				{...props}
+			>
+				{glow && (
+					<div
+						className="pointer-events-none absolute inset-0 rounded-[inherit]"
+						style={{
+							background: `radial-gradient(ellipse at 50% 0%, color-mix(in srgb, ${glow} 20%, transparent), transparent 70%)`,
+						}}
+					/>
+				)}
+				<div className="relative">{children}</div>
+			</div>
+		);
+	}
+);
+GlassCard.displayName = 'GlassCard';
+
+export type { GlassCardProps };
+export { GlassCard, glassCardVariants };

package/src/components/input.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../utils';
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+	/** Label above the input (geistcn compat) */
+	label?: string;
+	/** Size variant (geistcn compat) */
+	size?: 'small' | 'medium' | 'large';
+	/** HTML input type (named typeName for geistcn compat, also accepts type) */
+	typeName?: string;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+	({ className, label, size, typeName, type, ...props }, ref) => {
+		const input = (
+			<input
+				type={typeName ?? type}
+				className={cn(
+					'flex w-full rounded-md border border-gray-alpha-400 bg-background-100 px-3 text-copy-13 text-gray-1000 transition-colors',
+					'file:border-0 file:bg-transparent file:text-sm file:font-medium',
+					'placeholder:text-gray-700',
+					'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-1',
+					'disabled:cursor-not-allowed disabled:opacity-50',
+					size === 'small' ? 'h-8' : size === 'large' ? 'h-11' : 'h-9',
+					className
+				)}
+				ref={ref}
+				{...props}
+			/>
+		);
+
+		if (label) {
+			return (
+				<div className="flex flex-col gap-1.5">
+					<label className="text-label-13 text-gray-900">{label}</label>
+					{input}
+				</div>
+			);
+		}
+
+		return input;
+	}
+);
+Input.displayName = 'Input';
+
+export { Input };

package/src/components/khal-logo.tsx

@@ -0,0 +1,73 @@
+interface KhalLogoProps {
+	size?: number;
+	variant?: 'light' | 'dark';
+	className?: string;
+}
+
+/**
+ * KhalLogo — SVG wordmark for large sizes (>=20), single "K" letterform for small sizes.
+ * Uses currentColor so color is inherited from parent.
+ */
+export function KhalLogo({ size = 20, variant = 'light', className }: KhalLogoProps) {
+	const color = variant === 'light' ? '#FFFFFF' : '#0A0A0A';
+	const showFull = size >= 20;
+
+	if (!showFull) {
+		// Small sizes: render just the K letterform from the SVG
+		return (
+			<svg
+				viewBox="0 0 156 155"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				width={size}
+				height={size}
+				className={className}
+				aria-label="K"
+				style={{ color }}
+			>
+				<path
+					d="M0 0H27.4425V65.9519H71.7054L122.829 0H155.362L95.3869 76.1317L164.657 154.92H128.805L72.5913 92.2878H27.4425V154.92H0V0Z"
+					fill="currentColor"
+				/>
+			</svg>
+		);
+	}
+
+	// Full wordmark SVG
+	return (
+		<svg
+			viewBox="0 0 756 155"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			width={size * (756 / 155)}
+			height={size}
+			className={className}
+			aria-label="khal"
+			style={{ color }}
+		>
+			<g clipPath="url(#khal-logo-clip)">
+				<path
+					d="M616.81 0H644.252V128.584H765.533V154.92H638.499C635.4 154.92 632.524 154.33 629.867 153.149C627.211 151.969 624.924 150.42 623.007 148.502C621.088 146.584 619.539 144.371 618.359 141.863C617.326 139.206 616.81 136.403 616.81 133.453V0Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M443.058 21.2467C445.123 14.4594 448.295 9.22105 452.573 5.53287C456.853 1.8447 462.533 0 469.616 0H519.632C527.009 0 532.911 1.91744 537.337 5.75467C541.763 9.44285 545.009 14.6072 547.076 21.2467L589.125 154.92H560.133L546.411 110.657H461.87L468.73 84.3212H538.665L521.181 26.3359H468.951L430 154.92H400.786L443.058 21.2467Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M190.123 0H217.565V62.6322H344.6V0H372.043V154.92H344.6V88.9681H217.565V154.92H190.123V0Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M0 0H27.4425V65.9519H71.7054L122.829 0H155.362L95.3869 76.1317L164.657 154.92H128.805L72.5913 92.2878H27.4425V154.92H0V0Z"
+					fill="currentColor"
+				/>
+			</g>
+			<defs>
+				<clipPath id="khal-logo-clip">
+					<rect width="756" height="155" fill="white" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}

package/src/components/live-feed.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { AnimatePresence, motion } from 'motion/react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '../utils';
+
+type FeedEventType = 'info' | 'success' | 'warning' | 'error' | 'agent' | 'system';
+
+interface FeedEvent {
+	id: string;
+	type: FeedEventType;
+	message: string;
+	timestamp?: Date;
+}
+
+const typeColors: Record<FeedEventType, string> = {
+	info: 'var(--ds-blue-600)',
+	success: 'var(--ds-green-600)',
+	warning: 'var(--ds-amber-600)',
+	error: 'var(--ds-red-600)',
+	agent: 'var(--ds-purple-600)',
+	system: 'var(--ds-gray-600)',
+};
+
+interface LiveFeedProps {
+	/** Initial events to render */
+	events?: FeedEvent[];
+	/** Maximum visible events before oldest are removed */
+	maxVisible?: number;
+	/** Show timestamps next to events */
+	showTimestamps?: boolean;
+	/** Height of the feed container */
+	height?: number | string;
+	className?: string;
+}
+
+function LiveFeed({
+	events: externalEvents,
+	maxVisible = 50,
+	showTimestamps = true,
+	height = 300,
+	className,
+}: LiveFeedProps) {
+	const [events, setEvents] = useState<FeedEvent[]>(externalEvents ?? []);
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const isAtBottom = useRef(true);
+
+	// Sync external events
+	useEffect(() => {
+		if (externalEvents) {
+			setEvents((prev) => {
+				const combined = [...prev, ...externalEvents.filter((e) => !prev.some((p) => p.id === e.id))];
+				return combined.slice(-maxVisible);
+			});
+		}
+	}, [externalEvents, maxVisible]);
+
+	// Auto-scroll to bottom when new events arrive and user is at bottom
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (el && isAtBottom.current) {
+			el.scrollTop = el.scrollHeight;
+		}
+	}, [events]);
+
+	const handleScroll = useCallback(() => {
+		const el = scrollRef.current;
+		if (el) {
+			isAtBottom.current = el.scrollHeight - el.scrollTop - el.clientHeight < 24;
+		}
+	}, []);
+
+	const formatTime = (d: Date) =>
+		d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
+
+	return (
+		<div
+			ref={scrollRef}
+			onScroll={handleScroll}
+			className={cn('overflow-y-auto overflow-x-hidden font-mono text-xs leading-5 scrollbar-thin', className)}
+			style={{ height }}
+		>
+			<AnimatePresence initial={false}>
+				{events.map((event) => (
+					<motion.div
+						key={event.id}
+						initial={{ opacity: 0, height: 0 }}
+						animate={{ opacity: 1, height: 'auto' }}
+						exit={{ opacity: 0, height: 0 }}
+						transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}
+						className="flex gap-2 px-2 py-0.5 hover:bg-[var(--ds-gray-alpha-100)]"
+					>
+						<span
+							className="inline-block w-1.5 h-1.5 rounded-full mt-1.5 shrink-0"
+							style={{ backgroundColor: typeColors[event.type] }}
+						/>
+						{showTimestamps && event.timestamp && (
+							<span className="shrink-0 opacity-40 tabular-nums">{formatTime(event.timestamp)}</span>
+						)}
+						<span className="opacity-80 break-words min-w-0">{event.message}</span>
+					</motion.div>
+				))}
+			</AnimatePresence>
+		</div>
+	);
+}
+
+export type { LiveFeedProps, FeedEvent, FeedEventType };
+export { LiveFeed };

package/src/components/mesh-gradient.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { lazy, Suspense, useEffect, useRef, useState } from 'react';
+import { useReducedMotion } from '../hooks/useReducedMotion';
+
+const MeshGradientShader = lazy(() => import('@paper-design/shaders-react').then((m) => ({ default: m.MeshGradient })));
+
+interface MeshGradientProps {
+	/** Array of CSS color strings (typically 4-8) */
+	colors: string[];
+	/** Animation speed multiplier (default 0.02) */
+	speed?: number;
+	className?: string;
+	style?: React.CSSProperties;
+}
+
+function StaticFallback({ colors }: { colors: string[] }) {
+	const bg =
+		colors.length >= 2
+			? `linear-gradient(135deg, ${colors[0]} 0%, ${colors[Math.floor(colors.length / 2)]} 50%, ${colors[colors.length - 1]} 100%)`
+			: (colors[0] ?? '#0A0A0A');
+
+	return <div style={{ width: '100%', height: '100%', background: bg }} />;
+}
+
+function MeshGradientInner({ colors, speed = 0.02, className, style }: MeshGradientProps) {
+	const ref = useRef<HTMLDivElement>(null);
+	const [visible, setVisible] = useState(false);
+	const reducedMotion = useReducedMotion();
+
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+
+		const observer = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting), {
+			rootMargin: '100px',
+		});
+
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+
+	return (
+		<div ref={ref} className={className} style={{ position: 'absolute', inset: 0, ...style }}>
+			{visible && !reducedMotion ? (
+				<Suspense fallback={<StaticFallback colors={colors} />}>
+					<MeshGradientShader colors={colors} speed={speed} style={{ width: '100%', height: '100%' }} />
+				</Suspense>
+			) : (
+				<StaticFallback colors={colors} />
+			)}
+		</div>
+	);
+}
+
+export type { MeshGradientProps };
+export { MeshGradientInner as MeshGradient };