変更対象は必要最小限に限定する
まず WebRTC_UI.vue の責務として解く
必要な場合だけ、UI 表示専用 helper を最小差分で触る
見た目修正のために useStreamReceiver.js の接続順序を触らない
useRoomSession.js, useRemotePublications.js, useLocalMediaSession.js の挙動を変えない
コメント、文言、整形、空白、引用符、改行コードは依頼がない限り触らない
<template>, <script>, <style> の並びを変えない
テンプレート全体の書き換えはしない
日本語コメントと日本語 UI 文言は保持する
whole-file rewrite をしない
横 1 列固定を前提にしない
モバイルで主要映像を横スクロール前提にしない
実行していない検証を成功したとは書かない

現在の前提

このプロジェクトでは、共有画面と参加者カメラは別責務で扱う。ただし、共有画面が存在しても自動で主表示するとは限らない。

共有画面の「存在」と、ユーザーがその共有を「視聴中」であることは別状態として扱う。 selectedMainSharePubId があるときだけ、共有画面を主表示にする。 selectedMainSharePubId が null のときは、共有一覧だけを表示してよい。

また、ローカル self view は通常会議時には特別扱いせず、参加者カメラの一員として同格表示してよい。自分のカメラを小窓や補助表示に落とすのは、主に共有視聴中や共有配信中の補助 UI に限定する。

レイアウト思想

この Skill では、次の思想を優先する。

1. 通常会議時

参加者を同格に扱う
1 列固定ではなく、wrap または grid を使う
self view だけを常に小さくしない
自分の映像だけが不自然に小さい、または大きい構成を避ける

2. 共有あり時

共有画面と参加者カメラは別責務で扱う
共有画面が存在しても、自動で主表示しない
ユーザーが「配信を見る」を押したときだけ、共有を主表示にする
共有を主表示した後は、既存の共有レイアウト比率と配置を維持する
参加者カメラは共有視聴中のみ補助帯へ落としてよい

3. self view

self view は通常会議時には他参加者と同格表示でよい
self view を小窓や補助表示にするのは、共有視聴中または共有配信中の補助 UI を優先する
self view だけが常に特殊サイズになる構成は避ける

既定の UI ルール

依頼が曖昧な場合は次を既定とする。

PC

共有なし

参加者カメラは wrap または grid
self view を他参加者より常に小さくしない
自分だけ極端に小さい、または大きい見え方を避ける
10 人前後でも横 1 列固定にしない

共有あり

共有一覧は表示してよいが、自動で主表示しない
「配信を見る」を押したときだけ共有を主表示にする
主表示に入った後の共有比率と配置は現状維持とする
主表示中は参加者カメラを下部または側部の補助帯にしてよい
self view を補助表示へ落とすのは主表示中のみでよい

モバイル

主要映像を最初に見せる
共有ありでも自動で共有主表示にしない
共有未選択時は共有一覧を自然に見せる
共有選択後は共有画面を上部に出す
参加者カメラは横スクロール前提より、縦積みまたは 1〜2 列グリッドを優先する
self view を大きくしすぎない
「見えていないだけ」を接続不具合と誤認しにくい構成にする

推奨する実装順

修正は次の順で検討する。

第 1 優先

WebRTC_UI.vue の class / レイアウト分岐だけで直せるか確認する。例:

tile.isLocal の見た目を通常会議時は他参加者と揃える
selectedMainSharePubId の有無で共有主表示を切り替える
共有未選択時は共有一覧だけを出す
placeholder の max-width, padding, aspect を抑える
flex-wrap, grid, min-width, max-width を調整する

第 2 優先

Vue 側で読みにくい条件や、共有の自動選択を止めるための小さな helper 修正だけを行う。例:

hasScreenShare
isViewingShare
selectedMainSharePubId === null 時の空状態分岐
syncSelectedMainShare() の自動フォールバック削除

useVideoTiles.js のような UI 用 helper は、表示ポリシー修正に限って最小差分で触ってよい。

第 3 優先

どうしても必要な場合だけ、UI に必要な state の橋渡しを useStreamReceiver.js に追加する。ただし、接続フローや publication 処理には触れない。

触ってよい範囲

優先して触ってよい:

WebRTC_UI.vue
src/composables/helpers/useVideoTiles.js
その画面専用の小さな helper
class 切り替え
computed
プレースホルダのサイズ
レイアウト用 wrapper の構造
共有の自動選択を止めるための最小ロジック

必要なら最小限で触ってよい:

UI 表示専用の小さな state bridge
既存 return shape を壊さない範囲の公開 state 追加

原則触らない:

useRoomSession.js
useRemotePublications.js
useLocalMediaSession.js
SkyWay service
subscribe / publish / unpublish の順序
remote attach 本体
dedupe ロジック
mute badge ロジック
blur / RNNoise ロジック

変更の判断基準

良い修正:

WebRTC_UI.vue 中心で完結している
必要なら useVideoTiles.js の UI helper を最小差分で触っている
通常会議時に self view が他参加者と不自然にズレていない
共有ありでも自動で主表示しない
「配信を見る」を押したときだけ既存の共有レイアウトに入る
共有主表示に入った後の比率やサイズ感を壊していない
10 人前後でも破綻しない
スマホで主要映像が初見で見える
変更理由を class と構造で説明できる
接続ロジックへ広がっていない

悪い修正:

見た目修正のために composable を大きく組み替える
self view を通常会議時から常に小窓扱いにする
共有ありで自動的に先頭共有を開く
共有表示比率を不要に変える
10 人時に横 1 列固定へ押し込む
モバイルで横スクロールしないと主表示へ到達できない
UI 修正なのに join / leave / subscribe 系へ手を出す

依頼の読み替えルール

「自分の画面が相手より小さくて不自然」

まず通常会議時の self view を他参加者と同格表示に寄せる
tile.isLocal だけで常時小さくする前提を置かない
self view の小窓化は、共有視聴中や共有配信中の補助表示に限定する

「10 人くらいで自然にしたい」

1 列固定ではなく wrap または grid を採用する
self view だけ小さくする前提を置かず、参加者全体の見やすさを優先する
10 人を横 1 列で押し込むような設計は避ける

「Zoom / Discord / Gather を参考にしたい」

そのまま複製しない
Zoom: self view は必要時のみ補助表示
Discord: 通常時は grid / focus 思想
Gather: 共有視聴時は content first
この 3 つの思想を今の WebRTC UI に最小差分で落とす

「共有があっても勝手に開かないようにしたい」

共有の存在と共有視聴中を別 state として扱う
selectedMainSharePubId が null なら共有を主表示しない
共有一覧だけを表示し、「配信を見る」を押したときだけ主表示に入る
選択後は現在の共有レイアウト比率と配置を維持する
自動で先頭共有を選ぶ挙動は避ける

「共有は見たいが、比率や配置は今のままでよい」

共有主表示の出現条件だけを変える
共有を開いた後の主表示レイアウト比率と配置は維持する
レイアウト再設計に広げない

「共有中の画面はありません、の box が大きすぎる」

まず placeholder の max-width と padding を下げる
aspect 比や min-height の持ちすぎを疑う
接続不具合の調査へ広げない

実装パターン

パターン A: 最小修正

WebRTC_UI.vue のみ変更
または WebRTC_UI.vue + useVideoTiles.js のみ変更
共有の自動表示を止める
「配信を見る」導線を追加する
通常会議時の self view サイズ差をなくす
共有主表示の既存レイアウトは維持する

最優先で選ぶ。

パターン B: 小さな helper 追加

WebRTC_UI.vue が読みにくいときだけ採用
小さな computed / helper を追加
API shape は維持する

パターン C: 軽い mode 分離

通常会議モード
共有一覧モード
共有視聴モード

必要時のみ採用する。大規模な状態管理追加はしない。

受け入れ条件

修正後は最低でも次を満たすこと。

通常会議時に self view が他参加者と不自然にズレない
共有ありでも自動で共有画面が開かない
「配信を見る」を押すと既存の共有レイアウトで表示される
共有を閉じると共有一覧表示へ戻る
共有を開いた後の比率やサイズ感を壊していない
共有なしでも参加者映像が読みやすい
10 人前後で横 1 列固定に見えない
モバイルで主要映像が最初に見える
late join, join / leave, 画面共有, 背景ぼかし, mute の挙動を壊していない
変更差分が小さい
文字化けがない
無関係なコメント変更がない

検証

優先順は次のとおり。

変更ファイルの syntax 確認
WebRTC_UI.vue の表示崩れがないか確認
PC で通常会議時の self view サイズ感を確認
PC で共有あり時に自動で主表示されないことを確認
「配信を見る」で既存の共有レイアウトに入ることを確認
スマホ幅で主要映像の見え方を確認
可能なら 2 端末で最低限の join / share 表示だけ確認

検証していない項目は未検証として明記する。

Codex への指示テンプレート

依頼を受けたら、まず次を整理する。

変更対象ファイル
今回の表示問題
変えてよい範囲
触ってはいけない範囲
最小差分の案
既存比率や配置を維持すべきか
検証方法

出力では次を簡潔に書く。

変更ファイル
何をどう小さく / 大きく / 並べ替えたか
共有の自動主表示を止めたか
既存の共有レイアウト比率を維持したか
接続ロジックに触れていないこと
未検証項目

禁止事項

whole-file rewrite
composable の大規模分割
SkyWay 接続順序の変更
subscribeExisting / onStreamPublished の責務変更
共有 / blur / mute の実行順序変更
無関係な import 並び替え
無関係な整形
コメントの書き換え
UI 修正に見せかけた設計大改造
共有があるだけで自動的に先頭共有を主表示する実装への回帰
既存の共有表示比率を不要に変えること

一言でいうと

この Skill は、「WebRTC の見た目だけを、通常会議時は self view を同格に、共有時は選択式で主表示にし、既存の共有レイアウト比率を保ったまま、WebRTC_UI.vue 中心の最小差分で直す」ための Skill である。