chore: remove debug logging and refine UI polish for overlay components

backend/src/index.ts

@@ -38,12 +38,6 @@ export async function startBackend() {
       ingestion = await bootstrapInnertube(parsedLiveId);
       console.log(`[Backend] ✓ YouTube chat connected successfully`);
       ingestion.emitter.on('message', (message) => {
-        // Debug: Log all message attributes
-        console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
-        console.log('[Message Debug] Full message object:');
-        console.log(JSON.stringify(message, null, 2));
-        console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
-        
         store.push(message);
         if (store.length > MAX_MESSAGES) {
           store.splice(0, store.length - MAX_MESSAGES);
@@ -111,12 +105,6 @@ export async function startBackend() {
       console.log(`[Backend] ✓ YouTube chat connected successfully`);
       
       ingestion.emitter.on('message', (message) => {
-        // Debug: Log all message attributes
-        console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
-        console.log('[Message Debug] Full message object:');
-        console.log(JSON.stringify(message, null, 2));
-        console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
-        
         store.push(message);
         if (store.length > MAX_MESSAGES) {
           store.splice(0, store.length - MAX_MESSAGES);

backend/src/ingestion/youtubei.ts

@@ -270,13 +270,6 @@ function normalizeAction(action: any): ChatMessage | null {
   const item = action.item;
   if (!item) return null;
 
-  // Debug: Log raw item from YouTube API
-  console.log('╔════════════════════════════════════════════════════════════════╗');
-  console.log('║ RAW INNERTUBE API ITEM                                         ║');
-  console.log('╚════════════════════════════════════════════════════════════════╝');
-  console.log(JSON.stringify(item, null, 2));
-  console.log('╚════════════════════════════════════════════════════════════════╝');
-
   // Normalize various live chat events
   const itemType = String(item.type || '').trim();
   const messageText = resolveMessageText(item).toLowerCase();
@@ -294,22 +287,11 @@ function normalizeAction(action: any): ChatMessage | null {
     messageText.includes('received a gift') ||
     /received\s+a\s+.*membership.*by/i.test(messageText);
 
-  // Log all gift-related messages for debugging
-  if (isGiftPurchase || isGiftReceived || isGiftRecipientMessage) {
-    console.log(`[Gift Debug] Type: ${itemType}, Author: ${item.author?.name}, Text: "${messageText}", Purchase: ${isGiftPurchase}, Received: ${isGiftReceived}, TextPattern: ${isGiftRecipientMessage}`);
-  }
-
   // Ignore gift received messages - we only care about the purchaser
   if (isGiftReceived || isGiftRecipientMessage) {
-    console.log(`[Gift] Filtering out recipient message from: ${item.author?.name}`);
     return null;
   }
 
-  // Log gift purchase messages for debugging
-  if (isGiftPurchase) {
-    console.log(`[Chat] Gift purchase detected - Author: ${item.author?.name}, Type: ${itemType}, Text: ${messageText}`);
-  }
-
   if (isText || isPaid || isMembership || isGiftPurchase) {
     // For gift purchases, author info is in header
     const authorSource = isGiftPurchase ? item.header : item;

client/app/dashboard/page.tsx

@@ -239,8 +239,9 @@ function useOverlaySelection() {
         // Heartbeat - connection is alive
       });
 
-      globalSSEConnection.onerror = () => {
+      globalSSEConnection.onerror = (error) => {
-        console.error('[Dashboard] SSE error');
+        console.error('[Dashboard] SSE connection error - will auto-reconnect', error);
+        // EventSource automatically reconnects, no action needed
       };
     }
 

client/app/globals.css

@@ -918,7 +918,7 @@ main {
 .overlay__card {
   background: #1f1f1f;
   border: 1px solid #3a3a3a;
-  border-radius: 8px;
+  border-radius: 16px;
   padding: 1rem 1.5rem;
   display: flex;
   flex-direction: column;
@@ -927,6 +927,7 @@ main {
   max-width: 95vw;
   animation: fadeIn 0.4s ease-out;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
 }
 
 .overlay__card--fadeOut {

client/app/overlay/page.tsx

@@ -128,11 +128,7 @@ export default function OverlayPage() {
             </>
           )}
         </div>
-      ) : (
+      ) : null}
-        <div className="overlay__placeholder">
-          <span>{connected ? 'Awaiting selection…' : 'Reconnecting…'}</span>
-        </div>
-      )}
     </main>
   );
 }