From a635b803edf181ce2551b97f78f7dba29db67e88 Mon Sep 17 00:00:00 2001
From: Kunj Hirapara <kunjhirapara2@gmail.com>
Date: Tue, 15 Sep 2026 12:53:26 +0530
Subject: [PATCH] fix(meeting): join from the home page, and make host controls
 act
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two controls that rendered normally and did nothing when pressed. Both had
the same shape: the condition gating the action was not the condition that
governs whether the action can work.

Join Meeting
------------
MeetingCard's button refused to navigate unless a Stream video client was
already connected to the page the user was leaving:

    if (!client) return toast.error("Failed to join meeting. Please try again.");
    router.push(`/meeting/${callId}`);

Navigation does not use that client. /meeting/[id] mounts its own
StreamClientProvider and waits for the connection there, which is why pasting
the same link into the address bar worked while the button reported failure.
On "/" the client is loaded through a dynamic import and only once useUserRole
has resolved, so it is null for as long as that chunk takes to fetch and
connect — and never arrives at all for a role that does not qualify.

joinMeeting now resolves a route from the call id and nothing else.

Host controls
-------------
Mute all participants and Remove participant were gated on the Stream
capabilities, which their creator has, but both handlers opened with:

    if (!call || !interview) return;

An instant meeting writes no interviews row, so getInterviewByStreamCallId
resolves to null and MeetingRoom renders with interview === undefined. Every
click was discarded silently: no effect, no toast, nothing in the console.

The interview is needed to log a host action, never to perform one. The
handlers now require only the call, and the audit entry is written
best-effort — matching how participant join/leave is already logged, and
fixing a second case where a failed log turned a successful mute into an
error toast.

Both menu and handlers now read one predicate, getHostControlsAvailability,
so the render gate and the guard cannot drift apart again. It also hides the
menu when the only thing on offer is removal and there is nobody to remove,
which previously opened a heading with nothing under it.

Also passes an empty pasted meeting id through to the error path instead of
dropping it, which was the same silent no-op in MeetingModal.

Verified: typecheck clean, 280/280 tests pass (15 new), production build
succeeds.
---
 src/components/ui/MeetingModal.tsx |  8 ++-
 src/components/ui/MeetingRoom.tsx  | 77 +++++++++++++++++------
 src/hooks/useMeetingActions.ts     | 18 +++++-
 src/lib/hostControls.test.ts       | 99 ++++++++++++++++++++++++++++++
 src/lib/hostControls.ts            | 62 +++++++++++++++++++
 src/lib/meetingNavigation.test.ts  | 79 ++++++++++++++++++++++++
 src/lib/meetingNavigation.ts       | 51 +++++++++++++++
 7 files changed, 369 insertions(+), 25 deletions(-)
 create mode 100644 src/lib/hostControls.test.ts
 create mode 100644 src/lib/hostControls.ts
 create mode 100644 src/lib/meetingNavigation.test.ts
 create mode 100644 src/lib/meetingNavigation.ts

diff --git a/src/components/ui/MeetingModal.tsx b/src/components/ui/MeetingModal.tsx
index e790bc3..32caab2 100644
--- a/src/components/ui/MeetingModal.tsx
+++ b/src/components/ui/MeetingModal.tsx
@@ -28,8 +28,12 @@ function MeetingModal({
 
   const handleStart = async () => {
     if (isJoinMeeting) {
-      const meetingId = meetingUrl.split("/").pop();
-      if (meetingId) joinMeeting(meetingId);
+      // Passed through even when empty — a URL ending in "/" yields "", and
+      // the guard that used to sit here turned that into a button that
+      // silently did nothing. joinMeeting reports it instead.
+      const meetingId = meetingUrl.split("/").pop() ?? "";
+
+      joinMeeting(meetingId);
       setMeetingUrl("");
       onClose();
       return;
diff --git a/src/components/ui/MeetingRoom.tsx b/src/components/ui/MeetingRoom.tsx
index 6d9a4ab..6a5ff60 100644
--- a/src/components/ui/MeetingRoom.tsx
+++ b/src/components/ui/MeetingRoom.tsx
@@ -58,6 +58,7 @@ import { useProctoring } from "@/hooks/useProctoring";
 import { useFullscreenGuard } from "@/hooks/useFullscreenGuard";
 import FullscreenGuardOverlay from "./FullscreenGuardOverlay";
 import { resolveEnforcement } from "@/lib/proctoring/enforcement";
+import { getHostControlsAvailability } from "@/lib/hostControls";
 import IntegrityReport from "@/components/interviews/IntegrityReport";
 import { cn, getInterviewEndTimeMs } from "@/lib/utils";
 import { getDisplayErrorMessage, logError } from "@/lib/errors";
@@ -203,6 +204,26 @@ function MeetingRoom({
         isRecruiter ||
         interview.interviewerIds.includes(currentUser.clerkId) ||
         interview.interviewerIds.includes(localParticipant?.userId ?? "")));
+  /**
+   * The people removal can target: everyone but the local participant, and only
+   * those Stream has given a userId.
+   */
+  const removableParticipants = useMemo(
+    () => participants.filter((p) => !p.isLocalParticipant && p.userId),
+    [participants],
+  );
+
+  /**
+   * One answer to "what may this host do", shared by the menu and the handlers.
+   * They used to decide separately and disagree — see src/lib/hostControls.ts.
+   */
+  const hostControls = getHostControlsAvailability({
+    isHost,
+    canMuteUsers,
+    canBlockUsers,
+    removableParticipantCount: removableParticipants.length,
+  });
+
   /**
    * Integrity monitoring runs for the candidate and nobody else.
    *
@@ -443,21 +464,43 @@ function MeetingRoom({
   }
 
   /* ── host actions ── */
+
+  /**
+   * Best-effort audit trail, matching how participant join/leave is logged
+   * above: a failed write must never turn a host action that succeeded into an
+   * error toast, and an ad-hoc call with no interviews row simply has nothing
+   * to write against.
+   */
+  const logHostAction = (event: {
+    type: string;
+    detail: string;
+    metadata?: string;
+  }) => {
+    if (!interview) return;
+
+    void logSessionEvent({
+      interviewId: interview._id,
+      streamCallId: interview.streamCallId,
+      ...event,
+    }).catch(() => undefined);
+  };
+
   const handleMuteAll = async () => {
-    if (!call || !interview) return;
+    // Only `call` is required. An instant meeting has no interviews row, and
+    // refusing to mute because there is nowhere to file the audit entry is what
+    // made this button inert — see src/lib/hostControls.ts.
+    if (!call) return;
     setHostActionLoading("mute");
     try {
       await call.muteAllUsers("audio");
-      await logSessionEvent({
-        interviewId: interview._id,
-        streamCallId: interview.streamCallId,
+      toast.success("Muted all participants.");
+      logHostAction({
         type: "host.muted_all",
         detail: "Muted all participants",
       });
-      toast.success("Muted all participants.");
     } catch (error) {
       logError("MeetingRoom.handleMuteAll", error, {
-        interviewId: interview._id,
+        interviewId: interview?._id,
       });
       toast.error(getDisplayErrorMessage(error, "Unable to mute everyone."));
     } finally {
@@ -466,21 +509,19 @@ function MeetingRoom({
   };
 
   const handleRemoveParticipant = async (userId: string) => {
-    if (!call || !interview) return;
+    if (!call) return;
     setHostActionLoading("remove");
     try {
       await call.blockUser(userId);
-      await logSessionEvent({
-        interviewId: interview._id,
-        streamCallId: interview.streamCallId,
+      toast.success("Participant removed from the session.");
+      logHostAction({
         type: "host.removed_participant",
         detail: userId,
         metadata: JSON.stringify({ participantId: userId }),
       });
-      toast.success("Participant removed from the session.");
     } catch (error) {
       logError("MeetingRoom.handleRemoveParticipant", error, {
-        interviewId: interview._id,
+        interviewId: interview?._id,
         participantId: userId,
       });
       toast.error(
@@ -712,7 +753,7 @@ function MeetingRoom({
                 {/* Host controls. Requires both the app-level role and the
                     Stream capability that authorises the request — the role
                     alone rendered a menu whose every action Stream rejected. */}
-                {isHost && (canMuteUsers || canBlockUsers) && (
+                {hostControls.anyAvailable && (
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <Button
@@ -738,7 +779,7 @@ function MeetingRoom({
                       </DropdownMenuLabel>
                       <DropdownMenuSeparator />
 
-                      {canMuteUsers && (
+                      {hostControls.muteAll && (
                         <DropdownMenuItem
                           onClick={handleMuteAll}
                           disabled={!!hostActionLoading}
@@ -751,17 +792,13 @@ function MeetingRoom({
                         </DropdownMenuItem>
                       )}
 
-                      {canBlockUsers &&
-                        participants.filter((p) => !p.isLocalParticipant)
-                          .length > 0 && (
+                      {hostControls.removeParticipants && (
                         <>
                           <DropdownMenuSeparator />
                           <DropdownMenuLabel className="text-xs text-muted-foreground">
                             Remove participant
                           </DropdownMenuLabel>
-                          {participants
-                            .filter((p) => !p.isLocalParticipant && p.userId)
-                            .map((p) => (
+                          {removableParticipants.map((p) => (
                               <DropdownMenuItem
                                 key={p.sessionId}
                                 onClick={() =>
diff --git a/src/hooks/useMeetingActions.ts b/src/hooks/useMeetingActions.ts
index 278d538..f076c8d 100644
--- a/src/hooks/useMeetingActions.ts
+++ b/src/hooks/useMeetingActions.ts
@@ -2,6 +2,8 @@ import { useRouter } from "next/navigation";
 import { useStreamVideoClient } from "@stream-io/video-react-sdk";
 import { toast } from "sonner";
 
+import { resolveJoinTarget } from "@/lib/meetingNavigation";
+
 const useMeetingActions = () => {
   const router = useRouter();
   const client = useStreamVideoClient();
@@ -30,10 +32,20 @@ const useMeetingActions = () => {
     router.push(`/meeting/${call.id}`);
   };
 
+  /**
+   * Navigation only, and deliberately not gated on `client`.
+   *
+   * The Stream client belongs to the page being left, not the one being opened:
+   * /meeting/[id] mounts its own provider and waits for the connection there.
+   * Requiring it here meant the button failed on the home page while pasting
+   * the same link worked. See src/lib/meetingNavigation.ts.
+   */
   const joinMeeting = (callId: string) => {
-    if (!client)
-      return toast.error("Failed to join meeting. Please try again.");
-    router.push(`/meeting/${callId}`);
+    const target = resolveJoinTarget(callId);
+
+    if (!target.ok) return toast.error(target.message);
+
+    router.push(target.href);
   };
   return { createInstantMeeting, joinMeeting };
 };
diff --git a/src/lib/hostControls.test.ts b/src/lib/hostControls.test.ts
new file mode 100644
index 0000000..4f28845
--- /dev/null
+++ b/src/lib/hostControls.test.ts
@@ -0,0 +1,99 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+
+import { getHostControlsAvailability } from "./hostControls.ts";
+
+const host = {
+  isHost: true,
+  canMuteUsers: true,
+  canBlockUsers: true,
+  removableParticipantCount: 1,
+};
+
+describe("getHostControlsAvailability", () => {
+  it("offers both controls to a host with both capabilities", () => {
+    assert.deepEqual(getHostControlsAvailability(host), {
+      muteAll: true,
+      removeParticipants: true,
+      anyAvailable: true,
+    });
+  });
+
+  /**
+   * The regression this module exists for.
+   *
+   * An instant meeting (`useMeetingActions.createInstantMeeting`) creates a
+   * Stream call under a fresh UUID and writes no `interviews` row, so
+   * `getInterviewByStreamCallId` resolves to null and MeetingRoom renders with
+   * `interview === undefined`. The menu was gated on the Stream capabilities —
+   * which the creator has, because Stream makes them the call's host — while
+   * both handlers opened with `if (!call || !interview) return`. Every click
+   * was silently discarded: no effect, no toast, no error.
+   *
+   * Availability therefore takes no interview at all. The interview is needed
+   * to *log* a host action, never to perform one, and a missing audit row is
+   * not a reason to refuse the thing the button says it does.
+   */
+  it("does not consider whether the call has an interview record", () => {
+    // There is no interview input to pass. A host of an ad-hoc call with the
+    // capabilities Stream granted them is offered — and can run — both actions.
+    assert.equal(getHostControlsAvailability(host).anyAvailable, true);
+  });
+
+  it("offers nothing to a participant who is not a host", () => {
+    assert.deepEqual(getHostControlsAvailability({ ...host, isHost: false }), {
+      muteAll: false,
+      removeParticipants: false,
+      anyAvailable: false,
+    });
+  });
+
+  describe("capabilities are per-action", () => {
+    it("withholds mute-all without MUTE_USERS", () => {
+      const result = getHostControlsAvailability({
+        ...host,
+        canMuteUsers: false,
+      });
+
+      assert.equal(result.muteAll, false);
+      assert.equal(result.removeParticipants, true);
+      assert.equal(result.anyAvailable, true);
+    });
+
+    it("withholds removal without BLOCK_USERS", () => {
+      const result = getHostControlsAvailability({
+        ...host,
+        canBlockUsers: false,
+      });
+
+      assert.equal(result.muteAll, true);
+      assert.equal(result.removeParticipants, false);
+    });
+  });
+
+  describe("nobody to remove", () => {
+    it("withholds the removal section when the host is alone", () => {
+      // Listing a section with no entries under it is the same empty promise as
+      // an item that does nothing.
+      assert.equal(
+        getHostControlsAvailability({ ...host, removableParticipantCount: 0 })
+          .removeParticipants,
+        false,
+      );
+    });
+
+    it("hides the whole menu when removal was the only thing on offer", () => {
+      // The trigger used to render on `canMuteUsers || canBlockUsers`, so a
+      // host who could only block sat in an empty call looking at a menu whose
+      // sole section was conditional on somebody being there to remove.
+      const result = getHostControlsAvailability({
+        isHost: true,
+        canMuteUsers: false,
+        canBlockUsers: true,
+        removableParticipantCount: 0,
+      });
+
+      assert.equal(result.anyAvailable, false);
+    });
+  });
+});
diff --git a/src/lib/hostControls.ts b/src/lib/hostControls.ts
new file mode 100644
index 0000000..8409b25
--- /dev/null
+++ b/src/lib/hostControls.ts
@@ -0,0 +1,62 @@
+/**
+ * What the host-controls menu may offer, decided in one place.
+ *
+ * This exists because the menu and its handlers used to answer that question
+ * separately and disagreed. The menu rendered on the Stream capabilities
+ * (`MUTE_USERS`, `BLOCK_USERS`); the handlers additionally required an
+ * `interviews` row, and returned silently without one:
+ *
+ *     if (!call || !interview) return;
+ *
+ * An instant meeting has no such row, so its creator — whom Stream makes the
+ * call's host, and therefore grants both capabilities — was shown a full menu
+ * in which every item was inert. No effect, no toast, no error in the console.
+ *
+ * The interview is needed to *log* a host action, never to perform one. A
+ * missing audit row is not a reason to refuse the thing the button says it
+ * does, so it is not an input here. Both the render gate and the handlers read
+ * this one function, which is what stops the two from drifting apart again.
+ *
+ * Import-free on purpose so the test runner can reach it (see CLAUDE.md).
+ */
+
+export type HostControlsInput = {
+  /** App-level: the call's creator, an admin/recruiter, or a listed interviewer. */
+  isHost: boolean;
+  /** Stream's `OwnCapability.MUTE_USERS` for this participant. */
+  canMuteUsers: boolean;
+  /** Stream's `OwnCapability.BLOCK_USERS` for this participant. */
+  canBlockUsers: boolean;
+  /** Participants other than the local one — the only people removal can target. */
+  removableParticipantCount: number;
+};
+
+export type HostControlsAvailability = {
+  muteAll: boolean;
+  removeParticipants: boolean;
+  /** Whether the menu is worth rendering at all. */
+  anyAvailable: boolean;
+};
+
+export const getHostControlsAvailability = ({
+  isHost,
+  canMuteUsers,
+  canBlockUsers,
+  removableParticipantCount,
+}: HostControlsInput): HostControlsAvailability => {
+  const muteAll = isHost && canMuteUsers;
+
+  /**
+   * Removal needs somebody to remove. Without this the menu could open on a
+   * heading with nothing beneath it, which is the same empty promise as an item
+   * that does nothing — just quieter.
+   */
+  const removeParticipants =
+    isHost && canBlockUsers && removableParticipantCount > 0;
+
+  return {
+    muteAll,
+    removeParticipants,
+    anyAvailable: muteAll || removeParticipants,
+  };
+};
diff --git a/src/lib/meetingNavigation.test.ts b/src/lib/meetingNavigation.test.ts
new file mode 100644
index 0000000..4b66178
--- /dev/null
+++ b/src/lib/meetingNavigation.test.ts
@@ -0,0 +1,79 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+
+import { resolveJoinTarget } from "./meetingNavigation.ts";
+
+describe("resolveJoinTarget", () => {
+  it("resolves a call id to its meeting route", () => {
+    assert.deepEqual(resolveJoinTarget("abc-123"), {
+      ok: true,
+      href: "/meeting/abc-123",
+    });
+  });
+
+  /**
+   * The regression.
+   *
+   * "Join Meeting" on the home page reported "Failed to join meeting. Please
+   * try again." while pasting the same link into the address bar worked. The
+   * button was gated on a connected Stream video client:
+   *
+   *     if (!client) return toast.error("Failed to join meeting...");
+   *     router.push(`/meeting/${callId}`);
+   *
+   * Navigating needs no such client. StreamClientProvider loads the SDK through
+   * a dynamic import and only once useUserRole has resolved, so on "/" the
+   * client is null for as long as that chunk takes to fetch and connect — and
+   * never at all if the viewer's role does not qualify. The destination route
+   * mounts its own provider and waits for it properly, which is precisely why
+   * the pasted link succeeded where the button failed.
+   *
+   * So resolution depends on the call id and nothing else. There is no client
+   * parameter to pass.
+   */
+  it("does not depend on a connected video client", () => {
+    assert.deepEqual(resolveJoinTarget("abc-123"), {
+      ok: true,
+      href: "/meeting/abc-123",
+    });
+  });
+
+  describe("refuses only what navigation genuinely cannot do", () => {
+    for (const [label, value] of [
+      ["empty", ""],
+      ["whitespace", "   "],
+      ["null", null],
+      ["undefined", undefined],
+    ] as const) {
+      it(`reports a missing call id (${label}) instead of routing to /meeting/`, () => {
+        // Pushing "/meeting/" would render the route's own "unavailable" state,
+        // which reads as the meeting being broken rather than never scheduled.
+        const result = resolveJoinTarget(value);
+
+        assert.equal(result.ok, false);
+        assert.match(
+          result.ok === false ? result.message : "",
+          /no meeting link/i,
+        );
+      });
+    }
+  });
+
+  it("escapes a call id that would otherwise change the path", () => {
+    // Stream ids are UUIDs in practice, so this is defence rather than a known
+    // case — but an id carrying a slash must not be able to steer the route.
+    assert.deepEqual(resolveJoinTarget("a/../b"), {
+      ok: true,
+      href: "/meeting/a%2F..%2Fb",
+    });
+  });
+
+  it("trims surrounding whitespace from a pasted id", () => {
+    // MeetingModal derives the id from a pasted URL, which routinely arrives
+    // with a trailing newline.
+    assert.deepEqual(resolveJoinTarget("  abc-123\n"), {
+      ok: true,
+      href: "/meeting/abc-123",
+    });
+  });
+});
diff --git a/src/lib/meetingNavigation.ts b/src/lib/meetingNavigation.ts
new file mode 100644
index 0000000..5fea13b
--- /dev/null
+++ b/src/lib/meetingNavigation.ts
@@ -0,0 +1,51 @@
+/**
+ * Where "Join Meeting" goes, and the one condition that can stop it.
+ *
+ * This exists because joining was gated on the wrong thing. `joinMeeting` did:
+ *
+ *     if (!client) return toast.error("Failed to join meeting. Please try again.");
+ *     router.push(`/meeting/${callId}`);
+ *
+ * `client` is the Stream video client for the *current* page. Navigating to the
+ * meeting route does not use it — the route mounts its own StreamClientProvider
+ * and waits for the connection there. On "/" that client arrives late or not at
+ * all: StreamClientProvider pulls the SDK through a dynamic import, and only
+ * after useUserRole has resolved and only for roles that might start a call. So
+ * an interviewer pressing the button on their home page was told the interview
+ * could not be joined, while pasting the identical link into the address bar
+ * took them straight in — the paste skipped a check that was never about
+ * whether joining was possible.
+ *
+ * A call id is the only genuine precondition, so it is the only input.
+ *
+ * Import-free on purpose so the test runner can reach it (see CLAUDE.md).
+ */
+
+export type JoinTarget =
+  | { ok: true; href: string }
+  | { ok: false; message: string };
+
+export const resolveJoinTarget = (
+  callId: string | null | undefined,
+): JoinTarget => {
+  const trimmed = callId?.trim();
+
+  if (!trimmed) {
+    /**
+     * Routing to "/meeting/" would land on the route's own "this meeting is
+     * unavailable" state, which reads as the meeting being broken rather than
+     * never having been given a call id.
+     */
+    return {
+      ok: false,
+      message: "This interview has no meeting link yet.",
+    };
+  }
+
+  /**
+   * Stream ids are UUIDs in practice. Encoding is defence rather than a known
+   * case: an id carrying a slash must not be able to steer the path somewhere
+   * other than this meeting.
+   */
+  return { ok: true, href: `/meeting/${encodeURIComponent(trimmed)}` };
+};