@livepeer-frameworks/player-svelte 0.2.1 → 0.2.5

package/README.md

@@ -16,14 +16,15 @@ npm i @livepeer-frameworks/player-svelte
 
 ```svelte
 <script lang="ts">
-  import { Player } from '@livepeer-frameworks/player-svelte';
+  import { Player } from "@livepeer-frameworks/player-svelte";
 </script>
 
 <div style="width: 100%; height: 500px;">
   <Player
     contentType="live"
-    contentId="pk_..." // playbackId
-    options={{ gatewayUrl: 'https://your-bridge/graphql' }}
+    contentId="pk_..."
+    // playbackId
+    options={{ gatewayUrl: "https://your-bridge/graphql" }}
   />
 </div>
 ```

package/dist/DevModePanel.svelte

@@ -375,7 +375,9 @@
           {:else}
             {#each allCombinations as combo, index}
               {@const isCodecIncompat = (combo as any).codecIncompatible === true}
-              {@const shouldShow = combo.compatible || isCodecIncompat || showDisabledPlayers}
+              {@const isPartial = ((combo as any).missingTracks?.length ?? 0) > 0}
+              {@const isWarn = isCodecIncompat || isPartial}
+              {@const shouldShow = combo.compatible || isWarn || showDisabledPlayers}
               {@const isActive = activeComboIndex === index}
               {@const typeLabel =
                 SOURCE_TYPE_LABELS[combo.sourceType] || combo.sourceType.split("/").pop()}
@@ -396,8 +398,8 @@
                     class={cn(
                       "fw-dev-combo-btn",
                       isActive && "fw-dev-combo-btn--active",
-                      !combo.compatible && !isCodecIncompat && "fw-dev-combo-btn--disabled",
-                      isCodecIncompat && "fw-dev-combo-btn--codec-warn"
+                      !combo.compatible && !isWarn && "fw-dev-combo-btn--disabled",
+                      isWarn && "fw-dev-combo-btn--codec-warn"
                     )}
                   >
                     <!-- Rank -->
@@ -406,14 +408,14 @@
                         "fw-dev-combo-rank",
                         isActive
                           ? "fw-dev-combo-rank--active"
-                          : !combo.compatible && !isCodecIncompat
+                          : !combo.compatible && !isWarn
                             ? "fw-dev-combo-rank--disabled"
-                            : isCodecIncompat
+                            : isWarn
                               ? "fw-dev-combo-rank--warn"
                               : ""
                       )}
                     >
-                      {combo.compatible ? index + 1 : isCodecIncompat ? "⚠" : "—"}
+                      {combo.compatible && !isPartial ? index + 1 : isWarn ? "⚠" : "—"}
                     </span>
                     <!-- Player + Protocol -->
                     <span class="fw-dev-combo-name">
@@ -422,8 +424,8 @@
                       <span
                         class={cn(
                           "fw-dev-combo-type",
-                          isCodecIncompat && "fw-dev-combo-type--warn",
-                          !combo.compatible && !isCodecIncompat && "fw-dev-combo-type--disabled"
+                          isWarn && "fw-dev-combo-type--warn",
+                          !combo.compatible && !isWarn && "fw-dev-combo-type--disabled"
                         )}>{typeLabel}</span
                       >
                     </span>
@@ -431,9 +433,9 @@
                     <span
                       class={cn(
                         "fw-dev-combo-score",
-                        !combo.compatible && !isCodecIncompat
+                        !combo.compatible && !isWarn
                           ? "fw-dev-combo-score--disabled"
-                          : isCodecIncompat
+                          : isWarn
                             ? "fw-dev-combo-score--low"
                             : combo.score >= 2
                               ? "fw-dev-combo-score--high"
@@ -463,6 +465,14 @@
                           </div>
                         {/if}
                       </div>
+                      {#if combo.note}
+                        <div class="fw-dev-tooltip-note">{combo.note}</div>
+                      {/if}
+                      {#if isPartial}
+                        <div class="fw-dev-tooltip-note">
+                          No compatible {(combo as any).missingTracks.join(", ")} codec
+                        </div>
+                      {/if}
                       {#if combo.compatible && combo.scoreBreakdown}
                         <div class="fw-dev-tooltip-score">Score: {combo.score.toFixed(2)}</div>
                         <div class="fw-dev-tooltip-row">

package/dist/IdleScreen.svelte

@@ -14,6 +14,7 @@
 -->
 <script lang="ts">
   import { onMount, onDestroy, getContext } from "svelte";
+  import { readable } from "svelte/store";
   import type { Readable } from "svelte/store";
   import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
   import type { StreamStatus } from "@livepeer-frameworks/player-core";
@@ -28,9 +29,10 @@
     onRetry?: () => void;
   }
 
-  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
-  const fallbackT = createTranslator({ locale: "en" });
-  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
 
   let {
     status = "OFFLINE",

package/dist/LoadingScreen.svelte

@@ -13,14 +13,16 @@
 -->
 <script lang="ts">
   import { onMount, onDestroy, getContext } from "svelte";
+  import { readable } from "svelte/store";
   import type { Readable } from "svelte/store";
   import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
   import DvdLogo from "./DvdLogo.svelte";
   import logomarkAsset from "./assets/logomark.svg";
 
-  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
-  const fallbackT = createTranslator({ locale: "en" });
-  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
 
   interface Props {
     message?: string;

package/dist/Player.svelte

@@ -90,8 +90,12 @@
   let isDevPanelOpen = $state(false);
   let skipDirection: SkipDirection = $state(null);
 
-  let activeTheme = $state<FwThemePreset>(options?.theme ?? "default");
-  let activeLocale = $state<FwLocale>(options?.locale ?? "en");
+  let activeTheme = $state<FwThemePreset>("default");
+  let activeLocale = $state<FwLocale>("en");
+  $effect(() => {
+    if (options.theme) activeTheme = options.theme;
+    if (options.locale) activeLocale = options.locale;
+  });
 
   // Sync locale state to i18n store and provide translator context
   $effect(() => {
@@ -202,7 +206,7 @@
     isPlaying: false,
     isPaused: true,
     isBuffering: false,
-    isMuted: true,
+    isMuted: false,
     volume: 1,
     error: null as string | null,
     isPassiveError: false,
@@ -221,6 +225,10 @@
     playbackQuality: null as any,
     subtitlesEnabled: false,
     toast: null as { message: string; timestamp: number } | null,
+    controllerSeekableStart: 0,
+    controllerLiveEdge: 0,
+    controllerCanSeek: false,
+    controllerHasAudio: true,
   });
 
   // Track if we've already attached to prevent double-attach race
@@ -247,7 +255,7 @@
       mistUrl: options?.mistUrl,
       authToken: options?.authToken,
       autoplay: options?.autoplay !== false,
-      muted: options?.muted !== false,
+      muted: options?.muted === true,
       controls: options?.stockControls === true,
       poster: thumbnailUrl || undefined,
       debug: options?.debug,
@@ -587,7 +595,7 @@
                   >
                     {$translatorStore("retry")}
                   </button>
-                  {#if playerStore?.getController()?.canAttemptFallback()}
+                  {#if options?.devMode && playerStore?.getController()?.canAttemptFallback()}
                     <button
                       type="button"
                       class="fw-error-btn fw-error-btn--secondary"
@@ -600,17 +608,19 @@
                       {$translatorStore("tryNext")}
                     </button>
                   {/if}
-                  <button
-                    type="button"
-                    class="fw-error-btn fw-error-btn--secondary"
-                    onclick={() => {
-                      playerStore?.clearError();
-                      playerStore?.reload();
-                    }}
-                    aria-label={$translatorStore("reloadPlayer")}
-                  >
-                    {$translatorStore("reloadPlayer")}
-                  </button>
+                  {#if options?.devMode}
+                    <button
+                      type="button"
+                      class="fw-error-btn fw-error-btn--secondary"
+                      onclick={() => {
+                        playerStore?.clearError();
+                        playerStore?.reload();
+                      }}
+                      aria-label={$translatorStore("reloadPlayer")}
+                    >
+                      {$translatorStore("reloadPlayer")}
+                    </button>
+                  {/if}
                 </div>
               </div>
             </div>
@@ -665,6 +675,8 @@
               onStatsToggle={() => (isStatsOpen = !isStatsOpen)}
               isContentLive={storeState.isEffectivelyLive}
               onJumpToLive={() => playerStore?.getController()?.jumpToLive()}
+              controllerSeekableStart={storeState?.controllerSeekableStart ?? 0}
+              controllerLiveEdge={storeState?.controllerLiveEdge ?? 0}
               {activeLocale}
               onLocaleChange={(l) => {
                 activeLocale = l;

package/dist/PlayerControls.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getContext } from "svelte";
+  import { readable } from "svelte/store";
   import type { Readable } from "svelte/store";
   import {
     cn,
@@ -39,9 +40,10 @@
   } from "./icons";
 
   // i18n: get translator from context, fall back to default English
-  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
-  const fallbackT = createTranslator({ locale: "en" });
-  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
 
   // Props - aligned with React PlayerControls
   interface Props {
@@ -63,6 +65,10 @@
     onJumpToLive?: () => void;
     activeLocale?: FwLocale;
     onLocaleChange?: (locale: FwLocale) => void;
+    /** Controller-derived seekable start (ms) — preferred over player direct */
+    controllerSeekableStart?: number;
+    /** Controller-derived live edge (ms) — preferred over player direct */
+    controllerLiveEdge?: number;
   }
 
   let {
@@ -82,6 +88,8 @@
     onJumpToLive = undefined,
     activeLocale = undefined,
     onLocaleChange = undefined,
+    controllerSeekableStart = undefined,
+    controllerLiveEdge = undefined,
   }: Props = $props();
 
   // Video element discovery
@@ -141,40 +149,77 @@
 
   // Audio detection: trust MistServer metadata first, then DOM fallback
   $effect(() => {
-    // Primary: trust MistServer stream metadata (matches ddvtech embed approach)
-    if (mistStreamInfo?.hasAudio !== undefined) {
-      hasAudio = mistStreamInfo.hasAudio;
-      return;
-    }
-
     if (!video) {
       hasAudio = true;
       return;
     }
+    const currentVideo = video;
+
+    let boundStream: MediaStream | null = null;
+    let streamListener: (() => void) | null = null;
+
+    const unbindStream = () => {
+      if (boundStream && streamListener) {
+        boundStream.removeEventListener("addtrack", streamListener);
+        boundStream.removeEventListener("removetrack", streamListener);
+      }
+      boundStream = null;
+      streamListener = null;
+    };
 
     const checkAudio = () => {
-      if (video!.srcObject instanceof MediaStream) {
-        hasAudio = video!.srcObject.getAudioTracks().length > 0;
+      // Prefer actual MediaStream tracks over metadata to avoid phantom controls.
+      if (currentVideo.srcObject instanceof MediaStream) {
+        const stream = currentVideo.srcObject;
+        if (stream !== boundStream) {
+          unbindStream();
+          boundStream = stream;
+          streamListener = () => {
+            hasAudio = stream.getAudioTracks().length > 0;
+          };
+          stream.addEventListener("addtrack", streamListener);
+          stream.addEventListener("removetrack", streamListener);
+        }
+        hasAudio = stream.getAudioTracks().length > 0;
         return;
       }
-      const videoAny = video as any;
+
+      unbindStream();
+
+      // Fallback: metadata for non-MediaStream sources.
+      if (mistStreamInfo?.hasAudio !== undefined) {
+        hasAudio = mistStreamInfo.hasAudio;
+        return;
+      }
+
+      const videoAny = currentVideo as any;
       if (videoAny.audioTracks && videoAny.audioTracks.length !== undefined) {
         hasAudio = videoAny.audioTracks.length > 0;
         return;
       }
+
       hasAudio = true;
     };
+
     checkAudio();
-    video.addEventListener("loadedmetadata", checkAudio);
-    // Safari: audioTracks may be populated after loadedmetadata for HLS streams
-    const audioTracks = (video as any).audioTracks;
+    currentVideo.addEventListener("loadedmetadata", checkAudio);
+    currentVideo.addEventListener("loadeddata", checkAudio);
+    currentVideo.addEventListener("durationchange", checkAudio);
+
+    const audioTracks = (currentVideo as any).audioTracks;
     if (audioTracks?.addEventListener) {
       audioTracks.addEventListener("addtrack", checkAudio);
+      audioTracks.addEventListener("removetrack", checkAudio);
     }
+
     return () => {
-      video!.removeEventListener("loadedmetadata", checkAudio);
+      unbindStream();
+      currentVideo.removeEventListener("loadedmetadata", checkAudio);
+      currentVideo.removeEventListener("loadeddata", checkAudio);
+      currentVideo.removeEventListener("durationchange", checkAudio);
       if (audioTracks?.removeEventListener) {
         audioTracks.removeEventListener("addtrack", checkAudio);
+        audioTracks.removeEventListener("removetrack", checkAudio);
       }
     };
   });
@@ -224,16 +269,22 @@
   let isWebRTC = $derived(isMediaStreamSource(video));
   let supportsPlaybackRate = $derived(coreSupportsPlaybackRate(video));
   function deriveBufferWindowMs(
-    tracks?: Record<string, { firstms?: number; lastms?: number }>
+    tracks?: Record<string, { type?: string; firstms?: number; lastms?: number }>
   ): number | undefined {
     if (!tracks) return undefined;
-    const list = Object.values(tracks);
-    if (list.length === 0) return undefined;
-    const firstmsValues = list.map((t) => t.firstms).filter((v): v is number => v !== undefined);
-    const lastmsValues = list.map((t) => t.lastms).filter((v): v is number => v !== undefined);
+    const trackValues = Object.values(tracks).filter(
+      (t) => t.type !== "meta" && (t.lastms === undefined || t.lastms > 0)
+    );
+    if (trackValues.length === 0) return undefined;
+    const firstmsValues = trackValues
+      .map((t) => t.firstms)
+      .filter((v): v is number => v !== undefined);
+    const lastmsValues = trackValues
+      .map((t) => t.lastms)
+      .filter((v): v is number => v !== undefined);
     if (firstmsValues.length === 0 || lastmsValues.length === 0) return undefined;
-    const firstms = Math.max(...firstmsValues);
-    const lastms = Math.min(...lastmsValues);
+    const firstms = Math.min(...firstmsValues);
+    const lastms = Math.max(...lastmsValues);
     const window = lastms - firstms;
     if (!Number.isFinite(window) || window <= 0) return undefined;
     return window;
@@ -243,48 +294,38 @@
     mistStreamInfo?.meta?.buffer_window ??
       deriveBufferWindowMs(
         mistStreamInfo?.meta?.tracks as
-          | Record<string, { firstms?: number; lastms?: number }>
+          | Record<string, { type?: string; firstms?: number; lastms?: number }>
           | undefined
       )
   );
 
-  function getPlayerSeekableRange(): { seekableStart: number; liveEdge: number } | null {
-    const player = globalPlayerManager.getCurrentPlayer();
-    if (player && typeof (player as any).getSeekableRange === "function") {
-      const range = (player as any).getSeekableRange();
-      if (
-        range &&
-        Number.isFinite(range.start) &&
-        Number.isFinite(range.end) &&
-        range.end >= range.start
-      ) {
-        return { seekableStart: range.start, liveEdge: range.end };
-      }
-    }
-    return null;
-  }
-
   let allowMediaStreamDvr = $derived(
-    isMediaStreamSource(video) &&
-      bufferWindowMs !== undefined &&
-      bufferWindowMs > 0 &&
-      sourceType !== "whep" &&
-      sourceType !== "webrtc"
+    isMediaStreamSource(video) && bufferWindowMs !== undefined && bufferWindowMs > 0
   );
 
-  // Seekable range using core calculation (allow player override)
-  let seekableRange = $derived.by(
-    () =>
-      getPlayerSeekableRange() ??
-      calculateSeekableRange({
-        isLive,
-        video,
-        mistStreamInfo,
-        currentTime,
-        duration,
-        allowMediaStreamDvr,
-      })
+  // Seekable range: prefer controller-derived values (same pattern as React/WC)
+  let calcRange = $derived(
+    calculateSeekableRange({
+      isLive,
+      video,
+      mistStreamInfo,
+      currentTime,
+      duration,
+      allowMediaStreamDvr,
+    })
+  );
+  let useControllerRange = $derived(
+    Number.isFinite(controllerSeekableStart) &&
+      Number.isFinite(controllerLiveEdge) &&
+      (controllerLiveEdge as number) >= (controllerSeekableStart as number) &&
+      ((controllerLiveEdge as number) > 0 || (controllerSeekableStart as number) > 0)
   );
+  let seekableRange = $derived({
+    seekableStart: useControllerRange
+      ? (controllerSeekableStart as number)
+      : calcRange.seekableStart,
+    liveEdge: useControllerRange ? (controllerLiveEdge as number) : calcRange.liveEdge,
+  });
   let seekableStart = $derived(seekableRange.seekableStart);
   let liveEdge = $derived(seekableRange.liveEdge);
   let hasDvrWindow = $derived(
@@ -422,24 +463,24 @@
   }
 
   function handleSkipBack() {
-    const newTime = Math.max(0, currentTime - 10);
+    const newTime = Math.max(0, currentTime - 10000);
     if (onseek) {
       onseek(newTime);
       return;
     }
     const v = findVideoElement();
-    if (v) v.currentTime = newTime;
+    if (v) v.currentTime = newTime / 1000;
   }
 
   function handleSkipForward() {
-    const maxTime = Number.isFinite(duration) ? duration : currentTime + 10;
-    const newTime = Math.min(maxTime, currentTime + 10);
+    const maxTime = Number.isFinite(duration) ? duration : currentTime + 10000;
+    const newTime = Math.min(maxTime, currentTime + 10000);
     if (onseek) {
       onseek(newTime);
       return;
     }
     const v = findVideoElement();
-    if (v) v.currentTime = newTime;
+    if (v) v.currentTime = newTime / 1000;
   }
 
   function handleMute() {
@@ -592,7 +633,7 @@
             if (onseek) {
               onseek(time);
             } else if (video) {
-              video.currentTime = time;
+              video.currentTime = time / 1000;
             }
           }}
         />

package/dist/PlayerControls.svelte.d.ts

@@ -19,6 +19,10 @@ interface Props {
     onJumpToLive?: () => void;
     activeLocale?: FwLocale;
     onLocaleChange?: (locale: FwLocale) => void;
+    /** Controller-derived seekable start (ms) — preferred over player direct */
+    controllerSeekableStart?: number;
+    /** Controller-derived live edge (ms) — preferred over player direct */
+    controllerLiveEdge?: number;
 }
 declare const PlayerControls: import("svelte").Component<Props, {}, "">;
 type PlayerControls = ReturnType<typeof PlayerControls>;

package/dist/SeekBar.svelte

@@ -6,9 +6,9 @@
   import { cn } from "@livepeer-frameworks/player-core";
 
   interface Props {
-    /** Current playback time in seconds */
+    /** Current playback time in milliseconds */
     currentTime: number;
-    /** Total duration in seconds */
+    /** Total duration in milliseconds */
     duration: number;
     /** Buffered time ranges from video element */
     buffered?: TimeRanges;
@@ -20,9 +20,9 @@
     class?: string;
     /** Whether this is a live stream */
     isLive?: boolean;
-    /** For live: start of seekable DVR window (seconds) */
+    /** For live: start of seekable DVR window (ms) */
     seekableStart?: number;
-    /** For live: current live edge position (seconds) */
+    /** For live: current live edge position (ms) */
     liveEdge?: number;
     /** Defer seeking until drag release */
     commitOnRelease?: boolean;
@@ -80,8 +80,9 @@
 
     const segments: Array<{ startPercent: number; endPercent: number }> = [];
     for (let i = 0; i < buffered.length; i++) {
-      const start = buffered.start(i);
-      const end = buffered.end(i);
+      // buffered TimeRanges are in seconds (browser API), convert to ms
+      const start = buffered.start(i) * 1000;
+      const end = buffered.end(i) * 1000;
 
       const relativeStart = start - rangeStart;
       const relativeEnd = end - rangeStart;
@@ -95,9 +96,9 @@
   });
 
   // Format time as MM:SS or HH:MM:SS
-  function formatTime(seconds: number): string {
-    if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
-    const total = Math.floor(seconds);
+  function formatTime(ms: number): string {
+    if (!Number.isFinite(ms) || ms < 0) return "0:00";
+    const total = Math.floor(ms / 1000);
     const hours = Math.floor(total / 3600);
     const minutes = Math.floor((total % 3600) / 60);
     const secs = total % 60;
@@ -108,10 +109,10 @@
   }
 
   // Format relative time for live streams
-  function formatLiveTime(seconds: number, edge: number): string {
-    const behindSeconds = edge - seconds;
-    if (behindSeconds < 1) return "LIVE";
-    const total = Math.floor(behindSeconds);
+  function formatLiveTime(ms: number, edgeMs: number): string {
+    const behindMs = edgeMs - ms;
+    if (behindMs < 1000) return "LIVE";
+    const total = Math.floor(behindMs / 1000);
     const hours = Math.floor(total / 3600);
     const minutes = Math.floor((total % 3600) / 60);
     const secs = total % 60;
@@ -218,7 +219,7 @@
   // Handle keyboard navigation for accessibility
   function handleKeyDown(e: KeyboardEvent) {
     if (disabled) return;
-    const step = e.shiftKey ? 10 : 5; // 5s default, 10s with shift
+    const step = e.shiftKey ? 10000 : 5000;
     const rangeEnd = isLive ? effectiveLiveEdge : duration;
     const rangeStart = isLive ? seekableStart : 0;
 

package/dist/SeekBar.svelte.d.ts

@@ -1,7 +1,7 @@
 interface Props {
-    /** Current playback time in seconds */
+    /** Current playback time in milliseconds */
     currentTime: number;
-    /** Total duration in seconds */
+    /** Total duration in milliseconds */
     duration: number;
     /** Buffered time ranges from video element */
     buffered?: TimeRanges;
@@ -13,9 +13,9 @@ interface Props {
     class?: string;
     /** Whether this is a live stream */
     isLive?: boolean;
-    /** For live: start of seekable DVR window (seconds) */
+    /** For live: start of seekable DVR window (ms) */
     seekableStart?: number;
-    /** For live: current live edge position (seconds) */
+    /** For live: current live edge position (ms) */
     liveEdge?: number;
     /** Defer seeking until drag release */
     commitOnRelease?: boolean;

package/dist/StreamStateOverlay.svelte

@@ -11,6 +11,7 @@
 -->
 <script lang="ts">
   import { getContext } from "svelte";
+  import { readable } from "svelte/store";
   import type { Readable } from "svelte/store";
   import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
   import type { StreamStatus } from "@livepeer-frameworks/player-core";
@@ -39,9 +40,10 @@
     class: className = "",
   }: Props = $props();
 
-  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
-  const fallbackT = createTranslator({ locale: "en" });
-  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
 
   // Computed states
   let showRetry = $derived(status === "ERROR" || status === "INVALID" || status === "OFFLINE");
@@ -136,7 +138,7 @@
         {#if showProgress && percentage !== undefined}
           <div style="margin-top: 0.75rem;">
             <div class="progress-bar">
-              <div class="progress-fill" style="width: {Math.min(100, percentage)};"></div>
+              <div class="progress-fill" style="width: {Math.min(100, percentage)}%;"></div>
             </div>
             <p
               style="margin-top: 0.375rem; font-size: 0.75rem; font-family: monospace; color: hsl(var(--tn-fg-dark, 233 23% 60%));"