@tuturuuu/ui 0.7.0 → 0.8.0

package/src/hooks/__tests__/useCursorTracking.test.tsx

@@ -0,0 +1,212 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { createClient } from '@tuturuuu/supabase/next/client';
+import type { RefObject } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { PRIVATE_TASK_REALTIME_CHANNEL_CONFIG } from '../useBoardRealtime.types';
+import { useCursorTracking } from '../useCursorTracking';
+
+type BroadcastListener = (message: {
+  payload: Record<string, unknown>;
+}) => void;
+
+type MockSupabaseClient = {
+  channel: ReturnType<typeof vi.fn>;
+  removeChannel: ReturnType<typeof vi.fn>;
+};
+
+type MockCreateClientFn = {
+  (): MockSupabaseClient;
+  mockReturnValue: (value: MockSupabaseClient) => void;
+};
+
+vi.mock('@tuturuuu/supabase/next/client', () => ({
+  createClient: vi.fn(),
+}));
+
+vi.mock('@tuturuuu/utils/constants', () => ({
+  DEV_MODE: false,
+}));
+
+function createContainerRef(): RefObject<HTMLDivElement | null> {
+  const element = document.createElement('div');
+  element.getBoundingClientRect = () =>
+    ({
+      bottom: 100,
+      height: 100,
+      left: 0,
+      right: 100,
+      top: 0,
+      width: 100,
+      x: 0,
+      y: 0,
+    }) as DOMRect;
+  document.body.append(element);
+  return { current: element };
+}
+
+describe('useCursorTracking', () => {
+  let broadcastListeners: Map<string, BroadcastListener>;
+  let mockChannel: {
+    on: ReturnType<typeof vi.fn>;
+    send: ReturnType<typeof vi.fn>;
+    subscribe: ReturnType<typeof vi.fn>;
+  };
+  let mockRemoveChannel: ReturnType<typeof vi.fn>;
+  let requestAnimationFrameMock: ReturnType<typeof vi.fn>;
+  let animationFrameCallbacks: FrameRequestCallback[];
+
+  beforeEach(() => {
+    broadcastListeners = new Map();
+    animationFrameCallbacks = [];
+
+    requestAnimationFrameMock = vi.fn((callback: FrameRequestCallback) => {
+      animationFrameCallbacks.push(callback);
+      return animationFrameCallbacks.length;
+    });
+    vi.stubGlobal('requestAnimationFrame', requestAnimationFrameMock);
+    vi.stubGlobal('cancelAnimationFrame', vi.fn());
+
+    mockChannel = {
+      on: vi.fn(
+        (
+          type: string,
+          config: { event?: string },
+          callback: BroadcastListener
+        ) => {
+          if (type === 'broadcast' && config.event) {
+            broadcastListeners.set(config.event, callback);
+          }
+          return mockChannel;
+        }
+      ),
+      send: vi.fn(),
+      subscribe: vi.fn(() => mockChannel),
+    };
+    mockRemoveChannel = vi.fn();
+
+    const mockCreateClient = createClient as unknown as MockCreateClientFn;
+    mockCreateClient.mockReturnValue({
+      channel: vi.fn(() => mockChannel),
+      removeChannel: mockRemoveChannel,
+    });
+  });
+
+  afterEach(() => {
+    document.body.replaceChildren();
+    vi.unstubAllGlobals();
+  });
+
+  it('subscribes to cursor channels with private realtime authorization', () => {
+    const containerRef = createContainerRef();
+
+    renderHook(() =>
+      useCursorTracking('board-realtime-board-1', containerRef, {
+        display_name: 'Current User',
+        id: 'user-current',
+      })
+    );
+
+    const supabaseInstance = (createClient as unknown as MockCreateClientFn)();
+    expect(supabaseInstance.channel).toHaveBeenCalledWith(
+      'board-realtime-board-1',
+      PRIVATE_TASK_REALTIME_CHANNEL_CONFIG
+    );
+  });
+
+  it('broadcasts cursor payloads without private profile fields', async () => {
+    const containerRef = createContainerRef();
+
+    renderHook(() =>
+      useCursorTracking(
+        'board-realtime-board-1',
+        containerRef,
+        {
+          avatar_url: 'https://example.com/avatar.png',
+          display_name: 'Current User',
+          email: 'current@example.com',
+          id: 'user-current',
+        },
+        { cursorScope: { boardId: 'board-1', type: 'board' } }
+      )
+    );
+
+    act(() => {
+      containerRef.current?.dispatchEvent(
+        new MouseEvent('mousemove', { clientX: 80, clientY: 40 })
+      );
+      animationFrameCallbacks.shift()?.(0);
+    });
+
+    await waitFor(() => expect(mockChannel.send).toHaveBeenCalled());
+    expect(mockChannel.send).toHaveBeenCalledWith({
+      event: 'cursor-move',
+      payload: {
+        metadata: { cursorScope: { boardId: 'board-1', type: 'board' } },
+        user: {
+          avatar_url: 'https://example.com/avatar.png',
+          display_name: 'Current User',
+          id: 'user-current',
+        },
+        x: expect.any(Number),
+        y: expect.any(Number),
+      },
+      type: 'broadcast',
+    });
+  });
+
+  it('accepts only well-formed cursor payloads and strips private fields', () => {
+    const containerRef = createContainerRef();
+    const { result } = renderHook(() =>
+      useCursorTracking('board-realtime-board-1', containerRef, {
+        display_name: 'Current User',
+        id: 'user-current',
+      })
+    );
+
+    const listener = broadcastListeners.get('cursor-move');
+    expect(listener).toBeDefined();
+
+    act(() => {
+      listener?.({
+        payload: {
+          user: { email: 'bad@example.com' },
+          x: 12,
+          y: 18,
+        },
+      });
+    });
+    expect(result.current.cursors.size).toBe(0);
+
+    act(() => {
+      listener?.({
+        payload: {
+          metadata: { cursorScope: { boardId: 'board-1', type: 'board' } },
+          user: {
+            avatar_url: 'https://example.com/other.png',
+            display_name: 'Other User',
+            email: 'other@example.com',
+            id: 'user-other',
+          },
+          x: 12,
+          y: 18,
+        },
+      });
+    });
+
+    expect(result.current.cursors.get('user-other')).toEqual({
+      lastUpdatedAt: expect.any(Number),
+      metadata: { cursorScope: { boardId: 'board-1', type: 'board' } },
+      user: {
+        avatar_url: 'https://example.com/other.png',
+        display_name: 'Other User',
+        id: 'user-other',
+      },
+      x: 12,
+      y: 18,
+    });
+  });
+});

package/src/hooks/useBoardRealtime.ts

@@ -10,8 +10,10 @@ import { toast } from './use-toast';
 import {
   type BoardRealtimePayload,
   createRealtimeClientId,
+  getBoardRealtimeChannelName,
   isBoardRealtimeEnvelope,
   LOCAL_BROADCAST_CHANNEL_PREFIX,
+  PRIVATE_TASK_REALTIME_CHANNEL_CONFIG,
   type RealtimeChannel,
   SEEN_REALTIME_EVENT_LIMIT,
 } from './useBoardRealtime.types';
@@ -205,9 +207,10 @@ export function useBoardRealtime(
       channelRef.current = null;
     }
 
-    const channel = supabase.channel(`board-realtime-${boardId}`, {
-      config: { broadcast: { self: false } },
-    });
+    const channel = supabase.channel(
+      getBoardRealtimeChannelName(boardId),
+      PRIVATE_TASK_REALTIME_CHANNEL_CONFIG
+    );
     channelRef.current = channel;
 
     channel

package/src/hooks/useBoardRealtime.types.ts

@@ -14,8 +14,19 @@ type BoardRealtimeEnvelope = {
   payload: BoardRealtimePayload;
 };
 
+export const BOARD_REALTIME_CHANNEL_PREFIX = 'board-realtime';
 export const LOCAL_BROADCAST_CHANNEL_PREFIX = 'tuturuuu:board-realtime';
 export const SEEN_REALTIME_EVENT_LIMIT = 500;
+export const PRIVATE_TASK_REALTIME_CHANNEL_CONFIG = {
+  config: {
+    broadcast: { self: false },
+    private: true,
+  },
+} as const;
+
+export function getBoardRealtimeChannelName(boardId: string) {
+  return `${BOARD_REALTIME_CHANNEL_PREFIX}-${boardId}`;
+}
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === 'object' && value !== null;

package/src/hooks/useCursorTracking.ts

@@ -5,15 +5,79 @@ import { DEV_MODE } from '@tuturuuu/utils/constants';
 import type { RefObject } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { usePageVisibility } from './use-page-visibility';
+import { PRIVATE_TASK_REALTIME_CHANNEL_CONFIG } from './useBoardRealtime.types';
+
+type CursorUser = Pick<User, 'avatar_url' | 'display_name' | 'id'> & {
+  id: string;
+};
 
 export interface CursorPosition {
   x: number;
   y: number;
-  user?: User;
+  user?: CursorUser;
   metadata?: { [key: string]: any };
   lastUpdatedAt: number;
 }
 
+type ParsedCursorPosition = CursorPosition & { user: CursorUser };
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function sanitizeCursorUser(user: User | undefined): CursorUser | null {
+  if (!user?.id) return null;
+
+  return {
+    avatar_url:
+      typeof user.avatar_url === 'string' && user.avatar_url.length > 0
+        ? user.avatar_url
+        : null,
+    display_name:
+      typeof user.display_name === 'string' && user.display_name.length > 0
+        ? user.display_name
+        : null,
+    id: user.id,
+  };
+}
+
+function sanitizeCursorMetadata(metadata: { [key: string]: any } | undefined) {
+  if (metadata == null || !isRecord(metadata) || Array.isArray(metadata)) {
+    return undefined;
+  }
+
+  return metadata;
+}
+
+function parseCursorMovePayload(payload: unknown): ParsedCursorPosition | null {
+  if (!isRecord(payload)) return null;
+
+  const { metadata, user, x, y } = payload;
+  if (typeof x !== 'number' || !Number.isFinite(x)) return null;
+  if (typeof y !== 'number' || !Number.isFinite(y)) return null;
+  if (!isRecord(user) || typeof user.id !== 'string' || user.id.length === 0) {
+    return null;
+  }
+
+  return {
+    lastUpdatedAt: Date.now(),
+    metadata: sanitizeCursorMetadata(metadata as { [key: string]: any }),
+    user: {
+      avatar_url:
+        typeof user.avatar_url === 'string' && user.avatar_url.length > 0
+          ? user.avatar_url
+          : null,
+      display_name:
+        typeof user.display_name === 'string' && user.display_name.length > 0
+          ? user.display_name
+          : null,
+      id: user.id,
+    },
+    x,
+    y,
+  };
+}
+
 export function useCursorTracking(
   channelName: string,
   containerRef?: RefObject<HTMLElement | null>,
@@ -59,6 +123,8 @@ export function useCursorTracking(
       metadata?: { [key: string]: any }
     ) => {
       if (!channelRef.current) return;
+      const cursorUser = sanitizeCursorUser(user);
+      if (cursorUser == null) return;
       // Check error count instead of state to avoid dependency
       if (errorCountRef.current >= MAX_ERROR_COUNT) return;
 
@@ -73,7 +139,12 @@ export function useCursorTracking(
                 await channelRef.current?.send({
                   type: 'broadcast',
                   event: 'cursor-move',
-                  payload: { x, y, user, metadata },
+                  payload: {
+                    metadata: sanitizeCursorMetadata(metadata),
+                    user: cursorUser,
+                    x,
+                    y,
+                  },
                 });
 
                 lastBroadcastTimeRef.current = Date.now();
@@ -90,7 +161,12 @@ export function useCursorTracking(
           await channelRef.current.send({
             type: 'broadcast',
             event: 'cursor-move',
-            payload: { x, y, user, metadata },
+            payload: {
+              metadata: sanitizeCursorMetadata(metadata),
+              user: cursorUser,
+              x,
+              y,
+            },
           });
 
           lastBroadcastTimeRef.current = now;
@@ -207,38 +283,25 @@ export function useCursorTracking(
           channelRef.current = null;
         }
 
-        const channel = supabase.channel(channelName, {
-          config: {
-            broadcast: {
-              self: false, // Don't receive own broadcasts
-            },
-          },
-        });
+        const channel = supabase.channel(
+          channelName,
+          PRIVATE_TASK_REALTIME_CHANNEL_CONFIG
+        );
 
         channelRef.current = channel;
         // Listen for cursor movements from other users
         channel
           .on('broadcast', { event: 'cursor-move' }, (payload) => {
             try {
-              const {
-                x,
-                y,
-                user: broadcastUser,
-                metadata: broadcastMetadata,
-              } = payload.payload;
+              const cursor = parseCursorMovePayload(payload.payload);
+              if (cursor == null) return;
 
               // Ignore own broadcasts (extra safety)
-              if (broadcastUser.id === user?.id) return;
+              if (cursor.user?.id === user?.id) return;
 
               setCursors((prev) => {
                 const updated = new Map(prev);
-                updated.set(broadcastUser.id || '', {
-                  x,
-                  y,
-                  user: broadcastUser,
-                  metadata: broadcastMetadata,
-                  lastUpdatedAt: Date.now(),
-                });
+                updated.set(cursor.user.id, cursor);
                 return updated;
               });
             } catch (err) {
@@ -289,16 +352,17 @@ export function useCursorTracking(
 
       // Broadcast cursor removal before unsubscribing (best effort)
       // This helps other users see the cursor disappear immediately
-      if (channelRef.current && user?.id) {
+      const cursorUser = sanitizeCursorUser(user);
+      if (channelRef.current && cursorUser != null) {
         try {
           channelRef.current.send({
             type: 'broadcast',
             event: 'cursor-move',
             payload: {
+              metadata: sanitizeCursorMetadata(metadata),
+              user: cursorUser,
               x: -1000,
               y: -1000,
-              user,
-              metadata,
             },
           });
         } catch (err) {

package/src/hooks/useTaskUserRealtime.ts

@@ -8,6 +8,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import {
   type BoardRealtimePayload,
   createRealtimeClientId,
+  PRIVATE_TASK_REALTIME_CHANNEL_CONFIG,
   type RealtimeChannel,
   SEEN_REALTIME_EVENT_LIMIT,
 } from './useBoardRealtime.types';
@@ -255,9 +256,10 @@ export function useTaskUserRealtime(userId: string | null | undefined) {
       return;
     }
 
-    const channel = supabase.channel(getTaskUserRealtimeChannelName(userId), {
-      config: { broadcast: { self: false } },
-    });
+    const channel = supabase.channel(
+      getTaskUserRealtimeChannelName(userId),
+      PRIVATE_TASK_REALTIME_CHANNEL_CONFIG
+    );
     channelRef.current = channel;
 
     channel