refactor: modularize client App.jsx tab components and update Netlify CSP

client/src/App.jsx

@@ -29,7 +29,12 @@ import {
   Legend,
   Filler
 } from 'chart.js';
-import { Line, Radar } from 'react-chartjs-2';
+
+import OverviewTab from './components/OverviewTab';
+import ChattersTab from './components/ChattersTab';
+import WordsTab from './components/WordsTab';
+import AdminTab from './components/AdminTab';
+import ModeratorTab from './components/ModeratorTab';
 
 // Register Chart.js components
 ChartJS.register(
@@ -48,239 +53,7 @@ ChartJS.register(
 const API_BASE = import.meta.env.VITE_API_URL || (import.meta.env.DEV ? 'http://localhost:3000' : '');
 const TWITCH_CHANNEL = 'winx_prinx';
 
-// 3D Galaxy Chatter Orbit Visualization
-function ChatterOrbit({ chatters }) {
-  const canvasRef = useRef(null);
-  const containerRef = useRef(null);
-  const particlesRef = useRef(new Map());
-  const avatarRef = useRef(null);
-
-  useEffect(() => {
-    // Load Avatar via backend proxy (avoids CORS issues with decapi.me)
-    if (!avatarRef.current) {
-      const img = new Image();
-      img.src = `${API_BASE}/api/avatar/${TWITCH_CHANNEL}`;
-      img.onload = () => { avatarRef.current = img; };
-      img.onerror = () => console.warn('[ChatterOrbit] Avatar load failed');
-    }
-  }, []);
-
-  useEffect(() => {
-    const safeChatters = Array.isArray(chatters) ? chatters : [];
-    
-    safeChatters.forEach(c => {
-      const username = c.username || c.display_name || 'unknown';
-      if (!particlesRef.current.has(username)) {
-        const isLurker = !c.has_chatted && !(c.message_count > 0);
-        // All particles go on the ring — tight band around ring radius ±8%
-        const ringNoise = (Math.random() - 0.5) * 0.16;
-        const radiusNorm = 1.0 + ringNoise;
-          
-        particlesRef.current.set(username, {
-          username,
-          displayName: c.display_name || username,
-          angle: Math.random() * Math.PI * 2,
-          radiusNorm,
-          speed: (0.0003 + Math.random() * 0.0004) * (Math.random() > 0.5 ? 1 : -1),
-          isMod: c.is_mod,
-          isSub: c.is_sub,
-          isLurker,
-          messageCount: c.message_count || 0,
-          isStreamer: username.toLowerCase() === 'winx_prinx',
-        });
-      } else {
-        const p = particlesRef.current.get(username);
-        const isLurker = !c.has_chatted && !(c.message_count > 0);
-        p.isLurker = isLurker;
-        p.messageCount = c.message_count || p.messageCount;
-        p.isMod = c.is_mod || p.isMod;
-        p.isSub = c.is_sub || p.isSub;
-      }
-    });
-  }, [chatters]);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const container = containerRef.current;
-    if (!canvas || !container) return;
-    const ctx = canvas.getContext('2d');
-    let animationId;
-
-    const HEIGHT = 320;
-
-    const resize = () => {
-      const dpr = window.devicePixelRatio || 1;
-      const rect = container.getBoundingClientRect();
-      canvas.width = rect.width * dpr;
-      canvas.height = HEIGHT * dpr;
-      canvas.style.width = `${rect.width}px`;
-      canvas.style.height = `${HEIGHT}px`;
-      ctx.scale(dpr, dpr);
-    };
-    resize();
-    window.addEventListener('resize', resize);
-
-    let hoverName = null;
-    let hoverX = 0;
-    let hoverY = 0;
-    let mouseX = -9999;
-    let mouseY = -9999;
-
-    const handleMouseMove = (e) => {
-      const rect = canvas.getBoundingClientRect();
-      mouseX = e.clientX - rect.left;
-      mouseY = e.clientY - rect.top;
-    };
-    const handleMouseLeave = () => { mouseX = -9999; mouseY = -9999; };
-    canvas.addEventListener('mousemove', handleMouseMove);
-    canvas.addEventListener('mouseleave', handleMouseLeave);
-
-    const animate = () => {
-      const width = canvas.width / (window.devicePixelRatio || 1);
-      const height = HEIGHT;
-      const cx = width / 2;
-      const cy = height / 2;
-
-      // Ring fills most of the canvas
-      const RX = width * 0.44;
-      const RY = height * 0.36;
-      const TILT = RY / RX;
-
-      // Solid near-black background
-      ctx.fillStyle = '#08080f';
-      ctx.fillRect(0, 0, width, height);
-
-      const particles = Array.from(particlesRef.current.values());
-
-      hoverName = null;
-
-      // Update positions
-      particles.forEach(p => {
-        p.angle += p.speed;
-        const r = p.radiusNorm * RX;
-        p.x = cx + Math.cos(p.angle) * r;
-        p.y = cy + Math.sin(p.angle) * r * TILT;
-        p.depth = (Math.sin(p.angle) * TILT + TILT) / (2 * TILT); // 0=back, 1=front
-
-        if (p.isStreamer) {
-          p.baseSize = 5;
-          p.color = '#A370F7';
-        } else if (p.isLurker) {
-          p.baseSize = 1;
-          p.color = null;
-        } else {
-          p.baseSize = Math.min(4, 1.5 + Math.log10((p.messageCount || 0) + 1) * 1.2);
-          p.color = p.isMod ? '#00F5D4' : p.isSub ? '#FF007F' : '#c8c8d8';
-        }
-        p.drawSize = p.baseSize;
-      });
-
-      // Sort back-to-front
-      particles.sort((a, b) => a.depth - b.depth);
-
-      // Draw particles
-      particles.forEach(p => {
-        const alpha = p.isLurker
-          ? 0.15 + p.depth * 0.45
-          : 0.5 + p.depth * 0.5;
-
-        let color;
-        if (p.isLurker) {
-          const brightness = Math.round(160 + p.depth * 60);
-          color = `rgba(${brightness},${brightness},${brightness + 20},${alpha})`;
-        } else {
-          color = p.color;
-        }
-
-        const dist = Math.hypot(mouseX - p.x, mouseY - p.y);
-        if (dist < p.drawSize + 6) {
-          hoverName = p.displayName;
-          hoverX = p.x;
-          hoverY = p.y;
-          p.drawSize = Math.max(p.drawSize * 2.5, 5);
-        }
-
-        ctx.globalAlpha = p.isLurker ? 1 : alpha;
-        ctx.shadowBlur = 0;
-
-        if (!p.isLurker && (p.isMod || p.isSub || p.isStreamer)) {
-          ctx.shadowBlur = 6;
-          ctx.shadowColor = color;
-        }
-
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.drawSize, 0, Math.PI * 2);
-        ctx.fillStyle = color;
-        ctx.fill();
-      });
-      ctx.globalAlpha = 1;
-      ctx.shadowBlur = 0;
-
-      // Draw Avatar on top
-      ctx.save();
-      ctx.beginPath();
-      ctx.arc(cx, cy, 26, 0, Math.PI * 2);
-      ctx.closePath();
-      ctx.shadowColor = '#9147ff';
-      ctx.shadowBlur = 24;
-      ctx.strokeStyle = 'rgba(145, 71, 255, 0.9)';
-      ctx.lineWidth = 2.5;
-      ctx.stroke();
-      ctx.shadowBlur = 0;
-      ctx.clip();
-      if (avatarRef.current) {
-        ctx.drawImage(avatarRef.current, cx - 26, cy - 26, 52, 52);
-      } else {
-        ctx.fillStyle = '#6441A5';
-        ctx.fill();
-      }
-      ctx.restore();
-
-      // Hover tooltip
-      if (hoverName) {
-        ctx.shadowBlur = 0;
-        ctx.globalAlpha = 1;
-        ctx.font = 'bold 11px Inter, sans-serif';
-        const tw = ctx.measureText(hoverName).width;
-        const tx = Math.min(hoverX + 12, width - tw - 20);
-        const ty = hoverY - 30 < 5 ? hoverY + 20 : hoverY - 30;
-        ctx.fillStyle = 'rgba(18,18,24,0.92)';
-        ctx.beginPath();
-        if (ctx.roundRect) ctx.roundRect(tx - 4, ty, tw + 16, 22, 5);
-        else ctx.rect(tx - 4, ty, tw + 16, 22);
-        ctx.fill();
-        ctx.strokeStyle = 'rgba(145,71,255,0.5)';
-        ctx.lineWidth = 1;
-        ctx.stroke();
-        ctx.fillStyle = '#efeff1';
-        ctx.fillText(hoverName, tx + 4, ty + 15);
-      }
-
-      animationId = requestAnimationFrame(animate);
-    };
-
-    animate();
-
-    return () => {
-      cancelAnimationFrame(animationId);
-      canvas.removeEventListener('mousemove', handleMouseMove);
-      canvas.removeEventListener('mouseleave', handleMouseLeave);
-      window.removeEventListener('resize', resize);
-    };
-  }, []);
-
-  return (
-    <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', width: '100%', position: 'relative' }}>
-      <canvas ref={canvasRef} style={{ borderRadius: '8px', display: 'block', width: '100%' }} />
-      <div style={{ position: 'absolute', bottom: '10px', right: '12px', fontSize: '11px', color: 'rgba(180,180,200,0.7)', display: 'flex', gap: '14px' }}>
-        <span><span style={{ display: 'inline-block', width: '6px', height: '6px', background: 'rgba(200,200,220,0.5)', borderRadius: '50%', marginRight: '4px'}}></span>Зрители</span>
-        <span><span style={{ display: 'inline-block', width: '6px', height: '6px', background: '#c8c8d8', borderRadius: '50%', marginRight: '4px'}}></span>Чатеры</span>
-        <span><span style={{ display: 'inline-block', width: '6px', height: '6px', background: '#FF007F', borderRadius: '50%', marginRight: '4px'}}></span>Сабы</span>
-        <span><span style={{ display: 'inline-block', width: '6px', height: '6px', background: '#00F5D4', borderRadius: '50%', marginRight: '4px'}}></span>Модеры</span>
-      </div>
-    </div>
-  );
-}
+// ChatterOrbit component has been extracted to components/ChatterOrbit.jsx
 
 export default function App() {
   const [activeTab, setActiveTab] = useState('overview');
@@ -893,1063 +666,72 @@ export default function App() {
           </div>
         ) : (
           <>
-            {/* OVERVIEW TAB */}
             {activeTab === 'overview' && (
-              <div className="tab-content">
-                {/* Stats row */}
-                <div className="grid-4col" style={{ marginBottom: '2rem' }}>
-                  <div className="stat-card" style={{ '--accent-color': 'var(--color-brand)' }}>
-                    <div className="stat-card-inner">
-                      <div style={{ minWidth: 0, flex: 1, marginRight: '0.5rem' }}>
-                        <div className="stat-label">Сообщений в чате</div>
-                        <div className="stat-value">{statsSummary.messages.toLocaleString()}</div>
-                      </div>
-                      <div className="stat-icon-wrapper"><MessageSquare size={22} style={{ color: 'var(--color-brand)' }} /></div>
-                    </div>
-                  </div>
-                  <div className="stat-card" style={{ '--accent-color': 'var(--color-text-accent)' }}>
-                    <div className="stat-card-inner">
-                      <div style={{ minWidth: 0, flex: 1, marginRight: '0.5rem' }}>
-                        <div className="stat-label">Уникальных зрителей</div>
-                        <div className="stat-value">{statsSummary.uniqueChatters.toLocaleString()}</div>
-                      </div>
-                      <div className="stat-icon-wrapper"><Users size={22} style={{ color: 'var(--color-text-accent)' }} /></div>
-                    </div>
-                  </div>
-                  <div className="stat-card" style={{ '--accent-color': '#ff007f' }}>
-                    <div className="stat-card-inner">
-                      <div style={{ minWidth: 0, flex: 1, marginRight: '0.5rem' }}>
-                        <div className="stat-label">Самый активный чатер</div>
-                        <div 
-                          className="stat-value" 
-                          title={statsSummary.mostActiveChatter || ''}
-                          style={{ 
-                            fontSize: (statsSummary.mostActiveChatter || '').length > 15 ? '1.05rem' : '1.25rem', 
-                            letterSpacing: '-0.02em', 
-                            overflow: 'hidden', 
-                            textOverflow: 'ellipsis', 
-                            whiteSpace: 'nowrap' 
-                          }}
-                        >
-                          {statsSummary.mostActiveChatter || '—'}
-                        </div>
-                      </div>
-                      <div className="stat-icon-wrapper"><Users size={22} style={{ color: '#ff007f' }} /></div>
-                    </div>
-                  </div>
-                  <div className="stat-card" style={{ '--accent-color': '#00f5d4' }}>
-                    <div className="stat-card-inner">
-                      <div style={{ minWidth: 0, flex: 1, marginRight: '0.5rem' }}>
-                        <div className="stat-label">Распознано слов (голос)</div>
-                        <div className="stat-value">{statsSummary.voiceWordsCount.toLocaleString()}</div>
-                      </div>
-                      <div className="stat-icon-wrapper"><Mic size={22} style={{ color: '#00f5d4' }} /></div>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="grid-2col" style={{ gridTemplateColumns: '2fr 1fr' }}>
-                  {/* Activity graph */}
-                  <div className="panel">
-                    <div className="panel-header">
-                      <h3 className="panel-title"><Activity size={20} /> Активность чата</h3>
-                      <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
-                        <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>выберите конкретный стрим для графика</span>
-                        {activityData.length > 0 && (
-                          <button 
-                            className="btn btn-secondary" 
-                            style={{ fontSize: '0.75rem', padding: '0.3rem 0.6rem' }} 
-                            onClick={startGraphRace}
-                            disabled={isRacing}
-                          >
-                            <Activity size={12} className={isRacing ? "pulse" : ""} /> {isRacing ? 'Гонка идет...' : 'Запустить гонку'}
-                          </button>
-                        )}
-                      </div>
-                    </div>
-                    {selectedStreamId === 'all' ? (
-                      <div className="status-msg" style={{ height: '300px' }}>
-                        <BarChart2 size={36} className="status-msg-icon" />
-                        <p>Для просмотра временного графика выберите конкретный стрим в верхнем меню</p>
-                      </div>
-                    ) : activityData.length === 0 ? (
-                      <div className="status-msg" style={{ height: '300px' }}>
-                        <MessageSquare size={36} className="status-msg-icon" />
-                        <p>В этом стриме пока не было сообщений</p>
-                      </div>
-                    ) : (
-                      <div className="chart-container">
-                        <Line data={chartDataConfig} options={chartOptions} />
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Quick Words list */}
-                  <div className="panel">
-                    <div className="panel-header">
-                      <h3 className="panel-title">
-                        <Mic size={18} style={{ color: 'var(--color-text-accent)' }} /> Голос стримера (Топ)
-                      </h3>
-                    </div>
-                    {voiceWords.length === 0 ? (
-                      <div className="status-msg" style={{ height: '300px', padding: '1rem' }}>
-                        <Mic size={28} className="status-msg-icon" />
-                        <p>Слова пока не распознаны. Запустите local_worker на ПК.</p>
-                      </div>
-                    ) : (
-                      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', maxHeight: '320px', overflowY: 'auto', paddingRight: '4px' }}>
-                        {voiceWords.slice(0, 7).map((w, idx) => (
-                          <div key={idx} style={{ display: 'flex', justifyContent: 'space-between', padding: '0.5rem 0.75rem', backgroundColor: 'var(--color-bg-base)', border: '1px solid var(--color-border)', borderRadius: '6px', alignItems: 'center' }}>
-                            <span style={{ fontWeight: 600, color: 'var(--color-text-main)' }}>#{idx+1} {w.word}</span>
-                            <span className="badge badge-streamer">{w.word_count} раз</span>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
+              <OverviewTab
+                statsSummary={statsSummary}
+                selectedStreamId={selectedStreamId}
+                activityData={activityData}
+                isRacing={isRacing}
+                startGraphRace={startGraphRace}
+                chartDataConfig={chartDataConfig}
+                chartOptions={chartOptions}
+                voiceWords={voiceWords}
+              />
             )}
 
-            {/* CHATTERS TAB */}
             {activeTab === 'chatters' && (
-              <div className="grid-2col tab-content" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: '1.5rem', alignItems: 'start' }}>
-                <div className="panel">
-                  <div className="panel-header">
-                    <h3 className="panel-title"><Users size={20} /> Орбита зрителей</h3>
-                  </div>
-                  <div style={{ display: 'flex', justifyContent: 'center', padding: '1rem 0' }}>
-                    <ChatterOrbit chatters={chatters} />
-                  </div>
-                </div>
-
-                <div className="panel">
-                  <div className="panel-header">
-                    <h3 className="panel-title"><Users size={20} /> Лидеры чата по активности</h3>
-                    <div className="search-container">
-                      <Search size={16} className="search-icon" />
-                      <input 
-                        type="text" 
-                        className="search-input" 
-                        placeholder="Поиск зрителя..."
-                        value={chattersSearch}
-                        onChange={(e) => setChattersSearch(e.target.value)}
-                      />
-                    </div>
-                  </div>
-
-                  {chatters.length === 0 ? (
-                    <div className="status-msg">
-                      <Users size={40} className="status-msg-icon" />
-                      <p>Нет данных о зрителях для этого периода</p>
-                    </div>
-                  ) : (
-                    <div className="table-wrapper">
-                      <table className="data-table">
-                        <thead>
-                          <tr>
-                            <th>Место</th>
-                            <th>Никнейм</th>
-                            <th>Роли</th>
-                            <th>Сообщений</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {chatters
-                            .filter(c => {
-                              const disp = c.display_name || c.username || '';
-                              const user = c.username || '';
-                              return disp.toLowerCase().includes(chattersSearch.toLowerCase()) || 
-                                     user.toLowerCase().includes(chattersSearch.toLowerCase());
-                            })
-                            .map((c, idx) => (
-                              <tr key={idx} className="chatter-row">
-                                <td style={{ fontWeight: 700, width: '80px', color: idx < 3 ? 'var(--color-brand)' : 'var(--color-text-muted)' }}>
-                                  #{idx + 1}
-                                </td>
-                                <td style={{ fontWeight: 600 }}>{c.display_name || c.username || '—'}</td>
-                                <td>
-                                  <div style={{ display: 'flex', gap: '0.4rem' }}>
-                                    {(c.username || '').toLowerCase() === TWITCH_CHANNEL && (
-                                      <span className="badge badge-streamer">Стример</span>
-                                    )}
-                                    {c.is_mod ? <span className="badge badge-mod">Мод</span> : null}
-                                    {c.is_vip && !c.is_mod ? <span className="badge badge-vip">VIP</span> : null}
-                                    {c.is_sub && !c.is_mod && !c.is_vip ? <span className="badge badge-sub">Саб</span> : null}
-                                  </div>
-                                </td>
-                                <td style={{ fontWeight: 700, color: 'var(--color-text-accent)' }}>
-                                  {c.message_count.toLocaleString()}
-                                </td>
-                              </tr>
-                            ))}
-                        </tbody>
-                      </table>
-                    </div>
-                  )}
-                </div>
-              </div>
+              <ChattersTab
+                chatters={chatters}
+                chattersSearch={chattersSearch}
+                setChattersSearch={setChattersSearch}
+                TWITCH_CHANNEL={TWITCH_CHANNEL}
+              />
             )}
 
-            {/* WORDS TAB */}
             {activeTab === 'words' && (
-              <div className="panel tab-content">
-                <div className="panel-header">
-                  <h3 className="panel-title"><Mic size={20} /> Частотный словарь</h3>
-                  
-                  <div className="nav-tabs" style={{ background: 'var(--color-bg-base)', padding: '0.2rem', borderRadius: '8px', border: '1px solid var(--color-border)' }}>
-                    <button 
-                      className={`tab-btn ${wordType === 'voice' ? 'active' : ''}`}
-                      onClick={() => setWordType('voice')}
-                      style={{ fontSize: '0.8rem', padding: '0.4rem 0.8rem' }}
-                    >
-                      <Volume2 size={14} /> Из Голоса (Whisper)
-                    </button>
-                    <button 
-                      className={`tab-btn ${wordType === 'chat' ? 'active' : ''}`}
-                      onClick={() => setWordType('chat')}
-                      style={{ fontSize: '0.8rem', padding: '0.4rem 0.8rem' }}
-                    >
-                      <MessageSquare size={14} /> Из Чата (Текстом)
-                    </button>
-                  </div>
-                </div>
-
-                <p style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem', marginBottom: '1.5rem', marginTop: '-0.75rem' }}>
-                  {wordType === 'voice' 
-                    ? 'Слова, которые стример произнес в микрофон (распознанные через Whisper на локальном ПК).' 
-                    : 'Слова, которые зрители написали в текстовый чат Twitch.'}
-                </p>
-
-                {(() => {
-                  const currentWordsList = wordType === 'voice' 
-                    ? (Array.isArray(voiceWords) ? voiceWords : []) 
-                    : (Array.isArray(chatWords) ? chatWords : []);
-                  if (currentWordsList.length === 0) {
-                    return (
-                      <div className="status-msg">
-                        <Mic size={40} className="status-msg-icon" />
-                        <p>Нет собранных слов для выбранного стрима</p>
-                      </div>
-                    );
-                  }
-                                    const counts = currentWordsList.map(x => x.word_count);
-                  const maxCount = Math.max(...counts, 1);
-                  const minCount = Math.min(...counts, 1);
-
-                  // Helper for Russian pluralization
-                  const getRussianPlural = (count) => {
-                    const lastDigit = count % 10;
-                    const lastTwoDigits = count % 100;
-                    if (lastTwoDigits >= 11 && lastTwoDigits <= 19) {
-                      return 'раз';
-                    }
-                    if (lastDigit === 1) {
-                      return 'раз';
-                    }
-                    if (lastDigit >= 2 && lastDigit <= 4) {
-                      return 'раза';
-                    }
-                    return 'раз';
-                  };
-
-                  // Color assignment based on word frequency: purple gradient
-                  const getWordColor = (count) => {
-                    const scale = maxCount === minCount ? 1 : (count - minCount) / (maxCount - minCount);
-                    // Scale saturation from 35% (desaturated/white-lavender) to 100% (saturated purple)
-                    const sat = Math.round(35 + scale * 65);
-                    // Scale lightness from 92% (light/white-ish) to 60% (vivid deep purple)
-                    const light = Math.round(92 - scale * 32);
-                    return `hsl(265, ${sat}%, ${light}%)`;
-                  };
-
-                  // Layout calculations with collision avoidance on stretched elliptical spiral
-                  const placedBoxes = [];
-                  const laidOutWords = [];
-                  
-                  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
-                  const stretchX = isMobile ? 1.4 : 2.8; 
-                  const stretchY = 1.0;
-                  const paddingX = isMobile ? 6 : 12; 
-                  const paddingY = isMobile ? 4 : 8; 
-                  const fontScale = isMobile ? 0.45 : 1.0;
-                  const remToPx = 16;
-
-                  const centerGroupThreshold = wordType === 'chat' ? 250 : 500;
-                  // Identify center group: words with count within threshold of the max count,
-                  // but ONLY if the top count is >= threshold. Also cap center group size to at most 3 words.
-                  const centerGroupWords = currentWordsList.filter((w, idx) => 
-                    idx === 0 || (maxCount >= centerGroupThreshold && (maxCount - w.word_count) < centerGroupThreshold && idx < 3)
-                  );
-                  const otherWordsList = currentWordsList.filter((w, idx) => 
-                    !(idx === 0 || (maxCount >= centerGroupThreshold && (maxCount - w.word_count) < centerGroupThreshold && idx < 3))
-                  );
-                  
-                  const maxOtherCount = otherWordsList.length > 0 ? Math.max(...otherWordsList.map(x => x.word_count)) : 1;
-                  const minOtherCount = otherWordsList.length > 0 ? Math.min(...otherWordsList.map(x => x.word_count)) : 1;
-                  const minCenterCount = Math.min(...centerGroupWords.map(x => x.word_count));
-
-                  // Function to estimate word width factor based on wide/narrow letters
-                  const getWordWidthFactor = (word) => {
-                    let factor = 0;
-                    const wideChars = /[мжшщыюяwm]/i;
-                    const narrowChars = /[ilj1!|т]/i;
-                    for (const char of word) {
-                      if (wideChars.test(char)) {
-                        factor += 0.75;
-                      } else if (narrowChars.test(char)) {
-                        factor += 0.35;
-                      } else {
-                        factor += 0.55;
-                      }
-                    }
-                    return factor;
-                  };
-
-                  for (let i = 0; i < currentWordsList.length; i++) {
-                    const w = currentWordsList[i];
-                    const isCenterGroup = i === 0 || (maxCount >= centerGroupThreshold && (maxCount - w.word_count) < centerGroupThreshold && i < 3);
-                    
-                    let fontSize;
-                    let fontWeight;
-                    let scaleValue = 0;
-                    
-                    // Scale down the entire galaxy if the absolute max frequency is low (e.g. less than 200)
-                    // If maxCount is 20, galaxyScale is ~0.65. If 200+, it's 1.0.
-                    const galaxyScale = Math.min(Math.max(maxCount / 200, 0), 1.0) * 0.35 + 0.65;
-
-                    if (isCenterGroup) {
-                      // Scale font size within center group: ranges from 4.5rem to 6.2rem
-                      const centerScale = maxCount === minCenterCount ? 1 : (w.word_count - minCenterCount) / (maxCount - minCenterCount);
-                      fontSize = 4.5 + centerScale * 1.7;
-                      fontWeight = '900';
-                      scaleValue = centerScale;
-                    } else {
-                      // Scale font size within other words: ranges from 1.1rem to 3.2rem
-                      const scale = maxOtherCount === minOtherCount ? 1 : (w.word_count - minOtherCount) / (maxOtherCount - minOtherCount);
-                      scaleValue = Math.pow(scale, 1.4);
-                      fontSize = 1.1 + scaleValue * 2.1;
-                      fontWeight = fontSize > 2.0 ? '700' : (fontSize > 1.4 ? '600' : '500');
-                    }
-                    
-                    fontSize = fontSize * fontScale * galaxyScale;
-                    
-                    // Precise width calculation based on custom width factors
-                    const wordWidth = fontSize * getWordWidthFactor(w.word) * remToPx;
-                    const wordHeight = fontSize * 1.1 * remToPx;
-                    
-                    let x = 0;
-                    let y = 0;
-                    
-                    // Generate a stable hash for the word to randomize angle and jitter
-                    let hash = 0;
-                    for (let j = 0; j < w.word.length; j++) {
-                      hash = w.word.charCodeAt(j) + ((hash << 5) - hash);
-                    }
-                    hash = Math.abs(hash);
-
-                    // Search for position starting from r = 0.
-                    // Since center group words are processed first, they cluster tightly around (0,0).
-                    let found = false;
-                    const rStep = 1.1; 
-                    
-                    for (let attempt = 0; attempt < 1200; attempt++) {
-                      const startAngle = (hash % 100) * 0.06283; // 0 to 2*PI
-                      const angle = startAngle + attempt * 0.15;
-                      const r = (i === 0 && attempt === 0) ? 0 : (45 + rStep * attempt);
-                      
-                      x = r * Math.cos(angle) * stretchX;
-                      y = r * Math.sin(angle) * stretchY;
-                      
-                      // Add coordinate noise/jitter (except for the absolute top word at the center)
-                      if (r > 0) {
-                        x += Math.sin(hash * 0.5 + attempt) * 6;
-                        y += Math.cos(hash * 0.8 + attempt) * 4;
-                      }
-                      
-                      let collision = false;
-                      for (const box of placedBoxes) {
-                        const halfW1 = wordWidth / 2;
-                        const halfH1 = wordHeight / 2;
-                        const halfW2 = box.w / 2;
-                        const halfH2 = box.h / 2;
-                        
-                        if (Math.abs(x - box.x) < (halfW1 + halfW2 + paddingX) &&
-                            Math.abs(y - box.y) < (halfH1 + halfH2 + paddingY)) {
-                          collision = true;
-                          break;
-                        }
-                      }
-                      
-                      if (!collision) {
-                        found = true;
-                        break;
-                      }
-                    }
-                    
-                    placedBoxes.push({ x: x, y: y, w: wordWidth, h: wordHeight });
-                    
-                    const color = getWordColor(w.word_count);
-                    
-                    // Floating parameters
-                    const duration = 4.5 + (i % 3) + (i % 4) * 0.4; // 4.5s to 8.5s
-                    const delay = -((i * 1.3) % 7); // negative delay to start asynchronously
-                    const amount = 3 + (i % 4); // 3px to 6px float amount
-                    
-                    laidOutWords.push({
-                      word: w.word,
-                      count: w.word_count,
-                      x: Math.round(x),
-                      y: Math.round(y),
-                      fontSize: `${fontSize}rem`,
-                      fontWeight: fontWeight,
-                      color: color,
-                      scale: scaleValue,
-                      isCenterGroup: isCenterGroup,
-                      duration: `${duration}s`,
-                      delay: `${delay}s`,
-                      amount: `${amount}px`
-                    });
-                  }
-
-                  return (
-                    <div className="word-galaxy-container">
-                      {laidOutWords.map((w, idx) => (
-                        <div
-                          key={idx}
-                          className="word-galaxy-tag"
-                          style={{
-                            '--x': `${w.x}px`,
-                            '--y': `${w.y}px`,
-                            '--float-duration': w.duration,
-                            '--float-delay': w.delay,
-                            '--float-amount': w.amount,
-                            fontSize: w.fontSize,
-                            fontWeight: w.fontWeight,
-                            color: w.color,
-                            opacity: 0.95, // High opacity so purple colors are bright and vivid
-                            zIndex: w.isCenterGroup ? 25 : Math.round(10 + w.scale * 15)
-                          }}
-                        >
-                          {w.word}
-                          <div className="word-tooltip">
-                            {w.count} {getRussianPlural(w.count)}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  );
-                })()}
-              </div>
+              <WordsTab
+                wordType={wordType}
+                setWordType={setWordType}
+                voiceWords={voiceWords}
+                chatWords={chatWords}
+              />
             )}
 
-            {/* ADMIN TAB */}
             {activeTab === 'admin' && (
-              <div className="tab-content">
-                        <h2 style={{ fontSize: '1.5rem', fontWeight: 700, marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-                          <Settings size={24} style={{ color: 'var(--color-brand)' }} /> Панель администратора
-                        </h2>
-
-                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '1.5rem', marginBottom: '2rem' }}>
-                          
-                          {/* Left: Stream management */}
-                          <div className="panel" style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
-                            <div className="panel-header">
-                              <h3 className="panel-title">Управление стримами</h3>
-                            </div>
-
-                            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-                              <label style={{ fontSize: '0.85rem', fontWeight: 600, color: 'var(--color-text-muted)' }}>Выбрать стрим для редактирования или удаления:</label>
-                              <select 
-                                className="dark-input"
-                                value={adminSelectedStreamId}
-                                onChange={(e) => setAdminSelectedStreamId(e.target.value)}
-                              >
-                                <option value="">-- Выберите стрим --</option>
-                                {streams.map((stream) => (
-                                  <option key={stream.id} value={stream.id}>
-                                    {stream.title || 'Без названия'} ({new Date(stream.start_time).toLocaleDateString('ru-RU')} {new Date(stream.start_time).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })})
-                                  </option>
-                                ))}
-                              </select>
-                            </div>
-
-                            {(() => {
-                              const activeStream = streams.find(s => s.id === parseInt(adminSelectedStreamId));
-                              if (!activeStream) return (
-                                <div style={{ padding: '1.5rem', textAlign: 'center', color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
-                                  Выберите стрим в выпадающем списке выше для выполнения действий.
-                                </div>
-                              );
-
-                              const isLive = !activeStream.end_time;
-                              const statusLabel = 
-                                activeStream.backfill_status === 'completed' ? 'Импортирован полностью' :
-                                activeStream.backfill_status === 'pending' ? 'В очереди воркера (ожидание)' :
-                                activeStream.backfill_status === 'live' ? 'В эфире (live)' : activeStream.backfill_status;
-
-                              const statusColor = 
-                                activeStream.backfill_status === 'completed' ? 'var(--color-success, #00f2fe)' :
-                                activeStream.backfill_status === 'pending' ? 'var(--color-warning, #f1c40f)' : 'var(--color-primary)';
-
-                              return (
-                                <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
-                                  <div style={{ fontSize: '0.8rem', padding: '0.75rem', background: 'rgba(255,255,255,0.02)', borderRadius: '6px', border: '1px solid var(--color-border)' }}>
-                                    <p style={{ margin: '0 0 0.4rem 0' }}><strong>ID сессии:</strong> {activeStream.id}</p>
-                                    <p style={{ margin: '0 0 0.4rem 0' }}><strong>Статус импорта VOD:</strong> <span style={{ color: statusColor, fontWeight: 'bold' }}>{statusLabel}</span></p>
-                                    <p style={{ margin: '0 0 0.4rem 0' }}><strong>Twitch VOD ID:</strong> {activeStream.twitch_vod_id || 'Отсутствует'}</p>
-                                    <p style={{ margin: 0 }}><strong>Начало:</strong> {new Date(activeStream.start_time).toLocaleString('ru-RU')}</p>
-                                  </div>
-
-                                  {/* Edit Metadata */}
-                                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', padding: '1rem', background: 'rgba(255,255,255,0.01)', borderRadius: '6px', border: '1px solid rgba(255,255,255,0.03)' }}>
-                                    <h4 style={{ margin: 0, fontSize: '0.9rem', fontWeight: 600 }}>Редактирование названия / категории</h4>
-                                    
-                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
-                                      <label style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>Название стрима:</label>
-                                      <input 
-                                        type="text"
-                                        className="dark-input"
-                                        value={editTitle}
-                                        onChange={(e) => setEditTitle(e.target.value)}
-                                      />
-                                    </div>
-
-                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
-                                      <label style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>Категория (игра):</label>
-                                      <input 
-                                        type="text"
-                                        className="dark-input"
-                                        value={editCategory}
-                                        onChange={(e) => setEditCategory(e.target.value)}
-                                      />
-                                    </div>
-
-                                    <button 
-                                      className="btn btn-secondary" 
-                                      style={{ width: '100%', padding: '0.5rem', marginTop: '0.25rem' }}
-                                      disabled={savingMetadata || !editTitle.trim()}
-                                      onClick={async () => {
-                                        setSavingMetadata(true);
-                                        try {
-                                          const res = await fetch(`${API_BASE}/api/streams/${activeStream.id}`, {
-                                            method: 'PUT',
-                                            headers: { 'Content-Type': 'application/json' },
-                                            body: JSON.stringify({ title: editTitle, category: editCategory }),
-                                            credentials: 'include'
-                                          });
-                                          const data = await res.json();
-                                          if (data.success) {
-                                            alert('Метаданные стрима успешно обновлены!');
-                                            fetchStreams();
-                                          } else {
-                                            alert(`Ошибка: ${data.error}`);
-                                          }
-                                        } catch (e) {
-                                          alert('Ошибка при обновлении метаданных.');
-                                        } finally {
-                                          setSavingMetadata(false);
-                                        }
-                                      }}
-                                    >
-                                      {savingMetadata ? 'Сохранение...' : 'Сохранить изменения'}
-                                    </button>
-                                  </div>
-
-                                  {/* VOD Actions (Only if VOD is present) */}
-                                  {activeStream.twitch_vod_id && (
-                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
-                                      <h4 style={{ margin: 0, fontSize: '0.9rem', fontWeight: 600 }}>Действия импорта VOD:</h4>
-                                      <div style={{ display: 'flex', gap: '0.5rem' }}>
-                                        <button
-                                          className="btn btn-secondary"
-                                          style={{ flex: 1, fontSize: '0.75rem', padding: '0.5rem' }}
-                                          onClick={async () => {
-                                            if (!confirm(`Запустить заполнение пропусков для стрима "${activeStream.title}"? Воркер докачает пропущенный чат и Whisper-речь.`)) return;
-                                            try {
-                                              const res = await fetch(`${API_BASE}/api/streams/reset-backfill`, {
-                                                method: 'POST',
-                                                headers: { 'Content-Type': 'application/json' },
-                                                body: JSON.stringify({ streamId: activeStream.id, mode: 'gap_fill' }),
-                                                credentials: 'include'
-                                              });
-                                              const data = await res.json();
-                                              if (data.success) {
-                                                alert('Статус сброшен на "ожидание". Воркер скоро начнет дозаполнение!');
-                                                fetchStreams();
-                                              } else {
-                                                alert(`Ошибка: ${data.error}`);
-                                              }
-                                            } catch (e) {
-                                              alert('Ошибка при запуске дозаполнения VOD.');
-                                            }
-                                          }}
-                                        >
-                                          Заполнить пропуски VOD
-                                        </button>
-                                        <button
-                                          className="btn btn-secondary"
-                                          style={{ flex: 1, fontSize: '0.75rem', padding: '0.5rem' }}
-                                          onClick={async () => {
-                                            if (!confirm(`Внимание: это полностью удалит сохраненные сообщения чата и слова Whisper для стрима "${activeStream.title}" и заново запустит весь импорт VOD с 0-й секунды. Вы уверены?`)) return;
-                                            try {
-                                              const res = await fetch(`${API_BASE}/api/streams/reset-backfill`, {
-                                                method: 'POST',
-                                                headers: { 'Content-Type': 'application/json' },
-                                                body: JSON.stringify({ streamId: activeStream.id, mode: 'full_rebuild' }),
-                                                credentials: 'include'
-                                              });
-                                              const data = await res.json();
-                                              if (data.success) {
-                                                alert('Данные очищены. Стрим поставлен на полный переимпорт воркером!');
-                                                fetchStreams();
-                                              } else {
-                                                alert(`Ошибка: ${data.error}`);
-                                              }
-                                            } catch (e) {
-                                              alert('Ошибка при запуске переимпорта.');
-                                            }
-                                          }}
-                                        >
-                                          Полный переимпорт VOD
-                                        </button>
-                                      </div>
-                                    </div>
-                                  )}
-
-                                  {/* Delete Button */}
-                                  <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: '1rem', marginTop: '0.5rem' }}>
-                                    <button
-                                      className="btn btn-danger"
-                                      style={{ 
-                                        width: '100%', 
-                                        display: 'flex', 
-                                        alignItems: 'center', 
-                                        justifyContent: 'center', 
-                                        gap: '0.4rem',
-                                        backgroundColor: 'rgba(231, 76, 60, 0.15)',
-                                        color: '#e74c3c',
-                                        border: '1px solid rgba(231, 76, 60, 0.3)',
-                                        borderRadius: '4px',
-                                        cursor: 'pointer',
-                                        padding: '0.6rem'
-                                      }}
-                                      disabled={deletingStream}
-                                      onClick={async () => {
-                                        if (!confirm(`ВНИМАНИЕ: Вы уверены, что хотите полностью УДАЛИТЬ стрим "${activeStream.title}"? Это действие сотрет всю связанную статистику (чат, слова Whisper, модерацию) из базы данных навсегда и безвозвратно!`)) return;
-                                        if (!confirm(`ПОСЛЕДНЕЕ ПРЕДУПРЕЖДЕНИЕ: Вы действительно хотите стереть стрим ID ${activeStream.id} из базы? Восстановление невозможно.`)) return;
-                                        
-                                        setDeletingStream(true);
-                                        try {
-                                          const res = await fetch(`${API_BASE}/api/streams/${activeStream.id}`, {
-                                            method: 'DELETE',
-                                            credentials: 'include'
-                                          });
-                                          const data = await res.json();
-                                          if (data.success) {
-                                            alert('Стрим успешно удален из базы данн��х!');
-                                            setAdminSelectedStreamId('');
-                                            fetchStreams();
-                                          } else {
-                                            alert(`Ошибка: ${data.error}`);
-                                          }
-                                        } catch (e) {
-                                          alert('Ошибка при удалении стрима.');
-                                        } finally {
-                                          setDeletingStream(false);
-                                        }
-                                      }}
-                                    >
-                                      <Trash2 size={16} /> Удалить стрим полностью
-                                    </button>
-                                  </div>
-                                </div>
-                              );
-                            })()}
-                          </div>
-
-                          {/* Right: Global actions and Stats */}
-                          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
-                            
-                            {/* Global Actions Panel */}
-                            <div className="panel">
-                              <div className="panel-header">
-                                <h3 className="panel-title">Глобальные действия</h3>
-                              </div>
-                              <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                                
-                                {/* Twitch VOD Sync */}
-                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: '0.75rem', borderBottom: '1px solid var(--color-border)' }}>
-                                  <div>
-                                    <h4 style={{ margin: 0, fontSize: '0.85rem', fontWeight: 600 }}>Синхронизация Twitch VOD</h4>
-                                    <p style={{ margin: 0, fontSize: '0.7rem', color: 'var(--color-text-muted)' }}>Запросить последние 20 архивов из Twitch API.</p>
-                                  </div>
-                                  <button 
-                                    className="btn btn-secondary"
-                                    style={{ fontSize: '0.75rem', padding: '0.4rem 0.8rem' }}
-                                    disabled={syncingVods}
-                                    onClick={async () => {
-                                      setSyncingVods(true);
-                                      try {
-                                        const res = await fetch(`${API_BASE}/api/streams/sync-vods`, { method: 'POST', credentials: 'include' });
-                                        const data = await res.json();
-                                        if (data.success) {
-                                          alert(`Успешно импортировано ${data.count} стримов!`);
-                                          fetchStreams();
-                                        } else {
-                                          alert(`Ошибка: ${data.error}`);
-                                        }
-                                      } catch (e) {
-                                        alert('Ошибка при синхронизации VOD.');
-                                      } finally {
-                                        setSyncingVods(false);
-                                      }
-                                    }}
-                                  >
-                                    <RefreshCw size={12} className={syncingVods ? "spin" : ""} /> {syncingVods ? 'Синхронизация...' : 'Синхронизировать VOD'}
-                                  </button>
-                                </div>
-
-                                {/* Database Cleanup */}
-                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                                  <div>
-                                    <h4 style={{ margin: 0, fontSize: '0.85rem', fontWeight: 600 }}>Очистить пустые стримы</h4>
-                                    <p style={{ margin: 0, fontSize: '0.7rem', color: 'var(--color-text-muted)' }}>Удалить сессии с 0 сообщениями и 0 слов.</p>
-                                  </div>
-                                  <button 
-                                    className="btn btn-secondary"
-                                    style={{ fontSize: '0.75rem', padding: '0.4rem 0.8rem' }}
-                                    disabled={cleaningStreams}
-                                    onClick={async () => {
-                                      if (!confirm('Вы де��ствительно хотите удалить все пустые стримы (в которых нет ни сообщений в чате, ни распознанных слов)? Это очистит тестовый мусор из списка.')) return;
-                                      setCleaningStreams(true);
-                                      try {
-                                        const res = await fetch(`${API_BASE}/api/admin/cleanup`, { method: 'POST', credentials: 'include' });
-                                        const data = await res.json();
-                                        if (data.success) {
-                                          alert(`Успешно очищено. Удалено пустых стримов: ${data.count}`);
-                                          fetchStreams();
-                                          fetchAdminStats();
-                                        } else {
-                                          alert(`Ошибка: ${data.error}`);
-                                        }
-                                      } catch (e) {
-                                        alert('Ошибка при очистке стримов.');
-                                      } finally {
-                                        setCleaningStreams(false);
-                                      }
-                                    }}
-                                  >
-                                    Очистить пустые стримы
-                                  </button>
-                                </div>
-
-                              </div>
-                            </div>
-
-                            {/* System Statistics Panel */}
-                            <div className="panel">
-                              <div className="panel-header">
-                                <h3 className="panel-title">Системная статистика</h3>
-                              </div>
-                              
-                              {loadingAdminStats || !adminStats ? (
-                                <div style={{ padding: '1rem', textAlign: 'center', color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
-                                  Загрузка статистики...
-                                </div>
-                              ) : (
-                                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', fontSize: '0.8rem' }}>
-                                  <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '0.4rem', borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
-                                    <span style={{ color: 'var(--color-text-muted)' }}>Режим базы данных:</span>
-                                    <strong style={{ color: 'var(--color-brand)' }}>{adminStats.dbMode.toUpperCase()}</strong>
-                                  </div>
-                                  {adminStats.dbMode === 'sqlite' && (
-                                    <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '0.4rem', borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
-                                      <span style={{ color: 'var(--color-text-muted)' }}>Размер файла SQLite:</span>
-                                      <strong>{adminStats.dbSizeMb} МБ</strong>
-                                    </div>
-                                  )}
-                                  <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '0.4rem', borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
-                                    <span style={{ color: 'var(--color-text-muted)' }}>Всего стримов в базе:</span>
-                                    <strong>{adminStats.totalStreams}</strong>
-                                  </div>
-                                  <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '0.4rem', borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
-                                    <span style={{ color: 'var(--color-text-muted)' }}>Всего сообщений чата:</span>
-                                    <strong>{adminStats.totalMessages.toLocaleString()}</strong>
-                                  </div>
-                                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                                    <span style={{ color: 'var(--color-text-muted)' }}>Всего голосовых слов:</span>
-                                    <strong>{adminStats.totalVoiceWords.toLocaleString()}</strong>
-                                  </div>
-                                  
-                                  <button 
-                                    className="btn btn-secondary"
-                                    style={{ width: '100%', fontSize: '0.75rem', padding: '0.4rem', marginTop: '0.5rem' }}
-                                    onClick={fetchAdminStats}
-                                  >
-                                    Обновить статистику
-                                  </button>
-                                </div>
-                              )}
-                            </div>
-
-                          </div>
-
-                </div>
-              </div>
+              <AdminTab
+                adminSelectedStreamId={adminSelectedStreamId}
+                setAdminSelectedStreamId={setAdminSelectedStreamId}
+                streams={streams}
+                editTitle={editTitle}
+                setEditTitle={setEditTitle}
+                editCategory={editCategory}
+                setEditCategory={setEditCategory}
+                savingMetadata={savingMetadata}
+                setSavingMetadata={setSavingMetadata}
+                deletingStream={deletingStream}
+                setDeletingStream={setDeletingStream}
+                syncingVods={syncingVods}
+                setSyncingVods={setSyncingVods}
+                cleaningStreams={cleaningStreams}
+                setCleaningStreams={setCleaningStreams}
+                loadingAdminStats={loadingAdminStats}
+                adminStats={adminStats}
+                fetchAdminStats={fetchAdminStats}
+                fetchStreams={fetchStreams}
+                API_BASE={API_BASE}
+              />
             )}
 
-            {/* MODERATOR TAB */}
             {activeTab === 'moderator' && (
-              <div className="tab-content">
-                {twitchConfigured && !auth.loggedIn ? (
-                  <div className="login-overlay">
-                    <div className="login-card">
-                      <Lock size={48} style={{ color: 'var(--color-brand)', marginBottom: '1.5rem' }} />
-                      <h2 className="login-title">Доступ Ограничен</h2>
-                      <p className="login-description">
-                        Лог действий модераторов и статистика банов/удалений доступны только стримеру и официальным модераторам канала **winx_prinx**. 
-                        Пожалуйста, авторизуйтесь через Twitch для проверки прав.
-                      </p>
-                      <button className="btn" onClick={handleLogin}>
-                        <LogIn size={16} /> Войти через Twitch
-                      </button>
-                    </div>
-                  </div>
-                ) : twitchConfigured && (auth.user?.role !== 'streamer' && auth.user?.role !== 'moderator' && auth.user?.role !== 'admin') ? (
-                  <div className="status-msg">
-                    <ShieldAlert size={48} className="status-msg-icon" />
-                    <h2>Недостаточно прав</h2>
-                    <p>Вы успешно вошли как <strong>{auth.user?.displayName}</strong>, но вы не являетесь модератором канала {TWITCH_CHANNEL}.</p>
-                  </div>
-                ) : (
-                  <div>
-                    {modProfiles.length <= 2 && (
-                      <div style={{ background: 'rgba(145, 70, 255, 0.1)', border: '1px solid rgba(145, 70, 255, 0.3)', borderRadius: '8px', padding: '1rem', marginBottom: '1.5rem', display: 'flex', gap: '1rem', alignItems: 'center' }}>
-                        <ShieldAlert size={24} style={{ color: 'var(--color-brand)' }} />
-                        <div>
-                          <h4 style={{ margin: '0 0 0.25rem 0', color: 'var(--color-text-main)', fontSize: '0.95rem' }}>Данные накапливаются</h4>
-                          <p style={{ margin: 0, fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>Информация о модераторах появляется по мере их активности в выбранном стриме.</p>
-                        </div>
-                      </div>
-                    )}
-                    {/* TOP 3 PODIUM */}
-                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '1.5rem', marginBottom: '2rem' }}>
-                      {modProfiles.slice(0, 3).map((mod, idx) => {
-                        const trophyColor = idx === 0 ? '#FFD700' : idx === 1 ? '#C0C0C0' : '#CD7F32';
-                        const glowStyle = {
-                          border: `1px solid ${trophyColor}40`,
-                          boxShadow: `0 0 15px ${trophyColor}12`,
-                          position: 'relative',
-                          overflow: 'hidden'
-                        };
-                        return (
-                          <div key={idx} className="panel" style={glowStyle}>
-                            <div style={{ position: 'absolute', top: '-10px', right: '-10px', fontSize: '5rem', opacity: 0.08, color: trophyColor, fontWeight: 900 }}>
-                              #{idx + 1}
-                            </div>
-                            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-                              <div style={{ 
-                                width: '44px', 
-                                height: '44px', 
-                                borderRadius: '50%', 
-                                background: 'var(--color-bg-base)', 
-                                border: `2px solid ${trophyColor}`,
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                fontWeight: 700,
-                                fontSize: '1.1rem',
-                                color: trophyColor
-                              }}>
-                                {idx === 0 ? '👑' : idx === 1 ? '🥈' : '🥉'}
-                              </div>
-                              <div>
-                                <h4 style={{ margin: 0, fontSize: '1rem', fontWeight: 700 }}>{mod.moderator}</h4>
-                                <span style={{ fontSize: '0.7rem', color: 'var(--color-text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-                                  {idx === 0 ? 'Глава патруля' : idx === 1 ? 'Старший мод' : 'Защитник чата'}
-                                </span>
-                              </div>
-                            </div>
-                            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1.25rem', fontSize: '0.8rem' }}>
-                              <div>
-                                <div style={{ color: 'var(--color-text-muted)' }}>Действий</div>
-                                <div style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--color-text-accent)' }}>{mod.total_actions}</div>
-                              </div>
-                              <div>
-                                <div style={{ color: 'var(--color-text-muted)' }}>Ср. Реакция</div>
-                                <div style={{ fontSize: '1.1rem', fontWeight: 700, color: '#00F5D4' }}>
-                                  {mod.reaction_time_avg ? `${mod.reaction_time_avg}с` : '—'}
-                                </div>
-                              </div>
-                              <div>
-                                <div style={{ color: 'var(--color-text-muted)' }}>КПД Активности</div>
-                                <div style={{ fontSize: '1.1rem', fontWeight: 700, color: '#A370F7' }}>{mod.scores.activity}%</div>
-                              </div>
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-
-                    <div className="grid-2col" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '1.5rem', alignItems: 'start' }}>
-                      {/* Left: Mod List */}
-                      <div className="panel">
-                        <div className="panel-header">
-                          <h3 className="panel-title"><ShieldAlert size={20} /> Рейтинг модераторов</h3>
-                        </div>
-                        {modProfiles.length === 0 ? (
-                          <div className="status-msg">
-                            <ShieldAlert size={40} className="status-msg-icon" />
-                            <p>Модераторы еще не совершали действий в этом периоде</p>
-                          </div>
-                        ) : (
-                          <div className="table-wrapper">
-                            <table className="data-table">
-                              <thead>
-                                <tr>
-                                  <th>Ранг</th>
-                                  <th>Никнейм</th>
-                                  <th>Действий</th>
-                                  <th>Ср. Реакция</th>
-                                </tr>
-                              </thead>
-                              <tbody>
-                                {modProfiles.map((mod, idx) => (
-                                  <tr 
-                                    key={idx} 
-                                    onClick={() => setSelectedMod(mod)}
-                                    style={{ 
-                                      cursor: 'pointer',
-                                      background: selectedMod && selectedMod.moderator === mod.moderator ? 'rgba(163, 112, 247, 0.08)' : 'transparent',
-                                      borderLeft: selectedMod && selectedMod.moderator === mod.moderator ? '3px solid var(--color-brand)' : 'none'
-                                    }}
-                                  >
-                                    <td>#{idx + 1}</td>
-                                    <td style={{ fontWeight: 600 }}>{mod.moderator}</td>
-                                    <td>{mod.total_actions}</td>
-                                    <td style={{ color: '#00F5D4', fontWeight: 600 }}>{mod.reaction_time_avg ? `${mod.reaction_time_avg}с` : '—'}</td>
-                                  </tr>
-                                ))}
-                              </tbody>
-                            </table>
-                          </div>
-                        )}
-                      </div>
-
-                      {/* Right: Mod Dossier */}
-                      <div className="panel">
-                        <div className="panel-header">
-                          <h3 className="panel-title"><UserCheck size={20} /> Личное досье модератора</h3>
-                        </div>
-                        
-                        {!selectedMod ? (
-                          <div className="status-msg">
-                            <UserCheck size={40} className="status-msg-icon" />
-                            <p>Выберите модератора слева для просмотра досье</p>
-                          </div>
-                        ) : (
-                          <div>
-                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.25rem' }}>
-                              <div>
-                                <h3 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-brand)' }}>{selectedMod.moderator}</h3>
-                                <p style={{ margin: 0, fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>Анализ стиля модерирования и характеристик</p>
-                              </div>
-                            </div>
-
-                            {/* Radar chart */}
-                            <div style={{ height: '280px', display: 'flex', justifyContent: 'center', marginBottom: '1.25rem' }}>
-                              <Radar 
-                                data={{
-                                  labels: ['Скорость', 'Активность', 'Жесткость', 'Внимательность'],
-                                  datasets: [{
-                                    data: [
-                                      selectedMod.scores.speed,
-                                      selectedMod.scores.activity,
-                                      selectedMod.scores.harshness,
-                                      selectedMod.scores.watchfulness
-                                    ],
-                                    backgroundColor: 'rgba(163, 112, 247, 0.2)',
-                                    borderColor: '#A370F7',
-                                    borderWidth: 2,
-                                    pointBackgroundColor: '#A370F7',
-                                    pointBorderColor: '#FFF',
-                                    pointHoverBackgroundColor: '#FFF',
-                                    pointHoverBorderColor: '#A370F7'
-                                  }]
-                                }}
-                                options={{
-                                  plugins: { legend: { display: false } },
-                                  scales: {
-                                    r: {
-                                      angleLines: { color: '#2F2F35' },
-                                      grid: { color: '#2F2F35' },
-                                      pointLabels: { color: '#ADADB8', font: { size: 10, weight: 'bold' } },
-                                      ticks: { display: false },
-                                      min: 0,
-                                      max: 100
-                                    }
-                                  }
-                                }}
-                              />
-                            </div>
-
-                            {/* Actions distribution */}
-                            <div style={{ marginBottom: '1rem' }}>
-                              <h4 style={{ margin: '0 0 0.5rem 0', fontSize: '0.85rem', fontWeight: 600 }}>Распределение наказаний:</h4>
-                              <div style={{ height: '16px', display: 'flex', borderRadius: '4px', overflow: 'hidden', background: 'var(--color-bg-base)' }}>
-                                {selectedMod.bans_count > 0 && (
-                                  <div 
-                                    style={{ width: `${(selectedMod.bans_count / selectedMod.total_actions) * 100}%`, background: '#FF0055', height: '100%' }} 
-                                    title={`Баны: ${selectedMod.bans_count}`} 
-                                  />
-                                )}
-                                {selectedMod.timeouts_count > 0 && (
-                                  <div 
-                                    style={{ width: `${(selectedMod.timeouts_count / selectedMod.total_actions) * 100}%`, background: '#FFAA00', height: '100%' }} 
-                                    title={`Муты/Таймауты: ${selectedMod.timeouts_count}`} 
-                                  />
-                                )}
-                                {selectedMod.deletions_count > 0 && (
-                                  <div 
-                                    style={{ width: `${(selectedMod.deletions_count / selectedMod.total_actions) * 100}%`, background: '#00AAFF', height: '100%' }} 
-                                    title={`Удаления сообщений: ${selectedMod.deletions_count}`} 
-                                  />
-                                )}
-                                {selectedMod.unbans_count > 0 && (
-                                  <div 
-                                    style={{ width: `${(selectedMod.unbans_count / selectedMod.total_actions) * 100}%`, background: '#00FF88', height: '100%' }} 
-                                    title={`Разбаны: ${selectedMod.unbans_count}`} 
-                                  />
-                                )}
-                              </div>
-                              {/* Legend */}
-                              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem 1.25rem', marginTop: '0.5rem', fontSize: '0.7rem', color: 'var(--color-text-muted)' }}>
-                                <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
-                                  <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#FF0055' }}></span>
-                                  Баны ({selectedMod.bans_count})
-                                </div>
-                                <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
-                                  <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#FFAA00' }}></span>
-                                  Муты ({selectedMod.timeouts_count})
-                                </div>
-                                <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
-                                  <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#00AAFF' }}></span>
-                                  Удаления ({selectedMod.deletions_count})
-                                </div>
-                                <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
-                                  <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#00FF88' }}></span>
-                                  Разбаны ({selectedMod.unbans_count})
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
+              <ModeratorTab
+                twitchConfigured={twitchConfigured}
+                auth={auth}
+                handleLogin={handleLogin}
+                TWITCH_CHANNEL={TWITCH_CHANNEL}
+                modProfiles={modProfiles}
+                selectedMod={selectedMod}
+                setSelectedMod={setSelectedMod}
+              />
             )}
           </>
         )}

client/src/components/AdminTab.jsx

@@ -0,0 +1,379 @@
+import React from 'react';
+import { Settings, Trash2, RefreshCw } from 'lucide-react';
+
+export default function AdminTab({
+  adminSelectedStreamId,
+  setAdminSelectedStreamId,
+  streams,
+  editTitle,
+  setEditTitle,
+  editCategory,
+  setEditCategory,
+  savingMetadata,
+  setSavingMetadata,
+  deletingStream,
+  setDeletingStream,
+  syncingVods,
+  setSyncingVods,
+  cleaningStreams,
+  setCleaningStreams,
+  loadingAdminStats,
+  adminStats,
+  fetchAdminStats,
+  fetchStreams,
+  API_BASE
+}) {
+  return (
+    <div className="tab-content">
+      <h2 style={{ fontSize: '1.5rem', fontWeight: 700, marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <Settings size={24} style={{ color: 'var(--color-brand)' }} /> Панель администратора
+      </h2>
+
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '1.5rem', marginBottom: '2rem' }}>
+        
+        {/* Left: Stream management */}
+        <div className="panel" style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+          <div className="panel-header">
+            <h3 className="panel-title">Управление стримами</h3>
+          </div>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+            <label style={{ fontSize: '0.85rem', fontWeight: 600, color: 'var(--color-text-muted)' }}>Выбрать стрим для редактирования или удаления:</label>
+            <select 
+              className="dark-input"
+              value={adminSelectedStreamId}
+              onChange={(e) => setAdminSelectedStreamId(e.target.value)}
+            >
+              <option value="">-- Выберите стрим --</option>
+              {streams.map((stream) => (
+                <option key={stream.id} value={stream.id}>
+                  {stream.title || 'Без названия'} ({new Date(stream.start_time).toLocaleDateString('ru-RU')} {new Date(stream.start_time).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' })})
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {(() => {
+            const activeStream = streams.find(s => s.id === parseInt(adminSelectedStreamId));
+            if (!activeStream) return (
+              <div style={{ padding: '1.5rem', textAlign: 'center', color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
+                Выберите стрим в выпадающем списке выше для выполнения действий.
+              </div>
+            );
+
+            const statusLabel = 
+              activeStream.backfill_status === 'completed' ? 'Импортирован полностью' :
+              activeStream.backfill_status === 'pending' ? 'В очереди воркера (ожидание)' :
+              activeStream.backfill_status === 'live' ? 'В эфире (live)' : activeStream.backfill_status;
+
+            const statusColor = 
+              activeStream.backfill_status === 'completed' ? 'var(--color-success, #00f2fe)' :
+              activeStream.backfill_status === 'pending' ? 'var(--color-warning, #f1c40f)' : 'var(--color-primary)';
+
+            return (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
+                <div style={{ fontSize: '0.8rem', padding: '0.75rem', background: 'rgba(255,255,255,0.02)', borderRadius: '6px', border: '1px solid var(--color-border)' }}>
+                  <p style={{ margin: '0 0 0.4rem 0' }}><strong>ID сессии:</strong> {activeStream.id}</p>
+                  <p style={{ margin: '0 0 0.4rem 0' }}><strong>Статус импорта VOD:</strong> <span style={{ color: statusColor, fontWeight: 'bold' }}>{statusLabel}</span></p>
+                  <p style={{ margin: '0 0 0.4rem 0' }}><strong>Twitch VOD ID:</strong> {activeStream.twitch_vod_id || 'Отсутствует'}</p>
+                  <p style={{ margin: 0 }}><strong>Начало:</strong> {new Date(activeStream.start_time).toLocaleString('ru-RU')}</p>
+                </div>
+
+                {/* Edit Metadata */}
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', padding: '1rem', background: 'rgba(255,255,255,0.01)', borderRadius: '6px', border: '1px solid rgba(255,255,255,0.03)' }}>
+                  <h4 style={{ margin: 0, fontSize: '0.9rem', fontWeight: 600 }}>Редактирование названия / категории</h4>
+                  
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
+                    <label style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>Название стрима:</label>
+                    <input 
+                      type="text"
+                      className="dark-input"
+                      value={editTitle}
+                      onChange={(e) => setEditTitle(e.target.value)}
+                    />
+                  </div>
+
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
+                    <label style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>Категория (игра):</label>
+                    <input 
+                      type="text"
+                      className="dark-input"
+                      value={editCategory}
+                      onChange={(e) => setEditCategory(e.target.value)}
+                    />
+                  </div>
+
+                  <button 
+                    className="btn btn-secondary" 
+                    style={{ width: '100%', padding: '0.5rem', marginTop: '0.25rem' }}
+                    disabled={savingMetadata || !editTitle.trim()}
+                    onClick={async () => {
+                      setSavingMetadata(true);
+                      try {
+                        const res = await fetch(`${API_BASE}/api/streams/${activeStream.id}`, {
+                          method: 'PUT',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ title: editTitle, category: editCategory }),
+                          credentials: 'include'
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                          alert('Метаданные стрима успешно обновлены!');
+                          fetchStreams();
+                        } else {
+                          alert(`Ошибка: ${data.error}`);
+                        }
+                      } catch (e) {
+                        alert('Ошибка при обновлении метаданных.');
+                      } finally {
+                        setSavingMetadata(false);
+                      }
+                    }}
+                  >
+                    {savingMetadata ? 'Сохранение...' : 'Сохранить изменения'}
+                  </button>
+                </div>
+
+                {/* VOD Actions (Only if VOD is present) */}
+                {activeStream.twitch_vod_id && (
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                    <h4 style={{ margin: 0, fontSize: '0.9rem', fontWeight: 600 }}>Действия импорта VOD:</h4>
+                    <div style={{ display: 'flex', gap: '0.5rem' }}>
+                      <button
+                        className="btn btn-secondary"
+                        style={{ flex: 1, fontSize: '0.75rem', padding: '0.5rem' }}
+                        onClick={async () => {
+                          if (!confirm(`Запустить заполнение пропусков для стрима "${activeStream.title}"? Воркер докачает пропущенный чат и Whisper-речь.`)) return;
+                          try {
+                            const res = await fetch(`${API_BASE}/api/streams/reset-backfill`, {
+                              method: 'POST',
+                              headers: { 'Content-Type': 'application/json' },
+                              body: JSON.stringify({ streamId: activeStream.id, mode: 'gap_fill' }),
+                              credentials: 'include'
+                            });
+                            const data = await res.json();
+                            if (data.success) {
+                              alert('Статус сброшен на "ожидание". Воркер скоро начнет дозаполнение!');
+                              fetchStreams();
+                            } else {
+                              alert(`Ошибка: ${data.error}`);
+                            }
+                          } catch (e) {
+                            alert('Ошибка при запуске дозаполнения VOD.');
+                          }
+                        }}
+                      >
+                        Заполнить пропуски VOD
+                      </button>
+                      <button
+                        className="btn btn-secondary"
+                        style={{ flex: 1, fontSize: '0.75rem', padding: '0.5rem' }}
+                        onClick={async () => {
+                          if (!confirm(`Внимание: это полностью удалит сохраненные сообщения чата и слова Whisper для стрима "${activeStream.title}" и заново запустит весь импорт VOD с 0-й секунды. Вы уверены?`)) return;
+                          try {
+                            const res = await fetch(`${API_BASE}/api/streams/reset-backfill`, {
+                              method: 'POST',
+                              headers: { 'Content-Type': 'application/json' },
+                              body: JSON.stringify({ streamId: activeStream.id, mode: 'full_rebuild' }),
+                              credentials: 'include'
+                            });
+                            const data = await res.json();
+                            if (data.success) {
+                              alert('Данные очищены. Стрим поставлен на полный переимпорт воркером!');
+                              fetchStreams();
+                            } else {
+                              alert(`Ошибка: ${data.error}`);
+                            }
+                          } catch (e) {
+                            alert('Ошибка при запуске переимпорта.');
+                          }
+                        }}
+                      >
+                        Полный переимпорт VOD
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                {/* Delete Button */}
+                <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: '1rem', marginTop: '0.5rem' }}>
+                  <button
+                    className="btn btn-danger"
+                    style={{ 
+                      width: '100%', 
+                      display: 'flex', 
+                      alignItems: 'center', 
+                      justifyContent: 'center', 
+                      gap: '0.4rem',
+                      backgroundColor: 'rgba(231, 76, 60, 0.15)',
+                      color: '#e74c3c',
+                      border: '1px solid rgba(231, 76, 60, 0.3)',
+                      borderRadius: '4px',
+                      cursor: 'pointer',
+                      padding: '0.6rem'
+                    }}
+                    disabled={deletingStream}
+                    onClick={async () => {
+                      if (!confirm(`ВНИМАНИЕ: Вы уверены, что хотите полностью УДАЛИТЬ стрим "${activeStream.title}"? Это действие сотрет всю связанную статистику (чат, слова Whisper, модерацию) из базы данных навсегда и безвозвратно!`)) return;
+                      if (!confirm(`ПОСЛЕДНЕЕ ПРЕДУПРЕЖДЕНИЕ: Вы действительно хотите стереть стрим ID ${activeStream.id} из базы? Восстановление невозможно.`)) return;
+                      
+                      setDeletingStream(true);
+                      try {
+                        const res = await fetch(`${API_BASE}/api/streams/${activeStream.id}`, {
+                          method: 'DELETE',
+                          credentials: 'include'
+                        });
+                        const data = await res.json();
+                        if (data.success) {
+                          alert('Стрим успешно удален из базы данных!');
+                          setAdminSelectedStreamId('');
+                          fetchStreams();
+                        } else {
+                          alert(`Ошибка: ${data.error}`);
+                        }
+                      } catch (e) {
+                        alert('Ошибка при удалении стрима.');
+                      } finally {
+                        setDeletingStream(false);
+                      }
+                    }}
+                  >
+                    <Trash2 size={16} /> Удалить стрим полностью
+                  </button>
+                </div>
+              </div>
+            );
+          })()}
+        </div>
+
+        {/* Right: Global actions and Stats */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+          
+          {/* Global Actions Panel */}
+          <div className="panel">
+            <div className="panel-header">
+              <h3 className="panel-title">Глобальные действия</h3>
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+              
+              {/* Twitch VOD Sync */}
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: '0.75rem', borderBottom: '1px solid var(--color-border)' }}>
+                <div>
+                  <h4 style={{ margin: 0, fontSize: '0.85rem', fontWeight: 600 }}>Синхронизация Twitch VOD</h4>
+                  <p style={{ margin: 0, fontSize: '0.7rem', color: 'var(--color-text-muted)' }}>Запросить последние 20 архивов из Twitch API.</p>
+                </div>
+                <button 
+                  className="btn btn-secondary"
+                  style={{ fontSize: '0.75rem', padding: '0.4rem 0.8rem' }}
+                  disabled={syncingVods}
+                  onClick={async () => {
+                    setSyncingVods(true);
+                    try {
+                      const res = await fetch(`${API_BASE}/api/streams/sync-vods`, { method: 'POST', credentials: 'include' });
+                      const data = await res.json();
+                      if (data.success) {
+                        alert(`Успешно импортировано ${data.count} стримов!`);
+                        fetchStreams();
+                      } else {
+                        alert(`Ошибка: ${data.error}`);
+                      }
+                    } catch (e) {
+                      alert('Ошибка при синхронизации VOD.');
+                    } finally {
+                      setSyncingVods(false);
+                    }
+                  }}
+                >
+                  <RefreshCw size={12} className={syncingVods ? "spin" : ""} /> {syncingVods ? 'Синхронизация...' : 'Синхронизировать VOD'}
+                </button>
+              </div>
+
+              {/* Database Cleanup */}
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <div>
+                  <h4 style={{ margin: 0, fontSize: '0.85rem', fontWeight: 600 }}>Очистить пустые стримы</h4>
+                  <p style={{ margin: 0, fontSize: '0.7rem', color: 'var(--color-text-muted)' }}>Удалить сессии с 0 сообщениями и 0 слов.</p>
+                </div>
+                <button 
+                  className="btn btn-secondary"
+                  style={{ fontSize: '0.75rem', padding: '0.4rem 0.8rem' }}
+                  disabled={cleaningStreams}
+                  onClick={async () => {
+                    if (!confirm('Вы действительно хотите удалить все пустые стримы (в которых нет ни сообщений в чате, ни распознанных слов)? Это очистит тестовый мусор из списка.')) return;
+                    setCleaningStreams(true);
+                    try {
+                      const res = await fetch(`${API_BASE}/api/admin/cleanup`, { method: 'POST', credentials: 'include' });
+                      const data = await res.json();
+                      if (data.success) {
+                        alert(`Успешно очищено. Удалено пустых стримов: ${data.count}`);
+                        fetchStreams();
+                        fetchAdminStats();
+                      } else {
+                        alert(`Ошибка: ${data.error}`);
+                      }
+                    } catch (e) {
+                      alert('Ошибка при очистке стримов.');
+                    } finally {
+                      setCleaningStreams(false);
+                    }
+                  }}
+                >
+                  Очистить пустые стримы
+                </button>
+              </div>
+
+            </div>
+          </div>
+
+          {/* System Statistics Panel */}
+          <div className="panel">
+            <div className="panel-header">
+              <h3 className="panel-title">Системная статистика</h3>
+            </div>
+            
+            {loadingAdminStats || !adminStats ? (
+              <div style={{ padding: '1rem', textAlign: 'center', color: 'var(--color-text-muted)', fontSize: '0.85rem' }}>
+                Загрузка статистики...
+              </div>
+            ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', fontSize: '0.8rem' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '0.4rem', borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
+                  <span style={{ color: 'var(--color-text-muted)' }}>Режим базы данных:</span>
+                  <strong style={{ color: 'var(--color-brand)' }}>{adminStats.dbMode.toUpperCase()}</strong>
+                </div>
+                {adminStats.dbMode === 'sqlite' && (
+                  <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '0.4rem', borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
+                    <span style={{ color: 'var(--color-text-muted)' }}>Размер файла SQLite:</span>
+                    <strong>{adminStats.dbSizeMb} МБ</strong>
+                  </div>
+                )}
+                <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '0.4rem', borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
+                  <span style={{ color: 'var(--color-text-muted)' }}>Всего стримов в базе:</span>
+                  <strong>{adminStats.totalStreams}</strong>
+                </div>
+                <div style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: '0.4rem', borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
+                  <span style={{ color: 'var(--color-text-muted)' }}>Всего сообщений чата:</span>
+                  <strong>{adminStats.totalMessages.toLocaleString()}</strong>
+                </div>
+                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  <span style={{ color: 'var(--color-text-muted)' }}>Всего голосовых слов:</span>
+                  <strong>{adminStats.totalVoiceWords.toLocaleString()}</strong>
+                </div>
+                
+                <button 
+                  className="btn btn-secondary"
+                  style={{ width: '100%', fontSize: '0.75rem', padding: '0.4rem', marginTop: '0.5rem' }}
+                  onClick={fetchAdminStats}
+                >
+                  Обновить статистику
+                </button>
+              </div>
+            )}
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+  );
+}

client/src/components/ChatterOrbit.jsx

@@ -0,0 +1,237 @@
+import React, { useEffect, useRef } from 'react';
+
+const API_BASE = import.meta.env.VITE_API_URL || (import.meta.env.DEV ? 'http://localhost:3000' : '');
+const TWITCH_CHANNEL = 'winx_prinx';
+
+export default function ChatterOrbit({ chatters }) {
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const particlesRef = useRef(new Map());
+  const avatarRef = useRef(null);
+
+  useEffect(() => {
+    // Load Avatar via backend proxy (avoids CORS issues with decapi.me)
+    if (!avatarRef.current) {
+      const img = new Image();
+      img.src = `${API_BASE}/api/avatar/${TWITCH_CHANNEL}`;
+      img.onload = () => { avatarRef.current = img; };
+      img.onerror = () => console.warn('[ChatterOrbit] Avatar load failed');
+    }
+  }, []);
+
+  useEffect(() => {
+    const safeChatters = Array.isArray(chatters) ? chatters : [];
+    
+    safeChatters.forEach(c => {
+      const username = c.username || c.display_name || 'unknown';
+      if (!particlesRef.current.has(username)) {
+        const isLurker = !c.has_chatted && !(c.message_count > 0);
+        // All particles go on the ring — tight band around ring radius ±8%
+        const ringNoise = (Math.random() - 0.5) * 0.16;
+        const radiusNorm = 1.0 + ringNoise;
+          
+        particlesRef.current.set(username, {
+          username,
+          displayName: c.display_name || username,
+          angle: Math.random() * Math.PI * 2,
+          radiusNorm,
+          speed: (0.0003 + Math.random() * 0.0004) * (Math.random() > 0.5 ? 1 : -1),
+          isMod: c.is_mod,
+          isSub: c.is_sub,
+          isLurker,
+          messageCount: c.message_count || 0,
+          isStreamer: username.toLowerCase() === 'winx_prinx',
+        });
+      } else {
+        const p = particlesRef.current.get(username);
+        const isLurker = !c.has_chatted && !(c.message_count > 0);
+        p.isLurker = isLurker;
+        p.messageCount = c.message_count || p.messageCount;
+        p.isMod = c.is_mod || p.isMod;
+        p.isSub = c.is_sub || p.isSub;
+      }
+    });
+  }, [chatters]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
+    const ctx = canvas.getContext('2d');
+    let animationId;
+
+    const HEIGHT = 320;
+
+    const resize = () => {
+      const dpr = window.devicePixelRatio || 1;
+      const rect = container.getBoundingClientRect();
+      canvas.width = rect.width * dpr;
+      canvas.height = HEIGHT * dpr;
+      canvas.style.width = `${rect.width}px`;
+      canvas.style.height = `${HEIGHT}px`;
+      ctx.scale(dpr, dpr);
+    };
+    resize();
+    window.addEventListener('resize', resize);
+
+    let hoverName = null;
+    let hoverX = 0;
+    let hoverY = 0;
+    let mouseX = -9999;
+    let mouseY = -9999;
+
+    const handleMouseMove = (e) => {
+      const rect = canvas.getBoundingClientRect();
+      mouseX = e.clientX - rect.left;
+      mouseY = e.clientY - rect.top;
+    };
+    const handleMouseLeave = () => { mouseX = -9999; mouseY = -9999; };
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseleave', handleMouseLeave);
+
+    const animate = () => {
+      const width = canvas.width / (window.devicePixelRatio || 1);
+      const height = HEIGHT;
+      const cx = width / 2;
+      const cy = height / 2;
+
+      // Ring fills most of the canvas
+      const RX = width * 0.44;
+      const RY = height * 0.36;
+      const TILT = RY / RX;
+
+      // Solid near-black background
+      ctx.fillStyle = '#08080f';
+      ctx.fillRect(0, 0, width, height);
+
+      const particles = Array.from(particlesRef.current.values());
+
+      hoverName = null;
+
+      // Update positions
+      particles.forEach(p => {
+        p.angle += p.speed;
+        const r = p.radiusNorm * RX;
+        p.x = cx + Math.cos(p.angle) * r;
+        p.y = cy + Math.sin(p.angle) * r * TILT;
+        p.depth = (Math.sin(p.angle) * TILT + TILT) / (2 * TILT); // 0=back, 1=front
+
+        if (p.isStreamer) {
+          p.baseSize = 5;
+          p.color = '#A370F7';
+        } else if (p.isLurker) {
+          p.baseSize = 1;
+          p.color = null;
+        } else {
+          p.baseSize = Math.min(4, 1.5 + Math.log10((p.messageCount || 0) + 1) * 1.2);
+          p.color = p.isMod ? '#00F5D4' : p.isSub ? '#FF007F' : '#c8c8d8';
+        }
+        p.drawSize = p.baseSize;
+      });
+
+      // Sort back-to-front
+      particles.sort((a, b) => a.depth - b.depth);
+
+      // Draw particles
+      particles.forEach(p => {
+        const alpha = p.isLurker
+          ? 0.15 + p.depth * 0.45
+          : 0.5 + p.depth * 0.5;
+
+        let color;
+        if (p.isLurker) {
+          const brightness = Math.round(160 + p.depth * 60);
+          color = `rgba(${brightness},${brightness},${brightness + 20},${alpha})`;
+        } else {
+          color = p.color;
+        }
+
+        const dist = Math.hypot(mouseX - p.x, mouseY - p.y);
+        if (dist < p.drawSize + 6) {
+          hoverName = p.displayName;
+          hoverX = p.x;
+          hoverY = p.y;
+          p.drawSize = Math.max(p.drawSize * 2.5, 5);
+        }
+
+        ctx.globalAlpha = p.isLurker ? 1 : alpha;
+        ctx.shadowBlur = 0;
+
+        if (!p.isLurker && (p.isMod || p.isSub || p.isStreamer)) {
+          ctx.shadowBlur = 6;
+          ctx.shadowColor = color;
+        }
+
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.drawSize, 0, Math.PI * 2);
+        ctx.fillStyle = color;
+        ctx.fill();
+      });
+      ctx.globalAlpha = 1;
+      ctx.shadowBlur = 0;
+
+      // Draw Avatar on top
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(cx, cy, 26, 0, Math.PI * 2);
+      ctx.closePath();
+      ctx.shadowColor = '#9147ff';
+      ctx.shadowBlur = 24;
+      ctx.strokeStyle = 'rgba(145, 71, 255, 0.9)';
+      ctx.lineWidth = 2.5;
+      ctx.stroke();
+      ctx.shadowBlur = 0;
+      ctx.clip();
+      if (avatarRef.current) {
+        ctx.drawImage(avatarRef.current, cx - 26, cy - 26, 52, 52);
+      } else {
+        ctx.fillStyle = '#6441A5';
+        ctx.fill();
+      }
+      ctx.restore();
+
+      // Hover tooltip
+      if (hoverName) {
+        ctx.shadowBlur = 0;
+        ctx.globalAlpha = 1;
+        ctx.font = 'bold 11px Inter, sans-serif';
+        const tw = ctx.measureText(hoverName).width;
+        const tx = Math.min(hoverX + 12, width - tw - 20);
+        const ty = hoverY - 30 < 5 ? hoverY + 20 : hoverY - 30;
+        ctx.fillStyle = 'rgba(18,18,24,0.92)';
+        ctx.beginPath();
+        if (ctx.roundRect) ctx.roundRect(tx - 4, ty, tw + 16, 22, 5);
+        else ctx.rect(tx - 4, ty, tw + 16, 22);
+        ctx.fill();
+        ctx.strokeStyle = 'rgba(145,71,255,0.5)';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        ctx.fillStyle = '#efeff1';
+        ctx.fillText(hoverName, tx + 4, ty + 15);
+      }
+
+      animationId = requestAnimationFrame(animate);
+    };
+
+    animate();
+
+    return () => {
+      cancelAnimationFrame(animationId);
+      canvas.removeEventListener('mousemove', handleMouseMove);
+      canvas.removeEventListener('mouseleave', handleMouseLeave);
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  return (
+    <div ref={containerRef} style={{ display: 'flex', flexDirection: 'column', width: '100%', position: 'relative' }}>
+      <canvas ref={canvasRef} style={{ borderRadius: '8px', display: 'block', width: '100%' }} />
+      <div style={{ position: 'absolute', bottom: '10px', right: '12px', fontSize: '11px', color: 'rgba(180,180,200,0.7)', display: 'flex', gap: '14px' }}>
+        <span><span style={{ display: 'inline-block', width: '6px', height: '6px', background: 'rgba(200,200,220,0.5)', borderRadius: '50%', marginRight: '4px'}}></span>Зрители</span>
+        <span><span style={{ display: 'inline-block', width: '6px', height: '6px', background: '#c8c8d8', borderRadius: '50%', marginRight: '4px'}}></span>Чатеры</span>
+        <span><span style={{ display: 'inline-block', width: '6px', height: '6px', background: '#FF007F', borderRadius: '50%', marginRight: '4px'}}></span>Сабы</span>
+        <span><span style={{ display: 'inline-block', width: '6px', height: '6px', background: '#00F5D4', borderRadius: '50%', marginRight: '4px'}}></span>Модеры</span>
+      </div>
+    </div>
+  );
+}

client/src/components/ChattersTab.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Users, Search } from 'lucide-react';
+import ChatterOrbit from './ChatterOrbit';
+
+export default function ChattersTab({
+  chatters,
+  chattersSearch,
+  setChattersSearch,
+  TWITCH_CHANNEL
+}) {
+  return (
+    <div className="grid-2col tab-content" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: '1.5rem', alignItems: 'start' }}>
+      <div className="panel">
+        <div className="panel-header">
+          <h3 className="panel-title"><Users size={20} /> Орбита зрителей</h3>
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'center', padding: '1rem 0' }}>
+          <ChatterOrbit chatters={chatters} />
+        </div>
+      </div>
+
+      <div className="panel">
+        <div className="panel-header">
+          <h3 className="panel-title"><Users size={20} /> Лидеры чата по активности</h3>
+          <div className="search-container">
+            <Search size={16} className="search-icon" />
+            <input 
+              type="text" 
+              className="search-input" 
+              placeholder="Поиск зрителя..."
+              value={chattersSearch}
+              onChange={(e) => setChattersSearch(e.target.value)}
+            />
+          </div>
+        </div>
+
+        {chatters.length === 0 ? (
+          <div className="status-msg">
+            <Users size={40} className="status-msg-icon" />
+            <p>Нет данных о зрителях для этого периода</p>
+          </div>
+        ) : (
+          <div className="table-wrapper">
+            <table className="data-table">
+              <thead>
+                <tr>
+                  <th>Место</th>
+                  <th>Никнейм</th>
+                  <th>Роли</th>
+                  <th>Сообщений</th>
+                </tr>
+              </thead>
+              <tbody>
+                {chatters
+                  .filter(c => {
+                    const disp = c.display_name || c.username || '';
+                    const user = c.username || '';
+                    return disp.toLowerCase().includes(chattersSearch.toLowerCase()) || 
+                           user.toLowerCase().includes(chattersSearch.toLowerCase());
+                  })
+                  .map((c, idx) => (
+                    <tr key={idx} className="chatter-row">
+                      <td style={{ fontWeight: 700, width: '80px', color: idx < 3 ? 'var(--color-brand)' : 'var(--color-text-muted)' }}>
+                        #{idx + 1}
+                      </td>
+                      <td style={{ fontWeight: 600 }}>{c.display_name || c.username || '—'}</td>
+                      <td>
+                        <div style={{ display: 'flex', gap: '0.4rem' }}>
+                          {(c.username || '').toLowerCase() === TWITCH_CHANNEL && (
+                            <span className="badge badge-streamer">Стример</span>
+                          )}
+                          {c.is_mod ? <span className="badge badge-mod">Мод</span> : null}
+                          {c.is_vip && !c.is_mod ? <span className="badge badge-vip">VIP</span> : null}
+                          {c.is_sub && !c.is_mod && !c.is_vip ? <span className="badge badge-sub">Саб</span> : null}
+                        </div>
+                      </td>
+                      <td style={{ fontWeight: 700, color: 'var(--color-text-accent)' }}>
+                        {c.message_count.toLocaleString()}
+                      </td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

client/src/components/ModeratorTab.jsx

@@ -0,0 +1,265 @@
+import React from 'react';
+import { Lock, LogIn, ShieldAlert, UserCheck } from 'lucide-react';
+import { Radar } from 'react-chartjs-2';
+
+export default function ModeratorTab({
+  twitchConfigured,
+  auth,
+  handleLogin,
+  TWITCH_CHANNEL,
+  modProfiles,
+  selectedMod,
+  setSelectedMod
+}) {
+  return (
+    <div className="tab-content">
+      {twitchConfigured && !auth.loggedIn ? (
+        <div className="login-overlay">
+          <div className="login-card">
+            <Lock size={48} style={{ color: 'var(--color-brand)', marginBottom: '1.5rem' }} />
+            <h2 className="login-title">Доступ Ограничен</h2>
+            <p className="login-description">
+              Лог действий модераторов и статистика банов/удалений доступны только стримеру и официальным модераторам канала **winx_prinx**. 
+              Пожалуйста, авторизуйтесь через Twitch для проверки прав.
+            </p>
+            <button className="btn" onClick={handleLogin}>
+              <LogIn size={16} /> Войти через Twitch
+            </button>
+          </div>
+        </div>
+      ) : twitchConfigured && (auth.user?.role !== 'streamer' && auth.user?.role !== 'moderator' && auth.user?.role !== 'admin') ? (
+        <div className="status-msg">
+          <ShieldAlert size={48} className="status-msg-icon" />
+          <h2>Недостаточно прав</h2>
+          <p>Вы успешно вошли как <strong>{auth.user?.displayName}</strong>, но вы не являетесь модератором канала {TWITCH_CHANNEL}.</p>
+        </div>
+      ) : (
+        <div>
+          {modProfiles.length <= 2 && (
+            <div style={{ background: 'rgba(145, 70, 255, 0.1)', border: '1px solid rgba(145, 70, 255, 0.3)', borderRadius: '8px', padding: '1rem', marginBottom: '1.5rem', display: 'flex', gap: '1rem', alignItems: 'center' }}>
+              <ShieldAlert size={24} style={{ color: 'var(--color-brand)' }} />
+              <div>
+                <h4 style={{ margin: '0 0 0.25rem 0', color: 'var(--color-text-main)', fontSize: '0.95rem' }}>Данные накапливаются</h4>
+                <p style={{ margin: 0, fontSize: '0.85rem', color: 'var(--color-text-muted)' }}>Информация о модераторах появляется по мере их активности в выбранном стриме.</p>
+              </div>
+            </div>
+          )}
+          {/* TOP 3 PODIUM */}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '1.5rem', marginBottom: '2rem' }}>
+            {modProfiles.slice(0, 3).map((mod, idx) => {
+              const trophyColor = idx === 0 ? '#FFD700' : idx === 1 ? '#C0C0C0' : '#CD7F32';
+              const glowStyle = {
+                border: `1px solid ${trophyColor}40`,
+                boxShadow: `0 0 15px ${trophyColor}12`,
+                position: 'relative',
+                overflow: 'hidden'
+              };
+              return (
+                <div key={idx} className="panel" style={glowStyle}>
+                  <div style={{ position: 'absolute', top: '-10px', right: '-10px', fontSize: '5rem', opacity: 0.08, color: trophyColor, fontWeight: 900 }}>
+                    #{idx + 1}
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                    <div style={{ 
+                      width: '44px', 
+                      height: '44px', 
+                      borderRadius: '50%', 
+                      background: 'var(--color-bg-base)', 
+                      border: `2px solid ${trophyColor}`,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontWeight: 700,
+                      fontSize: '1.1rem',
+                      color: trophyColor
+                    }}>
+                      {idx === 0 ? '👑' : idx === 1 ? '🥈' : '🥉'}
+                    </div>
+                    <div>
+                      <h4 style={{ margin: 0, fontSize: '1rem', fontWeight: 700 }}>{mod.moderator}</h4>
+                      <span style={{ fontSize: '0.7rem', color: 'var(--color-text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                        {idx === 0 ? 'Глава патруля' : idx === 1 ? 'Старший мод' : 'Защитник чата'}
+                      </span>
+                    </div>
+                  </div>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '1.25rem', fontSize: '0.8rem' }}>
+                    <div>
+                      <div style={{ color: 'var(--color-text-muted)' }}>Действий</div>
+                      <div style={{ fontSize: '1.1rem', fontWeight: 700, color: 'var(--color-text-accent)' }}>{mod.total_actions}</div>
+                    </div>
+                    <div>
+                      <div style={{ color: 'var(--color-text-muted)' }}>Ср. Реакция</div>
+                      <div style={{ fontSize: '1.1rem', fontWeight: 700, color: '#00F5D4' }}>
+                        {mod.reaction_time_avg ? `${mod.reaction_time_avg}с` : '—'}
+                      </div>
+                    </div>
+                    <div>
+                      <div style={{ color: 'var(--color-text-muted)' }}>КПД Активности</div>
+                      <div style={{ fontSize: '1.1rem', fontWeight: 700, color: '#A370F7' }}>{mod.scores.activity}%</div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <div className="grid-2col" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '1.5rem', alignItems: 'start' }}>
+            {/* Left: Mod List */}
+            <div className="panel">
+              <div className="panel-header">
+                <h3 className="panel-title"><ShieldAlert size={20} /> Рейтинг модераторов</h3>
+              </div>
+              {modProfiles.length === 0 ? (
+                <div className="status-msg">
+                  <ShieldAlert size={40} className="status-msg-icon" />
+                  <p>Модераторы еще не совершали действий в этом периоде</p>
+                </div>
+              ) : (
+                <div className="table-wrapper">
+                  <table className="data-table">
+                    <thead>
+                      <tr>
+                        <th>Ранг</th>
+                        <th>Никнейм</th>
+                        <th>Действий</th>
+                        <th>Ср. Реакция</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {modProfiles.map((mod, idx) => (
+                        <tr 
+                          key={idx} 
+                          onClick={() => setSelectedMod(mod)}
+                          style={{ 
+                            cursor: 'pointer',
+                            background: selectedMod && selectedMod.moderator === mod.moderator ? 'rgba(163, 112, 247, 0.08)' : 'transparent',
+                            borderLeft: selectedMod && selectedMod.moderator === mod.moderator ? '3px solid var(--color-brand)' : 'none'
+                          }}
+                        >
+                          <td>#{idx + 1}</td>
+                          <td style={{ fontWeight: 600 }}>{mod.moderator}</td>
+                          <td>{mod.total_actions}</td>
+                          <td style={{ color: '#00F5D4', fontWeight: 600 }}>{mod.reaction_time_avg ? `${mod.reaction_time_avg}с` : '—'}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+
+            {/* Right: Mod Dossier */}
+            <div className="panel">
+              <div className="panel-header">
+                <h3 className="panel-title"><UserCheck size={20} /> Личное досье модератора</h3>
+              </div>
+              
+              {!selectedMod ? (
+                <div className="status-msg">
+                  <UserCheck size={40} className="status-msg-icon" />
+                  <p>Выберите модератора слева для просмотра досье</p>
+                </div>
+              ) : (
+                <div>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.25rem' }}>
+                    <div>
+                      <h3 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 700, color: 'var(--color-brand)' }}>{selectedMod.moderator}</h3>
+                      <p style={{ margin: 0, fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>Анализ стиля модерирования и характеристик</p>
+                    </div>
+                  </div>
+
+                  {/* Radar chart */}
+                  <div style={{ height: '280px', display: 'flex', justifyContent: 'center', marginBottom: '1.25rem' }}>
+                    <Radar 
+                      data={{
+                        labels: ['Скорость', 'Активность', 'Жесткость', 'Внимательность'],
+                        datasets: [{
+                          data: [
+                            selectedMod.scores.speed,
+                            selectedMod.scores.activity,
+                            selectedMod.scores.harshness,
+                            selectedMod.scores.watchfulness
+                          ],
+                          backgroundColor: 'rgba(163, 112, 247, 0.2)',
+                          borderColor: '#A370F7',
+                          borderWidth: 2,
+                          pointBackgroundColor: '#A370F7',
+                          pointBorderColor: '#FFF',
+                          pointHoverBackgroundColor: '#FFF',
+                          pointHoverBorderColor: '#A370F7'
+                        }]
+                      }}
+                      options={{
+                        plugins: { legend: { display: false } },
+                        scales: {
+                          r: {
+                            angleLines: { color: '#2F2F35' },
+                            grid: { color: '#2F2F35' },
+                            pointLabels: { color: '#ADADB8', font: { size: 10, weight: 'bold' } },
+                            ticks: { display: false },
+                            min: 0,
+                            max: 100
+                          }
+                        }
+                      }}
+                    />
+                  </div>
+
+                  {/* Actions distribution */}
+                  <div style={{ marginBottom: '1rem' }}>
+                    <h4 style={{ margin: '0 0 0.5rem 0', fontSize: '0.85rem', fontWeight: 600 }}>Распределение наказаний:</h4>
+                    <div style={{ height: '16px', display: 'flex', borderRadius: '4px', overflow: 'hidden', background: 'var(--color-bg-base)' }}>
+                      {selectedMod.bans_count > 0 && (
+                        <div 
+                          style={{ width: `${(selectedMod.bans_count / selectedMod.total_actions) * 100}%`, background: '#FF0055', height: '100%' }} 
+                          title={`Баны: ${selectedMod.bans_count}`} 
+                        />
+                      )}
+                      {selectedMod.timeouts_count > 0 && (
+                        <div 
+                          style={{ width: `${(selectedMod.timeouts_count / selectedMod.total_actions) * 100}%`, background: '#FFAA00', height: '100%' }} 
+                          title={`Муты/Таймауты: ${selectedMod.timeouts_count}`} 
+                        />
+                      )}
+                      {selectedMod.deletions_count > 0 && (
+                        <div 
+                          style={{ width: `${(selectedMod.deletions_count / selectedMod.total_actions) * 100}%`, background: '#00AAFF', height: '100%' }} 
+                          title={`Удаления сообщений: ${selectedMod.deletions_count}`} 
+                        />
+                      )}
+                      {selectedMod.unbans_count > 0 && (
+                        <div 
+                          style={{ width: `${(selectedMod.unbans_count / selectedMod.total_actions) * 100}%`, background: '#00FF88', height: '100%' }} 
+                          title={`Разбаны: ${selectedMod.unbans_count}`} 
+                        />
+                      )}
+                    </div>
+                    {/* Legend */}
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem 1.25rem', marginTop: '0.5rem', fontSize: '0.7rem', color: 'var(--color-text-muted)' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                        <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#FF0055' }}></span>
+                        Баны ({selectedMod.bans_count})
+                      </div>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                        <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#FFAA00' }}></span>
+                        Муты ({selectedMod.timeouts_count})
+                      </div>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                        <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#00AAFF' }}></span>
+                        Удаления ({selectedMod.deletions_count})
+                      </div>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                        <span style={{ display: 'inline-block', width: '6px', height: '6px', borderRadius: '50%', background: '#00FF88' }}></span>
+                        Разбаны ({selectedMod.unbans_count})
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

client/src/components/OverviewTab.jsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { MessageSquare, Users, Mic, Activity, BarChart2 } from 'lucide-react';
+import { Line } from 'react-chartjs-2';
+
+export default function OverviewTab({
+  statsSummary,
+  selectedStreamId,
+  activityData,
+  isRacing,
+  startGraphRace,
+  chartDataConfig,
+  chartOptions,
+  voiceWords
+}) {
+  return (
+    <div className="tab-content">
+      {/* Stats row */}
+      <div className="grid-4col" style={{ marginBottom: '2rem' }}>
+        <div className="stat-card" style={{ '--accent-color': 'var(--color-brand)' }}>
+          <div className="stat-card-inner">
+            <div style={{ minWidth: 0, flex: 1, marginRight: '0.5rem' }}>
+              <div className="stat-label">Сообщений в чате</div>
+              <div className="stat-value">{statsSummary.messages.toLocaleString()}</div>
+            </div>
+            <div className="stat-icon-wrapper">
+              <MessageSquare size={22} style={{ color: 'var(--color-brand)' }} />
+            </div>
+          </div>
+        </div>
+        <div className="stat-card" style={{ '--accent-color': 'var(--color-text-accent)' }}>
+          <div className="stat-card-inner">
+            <div style={{ minWidth: 0, flex: 1, marginRight: '0.5rem' }}>
+              <div className="stat-label">Уникальных зрителей</div>
+              <div className="stat-value">{statsSummary.uniqueChatters.toLocaleString()}</div>
+            </div>
+            <div className="stat-icon-wrapper">
+              <Users size={22} style={{ color: 'var(--color-text-accent)' }} />
+            </div>
+          </div>
+        </div>
+        <div className="stat-card" style={{ '--accent-color': '#ff007f' }}>
+          <div className="stat-card-inner">
+            <div style={{ minWidth: 0, flex: 1, marginRight: '0.5rem' }}>
+              <div className="stat-label">Самый активный чатер</div>
+              <div 
+                className="stat-value" 
+                title={statsSummary.mostActiveChatter || ''}
+                style={{ 
+                  fontSize: (statsSummary.mostActiveChatter || '').length > 15 ? '1.05rem' : '1.25rem', 
+                  letterSpacing: '-0.02em', 
+                  overflow: 'hidden', 
+                  textOverflow: 'ellipsis', 
+                  whiteSpace: 'nowrap' 
+                }}
+              >
+                {statsSummary.mostActiveChatter || '—'}
+              </div>
+            </div>
+            <div className="stat-icon-wrapper">
+              <Users size={22} style={{ color: '#ff007f' }} />
+            </div>
+          </div>
+        </div>
+        <div className="stat-card" style={{ '--accent-color': '#00f5d4' }}>
+          <div className="stat-card-inner">
+            <div style={{ minWidth: 0, flex: 1, marginRight: '0.5rem' }}>
+              <div className="stat-label">Распознано слов (голос)</div>
+              <div className="stat-value">{statsSummary.voiceWordsCount.toLocaleString()}</div>
+            </div>
+            <div className="stat-icon-wrapper">
+              <Mic size={22} style={{ color: '#00f5d4' }} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid-2col" style={{ gridTemplateColumns: '2fr 1fr' }}>
+        {/* Activity graph */}
+        <div className="panel">
+          <div className="panel-header">
+            <h3 className="panel-title"><Activity size={20} /> Активность чата</h3>
+            <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
+              <span style={{ fontSize: '0.8rem', color: 'var(--color-text-muted)' }}>выберите конкретный стрим для графика</span>
+              {activityData.length > 0 && (
+                <button 
+                  className="btn btn-secondary" 
+                  style={{ fontSize: '0.75rem', padding: '0.3rem 0.6rem' }} 
+                  onClick={startGraphRace}
+                  disabled={isRacing}
+                >
+                  <Activity size={12} className={isRacing ? "pulse" : ""} /> {isRacing ? 'Гонка идет...' : 'Запустить гонку'}
+                </button>
+              )}
+            </div>
+          </div>
+          {selectedStreamId === 'all' ? (
+            <div className="status-msg" style={{ height: '300px' }}>
+              <BarChart2 size={36} className="status-msg-icon" />
+              <p>Для просмотра временного графика выберите конкретный стрим в верхнем меню</p>
+            </div>
+          ) : activityData.length === 0 ? (
+            <div className="status-msg" style={{ height: '300px' }}>
+              <MessageSquare size={36} className="status-msg-icon" />
+              <p>В этом стриме пока не было сообщений</p>
+            </div>
+          ) : (
+            <div className="chart-container">
+              <Line data={chartDataConfig} options={chartOptions} />
+            </div>
+          )}
+        </div>
+
+        {/* Quick Words list */}
+        <div className="panel">
+          <div className="panel-header">
+            <h3 className="panel-title">
+              <Mic size={18} style={{ color: 'var(--color-text-accent)' }} /> Голос стримера (Топ)
+            </h3>
+          </div>
+          {voiceWords.length === 0 ? (
+            <div className="status-msg" style={{ height: '300px', padding: '1rem' }}>
+              <Mic size={28} className="status-msg-icon" />
+              <p>Слова пока не распознаны. Запустите local_worker на ПК.</p>
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', maxHeight: '320px', overflowY: 'auto', paddingRight: '4px' }}>
+              {voiceWords.slice(0, 7).map((w, idx) => (
+                <div key={idx} style={{ display: 'flex', justifyContent: 'space-between', padding: '0.5rem 0.75rem', backgroundColor: 'var(--color-bg-base)', border: '1px solid var(--color-border)', borderRadius: '6px', alignItems: 'center' }}>
+                  <span style={{ fontWeight: 600, color: 'var(--color-text-main)' }}>#{idx+1} {w.word}</span>
+                  <span className="badge badge-streamer">{w.word_count} раз</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/WordsTab.jsx

@@ -0,0 +1,284 @@
+import React from 'react';
+import { Mic, Volume2, MessageSquare } from 'lucide-react';
+
+export default function WordsTab({
+  wordType,
+  setWordType,
+  voiceWords,
+  chatWords
+}) {
+  const currentWordsList = wordType === 'voice' 
+    ? (Array.isArray(voiceWords) ? voiceWords : []) 
+    : (Array.isArray(chatWords) ? chatWords : []);
+
+  if (currentWordsList.length === 0) {
+    return (
+      <div className="panel tab-content">
+        <div className="panel-header">
+          <h3 className="panel-title"><Mic size={20} /> Частотный словарь</h3>
+          <div className="nav-tabs" style={{ background: 'var(--color-bg-base)', padding: '0.2rem', borderRadius: '8px', border: '1px solid var(--color-border)' }}>
+            <button 
+              className={`tab-btn ${wordType === 'voice' ? 'active' : ''}`}
+              onClick={() => setWordType('voice')}
+              style={{ fontSize: '0.8rem', padding: '0.4rem 0.8rem' }}
+            >
+              <Volume2 size={14} /> Из Голоса (Whisper)
+            </button>
+            <button 
+              className={`tab-btn ${wordType === 'chat' ? 'active' : ''}`}
+              onClick={() => setWordType('chat')}
+              style={{ fontSize: '0.8rem', padding: '0.4rem 0.8rem' }}
+            >
+              <MessageSquare size={14} /> Из Чата (Текстом)
+            </button>
+          </div>
+        </div>
+        <p style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem', marginBottom: '1.5rem', marginTop: '-0.75rem' }}>
+          {wordType === 'voice' 
+            ? 'Слова, которые стример произнес в микрофон (распознанные через Whisper на локальном ПК).' 
+            : 'Слова, которые зрители написали в текстовый чат Twitch.'}
+        </p>
+        <div className="status-msg">
+          <Mic size={40} className="status-msg-icon" />
+          <p>Нет собранных слов для выбранного стрима</p>
+        </div>
+      </div>
+    );
+  }
+
+  const counts = currentWordsList.map(x => x.word_count);
+  const maxCount = Math.max(...counts, 1);
+  const minCount = Math.min(...counts, 1);
+
+  // Helper for Russian pluralization
+  const getRussianPlural = (count) => {
+    const lastDigit = count % 10;
+    const lastTwoDigits = count % 100;
+    if (lastTwoDigits >= 11 && lastTwoDigits <= 19) {
+      return 'раз';
+    }
+    if (lastDigit === 1) {
+      return 'раз';
+    }
+    if (lastDigit >= 2 && lastDigit <= 4) {
+      return 'раза';
+    }
+    return 'раз';
+  };
+
+  // Color assignment based on word frequency: purple gradient
+  const getWordColor = (count) => {
+    const scale = maxCount === minCount ? 1 : (count - minCount) / (maxCount - minCount);
+    // Scale saturation from 35% (desaturated/white-lavender) to 100% (saturated purple)
+    const sat = Math.round(35 + scale * 65);
+    // Scale lightness from 92% (light/white-ish) to 60% (vivid deep purple)
+    const light = Math.round(92 - scale * 32);
+    return `hsl(265, ${sat}%, ${light}%)`;
+  };
+
+  // Layout calculations with collision avoidance on stretched elliptical spiral
+  const placedBoxes = [];
+  const laidOutWords = [];
+  
+  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
+  const stretchX = isMobile ? 1.4 : 2.8; 
+  const stretchY = 1.0;
+  const paddingX = isMobile ? 6 : 12; 
+  const paddingY = isMobile ? 4 : 8; 
+  const fontScale = isMobile ? 0.45 : 1.0;
+  const remToPx = 16;
+
+  const centerGroupThreshold = wordType === 'chat' ? 250 : 500;
+  // Identify center group: words with count within threshold of the max count,
+  // but ONLY if the top count is >= threshold. Also cap center group size to at most 3 words.
+  const centerGroupWords = currentWordsList.filter((w, idx) => 
+    idx === 0 || (maxCount >= centerGroupThreshold && (maxCount - w.word_count) < centerGroupThreshold && idx < 3)
+  );
+  const otherWordsList = currentWordsList.filter((w, idx) => 
+    !(idx === 0 || (maxCount >= centerGroupThreshold && (maxCount - w.word_count) < centerGroupThreshold && idx < 3))
+  );
+  
+  const maxOtherCount = otherWordsList.length > 0 ? Math.max(...otherWordsList.map(x => x.word_count)) : 1;
+  const minOtherCount = otherWordsList.length > 0 ? Math.min(...otherWordsList.map(x => x.word_count)) : 1;
+  const minCenterCount = Math.min(...centerGroupWords.map(x => x.word_count));
+
+  // Function to estimate word width factor based on wide/narrow letters
+  const getWordWidthFactor = (word) => {
+    let factor = 0;
+    const wideChars = /[мжшщыюяwm]/i;
+    const narrowChars = /[ilj1!|т]/i;
+    for (const char of word) {
+      if (wideChars.test(char)) {
+        factor += 0.75;
+      } else if (narrowChars.test(char)) {
+        factor += 0.35;
+      } else {
+        factor += 0.55;
+      }
+    }
+    return factor;
+  };
+
+  for (let i = 0; i < currentWordsList.length; i++) {
+    const w = currentWordsList[i];
+    const isCenterGroup = i === 0 || (maxCount >= centerGroupThreshold && (maxCount - w.word_count) < centerGroupThreshold && i < 3);
+    
+    let fontSize;
+    let fontWeight;
+    let scaleValue = 0;
+    
+    // Scale down the entire galaxy if the absolute max frequency is low (e.g. less than 200)
+    // If maxCount is 20, galaxyScale is ~0.65. If 200+, it's 1.0.
+    const galaxyScale = Math.min(Math.max(maxCount / 200, 0), 1.0) * 0.35 + 0.65;
+
+    if (isCenterGroup) {
+      // Scale font size within center group: ranges from 4.5rem to 6.2rem
+      const centerScale = maxCount === minCenterCount ? 1 : (w.word_count - minCenterCount) / (maxCount - minCenterCount);
+      fontSize = 4.5 + centerScale * 1.7;
+      fontWeight = '900';
+      scaleValue = centerScale;
+    } else {
+      // Scale font size within other words: ranges from 1.1rem to 3.2rem
+      const scale = maxOtherCount === minOtherCount ? 1 : (w.word_count - minOtherCount) / (maxOtherCount - minOtherCount);
+      scaleValue = Math.pow(scale, 1.4);
+      fontSize = 1.1 + scaleValue * 2.1;
+      fontWeight = fontSize > 2.0 ? '700' : (fontSize > 1.4 ? '600' : '500');
+    }
+    
+    fontSize = fontSize * fontScale * galaxyScale;
+    
+    // Precise width calculation based on custom width factors
+    const wordWidth = fontSize * getWordWidthFactor(w.word) * remToPx;
+    const wordHeight = fontSize * 1.1 * remToPx;
+    
+    let x = 0;
+    let y = 0;
+    
+    // Generate a stable hash for the word to randomize angle and jitter
+    let hash = 0;
+    for (let j = 0; j < w.word.length; j++) {
+      hash = w.word.charCodeAt(j) + ((hash << 5) - hash);
+    }
+    hash = Math.abs(hash);
+
+    // Search for position starting from r = 0.
+    // Since center group words are processed first, they cluster tightly around (0,0).
+    let found = false;
+    const rStep = 1.1; 
+    
+    for (let attempt = 0; attempt < 1200; attempt++) {
+      const startAngle = (hash % 100) * 0.06283; // 0 to 2*PI
+      const angle = startAngle + attempt * 0.15;
+      const r = (i === 0 && attempt === 0) ? 0 : (45 + rStep * attempt);
+      
+      x = r * Math.cos(angle) * stretchX;
+      y = r * Math.sin(angle) * stretchY;
+      
+      // Add coordinate noise/jitter (except for the absolute top word at the center)
+      if (r > 0) {
+        x += Math.sin(hash * 0.5 + attempt) * 6;
+        y += Math.cos(hash * 0.8 + attempt) * 4;
+      }
+      
+      let collision = false;
+      for (const box of placedBoxes) {
+        const halfW1 = wordWidth / 2;
+        const halfH1 = wordHeight / 2;
+        const halfW2 = box.w / 2;
+        const halfH2 = box.h / 2;
+        
+        if (Math.abs(x - box.x) < (halfW1 + halfW2 + paddingX) &&
+            Math.abs(y - box.y) < (halfH1 + halfH2 + paddingY)) {
+          collision = true;
+          break;
+        }
+      }
+      
+      if (!collision) {
+        found = true;
+        break;
+      }
+    }
+    
+    placedBoxes.push({ x: x, y: y, w: wordWidth, h: wordHeight });
+    
+    const color = getWordColor(w.word_count);
+    
+    // Floating parameters
+    const duration = 4.5 + (i % 3) + (i % 4) * 0.4; // 4.5s to 8.5s
+    const delay = -((i * 1.3) % 7); // negative delay to start asynchronously
+    const amount = 3 + (i % 4); // 3px to 6px float amount
+    
+    laidOutWords.push({
+      word: w.word,
+      count: w.word_count,
+      x: Math.round(x),
+      y: Math.round(y),
+      fontSize: `${fontSize}rem`,
+      fontWeight: fontWeight,
+      color: color,
+      scale: scaleValue,
+      isCenterGroup: isCenterGroup,
+      duration: `${duration}s`,
+      delay: `${delay}s`,
+      amount: `${amount}px`
+    });
+  }
+
+  return (
+    <div className="panel tab-content">
+      <div className="panel-header">
+        <h3 className="panel-title"><Mic size={20} /> Частотный словарь</h3>
+        
+        <div className="nav-tabs" style={{ background: 'var(--color-bg-base)', padding: '0.2rem', borderRadius: '8px', border: '1px solid var(--color-border)' }}>
+          <button 
+            className={`tab-btn ${wordType === 'voice' ? 'active' : ''}`}
+            onClick={() => setWordType('voice')}
+            style={{ fontSize: '0.8rem', padding: '0.4rem 0.8rem' }}
+          >
+            <Volume2 size={14} /> Из Голоса (Whisper)
+          </button>
+          <button 
+            className={`tab-btn ${wordType === 'chat' ? 'active' : ''}`}
+            onClick={() => setWordType('chat')}
+            style={{ fontSize: '0.8rem', padding: '0.4rem 0.8rem' }}
+          >
+            <MessageSquare size={14} /> Из Чата (Текстом)
+          </button>
+        </div>
+      </div>
+
+      <p style={{ color: 'var(--color-text-muted)', fontSize: '0.85rem', marginBottom: '1.5rem', marginTop: '-0.75rem' }}>
+        {wordType === 'voice' 
+          ? 'Слова, которые стример произнес в микрофон (распознанные через Whisper на локальном ПК).' 
+          : 'Слова, которые зрители написали в текстовый чат Twitch.'}
+      </p>
+
+      <div className="word-galaxy-container">
+        {laidOutWords.map((w, idx) => (
+          <div
+            key={idx}
+            className="word-galaxy-tag"
+            style={{
+              '--x': `${w.x}px`,
+              '--y': `${w.y}px`,
+              '--float-duration': w.duration,
+              '--float-delay': w.delay,
+              '--float-amount': w.amount,
+              fontSize: w.fontSize,
+              fontWeight: w.fontWeight,
+              color: w.color,
+              opacity: 0.95,
+              zIndex: w.isCenterGroup ? 25 : Math.round(10 + w.scale * 15)
+            }}
+          >
+            {w.word}
+            <div className="word-tooltip">
+              {w.count} {getRussianPlural(w.count)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

local_worker/processed_chat_streams.txt

@@ -9,3 +9,4 @@
 13
 23
 22
+31

netlify.toml

@@ -6,7 +6,7 @@
 [[headers]]
   for = "/*"
   [headers.values]
-    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data: https://* http://localhost:*; connect-src 'self' https://crambrodev-winx-prinx-api.hf.space ws://localhost:* http://localhost:* https://*; frame-ancestors 'none';"
+    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data: https://* http://localhost:*; connect-src 'self' https://*.hf.space https://*.onrender.com https://* http://localhost:* ws://localhost:* wss://*; frame-ancestors 'none';"
     X-Frame-Options = "DENY"
     X-Content-Type-Options = "nosniff"
     Referrer-Policy = "strict-origin-when-cross-origin"