Fix/issues 509 512 514 517

PR_DESCRIPTION.md

@@ -0,0 +1,72 @@
+# Fix frontend debug logging, accessibility, dead code, and backend pagination
+
+## Summary
+
+This PR addresses four frontend and backend issues:
+- Removes debug console logging from SSE event handling and stream-detail page
+- Removes unused `users` query parameter that the backend ignores
+- Adds accessible ARIA label to the top-up amount input field
+- Removes dead legacy Dashboard component
+- Adds `page` parameter support to the stream events endpoint for consistent pagination
+
+## Fixes
+
+Closes #509
+Closes #512
+Closes #514
+Closes #517
+
+## Changes
+
+### Frontend (fix/issues-509-512-514-517)
+
+**Issue #509: Remove debug console logging**
+- Removed `console.log('SSE connected:', data.clientId)` from useStreamEvents hook
+- Removed `console.error()` calls from SSE message and event parsing
+- Removed `console.log()` call from reconnect retry logic
+- Removed debug logging from stream-detail event handler
+- Simplified onmessage handler which wasn't being used for event processing
+
+**Issue #512: Add accessible label to top-up input**
+- Added `aria-label="Top-up amount"` to the number input field on stream detail page
+- Maintains existing placeholder as a visual hint, not the sole accessible label
+- No visual changes to the UI
+
+**Issue #514: Remove dead components**
+- Deleted `frontend/src/components/Dashboard.tsx` which contained hardcoded mock stream data
+- This was a legacy component not used by the application (live dashboard is at `app/dashboard/page.tsx`)
+- Kept `Progressbar.tsx` and `Livecounter.tsx` as they are actively used in the stream-detail page
+
+### Backend (fix/issues-509-512-514-517)
+
+**Issue #517: Add page parameter support**
+- Updated `getStreamEvents` controller to accept optional `page` query parameter
+- Maps 1-based page number to offset: `offset = (page - 1) * limit`
+- Page parameter is only used when `offset` and `cursor` are not provided
+- Maintains full backward compatibility with existing offset/cursor-based pagination
+- Mirrors the behavior of the sibling `/v1/events` endpoint
+
+## Test Plan
+
+- [ ] Frontend builds successfully: `cd frontend && npm run build`
+- [ ] Backend builds successfully: `cd backend && npm run build`
+- [ ] Frontend lint passes: `cd frontend && npm run lint`
+- [ ] Backend tests pass: `cd backend && npm run test`
+- Manually verify:
+  - [ ] Stream detail page loads without console errors
+  - [ ] SSE events update stream state without debug logs in browser console
+  - [ ] Top-up input is properly labeled in accessibility tools (e.g., browser dev tools, screen readers)
+  - [ ] Stream event pagination works with page parameter (e.g., `/v1/streams/123/events?page=2&limit=10`)
+  - [ ] Backward compatibility: offset/cursor-based pagination still works
+
+## Architecture Notes
+
+- No schema or API contract changes (page parameter is additive)
+- User-scoped events continue to arrive via server-side user subscription (via authenticated public key)
+- Removed unused `users` parameter reduces noise in URL construction and server processing
+
+## Branch
+
+`fix/issues-509-512-514-517`
+
+Push ready. Manual PR creation needed.

backend/src/controllers/stream.controller.ts

@@ -250,6 +250,7 @@ export const getStreamEvents = async (req: Request, res: Response) => {
 
     const rawLimit = req.query['limit'];
     const rawOffset = req.query['offset'];
+    const rawPage = req.query['page'];
     const cursor = typeof req.query['cursor'] === 'string' ? req.query['cursor'] : undefined;
     const direction = req.query['direction'] === 'asc' ? 'asc' as const : 'desc' as const;
     const order = req.query['order'] === 'asc' ? 'asc' as const : 'desc' as const;
@@ -259,8 +260,14 @@ export const getStreamEvents = async (req: Request, res: Response) => {
       rawLimit && typeof rawLimit === 'string' ? (Number.parseInt(rawLimit, 10) || 50) : 50,
       500,
     );
-    const offset =
-      rawOffset && typeof rawOffset === 'string' ? (Number.parseInt(rawOffset, 10) || 0) : 0;
+
+    let offset = 0;
+    if (rawOffset && typeof rawOffset === 'string') {
+      offset = Number.parseInt(rawOffset, 10) || 0;
+    } else if (rawPage && typeof rawPage === 'string' && !cursor) {
+      const page = Number.parseInt(rawPage, 10) || 1;
+      offset = Math.max(0, (page - 1) * limit);
+    }
 
     const whereClause: any = { streamId: parsedStreamId };
     if (eventType) {

frontend/src/app/streams/[id]/page.tsx

@@ -484,6 +484,7 @@ export default function StreamDetailsPage() {
               <div className="mt-4 flex gap-2">
                 <input
                   type="number"
+                  aria-label="Top-up amount"
                   placeholder={`Amount in ${tokenSymbol}`}
                   value={topUpAmount}
                   onChange={(e) => setTopUpAmount(e.target.value)}

frontend/src/hooks/useStreamEvents.ts

@@ -28,7 +28,7 @@
 ): UseStreamEventsReturn {
   const {
     streamIds = [],
     userPublicKeys = [],
     subscribeToAll = false,
     autoReconnect = true,
     maxRetryDelay = 30000,
@@ -47,12 +47,11 @@
 
   const buildUrl = useCallback(() => {
     const params = new URLSearchParams();
-    
+
     if (subscribeToAll) {
       params.append('all', 'true');
     } else {
       streamIds.forEach(id => params.append('streams', id));
-      userPublicKeys.forEach(key => params.append('users', key));
     }
 
     // Add JWT token to query string for authentication
@@ -63,7 +62,7 @@
 
     const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
     return `${baseUrl}/v1/events/subscribe?${params}`;
-  }, [streamIds, userPublicKeys, subscribeToAll, jwtToken]);
+  }, [streamIds, subscribeToAll, jwtToken]);
 
   const clearEvents = useCallback(() => {
     setEvents([]);
@@ -81,16 +80,6 @@
       retryDelayRef.current = 1000; // Reset retry delay
     };
 
-    eventSource.onmessage = (e) => {
-      try {
-        const data = JSON.parse(e.data);
-        if (data.type === 'connected') {
-          console.log('SSE connected:', data.clientId);
-        }
-      } catch (err) {
-        console.error('Failed to parse SSE message:', err);
-      }
-    };
 
     const handleEvent = (type: StreamEvent['type']) => (e: MessageEvent) => {
       try {
@@ -99,8 +88,8 @@
           { type, data, timestamp: Date.now() },
           ...prev.slice(0, 99), // Keep last 100 events
         ]);
-      } catch (err) {
-        console.error(`Failed to parse ${type} event:`, err);
+      } catch {
+        // Silently ignore malformed event messages
       }
     };
 
@@ -120,7 +109,6 @@
       if (autoReconnect) {
         setReconnecting(true);
         reconnectTimeoutRef.current = setTimeout(() => {
-          console.log(`Reconnecting in ${retryDelayRef.current}ms...`);
           connectRef.current();
           retryDelayRef.current = Math.min(
             retryDelayRef.current * 2,