Phase 5 cleanup

packages/web/src/components/ui/Avatar.tsx

@@ -0,0 +1,27 @@
+interface AvatarProps {
+  name: string;
+  size?: number;
+}
+
+export function Avatar({ name, size = 32 }: AvatarProps) {
+  const initial = (name.charAt(0) ?? '?').toUpperCase();
+  return (
+    <div
+      aria-label={name}
+      style={{
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        background: 'linear-gradient(135deg, var(--viz-4), var(--viz-3))',
+        color: 'white',
+        display: 'grid',
+        placeItems: 'center',
+        fontWeight: 600,
+        fontSize: size * 0.4,
+        flexShrink: 0,
+      }}
+    >
+      {initial}
+    </div>
+  );
+}