feat: calendar integration (#608)

* feat: calendar integration

* feat: add ICS calendar API endpoints for room configuration and sync

* feat: add Celery background tasks for ICS sync

* feat: implement Phase 2 - Multiple active meetings per room with grace period

This commit adds support for multiple concurrent meetings per room, implementing
grace period logic and improved meeting lifecycle management for calendar integration.

## Database Changes
- Remove unique constraint preventing multiple active meetings per room
- Add last_participant_left_at field to track when meeting becomes empty
- Add grace_period_minutes field (default: 15) for configurable grace period

## Meeting Controller Enhancements
- Add get_all_active_for_room() to retrieve all active meetings for a room
- Add get_active_by_calendar_event() to find meetings by calendar event ID
- Maintain backward compatibility with existing get_active() method

## New API Endpoints
- GET /rooms/{room_name}/meetings/active - List all active meetings
- POST /rooms/{room_name}/meetings/{meeting_id}/join - Join specific meeting

## Meeting Lifecycle Improvements
- 15-minute grace period after last participant leaves
- Automatic reactivation when participant rejoins during grace period
- Force close calendar meetings 30 minutes after scheduled end time
- Update process_meetings task to handle multiple active meetings

## Whereby Integration
- Clear grace period when participants join via webhook events
- Track participant count for grace period management

## Testing
- Add comprehensive tests for multiple active meetings
- Test grace period behavior and participant rejoin scenarios
- Test calendar meeting force closure logic
- All 5 new tests passing

This enables proper calendar integration with overlapping meetings while
preventing accidental meeting closures through the grace period mechanism.

* feat: implement frontend for calendar integration (Phase 3 & 4)

- Created MeetingSelection component for choosing between multiple active meetings
- Shows both active meetings and upcoming calendar events (30 min ahead)
- Displays meeting metadata with privacy controls (owner-only details)
- Supports creation of unscheduled meetings alongside calendar meetings

- Added waiting page for users joining before scheduled start time
- Shows countdown timer until meeting begins
- Auto-transitions to meeting when calendar event becomes active
- Handles early joining with proper routing

- Created collapsible info panel showing meeting details
- Displays calendar metadata (title, description, attendees)
- Shows participant count and duration
- Privacy-aware: sensitive info only visible to room owners

- Integrated ICS settings into room configuration dialog
- Test connection functionality with immediate feedback
- Manual sync trigger with detailed results
- Shows last sync time and ETag for monitoring
- Configurable sync intervals (1 min to 1 hour)

- New /room/{roomName} route for meeting selection
- Waiting room at /room/{roomName}/wait?eventId={id}
- Classic room page at /{roomName} with meeting info
- Uses sessionStorage to pass selected meeting between pages

- Added new endpoints for active/upcoming meetings
- Regenerated TypeScript client with latest OpenAPI spec
- Proper error handling and loading states
- Auto-refresh every 30 seconds for live updates

- Color-coded badges for meeting status
- Attendee status indicators (accepted/declined/tentative)
- Responsive design with Chakra UI components
- Clear visual hierarchy between active and upcoming meetings
- Smart truncation for long attendee lists

This completes the frontend implementation for calendar integration,
enabling users to seamlessly join scheduled meetings from their
calendar applications.

* WIP: Migrate calendar integration frontend to React Query

- Migrate all calendar components from useApi to React Query hooks
- Fix Chakra UI v3 compatibility issues (Card, Progress, spacing props, leftIcon)
- Update backend Meeting model to include calendar fields
- Replace imperative API calls with declarative React Query patterns
- Remove old OpenAPI generated files that conflict with new structure

* fix: alembic migrations

* feat: add calendar migration

* feat: update ics, first version working

* feat: implement tabbed interface for room edit dialog

- Add General, Calendar, and Share tabs to organize room settings
- Move ICS settings to dedicated Calendar tab
- Move Zulip configuration to Share tab
- Keep basic room settings and webhooks in General tab
- Remove redundant migration file
- Fix Chakra UI v3 compatibility issues in calendar components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* fix: infinite loop

* feat: improve ICS calendar sync UX and fix room URL matching

- Replace "Test Connection" button with "Force Sync" button (Edit Room only)
- Show detailed sync results: total events downloaded vs room matches
- Remove emoticons and auto-hide timeout for cleaner UX
- Fix room URL matching to use UI_BASE_URL instead of BASE_URL
- Replace FaSync icon with LuRefreshCw for consistency
- Clear sync results when dialog closes or Force Sync pressed
- Update tests to reflect UI_BASE_URL change and exact URL matching

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: reorganize room edit dialog and fix Force Sync button

- Move WebHook configuration from General to dedicated WebHook tab
- Add WebHook tab after Share tab in room edit dialog
- Fix Force Sync button not appearing by adding missing isEditing prop
- Fix indentation issues in MeetingSelection component

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: complete calendar integration with UI improvements and code cleanup

Calendar Integration Tasks:
- Update upcoming meetings window from 30 to 120 minutes
- Include currently happening events in upcoming meetings API
- Create shared time utility functions (formatDateTime, formatCountdown, formatStartedAgo)
- Improve ongoing meetings UI logic with proper time detection
- Fix backend code organization and remove excessive documentation

UI/UX Improvements:
- Restructure room page layout using MinimalHeader pattern
- Remove borders from header and footer elements
- Change button text from "Leave Meeting" to "Leave Room"
- Remove "Back to Reflector" footer for cleaner design
- Extract WaitPageClient component for better separation

Backend Changes:
- calendar_events.py: Fix import organization and extend timing window
- rooms.py: Update API default from 30 to 120 minutes
- Enhanced test coverage for ongoing meeting scenarios

Frontend Changes:
- MinimalHeader: Add onLeave prop for custom navigation
- MeetingSelection: Complete layout restructure with shared utilities
- timeUtils: New shared utility file for consistent time formatting

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: remove wait page and simplify Join button with 5-minute disable logic

- Remove entire wait page directory and associated files
- Update handleJoinUpcoming to create unscheduled meeting directly
- Simplify Join button to single state:
  - Always shows "Join" text
  - Blue when meeting can be joined (ongoing or within 5 minutes)
  - Gray/disabled when more than 5 minutes away
- Remove confusing "Join Now", "Join Early" text variations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: improve calendar integration and meeting UI

- Refactor ICS sync tasks to use @asynctask decorator for cleaner async handling
- Extract meeting creation logic into reusable function
- Improve meeting selection UI with distinct current/upcoming sections
- Add early join functionality for upcoming meetings within 5-minute window
- Simplify non-ICS room workflow with direct Whereby embed
- Fix import paths and component organization

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: restore original recording consent functionality

- Remove custom ConsentDialogButton and WherebyEmbed components
- Merge RoomClient logic back into main room page
- Restore original consent UI: blue button with toast modal
- Maintain calendar integration features for ICS-enabled rooms
- Add consent-handler.md documentation of original functionality
- Preserve focus management and accessibility features

* fix: redirect Join Now button to local meeting page

- Change handleJoinDirect to use onMeetingSelect instead of opening external URL
- Join Now button now navigates to /{roomName}/{meetingId} instead of whereby.com
- Maintains proper routing within the application

* feat: remove restrictive message for non-owners in private rooms

- Remove confusing message about room owner permissions
- Cleaner UI for all users regardless of ownership status
- Users will only see available meetings and join options

* feat: improve meeting selection UI for better readability

- Limit page content to max 800px width for better 4K display readability
- Remove LIVE tag badge for cleaner interface
- Remove shadow from main live meeting box
- Remove blue border and hover effects for minimal design
- Change background to neutral gray for less visual noise

* feat: add room by name endpoint for non-authenticated access

- Add GET /rooms/name/{room_name} backend endpoint
- Endpoint supports non-authenticated access for public rooms
- Returns RoomDetails with webhook fields hidden for non-owners
- Update useRoomGetByName hook to use new direct endpoint
- Remove authentication requirement from frontend hook
- Regenerate API client types

Fixes: Non-authenticated users can now access room lobbies

* feat: add friendly message when no meetings are ongoing

- Show centered message with calendar icon when no meetings are active
- Message text: 'No meetings right now' with helpful description
- Contextual text for owners/shared rooms mentioning quick meeting option
- Consistent gray styling matching the rest of the interface
- Only displays when both currentMeetings and upcomingMeetings are empty

* style: center no meetings message and remove background

- Change from Box to Flex with flex=1 for vertical centering
- Remove gray background, border radius, and padding
- Message now appears cleanly centered in available space
- Maintains horizontal and vertical centering

* feat: move Create Meeting button to header

- Remove 'Start a Quick Meeting' box from main content area
- Add showCreateButton and onCreateMeeting props to MinimalHeader
- Create Meeting button now appears in header left of Leave Room
- Only shows for room owners or shared room users
- Update no meetings message to remove reference to quick meeting below
- Cleaner, more accessible UI with actions in the header

* style: change room title and no meetings text to pure black

- Update room title in MinimalHeader from gray.700 to black
- Update 'No meetings right now' text from gray.700 to black
- Improves visual hierarchy and readability
- Consistent with other pages' styling

* style: linting

* fix: remove plan files

* fix: alembic migration with named foreign keys

* feat: add SyncStatus enum and refactor ICS sync to use rooms controller

- Add SyncStatus enum to replace string literals in ICS sync status
- Replace direct SQL queries in worker with rooms_controller.get_ics_enabled()
- Improve type safety and maintainability of ICS sync code
- Enum values: SUCCESS, UNCHANGED, ERROR, SKIPPED maintain backward compatibility

* refactor: remove unnecessary docstring from get_ics_enabled method

The function name is self-explanatory

* fix: import top level

* feat: use Literal type for ICSStatus.status field

- Changed ICSStatus.status from str to Literal['enabled', 'disabled']
- Improves type safety and API documentation

* feat: update TypeScript definitions for ICSStatus Literal type

- OpenAPI generation now properly reflects Literal['enabled', 'disabled'] type
- Improves type safety for frontend consumers of the API
- Applied automatic formatting via pre-commit hooks

* refactor: replace loguru with structlog in ics_sync service

- Replace loguru import with structlog in services/ics_sync.py
- Update logging calls to use structlog's structured format with keyword args
- Maintains consistency with other services using structlog
- Changes: logger.info(f'...') -> logger.info('...', key=value) format

* chore: remove loguru dependency and improve type annotations

- Remove loguru from dependencies in pyproject.toml (replaced with structlog)
- Update meeting controller methods to properly return Optional types
- Update dependency lock file after loguru removal

* fix: resolve pyflakes warnings in ics_sync and meetings modules

Remove unused imports and variables to clean up code quality

* Remove grace period logic and improve meeting deactivation

- Removed grace_period_minutes and last_participant_left_at fields
- Simplified deactivation logic based on actual usage patterns:
  * Active sessions: Keep meeting active regardless of scheduled time
  * Calendar meetings: Wait until scheduled end if unused, deactivate immediately once used and empty
  * On-the-fly meetings: Deactivate immediately when empty
- Created migration to drop unused database columns
- Updated tests to remove grace period test cases

* Update test to match new deactivation logic for calendar meetings

* fix: remove unwanted file

* fix: incompleted changes from EVENT_WINDOW*

* fix: update room ICS API tests to include required webhook fields and correct URL

- Add webhook_url and webhook_secret fields to room creation tests
- Fix room URL matching in ICS sync test to use UI_BASE_URL instead of BASE_URL
- Aligns test with actual API requirements and ICS sync service implementation

* fix: add Redis distributed locking to prevent race conditions in process_meetings

- Implement per-meeting locks using Redis to prevent concurrent processing
- Add lock extension after slow API calls (Whereby) to handle long-running operations
- Use redis-py's built-in lock.extend() with replace_ttl=True for simple TTL refresh
- Track and log skipped meetings when locked by other workers
- Document SSRF analysis showing it's low-risk due to async worker isolation

This prevents multiple workers from processing the same meeting simultaneously,
which could cause state corruption or duplicate deactivations.

* refactor: rename MinimalHeader to MeetingMinimalHeader for clarity

* fix: minor code quality improvements - add emoji constants, fix type safety, cleanup comments

* fix: database migration

* self-pr review

* self-pr review

* self-pr review treeshake

* fix: local fixes

* fix: creation of meeting

* fix: meeting selection create button

* compile fix

* fix: meeting selection responsive

* fix: rework process logic for meeting

* fix: meeting useEffect frontend-only dedupe (#647)

* meeting useEffect frontend-only dedupe

* format

* also get room by name backend fix

---------

Co-authored-by: Igor Loskutov <igor.loskutoff@gmail.com>

* invalidate meeting list on new meeting

* test fix

* room url copy button for ics

* calendar refresh quick action icon

* remove work.md

* meeting page frontend fixes

* hide number of meeting participants

* Revert "hide number of meeting participants"

This reverts commit 38906c5d1a.

* ui bits

* ui bits

* remove log

* room name typing stricten

* feat: protect atomic operation involving external service with redlock

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Igor Monadical <igor@monadical.com>
Co-authored-by: Igor Loskutov <igor.loskutoff@gmail.com>

www/app/[roomName]/MeetingSelection.tsx

@@ -0,0 +1,569 @@
+"use client";
+
+import { partition } from "remeda";
+import {
+  Box,
+  VStack,
+  HStack,
+  Text,
+  Button,
+  Spinner,
+  Badge,
+  Icon,
+  Flex,
+} from "@chakra-ui/react";
+import React from "react";
+import { FaUsers, FaClock, FaCalendarAlt, FaPlus } from "react-icons/fa";
+import { LuX } from "react-icons/lu";
+import type { components } from "../reflector-api";
+import {
+  useRoomActiveMeetings,
+  useRoomJoinMeeting,
+  useMeetingDeactivate,
+  useRoomGetByName,
+} from "../lib/apiHooks";
+import { useRouter } from "next/navigation";
+import { formatDateTime, formatStartedAgo } from "../lib/timeUtils";
+import MeetingMinimalHeader from "../components/MeetingMinimalHeader";
+import { NonEmptyString } from "../lib/utils";
+
+type Meeting = components["schemas"]["Meeting"];
+
+interface MeetingSelectionProps {
+  roomName: NonEmptyString;
+  isOwner: boolean;
+  isSharedRoom: boolean;
+  authLoading: boolean;
+  onMeetingSelect: (meeting: Meeting) => void;
+  onCreateUnscheduled: () => void;
+  isCreatingMeeting?: boolean;
+}
+
+export default function MeetingSelection({
+  roomName,
+  isOwner,
+  isSharedRoom,
+  onMeetingSelect,
+  onCreateUnscheduled,
+  isCreatingMeeting = false,
+}: MeetingSelectionProps) {
+  const router = useRouter();
+  const roomQuery = useRoomGetByName(roomName);
+  const activeMeetingsQuery = useRoomActiveMeetings(roomName);
+  const joinMeetingMutation = useRoomJoinMeeting();
+  const deactivateMeetingMutation = useMeetingDeactivate();
+
+  const room = roomQuery.data;
+  const allMeetings = activeMeetingsQuery.data || [];
+
+  const now = new Date();
+  const [currentMeetings, nonCurrentMeetings] = partition(
+    allMeetings,
+    (meeting) => {
+      const startTime = new Date(meeting.start_date);
+      const endTime = new Date(meeting.end_date);
+      // Meeting is ongoing if current time is between start and end
+      return now >= startTime && now <= endTime;
+    },
+  );
+
+  const upcomingMeetings = nonCurrentMeetings.filter((meeting) => {
+    const startTime = new Date(meeting.start_date);
+    // Meeting is upcoming if it hasn't started yet
+    return now < startTime;
+  });
+
+  const loading = roomQuery.isLoading || activeMeetingsQuery.isLoading;
+  const error = roomQuery.error || activeMeetingsQuery.error;
+
+  const handleJoinUpcoming = async (meeting: Meeting) => {
+    // Join the upcoming meeting and navigate to local meeting page
+    try {
+      const joinedMeeting = await joinMeetingMutation.mutateAsync({
+        params: {
+          path: {
+            room_name: roomName,
+            meeting_id: meeting.id,
+          },
+        },
+      });
+      onMeetingSelect(joinedMeeting);
+    } catch (err) {
+      console.error("Failed to join upcoming meeting:", err);
+    }
+  };
+
+  const handleJoinDirect = (meeting: Meeting) => {
+    // Navigate to local meeting page instead of external URL
+    onMeetingSelect(meeting);
+  };
+
+  const handleEndMeeting = async (meetingId: string) => {
+    try {
+      await deactivateMeetingMutation.mutateAsync({
+        params: {
+          path: {
+            meeting_id: meetingId,
+          },
+        },
+      });
+    } catch (err) {
+      console.error("Failed to end meeting:", err);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box p={8} textAlign="center">
+        <Spinner size="lg" color="blue.500" />
+        <Text mt={4}>Loading meetings...</Text>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box
+        p={4}
+        borderRadius="md"
+        bg="red.50"
+        borderLeft="4px solid"
+        borderColor="red.400"
+      >
+        <Text fontWeight="semibold" color="red.800">
+          Error
+        </Text>
+        <Text color="red.700">{"Failed to load meetings"}</Text>
+      </Box>
+    );
+  }
+
+  const handleLeaveMeeting = () => {
+    router.push("/");
+  };
+
+  return (
+    <Flex flexDir="column" minH="100vh" position="relative">
+      {/* Loading overlay */}
+      {isCreatingMeeting && (
+        <Box
+          position="fixed"
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          bg="blackAlpha.600"
+          zIndex={9999}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <VStack gap={4} p={8} bg="white" borderRadius="lg" boxShadow="xl">
+            <Spinner size="lg" color="blue.500" />
+            <Text fontSize="lg" fontWeight="medium">
+              Creating meeting...
+            </Text>
+          </VStack>
+        </Box>
+      )}
+
+      <MeetingMinimalHeader
+        roomName={roomName}
+        displayName={room?.name}
+        showLeaveButton={true}
+        onLeave={handleLeaveMeeting}
+        showCreateButton={isOwner || isSharedRoom}
+        onCreateMeeting={onCreateUnscheduled}
+        isCreatingMeeting={isCreatingMeeting}
+      />
+
+      <Flex
+        flexDir="column"
+        w="full"
+        maxW="800px"
+        mx="auto"
+        px={{ base: 4, md: 6 }}
+        py={{ base: 4, md: 8 }}
+        flex="1"
+        gap={{ base: 4, md: 6 }}
+      >
+        {/* Current Ongoing Meetings - BIG DISPLAY */}
+        {currentMeetings.length > 0 ? (
+          <VStack align="stretch" gap={6} mb={8}>
+            {currentMeetings.map((meeting) => (
+              <Box
+                key={meeting.id}
+                width="100%"
+                bg="gray.50"
+                borderRadius="xl"
+                p={{ base: 4, md: 8 }}
+              >
+                <Flex
+                  direction={{ base: "column", md: "row" }}
+                  justify="space-between"
+                  align={{ base: "stretch", md: "start" }}
+                  gap={{ base: 4, md: 6 }}
+                >
+                  <VStack align="start" gap={{ base: 3, md: 4 }} flex={1}>
+                    <HStack>
+                      <Icon
+                        as={FaCalendarAlt}
+                        color="blue.600"
+                        boxSize="24px"
+                      />
+                      <Text
+                        fontSize={{ base: "xl", md: "2xl" }}
+                        fontWeight="bold"
+                        color="blue.800"
+                      >
+                        {(meeting.calendar_metadata as any)?.title ||
+                          "Live Meeting"}
+                      </Text>
+                    </HStack>
+
+                    {isOwner &&
+                      (meeting.calendar_metadata as any)?.description && (
+                        <Text
+                          fontSize={{ base: "md", md: "lg" }}
+                          color="gray.700"
+                        >
+                          {(meeting.calendar_metadata as any).description}
+                        </Text>
+                      )}
+
+                    <Flex
+                      gap={{ base: 4, md: 8 }}
+                      fontSize={{ base: "sm", md: "md" }}
+                      color="gray.600"
+                      flexWrap="wrap"
+                    >
+                      <HStack>
+                        <Icon
+                          as={FaUsers}
+                          boxSize={{ base: "16px", md: "20px" }}
+                        />
+                        <Text fontWeight="medium">
+                          {meeting.num_clients || 0} participant
+                          {meeting.num_clients !== 1 ? "s" : ""}
+                        </Text>
+                      </HStack>
+                      <HStack>
+                        <Icon
+                          as={FaClock}
+                          boxSize={{ base: "16px", md: "20px" }}
+                        />
+                        <Text>
+                          {formatStartedAgo(new Date(meeting.start_date))}
+                        </Text>
+                      </HStack>
+                    </Flex>
+
+                    {isOwner &&
+                      (meeting.calendar_metadata as any)?.attendees && (
+                        <HStack gap={3} flexWrap="wrap">
+                          {(meeting.calendar_metadata as any).attendees
+                            .slice(0, 4)
+                            .map((attendee: any, idx: number) => (
+                              <Badge
+                                key={idx}
+                                colorScheme="blue"
+                                fontSize="sm"
+                                px={3}
+                                py={1}
+                              >
+                                {attendee.name || attendee.email}
+                              </Badge>
+                            ))}
+                          {(meeting.calendar_metadata as any).attendees.length >
+                            4 && (
+                            <Badge
+                              colorScheme="gray"
+                              fontSize="sm"
+                              px={3}
+                              py={1}
+                            >
+                              +
+                              {(meeting.calendar_metadata as any).attendees
+                                .length - 4}{" "}
+                              more
+                            </Badge>
+                          )}
+                        </HStack>
+                      )}
+                  </VStack>
+
+                  <VStack gap={3} width={{ base: "full", md: "auto" }}>
+                    <Button
+                      colorScheme="blue"
+                      size={{ base: "lg", md: "xl" }}
+                      fontSize={{ base: "md", md: "lg" }}
+                      px={{ base: 6, md: 8 }}
+                      py={{ base: 4, md: 6 }}
+                      width={{ base: "full", md: "auto" }}
+                      onClick={() => handleJoinDirect(meeting)}
+                    >
+                      <Icon
+                        as={FaUsers}
+                        boxSize={{ base: "18px", md: "20px" }}
+                        me={2}
+                      />
+                      Join Now
+                    </Button>
+                    {isOwner && (
+                      <Button
+                        variant="outline"
+                        colorScheme="red"
+                        size="md"
+                        onClick={() => handleEndMeeting(meeting.id)}
+                        loading={deactivateMeetingMutation.isPending}
+                      >
+                        <Icon as={LuX} me={2} />
+                        End Meeting
+                      </Button>
+                    )}
+                  </VStack>
+                </Flex>
+              </Box>
+            ))}
+          </VStack>
+        ) : upcomingMeetings.length > 0 ? (
+          /* Upcoming Meetings - BIG DISPLAY when no ongoing meetings */
+          <VStack align="stretch" gap={6} mb={8}>
+            <Text fontSize="xl" fontWeight="bold" color="gray.800">
+              Upcoming Meeting{upcomingMeetings.length > 1 ? "s" : ""}
+            </Text>
+            {upcomingMeetings.map((meeting) => {
+              const now = new Date();
+              const startTime = new Date(meeting.start_date);
+              const minutesUntilStart = Math.floor(
+                (startTime.getTime() - now.getTime()) / (1000 * 60),
+              );
+
+              return (
+                <Box
+                  key={meeting.id}
+                  width="100%"
+                  bg="orange.50"
+                  borderRadius="xl"
+                  p={{ base: 4, md: 8 }}
+                  border="2px solid"
+                  borderColor="orange.200"
+                >
+                  <Flex
+                    direction={{ base: "column", md: "row" }}
+                    justify="space-between"
+                    align={{ base: "stretch", md: "start" }}
+                    gap={{ base: 4, md: 6 }}
+                  >
+                    <VStack align="start" gap={{ base: 3, md: 4 }} flex={1}>
+                      <HStack>
+                        <Icon
+                          as={FaCalendarAlt}
+                          color="orange.600"
+                          boxSize="24px"
+                        />
+                        <Text
+                          fontSize={{ base: "xl", md: "2xl" }}
+                          fontWeight="bold"
+                          color="orange.800"
+                        >
+                          {(meeting.calendar_metadata as any)?.title ||
+                            "Upcoming Meeting"}
+                        </Text>
+                      </HStack>
+
+                      {isOwner &&
+                        (meeting.calendar_metadata as any)?.description && (
+                          <Text
+                            fontSize={{ base: "md", md: "lg" }}
+                            color="gray.700"
+                          >
+                            {(meeting.calendar_metadata as any).description}
+                          </Text>
+                        )}
+
+                      <Flex
+                        gap={{ base: 2, md: 8 }}
+                        fontSize={{ base: "sm", md: "md" }}
+                        color="gray.600"
+                        flexWrap="wrap"
+                        align="center"
+                      >
+                        <Badge
+                          colorScheme="orange"
+                          fontSize={{ base: "sm", md: "md" }}
+                          px={3}
+                          py={1}
+                        >
+                          Starts in {minutesUntilStart} minute
+                          {minutesUntilStart !== 1 ? "s" : ""}
+                        </Badge>
+                        <Text>
+                          {formatDateTime(new Date(meeting.start_date))}
+                        </Text>
+                      </Flex>
+
+                      {isOwner &&
+                        (meeting.calendar_metadata as any)?.attendees && (
+                          <HStack gap={3} flexWrap="wrap">
+                            {(meeting.calendar_metadata as any).attendees
+                              .slice(0, 4)
+                              .map((attendee: any, idx: number) => (
+                                <Badge
+                                  key={idx}
+                                  colorScheme="orange"
+                                  fontSize="sm"
+                                  px={3}
+                                  py={1}
+                                >
+                                  {attendee.name || attendee.email}
+                                </Badge>
+                              ))}
+                            {(meeting.calendar_metadata as any).attendees
+                              .length > 4 && (
+                              <Badge
+                                colorScheme="gray"
+                                fontSize="sm"
+                                px={3}
+                                py={1}
+                              >
+                                +
+                                {(meeting.calendar_metadata as any).attendees
+                                  .length - 4}{" "}
+                                more
+                              </Badge>
+                            )}
+                          </HStack>
+                        )}
+                    </VStack>
+
+                    <VStack gap={3} width={{ base: "full", md: "auto" }}>
+                      <Button
+                        colorScheme="orange"
+                        size={{ base: "lg", md: "xl" }}
+                        fontSize={{ base: "md", md: "lg" }}
+                        px={{ base: 6, md: 8 }}
+                        py={{ base: 4, md: 6 }}
+                        width={{ base: "full", md: "auto" }}
+                        onClick={() => handleJoinUpcoming(meeting)}
+                      >
+                        <Icon
+                          as={FaClock}
+                          boxSize={{ base: "18px", md: "20px" }}
+                          me={2}
+                        />
+                        Join Early
+                      </Button>
+                      {isOwner && (
+                        <Button
+                          variant="outline"
+                          colorScheme="red"
+                          size="md"
+                          onClick={() => handleEndMeeting(meeting.id)}
+                          loading={deactivateMeetingMutation.isPending}
+                        >
+                          <Icon as={LuX} me={2} />
+                          Cancel Meeting
+                        </Button>
+                      )}
+                    </VStack>
+                  </Flex>
+                </Box>
+              );
+            })}
+          </VStack>
+        ) : null}
+
+        {/* Upcoming Meetings - SMALLER ASIDE DISPLAY when there are ongoing meetings */}
+        {currentMeetings.length > 0 && upcomingMeetings.length > 0 && (
+          <VStack align="stretch" gap={4} mb={6}>
+            <Text fontSize="lg" fontWeight="semibold" color="gray.700">
+              Starting Soon
+            </Text>
+            <Flex
+              gap={4}
+              flexWrap="wrap"
+              direction={{ base: "column", sm: "row" }}
+            >
+              {upcomingMeetings.map((meeting) => {
+                const now = new Date();
+                const startTime = new Date(meeting.start_date);
+                const minutesUntilStart = Math.floor(
+                  (startTime.getTime() - now.getTime()) / (1000 * 60),
+                );
+
+                return (
+                  <Box
+                    key={meeting.id}
+                    bg="white"
+                    border="2px solid"
+                    borderColor="orange.200"
+                    borderRadius="lg"
+                    p={4}
+                    minW={{ base: "100%", sm: "300px" }}
+                    maxW={{ base: "100%", sm: "400px" }}
+                    _hover={{ borderColor: "orange.300", bg: "orange.50" }}
+                    transition="all 0.2s"
+                  >
+                    <VStack align="start" gap={3}>
+                      <HStack>
+                        <Icon as={FaCalendarAlt} color="orange.500" />
+                        <Text fontWeight="semibold" fontSize="md">
+                          {(meeting.calendar_metadata as any)?.title ||
+                            "Upcoming Meeting"}
+                        </Text>
+                      </HStack>
+
+                      <Badge colorScheme="orange" fontSize="sm" px={2} py={1}>
+                        in {minutesUntilStart} minute
+                        {minutesUntilStart !== 1 ? "s" : ""}
+                      </Badge>
+
+                      <Text fontSize="sm" color="gray.600">
+                        Starts: {formatDateTime(new Date(meeting.start_date))}
+                      </Text>
+
+                      <Button
+                        colorScheme="orange"
+                        size="sm"
+                        width="full"
+                        onClick={() => handleJoinUpcoming(meeting)}
+                      >
+                        Join Early
+                      </Button>
+                    </VStack>
+                  </Box>
+                );
+              })}
+            </Flex>
+          </VStack>
+        )}
+
+        {/* No meetings message - show when no ongoing or upcoming meetings */}
+        {currentMeetings.length === 0 && upcomingMeetings.length === 0 && (
+          <Flex
+            width="100%"
+            flex="1"
+            justify="center"
+            align="center"
+            textAlign="center"
+            mb={6}
+          >
+            <VStack gap={4}>
+              <Icon as={FaCalendarAlt} boxSize="48px" color="gray.400" />
+              <VStack gap={2}>
+                <Text fontSize="xl" fontWeight="semibold" color="black">
+                  No meetings right now
+                </Text>
+                <Text fontSize="md" color="gray.600" maxW="400px">
+                  There are no ongoing or upcoming meetings in this room at the
+                  moment.
+                </Text>
+              </VStack>
+            </VStack>
+          </Flex>
+        )}
+      </Flex>
+    </Flex>
+  );
+}

www/app/[roomName]/[meetingId]/constants.ts

@@ -0,0 +1 @@
+export const MEETING_DEFAULT_TIME_MINUTES = 60;

www/app/[roomName]/[meetingId]/page.tsx

@@ -0,0 +1,3 @@
+import Room from "../room";
+
+export default Room;

www/app/[roomName]/page.tsx

@@ -1,336 +1,3 @@
-"use client";
+import Room from "./room";
 
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  useContext,
-  RefObject,
-  use,
-} from "react";
-import {
-  Box,
-  Button,
-  Text,
-  VStack,
-  HStack,
-  Spinner,
-  Icon,
-} from "@chakra-ui/react";
-import { toaster } from "../components/ui/toaster";
-import useRoomMeeting from "./useRoomMeeting";
-import { useRouter } from "next/navigation";
-import { notFound } from "next/navigation";
-import { useRecordingConsent } from "../recordingConsentContext";
-import { useMeetingAudioConsent } from "../lib/apiHooks";
-import type { components } from "../reflector-api";
-
-type Meeting = components["schemas"]["Meeting"];
-import { FaBars } from "react-icons/fa6";
-import { useAuth } from "../lib/AuthProvider";
-
-export type RoomDetails = {
-  params: Promise<{
-    roomName: string;
-  }>;
-};
-
-// stages: we focus on the consent, then whereby steals focus, then we focus on the consent again, then return focus to whoever stole it initially
-const useConsentWherebyFocusManagement = (
-  acceptButtonRef: RefObject<HTMLButtonElement>,
-  wherebyRef: RefObject<HTMLElement>,
-) => {
-  const currentFocusRef = useRef<HTMLElement | null>(null);
-  useEffect(() => {
-    if (acceptButtonRef.current) {
-      acceptButtonRef.current.focus();
-    } else {
-      console.error(
-        "accept button ref not available yet for focus management - seems to be illegal state",
-      );
-    }
-
-    const handleWherebyReady = () => {
-      console.log("whereby ready - refocusing consent button");
-      currentFocusRef.current = document.activeElement as HTMLElement;
-      if (acceptButtonRef.current) {
-        acceptButtonRef.current.focus();
-      }
-    };
-
-    if (wherebyRef.current) {
-      wherebyRef.current.addEventListener("ready", handleWherebyReady);
-    } else {
-      console.warn(
-        "whereby ref not available yet for focus management - seems to be illegal state. not waiting, focus management off.",
-      );
-    }
-
-    return () => {
-      wherebyRef.current?.removeEventListener("ready", handleWherebyReady);
-      currentFocusRef.current?.focus();
-    };
-  }, []);
-};
-
-const useConsentDialog = (
-  meetingId: string,
-  wherebyRef: RefObject<HTMLElement> /*accessibility*/,
-) => {
-  const { state: consentState, touch, hasConsent } = useRecordingConsent();
-  // toast would open duplicates, even with using "id=" prop
-  const [modalOpen, setModalOpen] = useState(false);
-  const audioConsentMutation = useMeetingAudioConsent();
-
-  const handleConsent = useCallback(
-    async (meetingId: string, given: boolean) => {
-      try {
-        await audioConsentMutation.mutateAsync({
-          params: {
-            path: {
-              meeting_id: meetingId,
-            },
-          },
-          body: {
-            consent_given: given,
-          },
-        });
-
-        touch(meetingId);
-      } catch (error) {
-        console.error("Error submitting consent:", error);
-      }
-    },
-    [audioConsentMutation, touch],
-  );
-
-  const showConsentModal = useCallback(() => {
-    if (modalOpen) return;
-
-    setModalOpen(true);
-
-    const toastId = toaster.create({
-      placement: "top",
-      duration: null,
-      render: ({ dismiss }) => {
-        const AcceptButton = () => {
-          const buttonRef = useRef<HTMLButtonElement>(null);
-          useConsentWherebyFocusManagement(buttonRef, wherebyRef);
-          return (
-            <Button
-              ref={buttonRef}
-              colorPalette="primary"
-              size="sm"
-              onClick={() => {
-                handleConsent(meetingId, true).then(() => {
-                  /*signifies it's ok to now wait here.*/
-                });
-                dismiss();
-              }}
-            >
-              Yes, store the audio
-            </Button>
-          );
-        };
-
-        return (
-          <Box
-            p={6}
-            bg="rgba(255, 255, 255, 0.7)"
-            borderRadius="lg"
-            boxShadow="lg"
-            maxW="md"
-            mx="auto"
-          >
-            <VStack gap={4} alignItems="center">
-              <Text fontSize="md" textAlign="center" fontWeight="medium">
-                Can we have your permission to store this meeting's audio
-                recording on our servers?
-              </Text>
-              <HStack gap={4} justifyContent="center">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => {
-                    handleConsent(meetingId, false).then(() => {
-                      /*signifies it's ok to now wait here.*/
-                    });
-                    dismiss();
-                  }}
-                >
-                  No, delete after transcription
-                </Button>
-                <AcceptButton />
-              </HStack>
-            </VStack>
-          </Box>
-        );
-      },
-    });
-
-    // Set modal state when toast is dismissed
-    toastId.then((id) => {
-      const checkToastStatus = setInterval(() => {
-        if (!toaster.isActive(id)) {
-          setModalOpen(false);
-          clearInterval(checkToastStatus);
-        }
-      }, 100);
-    });
-
-    // Handle escape key to close the toast
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        toastId.then((id) => toaster.dismiss(id));
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-
-    const cleanup = () => {
-      toastId.then((id) => toaster.dismiss(id));
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-
-    return cleanup;
-  }, [meetingId, handleConsent, wherebyRef, modalOpen]);
-
-  return {
-    showConsentModal,
-    consentState,
-    hasConsent,
-    consentLoading: audioConsentMutation.isPending,
-  };
-};
-
-function ConsentDialogButton({
-  meetingId,
-  wherebyRef,
-}: {
-  meetingId: string;
-  wherebyRef: React.RefObject<HTMLElement>;
-}) {
-  const { showConsentModal, consentState, hasConsent, consentLoading } =
-    useConsentDialog(meetingId, wherebyRef);
-
-  if (!consentState.ready || hasConsent(meetingId) || consentLoading) {
-    return null;
-  }
-
-  return (
-    <Button
-      position="absolute"
-      top="56px"
-      left="8px"
-      zIndex={1000}
-      colorPalette="blue"
-      size="sm"
-      onClick={showConsentModal}
-    >
-      Meeting is being recorded
-      <Icon as={FaBars} ml={2} />
-    </Button>
-  );
-}
-
-const recordingTypeRequiresConsent = (
-  recordingType: NonNullable<Meeting["recording_type"]>,
-) => {
-  return recordingType === "cloud";
-};
-
-// next throws even with "use client"
-const useWhereby = () => {
-  const [wherebyLoaded, setWherebyLoaded] = useState(false);
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      import("@whereby.com/browser-sdk/embed")
-        .then(() => {
-          setWherebyLoaded(true);
-        })
-        .catch(console.error.bind(console));
-    }
-  }, []);
-  return wherebyLoaded;
-};
-
-export default function Room(details: RoomDetails) {
-  const params = use(details.params);
-  const wherebyLoaded = useWhereby();
-  const wherebyRef = useRef<HTMLElement>(null);
-  const roomName = params.roomName;
-  const meeting = useRoomMeeting(roomName);
-  const router = useRouter();
-  const status = useAuth().status;
-  const isAuthenticated = status === "authenticated";
-  const isLoading = status === "loading" || meeting.loading;
-
-  const roomUrl = meeting?.response?.host_room_url
-    ? meeting?.response?.host_room_url
-    : meeting?.response?.room_url;
-
-  const meetingId = meeting?.response?.id;
-
-  const recordingType = meeting?.response?.recording_type;
-
-  const handleLeave = useCallback(() => {
-    router.push("/browse");
-  }, [router]);
-
-  useEffect(() => {
-    if (
-      !isLoading &&
-      meeting?.error &&
-      "status" in meeting.error &&
-      meeting.error.status === 404
-    ) {
-      notFound();
-    }
-  }, [isLoading, meeting?.error]);
-
-  useEffect(() => {
-    if (isLoading || !isAuthenticated || !roomUrl || !wherebyLoaded) return;
-
-    wherebyRef.current?.addEventListener("leave", handleLeave);
-
-    return () => {
-      wherebyRef.current?.removeEventListener("leave", handleLeave);
-    };
-  }, [handleLeave, roomUrl, isLoading, isAuthenticated, wherebyLoaded]);
-
-  if (isLoading) {
-    return (
-      <Box
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        height="100vh"
-        bg="gray.50"
-        p={4}
-      >
-        <Spinner color="blue.500" size="xl" />
-      </Box>
-    );
-  }
-
-  return (
-    <>
-      {roomUrl && meetingId && wherebyLoaded && (
-        <>
-          <whereby-embed
-            ref={wherebyRef}
-            room={roomUrl}
-            style={{ width: "100vw", height: "100vh" }}
-          />
-          {recordingType && recordingTypeRequiresConsent(recordingType) && (
-            <ConsentDialogButton
-              meetingId={meetingId}
-              wherebyRef={wherebyRef}
-            />
-          )}
-        </>
-      )}
-    </>
-  );
-}
+export default Room;

www/app/[roomName]/room.tsx

@@ -0,0 +1,437 @@
+"use client";
+
+import { roomMeetingUrl, roomUrl as getRoomUrl } from "../lib/routes";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useContext,
+  RefObject,
+  use,
+} from "react";
+import {
+  Box,
+  Button,
+  Text,
+  VStack,
+  HStack,
+  Spinner,
+  Icon,
+} from "@chakra-ui/react";
+import { toaster } from "../components/ui/toaster";
+import { useRouter } from "next/navigation";
+import { useRecordingConsent } from "../recordingConsentContext";
+import {
+  useMeetingAudioConsent,
+  useRoomGetByName,
+  useRoomActiveMeetings,
+  useRoomUpcomingMeetings,
+  useRoomsCreateMeeting,
+  useRoomGetMeeting,
+} from "../lib/apiHooks";
+import type { components } from "../reflector-api";
+import MeetingSelection from "./MeetingSelection";
+import useRoomDefaultMeeting from "./useRoomDefaultMeeting";
+
+type Meeting = components["schemas"]["Meeting"];
+import { FaBars } from "react-icons/fa6";
+import { useAuth } from "../lib/AuthProvider";
+import { getWherebyUrl, useWhereby } from "../lib/wherebyClient";
+import { useError } from "../(errors)/errorContext";
+import {
+  assertExistsAndNonEmptyString,
+  NonEmptyString,
+  parseNonEmptyString,
+} from "../lib/utils";
+import { printApiError } from "../api/_error";
+
+export type RoomDetails = {
+  params: Promise<{
+    roomName: string;
+    meetingId?: string;
+  }>;
+};
+
+// stages: we focus on the consent, then whereby steals focus, then we focus on the consent again, then return focus to whoever stole it initially
+const useConsentWherebyFocusManagement = (
+  acceptButtonRef: RefObject<HTMLButtonElement>,
+  wherebyRef: RefObject<HTMLElement>,
+) => {
+  const currentFocusRef = useRef<HTMLElement | null>(null);
+  useEffect(() => {
+    if (acceptButtonRef.current) {
+      acceptButtonRef.current.focus();
+    } else {
+      console.error(
+        "accept button ref not available yet for focus management - seems to be illegal state",
+      );
+    }
+
+    const handleWherebyReady = () => {
+      console.log("whereby ready - refocusing consent button");
+      currentFocusRef.current = document.activeElement as HTMLElement;
+      if (acceptButtonRef.current) {
+        acceptButtonRef.current.focus();
+      }
+    };
+
+    if (wherebyRef.current) {
+      wherebyRef.current.addEventListener("ready", handleWherebyReady);
+    } else {
+      console.warn(
+        "whereby ref not available yet for focus management - seems to be illegal state. not waiting, focus management off.",
+      );
+    }
+
+    return () => {
+      wherebyRef.current?.removeEventListener("ready", handleWherebyReady);
+      currentFocusRef.current?.focus();
+    };
+  }, []);
+};
+
+const useConsentDialog = (
+  meetingId: string,
+  wherebyRef: RefObject<HTMLElement> /*accessibility*/,
+) => {
+  const { state: consentState, touch, hasConsent } = useRecordingConsent();
+  // toast would open duplicates, even with using "id=" prop
+  const [modalOpen, setModalOpen] = useState(false);
+  const audioConsentMutation = useMeetingAudioConsent();
+
+  const handleConsent = useCallback(
+    async (meetingId: string, given: boolean) => {
+      try {
+        await audioConsentMutation.mutateAsync({
+          params: {
+            path: {
+              meeting_id: meetingId,
+            },
+          },
+          body: {
+            consent_given: given,
+          },
+        });
+
+        touch(meetingId);
+      } catch (error) {
+        console.error("Error submitting consent:", error);
+      }
+    },
+    [audioConsentMutation, touch],
+  );
+
+  const showConsentModal = useCallback(() => {
+    if (modalOpen) return;
+
+    setModalOpen(true);
+
+    const toastId = toaster.create({
+      placement: "top",
+      duration: null,
+      render: ({ dismiss }) => {
+        const AcceptButton = () => {
+          const buttonRef = useRef<HTMLButtonElement>(null);
+          useConsentWherebyFocusManagement(buttonRef, wherebyRef);
+          return (
+            <Button
+              ref={buttonRef}
+              colorPalette="primary"
+              size="sm"
+              onClick={() => {
+                handleConsent(meetingId, true).then(() => {
+                  /*signifies it's ok to now wait here.*/
+                });
+                dismiss();
+              }}
+            >
+              Yes, store the audio
+            </Button>
+          );
+        };
+
+        return (
+          <Box
+            p={6}
+            bg="rgba(255, 255, 255, 0.7)"
+            borderRadius="lg"
+            boxShadow="lg"
+            maxW="md"
+            mx="auto"
+          >
+            <VStack gap={4} alignItems="center">
+              <Text fontSize="md" textAlign="center" fontWeight="medium">
+                Can we have your permission to store this meeting's audio
+                recording on our servers?
+              </Text>
+              <HStack gap={4} justifyContent="center">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    handleConsent(meetingId, false).then(() => {
+                      /*signifies it's ok to now wait here.*/
+                    });
+                    dismiss();
+                  }}
+                >
+                  No, delete after transcription
+                </Button>
+                <AcceptButton />
+              </HStack>
+            </VStack>
+          </Box>
+        );
+      },
+    });
+
+    // Set modal state when toast is dismissed
+    toastId.then((id) => {
+      const checkToastStatus = setInterval(() => {
+        if (!toaster.isActive(id)) {
+          setModalOpen(false);
+          clearInterval(checkToastStatus);
+        }
+      }, 100);
+    });
+
+    // Handle escape key to close the toast
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        toastId.then((id) => toaster.dismiss(id));
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    const cleanup = () => {
+      toastId.then((id) => toaster.dismiss(id));
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+
+    return cleanup;
+  }, [meetingId, handleConsent, wherebyRef, modalOpen]);
+
+  return {
+    showConsentModal,
+    consentState,
+    hasConsent,
+    consentLoading: audioConsentMutation.isPending,
+  };
+};
+
+function ConsentDialogButton({
+  meetingId,
+  wherebyRef,
+}: {
+  meetingId: NonEmptyString;
+  wherebyRef: React.RefObject<HTMLElement>;
+}) {
+  const { showConsentModal, consentState, hasConsent, consentLoading } =
+    useConsentDialog(meetingId, wherebyRef);
+
+  if (!consentState.ready || hasConsent(meetingId) || consentLoading) {
+    return null;
+  }
+
+  return (
+    <Button
+      position="absolute"
+      top="56px"
+      left="8px"
+      zIndex={1000}
+      colorPalette="blue"
+      size="sm"
+      onClick={showConsentModal}
+    >
+      Meeting is being recorded
+      <Icon as={FaBars} ml={2} />
+    </Button>
+  );
+}
+
+const recordingTypeRequiresConsent = (
+  recordingType: NonNullable<Meeting["recording_type"]>,
+) => {
+  return recordingType === "cloud";
+};
+
+export default function Room(details: RoomDetails) {
+  const params = use(details.params);
+  const wherebyLoaded = useWhereby();
+  const wherebyRef = useRef<HTMLElement>(null);
+  const roomName = parseNonEmptyString(params.roomName);
+  const router = useRouter();
+  const auth = useAuth();
+  const status = auth.status;
+  const isAuthenticated = status === "authenticated";
+  const { setError } = useError();
+
+  const roomQuery = useRoomGetByName(roomName);
+  const createMeetingMutation = useRoomsCreateMeeting();
+
+  const room = roomQuery.data;
+
+  const pageMeetingId = params.meetingId;
+
+  // this one is called on room page
+  const defaultMeeting = useRoomDefaultMeeting(
+    room && !room.ics_enabled && !pageMeetingId ? roomName : null,
+  );
+
+  const explicitMeeting = useRoomGetMeeting(roomName, pageMeetingId || null);
+  const wherebyRoomUrl = explicitMeeting.data
+    ? getWherebyUrl(explicitMeeting.data)
+    : defaultMeeting.response
+      ? getWherebyUrl(defaultMeeting.response)
+      : null;
+  const recordingType = (explicitMeeting.data || defaultMeeting.response)
+    ?.recording_type;
+  const meetingId = (explicitMeeting.data || defaultMeeting.response)?.id;
+
+  const isLoading =
+    status === "loading" ||
+    roomQuery.isLoading ||
+    defaultMeeting?.loading ||
+    explicitMeeting.isLoading;
+
+  const errors = [
+    explicitMeeting.error,
+    defaultMeeting.error,
+    roomQuery.error,
+    createMeetingMutation.error,
+  ].filter(Boolean);
+
+  const isOwner =
+    isAuthenticated && room ? auth.user?.id === room.user_id : false;
+
+  const handleMeetingSelect = (selectedMeeting: Meeting) => {
+    router.push(
+      roomMeetingUrl(roomName, parseNonEmptyString(selectedMeeting.id)),
+    );
+  };
+
+  const handleCreateUnscheduled = async () => {
+    try {
+      // Create a new unscheduled meeting
+      const newMeeting = await createMeetingMutation.mutateAsync({
+        params: {
+          path: { room_name: roomName },
+        },
+        body: {
+          allow_duplicated: room ? room.ics_enabled : false,
+        },
+      });
+      handleMeetingSelect(newMeeting);
+    } catch (err) {
+      console.error("Failed to create meeting:", err);
+    }
+  };
+
+  const handleLeave = useCallback(() => {
+    router.push("/browse");
+  }, [router]);
+
+  useEffect(() => {
+    if (isLoading || !isAuthenticated || !wherebyRoomUrl || !wherebyLoaded)
+      return;
+
+    wherebyRef.current?.addEventListener("leave", handleLeave);
+
+    return () => {
+      wherebyRef.current?.removeEventListener("leave", handleLeave);
+    };
+  }, [handleLeave, wherebyRoomUrl, isLoading, isAuthenticated, wherebyLoaded]);
+
+  useEffect(() => {
+    if (!isLoading && !wherebyRoomUrl) {
+      setError(new Error("Whereby room URL not found"));
+    }
+  }, [isLoading, wherebyRoomUrl]);
+
+  if (isLoading) {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        height="100vh"
+        bg="gray.50"
+        p={4}
+      >
+        <Spinner color="blue.500" size="xl" />
+      </Box>
+    );
+  }
+
+  if (!room) {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        height="100vh"
+        bg="gray.50"
+        p={4}
+      >
+        <Text fontSize="lg">Room not found</Text>
+      </Box>
+    );
+  }
+
+  if (room.ics_enabled && !params.meetingId) {
+    return (
+      <MeetingSelection
+        roomName={roomName}
+        isOwner={isOwner}
+        isSharedRoom={room?.is_shared || false}
+        authLoading={["loading", "refreshing"].includes(auth.status)}
+        onMeetingSelect={handleMeetingSelect}
+        onCreateUnscheduled={handleCreateUnscheduled}
+        isCreatingMeeting={createMeetingMutation.isPending}
+      />
+    );
+  }
+
+  if (errors.length > 0) {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        height="100vh"
+        bg="gray.50"
+        p={4}
+      >
+        {errors.map((error, i) => (
+          <Text key={i} fontSize="lg">
+            {printApiError(error)}
+          </Text>
+        ))}
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      {wherebyRoomUrl && wherebyLoaded && (
+        <>
+          <whereby-embed
+            ref={wherebyRef}
+            room={wherebyRoomUrl}
+            style={{ width: "100vw", height: "100vh" }}
+          />
+          {recordingType &&
+            recordingTypeRequiresConsent(recordingType) &&
+            meetingId && (
+              <ConsentDialogButton
+                meetingId={assertExistsAndNonEmptyString(meetingId)}
+                wherebyRef={wherebyRef}
+              />
+            )}
+        </>
+      )}
+    </>
+  );
+}

www/app/[roomName]/useRoomDefaultMeeting.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useError } from "../(errors)/errorContext";
 import type { components } from "../reflector-api";
 import { shouldShowError } from "../lib/errorUtils";
@@ -6,30 +6,31 @@ import { shouldShowError } from "../lib/errorUtils";
 type Meeting = components["schemas"]["Meeting"];
 import { useRoomsCreateMeeting } from "../lib/apiHooks";
 import { notFound } from "next/navigation";
+import { ApiError } from "../api/_error";
 
 type ErrorMeeting = {
-  error: Error;
+  error: ApiError;
   loading: false;
   response: null;
   reload: () => void;
 };
 
 type LoadingMeeting = {
+  error: null;
   response: null;
   loading: true;
-  error: false;
   reload: () => void;
 };
 
 type SuccessMeeting = {
+  error: null;
   response: Meeting;
   loading: false;
-  error: null;
   reload: () => void;
 };
 
-const useRoomMeeting = (
-  roomName: string | null | undefined,
+const useRoomDefaultMeeting = (
+  roomName: string | null,
 ): ErrorMeeting | LoadingMeeting | SuccessMeeting => {
   const [response, setResponse] = useState<Meeting | null>(null);
   const [reload, setReload] = useState(0);
@@ -37,10 +38,15 @@ const useRoomMeeting = (
   const createMeetingMutation = useRoomsCreateMeeting();
   const reloadHandler = () => setReload((prev) => prev + 1);
 
+  // this is to undupe dev mode room creation
+  const creatingRef = useRef(false);
+
   useEffect(() => {
     if (!roomName) return;
+    if (creatingRef.current) return;
 
     const createMeeting = async () => {
+      creatingRef.current = true;
       try {
         const result = await createMeetingMutation.mutateAsync({
           params: {
@@ -48,6 +54,9 @@ const useRoomMeeting = (
               room_name: roomName,
             },
           },
+          body: {
+            allow_duplicated: false,
+          },
         });
         setResponse(result);
       } catch (error: any) {
@@ -60,14 +69,16 @@ const useRoomMeeting = (
         } else {
           setError(error);
         }
+      } finally {
+        creatingRef.current = false;
       }
     };
 
-    createMeeting();
+    createMeeting().then(() => {});
   }, [roomName, reload]);
 
   const loading = createMeetingMutation.isPending && !response;
-  const error = createMeetingMutation.error as Error | null;
+  const error = createMeetingMutation.error;
 
   return { response, loading, error, reload: reloadHandler } as
     | ErrorMeeting
@@ -75,4 +86,4 @@ const useRoomMeeting = (
     | SuccessMeeting;
 };
 
-export default useRoomMeeting;
+export default useRoomDefaultMeeting;