Merge branch 'dev' into v2

.github/workflows/ci.yml

@@ -81,20 +81,6 @@ jobs:
       - name: Copy environment defaults
         run: cp .env.example .env
 
-      - name: Get changed files
-        id: changed
-        if: github.event_name == 'pull_request'
-        env:
-          BASE_REF: ${{ github.base_ref }}
-        run: |
-          git diff --name-only --diff-filter=ACMR "origin/${BASE_REF}...HEAD" -- '*.ts' '*.tsx' '*.js' '*.jsx' > /tmp/changed-files
-          echo "count=$(wc -l < /tmp/changed-files | tr -d '[:space:]')" >> $GITHUB_OUTPUT
-
-      - name: Check formatting on changed files
-        if: steps.changed.outcome == 'success' && steps.changed.outputs.count != '0'
-        continue-on-error: true
-        run: xargs -r -a /tmp/changed-files pnpm exec oxfmt --check
-
       - name: Lint, typecheck, and build affected workspaces
         run: pnpm turbo run lint typecheck build --affected --continue=dependencies-successful
 

apps/docs/docs/widgets/media-request-list/index.mdx

@@ -19,6 +19,8 @@ import { overseerrIntegration } from "@site/docs/integrations/overseerr";
 
 Provides a list of all open and recently closed requests. It also provides the functionality to approve or reject requests.
 
+You can limit the list to specific request statuses (for example, only show `pending`) and restrict it to requests created within the last N days.
+
 ### Screenshots
 
 import mediaRequestList from "./img/list.png";

apps/docs/docs/widgets/media-request-list/index.ts

@@ -14,6 +14,18 @@ export const mediaRequestListWidget: WidgetDefinition = {
         values: { type: "boolean" },
         defaultValue: "yes",
       },
+      {
+        name: "Statuses to show",
+        description: "Only requests with these statuses will be shown. Defaults to all statuses.",
+        values: "List of: 'pending', 'approved', 'declined', 'failed', 'completed'",
+        defaultValue: "All statuses",
+      },
+      {
+        name: "Show only recent requests",
+        description: "Limit to requests created within this many days. Set to 0 to disable the time filter.",
+        values: "0-365",
+        defaultValue: "0",
+      },
     ],
   },
 };

packages/api/src/router/widgets/media-requests.ts

@@ -3,7 +3,10 @@ import { z } from "zod/v4";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { createIntegrationAsync } from "@homarr/integrations";
 import { mediaRequestStatusConfiguration } from "@homarr/integrations/types";
-import { mediaRequestListRequestHandler } from "@homarr/request-handler/media-request-list";
+import {
+  mediaRequestListInputSchema,
+  mediaRequestListRequestHandler,
+} from "@homarr/request-handler/media-request-list";
 import { mediaRequestStatsRequestHandler } from "@homarr/request-handler/media-request-stats";
 
 import { createManyIntegrationMiddleware, createOneIntegrationMiddleware } from "../../middlewares/integration";
@@ -16,13 +19,14 @@ export const mediaRequestsRouter = createTRPCRouter({
       mcp: {
         enabled: true,
         description:
-          "Get latest media requests from Overseerr/Jellyseerr with their status (pending, approved, declined, available). REQUIRED: integrationIds (array of Overseerr/Jellyseerr integration IDs from integration_all)",
+          "Get latest media requests from Overseerr/Jellyseerr with their status (pending, approved, declined, failed, completed). REQUIRED: integrationIds (array of Overseerr/Jellyseerr integration IDs from integration_all). OPTIONAL: statuses (array of statuses to include, must be non-empty) and recentDays (number 0-365; 0 disables the time filter).",
       },
     })
     .concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("mediaRequest")))
-    .query(async ({ ctx }) => {
+    .input(mediaRequestListInputSchema)
+    .query(async ({ ctx, input }) => {
       const results = await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const { data } = await mediaRequestListRequestHandler.handler(integration, {}).getDataAsync();
+        const { data } = await mediaRequestListRequestHandler.handler(integration, input).getDataAsync();
         return { integration: { id: integration.id, name: integration.name, kind: integration.kind }, data };
       });
       return results

packages/integrations/src/emby/emby-integration.ts

@@ -117,6 +117,12 @@ export class EmbyIntegration extends Integration implements IMediaServerIntegrat
             episodeName: sessionInfo.NowPlayingItem.EpisodeTitle,
             albumName: sessionInfo.NowPlayingItem.Album ?? "",
             episodeCount: sessionInfo.NowPlayingItem.EpisodeCount,
+            playback: {
+              state: null,
+              positionMs: null,
+              durationMs: null,
+            },
+            location: null,
             metadata: null,
           };
         }

packages/integrations/src/interfaces/media-server/media-server-types.ts

@@ -13,6 +13,12 @@ export interface StreamSession {
     episodeName?: string | null;
     albumName?: string | null;
     episodeCount?: number | null;
+    playback: {
+      state: "playing" | "paused" | "buffering" | null;
+      positionMs: number | null;
+      durationMs: number | null;
+    };
+    location: "lan" | "wan" | null;
     metadata: {
       video: {
         resolution: {

packages/integrations/src/jellyfin/jellyfin-integration.ts

@@ -17,6 +17,10 @@ import type { IMediaServerIntegration } from "../interfaces/media-server/media-s
 import type { CurrentSessionsInput, StreamSession } from "../interfaces/media-server/media-server-types";
 import type { IMediaReleasesIntegration, MediaRelease, MediaType } from "../types";
 
+function ticksToMs(ticks: number | null | undefined): number | null {
+  return ticks ? Math.round(ticks / 10_000) : null;
+}
+
 @HandleIntegrationErrors([integrationAxiosHttpErrorHandler])
 export class JellyfinIntegration extends Integration implements IMediaServerIntegration, IMediaReleasesIntegration {
   private readonly jellyfin: Jellyfin = new Jellyfin({
@@ -50,6 +54,9 @@ export class JellyfinIntegration extends Integration implements IMediaServerInte
         let currentlyPlaying: StreamSession["currentlyPlaying"] | null = null;
 
         if (sessionInfo.NowPlayingItem) {
+          const positionMs = ticksToMs(sessionInfo.PlayState?.PositionTicks);
+          const durationMs = ticksToMs(sessionInfo.NowPlayingItem.RunTimeTicks);
+
           currentlyPlaying = {
             type: convertJellyfinType(sessionInfo.NowPlayingItem.Type),
             name: sessionInfo.NowPlayingItem.SeriesName ?? sessionInfo.NowPlayingItem.Name ?? "",
@@ -57,6 +64,12 @@ export class JellyfinIntegration extends Integration implements IMediaServerInte
             episodeName: sessionInfo.NowPlayingItem.EpisodeTitle,
             albumName: sessionInfo.NowPlayingItem.Album ?? "",
             episodeCount: sessionInfo.NowPlayingItem.EpisodeCount,
+            playback: {
+              state: sessionInfo.PlayState?.IsPaused ? "paused" : "playing",
+              positionMs,
+              durationMs,
+            },
+            location: null,
             metadata: {
               video: {
                 resolution:

packages/integrations/src/mock/data/media-server.ts

@@ -13,6 +13,8 @@ const sessions: StreamSession[] = [
       episodeName: null,
       albumName: null,
       episodeCount: null,
+      playback: { state: null, positionMs: null, durationMs: null },
+      location: null,
       metadata: null,
     },
   },
@@ -27,6 +29,8 @@ const sessions: StreamSession[] = [
       episodeName: "Ozymandias",
       albumName: null,
       episodeCount: null,
+      playback: { state: null, positionMs: null, durationMs: null },
+      location: null,
       metadata: null,
     },
   },
@@ -41,6 +45,8 @@ const sessions: StreamSession[] = [
       episodeName: null,
       albumName: null,
       episodeCount: null,
+      playback: { state: null, positionMs: null, durationMs: null },
+      location: null,
       metadata: null,
     },
   },
@@ -55,6 +61,8 @@ const sessions: StreamSession[] = [
       episodeName: "The We We Are",
       albumName: null,
       episodeCount: null,
+      playback: { state: null, positionMs: null, durationMs: null },
+      location: null,
       metadata: null,
     },
   },
@@ -69,6 +77,8 @@ const sessions: StreamSession[] = [
       episodeName: null,
       albumName: "Random Access Memories",
       episodeCount: null,
+      playback: { state: null, positionMs: null, durationMs: null },
+      location: null,
       metadata: null,
     },
   },
@@ -83,6 +93,8 @@ const sessions: StreamSession[] = [
       episodeName: null,
       albumName: null,
       episodeCount: null,
+      playback: { state: null, positionMs: null, durationMs: null },
+      location: null,
       metadata: null,
     },
   },

packages/integrations/src/plex/interface.ts

@@ -3,6 +3,54 @@ interface MediaContainer {
   Track?: Session[];
 }
 
+interface Stream {
+  $: {
+    streamType: string;
+    codec?: string;
+    language?: string;
+    selected?: string;
+    width?: string;
+    height?: string;
+    frameRate?: string;
+    channels?: string;
+  };
+}
+
+interface Part {
+  Stream?: Stream[];
+  $: {
+    container?: string;
+  };
+}
+
+interface Media {
+  Part?: Part[];
+  $: {
+    videoResolution?: string;
+    videoCodec?: string;
+    audioCodec?: string;
+    bitrate?: string;
+    container?: string;
+  };
+}
+
+interface TranscodeSession {
+  $: {
+    throttled?: string;
+    progress?: string;
+    speed?: string;
+    videoDecision?: string;
+    audioDecision?: string;
+    sourceVideoCodec?: string;
+    sourceAudioCodec?: string;
+    videoCodec?: string;
+    audioCodec?: string;
+    container?: string;
+    width?: string;
+    height?: string;
+  };
+}
+
 interface Session {
   User?: {
     $: {
@@ -15,13 +63,20 @@ interface Session {
     $: {
       product: string;
       title: string;
+      address?: string;
+      state?: string;
+      local?: string;
     };
   }[];
   Session?: {
     $: {
       id: string;
+      bandwidth?: string;
+      location?: string;
     };
   }[];
+  TranscodeSession?: TranscodeSession[];
+  Media?: Media[];
   $: {
     grandparentTitle?: string;
     parentTitle?: string;
@@ -29,6 +84,8 @@ interface Session {
     index?: number;
     type: string;
     live?: string;
+    viewOffset?: string;
+    duration?: string;
   };
 }
 

packages/integrations/src/plex/plex-integration.ts

@@ -17,6 +17,32 @@ import type { PlexResponse } from "./interface";
 
 const logger = createLogger({ module: "plexIntegration" });
 
+function parseOptionalNumber(value: string | undefined): number | null {
+  if (!value) {
+    return null;
+  }
+
+  const parsed = Number(value);
+  return Number.isNaN(parsed) ? null : parsed;
+}
+
+function parseLocation(value: string | undefined): "lan" | "wan" | null {
+  return value === "lan" || value === "wan" ? value : null;
+}
+
+function parsePlaybackState(value: string | undefined): "playing" | "paused" | "buffering" | null {
+  return value === "playing" || value === "paused" || value === "buffering" ? value : null;
+}
+
+function parseResolution(
+  width: string | undefined,
+  height: string | undefined,
+): { width: number; height: number } | null {
+  const parsedWidth = parseOptionalNumber(width);
+  const parsedHeight = parseOptionalNumber(height);
+  return parsedWidth !== null && parsedHeight !== null ? { width: parsedWidth, height: parsedHeight } : null;
+}
+
 export class PlexIntegration extends Integration implements IMediaServerIntegration, IMediaReleasesIntegration {
   public async getCurrentSessionsAsync(_options: CurrentSessionsInput): Promise<StreamSession[]> {
     const token = super.getSecretValue("apiKey");
@@ -43,11 +69,24 @@ export class PlexIntegration extends Integration implements IMediaServerIntegrat
         const userElement = mediaElement.User ? mediaElement.User[0] : undefined;
         const playerElement = mediaElement.Player ? mediaElement.Player[0] : undefined;
         const sessionElement = mediaElement.Session ? mediaElement.Session[0] : undefined;
+        const transcodeElement = mediaElement.TranscodeSession ? mediaElement.TranscodeSession[0] : undefined;
+        const mediaInfoElement = mediaElement.Media ? mediaElement.Media[0] : undefined;
 
         if (!playerElement) {
           return undefined;
         }
 
+        const positionMs = parseOptionalNumber(mediaElement.$.viewOffset);
+        const durationMs = parseOptionalNumber(mediaElement.$.duration);
+
+        const playbackState = parsePlaybackState(playerElement.$.state);
+
+        const location = parseLocation(sessionElement?.$.location);
+
+        const streams = mediaInfoElement?.Part?.[0]?.Stream ?? [];
+        const videoStream = streams.find((stream) => stream.$.streamType === "1");
+        const audioStream = streams.find((stream) => stream.$.streamType === "2");
+
         return {
           sessionId: sessionElement?.$.id ?? "unknown",
           sessionName: `${playerElement.$.product} (${playerElement.$.title})`,
@@ -63,7 +102,30 @@ export class PlexIntegration extends Integration implements IMediaServerIntegrat
             episodeName: mediaElement.$.title ?? null,
             albumName: mediaElement.$.type === "track" ? (mediaElement.$.parentTitle ?? null) : null,
             episodeCount: mediaElement.$.index ?? null,
-            metadata: null,
+            playback: {
+              state: playbackState,
+              positionMs,
+              durationMs,
+            },
+            location,
+            metadata: {
+              video: {
+                resolution: parseResolution(videoStream?.$.width, videoStream?.$.height),
+                frameRate: parseOptionalNumber(videoStream?.$.frameRate),
+              },
+              audio: {
+                channelCount: parseOptionalNumber(audioStream?.$.channels),
+                codec: audioStream?.$.codec ?? mediaInfoElement?.$.audioCodec ?? null,
+              },
+              transcoding: {
+                container: transcodeElement?.$.container ?? null,
+                resolution: parseResolution(transcodeElement?.$.width, transcodeElement?.$.height),
+                target: {
+                  audioCodec: transcodeElement?.$.audioCodec ?? null,
+                  videoCodec: transcodeElement?.$.videoCodec ?? null,
+                },
+              },
+            },
           },
         };
       })

packages/old-import/src/widgets/options.ts

@@ -23,6 +23,8 @@ type OptionMapping = {
 const optionMapping: OptionMapping = {
   "mediaRequests-requestList": {
     linksTargetNewTab: (oldOptions) => oldOptions.openInNewTab,
+    statusFilter: () => undefined,
+    recentDays: () => undefined,
   },
   "mediaRequests-requestStats": {},
   bookmarks: {

packages/request-handler/src/docker.ts

@@ -300,10 +300,7 @@ async function getContainersWithStatsAsync() {
 
     const stats = await instance
       .getContainer(container.Id)
-      // Not in one-shot mode: the daemon then includes precpu_stats (the
-      // previous reading), which is required to compute the current CPU usage
-      // as a delta. One-shot omits it and would only expose lifetime totals.
-      .stats({ stream: false })
+      .stats({ stream: false, "one-shot": true })
       .catch(
         () =>
           ({
@@ -339,22 +336,12 @@ export function calculateCpuUsage(stats: ContainerStats): number {
   }
 
   const numberOfCpus = stats.cpu_stats.online_cpus;
-
-  // Docker's own formula for the current (instantaneous) CPU usage: it compares
-  // the latest reading against the previous one (precpu_stats). Dividing the
-  // cumulative total_usage by the cumulative system_cpu_usage instead would
-  // report the container's lifetime average, which stays high long after a load
-  // spike has ended. precpu_stats is only present when the stats are NOT fetched
-  // in one-shot mode; when it is absent (e.g. Podman) the deltas fall back to the
-  // cumulative totals, matching the previous behaviour.
-  const cpuDelta = stats.cpu_stats.cpu_usage.total_usage - (stats.precpu_stats?.cpu_usage?.total_usage ?? 0);
-  const systemDelta = (stats.cpu_stats.system_cpu_usage ?? 0) - (stats.precpu_stats?.system_cpu_usage ?? 0);
-
-  if (systemDelta <= 0 || cpuDelta < 0) {
+  const usage = stats.cpu_stats.system_cpu_usage;
+  if (!usage || usage === 0) {
     return 0;
   }
 
-  return (cpuDelta / systemDelta) * numberOfCpus * 100;
+  return (stats.cpu_stats.cpu_usage.total_usage / usage) * numberOfCpus * 100;
 }
 
 export function calculateMemoryUsage(stats: ContainerStats): number {

packages/request-handler/src/media-request-list.ts

@@ -1,17 +1,43 @@
+import { z } from "zod/v4";
+
 import type { IntegrationKindByCategory } from "@homarr/definitions";
 import { createIntegrationAsync } from "@homarr/integrations";
-import type { MediaRequest } from "@homarr/integrations/types";
+import type { MediaRequest, MediaRequestStatus } from "@homarr/integrations/types";
 
 import { createIntegrationRequestHandler } from "./lib/integration-request-handler";
 
+const mediaRequestStatusValues = [
+  "pending",
+  "approved",
+  "declined",
+  "failed",
+  "completed",
+] as const satisfies readonly MediaRequestStatus[];
+
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+
+export const mediaRequestListInputSchema = z.object({
+  statuses: z.array(z.enum(mediaRequestStatusValues)).nonempty(),
+  recentDays: z.number().min(0).max(365),
+});
+
+export type MediaRequestListInput = z.infer<typeof mediaRequestListInputSchema>;
+
 export const mediaRequestListRequestHandler = createIntegrationRequestHandler<
   MediaRequest[],
   IntegrationKindByCategory<"mediaRequest">,
-  Record<string, never>
+  MediaRequestListInput
 >({
-  async requestAsync(integration, _input) {
+  async requestAsync(integration, input) {
     const integrationInstance = await createIntegrationAsync(integration);
-    return await integrationInstance.getRequestsAsync();
+    const requests = await integrationInstance.getRequestsAsync();
+    const cutoff = input.recentDays > 0 ? Date.now() - input.recentDays * MS_PER_DAY : null;
+    const statusSet = new Set<MediaRequestStatus>(input.statuses);
+    return requests.filter((request) => {
+      if (!statusSet.has(request.status)) return false;
+      if (cutoff !== null && request.createdAt.getTime() < cutoff) return false;
+      return true;
+    });
   },
   cacheTtlMs: 60_000,
   fallbackToStaleOnError: true,

packages/request-handler/src/test/docker.spec.ts

@@ -75,26 +75,6 @@ describe("calculateCpuUsage", () => {
     // (500 / 100000) * 2 * 100 = 1
     expect(calculateCpuUsage(stats)).toBe(1);
   });
-
-  test("should use the delta against precpu_stats for the current usage", () => {
-    const stats = createStats({
-      cpu_stats: { online_cpus: 4, cpu_usage: { total_usage: 1_002_000 }, system_cpu_usage: 20_000 },
-      precpu_stats: { cpu_usage: { total_usage: 1_000_000 }, system_cpu_usage: 10_000 },
-    });
-    // Despite a large lifetime total_usage, only the recent delta counts:
-    // (2000 / 10000) * 4 * 100 = 80
-    expect(calculateCpuUsage(stats)).toBe(80);
-  });
-
-  test("should report 0 for a container that was busy over its lifetime but is idle now", () => {
-    const stats = createStats({
-      cpu_stats: { online_cpus: 4, cpu_usage: { total_usage: 1_000_000 }, system_cpu_usage: 20_000 },
-      precpu_stats: { cpu_usage: { total_usage: 1_000_000 }, system_cpu_usage: 10_000 },
-    });
-    // No CPU delta since the last reading -> current usage is 0, even though the
-    // lifetime average would be high. This is the regression the fix addresses.
-    expect(calculateCpuUsage(stats)).toBe(0);
-  });
 });
 
 describe("calculateMemoryUsage", () => {

packages/translation/src/lang/en.json

@@ -2917,6 +2917,11 @@
         "user": "User",
         "name": "Name",
         "id": "Id",
+        "status": "Status",
+        "directPlay": "Direct play",
+        "transcoding": "Transcoding",
+        "paused": "Paused",
+        "remaining": "{minutes} min left",
         "metadata": {
           "title": "Stats for nerds",
           "video": {
@@ -3401,6 +3406,12 @@
       "option": {
         "linksTargetNewTab": {
           "label": "Open links in new tab"
+        },
+        "statusFilter": {
+          "label": "Statuses to show"
+        },
+        "recentDays": {
+          "label": "Show only recent requests"
         }
       },
       "pending": {

packages/widgets/src/media-requests/list/component.tsx

@@ -38,6 +38,11 @@ export default function MediaServerWidget({
 }: WidgetComponentProps<"mediaRequests-requestList">) {
   const { data: mediaRequests } = clientApi.widget.mediaRequests.getLatestRequests.useQuery({
     integrationIds,
+    statuses:
+      options.statusFilter.length > 0
+        ? options.statusFilter
+        : ["pending", "approved", "declined", "failed", "completed"],
+    recentDays: options.recentDays,
   });
 
   if (!mediaRequests) return <WidgetEmptyState />;

packages/widgets/src/media-requests/list/index.ts

@@ -1,4 +1,5 @@
 import { IconSearch, IconZoomQuestion } from "@tabler/icons-react";
+import { z } from "zod/v4";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { openMediaRequestSearch } from "@homarr/spotlight";
@@ -6,6 +7,8 @@ import { openMediaRequestSearch } from "@homarr/spotlight";
 import { createWidgetDefinition } from "../../definition";
 import { optionsBuilder } from "../../options";
 
+const mediaRequestStatusValues = ["pending", "approved", "declined", "failed", "completed"] as const;
+
 export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestList", {
   icon: IconZoomQuestion,
   createOptions() {
@@ -13,6 +16,17 @@ export const { componentLoader, definition } = createWidgetDefinition("mediaRequ
       linksTargetNewTab: factory.switch({
         defaultValue: true,
       }),
+      statusFilter: factory.multiSelect({
+        defaultValue: [...mediaRequestStatusValues],
+        options: mediaRequestStatusValues.map((value) => ({
+          value,
+          label: (t) => t(`widget.mediaRequests-requestList.status.${value}`),
+        })),
+      }),
+      recentDays: factory.number({
+        validate: z.number().min(0).max(365),
+        defaultValue: 0,
+      }),
     }));
   },
   contextActions: ({ integrationIds }) => [

packages/widgets/src/media-server/component.tsx

@@ -2,8 +2,16 @@
 
 import type { ReactNode } from "react";
 import { Fragment, useMemo } from "react";
-import { Avatar, Divider, Flex, Group, Stack, Text, Title } from "@mantine/core";
-import { IconDeviceTv, IconHeadphones, IconMovie, IconVideo } from "@tabler/icons-react";
+import { Avatar, Badge, Divider, Flex, Group, Progress, Stack, Text, Title } from "@mantine/core";
+import {
+  IconDeviceTv,
+  IconHeadphones,
+  IconMovie,
+  IconPlayerPause,
+  IconVideo,
+  IconWifi,
+  IconWorld,
+} from "@tabler/icons-react";
 import type { MRT_ColumnDef } from "mantine-react-table";
 import { MantineReactTable } from "mantine-react-table";
 
@@ -27,24 +35,26 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
   const t = useScopedI18n("widget.mediaServer");
   const columns = useMemo<MRT_ColumnDef<StreamSession>[]>(
     () => [
-      {
-        accessorKey: "sessionName",
-        header: t("items.name"),
-
-        Cell: ({ row }) => (
-          <Text size="xs" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
-            {row.original.sessionName}
-          </Text>
-        ),
-      },
       {
         accessorKey: "user.username",
         header: t("items.user"),
+        size: 160,
 
         Cell: ({ row }) => (
-          <Group gap="xs">
-            <Avatar size={20} src={row.original.user.profilePictureUrl} />
-            <Text size="xs">{row.original.user.username}</Text>
+          <Group gap="xs" wrap="nowrap">
+            <Avatar size={28} src={row.original.user.profilePictureUrl} />
+            <Stack gap={0} style={{ minWidth: 0 }}>
+              <Text size="xs" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                {row.original.user.username}
+              </Text>
+              <Text
+                size="10px"
+                c="dimmed"
+                style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+              >
+                {row.original.sessionName}
+              </Text>
+            </Stack>
           </Group>
         ),
       },
@@ -53,17 +63,83 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
         header: t("items.currentlyPlaying"),
 
         Cell: ({ row }) => {
-          if (!row.original.currentlyPlaying) return null;
+          const currentlyPlaying = row.original.currentlyPlaying;
+          if (!currentlyPlaying) return null;
 
-          const Icon = mediaTypeIconMap[row.original.currentlyPlaying.type];
+          const isPaused = currentlyPlaying.playback.state === "paused";
+          const Icon = isPaused ? IconPlayerPause : mediaTypeIconMap[currentlyPlaying.type];
+
+          const { positionMs, durationMs } = currentlyPlaying.playback;
+          const progressPercent =
+            positionMs !== null && durationMs !== null && durationMs > 0
+              ? Math.min(100, Math.round((positionMs / durationMs) * 100))
+              : null;
+          const remainingMinutes =
+            positionMs !== null && durationMs !== null ? Math.max(0, Math.round((durationMs - positionMs) / 60_000)) : null;
 
           return (
-            <Group gap="xs" align="center">
-              <Icon size={16} />
-              <Text size="xs" lineClamp={1}>
-                {row.original.currentlyPlaying.name}
-              </Text>
-            </Group>
+            <Stack gap={4} style={{ minWidth: 0 }}>
+              <Group gap="xs" align="center" wrap="nowrap" style={{ minWidth: 0 }}>
+                <Icon
+                  size={16}
+                  color={isPaused ? "var(--mantine-color-yellow-6)" : undefined}
+                  style={{ flexShrink: 0 }}
+                />
+                <Text size="xs" lineClamp={1} style={{ minWidth: 0 }}>
+                  {currentlyPlaying.name}
+                </Text>
+                {isPaused && (
+                  <Text size="xs" c="yellow" style={{ flexShrink: 0 }}>
+                    {t("items.paused")}
+                  </Text>
+                )}
+                {!isPaused && remainingMinutes !== null && (
+                  <Text size="xs" c="dimmed" style={{ flexShrink: 0 }}>
+                    {t("items.remaining", { minutes: remainingMinutes.toString() })}
+                  </Text>
+                )}
+              </Group>
+              {progressPercent !== null && (
+                <Progress
+                  value={progressPercent}
+                  size={4}
+                  color={isPaused ? "yellow" : "green"}
+                  style={{ backgroundColor: "rgba(255, 255, 255, 0.15)" }}
+                />
+              )}
+            </Stack>
+          );
+        },
+      },
+      {
+        id: "status",
+        header: t("items.status"),
+        size: 110,
+
+        Cell: ({ row }) => {
+          const currentlyPlaying = row.original.currentlyPlaying;
+          if (!currentlyPlaying) return null;
+
+          const isTranscoding = Boolean(
+            currentlyPlaying.metadata?.transcoding.target.videoCodec ??
+              currentlyPlaying.metadata?.transcoding.target.audioCodec ??
+              currentlyPlaying.metadata?.transcoding.container,
+          );
+
+          return (
+            <Stack gap={4} align="flex-start">
+              <Badge size="xs" variant="light" color={isTranscoding ? "orange" : "green"}>
+                {isTranscoding ? t("items.transcoding") : t("items.directPlay")}
+              </Badge>
+              {currentlyPlaying.location && (
+                <Group gap={4} align="center">
+                  {currentlyPlaying.location === "lan" ? <IconWifi size={12} /> : <IconWorld size={12} />}
+                  <Text size="10px" c="dimmed" tt="uppercase">
+                    {currentlyPlaying.location}
+                  </Text>
+                </Group>
+              )}
+            </Stack>
           );
         },
       },
@@ -107,7 +183,7 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
     initialState: {
       density: "xs",
       columnPinning: {
-        right: ["currentlyPlaying"],
+        right: ["currentlyPlaying", "status"],
       },
     },
     mantineTableHeadProps: {
@@ -144,6 +220,10 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
         );
       },
       py: 4,
+      style: {
+        overflowX: "hidden",
+        overflowY: "visible",
+      },
     }),
   });