canopy-ui 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canopy-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "repository": {
     "type": "git",

package/src/presence/PresenceBadge.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { PresenceBadge } from './PresenceBadge'
 import type { Viewer } from './usePresence'
 
@@ -50,6 +50,32 @@ describe('PresenceBadge', () => {
     expect(screen.getByText('User 1')).toBeTruthy()
   })
 
+  it('renders two viewers with no email without colliding their React keys', () => {
+    // Email is not guaranteed non-empty (the server sends "" for a user with
+    // none), so it cannot be the row key. A collision here shows up as a
+    // React duplicate-key error, not as a visibly missing row.
+    const errors: unknown[][] = []
+    const spy = vi.spyOn(console, 'error').mockImplementation((...args) => {
+      errors.push(args)
+    })
+    try {
+      render(
+        <PresenceBadge
+          viewers={[
+            viewer(1, { email: '', name: 'Ana' }),
+            viewer(2, { email: '', name: 'Bo' }),
+          ]}
+        />,
+      )
+      fireEvent.click(screen.getByRole('button'))
+      expect(screen.getByText('Ana')).toBeTruthy()
+      expect(screen.getByText('Bo')).toBeTruthy()
+    } finally {
+      spy.mockRestore()
+    }
+    expect(errors.flat().join(' ')).not.toMatch(/same key/i)
+  })
+
   it('marks idle viewers in the expanded list', () => {
     render(<PresenceBadge viewers={[viewer(1, { idle: true }), viewer(2)]} />)
     fireEvent.click(screen.getByRole('button'))

package/src/presence/PresenceBadge.tsx

@@ -33,6 +33,12 @@ export function PresenceBadge({ viewers }: { viewers: Viewer[] }) {
   if (viewers.length < 2) return null
 
   // You first, then everyone else in roster order.
+  //
+  // Rows are keyed by POSITION, not by email: email is the only plausible
+  // identity field on a Viewer and it is not guaranteed non-empty (the
+  // server sends "" for a user with no email), so two such viewers would
+  // collide on one key. The list is short, server-ordered, and re-rendered
+  // wholesale on every roster broadcast, so index keys cost nothing here.
   const ordered = [...viewers].sort((a, b) => Number(b.self) - Number(a.self))
   const shown = ordered.slice(0, MAX_AVATARS)
   const overflow = ordered.length - shown.length
@@ -46,11 +52,11 @@ export function PresenceBadge({ viewers }: { viewers: Viewer[] }) {
         aria-label={`${viewers.length} people viewing this page`}
         className="flex items-center -space-x-2 rounded-full p-0.5 hover:opacity-90"
       >
-        {shown.map((v) => {
+        {shown.map((v, i) => {
           const { initials, colorClass } = avatarFor(v.email, v.name)
           return (
             <span
-              key={v.email}
+              key={i}
               className={`inline-flex h-6 w-6 items-center justify-center rounded-full
                 ring-2 ring-card text-[10px] font-semibold text-white ${colorClass}
                 ${v.idle ? 'opacity-45' : ''}`}
@@ -74,10 +80,10 @@ export function PresenceBadge({ viewers }: { viewers: Viewer[] }) {
           className="absolute right-0 z-50 mt-2 w-64 rounded-md border border-border
             bg-card p-1 shadow-md"
         >
-          {ordered.map((v) => {
+          {ordered.map((v, i) => {
             const { initials, colorClass } = avatarFor(v.email, v.name)
             return (
-              <div key={v.email} className="flex items-center gap-2 rounded px-2 py-1.5">
+              <div key={i} className="flex items-center gap-2 rounded px-2 py-1.5">
                 <span
                   className={`inline-flex h-6 w-6 shrink-0 items-center justify-center
                     rounded-full text-[10px] font-semibold text-white ${colorClass}

package/src/presence/usePresence.test.ts

@@ -5,6 +5,7 @@ import { usePresence } from './usePresence'
 
 class FakeSocket {
   static last: FakeSocket | null = null
+  static created = 0
   static OPEN = 1
   readyState = 0
   sent: string[] = []
@@ -13,6 +14,7 @@ class FakeSocket {
   onclose: (() => void) | null = null
   constructor(public url: string) {
     FakeSocket.last = this
+    FakeSocket.created += 1
   }
   send(frame: string) {
     this.sent.push(frame)
@@ -32,6 +34,7 @@ class FakeSocket {
 beforeEach(() => {
   vi.stubGlobal('WebSocket', FakeSocket as unknown as typeof WebSocket)
   vi.useFakeTimers()
+  FakeSocket.created = 0
 })
 afterEach(() => {
   vi.useRealTimers()
@@ -113,6 +116,72 @@ describe('usePresence', () => {
     expect(FakeSocket.last).toBeNull()
   })
 
+  it('backs off exponentially while reconnects keep failing, up to a ceiling', () => {
+    // A tab left open past session expiry is closed with 4001 on every
+    // attempt. A flat retry hammers a handshake every 2s forever; the delay
+    // must grow and then cap.
+    renderHook(() => usePresence({ url: 'ws://x/ws/presence/', location: LOC }))
+    expect(FakeSocket.created).toBe(1)
+
+    const failOnce = (expectedDelay: number) => {
+      const before = FakeSocket.created
+      act(() => FakeSocket.last!.onclose!())
+      // Nothing reconnects a millisecond early...
+      act(() => void vi.advanceTimersByTime(expectedDelay - 1))
+      expect(FakeSocket.created).toBe(before)
+      // ...and exactly one reconnect lands on the deadline.
+      act(() => void vi.advanceTimersByTime(1))
+      expect(FakeSocket.created).toBe(before + 1)
+    }
+
+    failOnce(2_000)
+    failOnce(4_000)
+    failOnce(8_000)
+    failOnce(16_000)
+    failOnce(32_000)
+    failOnce(60_000) // ceiling, not 64_000
+    failOnce(60_000) // and it stays there
+  })
+
+  it('resets the backoff once a socket actually opens', () => {
+    renderHook(() => usePresence({ url: 'ws://x/ws/presence/', location: LOC }))
+    act(() => FakeSocket.last!.onclose!())
+    act(() => void vi.advanceTimersByTime(2_000))
+    act(() => FakeSocket.last!.onclose!())
+    act(() => void vi.advanceTimersByTime(4_000)) // now at a 4s delay
+
+    act(() => FakeSocket.last!.open()) // a good connection clears the streak
+
+    const before = FakeSocket.created
+    act(() => FakeSocket.last!.onclose!())
+    act(() => void vi.advanceTimersByTime(2_000))
+    expect(FakeSocket.created).toBe(before + 1)
+  })
+
+  it('clears the previous page\'s viewers on navigation even when the socket is not open', () => {
+    // Otherwise the old page's avatars linger on the new page until a roster
+    // for it arrives — which, on a dead socket, may be never.
+    const { result, rerender } = renderHook(
+      ({ location }) => usePresence({ url: 'ws://x/ws/presence/', location }),
+      { initialProps: { location: LOC } },
+    )
+    act(() => FakeSocket.last!.open())
+    act(() =>
+      FakeSocket.last!.deliver({
+        event: 'presence.roster',
+        data: {
+          page_key: LOC.pageKey,
+          viewers: [{ email: 'a@x.com', name: 'A', sub_location: '', idle: false, self: false }],
+        },
+      }),
+    )
+    expect(result.current.viewers).toHaveLength(1)
+
+    FakeSocket.last!.readyState = 3 // socket dropped, reconnect pending
+    rerender({ location: { pageKey: 'ace:ws:activity', subLocation: 'Activity' } })
+    expect(result.current.viewers).toEqual([])
+  })
+
   it('swallows a synchronous WebSocket constructor throw and stays on an empty roster', () => {
     class ThrowingSocket {
       constructor() {

package/src/presence/usePresence.ts

@@ -16,7 +16,12 @@ export interface UsePresenceOptions {
 
 const HEARTBEAT_MS = 20_000
 const IDLE_AFTER_MS = 120_000
-const RECONNECT_MS = 2_000
+// Reconnect backoff. A flat retry is wrong for the permanent-failure case:
+// a tab left open past session expiry is closed with 4001 on every attempt,
+// so a flat 2s retry hammers a handshake forever. Double up to a ceiling and
+// reset on a socket that actually opens.
+const RECONNECT_BASE_MS = 2_000
+const RECONNECT_MAX_MS = 60_000
 
 /**
  * One presence socket per tab.
@@ -45,6 +50,13 @@ export function usePresence({ url, location }: UsePresenceOptions): { viewers: V
     let closedByCleanup = false
     let reconnectTimer: ReturnType<typeof setTimeout> | null = null
     let heartbeat: ReturnType<typeof setInterval> | null = null
+    let reconnectDelay = RECONNECT_BASE_MS
+
+    const scheduleReconnect = () => {
+      if (closedByCleanup) return
+      reconnectTimer = setTimeout(open, reconnectDelay)
+      reconnectDelay = Math.min(reconnectDelay * 2, RECONNECT_MAX_MS)
+    }
 
     const send = (frame: unknown) => {
       const ws = wsRef.current
@@ -66,11 +78,14 @@ export function usePresence({ url, location }: UsePresenceOptions): { viewers: V
         // failure — stay on the empty roster and retry on the normal
         // reconnect cadence, never propagate.
         setViewers([])
-        if (!closedByCleanup) reconnectTimer = setTimeout(open, RECONNECT_MS)
+        scheduleReconnect()
         return
       }
       wsRef.current = sock
       sock.onopen = () => {
+        // A socket that actually opened means the failure that got us here
+        // is over; start the next backoff series from the bottom.
+        reconnectDelay = RECONNECT_BASE_MS
         enter()
         heartbeat = setInterval(
           () => send({ type: 'presence.heartbeat', idle: idleRef.current }),
@@ -101,8 +116,7 @@ export function usePresence({ url, location }: UsePresenceOptions): { viewers: V
         if (wsRef.current === sock) wsRef.current = null
         if (heartbeat) clearInterval(heartbeat)
         setViewers([])
-        if (closedByCleanup) return
-        reconnectTimer = setTimeout(open, RECONNECT_MS)
+        scheduleReconnect()
       }
     }
     open()
@@ -122,9 +136,13 @@ export function usePresence({ url, location }: UsePresenceOptions): { viewers: V
   // render, and keying on identity would re-send presence.enter on every
   // render instead of only on an actual location change.
   useEffect(() => {
+    // Clear FIRST, unconditionally. If the socket is not open yet the old
+    // page's avatars are already wrong — leaving them up until a roster for
+    // the new page arrives (which, on a dead socket, may be never) shows
+    // strangers as viewing the page you just navigated to.
+    setViewers([])
     const ws = wsRef.current
     if (!location || !ws || ws.readyState !== WebSocket.OPEN) return
-    setViewers([])
     ws.send(
       JSON.stringify({
         type: 'presence.enter',