@livepeer-frameworks/player-wc 0.1.2 → 0.1.4

package/dist/esm/components/fw-dev-mode-panel.js

@@ -1,133 +1,856 @@
 import { __decorate } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js';
-import { css, LitElement, html, nothing } from 'lit';
+import { css, LitElement, nothing, html } from 'lit';
 import { property, state, customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { sharedStyles } from '../styles/shared-styles.js';
 import { utilityStyles } from '../styles/utility-styles.js';
 import { closeIcon } from '../icons/index.js';
+import { globalPlayerManager, QualityMonitor } from '@livepeer-frameworks/player-core';
 
+const SOURCE_TYPE_LABELS = {
+    "html5/application/vnd.apple.mpegurl": "HLS",
+    "dash/video/mp4": "DASH",
+    "html5/video/mp4": "MP4",
+    "html5/video/webm": "WebM",
+    whep: "WHEP",
+    "mist/html": "Mist",
+    "mist/legacy": "Auto",
+    "ws/video/mp4": "MEWS",
+};
 let FwDevModePanel = class FwDevModePanel extends LitElement {
     constructor() {
         super(...arguments);
         this.playbackMode = "auto";
         this._activeTab = "config";
-        this._modes = ["auto", "low-latency", "quality"];
+        this._hoveredComboIndex = null;
+        this._tooltipAbove = false;
+        this._showDisabledPlayers = false;
+        this._playbackScore = 1;
+        this._qualityScore = 100;
+        this._stallCount = 0;
+        this._frameDropRate = 0;
+        this._videoStats = null;
+        this._playerStats = null;
+        this._qualityMonitor = null;
+        this._qualityMonitorVideo = null;
+        this._videoStatsInterval = null;
+        this._playerStatsInterval = null;
     }
-    render() {
-        const s = this.pc.s;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._stopQualityMonitor();
+        this._stopStatsPolling();
+    }
+    updated(_changed) {
+        this._syncQualityMonitor();
+        this._syncStatsPolling();
+    }
+    _getMistStreamInfo() {
+        return this.pc.s.streamState?.streamInfo;
+    }
+    _getAllCombinations() {
+        const streamInfo = this.pc.s.streamInfo;
+        if (!streamInfo) {
+            return [];
+        }
+        try {
+            return globalPlayerManager.getAllCombinations(streamInfo, this.playbackMode);
+        }
+        catch {
+            return [];
+        }
+    }
+    _getCompatibleCombinations() {
+        return this._getAllCombinations().filter((combo) => combo.compatible);
+    }
+    _getActiveComboIndex(combinations) {
+        const currentPlayer = this.pc.s.currentPlayerInfo;
+        const currentSource = this.pc.s.currentSourceInfo;
+        if (!currentPlayer || !currentSource || combinations.length === 0) {
+            return -1;
+        }
+        return combinations.findIndex((combo) => combo.player === currentPlayer.shortname && combo.sourceType === currentSource.type);
+    }
+    _syncQualityMonitor() {
+        const video = this.pc.s.videoElement;
+        if (!video) {
+            this._stopQualityMonitor();
+            return;
+        }
+        if (!this._qualityMonitor) {
+            this._qualityMonitor = new QualityMonitor({
+                sampleInterval: 500,
+                onSample: (quality) => {
+                    this._qualityScore = quality.score;
+                    this._stallCount = quality.stallCount;
+                    this._frameDropRate = quality.frameDropRate;
+                    this._playbackScore = this._qualityMonitor?.getPlaybackScore() ?? 1;
+                    this.requestUpdate();
+                },
+            });
+        }
+        if (this._qualityMonitorVideo !== video) {
+            this._qualityMonitor.stop();
+            this._qualityMonitor.start(video);
+            this._qualityMonitorVideo = video;
+        }
+    }
+    _stopQualityMonitor() {
+        this._qualityMonitor?.stop();
+        this._qualityMonitorVideo = null;
+    }
+    _syncStatsPolling() {
+        if (this._activeTab !== "stats") {
+            this._stopStatsPolling();
+            return;
+        }
+        if (!this._videoStatsInterval) {
+            this._updateVideoStats();
+            this._videoStatsInterval = setInterval(() => {
+                this._updateVideoStats();
+            }, 500);
+        }
+        if (!this._playerStatsInterval) {
+            void this._pollPlayerStats();
+            this._playerStatsInterval = setInterval(() => {
+                void this._pollPlayerStats();
+            }, 500);
+        }
+    }
+    _stopStatsPolling() {
+        if (this._videoStatsInterval) {
+            clearInterval(this._videoStatsInterval);
+            this._videoStatsInterval = null;
+        }
+        if (this._playerStatsInterval) {
+            clearInterval(this._playerStatsInterval);
+            this._playerStatsInterval = null;
+        }
+    }
+    _updateVideoStats() {
+        const video = this.pc.s.videoElement;
+        if (!video) {
+            this._videoStats = null;
+            return;
+        }
+        this._videoStats = {
+            resolution: `${video.videoWidth}x${video.videoHeight}`,
+            buffered: video.buffered.length > 0
+                ? (video.buffered.end(video.buffered.length - 1) - video.currentTime).toFixed(1)
+                : "0",
+            playbackRate: video.playbackRate.toFixed(2),
+            currentTime: video.currentTime.toFixed(1),
+            duration: Number.isFinite(video.duration) ? video.duration.toFixed(1) : "live",
+            readyState: video.readyState,
+            networkState: video.networkState,
+        };
+    }
+    async _pollPlayerStats() {
+        try {
+            const stats = await this.pc.getStats();
+            if (stats) {
+                this._playerStats = stats;
+            }
+        }
+        catch {
+            // No-op for optional stats backends.
+        }
+    }
+    _handleComboMouseEnter(index, event) {
+        this._hoveredComboIndex = index;
+        const container = this.renderRoot.querySelector(".fw-dev-body");
+        if (!container) {
+            return;
+        }
+        const row = event.currentTarget;
+        const containerRect = container.getBoundingClientRect();
+        const rowRect = row.getBoundingClientRect();
+        const relativePosition = (rowRect.top - containerRect.top) / containerRect.height;
+        this._tooltipAbove = relativePosition > 0.6;
+    }
+    _handleModeChange(mode) {
+        this.playbackMode = mode;
+        void this.pc.setDevModeOptions({ playbackMode: mode });
+        this.dispatchEvent(new CustomEvent("fw-playback-mode-change", {
+            detail: { mode },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleReload() {
+        this.pc.clearError();
+        void this.pc.reload();
+    }
+    _handleNextCombo() {
+        const compatible = this._getCompatibleCombinations();
+        if (compatible.length === 0) {
+            return;
+        }
+        const activeCompatibleIndex = this._getActiveComboIndex(compatible);
+        const startIndex = activeCompatibleIndex >= 0 ? activeCompatibleIndex : -1;
+        const nextIndex = (startIndex + 1) % compatible.length;
+        const next = compatible[nextIndex];
+        void this.pc.setDevModeOptions({
+            forcePlayer: next.player,
+            forceType: next.sourceType,
+            forceSource: next.sourceIndex,
+        });
+    }
+    _handleSelectCombo(index) {
+        const allCombinations = this._getAllCombinations();
+        const combo = allCombinations[index];
+        if (!combo) {
+            return;
+        }
+        void this.pc.setDevModeOptions({
+            forcePlayer: combo.player,
+            forceType: combo.sourceType,
+            forceSource: combo.sourceIndex,
+        });
+    }
+    _renderStatsTab() {
+        const primaryEndpoint = (this.pc.s.endpoints?.primary ?? null);
+        const stats = this._videoStats;
+        const playerStats = this._playerStats;
+        const mistStreamInfo = this._getMistStreamInfo();
+        const trackEntries = Object.entries(mistStreamInfo?.meta?.tracks ?? {});
         return html `
-      <div class="panel fw-dev-panel">
-        <div class="header fw-dev-header">
-          <div class="tabs">
-            <button
-              class=${classMap({ tab: true, "tab--active": this._activeTab === "config" })}
-              @click=${() => {
-            this._activeTab = "config";
-        }}
+      <div class="fw-dev-body">
+        <div class="fw-dev-section">
+          <div class="fw-dev-label">Playback Rate</div>
+          <div class="fw-dev-rate">
+            <div
+              class=${classMap({
+            "fw-dev-rate-value": true,
+            "fw-dev-stat-value--good": this._playbackScore >= 0.95 && this._playbackScore <= 1.05,
+            "fw-dev-stat-value--accent": this._playbackScore > 1.05,
+            "fw-dev-stat-value--warn": this._playbackScore >= 0.75 && this._playbackScore < 0.95,
+            "fw-dev-stat-value--bad": this._playbackScore < 0.75,
+        })}
             >
-              Config
-            </button>
-            <button
-              class=${classMap({ tab: true, "tab--active": this._activeTab === "stats" })}
-              @click=${() => {
-            this._activeTab = "stats";
-        }}
+              ${this._playbackScore.toFixed(2)}x
+            </div>
+            <div class="fw-dev-rate-status">
+              ${this._playbackScore >= 0.95 && this._playbackScore <= 1.05
+            ? "realtime"
+            : this._playbackScore > 1.05
+                ? "catching up"
+                : this._playbackScore >= 0.75
+                    ? "slightly slow"
+                    : "stalling"}
+            </div>
+          </div>
+          <div class="fw-dev-rate-stats">
+            <span
+              class=${classMap({
+            "fw-dev-stat-value--good": this._qualityScore >= 75,
+            "fw-dev-stat-value--bad": this._qualityScore < 75,
+        })}
+            >
+              Quality: ${this._qualityScore}/100
+            </span>
+            <span
+              class=${classMap({
+            "fw-dev-stat-value--good": this._stallCount === 0,
+            "fw-dev-stat-value--warn": this._stallCount > 0,
+        })}
+            >
+              Stalls: ${this._stallCount}
+            </span>
+            <span
+              class=${classMap({
+            "fw-dev-stat-value--good": this._frameDropRate < 1,
+            "fw-dev-stat-value--bad": this._frameDropRate >= 1,
+        })}
             >
-              Stats
-            </button>
+              Drops: ${this._frameDropRate.toFixed(1)}%
+            </span>
           </div>
-          <button
-            class="close"
-            @click=${() => this.dispatchEvent(new CustomEvent("fw-close", { bubbles: true, composed: true }))}
-            aria-label="Close panel"
-          >
-            ${closeIcon()}
-          </button>
         </div>
 
-        <div class="body fw-dev-body">
-          ${this._activeTab === "config" ? this._renderConfig(s) : this._renderStats(s)}
-        </div>
+        ${stats
+            ? html `
+              <div class="fw-dev-stat">
+                <span class="fw-dev-stat-label">Resolution</span>
+                <span class="fw-dev-stat-value">${stats.resolution}</span>
+              </div>
+              <div class="fw-dev-stat">
+                <span class="fw-dev-stat-label">Buffer</span>
+                <span class="fw-dev-stat-value">${stats.buffered}s</span>
+              </div>
+              <div class="fw-dev-stat">
+                <span class="fw-dev-stat-label">Playback Rate</span>
+                <span class="fw-dev-stat-value">${stats.playbackRate}x</span>
+              </div>
+              <div class="fw-dev-stat">
+                <span class="fw-dev-stat-label">Time</span>
+                <span class="fw-dev-stat-value">${stats.currentTime} / ${stats.duration}</span>
+              </div>
+              <div class="fw-dev-stat">
+                <span class="fw-dev-stat-label">Ready State</span>
+                <span class="fw-dev-stat-value">${stats.readyState}</span>
+              </div>
+              <div class="fw-dev-stat">
+                <span class="fw-dev-stat-label">Network State</span>
+                <span class="fw-dev-stat-value">${stats.networkState}</span>
+              </div>
+              ${primaryEndpoint?.protocol
+                ? html `
+                    <div class="fw-dev-stat">
+                      <span class="fw-dev-stat-label">Protocol</span>
+                      <span class="fw-dev-stat-value">${primaryEndpoint.protocol}</span>
+                    </div>
+                  `
+                : nothing}
+              ${primaryEndpoint?.nodeId
+                ? html `
+                    <div class="fw-dev-stat">
+                      <span class="fw-dev-stat-label">Node ID</span>
+                      <span
+                        class="fw-dev-stat-value"
+                        style="max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
+                        >${primaryEndpoint.nodeId}</span
+                      >
+                    </div>
+                  `
+                : nothing}
+            `
+            : html `<div class="fw-dev-list-empty">No video element available</div>`}
+        ${playerStats
+            ? html `
+              <div class="fw-dev-list-header fw-dev-section-header">
+                <span class="fw-dev-list-title"
+                  >${playerStats.type === "hls"
+                ? "HLS.js Stats"
+                : playerStats.type === "webrtc"
+                    ? "WebRTC Stats"
+                    : "Player Stats"}</span
+                >
+              </div>
+
+              ${playerStats.type === "hls"
+                ? html `
+                    <div class="fw-dev-stat">
+                      <span class="fw-dev-stat-label">Bitrate</span>
+                      <span class="fw-dev-stat-value--accent"
+                        >${typeof playerStats.currentBitrate === "number" &&
+                    playerStats.currentBitrate > 0
+                    ? `${Math.round(playerStats.currentBitrate / 1000)} kbps`
+                    : "N/A"}</span
+                      >
+                    </div>
+                    <div class="fw-dev-stat">
+                      <span class="fw-dev-stat-label">Bandwidth Est.</span>
+                      <span class="fw-dev-stat-value"
+                        >${typeof playerStats.bandwidthEstimate === "number" &&
+                    playerStats.bandwidthEstimate > 0
+                    ? `${Math.round(playerStats.bandwidthEstimate / 1000)} kbps`
+                    : "N/A"}</span
+                      >
+                    </div>
+                    <div class="fw-dev-stat">
+                      <span class="fw-dev-stat-label">Level</span>
+                      <span class="fw-dev-stat-value"
+                        >${typeof playerStats.currentLevel === "number" &&
+                    playerStats.currentLevel >= 0
+                    ? playerStats.currentLevel
+                    : "Auto"}
+                        / ${Array.isArray(playerStats.levels) ? playerStats.levels.length : 0}</span
+                      >
+                    </div>
+                    ${typeof playerStats.latency === "number"
+                    ? html `
+                          <div class="fw-dev-stat">
+                            <span class="fw-dev-stat-label">Latency</span>
+                            <span
+                              class=${classMap({
+                        "fw-dev-stat-value": true,
+                        "fw-dev-stat-value--warn": playerStats.latency > 5000,
+                    })}
+                              >${Math.round(playerStats.latency)} ms</span
+                            >
+                          </div>
+                        `
+                    : nothing}
+                  `
+                : nothing}
+              ${playerStats.type === "webrtc"
+                ? html `
+                    ${playerStats.video
+                    ? html `
+                          <div class="fw-dev-stat">
+                            <span class="fw-dev-stat-label">Video Bitrate</span>
+                            <span class="fw-dev-stat-value--accent"
+                              >${typeof playerStats.video.bitrate === "number" &&
+                        playerStats.video.bitrate > 0
+                        ? `${Math.round(playerStats.video.bitrate / 1000)} kbps`
+                        : "N/A"}</span
+                            >
+                          </div>
+                          <div class="fw-dev-stat">
+                            <span class="fw-dev-stat-label">FPS</span>
+                            <span class="fw-dev-stat-value"
+                              >${Math.round(playerStats.video.framesPerSecond || 0)}</span
+                            >
+                          </div>
+                          <div class="fw-dev-stat">
+                            <span class="fw-dev-stat-label">Frames</span>
+                            <span class="fw-dev-stat-value"
+                              >${playerStats.video.framesDecoded} decoded,
+                              <span
+                                class=${classMap({
+                        "fw-dev-stat-value--bad": (playerStats.video.frameDropRate || 0) > 1,
+                        "fw-dev-stat-value--good": (playerStats.video.frameDropRate || 0) <= 1,
+                    })}
+                                >${playerStats.video.framesDropped} dropped</span
+                              ></span
+                            >
+                          </div>
+                          <div class="fw-dev-stat">
+                            <span class="fw-dev-stat-label">Packet Loss</span>
+                            <span
+                              class=${classMap({
+                        "fw-dev-stat-value--bad": (playerStats.video.packetLossRate || 0) > 1,
+                        "fw-dev-stat-value--good": (playerStats.video.packetLossRate || 0) <= 1,
+                    })}
+                              >${(playerStats.video.packetLossRate || 0).toFixed(2)}%</span
+                            >
+                          </div>
+                          <div class="fw-dev-stat">
+                            <span class="fw-dev-stat-label">Jitter</span>
+                            <span
+                              class=${classMap({
+                        "fw-dev-stat-value": true,
+                        "fw-dev-stat-value--warn": (playerStats.video.jitter || 0) > 30,
+                    })}
+                              >${(playerStats.video.jitter || 0).toFixed(1)}
+                              ms</span
+                            >
+                          </div>
+                          <div class="fw-dev-stat">
+                            <span class="fw-dev-stat-label">Jitter Buffer</span>
+                            <span class="fw-dev-stat-value"
+                              >${(playerStats.video.jitterBufferDelay || 0).toFixed(1)}
+                              ms</span
+                            >
+                          </div>
+                        `
+                    : nothing}
+                    ${playerStats.network
+                    ? html `
+                          <div class="fw-dev-stat">
+                            <span class="fw-dev-stat-label">RTT</span>
+                            <span
+                              class=${classMap({
+                        "fw-dev-stat-value": true,
+                        "fw-dev-stat-value--warn": (playerStats.network.rtt || 0) > 200,
+                    })}
+                              >${Math.round((playerStats.network.rtt || 0))}
+                              ms</span
+                            >
+                          </div>
+                        `
+                    : nothing}
+                  `
+                : nothing}
+            `
+            : nothing}
+        ${trackEntries.length > 0
+            ? html `
+              <div class="fw-dev-list-header fw-dev-section-header">
+                <span class="fw-dev-list-title">Tracks (${trackEntries.length})</span>
+              </div>
+              ${trackEntries.map(([id, track]) => {
+                const typedTrack = track;
+                return html `
+                  <div class="fw-dev-track">
+                    <div class="fw-dev-track-header">
+                      <span
+                        class=${classMap({
+                    "fw-dev-track-badge": true,
+                    "fw-dev-track-badge--video": typedTrack.type === "video",
+                    "fw-dev-track-badge--audio": typedTrack.type === "audio",
+                    "fw-dev-track-badge--other": typedTrack.type !== "video" && typedTrack.type !== "audio",
+                })}
+                        >${typedTrack.type}</span
+                      >
+                      <span class="fw-dev-track-codec">${typedTrack.codec}</span>
+                      <span class="fw-dev-track-id">#${id}</span>
+                    </div>
+                    <div class="fw-dev-track-meta">
+                      ${typedTrack.type === "video" && typedTrack.width && typedTrack.height
+                    ? html `<span>${typedTrack.width}x${typedTrack.height}</span>`
+                    : nothing}
+                      ${typedTrack.bps
+                    ? html `<span>${Math.round(typedTrack.bps / 1000)} kbps</span>`
+                    : nothing}
+                      ${typedTrack.fpks
+                    ? html `<span>${Math.round(typedTrack.fpks / 1000)} fps</span>`
+                    : nothing}
+                      ${typedTrack.type === "audio" && typedTrack.channels
+                    ? html `<span>${typedTrack.channels}ch</span>`
+                    : nothing}
+                      ${typedTrack.type === "audio" && typedTrack.rate
+                    ? html `<span>${typedTrack.rate} Hz</span>`
+                    : nothing}
+                      ${typedTrack.lang ? html `<span>${typedTrack.lang}</span>` : nothing}
+                    </div>
+                  </div>
+                `;
+            })}
+            `
+            : nothing}
+        ${mistStreamInfo && trackEntries.length === 0
+            ? html `
+              <div class="fw-dev-no-tracks">
+                <span class="fw-dev-no-tracks-text"
+                  >No track data available
+                  ${mistStreamInfo.type
+                ? html `<span class="fw-dev-no-tracks-type">(${mistStreamInfo.type})</span>`
+                : nothing}</span
+                >
+              </div>
+            `
+            : nothing}
       </div>
     `;
     }
-    _renderConfig(s) {
+    _renderConfigTab() {
+        const allCombinations = this._getAllCombinations();
+        const compatibleCombinations = allCombinations.filter((combo) => combo.compatible);
+        const activeComboIndex = this._getActiveComboIndex(allCombinations);
+        const currentPlayer = this.pc.s.currentPlayerInfo;
+        const currentSource = this.pc.s.currentSourceInfo;
         return html `
-      <div class="section">
-        <div class="label">Current Player</div>
-        <div class="value">${s.currentPlayerInfo?.name ?? "—"}</div>
-      </div>
-      <div class="section">
-        <div class="label">Current Source</div>
-        <div class="value">${s.currentSourceInfo?.type ?? "—"}</div>
-      </div>
-      <div class="section">
-        <div class="label">Playback Mode</div>
-        <div class="mode-group fw-dev-mode-group">
-          ${this._modes.map((mode) => html `
-              <button
-                class=${classMap({
-            "mode-btn": true,
+      <div class="fw-dev-body">
+        <div class="fw-dev-section">
+          <div class="fw-dev-label">Active</div>
+          <div class="fw-dev-value">
+            ${currentPlayer?.name || "None"}
+            <span class="fw-dev-value-arrow">${"\u2192"}</span>
+            ${SOURCE_TYPE_LABELS[currentSource?.type || ""] || currentSource?.type || "-"}
+          </div>
+          ${this.pc.s.endpoints?.primary?.nodeId
+            ? html `
+                <div class="fw-dev-value-muted">
+                  Node: ${(this.pc.s.endpoints?.primary).nodeId}
+                </div>
+              `
+            : nothing}
+        </div>
+
+        <div class="fw-dev-section">
+          <div class="fw-dev-label">Playback Mode</div>
+          <div class="fw-dev-mode-group">
+            ${["auto", "low-latency", "quality"].map((mode) => html `
+                <button
+                  type="button"
+                  class=${classMap({
             "fw-dev-mode-btn": true,
-            "mode-btn--active": this.playbackMode === mode,
             "fw-dev-mode-btn--active": this.playbackMode === mode,
         })}
-                @click=${() => this.pc.setDevModeOptions({ playbackMode: mode })}
-              >
-                ${mode}
-              </button>
-            `)}
+                  @click=${() => this._handleModeChange(mode)}
+                >
+                  ${mode === "low-latency"
+            ? "Low Lat"
+            : `${mode.charAt(0).toUpperCase()}${mode.slice(1)}`}
+                </button>
+              `)}
+          </div>
+          <div class="fw-dev-mode-desc">
+            ${this.playbackMode === "auto"
+            ? "Balanced: MP4/WS \u2192 WHEP \u2192 HLS"
+            : this.playbackMode === "low-latency"
+                ? "WHEP/WebRTC first (<1s delay)"
+                : "MP4/WS first, HLS fallback"}
+          </div>
+        </div>
+
+        <div class="fw-dev-actions">
+          <button type="button" class="fw-dev-action-btn" @click=${this._handleReload}>
+            Reload
+          </button>
+          <button type="button" class="fw-dev-action-btn" @click=${this._handleNextCombo}>
+            Next Option
+          </button>
+        </div>
+
+        <div class="fw-dev-section" style="padding:0;border-bottom:0;">
+          <div class="fw-dev-list-header">
+            <span class="fw-dev-list-title">Player Options (${compatibleCombinations.length})</span>
+            ${allCombinations.length > compatibleCombinations.length
+            ? html `
+                  <button
+                    type="button"
+                    class="fw-dev-list-toggle"
+                    @click=${() => {
+                this._showDisabledPlayers = !this._showDisabledPlayers;
+            }}
+                  >
+                    <svg
+                      width="10"
+                      height="10"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      class=${classMap({
+                "fw-dev-chevron": true,
+                "fw-dev-chevron--open": this._showDisabledPlayers,
+            })}
+                    >
+                      <path d="M6 9l6 6 6-6"></path>
+                    </svg>
+                    ${this._showDisabledPlayers ? "Hide" : "Show"} disabled
+                    (${allCombinations.length - compatibleCombinations.length})
+                  </button>
+                `
+            : nothing}
+          </div>
+
+          ${allCombinations.length === 0
+            ? html `<div class="fw-dev-list-empty">No stream info available</div>`
+            : html `
+                ${allCombinations.map((combo, index) => {
+                const isCodecIncompatible = combo.codecIncompatible === true;
+                if (!combo.compatible && !isCodecIncompatible && !this._showDisabledPlayers) {
+                    return nothing;
+                }
+                const isActive = activeComboIndex === index;
+                const typeLabel = SOURCE_TYPE_LABELS[combo.sourceType] || combo.sourceType.split("/").pop();
+                const scoreClass = !combo.compatible && !isCodecIncompatible
+                    ? "fw-dev-combo-score--disabled"
+                    : isCodecIncompatible
+                        ? "fw-dev-combo-score--low"
+                        : combo.score >= 2
+                            ? "fw-dev-combo-score--high"
+                            : combo.score >= 1.5
+                                ? "fw-dev-combo-score--mid"
+                                : "fw-dev-combo-score--low";
+                const rankClass = isActive
+                    ? "fw-dev-combo-rank--active"
+                    : !combo.compatible && !isCodecIncompatible
+                        ? "fw-dev-combo-rank--disabled"
+                        : isCodecIncompatible
+                            ? "fw-dev-combo-rank--warn"
+                            : "";
+                const typeClass = !combo.compatible && !isCodecIncompatible
+                    ? "fw-dev-combo-type--disabled"
+                    : isCodecIncompatible
+                        ? "fw-dev-combo-type--warn"
+                        : "";
+                return html `
+                    <div
+                      class="fw-dev-combo"
+                      @mouseenter=${(event) => this._handleComboMouseEnter(index, event)}
+                      @mouseleave=${() => {
+                    this._hoveredComboIndex = null;
+                }}
+                    >
+                      <button
+                        type="button"
+                        class=${classMap({
+                    "fw-dev-combo-btn": true,
+                    "fw-dev-combo-btn--active": isActive,
+                    "fw-dev-combo-btn--disabled": !combo.compatible && !isCodecIncompatible,
+                    "fw-dev-combo-btn--codec-warn": isCodecIncompatible,
+                })}
+                        @click=${() => this._handleSelectCombo(index)}
+                      >
+                        <span
+                          class=${classMap({
+                    "fw-dev-combo-rank": true,
+                    [rankClass]: rankClass.length > 0,
+                })}
+                          >${combo.compatible
+                    ? index + 1
+                    : isCodecIncompatible
+                        ? "\u26A0"
+                        : "\u2014"}</span
+                        >
+
+                        <span class="fw-dev-combo-name"
+                          >${combo.playerName} <span class="fw-dev-combo-arrow">${"\u2192"}</span>
+                          <span
+                            class=${classMap({
+                    "fw-dev-combo-type": true,
+                    [typeClass]: typeClass.length > 0,
+                })}
+                            >${typeLabel}</span
+                          ></span
+                        >
+
+                        <span class=${classMap({ "fw-dev-combo-score": true, [scoreClass]: true })}
+                          >${combo.score.toFixed(2)}</span
+                        >
+                      </button>
+
+                      ${this._hoveredComboIndex === index
+                    ? html `
+                            <div
+                              class=${classMap({
+                        "fw-dev-tooltip": true,
+                        "fw-dev-tooltip--above": this._tooltipAbove,
+                        "fw-dev-tooltip--below": !this._tooltipAbove,
+                    })}
+                            >
+                              <div class="fw-dev-tooltip-header">
+                                <div class="fw-dev-tooltip-title">${combo.playerName}</div>
+                                <div class="fw-dev-tooltip-subtitle">${combo.sourceType}</div>
+                                ${combo.scoreBreakdown?.trackTypes &&
+                        combo.scoreBreakdown.trackTypes.length > 0
+                        ? html `
+                                      <div class="fw-dev-tooltip-tracks">
+                                        Tracks:
+                                        <span class="fw-dev-tooltip-value"
+                                          >${combo.scoreBreakdown.trackTypes.join(", ")}</span
+                                        >
+                                      </div>
+                                    `
+                        : nothing}
+                              </div>
+
+                              ${combo.compatible && combo.scoreBreakdown
+                        ? html `
+                                    <div class="fw-dev-tooltip-score">
+                                      Score: ${combo.score.toFixed(2)}
+                                    </div>
+                                    <div class="fw-dev-tooltip-row">
+                                      Tracks [${combo.scoreBreakdown.trackTypes.join(", ")}]:
+                                      <span class="fw-dev-tooltip-value"
+                                        >${combo.scoreBreakdown.trackScore.toFixed(2)}</span
+                                      >
+                                      <span class="fw-dev-tooltip-weight"
+                                        >x${combo.scoreBreakdown.weights.tracks}</span
+                                      >
+                                    </div>
+                                    <div class="fw-dev-tooltip-row">
+                                      Priority:
+                                      <span class="fw-dev-tooltip-value"
+                                        >${combo.scoreBreakdown.priorityScore.toFixed(2)}</span
+                                      >
+                                      <span class="fw-dev-tooltip-weight"
+                                        >x${combo.scoreBreakdown.weights.priority}</span
+                                      >
+                                    </div>
+                                    <div class="fw-dev-tooltip-row">
+                                      Source:
+                                      <span class="fw-dev-tooltip-value"
+                                        >${combo.scoreBreakdown.sourceScore.toFixed(2)}</span
+                                      >
+                                      <span class="fw-dev-tooltip-weight"
+                                        >x${combo.scoreBreakdown.weights.source}</span
+                                      >
+                                    </div>
+
+                                    ${typeof combo.scoreBreakdown.reliabilityScore === "number"
+                            ? html `
+                                          <div class="fw-dev-tooltip-row">
+                                            Reliability:
+                                            <span class="fw-dev-tooltip-value"
+                                              >${combo.scoreBreakdown.reliabilityScore.toFixed(2)}</span
+                                            >
+                                            <span class="fw-dev-tooltip-weight"
+                                              >x${combo.scoreBreakdown.weights.reliability ??
+                                0}</span
+                                            >
+                                          </div>
+                                        `
+                            : nothing}
+                                    ${typeof combo.scoreBreakdown.modeBonus === "number" &&
+                            combo.scoreBreakdown.modeBonus !== 0
+                            ? html `
+                                          <div class="fw-dev-tooltip-row">
+                                            Mode (${this.playbackMode}):
+                                            <span class="fw-dev-tooltip-bonus"
+                                              >+${combo.scoreBreakdown.modeBonus.toFixed(2)}</span
+                                            >
+                                            <span class="fw-dev-tooltip-weight"
+                                              >x${combo.scoreBreakdown.weights.mode ?? 0}</span
+                                            >
+                                          </div>
+                                        `
+                            : nothing}
+                                    ${typeof combo.scoreBreakdown.routingBonus === "number" &&
+                            combo.scoreBreakdown.routingBonus !== 0
+                            ? html `
+                                          <div class="fw-dev-tooltip-row">
+                                            Routing:
+                                            <span
+                                              class=${classMap({
+                                "fw-dev-tooltip-bonus": combo.scoreBreakdown.routingBonus > 0,
+                                "fw-dev-tooltip-penalty": combo.scoreBreakdown.routingBonus < 0,
+                            })}
+                                              >${combo.scoreBreakdown.routingBonus > 0
+                                ? "+"
+                                : ""}${combo.scoreBreakdown.routingBonus.toFixed(2)}</span
+                                            >
+                                            <span class="fw-dev-tooltip-weight"
+                                              >x${combo.scoreBreakdown.weights.routing ?? 0}</span
+                                            >
+                                          </div>
+                                        `
+                            : nothing}
+                                  `
+                        : html `
+                                    <div class="fw-dev-tooltip-error">
+                                      ${combo.incompatibleReason || "Incompatible"}
+                                    </div>
+                                  `}
+                            </div>
+                          `
+                    : nothing}
+                    </div>
+                  `;
+            })}
+              `}
         </div>
-      </div>
-      <div class="actions fw-dev-actions">
-        <button
-          class="action-btn fw-dev-action-btn"
-          @click=${() => {
-            this.pc.clearError();
-            this.pc.reload();
-        }}
-        >
-          Reload
-        </button>
       </div>
     `;
     }
-    _renderStats(s) {
-        const q = s.playbackQuality;
+    render() {
         return html `
-      <div class="section">
-        <div class="label">Playback</div>
-        ${this._row("State", s.state)}
-        ${this._row("Time", `${s.currentTime.toFixed(1)}s / ${isFinite(s.duration) ? s.duration.toFixed(1) + "s" : "∞"}`)}
-        ${this._row("Volume", `${Math.round(s.volume * 100)}%${s.isMuted ? " (muted)" : ""}`)}
+      <div class="fw-dev-panel">
+        <div class="fw-dev-header">
+          <button
+            type="button"
+            class=${classMap({
+            "fw-dev-tab": true,
+            "fw-dev-tab--active": this._activeTab === "config",
+        })}
+            @click=${() => {
+            this._activeTab = "config";
+        }}
+          >
+            Config
+          </button>
+          <button
+            type="button"
+            class=${classMap({
+            "fw-dev-tab": true,
+            "fw-dev-tab--active": this._activeTab === "stats",
+        })}
+            @click=${() => {
+            this._activeTab = "stats";
+        }}
+          >
+            Stats
+          </button>
+          <div class="fw-dev-spacer"></div>
+          <button
+            type="button"
+            class="fw-dev-close"
+            aria-label="Close dev mode panel"
+            @click=${() => this.dispatchEvent(new CustomEvent("fw-close", { bubbles: true, composed: true }))}
+          >
+            ${closeIcon()}
+          </button>
+        </div>
+
+        ${this._activeTab === "config" ? this._renderConfigTab() : this._renderStatsTab()}
       </div>
-      ${q
-            ? html `
-            <div class="section">
-              <div class="label">Quality</div>
-              ${this._row("Resolution", this._resolution())}
-              ${this._row("Bitrate", q.bitrate ? `${Math.round(q.bitrate / 1000)} kbps` : "—")}
-              ${this._row("Latency", q.latency != null ? `${q.latency.toFixed(2)}s` : "—")}
-              ${this._row("Buffer", q.bufferedAhead != null ? `${q.bufferedAhead.toFixed(1)}s` : "—")}
-              ${this._row("Score", q.score != null ? `${q.score.toFixed(0)}` : "—")}
-              ${this._row("Drops", `${q.frameDropRate?.toFixed(1) ?? "0"}%`)}
-              ${this._row("Stalls", `${q.stallCount ?? 0}`)}
-            </div>
-          `
-            : nothing}
     `;
     }
-    _resolution() {
-        const video = this.pc.s.videoElement;
-        if (!video || !video.videoWidth || !video.videoHeight)
-            return "—";
-        return `${video.videoWidth}×${video.videoHeight}`;
-    }
-    _row(label, value) {
-        return html `<div class="stat-row">
-      <span class="stat-label">${label}</span><span class="stat-value">${value}</span>
-    </div>`;
-    }
 };
 FwDevModePanel.styles = [
     sharedStyles,
@@ -135,124 +858,7 @@ FwDevModePanel.styles = [
     css `
       :host {
         display: block;
-      }
-      .panel {
-        width: 320px;
         height: 100%;
-        border-left: 1px solid rgb(255 255 255 / 0.1);
-        background: rgb(15 23 42);
-        overflow: auto;
-        font-size: 0.75rem;
-        color: rgb(255 255 255 / 0.7);
-      }
-      .header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0.5rem 0.75rem;
-        border-bottom: 1px solid rgb(255 255 255 / 0.1);
-      }
-      .tabs {
-        display: flex;
-        gap: 0.5rem;
-      }
-      .tab {
-        padding: 0.25rem 0.5rem;
-        border: none;
-        background: none;
-        color: rgb(255 255 255 / 0.5);
-        font-size: 0.6875rem;
-        font-weight: 600;
-        cursor: pointer;
-        border-radius: 0.25rem;
-      }
-      .tab--active {
-        color: white;
-        background: rgb(255 255 255 / 0.1);
-      }
-      .close {
-        display: flex;
-        background: none;
-        border: none;
-        color: rgb(255 255 255 / 0.5);
-        cursor: pointer;
-        padding: 0;
-      }
-      .close:hover {
-        color: white;
-      }
-      .body {
-        padding: 0.75rem;
-      }
-      .section {
-        margin-bottom: 0.75rem;
-      }
-      .label {
-        font-size: 0.625rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        color: rgb(255 255 255 / 0.4);
-        margin-bottom: 0.375rem;
-      }
-      .value {
-        color: rgb(255 255 255 / 0.9);
-        font-family: ui-monospace, monospace;
-      }
-      .mode-group {
-        display: flex;
-        gap: 0.25rem;
-        flex-wrap: wrap;
-      }
-      .mode-btn {
-        padding: 0.25rem 0.5rem;
-        border: 1px solid rgb(255 255 255 / 0.15);
-        background: none;
-        color: rgb(255 255 255 / 0.6);
-        font-size: 0.6875rem;
-        cursor: pointer;
-        border-radius: 0.25rem;
-        transition: all 150ms;
-      }
-      .mode-btn:hover {
-        border-color: rgb(255 255 255 / 0.3);
-        color: white;
-      }
-      .mode-btn--active {
-        border-color: hsl(var(--tn-blue, 217 89% 61%));
-        color: hsl(var(--tn-blue, 217 89% 61%));
-        background: hsl(var(--tn-blue, 217 89% 61%) / 0.1);
-      }
-      .actions {
-        display: flex;
-        gap: 0.5rem;
-        margin-top: 0.5rem;
-      }
-      .action-btn {
-        padding: 0.375rem 0.75rem;
-        border: 1px solid rgb(255 255 255 / 0.15);
-        background: none;
-        color: rgb(255 255 255 / 0.7);
-        font-size: 0.6875rem;
-        cursor: pointer;
-        border-radius: 0.25rem;
-      }
-      .action-btn:hover {
-        border-color: rgb(255 255 255 / 0.3);
-        color: white;
-      }
-      .stat-row {
-        display: flex;
-        justify-content: space-between;
-        padding: 0.125rem 0;
-      }
-      .stat-label {
-        color: rgb(255 255 255 / 0.4);
-      }
-      .stat-value {
-        color: rgb(255 255 255 / 0.8);
-        font-family: ui-monospace, monospace;
-        font-variant-numeric: tabular-nums;
       }
     `,
 ];
@@ -265,6 +871,33 @@ __decorate([
 __decorate([
     state()
 ], FwDevModePanel.prototype, "_activeTab", void 0);
+__decorate([
+    state()
+], FwDevModePanel.prototype, "_hoveredComboIndex", void 0);
+__decorate([
+    state()
+], FwDevModePanel.prototype, "_tooltipAbove", void 0);
+__decorate([
+    state()
+], FwDevModePanel.prototype, "_showDisabledPlayers", void 0);
+__decorate([
+    state()
+], FwDevModePanel.prototype, "_playbackScore", void 0);
+__decorate([
+    state()
+], FwDevModePanel.prototype, "_qualityScore", void 0);
+__decorate([
+    state()
+], FwDevModePanel.prototype, "_stallCount", void 0);
+__decorate([
+    state()
+], FwDevModePanel.prototype, "_frameDropRate", void 0);
+__decorate([
+    state()
+], FwDevModePanel.prototype, "_videoStats", void 0);
+__decorate([
+    state()
+], FwDevModePanel.prototype, "_playerStats", void 0);
 FwDevModePanel = __decorate([
     customElement("fw-dev-mode-panel")
 ], FwDevModePanel);