chore(room): remove Performance Stats panel

Unused debug overlay that was tracking virtualized row counts.

src/components/room/RoomChatPanel.tsx

@@ -22,7 +22,6 @@ import { RoomMessageEditHistoryDialog } from './RoomMessageEditHistoryDialog';
 import { RoomMessageList } from './RoomMessageList';
 import { RoomParticipantsPanel } from './RoomParticipantsPanel';
 import { RoomSettingsPanel } from './RoomSettingsPanel';
-import { RoomPerformanceMonitor } from './RoomPerformanceMonitor';
 import { RoomMessageSearch } from './RoomMessageSearch';
 import { RoomMentionPanel } from './RoomMentionPanel';
 import { RoomThreadPanel } from './RoomThreadPanel';
@@ -262,7 +261,6 @@ export function RoomChatPanel({ room, isAdmin, onClose, onDelete }: RoomChatPane
   const [showMentions, setShowMentions] = useState(false);
   const [isUpdatingRoom, setIsUpdatingRoom] = useState(false);
   const [activeThread, setActiveThread] = useState<{ thread: RoomThreadResponse; parentMessage: MessageWithMeta } | null>(null);
-  const [renderedMessageCount, setRenderedMessageCount] = useState<number | undefined>(undefined);
 
   // Draft management
   const { draft, setDraft, clearDraft } = useRoomDraft(room.id);
@@ -604,7 +602,6 @@ export function RoomChatPanel({ room, isAdmin, onClose, onDelete }: RoomChatPane
         roomId={room.id}
       />
 
-      <RoomPerformanceMonitor messageCount={messages.length} renderedCount={renderedMessageCount} />
     </section>
   );
 }

src/components/room/RoomMessageList.tsx

@@ -27,8 +27,6 @@ interface RoomMessageListProps {
   isLoadingMore?: boolean;
   onOpenThread?: (message: MessageWithMeta) => void;
   onCreateThread?: (message: MessageWithMeta) => void;
-  /** Called with the count of currently rendered (visible) rows whenever it changes. */
-  onRenderedCountChange?: (count: number) => void;
 }
 
 interface MessageRow {
@@ -103,7 +101,6 @@ export const RoomMessageList = memo(function RoomMessageList({
   isLoadingMore = false,
   onOpenThread,
   onCreateThread,
-  onRenderedCountChange,
 }: RoomMessageListProps) {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const topSentinelRef = useRef<HTMLDivElement>(null);
@@ -290,11 +287,6 @@ export const RoomMessageList = memo(function RoomMessageList({
     isRestoringScrollRef.current = false;
   }, [deferredMessages.length]);
 
-  // Report rendered count to parent (for performance monitor)
-  useEffect(() => {
-    onRenderedCountChange?.(virtualItems.length);
-  }, [virtualItems.length, onRenderedCountChange]);
-
   // Empty state
   if (messages.length === 0) {
     return (

src/components/room/RoomPerformanceMonitor.tsx

@@ -1,153 +0,0 @@
-import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-
-interface PerformanceStats {
-  totalMessages: number;
-  renderedMessages: number;
-  virtualizationEnabled: boolean;
-}
-
-interface RoomPerformanceMonitorProps {
-  messageCount: number;
-  renderedCount?: number;
-}
-
-const AUTO_CLOSE_DELAY = 5000; // auto-close after 5 seconds when stats are shown
-
-export function RoomPerformanceMonitor({ messageCount, renderedCount }: RoomPerformanceMonitorProps) {
-  const [showStats, setShowStats] = useState(false);
-  const autoCloseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Auto-close after AUTO_CLOSE_DELAY when stats are visible
-  useEffect(() => {
-    if (!showStats) return;
-    autoCloseTimerRef.current = setTimeout(() => {
-      setShowStats(false);
-    }, AUTO_CLOSE_DELAY);
-    return () => {
-      if (autoCloseTimerRef.current) clearTimeout(autoCloseTimerRef.current);
-    };
-  }, [showStats]);
-
-  const stats = useMemo<PerformanceStats>(() => ({
-    totalMessages: messageCount,
-    renderedMessages: renderedCount ?? messageCount,
-    virtualizationEnabled: renderedCount !== undefined && renderedCount < messageCount,
-  }), [messageCount, renderedCount]);
-
-  // --- Drag state ---
-  const panelRef = useRef<HTMLDivElement>(null);
-  const draggingRef = useRef(false);
-  const dragStartRef = useRef({ x: 0, y: 0 });
-
-  const handleDragStart = useCallback((e: React.MouseEvent) => {
-    // Don't start drag if clicking the close button
-    if ((e.target as HTMLElement).closest('button')) return;
-    draggingRef.current = true;
-    dragStartRef.current = { x: e.clientX, y: e.clientY };
-    e.preventDefault();
-  }, []);
-
-  useEffect(() => {
-    const onMouseMove = (e: MouseEvent) => {
-      if (!draggingRef.current) return;
-      const panel = panelRef.current;
-      if (!panel) return;
-      const dx = e.clientX - dragStartRef.current.x;
-      const dy = e.clientY - dragStartRef.current.y;
-      const rect = panel.getBoundingClientRect();
-      panel.style.left = `${rect.left + dx}px`;
-      panel.style.top = `${rect.top + dy}px`;
-      panel.style.right = 'auto';
-      panel.style.bottom = 'auto';
-      dragStartRef.current = { x: e.clientX, y: e.clientY };
-    };
-    const onMouseUp = () => {
-      draggingRef.current = false;
-    };
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-    return () => {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-    };
-  }, []);
-
-  if (!showStats && import.meta.env.PROD) {
-    return (
-      <Button
-        variant="ghost"
-        size="sm"
-        className="fixed bottom-4 left-4 z-50 h-7 w-7 rounded-full p-0 opacity-50 hover:opacity-100"
-        onClick={() => setShowStats(true)}
-        title="Show performance stats"
-      >
-        📊
-      </Button>
-    );
-  }
-
-  return (
-    <div
-      ref={panelRef}
-      className="fixed z-50 rounded-lg border bg-background/95 p-3 shadow-lg backdrop-blur-sm select-none"
-      style={{ bottom: '1rem', left: '1rem' }}
-    >
-      {/* Draggable header */}
-      <div
-        className="mb-2 flex items-center justify-between cursor-grab active:cursor-grabbing select-none"
-        onMouseDown={handleDragStart}
-      >
-        <h4 className="text-xs font-semibold text-foreground">Performance Stats</h4>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-5 w-5 p-0"
-          onClick={() => setShowStats(false)}
-        >
-          ✕
-        </Button>
-      </div>
-
-      <div className="space-y-1.5 text-xs">
-        <div className="flex items-center justify-between gap-4">
-          <span className="text-muted-foreground">Total messages:</span>
-          <Badge variant="secondary" className="font-mono">{stats.totalMessages}</Badge>
-        </div>
-
-        <div className="flex items-center justify-between gap-4">
-          <span className="text-muted-foreground">Rendered:</span>
-          <Badge variant="secondary" className="font-mono">{stats.renderedMessages}</Badge>
-        </div>
-
-        {stats.virtualizationEnabled && (
-          <div className="flex items-center justify-between gap-4">
-            <span className="text-muted-foreground">Skipped:</span>
-            <Badge variant="outline" className="font-mono text-green-600">
-              {stats.totalMessages - stats.renderedMessages}
-            </Badge>
-          </div>
-        )}
-
-        <div className="flex items-center justify-between gap-4">
-          <span className="text-muted-foreground">Virtualization:</span>
-          <Badge
-            variant={stats.virtualizationEnabled ? 'default' : 'destructive'}
-            className="text-[10px]"
-          >
-            {stats.virtualizationEnabled ? '✓ Enabled' : '✗ Disabled'}
-          </Badge>
-        </div>
-
-        {stats.virtualizationEnabled && (
-          <div className="pt-1 border-t border-border">
-            <span className="text-[10px] text-green-600">
-              ⚡ Rendering {((stats.renderedMessages / stats.totalMessages) * 100).toFixed(0)}% of messages
-            </span>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}