refactor: rename component appropriately

js/src/features/playback/playback-page-indicator.tsx

@@ -1,16 +1,16 @@
 import { cn } from "@/lib/utils";
 
-interface PlaybackControlsProps {
+interface PlaybackPageIndicatorProps {
   total: number;
   current: number;
   onGoTo: (index: number) => void;
 }
 
-export function PlaybackControls({
+export function PlaybackPageIndicator({
   total,
   current,
   onGoTo,
-}: PlaybackControlsProps) {
+}: PlaybackPageIndicatorProps) {
   if (total === 0) return null;
 
   return (

js/src/pages/stream-player-page.tsx

@@ -7,7 +7,7 @@ import { useAppStore } from "@/stores/app-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { useRecordingStore } from "@/stores/recording-store";
 import { ParticleRenderer } from "@/features/playback/particle-renderer";
-import { PlaybackControls } from "@/features/playback/playback-controls";
+import { PlaybackPageIndicator } from "@/features/playback/playback-page-indicator";
 import { ReplyIndicator } from "@/features/recording/reply-indicator";
 import { TextComposeOverlay } from "@/features/recording/text-compose-overlay";
 import { RecordingOverlay } from "@/features/recording/recording-overlay";
@@ -222,7 +222,7 @@ export function StreamPlayerPage() {
       {/* Top overlay: progress bars + back button */}
       <div className="pointer-events-none absolute top-0 right-0 left-0 z-10">
         <div className="pointer-events-auto">
-          <PlaybackControls
+          <PlaybackPageIndicator
             total={particles.length}
             current={currentIndex}
             onGoTo={goTo}
@@ -240,6 +240,25 @@ export function StreamPlayerPage() {
         </div>
       </div>
 
+      {/* Top center overlay for particle author avatar and name */}
+      <div className="absolute top-0 left-1/2 transform -translate-x-1/2 z-10 mt-3 rounded-full bg-black/30 px-3 py-1 backdrop-blur-sm">
+        <div className="flex items-center gap-2.5">
+          {currentParticle && (
+            <Avatar size="sm">
+              <AvatarFallback className="bg-white/20 text-[10px] text-white">
+                {currentParticle.created_by_email
+                  .split("@")[0]
+                  .slice(0, 2)
+                  .toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+          )}
+          <span className="text-xs font-medium text-white/70">
+            {currentParticle?.created_by_email.split("@")[0]}
+          </span>
+        </div>
+      </div>
+
       {/* Bottom overlay: stream info + reply */}
       <div className="absolute right-0 bottom-0 left-0 z-10 flex justify-center px-3 pb-3">
         <div className="flex w-full items-center gap-2.5 rounded-full bg-black/30 px-3 py-2 backdrop-blur-sm">