feat(room): поднятие руки и очередь для организатора

Транспорт — существующий аутентифицированный WS чата (api/chat.py), а не отдельный эндпоинт: сервер уже держит это соединение на каждого участника (обоснование — докстринг chat_websocket и useChat.ts). Состояние очереди — Redis (services/hand_queue.py), не Postgres: это эфемерное состояние звонка, а не история, и два процесса uvicorn делают наивную память одного процесса недостаточной. HSETNX даёт идемпотентное «поднять» (повторный клик не переставляет в конец очереди), снапшот шлётся всем участникам при любом изменении — организатор, зашедший позже, сразу видит актуальную картину. Опустить чужую руку может организатор (решение оператора) — проверка через conference.owner_id, не через identity клиента. Участник, вышедший из комнаты LiveKit (webhook participant_left), теряет место в очереди автоматически; переподключение WS чата место не сбрасывает (Redis не привязан к жизни соединения). room_finished чистит очередь целиком — она не должна пережить завершение звонка. Побочный эффект транспортного решения: поднять руку нельзя, если чат выключен настройкой инстанса (WS вообще не открывается) — принятый компромисс ради переиспользования уже готового канала. UI: кнопка «Рука» в тулбаре (у всех, бейдж — общий счётчик), бейдж на плитке говорящего (видно всем), панель «Очередь» организатору (HandQueuePanel). Кнопка «Рука» и панель «Очередь» намеренно НЕ прячутся в мобильную шторку настроек, в отличие от «Вида», — поднятие руки посреди разговора требует кнопки под рукой, а не в два клика вглубь настроек. Этим же коммитом (файлы разделяемые с задачей B2, RoomParticipantTile.tsx/ useChat.ts/RoomStage.tsx/RoomPage.tsx/room.css) — проброс conferenceId и каркас forced_mute-обработки, без которых кнопки принудительного мьюта не скомпилировались бы; сама реализация мьюта — следующим коммитом.
2026-08-01 22:06:43 +03:00
parent 42bfb88a22
commit 8e5eda88a2
14 changed files with 1147 additions and 62 deletions
--- a/frontend/src/components/room/HandQueuePanel.tsx
+++ b/frontend/src/components/room/HandQueuePanel.tsx
@@ -0,0 +1,60 @@
+import { Hand, X } from 'lucide-react'
+import { useIsOrganizer } from '@/hooks/useIsOrganizer'
+import type { HandQueueEntry } from '@/hooks/useChat'
+
+interface HandQueuePanelProps {
+  queue: HandQueueEntry[]
+  onLower: (identity: string) => void
+  onClose: () => void
+}
+
+/**
+ * Панель очереди поднятых рук — видна только организатору (задача B1).
+ * Визуально — тот же боковой контейнер, что и `ChatPanel` (`.chat-panel`,
+ * включая мобильное поведение «во весь экран» на ≤900px), содержимое своё:
+ * упорядоченный список с позицией и кнопкой «Опустить» на каждой строке —
+ * организатору разрешено опускать чужую руку (решение оператора, задача B1).
+ *
+ * `RoomPage` гейтит рендер по `handQueueOpen` (как и `ChatPanel` по
+ * `chatOpen`) — свой `useIsOrganizer()` здесь ДОПОЛНИТЕЛЬНАЯ, а не
+ * единственная защита: `RoomToolbar` уже не показывает кнопку открытия
+ * не-организатору, это подстраховка на случай прямого рендера.
+ */
+export function HandQueuePanel({ queue, onLower, onClose }: HandQueuePanelProps) {
+  const isOrganizer = useIsOrganizer()
+  if (!isOrganizer) return null
+
+  return (
+    <aside className="chat-panel hand-queue-panel">
+      <div className="chat-head">
+        <h2>Поднятые руки</h2>
+        <button type="button" aria-label="Закрыть очередь" onClick={onClose}>
+          <X className="lucide" aria-hidden="true" />
+        </button>
+      </div>
+
+      {queue.length === 0 ? (
+        <p className="chat-empty">Пока никто не поднял руку</p>
+      ) : (
+        <ol className="hand-queue-list">
+          {queue.map((entry, index) => (
+            <li className="hand-queue-item" key={entry.identity}>
+              <span className="hand-queue-position">{index + 1}</span>
+              <span className="hand-queue-name">
+                <Hand className="lucide" aria-hidden="true" />
+                {entry.name}
+              </span>
+              <button
+                type="button"
+                className="hand-queue-lower"
+                onClick={() => onLower(entry.identity)}
+              >
+                Опустить
+              </button>
+            </li>
+          ))}
+        </ol>
+      )}
+    </aside>
+  )
+}
--- a/frontend/src/components/room/RoomParticipantTile.tsx
+++ b/frontend/src/components/room/RoomParticipantTile.tsx
@@ -1,4 +1,4 @@
-import { Pin, PinOff, ScreenShare } from 'lucide-react'
+import { Hand, Mic, Pin, PinOff, ScreenShare, Video } from 'lucide-react'
 import { Track } from 'livekit-client'
 import {
  AudioTrack,
@@ -20,21 +20,79 @@ import {
 } from '@livekit/components-react'
 import { Avatar } from '@/components/ui/Avatar'
 import { stageTrackKey } from '@/components/room/stageFocus'
+import { parseParticipantMetadata } from '@/lib/participantMetadata'
+import { useIsOrganizer } from '@/hooks/useIsOrganizer'
+import { useToast } from '@/components/ui/ToastProvider'
+import { muteParticipant } from '@/api/conferences'

-/** Метаданные участника из LiveKit access-токена (см. `AccessToken.with_metadata` на backend) — JSON `{"avatar_url": "..."}`; у гостей отсутствуют. */
-interface ParticipantMetadata {
-  avatar_url?: string | null
+/** Достаёт URL аватара из метаданных участника — `null`, если поля нет (гость/без аватара). */
+function parseAvatarUrl(metadata: string | undefined): string | null {
+  const parsed = parseParticipantMetadata(metadata)
+  return typeof parsed.avatar_url === 'string' && parsed.avatar_url ? parsed.avatar_url : null
 }

-/** Разбирает `participant.metadata` в URL аватара — `null`, если поля нет, метаданные пусты или невалидны (гость). */
-function parseAvatarUrl(metadata: string | undefined): string | null {
-  if (!metadata) return null
-  try {
-    const parsed = JSON.parse(metadata) as ParticipantMetadata
-    return typeof parsed.avatar_url === 'string' && parsed.avatar_url ? parsed.avatar_url : null
-  } catch {
-    return null
+/**
+ * Кнопки принудительного мьюта организатором (задача B2) — микрофон/камера
+ * ЧУЖОГО участника. Видны только организатору (`useIsOrganizer`, подсказка
+ * UI — сервер перепроверяет права по владельцу конференции в БД) и только на
+ * чужой плитке камеры (на своей — обычный тулбарный toggle, мьютить себя
+ * через «принудительное» действие не нужно).
+ *
+ * Не проверяют текущее состояние мьюта заранее (усложнило бы плитку ради
+ * малополезной оптимизации): клик по уже выключенному треку — не ошибка, а
+ * no-op на backend (`muted: false` в ответе, см. `services/room_control.py`).
+ */
+function OrganizerMuteControls({
+  conferenceId,
+  identity,
+  displayName,
+}: {
+  conferenceId: string
+  identity: string
+  displayName: string
+}) {
+  const toast = useToast()
+
+  async function handleMute(source: 'microphone' | 'camera') {
+    try {
+      const result = await muteParticipant(conferenceId, identity, source)
+      if (!result.muted) {
+        toast.show(
+          source === 'microphone' ? 'Микрофон и так выключен' : 'Камера и так выключена',
+          'info',
+        )
+      }
+    } catch {
+      toast.show('Не удалось выключить трек участника', 'error')
+    }
  }
+
+  return (
+    <div className="room-organizer-controls">
+      <button
+        type="button"
+        title={`Выключить микрофон: ${displayName}`}
+        aria-label={`Выключить микрофон: ${displayName}`}
+        onClick={(e) => {
+          e.stopPropagation()
+          void handleMute('microphone')
+        }}
+      >
+        <Mic aria-hidden="true" />
+      </button>
+      <button
+        type="button"
+        title={`Выключить камеру: ${displayName}`}
+        aria-label={`Выключить камеру: ${displayName}`}
+        onClick={(e) => {
+          e.stopPropagation()
+          void handleMute('camera')
+        }}
+      >
+        <Video aria-hidden="true" />
+      </button>
+    </div>
+  )
 }

 /**
@@ -44,8 +102,15 @@ function parseAvatarUrl(metadata: string | undefined): string | null {
 * разметке (см. `node_modules/@livekit/components-react/src/components/participant/ParticipantTile.tsx`,
 * версия 2.9.23 — источник этой копии).
 */
-function TileBody({ onStopSharing, pinnedKey, onTogglePin }: TileControlsProps) {
+function TileBody({
+  onStopSharing,
+  pinnedKey,
+  onTogglePin,
+  raisedHandIdentities,
+  conferenceId,
+}: TileControlsProps) {
  const trackReference = useEnsureTrackRef()
+  const isOrganizer = useIsOrganizer()
  const isEncrypted = useIsEncrypted(trackReference.participant)
  const autoManageSubscription = useFeatureContext()?.autoSubscription
  // useParticipantInfo — реактивные name/metadata участника (переподписка на
@@ -67,6 +132,18 @@ function TileBody({ onStopSharing, pinnedKey, onTogglePin }: TileControlsProps)
  // рендерятся шаблоном без пропсов, снаружи «какая это плитка» не передать.
  const tileKey = stageTrackKey(trackReference)
  const isPinned = pinnedKey === tileKey
+  // Бейдж поднятой руки (задача B1) — только на плитке КАМЕРЫ участника, не
+  // на плитке его демонстрации экрана (рука — про человека, не про экран).
+  const isHandRaised =
+    trackReference.source === Track.Source.Camera &&
+    Boolean(raisedHandIdentities?.has(trackReference.participant.identity))
+  // Кнопки принудительного мьюта (задача B2) — организатору, только на
+  // чужой плитке камеры (см. докстринг `OrganizerMuteControls`).
+  const showOrganizerMuteControls =
+    isOrganizer &&
+    Boolean(conferenceId) &&
+    trackReference.source === Track.Source.Camera &&
+    !trackReference.participant.isLocal

  return (
    <>
@@ -88,6 +165,11 @@ function TileBody({ onStopSharing, pinnedKey, onTogglePin }: TileControlsProps)
      <div className="lk-participant-placeholder">
        <Avatar name={displayName} avatarUrl={avatarUrl} className="room-tile-avatar" />
      </div>
+      {isHandRaised && (
+        <div className="room-hand-badge" title={`${displayName}: поднята рука`}>
+          <Hand className="lucide" aria-hidden="true" />
+        </div>
+      )}
      <div className="lk-participant-metadata">
        <div className="lk-participant-metadata-item">
          {trackReference.source === Track.Source.Camera ? (
@@ -141,6 +223,13 @@ function TileBody({ onStopSharing, pinnedKey, onTogglePin }: TileControlsProps)
          </button>
        </div>
      )}
+      {showOrganizerMuteControls && conferenceId && (
+        <OrganizerMuteControls
+          conferenceId={conferenceId}
+          identity={trackReference.participant.identity}
+          displayName={displayName}
+        />
+      )}
    </>
  )
 }
@@ -166,6 +255,17 @@ interface TileControlsProps {
   * Не передан — кнопки-булавки на плитке нет (мини-плеер: плитка одна).
   */
  onTogglePin?: (key: string) => void
+  /**
+   * Identity участников с поднятой рукой прямо сейчас (задача B1, из
+   * `useChat().handQueue`) — плитка сама решает, её ли это identity. Не
+   * передан — бейдж нигде не рендерится (мини-плеер).
+   */
+  raisedHandIdentities?: Set<string>
+  /**
+   * Id конференции (не slug/номер) — нужен для вызова эндпоинта мьюта
+   * (задача B2). Не передан — кнопок мьюта на плитке нет (мини-плеер).
+   */
+  conferenceId?: string
 }

 interface RoomParticipantTileProps extends TileControlsProps {
@@ -197,6 +297,8 @@ export function RoomParticipantTile({
  onStopSharing,
  pinnedKey,
  onTogglePin,
+  raisedHandIdentities,
+  conferenceId,
 }: RoomParticipantTileProps) {
  return (
    <ParticipantTile
@@ -204,7 +306,13 @@ export function RoomParticipantTile({
      disableSpeakingIndicator={disableSpeakingIndicator}
      onParticipantClick={onParticipantClick}
    >
-      <TileBody onStopSharing={onStopSharing} pinnedKey={pinnedKey} onTogglePin={onTogglePin} />
+      <TileBody
+        onStopSharing={onStopSharing}
+        pinnedKey={pinnedKey}
+        onTogglePin={onTogglePin}
+        raisedHandIdentities={raisedHandIdentities}
+        conferenceId={conferenceId}
+      />
    </ParticipantTile>
  )
 }
--- a/frontend/src/components/room/RoomStage.tsx
+++ b/frontend/src/components/room/RoomStage.tsx
@@ -204,6 +204,8 @@ export function RoomStage({
  initialFocusKey = null,
  onFocusKeyChange,
  onPinFocus,
+  raisedHandIdentities,
+  conferenceId,
 }: {
  variant?: 'full' | 'pip'
  /** Выбранный пользователем режим показа; игнорируется при `variant="pip"`. */
@@ -226,6 +228,10 @@ export function RoomStage({
   * переключаем (см. докстринг `RoomPage`, обоснование решения в коммите).
   */
  onPinFocus?: () => void
+  /** Identity участников с поднятой рукой (задача B1) — бейдж на плитке; игнорируется при `variant="pip"`. */
+  raisedHandIdentities?: Set<string>
+  /** Id конференции (задача B2) — кнопки принудительного мьюта на чужих плитках; игнорируется при `variant="pip"`. */
+  conferenceId?: string
 }) {
  const room = useRoomContext()
  const isCompact = useIsCompactViewport()
@@ -415,21 +421,23 @@ export function RoomStage({
  const showCarousel = !hideOthers && sideTracks.length > 0
  // Булавка закрепления есть на КАЖДОЙ плитке во всех режимах (задача 3.3):
  // сама кнопка вызывает переключение на `standard`, где закреплённый и
-  // попадёт в фокус (см. `handleTogglePin`/`onPinFocus`).
-  const pinProps = { pinnedKey, onTogglePin: handleTogglePin }
+  // попадёт в фокус (см. `handleTogglePin`/`onPinFocus`). Бейдж поднятой
+  // руки (задача B1) и кнопки принудительного мьюта (задача B2) едут тем же
+  // спредом — тоже нужны на КАЖДОЙ плитке.
+  const tileProps = { pinnedKey, onTogglePin: handleTogglePin, raisedHandIdentities, conferenceId }

  function renderMain(): ReactNode {
    if (effectiveMode === 'tiles') {
      return (
        <StageGrid tracks={tracks}>
-          <RoomParticipantTile {...pinProps} />
+          <RoomParticipantTile {...tileProps} />
        </StageGrid>
      )
    }
    if (effectiveMode === 'live-tiles') {
      return (
        <StageGrid tracks={liveCameraTracks.length > 0 ? liveCameraTracks : cameraTracks}>
-          <RoomParticipantTile {...pinProps} />
+          <RoomParticipantTile {...tileProps} />
        </StageGrid>
      )
    }
@@ -438,7 +446,7 @@ export function RoomStage({
    if (sideTracks.length === 0 && !hideOthers) {
      return (
        <StageGrid tracks={tracks}>
-          <RoomParticipantTile {...pinProps} />
+          <RoomParticipantTile {...tileProps} />
        </StageGrid>
      )
    }
@@ -446,7 +454,7 @@ export function RoomStage({
    // (см. её исходник), поэтому вместо неё используем свою обёртку
    // напрямую с тем же trackRef (аватар в фокус-плитке).
    return (
-      focusTrack && <RoomParticipantTile trackRef={focusTrack} onStopSharing={handleStopSharing} {...pinProps} />
+      focusTrack && <RoomParticipantTile trackRef={focusTrack} onStopSharing={handleStopSharing} {...tileProps} />
    )
  }

@@ -470,7 +478,7 @@ export function RoomStage({
              </button>
            )}
            <CarouselLayout tracks={sideTracks}>
-              <RoomParticipantTile {...pinProps} />
+              <RoomParticipantTile {...tileProps} />
            </CarouselLayout>
          </div>
          {renderMain()}
--- a/frontend/src/components/room/RoomToolbar.tsx
+++ b/frontend/src/components/room/RoomToolbar.tsx
@@ -1,4 +1,6 @@
 import {
+  Hand,
+  ListOrdered,
  LogOut,
  Maximize,
  MessageSquare,
@@ -13,9 +15,11 @@ import {
  VideoOff,
 } from 'lucide-react'
 import { Track, type ScreenShareCaptureOptions } from 'livekit-client'
-import { DisconnectButton, useTrackToggle } from '@livekit/components-react'
+import { DisconnectButton, useLocalParticipant, useTrackToggle } from '@livekit/components-react'
 import { useToast } from '@/components/ui/ToastProvider'
 import { useIsCompactViewport } from '@/hooks/useIsCompactViewport'
+import { useIsOrganizer } from '@/hooks/useIsOrganizer'
+import type { HandQueueEntry } from '@/hooks/useChat'
 import { StageViewMenu, type StageViewProps } from '@/components/room/StageViewOptions'

 /**
@@ -55,18 +59,35 @@ interface RoomToolbarProps extends StageViewProps {
  pipSupported: boolean
  pipActive: boolean
  onTogglePiP: () => void
+  /**
+   * Очередь поднятых рук целиком (задача B1, `useChat().handQueue`) — сама
+   * решает, поднята ли СВОЯ рука (сравнивая с `localParticipant.identity`
+   * через `useLocalParticipant`), и показывает бейдж общего счётчика.
+   */
+  handQueue: HandQueueEntry[]
+  onRaiseHand: () => void
+  onLowerHand: () => void
+  handQueueOpen: boolean
+  onToggleHandQueue: () => void
 }

 /**
- * Нижний тулбар комнаты: микрофон/камера/демонстрация экрана/вид сцены/
- * настройки устройств/полноэкранный режим/мини-плеер/чат/выход — собственные
- * кнопки на хуках LiveKit (useTrackToggle/DisconnectButton) и панели чата,
- * стилизованные по design/mockups/room.html.
+ * Нижний тулбар комнаты: микрофон/камера/демонстрация экрана/рука/очередь
+ * рук/вид сцены/настройки устройств/полноэкранный режим/мини-плеер/чат/выход —
+ * собственные кнопки на хуках LiveKit (useTrackToggle/DisconnectButton) и
+ * панели чата, стилизованные по design/mockups/room.html.
 *
 * Кнопка «Вид» (режимы показа и скрытие остальных) рендерится ТОЛЬКО на
 * широком экране — условным рендерингом, а не скрытием через CSS: тулбар на
- * мобильном и так ужат до пяти кнопок, а те же настройки там доступны секцией
- * «Вид» в шторке настроек (`DeviceSettingsDialog`).
+ * мобильном и так ужат до пяти «безусловных» кнопок (демонстрация/
+ * полноэкранный режим/мини-плеер скрыты на узком экране через CSS, см.
+ * `styles/room.css`), а те же настройки там доступны секцией «Вид» в шторке
+ * настроек (`DeviceSettingsDialog`). «Рука» — сознательное исключение из этой
+ * экономии: поднять руку посреди разговора — действие со временем жизни в
+ * секунды, прятать его в шторку настроек означало бы делать его практически
+ * недоступным с телефона. «Очередь» показывается только организатору —
+ * встречается редко, но по той же причине оставлена в тулбаре, а не в
+ * шторке: организатору с телефона тоже нужно видеть очередь сразу.
 */
 export function RoomToolbar({
  chatVisible,
@@ -80,6 +101,11 @@ export function RoomToolbar({
  pipSupported,
  pipActive,
  onTogglePiP,
+  handQueue,
+  onRaiseHand,
+  onLowerHand,
+  handQueueOpen,
+  onToggleHandQueue,
  layoutMode,
  onLayoutModeChange,
  hideOthers,
@@ -87,6 +113,9 @@ export function RoomToolbar({
 }: RoomToolbarProps) {
  const toast = useToast()
  const isCompact = useIsCompactViewport()
+  const isOrganizer = useIsOrganizer()
+  const { localParticipant } = useLocalParticipant()
+  const handRaised = handQueue.some((entry) => entry.identity === localParticipant.identity)
  const mic = useTrackToggle({ source: Track.Source.Microphone })
  const camera = useTrackToggle({ source: Track.Source.Camera })
  const screenShare = useTrackToggle({
@@ -152,6 +181,40 @@ export function RoomToolbar({
        <span className="label">Демонстрация</span>
      </button>

+      <button
+        type="button"
+        className={`tb-btn${handRaised ? ' is-hand-raised' : ''}`}
+        aria-pressed={handRaised}
+        aria-label={handRaised ? 'Опустить руку' : 'Поднять руку'}
+        onClick={() => (handRaised ? onLowerHand() : onRaiseHand())}
+      >
+        <span className="icon-shell">
+          <Hand className="lucide" aria-hidden="true" />
+          {handQueue.length > 0 && (
+            <span className="badge-count">{handQueue.length > 9 ? '9+' : handQueue.length}</span>
+          )}
+        </span>
+        <span className="label">Рука</span>
+      </button>
+
+      {isOrganizer && (
+        <button
+          type="button"
+          className={`tb-btn${handQueueOpen ? ' is-panel-open' : ''}`}
+          aria-pressed={handQueueOpen}
+          aria-label={handQueueOpen ? 'Свернуть очередь поднятых рук' : 'Открыть очередь поднятых рук'}
+          onClick={onToggleHandQueue}
+        >
+          <span className="icon-shell">
+            <ListOrdered className="lucide" aria-hidden="true" />
+            {handQueue.length > 0 && (
+              <span className="badge-count">{handQueue.length > 9 ? '9+' : handQueue.length}</span>
+            )}
+          </span>
+          <span className="label">Очередь</span>
+        </button>
+      )}
+
      {!isCompact && (
        <StageViewMenu
          layoutMode={layoutMode}
--- a/frontend/src/hooks/useChat.ts
+++ b/frontend/src/hooks/useChat.ts
@@ -24,10 +24,44 @@ export interface ChatMessageOut {
 */
 export type ChatConnectionStatus = 'connecting' | 'open' | 'closed' | 'error'

+/**
+ * Один участник в очереди поднятых рук (задача B1) — 1:1 с pydantic-схемой
+ * `HandQueueEntryOut` backend. `identity` — тот же формат, что и
+ * `Participant.identity` в LiveKit (`str(user_id)` либо `guest:{id}`),
+ * пригоден для прямого сравнения с `localParticipant.identity`/
+ * `participant.identity` на сцене.
+ */
+export interface HandQueueEntry {
+  identity: string
+  name: string
+  raised_at: string
+}
+
+/** Источник трека, принудительно выключенного организатором (задача B2). */
+export type ForcedMuteSource = 'microphone' | 'camera'
+
+/**
+ * Одно событие принудительного мьюта (задача B2) — рассылается ВСЕМ
+ * участникам конференции (канал общий, адресной доставки нет), поэтому
+ * несёт `identity` затронутого: получатель сам решает, про него ли это
+ * (см. `ForcedMuteWatcher` — сравнивает с `localParticipant.identity`).
+ * `nonce` — счётчик хука, растёт на каждое полученное событие: тот же
+ * `source`/`identity` два раза подряд (например, повторный клик
+ * организатора на уже выключенный трек) должен переоткрыть тост, а не
+ * молча схлопнуться в один и тот же объект по `useEffect`-сравнению.
+ */
+export interface ForcedMuteEvent {
+  identity: string
+  source: ForcedMuteSource
+  nonce: number
+}
+
 type IncomingFrame =
  | { type: 'history'; messages: ChatMessageOut[] }
  | { type: 'message'; message: ChatMessageOut }
  | { type: 'error'; code: string }
+  | { type: 'hand_queue'; queue: HandQueueEntry[] }
+  | { type: 'forced_mute'; identity: string; source: ForcedMuteSource }

 interface UseChatOptions {
  /** id конференции — пока не известен (страница ещё не подключилась к LiveKit), WS не открываем. */
@@ -47,6 +81,23 @@ interface UseChatResult {
  unavailable: boolean
  /** Отправить сообщение (1..2000 символов после strip, пустое/слишком длинное — игнорируется). */
  sendMessage: (text: string) => void
+  /**
+   * Очередь поднятых рук, упорядоченная по времени поднятия — сервер
+   * присылает полный снапшот при любом изменении (см. `schemas/room_events.py`
+   * backend), поэтому клиенту не нужно вести собственное состояние очереди.
+   * Пуста, пока WS не открыт/не пришёл первый снапшот.
+   */
+  handQueue: HandQueueEntry[]
+  /** Поднять СВОЮ руку — повторный вызов на уже поднятой руке безвреден (идемпотентно на сервере). */
+  raiseHand: () => void
+  /**
+   * Опустить руку — свою (без аргумента) либо чужую по `identity` (только
+   * организатору, иначе сервер отклонит `{type:"error",code:"forbidden"}`,
+   * см. `statusMessage`).
+   */
+  lowerHand: (identity?: string) => void
+  /** Последнее событие принудительного мьюта (задача B2) — `null` до первого. */
+  lastForcedMute: ForcedMuteEvent | null
 }

 /** Close-коды сервера — см. зафиксированный протокол WS. */
@@ -61,16 +112,30 @@ function buildChatWsUrl(conferenceId: string): string {
 }

 /**
- * WS-клиент чата комнаты конференции. Реализует зафиксированный протокол:
- * connect → `{type:"auth"}` → `{type:"history"}` → далее входящие
- * `{type:"message"}`/`{type:"error"}`.
+ * WS-клиент комнаты конференции (несмотря на имя — не только чат, задача
+ * B1). Реализует зафиксированный протокол: connect → `{type:"auth"}` →
+ * `{type:"history"}` → `{type:"hand_queue"}` → далее входящие
+ * `{type:"message"}`/`{type:"hand_queue"}`/`{type:"error"}`.
 *
- * Optimistic-append собственных сообщений НЕ делается: сервер всегда
+ * Очередь поднятых рук (`raiseHand`/`lowerHand`/`handQueue`) едет по тому же
+ * соединению, что и чат, — переиспользование уже открытого аутентифицированного
+ * WS дешевле отдельного эндпоинта (см. `backend/api/chat.py`). Следствие:
+ * поднять руку нельзя, если чат выключен настройкой инстанса (`enabled=false`,
+ * соединение вообще не открывается) — принятый компромисс, обоснование в
+ * коммите задачи B1.
+ *
+ * Optimistic-append собственных сообщений чата НЕ делается: сервер всегда
 * присылает наше же сообщение обратно echo-фреймом `message` — если
 * добавлять его на клиенте сразу при отправке, оно задублируется в списке.
+ * Очередь рук устроена иначе: сервер шлёт ПОЛНЫЙ снапшот на каждое
+ * изменение, поэтому `raiseHand`/`lowerHand` ничего не трогают в состоянии
+ * сами — ждут снапшот.
 */
 export function useChat({ conferenceId, token, enabled }: UseChatOptions): UseChatResult {
  const [messages, setMessages] = useState<ChatMessageOut[]>([])
+  const [handQueue, setHandQueue] = useState<HandQueueEntry[]>([])
+  const [lastForcedMute, setLastForcedMute] = useState<ForcedMuteEvent | null>(null)
+  const forcedMuteNonceRef = useRef(0)
  // `wsStatus` меняется ТОЛЬКО из колбэков реального WS-соединения (см. ниже) —
  // никогда синхронно в теле эффекта, иначе react-hooks/set-state-in-effect
  // (эффект без активной подписки, только синхронизирующий производное
@@ -106,6 +171,7 @@ export function useChat({ conferenceId, token, enabled }: UseChatOptions): UseCh
    ws.onopen = () => {
      if (stale) return
      setMessages([])
+      setHandQueue([])
      setStatusMessage(null)
      setUnavailable(false)
      setWsStatus('open')
@@ -124,9 +190,19 @@ export function useChat({ conferenceId, token, enabled }: UseChatOptions): UseCh
        setMessages(frame.messages)
      } else if (frame.type === 'message') {
        setMessages((prev) => [...prev, frame.message])
+      } else if (frame.type === 'hand_queue') {
+        setHandQueue(frame.queue)
+      } else if (frame.type === 'forced_mute') {
+        forcedMuteNonceRef.current += 1
+        setLastForcedMute({
+          identity: frame.identity,
+          source: frame.source,
+          nonce: forcedMuteNonceRef.current,
+        })
      } else if (frame.type === 'error') {
-        // Ошибка отдельной операции (например, отклонённое сообщение) — соединение
-        // не рвётся, просто короткое пояснение пользователю.
+        // Ошибка отдельной операции (например, отклонённое сообщение или
+        // запрет опустить чужую руку не-организатору, code:"forbidden") —
+        // соединение не рвётся, просто короткое пояснение пользователю.
        setStatusMessage(`Ошибка чата: ${frame.code}`)
      }
    }
@@ -168,10 +244,32 @@ export function useChat({ conferenceId, token, enabled }: UseChatOptions): UseCh
    ws.send(JSON.stringify({ type: 'message', text: trimmed }))
  }, [])

+  const raiseHand = useCallback(() => {
+    const ws = wsRef.current
+    if (!ws || ws.readyState !== WebSocket.OPEN) return
+    ws.send(JSON.stringify({ type: 'raise_hand' }))
+  }, [])
+
+  const lowerHand = useCallback((identity?: string) => {
+    const ws = wsRef.current
+    if (!ws || ws.readyState !== WebSocket.OPEN) return
+    ws.send(JSON.stringify({ type: 'lower_hand', identity: identity ?? null }))
+  }, [])
+
  // Наружу — производный статус: пока подключаться нечем (выключено/нет
  // conferenceId/token), всегда `closed`, даже если внутренний `wsStatus`
  // ещё хранит значение от предыдущего подключения.
  const status: ChatConnectionStatus = canConnect ? wsStatus : 'closed'

-  return { messages, status, statusMessage, unavailable, sendMessage }
+  return {
+    messages,
+    status,
+    statusMessage,
+    unavailable,
+    sendMessage,
+    handQueue,
+    raiseHand,
+    lowerHand,
+    lastForcedMute,
+  }
 }
--- a/frontend/src/pages/RoomPage.tsx
+++ b/frontend/src/pages/RoomPage.tsx
@@ -16,6 +16,8 @@ import { RoomTopbar } from '@/components/room/RoomTopbar'
 import { RoomStage } from '@/components/room/RoomStage'
 import { RoomToolbar } from '@/components/room/RoomToolbar'
 import { ChatPanel } from '@/components/room/ChatPanel'
+import { HandQueuePanel } from '@/components/room/HandQueuePanel'
+import { ForcedMuteWatcher } from '@/components/room/ForcedMuteWatcher'
 import { DeviceSettingsDialog } from '@/components/room/DeviceSettingsDialog'
 import { loadAudioOutputDeviceId } from '@/lib/audioOutputDevice'
 import { loadStageLayoutMode, saveStageLayoutMode, type StageLayoutMode } from '@/lib/stageLayoutMode'
@@ -145,6 +147,18 @@ export function RoomPage() {
  // изначально JoinOut.chat_enabled был true (рассинхрон с админкой в моменте).
  const chatVisible = Boolean(joinState?.chatEnabled) && !chat.unavailable

+  // Панель очереди поднятых рук — открыта/закрыта организатором (задача B1).
+  // Саму видимость кнопки/панели решает `useIsOrganizer()` внутри
+  // `RoomToolbar`/`HandQueuePanel` (эти компоненты — дети `LiveKitRoom`, а
+  // `RoomPage` — нет, `useLocalParticipant` здесь не вызвать).
+  const [handQueueOpen, setHandQueueOpen] = useState(false)
+  // Identity участников с поднятой рукой — множеством, для дешёвого `.has()`
+  // на каждой плитке сцены (см. `RoomParticipantTile`).
+  const raisedHandIdentities = useMemo(
+    () => new Set(chat.handQueue.map((entry) => entry.identity)),
+    [chat.handQueue],
+  )
+
  // Корневой контейнер комнаты — цель для fullscreen и источник video-элемента
  // для video-PiP-фолбэка.
  const roomRootRef = useRef<HTMLDivElement>(null)
@@ -277,6 +291,8 @@ export function RoomPage() {
                initialFocusKey={stageFocusKey}
                onFocusKeyChange={setStageFocusKey}
                onPinFocus={handlePinFocus}
+                raisedHandIdentities={raisedHandIdentities}
+                conferenceId={joinState.conferenceId}
              />
            )}
            {chatVisible && chatOpen && (
@@ -288,6 +304,13 @@ export function RoomPage() {
                onClose={() => setChatOpen(false)}
              />
            )}
+            {handQueueOpen && (
+              <HandQueuePanel
+                queue={chat.handQueue}
+                onLower={(identity) => chat.lowerHand(identity)}
+                onClose={() => setHandQueueOpen(false)}
+              />
+            )}
          </div>
          <RoomToolbar
            chatVisible={chatVisible}
@@ -301,6 +324,11 @@ export function RoomPage() {
            pipSupported={pip.supported}
            pipActive={pip.active}
            onTogglePiP={pip.toggle}
+            handQueue={chat.handQueue}
+            onRaiseHand={chat.raiseHand}
+            onLowerHand={() => chat.lowerHand()}
+            handQueueOpen={handQueueOpen}
+            onToggleHandQueue={() => setHandQueueOpen((open) => !open)}
            layoutMode={layoutMode}
            onLayoutModeChange={handleLayoutModeChange}
            hideOthers={hideOthers}
@@ -327,6 +355,7 @@ export function RoomPage() {
            <RoomStage variant="pip" initialFocusKey={stageFocusKey} onFocusKeyChange={setStageFocusKey} />,
            pip.pipWindow.document.body,
          )}
+        <ForcedMuteWatcher event={chat.lastForcedMute} />
      </LiveKitRoom>
    </div>
  )
--- a/frontend/src/styles/room.css
+++ b/frontend/src/styles/room.css
@@ -323,6 +323,12 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
 .tb-btn.is-sharing span.label { color: var(--color-room-mic-on); font-weight: 700; }
 .tb-btn:disabled { opacity: 0.6; cursor: default; }

+/* Кнопка «Рука» — та же зелёная подсветка активного состояния, что у
+   «Демонстрации» (задача B1): своя поднятая рука — такой же позитивный
+   индикатор «я сейчас что-то сигнализирую комнате». */
+.tb-btn.is-hand-raised .icon-shell { background: var(--color-room-mic-on); border-color: var(--color-room-mic-on); color: #10331f; }
+.tb-btn.is-hand-raised span.label { color: var(--color-room-mic-on); font-weight: 700; }
+
 .tb-btn.danger .icon-shell { border-color: var(--color-room-danger); color: var(--color-room-danger); background: transparent; }
 .tb-btn.danger:hover .icon-shell { background: var(--color-room-danger-bg); color: #fff; border-color: var(--color-room-danger-bg); }
 .tb-btn.danger span.label { color: var(--color-room-danger); font-weight: 700; }
@@ -574,6 +580,66 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
  }
 }

+/* ---------- Панель очереди поднятых рук (`HandQueuePanel`, задача B1) ----------
+ * Контейнер — `.chat-panel` (та же геометрия и мобильное поведение), список
+ * — свой. */
+.hand-queue-list {
+  list-style: none;
+  margin: 0;
+  padding: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  overflow-y: auto;
+}
+.hand-queue-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: var(--radius-md);
+  background: var(--color-room-tile);
+}
+.hand-queue-position {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--color-room-mic-on);
+  color: #10331f;
+  font: var(--text-caption);
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.hand-queue-name {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font: var(--text-body);
+  color: var(--color-room-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.hand-queue-name svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-room-mic-on); }
+.hand-queue-lower {
+  flex-shrink: 0;
+  padding: 6px 10px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-room-tile-border);
+  background: transparent;
+  color: var(--color-room-text-secondary);
+  font: var(--text-caption);
+  text-transform: none;
+  letter-spacing: normal;
+  cursor: pointer;
+}
+.hand-queue-lower:hover { background: var(--color-room-tile-hover); color: var(--color-room-text-primary); }
+
 /*
 * ---------- Диалог «Настройки устройств» ----------
 * Нет отдельного макета для диалога в design/mockups/room.html — собран из
@@ -762,6 +828,54 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
  outline-offset: -2px;
 }

+/* Бейдж поднятой руки (задача B1) — левый верхний угол, зеркально булавке
+   закрепления (правый верхний). В отличие от булавки ВСЕГДА видим, пока
+   рука поднята, — это статус для ВСЕХ участников, а не собственный
+   элемент управления, видимый по наведению. */
+.room-hand-badge {
+  position: absolute;
+  top: 0.25rem;
+  left: 0.25rem;
+  z-index: 5;
+  display: flex;
+  padding: 0.25rem;
+  border-radius: calc(var(--lk-border-radius, 0.5rem) / 2);
+  background: var(--color-room-mic-on);
+  color: #10331f;
+}
+.room-hand-badge svg { width: 18px; height: 18px; }
+
+/* Кнопки принудительного мьюта организатором (задача B2) — нижний правый
+   угол чужой плитки, видны по наведению (как булавка закрепления) —
+   элемент управления, а не статус, прятать по умолчанию уместно. */
+.room-organizer-controls {
+  position: absolute;
+  bottom: 0.25rem;
+  right: 0.25rem;
+  z-index: 5;
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  transition-delay: 0.2s;
+}
+.lk-participant-tile:hover .room-organizer-controls,
+.lk-participant-tile:focus-within .room-organizer-controls { opacity: 1; transition-delay: 0s; }
+@media (hover: none) {
+  .room-organizer-controls { opacity: 1; transition-delay: 0s; }
+}
+.room-organizer-controls button {
+  display: flex;
+  padding: 0.25rem;
+  border: none;
+  border-radius: calc(var(--lk-border-radius, 0.5rem) / 2);
+  background: rgba(0, 0, 0, 0.5);
+  color: var(--color-room-text-primary);
+  cursor: pointer;
+}
+.room-organizer-controls button:hover { background: var(--color-room-danger-bg); color: #fff; }
+.room-organizer-controls svg { width: 18px; height: 18px; }
+
 /* ---------- Заглушка «конференция в мини-окне» (Document PiP) ---------- */
 .room-pip-placeholder {
  flex: 1;