From e596ab2f632a015071d1c747b69d932629fddd66 Mon Sep 17 00:00:00 2001
From: mohi-devhub <mohith.cvv230152@cvv.ac.in>
Date: Tue, 29 Sep 2026 14:27:32 +0530
Subject: [PATCH] fix(focus-group): polish session collaboration UI

---
 src/app/plugins/locales/en.json               |   6 +
 src/app/plugins/locales/es.json               |   6 +
 .../components/session/BreakoutRoomsBar.vue   |   2 +-
 .../components/session/ParticipantList.vue    |   2 +-
 .../components/session/SessionVideoStage.vue  | 176 +++++++++-
 .../composables/useFocusGroupSession.js       |  11 +-
 .../FocusGroup/composables/useSpeakingTime.js |  10 +-
 .../FocusGroup/views/FocusGroupAnswerView.vue |  59 ++--
 .../views/FocusGroupSessionView.vue           | 306 ++++++++++++++----
 9 files changed, 473 insertions(+), 105 deletions(-)

diff --git a/src/app/plugins/locales/en.json b/src/app/plugins/locales/en.json
index 9563957c8..54bf203de 100644
--- a/src/app/plugins/locales/en.json
+++ b/src/app/plugins/locales/en.json
@@ -2507,6 +2507,9 @@
       "cameraOff": "Camera is off",
       "yourVideo": "Your video",
       "yourPreview": "Your preview",
+      "previousPage": "Previous participants",
+      "nextPage": "Next participants",
+      "pageRange": "{start}–{end} of {total}",
       "observatorMode": "Observer Mode",
       "waitingForModeratorToStartSession": "Waiting for moderator to start the session...",
       "observeAllFeedsNotice": "You will be able to observe all video feeds without sending your own.",
@@ -2902,6 +2905,7 @@
       "asked": "Asked",
       "currentQuestion": "Current question",
       "clearQuestion": "Clear question",
+      "stopShowingQuestion": "Stop showing question",
       "guide": "Guide",
       "notes": "Notes",
       "startTimer": "Start timer",
@@ -2920,6 +2924,8 @@
       "nicknameLabel": "Nickname",
       "continueToSession": "Continue to session",
       "observerModeHint": "Observer mode — you're following the discussion without taking part.",
+      "observersWatching": "Observers watching: {count}",
+      "respondedInTopic": "Has sent a chat message in this topic",
       "notAMemberTitle": "You're not part of this session",
       "notAMemberHint": "This session is running for a specific group of people, and your account isn't on its list. Check with the facilitator if you think this is a mistake.",
       "sessionInfo": "Session",
diff --git a/src/app/plugins/locales/es.json b/src/app/plugins/locales/es.json
index 7ca57647e..5024bf3f1 100644
--- a/src/app/plugins/locales/es.json
+++ b/src/app/plugins/locales/es.json
@@ -2424,6 +2424,9 @@
       "cameraOff": "La camara esta apagada",
       "yourVideo": "Tu video",
       "yourPreview": "Tu vista previa",
+      "previousPage": "Participantes anteriores",
+      "nextPage": "Participantes siguientes",
+      "pageRange": "{start}–{end} de {total}",
       "observatorMode": "Modo observador",
       "waitingForModeratorToStartSession": "Esperando a que el moderador inicie la sesion...",
       "observeAllFeedsNotice": "Podras observar todas las transmisiones de video sin enviar la tuya.",
@@ -2810,6 +2813,7 @@
       "asked": "Preguntada",
       "currentQuestion": "Pregunta actual",
       "clearQuestion": "Quitar pregunta",
+      "stopShowingQuestion": "Dejar de mostrar la pregunta",
       "guide": "Guía",
       "notes": "Notas",
       "startTimer": "Iniciar temporizador",
@@ -2828,6 +2832,8 @@
       "nicknameLabel": "Apodo",
       "continueToSession": "Continuar a la sesión",
       "observerModeHint": "Modo observador: sigues la discusión sin participar.",
+      "observersWatching": "Observadores viendo: {count}",
+      "respondedInTopic": "Ha enviado un mensaje en este tema",
       "notAMemberTitle": "No formas parte de esta sesión",
       "notAMemberHint": "Esta sesión se está ejecutando para un grupo específico de personas y tu cuenta no está en su lista. Consulta con el facilitador si crees que es un error.",
       "sessionInfo": "Sesión",
diff --git a/src/ux/FocusGroup/components/session/BreakoutRoomsBar.vue b/src/ux/FocusGroup/components/session/BreakoutRoomsBar.vue
index 200ca320c..df6e7173e 100644
--- a/src/ux/FocusGroup/components/session/BreakoutRoomsBar.vue
+++ b/src/ux/FocusGroup/components/session/BreakoutRoomsBar.vue
@@ -20,7 +20,7 @@
         @click="emit('visit', groupId)"
       >
         <v-icon
-          v-if="group.help"
+          v-if="group.help && visitingGroupId !== groupId"
           start
           size="16"
           class="fg-rooms-bar__help-icon"
diff --git a/src/ux/FocusGroup/components/session/ParticipantList.vue b/src/ux/FocusGroup/components/session/ParticipantList.vue
index 2cdf85d96..ae584924a 100644
--- a/src/ux/FocusGroup/components/session/ParticipantList.vue
+++ b/src/ux/FocusGroup/components/session/ParticipantList.vue
@@ -39,7 +39,7 @@
             v-if="respondedIds.includes(entry.id)"
             color="success"
             size="16"
-            :title="t('focusGroup.session.discussion')"
+            :title="t('focusGroup.session.respondedInTopic')"
           >
             mdi-message-text
           </v-icon>
diff --git a/src/ux/FocusGroup/components/session/SessionVideoStage.vue b/src/ux/FocusGroup/components/session/SessionVideoStage.vue
index 55df99389..776f7eeeb 100644
--- a/src/ux/FocusGroup/components/session/SessionVideoStage.vue
+++ b/src/ux/FocusGroup/components/session/SessionVideoStage.vue
@@ -11,6 +11,11 @@
       {{ connectionError }}
     </v-alert>
 
+    <div v-if="observerCount" class="fg-observer-indicator">
+      <v-icon size="16">mdi-eye-outline</v-icon>
+      <span>{{ t('focusGroup.session.observersWatching', { count: observerCount }) }}</span>
+    </div>
+
     <div class="video-stage">
       <!-- Spotlight: focused participant or shared screen (click to release) -->
       <div v-if="isFocusMode" class="spotlight-primary">
@@ -59,7 +64,7 @@
         :style="gridStyleVars"
       >
         <div
-          v-for="tile in isFocusMode ? otherTiles : tiles"
+          v-for="tile in visibleGridTiles"
           :key="tile.id"
           class="video-wrapper tile-clickable"
           @click="focusTile(tile.id)"
@@ -105,13 +110,48 @@
           <span>{{ t('videoCall.session.waitingForParticipants') }}</span>
         </div>
       </div>
+
+      <div
+        v-if="pageCount > 1"
+        class="fg-video-pagination"
+        style="position: absolute; right: 20px; bottom: 20px; z-index: 1000; isolation: isolate; color: #052b47; background: #fff; opacity: 1; filter: none;"
+      >
+        <span>
+          {{
+            t('videoCall.session.pageRange', {
+              start: pageStart + 1,
+              end: pageEnd,
+              total: orderedTiles.length,
+            })
+          }}
+        </span>
+        <v-btn
+          icon="mdi-chevron-left"
+          size="x-small"
+          variant="outlined"
+          style="color: #052b47; background-color: #e6f0f8;"
+          :aria-label="t('videoCall.session.previousPage')"
+          :disabled="page === 0"
+          @click="page -= 1"
+        />
+        <v-btn
+          icon="mdi-chevron-right"
+          size="x-small"
+          variant="outlined"
+          style="color: #052b47; background-color: #e6f0f8;"
+          :aria-label="t('videoCall.session.nextPage')"
+          :disabled="page >= pageCount - 1"
+          @click="page += 1"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { isObserverAccessLevel } from '@/shared/utils/accessLevel'
 import { useVideoFocus } from '@/shared/components/videoCall/composables/useVideoFocus'
 
 const { t } = useI18n()
@@ -124,12 +164,25 @@ const props = defineProps({
   // FG presence map (identity -> { role }), used for tile role labels because
   // the facilitator is the testAdmin and so is absent from cooperators.
   presenceRoles: { type: Object, default: () => ({}) },
+  recentSpeakerIds: { type: Array, default: () => [] },
+  pageSize: { type: Number, default: 4 },
   setLocalVideo: { type: Function, required: true },
   setRemoteVideo: { type: Function, required: true },
   setScreenVideo: { type: Function, required: true },
 })
 
 const roleFor = (identity) => props.presenceRoles?.[identity]?.role ?? ''
+const isObserver = (identity) =>
+  isObserverAccessLevel(props.presenceRoles?.[identity]?.accessLevel)
+
+const observerCount = computed(
+  () =>
+    Object.values(props.presenceRoles).filter(
+      (presence) =>
+        presence?.connected === true &&
+        isObserverAccessLevel(presence?.accessLevel),
+    ).length,
+)
 
 // Unified tile list: local camera, remote cameras, then screen shares.
 // Mirrors the moderated VideoCallLiveKit tile model.
@@ -141,6 +194,7 @@ const tiles = computed(() => {
       id: 'local-camera',
       type: 'camera',
       kind: 'local',
+      identity: props.localState.identity,
       label: `${t('videoCall.session.yourVideo')} (${props.localState.name})`,
       hasCamera: props.localState.isCameraEnabled,
       hasMicrophone: props.localState.isMicrophoneEnabled,
@@ -149,6 +203,10 @@ const tiles = computed(() => {
   }
 
   props.remoteParticipants.forEach((participant) => {
+    // Observers are present and visible in the roster, but have no camera or
+    // microphone controls. Showing a permanently muted/off video tile is
+    // confusing, so represent them with the observer indicator above instead.
+    if (isObserver(participant.identity)) return
     const role = roleFor(participant.identity)
     list.push({
       id: `camera:${participant.identity}`,
@@ -172,30 +230,68 @@ const tiles = computed(() => {
     })
   })
 
-  return list
+  const speakerOrder = new Map(
+    props.recentSpeakerIds.map((identity, index) => [identity, index]),
+  )
+  return list.sort((a, b) => {
+    if (a.type === 'screen' || b.type === 'screen') {
+      return a.type === b.type ? 0 : a.type === 'screen' ? -1 : 1
+    }
+    return (
+      (speakerOrder.get(a.identity) ?? Number.MAX_SAFE_INTEGER) -
+      (speakerOrder.get(b.identity) ?? Number.MAX_SAFE_INTEGER)
+    )
+  })
 })
 
-// Spotlight/filmstrip behaviour, shared with the moderated call: click a tile to
-// enlarge it; a new screen share auto-grabs the spotlight (stimulus presentation).
-const { focusedTile, otherTiles, isFocusMode, focusTile, clearFocus } =
-  useVideoFocus(tiles)
+const { focusedTile, isFocusMode, focusTile, clearFocus } = useVideoFocus(tiles)
+
+// Four camera tiles at a time keeps each person legible. Recent speakers are
+// ordered first, and the arrows let the group view everyone else.
+const page = ref(0)
+const pageSize = computed(() => Math.max(1, props.pageSize))
+const orderedTiles = computed(() => tiles.value)
+const pageCount = computed(() =>
+  Math.ceil(orderedTiles.value.length / pageSize.value),
+)
+const pageStart = computed(() => page.value * pageSize.value)
+const pageEnd = computed(() =>
+  Math.min(pageStart.value + pageSize.value, orderedTiles.value.length),
+)
+const pageTiles = computed(() =>
+  orderedTiles.value.slice(pageStart.value, pageEnd.value),
+)
+const visibleGridTiles = computed(() =>
+  isFocusMode.value
+    ? pageTiles.value.filter((tile) => tile.id !== focusedTile.value?.id)
+    : pageTiles.value,
+)
+
+watch(pageCount, (count) => {
+  if (page.value >= count) page.value = Math.max(0, count - 1)
+})
+watch(
+  () => props.screenShareFeeds.length,
+  () => {
+    page.value = 0
+  },
+)
 
 const showWaiting = computed(
   () =>
     !isFocusMode.value &&
-    props.remoteParticipants.length === 0 &&
+    tiles.value.filter((tile) => tile.type === 'camera').length === 0 &&
     props.screenShareFeeds.length === 0,
 )
 
 // Grid columns scale with the number of camera tiles (local + remotes).
 const cameraCount = computed(
-  () =>
-    (props.localState.isObservator ? 0 : 1) + props.remoteParticipants.length,
+  () => visibleGridTiles.value.filter((tile) => tile.type === 'camera').length,
 )
 
 const gridStyleVars = computed(() => {
   const count = cameraCount.value
-  const cols = count <= 1 ? 1 : count <= 4 ? 2 : count <= 9 ? 3 : 4
+  const cols = count <= 1 ? 1 : 2
   return { '--grid-cols': cols }
 })
 
@@ -221,6 +317,7 @@ function attachTileRef(tile, el) {
      of participants) rather than being capped to a fixed height. -->
 <style scoped>
 .fg-video-stage {
+  position: relative;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -252,6 +349,63 @@ function attachTileRef(tile, el) {
   align-items: stretch;
 }
 
+.fg-video-stage .videos-grid {
+  gap: 12px;
+  padding: 12px !important;
+}
+
+.fg-observer-indicator {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+  align-self: flex-start;
+  padding: 5px 10px;
+  margin: 8px 12px 0;
+  border-radius: 999px;
+  color: rgba(var(--v-theme-on-surface), 0.72);
+  background: rgba(var(--v-theme-on-surface), 0.06);
+  font-size: 0.78rem;
+}
+
+.fg-video-pagination {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+  z-index: 1000;
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px 4px 12px;
+  border: 1px solid rgba(5, 43, 71, 0.2);
+  border-radius: 999px;
+  color: #052b47 !important;
+  background: #fff !important;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
+  font-size: 0.78rem;
+}
+
+.fg-video-pagination :deep(.v-btn) {
+  color: #052b47 !important;
+  background: #e6f0f8 !important;
+}
+
+.fg-video-pagination :deep(.v-btn:disabled) {
+  color: #6c7f8f !important;
+  background: #f1f4f6 !important;
+  opacity: 1;
+}
+
+.fg-video-pagination :deep(.v-btn .v-icon) {
+  color: #052b47 !important;
+}
+
+.fg-video-stage :deep(.videos-grid .video-container) {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
 .fg-video-stage .videos-grid:not(.videos-single) .video-container {
   width: 100%;
   height: 100%;
diff --git a/src/ux/FocusGroup/composables/useFocusGroupSession.js b/src/ux/FocusGroup/composables/useFocusGroupSession.js
index 2292a8255..826882dd9 100644
--- a/src/ux/FocusGroup/composables/useFocusGroupSession.js
+++ b/src/ux/FocusGroup/composables/useFocusGroupSession.js
@@ -175,9 +175,17 @@ export function useFocusGroupSession(roomId) {
       role: role ?? '',
       accessLevel: accessLevel ?? null,
       connected: true,
+      breakoutGroupId: null,
       joinedAt: serverTimestamp(),
     })
-    onDisconnect(presenceRef).update({ connected: false })
+    onDisconnect(presenceRef).update({ connected: false, breakoutGroupId: null })
+  }
+
+  /** Share which breakout room a staff member is currently visiting. */
+  async function setPresenceBreakoutGroup({ userId, groupId }) {
+    if (!userId) return
+    const presenceRef = dbRef(database, `${rootPath}/participants/${userId}`)
+    await update(presenceRef, { breakoutGroupId: groupId ?? null })
   }
 
   async function leavePresence(userId) {
@@ -420,6 +428,7 @@ export function useFocusGroupSession(roomId) {
     goToTopic,
     endSession,
     joinPresence,
+    setPresenceBreakoutGroup,
     leavePresence,
     recordConsent,
     askPrompt,
diff --git a/src/ux/FocusGroup/composables/useSpeakingTime.js b/src/ux/FocusGroup/composables/useSpeakingTime.js
index 220d79647..0126813a0 100644
--- a/src/ux/FocusGroup/composables/useSpeakingTime.js
+++ b/src/ux/FocusGroup/composables/useSpeakingTime.js
@@ -14,14 +14,20 @@ import { applyActiveSpeakersChange } from '@/ux/FocusGroup/utils/speakingTime'
  */
 export function useSpeakingTime(roomRef) {
   const speakingMs = ref({})
+  const recentSpeakerIds = ref([])
   let activeSince = {}
   let attachedRoom = null
 
   function handleActiveSpeakersChanged(speakers) {
+    const activeIds = speakers.map((participant) => participant.identity)
+    recentSpeakerIds.value = [
+      ...activeIds,
+      ...recentSpeakerIds.value.filter((id) => !activeIds.includes(id)),
+    ]
     const result = applyActiveSpeakersChange({
       accumulatedMs: speakingMs.value,
       activeSince,
-      speakingIdentities: speakers.map((participant) => participant.identity),
+      speakingIdentities: activeIds,
       now: Date.now(),
     })
     speakingMs.value = result.accumulatedMs
@@ -52,5 +58,5 @@ export function useSpeakingTime(roomRef) {
 
   onBeforeUnmount(detach)
 
-  return { speakingMs }
+  return { speakingMs, recentSpeakerIds }
 }
diff --git a/src/ux/FocusGroup/views/FocusGroupAnswerView.vue b/src/ux/FocusGroup/views/FocusGroupAnswerView.vue
index 28c035d6f..1d2d07594 100644
--- a/src/ux/FocusGroup/views/FocusGroupAnswerView.vue
+++ b/src/ux/FocusGroup/views/FocusGroupAnswerView.vue
@@ -59,28 +59,33 @@
         </div>
 
         <template v-if="selectedSession">
-          <v-card
-            v-for="topic in topics"
-            :key="topic.id"
-            variant="outlined"
-            rounded="lg"
+          <v-expansion-panels
+            v-model="expandedTopicIds"
+            multiple
+            variant="accordion"
             class="mb-4"
           >
-            <v-card-title class="d-flex align-center ga-2">
-              <v-icon icon="mdi-forum-outline" color="primary" size="20" />
-              <span>{{ topic.title || $t('focusGroup.modules.untitledTopic') }}</span>
-              <v-spacer />
-              <v-chip size="small" variant="tonal">
-                {{
-                  topicMessageGroups(topic.id).reduce(
-                    (sum, group) => sum + group.messages.length,
-                    0,
-                  )
-                }}
-              </v-chip>
-            </v-card-title>
-            <v-divider />
-            <v-card-text>
+            <v-expansion-panel
+              v-for="topic in topics"
+              :key="topic.id"
+              :value="topic.id"
+              rounded="lg"
+              class="mb-3"
+            >
+              <v-expansion-panel-title class="py-3">
+                <v-icon icon="mdi-forum-outline" color="primary" size="20" class="me-2" />
+                <span>{{ topic.title || $t('focusGroup.modules.untitledTopic') }}</span>
+                <v-spacer />
+                <v-chip size="small" variant="tonal" class="me-3">
+                  {{
+                    topicMessageGroups(topic.id).reduce(
+                      (sum, group) => sum + group.messages.length,
+                      0,
+                    )
+                  }}
+                </v-chip>
+              </v-expansion-panel-title>
+              <v-expansion-panel-text>
               <div
                 v-for="group in topicMessageGroups(topic.id)"
                 :key="group.promptText || 'open-discussion'"
@@ -151,8 +156,9 @@
               >
                 {{ $t('focusGroup.session.noMessagesYet') }}
               </p>
-            </v-card-text>
-          </v-card>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
 
           <v-card
             v-if="selectedSession"
@@ -344,6 +350,7 @@ const rawSessions = ref({})
 const themes = ref([])
 const loading = ref(true)
 const selectedSessionId = ref(null)
+const expandedTopicIds = ref([])
 let themesLoaded = false
 
 const sessions = computed(() => sortSessionsByStartedAt(rawSessions.value))
@@ -354,6 +361,14 @@ const topics = computed(() =>
   Array.isArray(test.value?.discussionGuide) ? test.value.discussionGuide : [],
 )
 
+watch(
+  [selectedSessionId, topics],
+  () => {
+    expandedTopicIds.value = topics.value.slice(0, 1).map((topic) => topic.id)
+  },
+  { immediate: true },
+)
+
 const participantCount = (session) =>
   Object.keys(session.participants ?? {}).length
 
diff --git a/src/ux/FocusGroup/views/FocusGroupSessionView.vue b/src/ux/FocusGroup/views/FocusGroupSessionView.vue
index 5eff4ab7a..57ae44155 100644
--- a/src/ux/FocusGroup/views/FocusGroupSessionView.vue
+++ b/src/ux/FocusGroup/views/FocusGroupSessionView.vue
@@ -127,6 +127,45 @@
           </template>
         </span>
       </div>
+      <div v-if="isInBreakout" class="fg-topbar-breakout">
+        <v-chip
+          size="small"
+          color="primary"
+          variant="tonal"
+          prepend-icon="mdi-call-split"
+          class="fg-topbar-breakout-group"
+        >
+          {{
+            t('focusGroup.session.breakoutInGroup', {
+              name: myBreakoutGroupName,
+            })
+          }}
+        </v-chip>
+        <v-btn
+          v-if="!isFacilitatorPresentInMyGroup"
+          size="small"
+          variant="tonal"
+          :color="myGroupHelpPending ? 'success' : 'error'"
+          :prepend-icon="myGroupHelpPending ? 'mdi-check' : 'mdi-hand-back-left'"
+          class="text-none"
+          :disabled="myGroupHelpPending"
+          @click="onCallFacilitator"
+        >
+          {{
+            myGroupHelpPending
+              ? t('focusGroup.session.breakoutHelpSent')
+              : t('focusGroup.session.breakoutCallFacilitator')
+          }}
+        </v-btn>
+      </div>
+      <div
+        v-if="isInBreakout && breakout?.broadcast?.text"
+        class="fg-topbar-broadcast"
+        :title="breakout.broadcast.text"
+      >
+        <v-icon size="16">mdi-bullhorn-outline</v-icon>
+        <span>{{ breakout.broadcast.text }}</span>
+      </div>
       <v-spacer />
       <v-btn
         v-if="isFacilitator && status === 'live' && !focusGroupStartedAt"
@@ -139,21 +178,33 @@
       >
         {{ t('focusGroup.session.startFocusGroup') }}
       </v-btn>
-      <SessionTimer
-        v-if="currentTopic && timerFallbackMs > 0"
-        :timer="timerForTopic"
-        :fallback-ms="timerFallbackMs"
-        :is-facilitator="isFacilitator"
-        class="me-1"
-        @play="onTimerPlay"
-        @pause="onTimerPause"
-        @reset="onTimerReset"
-      />
-      <div v-if="focusGroupStartedAt" class="fg-session-elapsed me-2">
-        <v-icon size="16">mdi-clock-time-four-outline</v-icon>
-        <span>{{ t('focusGroup.session.elapsed') }}</span>
-        <span>{{ elapsedSessionDisplay }}</span>
+      <div class="fg-topbar-time">
+        <SessionTimer
+          v-if="currentTopic && timerFallbackMs > 0"
+          :timer="timerForTopic"
+          :fallback-ms="timerFallbackMs"
+          :is-facilitator="isFacilitator"
+          @play="onTimerPlay"
+          @pause="onTimerPause"
+          @reset="onTimerReset"
+        />
+        <div v-if="focusGroupStartedAt" class="fg-session-elapsed">
+          <v-icon size="16">mdi-clock-time-four-outline</v-icon>
+          <span>{{ t('focusGroup.session.elapsed') }}</span>
+          <span>{{ elapsedSessionDisplay }}</span>
+        </div>
       </div>
+      <v-btn
+        v-if="isFacilitator && activePromptText"
+        size="small"
+        variant="tonal"
+        prepend-icon="mdi-eye-off-outline"
+        class="text-none me-2"
+        :title="t('focusGroup.session.stopShowingQuestion')"
+        @click="onClearPrompt"
+      >
+        {{ t('focusGroup.session.stopShowingQuestion') }}
+      </v-btn>
       <v-chip
         :color="roleColor"
         variant="tonal"
@@ -183,41 +234,6 @@
             @return-to-main="onReturnToMain"
           />
 
-          <div
-            v-if="isInBreakout"
-            class="fg-observer-strip d-flex align-center"
-          >
-            <v-icon size="16" class="me-1">mdi-call-split</v-icon>
-            <span class="flex-grow-1">
-              {{
-                t('focusGroup.session.breakoutInGroup', {
-                  name: myBreakoutGroupName,
-                })
-              }}
-            </span>
-            <v-btn
-              size="x-small"
-              variant="tonal"
-              :color="myGroupHelpPending ? 'success' : 'error'"
-              :prepend-icon="
-                myGroupHelpPending ? 'mdi-check' : 'mdi-hand-back-left'
-              "
-              class="text-none ms-2"
-              :disabled="myGroupHelpPending"
-              @click="onCallFacilitator"
-            >
-              {{
-                myGroupHelpPending
-                  ? t('focusGroup.session.breakoutHelpSent')
-                  : t('focusGroup.session.breakoutCallFacilitator')
-              }}
-            </v-btn>
-          </div>
-          <div v-if="isInBreakout && breakout?.broadcast?.text" class="fg-observer-strip">
-            <v-icon size="16" class="me-1">mdi-bullhorn-outline</v-icon>
-            {{ breakout.broadcast.text }}
-          </div>
-
           <CurrentQuestion
             v-if="!focusGroupStartedAt || stageMode === 'stimulus'"
             :text="activePromptText"
@@ -227,7 +243,7 @@
 
           <div class="fg-stage-body">
             <div
-              v-if="focusGroupStartedAt && stageMode !== 'stimulus'"
+              v-if="focusGroupStartedAt && activePromptText && stageMode !== 'stimulus' && !screenShareFeeds.length"
               class="fg-presentation-layout"
               :class="{ 'fg-presentation-layout--video': videoEnabled }"
             >
@@ -269,6 +285,8 @@
                 :local-state="localVideoState"
                 :connection-error="connectionError"
                 :presence-roles="participants"
+                :recent-speaker-ids="recentSpeakerIds"
+                :page-size="3"
                 :set-local-video="setLocalVideo"
                 :set-remote-video="setRemoteVideoElement"
                 :set-screen-video="setScreenShareVideoElement"
@@ -289,6 +307,7 @@
               :local-state="localVideoState"
               :connection-error="connectionError"
               :presence-roles="participants"
+              :recent-speaker-ids="recentSpeakerIds"
               :set-local-video="setLocalVideo"
               :set-remote-video="setRemoteVideoElement"
               :set-screen-video="setScreenShareVideoElement"
@@ -464,19 +483,16 @@
               <template #activator="{ props: tip }">
                 <v-btn
                   v-bind="tip"
-                  class="fg-round"
+                  class="fg-round fg-participants-button"
                   :class="{
                     'fg-round-active': showPanel && panelTab === 'people',
                   }"
                   @click="togglePanelTab('people')"
                 >
-                  <v-badge
-                    :content="connectedCount"
-                    :model-value="connectedCount > 0"
-                    color="success"
-                  >
-                    <v-icon>mdi-account-group</v-icon>
-                  </v-badge>
+                  <v-icon>mdi-account-group</v-icon>
+                  <span v-if="connectedCount > 0" class="fg-participants-count">
+                    {{ connectedCount }}
+                  </span>
                 </v-btn>
               </template>
             </v-tooltip>
@@ -695,7 +711,7 @@ import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
 import { Track } from 'livekit-client'
-import { ACCESS_LEVEL } from '@/shared/utils/accessLevel'
+import { ACCESS_LEVEL, normalizeAccessLevel } from '@/shared/utils/accessLevel'
 import { useLiveKitRoom } from '@/shared/components/videoCall/composables/useLiveKitRoom'
 import { useFocusGroupSession } from '@/ux/FocusGroup/composables/useFocusGroupSession'
 import { useSpeakingTime } from '@/ux/FocusGroup/composables/useSpeakingTime'
@@ -783,6 +799,7 @@ const {
   goToTopic,
   endSession,
   joinPresence,
+  setPresenceBreakoutGroup,
   leavePresence,
   recordConsent,
   askPrompt,
@@ -1120,6 +1137,7 @@ const videoEnabled = computed(
 // the same way a screen share would — everyone should be looking at the same
 // thing. Camera tiles simply hide while a stimulus is up (no PiP yet).
 const stageMode = computed(() => {
+  if (screenShareFeeds.value.length) return 'video'
   if (resolvedStimulus.value) return 'stimulus'
   if (videoEnabled.value) return 'video'
   return 'discussion'
@@ -1137,6 +1155,27 @@ const myBreakoutGroupId = computed(() => {
   )
   return entry?.[0] ?? null
 })
+const isFacilitatorPresentInMyGroup = computed(() => {
+  const isFacilitatorPresence = (presence) =>
+    normalizeAccessLevel(presence?.accessLevel) === ACCESS_LEVEL.ADMIN ||
+    presence?.role === t('focusGroup.session.roleFacilitator') ||
+    String(presence?.role ?? '').toUpperCase() === 'FACILITATOR'
+
+  const inSharedPresence = Object.values(participants.value || {}).some(
+    (presence) =>
+      presence?.connected === true &&
+      presence?.breakoutGroupId === myBreakoutGroupId.value &&
+      isFacilitatorPresence(presence),
+  )
+  if (inSharedPresence) return true
+
+  // The LiveKit room itself is a second source of truth. It covers clients
+  // whose presence update is delayed or stale while the facilitator is
+  // already connected to this breakout room.
+  return remoteParticipants.value.some((participant) =>
+    isFacilitatorPresence(participants.value?.[participant.identity]),
+  )
+})
 
 // Staff (facilitator/observer) can drop into any breakout group's room to
 // check in on it; this holds the group they're currently visiting, null when
@@ -1148,7 +1187,12 @@ const visitingGroupId = ref(null)
 watch(
   () => breakout.value?.active,
   (active) => {
-    if (!active) visitingGroupId.value = null
+    if (!active) {
+      visitingGroupId.value = null
+      if (isFacilitator.value) {
+        setPresenceBreakoutGroup({ userId: user.value?.id, groupId: null })
+      }
+    }
   },
 )
 
@@ -1264,9 +1308,10 @@ const {
 // Accumulated LiveKit active-speaker time per identity, feeding the
 // facilitator-only participation indicator alongside message counts — see
 // participationByUser below.
-const { speakingMs } = useSpeakingTime(callRoom)
+const { speakingMs, recentSpeakerIds } = useSpeakingTime(callRoom)
 
 const localVideoState = computed(() => ({
+  identity: user.value?.id ?? '',
   name: sessionNickname.value,
   isObservator: isCallObservator.value,
   isCameraEnabled: isCameraEnabled.value,
@@ -1379,7 +1424,12 @@ const participationByUser = computed(() =>
 // they don't work in groups).
 const eligibleBreakoutParticipants = computed(() =>
   Object.entries(participants.value || {})
-    .filter(([, p]) => p?.role === t('focusGroup.session.roleParticipant'))
+    .filter(
+      ([, p]) =>
+        p?.connected === true &&
+        (p?.accessLevel === ACCESS_LEVEL.EVALUATOR ||
+          p?.role === t('focusGroup.session.roleParticipant')),
+    )
     .map(([id, p]) => ({ id, name: p?.name || '' })),
 )
 // Backs the quick-start menu on the control bar, a shortcut for starting a
@@ -1401,6 +1451,7 @@ const myBreakoutGroupName = computed(
 )
 
 const onStartBreakout = (groupCount) => {
+  if (!canStartBreakout.value) return
   const groups = splitIntoGroups(
     eligibleBreakoutParticipants.value.map((p) => p.id),
     groupCount,
@@ -1435,14 +1486,24 @@ const isStaff = computed(() => isFacilitator.value || isObserver.value)
 
 // A staff member drops into a group's room; the facilitator answering a call
 // also clears that group's raised hand in the same action.
-const onVisitGroup = (groupId) => {
+const onVisitGroup = async (groupId) => {
   visitingGroupId.value = groupId
-  if (isFacilitator.value && breakout.value?.groups?.[groupId]?.help) {
-    setBreakoutHelp({ groupId, help: null })
+  if (isFacilitator.value) {
+    if (breakout.value?.groups?.[groupId]?.help) {
+      await setBreakoutHelp({ groupId, help: null })
+    }
+    await setPresenceBreakoutGroup({ userId: user.value?.id, groupId })
   }
 }
-const onReturnToMain = () => {
+const onReturnToMain = async () => {
+  const previousGroupId = visitingGroupId.value
   visitingGroupId.value = null
+  if (isFacilitator.value) {
+    if (previousGroupId && breakout.value?.groups?.[previousGroupId]?.help) {
+      await setBreakoutHelp({ groupId: previousGroupId, help: null })
+    }
+    await setPresenceBreakoutGroup({ userId: user.value?.id, groupId: null })
+  }
 }
 
 // The current participant's own group has a pending call, so the button can
@@ -1450,6 +1511,19 @@ const onReturnToMain = () => {
 const myGroupHelpPending = computed(
   () => !!breakout.value?.groups?.[myBreakoutGroupId.value]?.help,
 )
+watch(
+  [isFacilitatorPresentInMyGroup, myGroupHelpPending],
+  ([facilitatorPresent, helpPending]) => {
+    if (
+      isParticipant.value &&
+      facilitatorPresent &&
+      helpPending &&
+      myBreakoutGroupId.value
+    ) {
+      setBreakoutHelp({ groupId: myBreakoutGroupId.value, help: null })
+    }
+  },
+)
 const onCallFacilitator = () => {
   if (!myBreakoutGroupId.value || myGroupHelpPending.value) return
   setBreakoutHelp({
@@ -1809,10 +1883,56 @@ onMounted(async () => {
 .fg-topbar-title {
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  flex: 0 1 auto;
+  min-width: 120px;
   line-height: 1.25;
 }
 
+.fg-topbar-breakout {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+}
+
+.fg-topbar-breakout-group {
+  max-width: 210px;
+}
+
+.fg-topbar-time {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.fg-topbar-breakout-group :deep(.v-chip__content) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fg-topbar-broadcast {
+  display: flex;
+  flex: 0 1 260px;
+  min-width: 0;
+  align-items: center;
+  gap: 6px;
+  overflow: hidden;
+  padding: 6px 10px;
+  border: 1px solid rgba(13, 59, 94, 0.15);
+  border-radius: 8px;
+  color: #123d61;
+  background: #eaf3fc;
+  font-size: 0.82rem;
+}
+
+.fg-topbar-broadcast span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .fg-topbar-name {
   font-size: 1rem;
   font-weight: 600;
@@ -1872,6 +1992,7 @@ onMounted(async () => {
 }
 
 .fg-stage-area {
+  position: relative;
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
@@ -1976,6 +2097,30 @@ onMounted(async () => {
 }
 
 @media (max-width: 800px) {
+  .fg-topbar {
+    height: auto;
+    min-height: 60px;
+    flex-wrap: wrap;
+    padding: 8px 12px;
+  }
+
+  .fg-topbar-title {
+    flex: 1 1 35%;
+  }
+
+  .fg-topbar-breakout {
+    order: 2;
+  }
+
+  .fg-topbar-broadcast {
+    order: 3;
+    flex-basis: min(100%, 220px);
+  }
+
+  .fg-topbar > .v-spacer {
+    display: none;
+  }
+
   .fg-presentation-layout--video {
     grid-template-columns: minmax(0, 1fr);
     grid-template-rows: minmax(180px, 1fr) minmax(120px, 28%);
@@ -2125,6 +2270,33 @@ onMounted(async () => {
     transform 0.1s ease;
 }
 
+.fg-participants-button {
+  position: relative;
+  flex: 0 0 44px;
+  min-width: 44px !important;
+  max-width: 44px;
+  padding: 0 !important;
+  aspect-ratio: 1;
+}
+
+.fg-participants-count {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  display: grid;
+  min-width: 19px;
+  height: 19px;
+  padding: 0 4px;
+  place-items: center;
+  border: 2px solid rgb(var(--v-theme-primary));
+  border-radius: 999px;
+  color: #052b47;
+  background: #26c45e;
+  font-size: 0.68rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
 .fg-round:hover {
   background: rgba(255, 255, 255, 0.22) !important;
 }