Feat/add collab mode

[Kripu77]

Summary by CodeRabbit

• New Features

  • Introduced real-time collaboration enabling multiple users to work on boards simultaneously
  • Added live cursor tracking to display remote user positions on shared boards
  • Implemented collaboration status bar showing online users and connection state
  • Added board sharing functionality via URL generation for inviting others
  • Introduced user nickname management and presence indicators
  • Added connection status display (connected, reconnecting, disconnected)

• Tests

  • Added comprehensive test coverage for collaboration functionality

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
thinkix	Ready	Preview, Comment	Mar 1, 2026 10:39am

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Introduces a complete real-time collaboration system with Liveblocks and Yjs integration. Adds a new @thinkix/collaboration package providing room-based multi-user synchronization, presence tracking with remote cursor visualization, avatar display, authentication handling, and comprehensive hooks/components. Integrates collaboration into the main board application with conditional rendering based on collaboration state. Updates dependencies, API route for auth, and test coverage across all new features.

Changes

Cohort / File(s)	Summary
Collaboration Package Core packages/collaboration/package.json, packages/collaboration/tsconfig.json, packages/collaboration/src/index.ts, packages/collaboration/src/types.ts, packages/collaboration/src/user-identity.ts, packages/collaboration/src/sync-bus.ts, packages/collaboration/src/cursor-manager.ts	Establishes the collaboration package infrastructure with comprehensive type definitions, user identity generation via DiceBear avatars and unique-names-generator, a pub/sub sync bus for local/remote element changes, and cursor state management with viewport transforms and idle timeout handling.
Collaboration Providers & Hooks packages/collaboration/src/adapter/yjs-provider.tsx, packages/collaboration/src/adapter/collaboration-context.tsx, packages/collaboration/src/adapter/index.ts, packages/collaboration/src/providers/liveblocks/*, packages/collaboration/src/hooks/use-*.ts	Integrates Yjs and Liveblocks with React context for room state, presence updates, sync status, and element mutations. Provides hooks for board synchronization, cursor tracking, collaboration state persistence, and viewport coordinate transformations. Manages connection status, user presence, and bidirectional sync between local and remote peers.
Collaboration UI Components packages/collaboration/src/components/cursor-overlay.tsx, packages/collaboration/src/components/avatars.tsx, packages/collaboration/src/components/ui.tsx, packages/collaboration/src/components/error-boundary.tsx, packages/collaboration/src/components/index.ts	Renders remote user cursors with document-to-screen coordinate conversion, live avatar strips with overflow indicators, presence status (connected/reconnecting/disconnected), nickname dialog, share button, collaboration panel toggle, and error boundary with retry logic.
Board Collaboration Integration features/collaboration/components/collaborative-board.tsx, features/collaboration/components/room.tsx, features/collaboration/components/collaborative-app-menu.tsx, features/collaboration/components/collaborate-button.tsx, features/collaboration/index.ts	Wraps board with Yjs/Liveblocks providers, syncs element mutations bidirectionally via sync bus, applies remote cursor tracking, displays collaboration status bar with user count and connection state, integrates nickname/share dialogs, and toggles collaborative UI based on room state.
Board Layout & Canvas Updates features/board/components/BoardLayoutSlots.tsx, features/board/components/BoardCanvas.tsx, features/board/components/index.ts	Introduces BoardLayoutSlots for flexible slot-based UI composition (topLeft, bottomLeft, topRight), and extends BoardCanvas with RemoteSyncHandler to listen for remote element changes and apply them to local board state via the sync bus.
Main App & Navigation app/page.tsx	Restructures app with Suspense boundaries, URL-based room parameter handling via useSearchParams, conditional collaboration state checks, and dual rendering paths: collaborative mode with Room, CollaborativeBoard, and collaborative slots vs. standard mode with regular BoardCanvas and slots. Integrates CollaborateButton and CollaborationStatusBar into the UI.
API & Authentication app/api/collaboration/auth/route.ts, liveblocks.config.ts	Adds POST endpoint that validates userId, userName, userColor, constructs Liveblocks session with user info, optionally grants room FULL_ACCESS, and returns authorization token. Defines global Liveblocks type augmentation for Presence, Storage, UserMeta, and RoomInfo.
Toolbar & Configuration features/toolbar/components/AppMenu.tsx, eslint.config.mjs, tsconfig.json, vitest.config.mts	Extends AppMenu with collaboration prop containing user, userCount, roomId, and callbacks for share/nickname/leave; renders NicknameDialog and collaboration actions conditionally. Updates ESLint to ignore coverage/ and include collaboration components. Adds TypeScript and Vitest path aliases for the new collaboration package.
Dependencies & Build Config package.json, lib/posthog-server.ts	Adds @liveblocks/node@3.14.1 and yjs@13.6.29 dependencies. Fixes posthog-server to call crypto.randomUUID() inline instead of importing randomUUID, avoiding runtime errors.
Patches patches/@plait+draw+0.92.3.patch	Refactors shape rendering calls to avoid explicit fillStyle: 'solid' spreading and removes some fill properties, standardizing how options are passed to drawing primitives.
Comprehensive Test Coverage tests/components/*.test.tsx, tests/unit/*.test.ts, tests/e2e/collaboration.test.ts, tests/__mocks__/setup.mts	Adds ~1500+ lines of unit, integration, and end-to-end tests covering: collaboration components (avatars, dialogs, panels), cursor management with coordinate transforms and idle timeouts, collaboration state/context/hooks, Yjs provider integration, API authentication, sync bus, user identity generation, viewport utilities, timing helpers, and multi-user scenarios via Playwright.

Sequence Diagram(s)

sequenceDiagram
    participant Client as Client/Browser
    participant Auth as Auth Endpoint
    participant Liveblocks as Liveblocks Service
    participant Yjs as Yjs Sync
    participant Peer as Remote Peer

    Client->>Auth: POST /api/collaboration/auth<br/>(userId, userName, userColor, room)
    Auth->>Liveblocks: authorizeWithToken(sessionInfo)
    Liveblocks-->>Auth: authorization token
    Auth-->>Client: token response

    Client->>Liveblocks: connectToRoom(roomId, token)
    Client->>Yjs: initializeYjsDoc()
    Yjs->>Liveblocks: subscribeLiveblocks
    Client->>Client: renderRoom with YjsProvider + RoomProvider

    Peer->>Yjs: updateRemoteElements
    Yjs-->>Client: remoteElementsChanged
    Client->>Client: updateLocalBoard(remoteElements)
    Client->>Client: triggerRemoteSyncHandler

    Client->>Client: localBoardChange
    Client->>Yjs: emitLocalChange(elements)
    Yjs->>Peer: broadcastUpdate
    Peer->>Peer: applyRemoteChange

    Client->>Client: pointerMove
    Client->>Liveblocks: updatePresence(cursor)
    Liveblocks->>Peer: broadcastPresenceUpdate
    Peer->>Peer: renderRemoteCursor

Loading

sequenceDiagram
    participant Board as Local Board
    participant SyncBus as Sync Bus
    participant RemoteSync as RemoteSyncHandler
    participant Elements as Element State

    Board->>Board: handleChange(newElements)
    Board->>SyncBus: emitLocalChange(newElements)
    SyncBus->>RemoteSync: notifyLocalChangeSubscribers
    RemoteSync->>RemoteSync: onRemoteChange(newElements)
    RemoteSync->>Elements: updateElements(newElements)
    Elements->>Board: rerender(updatedElements)

    rect rgba(100, 150, 200, 0.5)
        Note over SyncBus,Elements: Remote peer emits change
    end
    
    RemoteSync->>SyncBus: subscribeToRemoteChanges
    SyncBus->>RemoteSync: notifyRemoteChangeSubscribers
    RemoteSync->>Elements: applyRemoteElements
    Elements->>Board: refreshWithRemoteData

Loading

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Possibly related PRs

• PR #19: Modifies lib/posthog-server.ts to change randomUUID() import and usage pattern, directly related to the posthog-server fix in this PR.
• PR #16: Modifies features/board/components/BoardCanvas.tsx for cursor class logic, while this PR extends the same file with RemoteSyncHandler and sync bus integration.

Poem

🐰 Hopping into rooms with cursors bright,
Yjs and Liveblocks dance through the night,
Remote peers syncing, presence so fine,
Multi-user magic, now boards align! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'Feat/add collab mode' directly reflects the main objective of adding collaboration functionality, which is extensively implemented across the changeset with new collaboration components, hooks, providers, and integration.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/add-collab-mode

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

⚠️ Test Results

Metric	Coverage
Lines	0%
Functions	96.32%
Branches	84.91%
Statements	94.82%
Average	69.0%

📦 Download Coverage Report

How to view coverage report

1. Download the coverage artifact from the link above
2. Extract the ZIP file
3. Open index.html in your browser

---

Commit: 04b6082ad6bbc225e90dbf29d686c5da8ee96d26

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@tests/unit/liveblocks-hooks.test.ts`:
- Around line 4-22: Replace the static mock with a shared configurable mockState
and stable spy functions so tests can both mutate state per test and assert
calls: create a module-level mockState object holding myPresence, users,
connectionStatus, userCount and isConnected and expose stable spies for
updateCursor, updateSelection, updateViewport and updateUserInfo; have the
mocked hooks (usePresence, useRoomPresence, useRoomConnection) return values
that read from mockState and return the stable spy functions so vi.fn()
instances are not recreated; in tests reset mockState and call
vi.clearAllMocks() in beforeEach to restore defaults and allow verifying call
counts and different connection/user scenarios.

---

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ebf178d and ad71c7b.

📒 Files selected for processing (3)

• tests/unit/collaboration-context.test.tsx
• tests/unit/liveblocks-hooks.test.ts
• tests/unit/use-cursor-tracking.test.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• tests/unit/use-cursor-tracking.test.tsx
• tests/unit/collaboration-context.test.tsx