zero-query 1.2.4 → 1.2.6

package/cli/scaffold/webrtc/app/components/video-room.js

@@ -1,47 +1,72 @@
-// video-room.js - Mini-Discord style room over zero-server signaling.
+// video-room.js - Polished WebRTC room over zero-server signaling.
 //
-// Joins a real WebRTC mesh room via `$.webrtc.join()` against the
-// SignalingHub running in server/index.js. The user picks a room name and
-// joins as a viewer first - no camera, no microphone, no screen capture
-// runs until they explicitly click a Start button. Each control acquires
-// (or releases) exactly the media it owns, so granting "Start mic" never
-// turns on the camera and vice-versa.
+// Joins a real mesh room via `$.webrtc.join()` against the SignalingHub in
+// server/index.js. Camera, microphone, and screen capture each stay off
+// until the user explicitly turns them on. Presence metadata is broadcast
+// over a dedicated data channel so the UI can split each peer's combined
+// MediaStream into separate camera and screen streams - that's what lets
+// us promote a screen share to the full stage while keeping cameras as
+// thumbnails alongside it.
 
 $.component('video-room', {
     state: () => ({
         // Pre-join form
         roomName:    'lobby',
         displayName: 'User-' + Math.random().toString(36).slice(2, 6),
-        // Live state
+
+        // Lifecycle
         joined:      false,
         connecting:  false,
-        status:      'Pick a room name and join. The camera and mic stay off until you turn them on.',
+        status:      'Pick a room name and join. Your camera and mic stay off until you turn them on.',
         error:       '',
+
         // Local publishing flags
         micOn:       false,
         camOn:       false,
         micMuted:    false,
         camMuted:    false,
         sharing:     false,
-        // Live MediaStream refs (passed through reactive() unchanged because
-        // the proxy only wraps plain objects / arrays).
+        shareAudio:  false, // true when getDisplayMedia delivered an audio track
+
+        // Live MediaStream refs (kept on state so z-stream can bind them).
         micStream:    null,
         camStream:    null,
         screenStream: null,
-        // Roster (each entry also holds the remote MediaStream for z-stream)
+
+        // Peer roster - each entry exposes derived `camStream` / `screenStream`
+        // MediaStream objects that the UI binds with z-stream.
         peers:       [],
-        // Chat history
+
+        // Pinning: when set, that tile takes the full stage regardless of
+        // how many screens / cams are active. id is 'me' or a peerId, kind
+        // is 'screen' or 'cam'.
+        pinned:      null, // { id, kind } | null
+
+        // Chat
         messages:    [],
         draft:       '',
+
+        // Pre-join device availability hints
+        hasMic:      true,
+        hasCam:      true,
+        hasShare:    true,
     }),
 
     mounted() {
-        // Room/data-channel handles live on the instance; MediaStreams live
-        // in state so z-stream bindings can resolve them by name.
         this._room        = null;
         this._chat        = null;
-        this._cameraTrack = null;
+        this._presence    = null;
         this._unsubs      = [];
+
+        // peerId -> { name, micOn, micMuted, camOn, camMuted, sharing,
+        //             camTrackId, screenTrackIds:[], screenAudioTrackIds:[] }
+        this._presenceMap = new Map();
+
+        // peerId -> { camStream, screenStream } (cached so MediaStream
+        // identity is stable across re-renders).
+        this._peerStreams = new Map();
+
+        this._probeDevices();
     },
 
     async destroyed() {
@@ -50,9 +75,22 @@ $.component('video-room', {
 
     // ---- Form bindings ---------------------------------------------------
 
-    setRoom(e) { this.setState({ roomName:    e.target.value }); },
-    setName(e) { this.setState({ displayName: e.target.value }); },
-    setDraft(e) { this.setState({ draft:      e.target.value }); },
+    setRoom(e)  { this.setState({ roomName:    e.target.value }); },
+    setName(e)  { this.setState({ displayName: e.target.value }); },
+    setDraft(e) { this.setState({ draft:       e.target.value }); },
+
+    // ---- Pre-join device probe ------------------------------------------
+
+    async _probeDevices() {
+        try {
+            if (!navigator.mediaDevices || typeof navigator.mediaDevices.enumerateDevices !== 'function') return;
+            const devs = await navigator.mediaDevices.enumerateDevices();
+            const hasMic = devs.some((d) => d.kind === 'audioinput');
+            const hasCam = devs.some((d) => d.kind === 'videoinput');
+            const hasShare = typeof navigator.mediaDevices.getDisplayMedia === 'function';
+            this.setState({ hasMic, hasCam, hasShare });
+        } catch (_) { /* non-fatal */ }
+    },
 
     // ---- Join / leave ----------------------------------------------------
 
@@ -67,9 +105,8 @@ $.component('video-room', {
         this.setState({ connecting: true, error: '', status: 'Connecting to signaling server...' });
 
         try {
-            // Pull a fresh join token + the server's preferred ws url.
             const meta = await this._fetchJSON('/rtc/token/' + encodeURIComponent(this.state.roomName));
-            const ice  = await this._fetchJSON('/rtc/turn');
+            const ice  = await this._fetchJSON('/rtc/turn').catch(() => null);
 
             this._room = await $.webrtc.join(meta.wsUrl || this._defaultWsUrl(), {
                 room:       this.state.roomName,
@@ -82,7 +119,7 @@ $.component('video-room', {
             this.setState({
                 joined:     true,
                 connecting: false,
-                status:     'Joined "' + this.state.roomName + '" as a viewer. Start your mic or camera when ready.',
+                status:     'Joined "' + this.state.roomName + '" as a viewer. Turn on the devices you actually want to share.',
             });
         } catch (err) {
             this.setState({
@@ -102,11 +139,13 @@ $.component('video-room', {
             micMuted:     false,
             camMuted:     false,
             sharing:      false,
+            shareAudio:   false,
             micStream:    null,
             camStream:    null,
             screenStream: null,
             peers:        [],
             messages:     [],
+            pinned:       null,
             status:       'Left the room. Click Join to reconnect.',
         });
     },
@@ -119,14 +158,14 @@ $.component('video-room', {
             try { await this._room.leave(); } catch (_) {}
             this._room = null;
         }
-        // Read raw values to avoid touching the reactive proxy while we
-        // shut things down.
         const raw = this.state.__raw || this.state;
         this._stopStream(raw.screenStream);
         this._stopStream(raw.camStream);
         this._stopStream(raw.micStream);
-        this._cameraTrack = null;
-        this._chat        = null;
+        this._presenceMap.clear();
+        this._peerStreams.clear();
+        this._chat     = null;
+        this._presence = null;
     },
 
     _stopStream(stream) {
@@ -137,17 +176,20 @@ $.component('video-room', {
     // ---- Room wiring ----------------------------------------------------
 
     _wireRoom(room) {
-        // Initial roster snapshot.
-        this._refreshPeers(room);
-
-        // Re-render whenever the room's peer map changes.
         this._unsubs.push(room.peers.subscribe(() => this._refreshPeers(room)));
 
         this._unsubs.push(room.on('peer-joined', ({ peerId }) => {
             this.setState({ status: 'Peer joined: ' + peerId });
             this._refreshPeers(room);
+            // Catch the new peer up on our current state.
+            this._publishPresence();
         }));
         this._unsubs.push(room.on('peer-left', ({ peerId }) => {
+            this._presenceMap.delete(peerId);
+            this._peerStreams.delete(peerId);
+            if (this.state.pinned && this.state.pinned.id === peerId) {
+                this.setState({ pinned: null });
+            }
             this.setState({ status: 'Peer left: ' + peerId });
             this._refreshPeers(room);
         }));
@@ -155,25 +197,152 @@ $.component('video-room', {
             this.setState({ error: String(err && err.message || err) });
         }));
 
-        // Multiplexed text-chat data channel - opens on every peer.
+        // Text chat channel.
         this._chat = room.dataChannel('chat');
         this._unsubs.push(this._chat.on('message', (raw, peerId) => {
             try {
                 const msg = JSON.parse(typeof raw === 'string' ? raw : new TextDecoder().decode(raw));
-                this._appendChat({ from: peerId, name: msg.name || peerId, text: String(msg.text || ''), mine: false });
+                this._appendChat({
+                    from: peerId,
+                    name: msg.name || this._displayNameOf(peerId),
+                    text: String(msg.text || ''),
+                    mine: false,
+                });
             } catch (_) { /* ignore malformed */ }
         }));
+
+        // Presence channel - lets every peer announce which tracks belong
+        // to its camera vs. its screen share, plus mic/cam mute state.
+        this._presence = room.dataChannel('presence');
+        this._unsubs.push(this._presence.on('message', (raw, peerId) => {
+            try {
+                const msg = JSON.parse(typeof raw === 'string' ? raw : new TextDecoder().decode(raw));
+                if (!msg || msg.type !== 'presence') return;
+                this._presenceMap.set(peerId, {
+                    name:                String(msg.name || peerId),
+                    micOn:               !!msg.micOn,
+                    micMuted:            !!msg.micMuted,
+                    camOn:               !!msg.camOn,
+                    camMuted:            !!msg.camMuted,
+                    sharing:             !!msg.sharing,
+                    shareAudio:          !!msg.shareAudio,
+                    camTrackId:          msg.camTrackId || null,
+                    screenTrackIds:      Array.isArray(msg.screenTrackIds) ? msg.screenTrackIds.slice() : [],
+                    screenAudioTrackIds: Array.isArray(msg.screenAudioTrackIds) ? msg.screenAudioTrackIds.slice() : [],
+                });
+                this._refreshPeers(this._room);
+            } catch (_) { /* ignore malformed */ }
+        }));
+
+        this._refreshPeers(room);
+    },
+
+    _displayNameOf(peerId) {
+        const p = this._presenceMap.get(peerId);
+        return (p && p.name) || peerId;
     },
 
+    _publishPresence() {
+        if (!this._presence) return;
+        const raw          = this.state.__raw || this.state;
+        const camTrack     = raw.camStream    ? (raw.camStream.getVideoTracks()[0]    || null) : null;
+        const screenTracks = raw.screenStream ? raw.screenStream.getVideoTracks() : [];
+        const screenAudio  = raw.screenStream ? raw.screenStream.getAudioTracks() : [];
+        const payload = {
+            type:                'presence',
+            name:                raw.displayName,
+            micOn:               raw.micOn,
+            micMuted:            raw.micMuted,
+            camOn:               raw.camOn,
+            camMuted:            raw.camMuted,
+            sharing:             raw.sharing,
+            shareAudio:          raw.shareAudio,
+            camTrackId:          camTrack ? camTrack.id : null,
+            screenTrackIds:      screenTracks.map((t) => t.id),
+            screenAudioTrackIds: screenAudio.map((t) => t.id),
+        };
+        try { this._presence.send(JSON.stringify(payload)); } catch (_) {}
+    },
+
+    // ---- Peer reconciliation --------------------------------------------
+
     _refreshPeers(room) {
+        if (!room) { this.setState({ peers: [] }); return; }
         const list = [];
-        const map = room.peers.peek();
-        for (const info of map.values()) {
-            list.push({ id: info.id, name: info.id, stream: info.stream });
+        for (const info of room.peers.peek().values()) {
+            list.push(this._derivePeerView(info));
+        }
+        // Drop cached entries for peers that vanished.
+        for (const id of Array.from(this._peerStreams.keys())) {
+            if (!list.some((p) => p.id === id)) this._peerStreams.delete(id);
         }
         this.setState({ peers: list });
     },
 
+    _derivePeerView(info) {
+        const presence = this._presenceMap.get(info.id) || null;
+        const cache    = this._peerStreams.get(info.id) || { camStream: this._newStream(), screenStream: this._newStream() };
+        this._peerStreams.set(info.id, cache);
+
+        const tracks   = (info.stream && typeof info.stream.getTracks === 'function')
+            ? info.stream.getTracks()
+            : [];
+
+        // Classify each remote track using the latest presence hints. When
+        // presence hasn't arrived yet we fall back to "first video = cam".
+        const want = { cam: new Set(), screen: new Set() };
+        let fallbackCamSeen = false;
+        for (const t of tracks) {
+            if (presence) {
+                if (presence.screenTrackIds.indexOf(t.id) !== -1)        want.screen.add(t);
+                else if (presence.screenAudioTrackIds.indexOf(t.id) !== -1) want.screen.add(t);
+                else if (t.id === presence.camTrackId)                   want.cam.add(t);
+                else if (t.kind === 'audio')                             want.cam.add(t); // mic
+                else                                                     want.cam.add(t);
+            } else {
+                if (t.kind === 'video' && !fallbackCamSeen)  { want.cam.add(t); fallbackCamSeen = true; }
+                else if (t.kind === 'video')                 { want.screen.add(t); }
+                else                                         { want.cam.add(t); }
+            }
+        }
+
+        this._syncStreamTracks(cache.camStream,    want.cam);
+        this._syncStreamTracks(cache.screenStream, want.screen);
+
+        const hasCamVideo    = cache.camStream.getVideoTracks().length    > 0;
+        const hasScreenVideo = cache.screenStream.getVideoTracks().length > 0;
+
+        return {
+            id:           info.id,
+            name:         presence ? presence.name : info.id,
+            micOn:        presence ? presence.micOn        : cache.camStream.getAudioTracks().length > 0,
+            micMuted:     presence ? presence.micMuted     : false,
+            camOn:        presence ? presence.camOn        : hasCamVideo,
+            camMuted:     presence ? presence.camMuted     : false,
+            sharing:      presence ? presence.sharing      : hasScreenVideo,
+            shareAudio:   presence ? presence.shareAudio   : false,
+            connection:   info.connection || 'connected',
+            camStream:    hasCamVideo    ? cache.camStream    : null,
+            screenStream: hasScreenVideo ? cache.screenStream : null,
+            hasAudio:     cache.camStream.getAudioTracks().length > 0,
+        };
+    },
+
+    _syncStreamTracks(stream, wanted) {
+        const current = new Set(stream.getTracks());
+        for (const t of current) {
+            if (!wanted.has(t)) { try { stream.removeTrack(t); } catch (_) {} }
+        }
+        for (const t of wanted) {
+            if (!current.has(t)) { try { stream.addTrack(t); } catch (_) {} }
+        }
+    },
+
+    _newStream() {
+        try { return new MediaStream(); }
+        catch (_) { return { _tracks: [], getTracks() { return this._tracks.slice(); }, getVideoTracks() { return this._tracks.filter(t => t.kind==='video'); }, getAudioTracks() { return this._tracks.filter(t => t.kind==='audio'); }, addTrack(t){ this._tracks.push(t); }, removeTrack(t){ const i=this._tracks.indexOf(t); if(i>=0) this._tracks.splice(i,1); } }; }
+    },
+
     // ---- Mic ------------------------------------------------------------
 
     async startMic() {
@@ -182,6 +351,7 @@ $.component('video-room', {
             const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
             await this._room.publish(stream);
             this.setState({ micStream: stream, micOn: true, micMuted: false, error: '', status: 'Microphone is live.' });
+            this._publishPresence();
         } catch (err) {
             this.setState({ error: 'Microphone denied or unavailable.' });
         }
@@ -193,6 +363,7 @@ $.component('video-room', {
         try { await this._room.unpublish(stream); } catch (_) {}
         this._stopStream(stream);
         this.setState({ micStream: null, micOn: false, micMuted: false, status: 'Microphone stopped.' });
+        this._publishPresence();
     },
 
     toggleMute() {
@@ -201,6 +372,7 @@ $.component('video-room', {
         const next = !this.state.micMuted;
         for (const t of stream.getAudioTracks()) t.enabled = !next;
         this.setState({ micMuted: next });
+        this._publishPresence();
     },
 
     // ---- Camera ---------------------------------------------------------
@@ -208,10 +380,12 @@ $.component('video-room', {
     async startCam() {
         if (this.state.camStream || !this._room) return;
         try {
-            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-            this._cameraTrack = stream.getVideoTracks()[0] || null;
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: { width: { ideal: 1280 }, height: { ideal: 720 } },
+            });
             await this._room.publish(stream);
             this.setState({ camStream: stream, camOn: true, camMuted: false, error: '', status: 'Camera is live.' });
+            this._publishPresence();
         } catch (err) {
             this.setState({ error: 'Camera denied or unavailable.' });
         }
@@ -220,11 +394,13 @@ $.component('video-room', {
     async stopCam() {
         const stream = this.state.camStream;
         if (!stream || !this._room) return;
-        if (this.state.sharing) await this.stopShare();
         try { await this._room.unpublish(stream); } catch (_) {}
         this._stopStream(stream);
-        this._cameraTrack = null;
+        if (this.state.pinned && this.state.pinned.id === 'me' && this.state.pinned.kind === 'cam') {
+            this.setState({ pinned: null });
+        }
         this.setState({ camStream: null, camOn: false, camMuted: false, status: 'Camera stopped.' });
+        this._publishPresence();
     },
 
     toggleCamMute() {
@@ -233,6 +409,7 @@ $.component('video-room', {
         const next = !this.state.camMuted;
         for (const t of stream.getVideoTracks()) t.enabled = !next;
         this.setState({ camMuted: next });
+        this._publishPresence();
     },
 
     // ---- Screen share ---------------------------------------------------
@@ -244,15 +421,40 @@ $.component('video-room', {
             return;
         }
         try {
-            const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
-            const track  = stream.getVideoTracks()[0];
-            if (!track) throw new Error('No video track from getDisplayMedia');
-            // Native browser "Stop sharing" button.
-            track.onended = () => { if (this.state.sharing) this.stopShare(); };
+            // Browsers that honour these hints will present an audio-capture
+            // checkbox in the picker (Chromium asks "Share tab audio" / "Share
+            // system audio"). Firefox + Safari silently ignore the audio flag
+            // for full-screen captures and return video only - that's fine.
+            const stream = await navigator.mediaDevices.getDisplayMedia({
+                video:        { frameRate: { ideal: 30 }, displaySurface: 'monitor' },
+                audio:        true,
+                systemAudio:  'include',
+                selfBrowserSurface: 'exclude',
+                surfaceSwitching:   'include',
+            });
+            const videoTrack = stream.getVideoTracks()[0];
+            if (!videoTrack) throw new Error('No video track from getDisplayMedia');
+
+            // Native browser "Stop sharing" hand-off.
+            videoTrack.onended = () => { if (this.state.sharing) this.stopShare(); };
+
             await this._room.publish(stream);
-            this.setState({ screenStream: stream, sharing: true, error: '', status: 'Sharing your screen.' });
+            const shareAudio = stream.getAudioTracks().length > 0;
+            this.setState({
+                screenStream: stream,
+                sharing:      true,
+                shareAudio,
+                error:        '',
+                status:       shareAudio ? 'Sharing screen with audio.' : 'Sharing screen (video only).',
+                // Auto-pin our own share to the main stage for the host;
+                // viewers will still see whatever sharer is pinned for them.
+                pinned:       { id: 'me', kind: 'screen' },
+            });
+            this._publishPresence();
         } catch (err) {
-            this.setState({ error: 'Screen share denied or unavailable.' });
+            // User cancelling the picker throws NotAllowedError - keep quiet.
+            const benign = err && (err.name === 'NotAllowedError' || err.name === 'AbortError');
+            if (!benign) this.setState({ error: 'Screen share denied or unavailable.' });
         }
     },
 
@@ -261,9 +463,31 @@ $.component('video-room', {
         if (!stream) return;
         try { await this._room.unpublish(stream); } catch (_) {}
         this._stopStream(stream);
-        this.setState({ screenStream: null, sharing: false, status: 'Stopped sharing screen.' });
+        if (this.state.pinned && this.state.pinned.id === 'me' && this.state.pinned.kind === 'screen') {
+            this.setState({ pinned: null });
+        }
+        this.setState({
+            screenStream: null,
+            sharing:      false,
+            shareAudio:   false,
+            status:       'Stopped sharing screen.',
+        });
+        this._publishPresence();
+    },
+
+    // ---- Pinning --------------------------------------------------------
+
+    pinTile(id, kind) {
+        const cur = this.state.pinned;
+        if (cur && cur.id === id && cur.kind === kind) {
+            this.setState({ pinned: null });
+        } else {
+            this.setState({ pinned: { id, kind } });
+        }
     },
 
+    unpin() { this.setState({ pinned: null }); },
+
     // ---- Chat -----------------------------------------------------------
 
     sendChat(e) {
@@ -277,7 +501,7 @@ $.component('video-room', {
     },
 
     _appendChat(msg) {
-        const next = this.state.messages.concat([msg]);
+        const next = this.state.messages.concat([Object.assign({ at: Date.now() }, msg)]);
         if (next.length > 200) next.splice(0, next.length - 200);
         this.setState({ messages: next });
     },
@@ -286,7 +510,7 @@ $.component('video-room', {
 
     async _fetchJSON(url) {
         const res = await fetch(url, { headers: { Accept: 'application/json' } });
-        if (!res.ok) throw new Error(url + ' → HTTP ' + res.status);
+        if (!res.ok) throw new Error(url + ' HTTP ' + res.status);
         return res.json();
     },
 
@@ -296,6 +520,58 @@ $.component('video-room', {
         return proto + '//' + location.host + '/rtc';
     },
 
+    _formatTime(ts) {
+        try {
+            const d = new Date(ts);
+            const hh = String(d.getHours()).padStart(2, '0');
+            const mm = String(d.getMinutes()).padStart(2, '0');
+            return hh + ':' + mm;
+        } catch (_) { return ''; }
+    },
+
+    // ---- Tile assembly --------------------------------------------------
+
+    _collectTiles() {
+        const { peers, sharing, camOn, camMuted, micOn, micMuted, shareAudio } = this.state;
+        const screens = [];
+        const cams    = [];
+
+        if (sharing) {
+            screens.push({
+                id: 'me', kind: 'screen', name: 'You', isSelf: true,
+                streamBinding: 'screenStream',
+                badges: shareAudio ? ['with audio'] : [],
+            });
+        }
+        if (camOn) {
+            cams.push({
+                id: 'me', kind: 'cam', name: 'You', isSelf: true,
+                streamBinding: 'camStream',
+                muted: camMuted, micOn, micMuted,
+            });
+        }
+
+        peers.forEach((p, i) => {
+            if (p.screenStream) {
+                screens.push({
+                    id: p.id, kind: 'screen', name: p.name, isSelf: false,
+                    streamBinding: 'peers[' + i + '].screenStream',
+                    badges: p.shareAudio ? ['with audio'] : [],
+                });
+            }
+            if (p.camStream) {
+                cams.push({
+                    id: p.id, kind: 'cam', name: p.name, isSelf: false,
+                    streamBinding: 'peers[' + i + '].camStream',
+                    muted: p.camMuted, micOn: p.micOn, micMuted: p.micMuted,
+                    connection: p.connection,
+                });
+            }
+        });
+
+        return { screens, cams };
+    },
+
     // ---- Render ---------------------------------------------------------
 
     render() {
@@ -304,22 +580,29 @@ $.component('video-room', {
     },
 
     _renderLobby() {
-        const { roomName, displayName, status, error, connecting } = this.state;
+        const { roomName, displayName, status, error, connecting, hasMic, hasCam, hasShare } = this.state;
+        const hint = [];
+        if (!hasMic)   hint.push('no microphone detected');
+        if (!hasCam)   hint.push('no camera detected');
+        if (!hasShare) hint.push('screen sharing unavailable in this browser');
+        const hintLine = hint.length ? `<div class="device-hint">⚠ ${$.escapeHtml(hint.join(' · '))}</div>` : '';
+
         return `
             <div class="lobby">
                 <h1>zQuery WebRTC Demo</h1>
                 <p class="lead">
-                    Mesh video call powered by
-                    <code>$.webrtc.join()</code> against a
+                    Mesh video call powered by <code>$.webrtc.join()</code> against a
                     <a href="https://github.com/tonywied17/zero-server" target="_blank" rel="noopener">zero-server</a>
-                    <code>SignalingHub</code>. Open this page on a second device
-                    (or in another browser) and join the same room to see a peer
-                    appear.
+                    <code>SignalingHub</code>. Open this page on a second device (or in another
+                    browser window) and join the same room to see a peer appear. Each call
+                    supports up to a handful of peers in a full mesh; for larger meetings
+                    swap in an SFU.
                 </p>
                 <p class="lead">
-                    <strong>Camera and microphone are off by default.</strong>
-                    Join the room first; then turn on the devices you actually
-                    want to share.
+                    <strong>Mic, camera, and screen share are off by default.</strong>
+                    Join first - then enable the devices you actually want to share.
+                    Screen share will prompt you to choose a screen / window / tab and,
+                    on Chromium-based browsers, also lets you include tab or system audio.
                 </p>
                 <form class="join-form" @submit="join">
                     <label>
@@ -334,6 +617,7 @@ $.component('video-room', {
                         ${connecting ? 'Joining...' : 'Join room'}
                     </button>
                 </form>
+                ${hintLine}
                 <p class="status ${error ? 'error' : ''}">
                     ${error ? $.escapeHtml(error) : $.escapeHtml(status)}
                 </p>
@@ -344,43 +628,91 @@ $.component('video-room', {
     _renderRoom() {
         const {
             peers, status, error, displayName, roomName,
-            micOn, camOn, micMuted, camMuted, sharing, messages, draft,
+            micOn, camOn, micMuted, camMuted, sharing, shareAudio,
+            messages, draft, pinned, hasShare,
         } = this.state;
 
         const peerCount = peers.length + 1;
-        const peerTiles = peers.map((p, i) => `
-            <div class="tile">
-                <video z-stream="peers[${i}].stream" autoplay playsinline></video>
-                <div class="label">${$.escapeHtml(p.name || p.id)}</div>
-            </div>
-        `).join('');
+        const { screens, cams } = this._collectTiles();
+
+        // Decide the layout:
+        //   - pinned tile (if any) wins and occupies the main stage solo.
+        //   - else if there are screen shares, screens fill the main stage
+        //     and cameras drop to a thumbnail strip alongside.
+        //   - else cameras tile across the stage.
+        let stageMode  = 'cams';     // 'cams' | 'screens' | 'pinned'
+        let mainTiles  = [];
+        let stripTiles = [];
+
+        const pinTile = pinned
+            ? [].concat(screens, cams).find((t) => t.id === pinned.id && t.kind === pinned.kind)
+            : null;
+
+        if (pinTile) {
+            stageMode  = 'pinned';
+            mainTiles  = [pinTile];
+            stripTiles = [].concat(screens, cams).filter((t) => t !== pinTile);
+        } else if (screens.length > 0) {
+            stageMode  = 'screens';
+            mainTiles  = screens;
+            stripTiles = cams;
+        } else {
+            stageMode  = 'cams';
+            mainTiles  = cams;
+            stripTiles = [];
+        }
+
+        const mainGrid = mainTiles.length > 0
+            ? `<div class="stage-main stage-main-${this._gridClass(mainTiles.length)}">
+                  ${mainTiles.map((t) => this._tileHtml(t, 'main')).join('')}
+               </div>`
+            : `<div class="stage-empty">
+                  <div class="empty-title">Nobody is sharing yet</div>
+                  <div class="empty-sub">Start your camera or screen share from the controls below.</div>
+               </div>`;
+
+        const strip = stripTiles.length > 0
+            ? `<div class="stage-strip">
+                  ${stripTiles.map((t) => this._tileHtml(t, 'strip')).join('')}
+               </div>`
+            : '';
 
         const chatLines = messages.map((m) => `
             <div class="msg ${m.mine ? 'mine' : ''}">
-                <span class="who">${$.escapeHtml(m.name)}</span>
-                <span class="text">${$.escapeHtml(m.text)}</span>
+                <div class="msg-head">
+                    <span class="who">${$.escapeHtml(m.name)}</span>
+                    <span class="when">${$.escapeHtml(this._formatTime(m.at))}</span>
+                </div>
+                <div class="text">${$.escapeHtml(m.text)}</div>
             </div>
         `).join('');
 
-        // Self-tile prefers the screen stream when sharing, else the camera.
-        const selfBinding = sharing ? 'screenStream' : 'camStream';
-
         return `
-            <div class="room">
+            <div class="room ${stageMode === 'screens' || stageMode === 'pinned' ? 'has-focus' : ''}">
                 <aside class="sidebar">
                     <div class="room-meta">
                         <div class="room-name">#${$.escapeHtml(roomName)}</div>
-                        <div class="room-sub">${peerCount} ${peerCount === 1 ? 'person' : 'people'}</div>
+                        <div class="room-sub">${peerCount} ${peerCount === 1 ? 'person' : 'people'} · ${screens.length} sharing</div>
                     </div>
                     <div class="roster">
                         <div class="roster-row me">
                             <span class="dot ${micOn && !micMuted ? 'on' : 'off'}"></span>
-                            ${$.escapeHtml(displayName)} <small>(you)</small>
+                            <span class="who">${$.escapeHtml(displayName)} <small>(you)</small></span>
+                            <span class="roster-icons">
+                                ${micOn ? (micMuted ? '🔇' : '🎤') : ''}
+                                ${camOn ? (camMuted ? '🚫' : '📷') : ''}
+                                ${sharing ? '🖥️' : ''}
+                            </span>
                         </div>
                         ${peers.map((p) => `
-                            <div class="roster-row">
-                                <span class="dot on"></span>
-                                ${$.escapeHtml(p.name || p.id)}
+                            <div class="roster-row ${p.connection === 'failed' ? 'broken' : ''}">
+                                <span class="dot ${p.micOn && !p.micMuted ? 'on' : 'off'}"></span>
+                                <span class="who">${$.escapeHtml(p.name || p.id)}</span>
+                                <span class="roster-icons">
+                                    ${p.micOn ? (p.micMuted ? '🔇' : '🎤') : ''}
+                                    ${p.camOn ? (p.camMuted ? '🚫' : '📷') : ''}
+                                    ${p.sharing ? '🖥️' : ''}
+                                </span>
                             </div>
                         `).join('')}
                     </div>
@@ -388,30 +720,33 @@ $.component('video-room', {
                 </aside>
 
                 <section class="stage">
-                    <div class="tiles">
-                        <div class="tile self">
-                            ${camOn || sharing
-                                ? `<video z-stream="${selfBinding}" autoplay playsinline muted></video>`
-                                : '<div class="camoff">Camera off</div>'}
-                            <div class="label">You${sharing ? ' · sharing' : ''}${camMuted ? ' · paused' : ''}</div>
-                        </div>
-                        ${peerTiles}
+                    <div class="stage-area">
+                        ${mainGrid}
+                        ${strip}
                     </div>
 
                     <div class="controls">
-                        ${micOn
-                            ? `<button class="${micMuted ? 'off' : ''}" @click="toggleMute">${micMuted ? '🔇 Unmute' : '🎤 Mute'}</button>
-                               <button class="off" @click="stopMic">⏹ Stop mic</button>`
-                            : `<button class="primary" @click="startMic">🎤 Start mic</button>`}
+                        <div class="ctl-group">
+                            ${micOn
+                                ? `<button class="${micMuted ? 'off' : ''}" @click="toggleMute" title="${micMuted ? 'Unmute mic' : 'Mute mic'}">${micMuted ? '🔇 Unmute' : '🎤 Mute'}</button>
+                                   <button class="off ghost" @click="stopMic" title="Stop microphone">⏹ Mic</button>`
+                                : `<button class="primary" @click="startMic">🎤 Start mic</button>`}
+                        </div>
 
-                        ${camOn
-                            ? `<button class="${camMuted ? 'off' : ''}" @click="toggleCamMute">${camMuted ? '🚫 Resume' : '📷 Pause'}</button>
-                               <button class="off" @click="stopCam">⏹ Stop camera</button>`
-                            : `<button class="primary" @click="startCam">📷 Start camera</button>`}
+                        <div class="ctl-group">
+                            ${camOn
+                                ? `<button class="${camMuted ? 'off' : ''}" @click="toggleCamMute" title="${camMuted ? 'Resume camera' : 'Pause camera'}">${camMuted ? '🚫 Resume' : '📷 Pause'}</button>
+                                   <button class="off ghost" @click="stopCam" title="Stop camera">⏹ Cam</button>`
+                                : `<button class="primary" @click="startCam">📷 Start camera</button>`}
+                        </div>
+
+                        <div class="ctl-group">
+                            ${sharing
+                                ? `<button class="active" @click="stopShare" title="Stop screen share">🛑 Stop sharing${shareAudio ? ' (with audio)' : ''}</button>`
+                                : `<button @click="startShare" ${hasShare ? '' : 'disabled'} title="${hasShare ? 'Share a screen, window or tab (audio capture optional)' : 'Screen share unsupported here'}">🖥️ Share screen</button>`}
+                        </div>
 
-                        ${sharing
-                            ? `<button class="active" @click="stopShare">🛑 Stop sharing</button>`
-                            : `<button @click="startShare">🖥️ Share screen</button>`}
+                        ${pinned ? `<button class="ghost" @click="unpin" title="Unpin focused tile">📌 Unpin</button>` : ''}
 
                         <div class="status-inline ${error ? 'error' : ''}">
                             ${error ? $.escapeHtml(error) : $.escapeHtml(status)}
@@ -420,12 +755,12 @@ $.component('video-room', {
                 </section>
 
                 <aside class="chat">
-                    <div class="chat-header">Chat</div>
+                    <div class="chat-header">Chat · ${messages.length}</div>
                     <div class="chat-log" id="chat-log">
                         ${chatLines || '<div class="empty">No messages yet. Say hi 👋</div>'}
                     </div>
                     <form class="chat-form" @submit="sendChat">
-                        <input type="text" value="${$.escapeHtml(draft)}" @input="setDraft" placeholder="Message #${$.escapeHtml(roomName)}" />
+                        <input type="text" value="${$.escapeHtml(draft)}" @input="setDraft" placeholder="Message #${$.escapeHtml(roomName)}" maxlength="500" />
                         <button type="submit" class="primary">Send</button>
                     </form>
                 </aside>
@@ -433,8 +768,57 @@ $.component('video-room', {
         `;
     },
 
+    _gridClass(n) {
+        if (n <= 1) return '1';
+        if (n === 2) return '2';
+        if (n <= 4) return '4';
+        if (n <= 6) return '6';
+        return '9';
+    },
+
+    _tileHtml(t, slot) {
+        const isScreen = t.kind === 'screen';
+        const audioAttr = t.isSelf ? 'muted' : '';
+        const cls = [
+            'tile',
+            'tile-' + slot,
+            'tile-' + t.kind,
+            t.isSelf ? 'self' : '',
+            t.muted ? 'muted-video' : '',
+            slot === 'strip' ? 'thumb' : '',
+        ].filter(Boolean).join(' ');
+
+        const overlay = t.muted && !isScreen
+            ? `<div class="camoff">Camera paused</div>`
+            : '';
+
+        const micChip = (!isScreen && t.micOn !== undefined)
+            ? `<span class="chip ${t.micMuted ? 'chip-off' : 'chip-on'}">${t.micMuted ? '🔇' : '🎤'}</span>`
+            : '';
+
+        const audioChip = (isScreen && t.badges && t.badges.length)
+            ? `<span class="chip chip-on">🔊</span>`
+            : '';
+
+        const label = `<div class="label">
+            <span class="label-name">${$.escapeHtml(t.name)}${t.isSelf ? '' : ''}</span>
+            ${micChip}${audioChip}
+            ${isScreen ? '<span class="chip chip-screen">🖥️</span>' : ''}
+        </div>`;
+
+        const pinBtn = `<button class="pin-btn" @click="pinTile('${t.id}', '${t.kind}')" title="Pin to focus">📌</button>`;
+
+        return `
+            <div class="${cls}">
+                <video z-stream="${t.streamBinding}" autoplay playsinline ${audioAttr}></video>
+                ${overlay}
+                ${label}
+                ${pinBtn}
+            </div>
+        `;
+    },
+
     updated() {
-        // Auto-scroll chat to the latest message after each render.
         const log = this._el && this._el.querySelector ? this._el.querySelector('#chat-log') : null;
         if (log) log.scrollTop = log.scrollHeight;
     },