From 1037cd6ee64a290e3aa264b98c633657ac6f5634 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Wed, 1 Jul 2026 21:03:02 +0000
Subject: [PATCH] Add conference stage layouts for plenary and panel
 discussions.

Speakers get a full-screen spotlight with overlapping audience avatars; hosts can configure panels in the green room and switch layouts live.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../Controllers/Meet/ConferenceController.php |  12 +
 .../Meet/MeetingFeaturesController.php        |  25 ++
 .../Meet/MeetingRoomController.php            |   8 +-
 app/Services/Meet/StageLayoutService.php      |  99 +++++
 public/images/meet-icons/panel.svg            |   4 +
 resources/css/app.css                         |  96 +++++
 resources/js/meet-room.js                     | 389 +++++++++++++++++-
 .../components/meet/room/panel.blade.php      |   8 +-
 .../views/meet/conferences/create.blade.php   |   1 +
 .../views/meet/conferences/show.blade.php     |   6 +
 .../meet/room/partials/meet-icon.blade.php    |   1 +
 resources/views/meet/room/show.blade.php      | 139 ++++++-
 routes/web.php                                |   1 +
 tests/Feature/MeetWebTest.php                 | 132 ++++++
 14 files changed, 889 insertions(+), 32 deletions(-)
 create mode 100644 app/Services/Meet/StageLayoutService.php
 create mode 100644 public/images/meet-icons/panel.svg

diff --git a/app/Http/Controllers/Meet/ConferenceController.php b/app/Http/Controllers/Meet/ConferenceController.php
index c71eebd..3aa0c88 100644
--- a/app/Http/Controllers/Meet/ConferenceController.php
+++ b/app/Http/Controllers/Meet/ConferenceController.php
@@ -98,6 +98,7 @@ class ConferenceController extends Controller
             'live_captions' => ['sometimes', 'boolean'],
             'green_room' => ['sometimes', 'boolean'],
             'practice_mode' => ['sometimes', 'boolean'],
+            'panel_discussions' => ['sometimes', 'boolean'],
         ]);
 
         $presenterRefs = collect($validated['presenter_refs'] ?? [])
@@ -114,6 +115,9 @@ class ConferenceController extends Controller
             'live_captions' => $request->boolean('live_captions'),
             'green_room' => $request->boolean('green_room', true),
             'practice_mode' => $request->boolean('practice_mode'),
+            'panel_discussions' => $request->boolean('panel_discussions'),
+            'stage_layout' => 'plenary',
+            'panels' => [],
             'stage_mode' => true,
             'presenter_refs' => $presenterRefs,
         ];
@@ -201,6 +205,7 @@ class ConferenceController extends Controller
             'presenter_refs' => ['nullable', 'array'],
             'presenter_refs.*' => ['string', 'max:64'],
             'invite_emails' => ['nullable', 'string', 'max:2000'],
+            'panel_discussions' => ['sometimes', 'boolean'],
         ]);
 
         $allowedRefs = Member::owned($this->ownerRef($request))
@@ -217,6 +222,13 @@ class ConferenceController extends Controller
 
         $this->conferences->syncPresenterRefs($room, $presenterRefs);
 
+        if ($request->has('panel_discussions')) {
+            $settings = array_merge($room->settings ?? [], [
+                'panel_discussions' => $request->boolean('panel_discussions'),
+            ]);
+            $room->update(['settings' => $settings]);
+        }
+
         $inviteCount = 0;
         if ($emails = trim((string) ($validated['invite_emails'] ?? ''))) {
             $invites = collect(preg_split('/[\s,;]+/', $emails))
diff --git a/app/Http/Controllers/Meet/MeetingFeaturesController.php b/app/Http/Controllers/Meet/MeetingFeaturesController.php
index b2d50e2..1f64c0e 100644
--- a/app/Http/Controllers/Meet/MeetingFeaturesController.php
+++ b/app/Http/Controllers/Meet/MeetingFeaturesController.php
@@ -15,6 +15,7 @@ use App\Services\Meet\FileSharingService;
 use App\Services\Meet\LiveStreamService;
 use App\Services\Meet\PollService;
 use App\Services\Meet\QaService;
+use App\Services\Meet\StageLayoutService;
 use App\Services\Meet\TownHallService;
 use App\Services\Meet\WhiteboardService;
 use Illuminate\Http\JsonResponse;
@@ -32,6 +33,7 @@ class MeetingFeaturesController extends Controller
         protected WhiteboardService $whiteboards,
         protected LiveStreamService $liveStreams,
         protected TownHallService $townHall,
+        protected StageLayoutService $stageLayout,
     ) {}
 
     // --- Q&A ---
@@ -320,6 +322,29 @@ class MeetingFeaturesController extends Controller
         ]);
     }
 
+    public function updateStage(Request $request, Session $session): JsonResponse
+    {
+        $this->hostOnly($request, $session);
+        $room = $session->room;
+        abort_unless($this->stageLayout->usesStageLayout($room), 422);
+
+        $validated = $request->validate([
+            'panel_discussions' => ['sometimes', 'boolean'],
+            'stage_layout' => ['sometimes', 'string', 'in:plenary,panel'],
+            'active_panel_id' => ['nullable', 'string', 'max:64'],
+            'spotlight_speaker_ref' => ['nullable', 'string', 'max:64'],
+            'panels' => ['sometimes', 'array', 'max:12'],
+            'panels.*.id' => ['nullable', 'string', 'max:64'],
+            'panels.*.name' => ['required_with:panels', 'string', 'max:100'],
+            'panels.*.speaker_refs' => ['nullable', 'array'],
+            'panels.*.speaker_refs.*' => ['string', 'max:64'],
+        ]);
+
+        $room = $this->stageLayout->update($room, $validated);
+
+        return response()->json($this->stageLayout->config($room));
+    }
+
     protected function participant(Request $request, Session $session): Participant
     {
         $uuid = $request->session()->get("meet.participant.{$session->uuid}");
diff --git a/app/Http/Controllers/Meet/MeetingRoomController.php b/app/Http/Controllers/Meet/MeetingRoomController.php
index 8e0d911..af11c57 100644
--- a/app/Http/Controllers/Meet/MeetingRoomController.php
+++ b/app/Http/Controllers/Meet/MeetingRoomController.php
@@ -14,6 +14,7 @@ use App\Services\Meet\RecordingService;
 use App\Services\Meet\SecurityPolicyService;
 use App\Services\Meet\SessionService;
 use App\Services\Meet\SpaceService;
+use App\Services\Meet\StageLayoutService;
 use App\Services\Meet\TranscriptService;
 use App\Services\Meet\WebinarService;
 use Illuminate\Http\JsonResponse;
@@ -64,6 +65,7 @@ class MeetingRoomController extends Controller
         $webinars = app(WebinarService::class);
         $spaces = app(SpaceService::class);
         $isAudioOnly = $room->isAudioOnly();
+        $stageLayout = app(StageLayoutService::class);
 
         return view('meet.room.show', [
             'session' => $session,
@@ -86,6 +88,8 @@ class MeetingRoomController extends Controller
                 ? $spaces->canPublish($room, $participant)
                 : $webinars->canPublish($room, $participant),
             'isAttendee' => $participant->isAttendee() || $spaces->isListener($room, $participant),
+            'usesStageLayout' => $stageLayout->usesStageLayout($room),
+            'stageConfig' => $stageLayout->config($room),
         ]);
     }
 
@@ -241,7 +245,7 @@ class MeetingRoomController extends Controller
             ->limit(20)
             ->get();
 
-        return response()->json([
+        return response()->json(array_merge([
             'participants' => $session->participants->map(
                 fn ($p) => ParticipantPresenter::toArray($p, $avatars, $session->room->host_user_ref)
             ),
@@ -287,7 +291,7 @@ class MeetingRoomController extends Controller
                 'original_name' => $f->original_name,
                 'file_size' => $f->file_size,
             ]),
-        ]);
+        ], app(StageLayoutService::class)->config($session->room)));
     }
 
     public function startRecording(Request $request, Session $session): JsonResponse
diff --git a/app/Services/Meet/StageLayoutService.php b/app/Services/Meet/StageLayoutService.php
new file mode 100644
index 0000000..f7c3ad0
--- /dev/null
+++ b/app/Services/Meet/StageLayoutService.php
@@ -0,0 +1,99 @@
+<?php
+
+namespace App\Services\Meet;
+
+use App\Models\Room;
+use Illuminate\Support\Str;
+
+class StageLayoutService
+{
+    public function usesStageLayout(Room $room): bool
+    {
+        return $room->isConference() || $room->isWebinar();
+    }
+
+    /** @return array<string, mixed> */
+    public function config(Room $room): array
+    {
+        return [
+            'uses_stage_layout' => $this->usesStageLayout($room),
+            'panel_discussions' => (bool) $room->setting('panel_discussions', false),
+            'stage_layout' => (string) $room->setting('stage_layout', 'plenary'),
+            'panels' => array_values((array) $room->setting('panels', [])),
+            'active_panel_id' => $room->setting('active_panel_id'),
+            'spotlight_speaker_ref' => $room->setting('spotlight_speaker_ref'),
+        ];
+    }
+
+    /**
+     * @param  array<string, mixed>  $data
+     */
+    public function update(Room $room, array $data): Room
+    {
+        abort_unless($this->usesStageLayout($room), 422);
+
+        $settings = $room->settings ?? [];
+
+        if (array_key_exists('panel_discussions', $data)) {
+            $settings['panel_discussions'] = (bool) $data['panel_discussions'];
+        }
+
+        if (array_key_exists('stage_layout', $data)) {
+            $layout = (string) $data['stage_layout'];
+            abort_unless(in_array($layout, ['plenary', 'panel'], true), 422);
+            $settings['stage_layout'] = $layout;
+        }
+
+        if (array_key_exists('active_panel_id', $data)) {
+            $settings['active_panel_id'] = $data['active_panel_id'] ?: null;
+        }
+
+        if (array_key_exists('spotlight_speaker_ref', $data)) {
+            $settings['spotlight_speaker_ref'] = $data['spotlight_speaker_ref'] ?: null;
+        }
+
+        if (array_key_exists('panels', $data)) {
+            $settings['panels'] = $this->normalizePanels((array) $data['panels']);
+        }
+
+        $room->update(['settings' => $settings]);
+
+        return $room->fresh();
+    }
+
+    /**
+     * @param  array<int, array<string, mixed>>  $panels
+     * @return list<array{id: string, name: string, speaker_refs: list<string>}>
+     */
+    public function normalizePanels(array $panels): array
+    {
+        return collect($panels)
+            ->map(function ($panel) {
+                $id = trim((string) ($panel['id'] ?? ''));
+                $name = trim((string) ($panel['name'] ?? ''));
+
+                if ($id === '') {
+                    $id = 'panel-'.Str::lower(Str::random(8));
+                }
+
+                if ($name === '') {
+                    return null;
+                }
+
+                $speakerRefs = collect($panel['speaker_refs'] ?? [])
+                    ->filter(fn ($ref) => is_string($ref) && $ref !== '')
+                    ->unique()
+                    ->values()
+                    ->all();
+
+                return [
+                    'id' => $id,
+                    'name' => Str::limit($name, 100, ''),
+                    'speaker_refs' => $speakerRefs,
+                ];
+            })
+            ->filter()
+            ->values()
+            ->all();
+    }
+}
diff --git a/public/images/meet-icons/panel.svg b/public/images/meet-icons/panel.svg
new file mode 100644
index 0000000..fa290e9
--- /dev/null
+++ b/public/images/meet-icons/panel.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
+  <path d="M19.848,14.296l-.977-.975c.17-.851,.17-1.791,0-2.642l.978-.972c1.524-1.461,1.525-4.092,0-5.553-1.46-1.523-4.092-1.523-5.551,0l-.977,.974c-.852-.171-1.791-.171-2.643,0l-.977-.973c-1.461-1.524-4.09-1.524-5.553-.001-1.524,1.463-1.522,4.092,.004,5.555l.976,.97c-.17,.851-.17,1.79,0,2.641l-.978,.977c-1.524,1.461-1.525,4.091-.002,5.553,1.463,1.524,4.091,1.523,5.554-.001l.975-.978c.851,.17,1.79,.17,2.642,0l.977,.977c1.461,1.525,4.091,1.526,5.554,.002,.742-.742,1.149-1.728,1.149-2.777,0-1.049-.409-2.035-1.152-2.776ZM15.713,5.569c.716-.748,2.006-.748,2.724,0,.746,.717,.746,2.007,0,2.723l-.318,.317c-.635-1.142-1.581-2.087-2.722-2.724l.316-.315Zm-10.147,2.723c-.748-.716-.749-2.006-.002-2.723,.751-.75,1.974-.75,2.727,.002l.314,.312c-1.141,.636-2.086,1.581-2.722,2.723l-.317-.315Zm2.723,10.143c-.717,.748-2.007,.748-2.725,0-.747-.718-.746-2.007,.002-2.724l.318-.318c.636,1.141,1.581,2.087,2.722,2.723l-.317,.318Zm-1.288-6.435c0-2.757,2.243-5,5-5s5,2.243,5,5-2.243,5-5,5-5-2.243-5-5Zm11.436,6.436c-.717,.747-2.006,.747-2.724-.001l-.318-.318c1.141-.636,2.086-1.581,2.722-2.722l.318,.317c.749,.717,.749,2.007,0,2.724Zm1.564-16.436c0-1.105,.895-2,2-2s2,.895,2,2-.895,2-2,2-2-.895-2-2ZM0,2C0,.895,.895,0,2,0s2,.895,2,2-.895,2-2,2S0,3.105,0,2ZM24,22c0,1.105-.895,2-2,2s-2-.895-2-2,.895-2,2-2,2,.895,2,2Zm-20,0c0,1.105-.895,2-2,2s-2-.895-2-2,.895-2,2-2,2,.895,2,2Z"/>
+</svg>
diff --git a/resources/css/app.css b/resources/css/app.css
index 576908a..2833fad 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -45,6 +45,102 @@ html.meet-room-page {
     box-shadow: 0 0 0 2px rgb(52 211 153 / 0.9);
 }
 
+.meet-room-page #meet-stage:not(.meet-stage) #meet-stage-spotlight,
+.meet-room-page #meet-stage:not(.meet-stage) #meet-audience-strip {
+    display: none;
+}
+
+.meet-room-page .meet-stage {
+    height: 100%;
+}
+
+.meet-room-page .meet-stage--plenary #video-grid {
+    display: none;
+}
+
+.meet-room-page .meet-stage--plenary .meet-stage-spotlight {
+    flex: 1 1 auto;
+    min-height: min(70vh, 100%);
+}
+
+.meet-room-page .meet-stage--plenary .meet-stage-spotlight-tile {
+    height: 100%;
+    width: 100%;
+    aspect-ratio: auto;
+}
+
+.meet-room-page .meet-stage--panel #meet-stage-spotlight,
+.meet-room-page .meet-stage--panel #meet-audience-strip {
+    display: none;
+}
+
+.meet-room-page .meet-stage-panel-grid {
+    display: grid;
+    height: 100%;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+    grid-auto-rows: minmax(0, 1fr);
+    align-content: center;
+}
+
+.meet-room-page .meet-stage-panel-tile {
+    height: 100%;
+    min-height: 12rem;
+}
+
+.meet-room-page .meet-audience-strip {
+    display: flex;
+    align-items: center;
+    min-height: 2.75rem;
+    padding: 0.25rem 0;
+}
+
+.meet-room-page .meet-audience-avatar {
+    position: relative;
+    display: flex;
+    height: 2.25rem;
+    width: 2.25rem;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    margin-left: -0.45rem;
+    overflow: hidden;
+    border-radius: 9999px;
+    border: 2px solid rgb(15 23 42);
+    background: rgb(30 41 59);
+}
+
+.meet-room-page .meet-audience-avatar:first-child {
+    margin-left: 0;
+}
+
+.meet-room-page .meet-audience-avatar__image {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+}
+
+.meet-room-page .meet-audience-avatar__initials {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.65rem;
+    font-weight: 600;
+    color: white;
+}
+
+.meet-room-page .meet-audience-avatar--more {
+    z-index: 0;
+    width: auto;
+    min-width: 2.25rem;
+    padding: 0 0.5rem;
+    font-size: 0.65rem;
+    font-weight: 600;
+    color: rgb(203 213 225);
+    white-space: nowrap;
+}
+
 .meet-room-page .meet-audio-grid {
     place-content: center;
     place-items: center;
diff --git a/resources/js/meet-room.js b/resources/js/meet-room.js
index 26ba306..770cc09 100644
--- a/resources/js/meet-room.js
+++ b/resources/js/meet-room.js
@@ -44,6 +44,14 @@ function meetRoom() {
         presenterRefs: [],
         audioOnly: false,
         isSpace: false,
+        usesStageLayout: false,
+        panelDiscussions: false,
+        stageLayout: 'plenary',
+        panels: [],
+        activePanelId: '',
+        spotlightSpeakerRef: '',
+        panelSetupOpen: false,
+        savingStageLayout: false,
         qaItems: [],
         activePolls: [],
         breakoutBroadcast: '',
@@ -102,6 +110,7 @@ function meetRoom() {
                 whiteboardSaveUrl: el.dataset.whiteboardSaveUrl,
                 goLiveUrl: el.dataset.goLiveUrl,
                 addPresenterUrl: el.dataset.addPresenterUrl,
+                stageUpdateUrl: el.dataset.stageUpdateUrl,
                 csrf: el.dataset.csrf,
                 sessionUuid: el.dataset.sessionUuid,
             };
@@ -131,6 +140,22 @@ function meetRoom() {
                 this.presenterRefs = [];
             }
 
+            this.usesStageLayout = el.dataset.usesStageLayout === '1';
+            this.panelDiscussions = el.dataset.panelDiscussions === '1';
+            this.stageLayout = el.dataset.stageLayout || 'plenary';
+            this.activePanelId = el.dataset.activePanelId || '';
+            this.spotlightSpeakerRef = el.dataset.spotlightSpeakerRef || '';
+
+            try {
+                this.panels = JSON.parse(el.dataset.panels || '[]');
+            } catch {
+                this.panels = [];
+            }
+
+            if (!this.panelDiscussions && this.stageLayout === 'panel') {
+                this.stageLayout = 'plenary';
+            }
+
             try {
                 this.sessionParticipants = JSON.parse(el.dataset.initialParticipants || '[]');
             } catch {
@@ -152,6 +177,7 @@ function meetRoom() {
             }
 
             this.pollTimer = setInterval(() => this.poll(), 3000);
+            this.applyStageLayout();
         },
 
         connectionErrorMessage(error) {
@@ -514,6 +540,325 @@ function meetRoom() {
             };
         },
 
+        isSpeakerPerson(person) {
+            if (!person) return false;
+
+            if (['host', 'co_host', 'panelist'].includes(person.role)) {
+                return true;
+            }
+
+            return Boolean(person.user_ref && this.presenterRefs.includes(person.user_ref));
+        },
+
+        speakerParticipants() {
+            return this.inCallParticipants().filter((person) => this.isSpeakerPerson(person));
+        },
+
+        speakerParticipantsSorted() {
+            const order = { host: 0, co_host: 1, panelist: 2 };
+
+            return [...this.speakerParticipants()].sort((a, b) => {
+                const aSpeaking = this.isSpeaking(a.uuid);
+                const bSpeaking = this.isSpeaking(b.uuid);
+
+                if (aSpeaking !== bSpeaking) {
+                    return aSpeaking ? -1 : 1;
+                }
+
+                const roleDiff = (order[a.role] ?? 9) - (order[b.role] ?? 9);
+                if (roleDiff !== 0) {
+                    return roleDiff;
+                }
+
+                return a.display_name.localeCompare(b.display_name);
+            });
+        },
+
+        speakerCount() {
+            return this.speakerParticipants().length;
+        },
+
+        audienceParticipants() {
+            return this.inCallParticipants().filter((person) => !this.isSpeakerPerson(person));
+        },
+
+        audienceParticipantsSorted() {
+            return [...this.audienceParticipants()].sort((a, b) => a.display_name.localeCompare(b.display_name));
+        },
+
+        resolveSpotlightSpeakerRef() {
+            const speakers = this.speakerParticipants();
+
+            if (this.spotlightSpeakerRef && speakers.some((person) => person.user_ref === this.spotlightSpeakerRef)) {
+                return this.spotlightSpeakerRef;
+            }
+
+            return speakers[0]?.user_ref || null;
+        },
+
+        getActivePanelSpeakerRefs() {
+            if (!this.panelDiscussions || this.stageLayout !== 'panel') {
+                return this.speakerParticipants()
+                    .map((person) => person.user_ref)
+                    .filter(Boolean);
+            }
+
+            if (!this.activePanelId) {
+                return this.speakerParticipants()
+                    .map((person) => person.user_ref)
+                    .filter(Boolean);
+            }
+
+            const panel = this.panels.find((entry) => entry.id === this.activePanelId);
+
+            return panel?.speaker_refs || [];
+        },
+
+        mergeStageConfig(data) {
+            if (typeof data.stage_layout === 'string') {
+                this.stageLayout = data.stage_layout;
+            }
+            if (typeof data.panel_discussions === 'boolean') {
+                this.panelDiscussions = data.panel_discussions;
+            }
+            if (Array.isArray(data.panels)) {
+                this.panels = data.panels;
+            }
+            if (data.active_panel_id !== undefined) {
+                this.activePanelId = data.active_panel_id || '';
+            }
+            if (data.spotlight_speaker_ref !== undefined) {
+                this.spotlightSpeakerRef = data.spotlight_speaker_ref || '';
+            }
+
+            if (!this.panelDiscussions && this.stageLayout === 'panel') {
+                this.stageLayout = 'plenary';
+            }
+        },
+
+        findParticipantTile(identity) {
+            return document.querySelector(`[data-participant-tile="${identity}"]`);
+        },
+
+        getTileContainerForIdentity(identity) {
+            if (!this.usesStageLayout) {
+                return document.getElementById('video-grid');
+            }
+
+            const person = this.sessionParticipants.find((entry) => entry.uuid === identity);
+            const spotlight = document.getElementById('meet-stage-spotlight');
+            const grid = document.getElementById('video-grid');
+
+            if (this.stageLayout === 'plenary') {
+                if (!this.isSpeakerPerson(person)) {
+                    return null;
+                }
+
+                const spotlightRef = this.resolveSpotlightSpeakerRef();
+                if (person?.user_ref && spotlightRef && person.user_ref === spotlightRef) {
+                    return spotlight;
+                }
+
+                if (!spotlightRef && this.speakerParticipantsSorted()[0]?.uuid === identity) {
+                    return spotlight;
+                }
+
+                return null;
+            }
+
+            if (this.stageLayout === 'panel') {
+                if (!this.isSpeakerPerson(person)) {
+                    return null;
+                }
+
+                const refs = this.getActivePanelSpeakerRefs();
+                if (!person?.user_ref || !refs.includes(person.user_ref)) {
+                    return null;
+                }
+
+                return grid;
+            }
+
+            return grid;
+        },
+
+        renderAudienceStrip() {
+            const strip = document.getElementById('meet-audience-strip');
+            if (!strip) return;
+
+            strip.replaceChildren();
+
+            if (!this.usesStageLayout || this.stageLayout !== 'plenary') {
+                return;
+            }
+
+            const audience = this.audienceParticipantsSorted();
+            if (audience.length === 0) {
+                return;
+            }
+
+            const maxVisible = 8;
+            const visible = audience.slice(0, maxVisible);
+            const overflow = audience.length - visible.length;
+
+            visible.forEach((person, index) => {
+                const item = document.createElement('div');
+                item.className = 'meet-audience-avatar';
+                item.style.zIndex = String(visible.length - index);
+                item.title = person.display_name;
+
+                if (person.avatar_url) {
+                    const img = document.createElement('img');
+                    img.src = person.avatar_url;
+                    img.alt = '';
+                    img.className = 'meet-audience-avatar__image';
+                    item.appendChild(img);
+                } else {
+                    const initials = document.createElement('span');
+                    initials.className = 'meet-audience-avatar__initials';
+                    initials.style.background = this.avatarStyle(person.display_name).background;
+                    initials.textContent = this.participantInitials(person.display_name);
+                    item.appendChild(initials);
+                }
+
+                strip.appendChild(item);
+            });
+
+            if (overflow > 0) {
+                const more = document.createElement('div');
+                more.className = 'meet-audience-avatar meet-audience-avatar--more';
+                more.style.zIndex = '0';
+                more.textContent = `+${overflow} others`;
+                strip.appendChild(more);
+            }
+        },
+
+        applyStageLayout() {
+            if (!this.usesStageLayout) {
+                document.getElementById('meet-stage-spotlight')?.replaceChildren();
+                document.getElementById('meet-audience-strip')?.replaceChildren();
+                return;
+            }
+
+            const spotlight = document.getElementById('meet-stage-spotlight');
+            const grid = document.getElementById('video-grid');
+
+            if (room) {
+                const all = [room.localParticipant, ...room.remoteParticipants.values()];
+                all.forEach((participant) => {
+                    const tile = this.findParticipantTile(participant.identity);
+                    if (!tile) return;
+
+                    const target = this.getTileContainerForIdentity(participant.identity);
+                    if (target) {
+                        if (tile.parentElement !== target) {
+                            target.appendChild(tile);
+                        }
+
+                        tile.classList.toggle('meet-stage-spotlight-tile', target === spotlight);
+                        tile.classList.toggle('meet-stage-panel-tile', target === grid && this.stageLayout === 'panel');
+                    } else {
+                        tile.remove();
+                    }
+                });
+            }
+
+            if (grid) {
+                grid.dataset.panelCount = String(this.getActivePanelSpeakerRefs().length || this.speakerCount());
+            }
+
+            this.renderAudienceStrip();
+        },
+
+        async saveStageLayout() {
+            if (!this.config.stageUpdateUrl || this.savingStageLayout) {
+                return;
+            }
+
+            this.savingStageLayout = true;
+
+            try {
+                const res = await fetch(this.config.stageUpdateUrl, {
+                    method: 'POST',
+                    headers: this.headers(),
+                    body: JSON.stringify({
+                        stage_layout: this.stageLayout,
+                        panels: this.panels,
+                        active_panel_id: this.activePanelId || null,
+                        spotlight_speaker_ref: this.spotlightSpeakerRef || null,
+                    }),
+                });
+
+                if (!res.ok) {
+                    return;
+                }
+
+                const data = await res.json();
+                this.mergeStageConfig(data);
+                this.panelSetupOpen = false;
+                this.applyStageLayout();
+            } finally {
+                this.savingStageLayout = false;
+            }
+        },
+
+        async setSpotlight(userRef) {
+            if (!userRef) {
+                return;
+            }
+
+            this.spotlightSpeakerRef = userRef;
+            this.stageLayout = 'plenary';
+            this.applyStageLayout();
+
+            if (!this.config.stageUpdateUrl) {
+                return;
+            }
+
+            await fetch(this.config.stageUpdateUrl, {
+                method: 'POST',
+                headers: this.headers(),
+                body: JSON.stringify({
+                    stage_layout: 'plenary',
+                    spotlight_speaker_ref: userRef,
+                }),
+            });
+        },
+
+        addPanel() {
+            this.panels.push({
+                id: `panel-${Math.random().toString(36).slice(2, 10)}`,
+                name: `Panel ${this.panels.length + 1}`,
+                speaker_refs: [],
+            });
+        },
+
+        removePanel(index) {
+            const removed = this.panels.splice(index, 1)[0];
+            if (removed && this.activePanelId === removed.id) {
+                this.activePanelId = this.panels[0]?.id || '';
+            }
+        },
+
+        setActivePanel(panelId) {
+            this.activePanelId = panelId;
+            this.stageLayout = 'panel';
+            this.applyStageLayout();
+        },
+
+        togglePanelSpeaker(panel, userRef) {
+            if (!panel || !userRef) {
+                return;
+            }
+
+            const refs = panel.speaker_refs || [];
+            if (refs.includes(userRef)) {
+                panel.speaker_refs = refs.filter((ref) => ref !== userRef);
+            } else {
+                panel.speaker_refs = [...refs, userRef];
+            }
+        },
+
         hostParticipant() {
             const hosts = this.inCallParticipants().filter((p) => p.role === 'host' || p.role === 'co_host');
             if (hosts.length) {
@@ -620,10 +965,7 @@ function meetRoom() {
         syncActiveSpeakers(speakers) {
             this.activeSpeakerIds = speakers.map((p) => p.identity);
 
-            const grid = document.getElementById('video-grid');
-            if (!grid) return;
-
-            grid.querySelectorAll('[data-participant-tile]').forEach((tile) => {
+            document.querySelectorAll('[data-participant-tile]').forEach((tile) => {
                 const identity = tile.dataset.participantTile;
                 const speaking = this.activeSpeakerIds.includes(identity);
 
@@ -653,18 +995,20 @@ function meetRoom() {
         },
 
         removeParticipantTile(identity) {
-            const grid = document.getElementById('video-grid');
-            if (!grid || !identity) return;
-
-            grid.querySelector(`[data-participant-tile="${identity}"]`)?.remove();
+            this.findParticipantTile(identity)?.remove();
         },
 
         getOrCreateParticipantTile(participant) {
-            const grid = document.getElementById('video-grid');
-            if (!grid) return null;
-
+            const container = this.getTileContainerForIdentity(participant.identity);
             const identity = participant.identity;
-            let tile = grid.querySelector(`[data-participant-tile="${identity}"]`);
+            const existing = this.findParticipantTile(identity);
+
+            if (!container) {
+                existing?.remove();
+                return null;
+            }
+
+            let tile = existing;
 
             if (!tile) {
                 tile = document.createElement('div');
@@ -695,9 +1039,15 @@ function meetRoom() {
                             </span>
                         </div>
                     </div>`;
-                grid.appendChild(tile);
             }
 
+            if (tile.parentElement !== container) {
+                container.appendChild(tile);
+            }
+
+            tile.classList.toggle('meet-stage-spotlight-tile', container.id === 'meet-stage-spotlight');
+            tile.classList.toggle('meet-stage-panel-tile', container.id === 'video-grid' && this.stageLayout === 'panel');
+
             const displayName = participant.name || participant.identity;
             const hue = this.avatarHue(displayName);
             const circle = tile.querySelector('[data-tile-avatar-circle]');
@@ -1128,6 +1478,7 @@ function meetRoom() {
                 }
             });
 
+            this.applyStageLayout();
             this.syncActiveSpeakers(room.activeSpeakers ?? []);
         },
 
@@ -1138,16 +1489,15 @@ function meetRoom() {
                     .map((p) => p.uuid),
             );
 
-            const grid = document.getElementById('video-grid');
-            if (!grid) return;
-
-            grid.querySelectorAll('[data-participant-tile]').forEach((tile) => {
+            document.querySelectorAll('[data-participant-tile]').forEach((tile) => {
                 const identity = tile.dataset.participantTile;
                 if (room?.localParticipant?.identity === identity) return;
                 if (!joinedIds.has(identity)) {
                     tile.remove();
                 }
             });
+
+            this.applyStageLayout();
         },
 
         async toggleMute() {
@@ -1260,6 +1610,7 @@ function meetRoom() {
             this.sessionParticipants = this.sessionParticipants.map((person) => (
                 person.user_ref === userRef ? { ...person, role: 'panelist' } : person
             ));
+            this.applyStageLayout();
         },
 
         toggleChat() {
@@ -1371,6 +1722,10 @@ function meetRoom() {
                     this.sessionParticipants = data.participants;
                     this.pruneTilesFromSession();
                 }
+                if (typeof data.uses_stage_layout === 'boolean' || typeof data.stage_layout === 'string') {
+                    this.mergeStageConfig(data);
+                    this.applyStageLayout();
+                }
                 if (typeof data.waiting_count === 'number') {
                     const previous = this.waitingCount;
                     this.waitingCount = data.waiting_count;
diff --git a/resources/views/components/meet/room/panel.blade.php b/resources/views/components/meet/room/panel.blade.php
index 9bdc882..6c728b5 100644
--- a/resources/views/components/meet/room/panel.blade.php
+++ b/resources/views/components/meet/room/panel.blade.php
@@ -1,6 +1,6 @@
 @props([
     'show',
-    'title',
+    'title' => null,
 ])
 
 <aside x-show="{{ $show }}" x-cloak
@@ -29,7 +29,11 @@
 
         <div class="meet-room-panel__header">
             <div class="min-w-0">
-                <h2 class="text-sm font-semibold text-white">{{ $title }}</h2>
+                @isset($header)
+                    {{ $header }}
+                @elseif ($title)
+                    <h2 class="text-sm font-semibold text-white">{{ $title }}</h2>
+                @endif
                 @isset($subtitle)
                     <div class="text-xs text-slate-400">{{ $subtitle }}</div>
                 @endisset
diff --git a/resources/views/meet/conferences/create.blade.php b/resources/views/meet/conferences/create.blade.php
index 3d0aff8..f6a6ae9 100644
--- a/resources/views/meet/conferences/create.blade.php
+++ b/resources/views/meet/conferences/create.blade.php
@@ -76,6 +76,7 @@
             <fieldset class="space-y-2">
                 <legend class="text-sm font-medium text-slate-700">Options</legend>
                 <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="green_room" value="1" @checked(old('green_room', true)) class="rounded border-slate-300"> Green room for hosts & speakers before going live</label>
+                <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="panel_discussions" value="1" @checked(old('panel_discussions')) class="rounded border-slate-300"> Enable panel discussions (multi-speaker stage layout)</label>
                 <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="practice_mode" value="1" @checked(old('practice_mode')) class="rounded border-slate-300"> Practice mode in green room</label>
                 <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="waiting_room" value="1" @checked(old('waiting_room', true)) class="rounded border-slate-300"> Waiting room for attendees</label>
                 <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="mute_on_join" value="1" @checked(old('mute_on_join', true)) class="rounded border-slate-300"> Mute attendees on join</label>
diff --git a/resources/views/meet/conferences/show.blade.php b/resources/views/meet/conferences/show.blade.php
index 61ea0c1..5f8c74f 100644
--- a/resources/views/meet/conferences/show.blade.php
+++ b/resources/views/meet/conferences/show.blade.php
@@ -119,6 +119,12 @@
                         </div>
                     @endif
 
+                    <label class="flex items-center gap-2 text-sm text-slate-700">
+                        <input type="checkbox" name="panel_discussions" value="1"
+                               @checked(old('panel_discussions', $room->setting('panel_discussions'))) class="rounded border-slate-300">
+                        Enable panel discussions (multi-speaker stage layout)
+                    </label>
+
                     <button type="submit" class="btn-primary btn-primary-sm">Save speakers</button>
                 </form>
             @endif
diff --git a/resources/views/meet/room/partials/meet-icon.blade.php b/resources/views/meet/room/partials/meet-icon.blade.php
index 471cc3a..39bfb8d 100644
--- a/resources/views/meet/room/partials/meet-icon.blade.php
+++ b/resources/views/meet/room/partials/meet-icon.blade.php
@@ -9,6 +9,7 @@
         'leave',
         'lock',
         'personal',
+        'panel',
         'raise-hand',
         'react',
         'schedule',
diff --git a/resources/views/meet/room/show.blade.php b/resources/views/meet/room/show.blade.php
index 7938c07..7b314b3 100644
--- a/resources/views/meet/room/show.blade.php
+++ b/resources/views/meet/room/show.blade.php
@@ -61,6 +61,13 @@
          data-session-mode="{{ $session->session_mode }}"
          data-go-live-url="{{ ($isConference ?? false) && ($isGreenRoom ?? false) && $participant->isHost() ? route('meet.room.townhall.live', $session) : '' }}"
          data-add-presenter-url="{{ ($isConference ?? false) && $participant->isHost() ? route('meet.room.townhall.presenters', $session) : '' }}"
+         data-stage-update-url="{{ ($usesStageLayout ?? false) && $participant->isHost() ? route('meet.room.stage.update', $session) : '' }}"
+         data-uses-stage-layout="{{ ($usesStageLayout ?? false) ? '1' : '0' }}"
+         data-panel-discussions="{{ ($stageConfig['panel_discussions'] ?? false) ? '1' : '0' }}"
+         data-stage-layout="{{ $stageConfig['stage_layout'] ?? 'plenary' }}"
+         data-panels='@json($stageConfig['panels'] ?? [])'
+         data-active-panel-id="{{ $stageConfig['active_panel_id'] ?? '' }}"
+         data-spotlight-speaker-ref="{{ $stageConfig['spotlight_speaker_ref'] ?? '' }}"
          data-presenter-refs='@json($presenterRefs ?? [])'
          data-can-publish="{{ ($canPublish ?? true) ? '1' : '0' }}"
          data-qa-url="{{ route('meet.room.qa.submit', $session) }}"
@@ -116,7 +123,7 @@
                 <button @click="toggleParticipants()" type="button"
                         class="relative inline-flex items-center gap-2 rounded-lg bg-slate-900 px-2 py-1 text-xs font-medium text-slate-200 transition-colors hover:bg-slate-800"
                         :class="isHost && waitingCount > 0 ? 'ring-2 ring-amber-400/60' : ''"
-                        title="View participants">
+                        :title="usesStageLayout ? 'View speakers' : 'View participants'">
                     <span x-show="isHost && waitingCount > 0"
                           x-text="waitingCount > 9 ? '9+' : waitingCount"
                           class="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-amber-500 px-1 text-[10px] font-bold text-amber-950"></span>
@@ -130,7 +137,7 @@
                               :style="avatarStyle(hostParticipant()?.display_name)"
                               x-text="participantInitials(hostParticipant()?.display_name || '')"></span>
                     </span>
-                    <span x-text="participantCount() + ' in call'"></span>
+                    <span x-text="usesStageLayout ? speakerCount() + (speakerCount() === 1 ? ' speaker' : ' speakers') : participantCount() + ' in call'"></span>
                 </button>
             </div>
         </header>
@@ -141,9 +148,25 @@
                 <p class="font-medium">Green room</p>
                 <p class="truncate text-xs text-violet-200/90">Only hosts and speakers are visible. Attendees join after you go live.</p>
             </div>
-            <button x-show="isHost" @click="goLive()" type="button" :disabled="goingLive"
-                    class="shrink-0 rounded-lg bg-violet-500 px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-violet-400 disabled:opacity-60">
-                <span x-text="goingLive ? 'Starting…' : 'Go live'">Go live</span>
+            <div class="flex shrink-0 items-center gap-2">
+                <button x-show="isHost && usesStageLayout && panelDiscussions" @click="panelSetupOpen = true" type="button"
+                        class="shrink-0 rounded-lg border border-violet-400/40 bg-violet-500/20 px-3 py-1.5 text-xs font-semibold text-violet-100 transition-colors hover:bg-violet-500/30">
+                    @include('meet.room.partials.meet-icon', ['icon' => 'panel', 'class' => 'mr-1 inline h-3.5 w-3.5'])
+                    Panels
+                </button>
+                <button x-show="isHost" @click="goLive()" type="button" :disabled="goingLive"
+                        class="shrink-0 rounded-lg bg-violet-500 px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-violet-400 disabled:opacity-60">
+                    <span x-text="goingLive ? 'Starting…' : 'Go live'">Go live</span>
+                </button>
+            </div>
+        </div>
+
+        <div x-show="isHost && usesStageLayout && panelDiscussions && !isGreenRoom" x-cloak
+             class="flex shrink-0 items-center justify-end gap-2 border-b border-violet-500/20 bg-violet-500/10 px-4 py-2">
+            <button @click="panelSetupOpen = true" type="button"
+                    class="inline-flex items-center gap-1.5 rounded-lg border border-violet-400/40 bg-violet-500/20 px-3 py-1.5 text-xs font-semibold text-violet-100 hover:bg-violet-500/30">
+                @include('meet.room.partials.meet-icon', ['icon' => 'panel', 'class' => 'h-3.5 w-3.5'])
+                <span x-text="stageLayout === 'panel' ? 'Panel layout' : 'Plenary layout'"></span>
             </button>
         </div>
 
@@ -195,7 +218,11 @@
         </div>
 
         <main class="relative min-h-0 min-w-0 flex-1 p-4">
-                <div id="video-grid" class="grid h-full gap-2 sm:grid-cols-2 lg:grid-cols-3" :class="audioOnly ? 'meet-audio-grid' : ''"></div>
+                <div id="meet-stage" class="flex h-full min-h-0 flex-col gap-3" :class="usesStageLayout ? 'meet-stage meet-stage--' + stageLayout : ''">
+                    <div id="meet-stage-spotlight" class="meet-stage-spotlight relative min-h-0 flex-1 overflow-hidden rounded-xl bg-slate-900"></div>
+                    <div id="video-grid" class="grid min-h-0 gap-2 sm:grid-cols-2 lg:grid-cols-3" :class="audioOnly ? 'meet-audio-grid' : (usesStageLayout ? 'meet-stage-panel-grid flex-1' : 'h-full')"></div>
+                    <div id="meet-audience-strip" class="meet-audience-strip shrink-0"></div>
+                </div>
                 <div id="screen-share" class="absolute inset-4 hidden rounded-xl bg-black"></div>
 
                 <div x-show="watermark" class="pointer-events-none absolute right-6 top-6 rounded bg-black/40 px-3 py-1 text-xs text-white/80" x-text="displayName"></div>
@@ -376,11 +403,24 @@
             </div>
         </x-meet.room.panel>
 
-        <x-meet.room.panel show="participantsOpen" title="Participants">
+        <x-meet.room.panel show="participantsOpen" :title="null">
             <x-slot:subtitle>
-                <p x-text="participantCount() + (participantCount() === 1 ? ' person' : ' people') + ' in this call'"></p>
-                <p x-show="activeSpeakerCount() >= 2" x-cloak class="text-emerald-400" x-text="activeSpeakersMessage()"></p>
+                <template x-if="usesStageLayout">
+                    <div>
+                        <p x-text="speakerCount() + (speakerCount() === 1 ? ' speaker' : ' speakers') + ' on stage'"></p>
+                        <p x-show="activeSpeakerCount() >= 1" x-cloak class="text-emerald-400" x-text="activeSpeakersMessage()"></p>
+                    </div>
+                </template>
+                <template x-if="!usesStageLayout">
+                    <div>
+                        <p x-text="participantCount() + (participantCount() === 1 ? ' person' : ' people') + ' in this call'"></p>
+                        <p x-show="activeSpeakerCount() >= 2" x-cloak class="text-emerald-400" x-text="activeSpeakersMessage()"></p>
+                    </div>
+                </template>
             </x-slot:subtitle>
+            <x-slot:header>
+                <h2 class="text-base font-semibold text-white" x-text="usesStageLayout ? 'Speakers' : 'Participants'"></h2>
+            </x-slot:header>
 
             <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
                 <template x-if="isHost && waitingParticipants().length">
@@ -408,7 +448,7 @@
                         </template>
                     </div>
                 </template>
-                <template x-for="person in inCallParticipantsSorted()" :key="person.uuid">
+                <template x-for="person in (usesStageLayout ? speakerParticipantsSorted() : inCallParticipantsSorted())" :key="person.uuid">
                     <div class="flex items-center gap-3 rounded-xl px-2 py-2.5"
                          :class="isSpeaking(person.uuid) ? 'bg-emerald-500/10 ring-1 ring-emerald-500/40' : ''">
                         <span class="relative flex h-10 w-10 shrink-0">
@@ -429,6 +469,11 @@
                             <span x-show="!isSpeaking(person.uuid)" class="block text-xs text-slate-400" x-text="roleLabel(person.role)"></span>
                         </span>
                         <span class="flex shrink-0 items-center gap-1">
+                            <button x-show="usesStageLayout && isHost && person.user_ref && spotlightSpeakerRef !== person.user_ref"
+                                    type="button" @click="setSpotlight(person.user_ref)"
+                                    class="rounded-lg bg-indigo-600 px-2 py-1 text-[10px] font-medium text-white hover:bg-indigo-500">
+                                Spotlight
+                            </button>
                             <button x-show="isConference && isHost && isGreenRoom && person.user_ref && !['host', 'co_host', 'panelist'].includes(person.role)"
                                     type="button" @click="makeSpeaker(person.user_ref)"
                                     class="rounded-lg bg-violet-600 px-2 py-1 text-[10px] font-medium text-white hover:bg-violet-500">
@@ -455,10 +500,82 @@
                         </span>
                     </div>
                 </template>
-                <p x-show="inCallParticipants().length === 0 && waitingParticipants().length === 0" class="px-2 py-4 text-center text-xs text-slate-500">No participants yet.</p>
+                <p x-show="(usesStageLayout ? speakerParticipantsSorted().length : inCallParticipants().length) === 0 && waitingParticipants().length === 0" class="px-2 py-4 text-center text-xs text-slate-500" x-text="usesStageLayout ? 'No speakers yet.' : 'No participants yet.'"></p>
             </div>
         </x-meet.room.panel>
 
+        <div x-show="panelSetupOpen" x-cloak
+             class="fixed inset-0 z-50 flex items-end justify-center bg-black/60 p-4 backdrop-blur-sm sm:items-center"
+             @keydown.escape.window="panelSetupOpen = false">
+            <div class="w-full max-w-lg rounded-2xl bg-slate-900 p-5 shadow-2xl" @click.outside="panelSetupOpen = false">
+                <div class="flex items-start justify-between gap-3">
+                    <div>
+                        <h3 class="text-base font-semibold text-white">Stage & panels</h3>
+                        <p class="mt-1 text-sm text-slate-400">Switch between plenary and panel layouts. Assign speakers to each panel before going live.</p>
+                    </div>
+                    <button @click="panelSetupOpen = false" type="button" class="rounded-lg p-1 text-slate-400 hover:bg-slate-800 hover:text-white">
+                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
+                    </button>
+                </div>
+
+                <div class="mt-5 flex gap-2">
+                    <button type="button" @click="stageLayout = 'plenary'; applyStageLayout()"
+                            class="flex-1 rounded-xl px-3 py-2.5 text-sm font-medium transition-colors"
+                            :class="stageLayout === 'plenary' ? 'bg-violet-600 text-white' : 'bg-slate-800 text-slate-300 hover:bg-slate-700'">
+                        Plenary
+                    </button>
+                    <button type="button" @click="stageLayout = 'panel'; applyStageLayout()"
+                            class="flex-1 rounded-xl px-3 py-2.5 text-sm font-medium transition-colors"
+                            :class="stageLayout === 'panel' ? 'bg-violet-600 text-white' : 'bg-slate-800 text-slate-300 hover:bg-slate-700'">
+                        Panel discussion
+                    </button>
+                </div>
+
+                <div x-show="stageLayout === 'panel'" x-cloak class="mt-5 space-y-3">
+                    <template x-for="(panel, index) in panels" :key="panel.id">
+                        <div class="rounded-xl border border-slate-700/60 bg-slate-950/60 p-3">
+                            <div class="flex items-center gap-2">
+                                <input type="text" x-model="panel.name" placeholder="Panel name"
+                                       class="min-w-0 flex-1 rounded-lg border-0 bg-slate-900 px-3 py-2 text-sm text-white ring-1 ring-slate-700/60">
+                                <button type="button" @click="setActivePanel(panel.id)"
+                                        class="rounded-lg px-2.5 py-1.5 text-xs font-medium"
+                                        :class="activePanelId === panel.id ? 'bg-violet-600 text-white' : 'bg-slate-800 text-slate-300'">
+                                    <span x-text="activePanelId === panel.id ? 'Active' : 'Show'"></span>
+                                </button>
+                                <button type="button" @click="removePanel(index)" class="rounded-lg p-1.5 text-slate-400 hover:bg-slate-800 hover:text-red-300">
+                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
+                                </button>
+                            </div>
+                            <div class="mt-3 flex flex-wrap gap-2">
+                                <template x-for="speaker in speakerParticipantsSorted()" :key="panel.id + '-' + speaker.uuid">
+                                    <label class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs"
+                                           :class="panel.speaker_refs.includes(speaker.user_ref) ? 'bg-violet-600/30 text-violet-100 ring-1 ring-violet-500/50' : 'bg-slate-800 text-slate-300'">
+                                        <input type="checkbox" class="sr-only"
+                                               :checked="panel.speaker_refs.includes(speaker.user_ref)"
+                                               @change="togglePanelSpeaker(panel, speaker.user_ref)">
+                                        <span x-text="speaker.display_name"></span>
+                                    </label>
+                                </template>
+                            </div>
+                        </div>
+                    </template>
+                    <button type="button" @click="addPanel()"
+                            class="w-full rounded-xl border border-dashed border-slate-600 px-3 py-2.5 text-sm font-medium text-slate-300 hover:border-violet-500/50 hover:text-violet-200">
+                        + Add panel
+                    </button>
+                </div>
+
+                <div class="mt-6 flex justify-end gap-2">
+                    <button type="button" @click="panelSetupOpen = false"
+                            class="rounded-xl px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800">Cancel</button>
+                    <button type="button" @click="saveStageLayout()" :disabled="savingStageLayout"
+                            class="rounded-xl bg-violet-600 px-4 py-2 text-sm font-medium text-white hover:bg-violet-500 disabled:opacity-60">
+                        <span x-text="savingStageLayout ? 'Saving…' : 'Save layout'"></span>
+                    </button>
+                </div>
+            </div>
+        </div>
+
         <x-meet.room.panel show="featuresOpen" title="More options">
             <x-slot:subtitle>
                 <p>{{ $sessionNounTitle }} tools and extras</p>
diff --git a/routes/web.php b/routes/web.php
index a5c8452..57754f8 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -101,6 +101,7 @@ Route::post('/room/{session}/town-hall/green-room', [MeetingFeaturesController::
 Route::post('/room/{session}/town-hall/go-live', [MeetingFeaturesController::class, 'goLiveTownHall'])->name('meet.room.townhall.live');
 Route::post('/room/{session}/town-hall/presenters', [MeetingFeaturesController::class, 'addPresenter'])->name('meet.room.townhall.presenters');
 Route::post('/room/{session}/town-hall/handoff', [MeetingFeaturesController::class, 'handoffCoHost'])->name('meet.room.townhall.handoff');
+Route::post('/room/{session}/stage', [MeetingFeaturesController::class, 'updateStage'])->name('meet.room.stage.update');
 
 Route::middleware(['auth', 'platform.session'])->group(function () {
     Route::get('/notifications', [NotificationController::class, 'index'])->name('notifications.index');
diff --git a/tests/Feature/MeetWebTest.php b/tests/Feature/MeetWebTest.php
index 1e7558f..43f5263 100644
--- a/tests/Feature/MeetWebTest.php
+++ b/tests/Feature/MeetWebTest.php
@@ -772,6 +772,138 @@ class MeetWebTest extends TestCase
         ]);
     }
 
+    public function test_host_can_update_conference_stage_layout(): void
+    {
+        $room = Room::create([
+            'owner_ref' => $this->user->public_id,
+            'organization_id' => $this->organization->id,
+            'host_user_ref' => $this->user->public_id,
+            'title' => 'NextGen Summit',
+            'type' => 'town_hall',
+            'status' => 'live',
+            'scheduled_at' => now()->addHour(),
+            'timezone' => 'UTC',
+            'settings' => array_merge(config('meet.default_settings'), [
+                'panel_discussions' => true,
+                'stage_layout' => 'plenary',
+                'panels' => [],
+            ]),
+        ]);
+
+        $session = Session::create([
+            'owner_ref' => $this->user->public_id,
+            'room_id' => $room->id,
+            'media_room_name' => 'meet-'.$room->uuid,
+            'status' => 'live',
+            'session_mode' => 'green_room',
+            'started_at' => now(),
+        ]);
+
+        $participant = \App\Models\Participant::create([
+            'owner_ref' => $this->user->public_id,
+            'session_id' => $session->id,
+            'user_ref' => $this->user->public_id,
+            'display_name' => $this->user->name,
+            'role' => 'host',
+            'status' => 'joined',
+            'joined_at' => now(),
+        ]);
+
+        $this->actingAs($this->user)
+            ->withSession(["meet.participant.{$session->uuid}" => $participant->uuid])
+            ->postJson('/room/'.$session->uuid.'/stage', [
+                'stage_layout' => 'panel',
+                'panels' => [
+                    ['name' => 'Opening panel', 'speaker_refs' => [$this->user->public_id]],
+                ],
+                'active_panel_id' => null,
+            ])
+            ->assertOk()
+            ->assertJson([
+                'stage_layout' => 'panel',
+                'panel_discussions' => true,
+            ]);
+
+        $room->refresh();
+        $this->assertSame('panel', $room->setting('stage_layout'));
+        $this->assertCount(1, $room->setting('panels'));
+    }
+
+    public function test_poll_includes_stage_config_for_conference(): void
+    {
+        $room = Room::create([
+            'owner_ref' => $this->user->public_id,
+            'organization_id' => $this->organization->id,
+            'host_user_ref' => $this->user->public_id,
+            'title' => 'NextGen Summit',
+            'type' => 'town_hall',
+            'status' => 'live',
+            'scheduled_at' => now()->addHour(),
+            'timezone' => 'UTC',
+            'settings' => array_merge(config('meet.default_settings'), [
+                'panel_discussions' => true,
+                'stage_layout' => 'plenary',
+            ]),
+        ]);
+
+        $session = Session::create([
+            'owner_ref' => $this->user->public_id,
+            'room_id' => $room->id,
+            'media_room_name' => 'meet-'.$room->uuid,
+            'status' => 'live',
+            'session_mode' => 'live',
+            'started_at' => now(),
+        ]);
+
+        $participant = \App\Models\Participant::create([
+            'owner_ref' => $this->user->public_id,
+            'session_id' => $session->id,
+            'user_ref' => $this->user->public_id,
+            'display_name' => $this->user->name,
+            'role' => 'host',
+            'status' => 'joined',
+            'joined_at' => now(),
+        ]);
+
+        $this->withSession(["meet.participant.{$session->uuid}" => $participant->uuid])
+            ->getJson('/room/'.$session->uuid.'/poll')
+            ->assertOk()
+            ->assertJson([
+                'uses_stage_layout' => true,
+                'stage_layout' => 'plenary',
+                'panel_discussions' => true,
+            ]);
+    }
+
+    public function test_regular_meeting_rejects_stage_update(): void
+    {
+        $room = $this->createRoom();
+        $session = Session::create([
+            'owner_ref' => $this->user->public_id,
+            'room_id' => $room->id,
+            'media_room_name' => 'meet-'.$room->uuid,
+            'status' => 'live',
+            'started_at' => now(),
+        ]);
+
+        $participant = \App\Models\Participant::create([
+            'owner_ref' => $this->user->public_id,
+            'session_id' => $session->id,
+            'user_ref' => $this->user->public_id,
+            'display_name' => $this->user->name,
+            'role' => 'host',
+            'status' => 'joined',
+            'joined_at' => now(),
+        ]);
+
+        $this->actingAs($this->user)
+            ->withSession(["meet.participant.{$session->uuid}" => $participant->uuid])
+            ->postJson('/room/'.$session->uuid.'/stage', [
+                'stage_layout' => 'panel',
+            ])
+            ->assertStatus(422);
+    }
+
     public function test_host_can_create_space_room(): void
     {
         $this->actingAs($this->user)