chore: regenerate stale .pi-map.md / .pi-map.index.md project maps

Project map had drifted: claimed recharts unused (was used), ObservabilityPage.tsx
exists (refactored to service-tabs/), missed JellyfinNowPlayingWidget +
authentik/backups service types. Regenerate to reflect post-change reality:
new Qbittorrent/LineSeriesChart/Prometheus{Gauge,Mean}Widget files,
service_data.py/qbittorrent_store.py, canonical prometheus-charting +
service-storage specs, archived changes.

frontend/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: frontend
 
 ## role
-Frontend SPA for the "Manage" application, built with React, Vite, and TypeScript, providing the user interface with OIDC authentication and API integration.
+Frontend single-page application built with React, Vite, and TypeScript that serves as the "Manage" UI, styled with Tailwind CSS and shadcn/ui components.
 ## parent
 index: ./.pi-map.index.md
 map: ./.pi-map.md

frontend/.pi-map.md

@@ -4,7 +4,7 @@ dir: frontend
 index: frontend/.pi-map.index.md
 
 ## role
-Frontend SPA for the "Manage" application, built with React, Vite, and TypeScript, providing the user interface with OIDC authentication and API integration.
+Frontend single-page application built with React, Vite, and TypeScript that serves as the "Manage" UI, styled with Tailwind CSS and shadcn/ui components.
 ## files
 - .gitignore | Specifies files and directories for Git to ignore in a Node.js/frontend project
 - Dockerfile | Multi-stage Dockerfile for building and serving a Vite-based frontend application with separate production (nginx) and development (node dev server) targets | dep: node:22-alpine, nginx:1.27-alpine, npm, vite
@@ -13,8 +13,8 @@ Frontend SPA for the "Manage" application, built with React, Vite, and TypeScrip
 - eslint.config.js | Configures ESLint for a TypeScript React project using Vite with recommended rules for JS, TS, React Hooks, and React Refresh. | dep: @eslint/js, globals, eslint-plugin-react-hooks, eslint-plugin-react-refresh, typescript-eslint, eslint/config
 - index.html | Standard HTML entry point for a React/Vite single-page application named "Manage" | dep: React (implied by root div and TSX entry), Vite (implied by module script and /src path)
 - nginx.conf | Configures Nginx as a reverse proxy serving static files and forwarding API requests to a backend service | dep: nginx
-- package-lock.json | Records exact dependency versions and resolved URLs for reproducible npm package installations in a React frontend project. | dep: npm, node, react, react-dom, react-router-dom, @tanstack/react-query, @tanstack/react-table, oidc-client-ts, react-oidc-context, radix-ui, shadcn, tailwindcss, vite, vitest, typescript, eslint, @babel/core, @babel/parser, @babel/generator, @babel/traverse, @babel/types, @babel/helpers, @babel/helper-plugin-utils, @babel/helper-module-imports, @babel/helper-module-transforms, @babel/helper-compilation-targets, @babel/helper-create-class-features-plugin, @babel/helper-replace-supers, @babel/helper-member-expression-to-functions, @babel/helper-optimise-call-expression, @babel/helper-skip-transparent-expression-wrappers, @babel/helper-annotate-as-pure, @babel/helper-globals, @babel/helper-string-parser, @babel/helper-validator-identifier, @babel/helper-validator-option, @babel/compat-data, @babel/code-frame, @babel/template, @babel/plugin-syntax-jsx, @jridgewell/gen-mapping, @jridgewell/remapping, @jridgewell
-- package.json | Defines a React-based frontend project configuration with Vite build tooling, Tailwind CSS styling, OIDC authentication, and testing infrastructure. | dep: react, react-dom, react-router-dom, @tanstack/react-query, @tanstack/react-table, radix-ui, react-oidc-context, oidc-client-ts, lucide-react, class-variance-authority, tailwind-merge, clsx, tw-animate-css, @fontsource-variable/geist, shadcn, vite, typescript, tailwindcss, vitest, eslint, @testing-library/react, jsdom
+- package-lock.json | Locks exact dependency versions and integrity hashes for a React/Vite frontend project to ensure reproducible installs. | dep: react, react-dom, @tanstack/react-query, @tanstack/react-table, recharts, radix-ui, shadcn, oidc-client-ts, vite, vitest, tailwindcss, typescript
+- package.json | Defines the package configuration, dependencies, and scripts for a React frontend application. | dep: react, react-dom, @tanstack/react-query, @tanstack/react-table, react-router-dom, oidc-client-ts, react-oidc-context, radix-ui, shadcn, tailwindcss, recharts, vite, vitest, typescript
 - postcss.config.cjs | Configures PostCSS to use Tailwind CSS and Autoprefixer plugins for CSS processing | dep: postcss, @tailwindcss/postcss, autoprefixer
 - tailwind.config.cjs | Configures Tailwind CSS to scan source files for class names and defines theme/plugins settings. | dep: tailwindcss
 - tsconfig.app.json | TypeScript configuration file for a React application using Vite with strict linting rules and path aliases | dep: typescript, vite, react
@@ -23,9 +23,9 @@ Frontend SPA for the "Manage" application, built with React, Vite, and TypeScrip
 - vite.config.ts | Configures Vite build tool with React, Tailwind CSS, environment-based API proxying, and path aliasing for a frontend application. | dep: path, vite, @vitejs/plugin-react, @tailwindcss/vite
 - vitest.config.ts | Configures Vitest test runner for a React project with jsdom environment, path aliasing, and scoped test file inclusion. | dep: path, vitest/config, @vitejs/plugin-react, vitest, jsdom
 ## arch
-Component-based React architecture styled with Tailwind CSS/shadcn/ui, bundled via Vite, containerized through multi-stage Docker builds (Nginx for production, Node dev server for development), with Vitest for testing and ESLint for code quality.
+Component-based SPA architecture using Vite for bundling, Nginx reverse proxy for production serving with API forwarding, PostCSS/Tailwind for styling, Vitest for testing, and Docker multi-stage builds for deployment.
 ## tags
-react, @babel, vite, helper, typescript, project, css, eslint
+react, vite, typescript, frontend, project, configuration, @tanstack, path
 ## symbols
 -
 ## workflows

frontend/public/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: frontend/public
 
 ## role
-Provides static public assets for the frontend web application, including brand identity graphics and reusable UI icons.
+Provides static public assets for the frontend web application, including browser identity (favicon) and reusable UI iconography.
 ## parent
 index: frontend/.pi-map.index.md
 map: frontend/.pi-map.md

frontend/public/.pi-map.md

@@ -4,12 +4,12 @@ dir: frontend/public
 index: frontend/public/.pi-map.index.md
 
 ## role
-Provides static public assets for the frontend web application, including brand identity graphics and reusable UI icons.
+Provides static public assets for the frontend web application, including browser identity (favicon) and reusable UI iconography.
 ## files
 - favicon.svg | Defines a browser favicon as an SVG graphic featuring a stylized lightning bolt shape with purple and blue gradient glow effects.
 - icons.svg | Defines a collection of reusable SVG icon symbols (Bluesky, Discord, documentation, GitHub, social, X) for use in web applications via `<use>` references.
 ## arch
-Flat static asset directory following standard web application conventions, serving files directly at the root URL path without build processing.
+Flat static file directory following web application conventions where public assets are served directly at the root URL path without processing.
 ## tags
 favicon, defines, svg, icons, browser, graphic, featuring, stylized
 ## symbols

frontend/src/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: frontend/src
 
 ## role
-Frontend React application providing an admin dashboard UI with OIDC authentication, dark mode, and user activity management for a Jellyfin media server.
+Root-level frontend source directory providing the application entry point, routing, authentication, global styling, and shared state/type definitions for user management.
 ## parent
 index: frontend/.pi-map.index.md
 map: frontend/.pi-map.md

frontend/src/.pi-map.md

@@ -4,21 +4,21 @@ dir: frontend/src
 index: frontend/src/.pi-map.index.md
 
 ## role
-Frontend React application providing an admin dashboard UI with OIDC authentication, dark mode, and user activity management for a Jellyfin media server.
+Root-level frontend source directory providing the application entry point, routing, authentication, global styling, and shared state/type definitions for user management.
 ## files
-- App.tsx | Main application component that renders a responsive admin dashboard with OIDC authentication, dark mode, collapsible sidebar navigation, and route-based page rendering. | exp: func:App() | dep: react-router-dom, @tanstack/react-query, react, react-oidc-context, ./pages/Dashboard, ./pages/Applications, ./pages/Settings, ./pages/Users, ./pages/FileBrowser, ./pages/Actions, ./components/BackupsPage, ./components/ObservabilityPage, ./pages/ServicePage, ./pages/ServicesPage, ./auth, ./api/client, ./version, ./hooks/usePersistentState, @/components/ui/button, @/components/ui/tooltip, @/components/ui/sheet, lucide-react, ./pages/*, ./components/*
+- App.tsx | This file serves as the root component for a React application, setting up routing, authentication, layout (sidebar, top bar), and dark mode state. | exp: func:App() | dep: react-router-dom, @tanstack/react-query, react, lucide-react, react-oidc-context, ./pages/Dashboard, ./pages/NamedDashboardPage, ./pages/Settings, ./pages/ServicePage, ./pages/ServiceTypePage, ./pages/ServicesPage, ./auth, ./api/client, ./version, ./hooks/usePersistentState, ./hooks/useIsMobile, ./hooks/useServices, ./hooks/useDashboards, ./integrations/navEntries, @/components/ui/button, @/components/ui/tooltip, @/components/ui/sheet, @/components/ui/*, ./hooks/*, ./pages/*
 - auth.ts | Manages OIDC authentication configuration and access token retrieval for a browser-based application. | exp: func:isOidcConfigured() → boolean, call:(import.meta.env.VITE_OIDC_ENABLED ?? "true").toLowerCase, call:Boolean, func:getOidcConfig(), call:window.history.replaceState, func:setAccessToken(token: string | null | undefined), func:getAccessToken() → string | null, call:getStoredAccessToken | dep: oidc-client-ts
-- index.css | Defines a comprehensive Tailwind CSS v4 theme with custom design tokens, dark mode support, and base styles for a React application. | dep: tailwindcss, Google Fonts (Inter)
+- index.css | Defines global theme variables, dark mode colors, and base styles using Tailwind CSS v4 with semantic design tokens. | dep: Tailwind CSS, Google Fonts (Inter)
 - main.tsx | Entry point that renders the React application into the DOM root element with StrictMode enabled. | dep: react, react-dom/client, ./App, ./index.css
 - userState.d.ts | Defines TypeScript type declarations for user activity state management, including interfaces for user activity summaries and state items, plus function declarations for merging users with activity data and resolving user selections. | exp: UserActivitySummary, UserStateItem, mergeUsersWithActivity, resolveUserSelection | dep: ./types, types (NowPlayingSession, UserDirectoryItem)
-- userState.js | Merges Jellyfin users with their session activity data and provides user lookup by identifier.
+- userState.js | Merges Jellyfin users with their session activity data and provides user lookup by identifier. | exp: func:mergeUsersWithActivity(users, sessions), call:users.map, call:sessions.filter, call:sessionMatchesUser, call:buildActivitySummary, func:resolveUserSelection(users, identifier), call:normalize, call:users.find, call:userKeys(user).some
 - users.d.ts | Defines TypeScript interfaces and a function declaration for building a user drawer model from directory data. | exp: UserDetailField, UserContactAction, UserContactState, UserDrawerModel, buildUserDrawerModel | dep: ./types, types
 - users.js | Transforms raw user data into a structured UI model for a user details drawer component. | exp: func:buildUserDrawerModel(user), call:displayName, call:splitValues, call:String, call:user.role.charAt(0).toUpperCase, call:user.role.slice, call:permissions.join, call:syncStatus
 - version.ts | Exports frontend version and build info constants with a formatter for semantic version labels | exp: FRONTEND_VERSION, FRONTEND_BUILD_INFO, FRONTEND_VERSION_LABEL, func:formatVersionLabel(version: string, buildInfo: string) → string, call:version.trim, call:buildInfo.trim
 ## arch
-Component-based React SPA architecture using Tailwind CSS v4 theming, TypeScript type definitions, and utility modules for authentication and user state transformation.
+React SPA with OIDC authentication, TypeScript-first type declarations paired with plain JS implementations, Tailwind CSS v4 theming with semantic design tokens, and declarative data-transform modules following a functional pattern.
 ## tags
-user, version, state, react, pages, oidc, activity, drawer
+user, activity, state, version, react, users, drawer, model
 ## symbols
 - App
 - isOidcConfigured

frontend/src/api/.pi-map.index.md

@@ -2,23 +2,26 @@
 dir: frontend/src/api
 
 ## role
-Frontend API client layer that centralizes all HTTP communication with the backend REST API.
+Frontend API client layer that centralizes all HTTP communication with backend services using typed, token-authenticated request functions.
 ## parent
 index: frontend/src/.pi-map.index.md
 map: frontend/src/.pi-map.md
 ## children
 -
 ## files
+- authentik.ts
 - backups.ts
 - client.ts
+- dashboards.ts
 - services.ts
+- shared.ts
 - widgets.ts
 ## links
 index: frontend/src/api/.pi-map.index.md
 map: frontend/src/api/.pi-map.md
 ## workflows
 - change api behavior
-  read: backups.ts, client.ts, services.ts
+  read: authentik.ts, backups.ts, client.ts
 - change api CLI
   read: client.ts
 ## dirty

frontend/src/api/.pi-map.md

@@ -4,28 +4,31 @@ dir: frontend/src/api
 index: frontend/src/api/.pi-map.index.md
 
 ## role
-Frontend API client layer that centralizes all HTTP communication with the backend REST API.
+Frontend API client layer that centralizes all HTTP communication with backend services using typed, token-authenticated request functions.
 ## files
-- backups.ts | Provides API client functions for fetching and managing backup-related data including jobs, runs, alerts, and dashboard summaries. | exp: func:fetchBackupJobs() → Promise<BackupJob[]>, call:fetch, call:res.json, raise:Error, func:fetchBackupJob(jobId: string) → Promise<{ job: BackupJob; runs: BackupRun[] }>, call:fetch, call:res.json, raise:Error, func:fetchBackupRuns(jobId: string, status: string) → Promise<BackupRun[]>, call:params.append, call:fetch, call:res.json, raise:Error, func:fetchBackupRun(runId: string) → Promise<BackupRun>, call:fetch, call:res.json, raise:Error, func:fetchBackupAlerts(jobId: string, acknowledged: boolean, severity: string) → Promise<BackupAlert[]>, call:params.append, call:String, call:fetch, call:res.json, raise:Error, func:acknowledgeBackupAlert(alertId: string) → Promise<BackupAlert>, call:fetch, call:res.json, raise:Error, func:fetchBackupDashboard() → Promise<BackupDashboardSummary>, call:fetch, call:res.json, raise:Error | dep: ../types/backups
-- client.ts | Typed API client providing fetch-based helper functions for communicating with a FastAPI backend across dashboard, monitoring, media, files, jobs, and observability endpoints. | exp: fetchCounts, fetchLibraries, fetchActivity, fetchUsers, fetchNowPlaying, fetchMonitoringMachines, fetchAppVersion, fetchDashboardShortcuts, saveDashboardShortcut, deleteDashboardShortcut, fetchMonitoringSettings, fetchSSHKeys, generateSSHKey, saveSSHKey, deleteSSHKey, fetchSavedTasks, fetchSavedTaskRuns, saveTask, deleteTask, runTask, saveMonitoringMachine, testMonitoringMachineSSH, deleteMonitoringMachine, resetLocalDatabase, fetchMediaStatus, buildMediaIndex, stopMediaIndexBuild, forceStopMediaIndexBuild, queryMedia, fetchDirectoryListing, fetchFfprobe, fetchStat, resolvePath, fetchJobTemplates, runJob, fetchUserMessageQueueStatus, sendUserMessage, fetchAlertmanagerAlerts, fetchAlertmanagerStatus, fetchGrafanaStatus, fetchPrometheusStatus, fetchPrometheusTargets | dep: ../auth, ../types
-- services.ts | Provides CRUD HTTP client functions for managing service types and service instances via a REST API. | exp: func:fetchServiceTypes() → Promise<ServiceTypeInfo[]>, call:fetch, call:res.json, raise:Error, func:fetchServiceInstances(serviceType: string) → Promise<ServiceInstance[]>, call:encodeURIComponent, call:fetch, call:res.json, raise:Error, func:createServiceInstance(input: ServiceInstanceInput) → Promise<ServiceInstance>, call:fetch, call:JSON.stringify, call:res.json, raise:Error, func:updateServiceInstance(input: ServiceInstanceInput) → Promise<ServiceInstance>, call:fetch, call:JSON.stringify, call:res.json, raise:Error, func:deleteServiceInstance(serviceId: string) → Promise<{ status: string }>, call:fetch, call:res.json, raise:Error | dep: ../types
-- widgets.ts | Provides CRUD API client functions for managing widget instances and fetching widget-related data from a REST backend. | exp: func:fetchBuiltinWidgetKinds() → Promise< BuiltinWidgetKindInfo[] >, call:fetch, call:res.json, raise:Error, func:fetchWidgetInstances() → Promise<WidgetInstance[]>, call:fetch, call:res.json, raise:Error, func:createWidgetInstance(input: WidgetInstanceInput) → Promise<WidgetInstance>, call:fetch, call:JSON.stringify, call:res.json, raise:Error, func:updateWidgetInstance(input: WidgetInstanceInput) → Promise<WidgetInstance>, call:fetch, call:JSON.stringify, call:res.json, raise:Error, func:deleteWidgetInstance(widgetId: string) → Promise<{ status: string }>, call:fetch, call:res.json, raise:Error, func:fetchWidgetData(widgetId: string) → Promise<WidgetDataResponse>, call:fetch, call:res.json, raise:Error | dep: ../types
+- authentik.ts | API client providing functions to fetch users, send messages, and check message status from the Authentik service. | exp: AuthentikUser, AuthentikUsersResponse, AuthentikMessageInput, AuthentikMessageResponse, func:fetchAuthentikUsers(serviceId: string, params: { search?: string; page?: number; page_size?: number }) → Promise<AuthentikUsersResponse>, call:get, call:String, func:sendAuthentikMessage(serviceId: string, input: AuthentikMessageInput) → Promise<AuthentikMessageResponse>, call:post, func:fetchAuthentikMessageStatus(serviceId: string) → Promise<Record<string, unknown>>, call:get | dep: ./shared
+- backups.ts | API client functions for fetching and managing backup jobs, runs, alerts, and dashboard summaries. | exp: func:fetchBackupJobs() → Promise<BackupJob[]>, call:get, func:fetchBackupJob(jobId: string) → Promise<{ job: BackupJob; runs: BackupRun[] }>, call:get, func:fetchBackupRuns(jobId: string, status: string) → Promise<BackupRun[]>, call:get, func:fetchBackupRun(runId: string) → Promise<BackupRun>, call:get, func:fetchBackupAlerts(jobId: string, acknowledged: boolean, severity: string) → Promise<BackupAlert[]>, call:get, call:String, func:acknowledgeBackupAlert(alertId: string) → Promise<BackupAlert>, call:post, func:fetchBackupDashboard() → Promise<BackupDashboardSummary>, call:get | dep: ./shared, ../types/backups
+- client.ts | Typed API client module that provides frontend functions for interacting with a FastAPI backend across dashboard, monitoring, media, files, jobs, and observability endpoints. | exp: fetchCounts, fetchLibraries, fetchActivity, fetchUsers, fetchNowPlaying, fetchMonitoringMachines, fetchAppVersion, fetchDashboardShortcuts, saveDashboardShortcut, deleteDashboardShortcut, fetchMonitoringSettings, fetchSSHKeys, generateSSHKey, saveSSHKey, deleteSSHKey, fetchSavedTasks, fetchSavedTaskRuns, saveTask, deleteTask, runTask, saveMonitoringMachine, testMonitoringMachineSSH, deleteMonitoringMachine, resetLocalDatabase, fetchMediaStatus, buildMediaIndex, stopMediaIndexBuild, forceStopMediaIndexBuild, queryMedia, fetchDirectoryListing, fetchFfprobe, fetchStat, resolvePath, fetchJobTemplates, runJob, fetchUserMessageQueueStatus, sendUserMessage, fetchAlertmanagerAlerts, fetchAlertmanagerStatus, fetchPrometheusStatus, fetchPrometheusTargets | dep: ../types, ./shared, fetch API
+- dashboards.ts | API client providing CRUD operations for named dashboards via REST endpoints. | exp: NamedDashboard, NamedDashboardInput, func:fetchDashboards() → Promise<NamedDashboard[]>, call:get, func:fetchDashboardBySlug(slug: string) → Promise<NamedDashboard>, call:get, call:encodeURIComponent, func:createDashboard(input: NamedDashboardInput) → Promise<NamedDashboard>, call:post, func:updateDashboard(input: NamedDashboardInput) → Promise<NamedDashboard>, call:put, func:deleteDashboard(id: string) → Promise<{ status: string }>, call:del | dep: ./shared
+- services.ts | Provides API service functions for CRUD operations on service instances and fetching service types. | exp: func:fetchServiceTypes() → Promise<ServiceTypeInfo[]>, call:get, func:fetchServiceInstances(serviceType: string) → Promise<ServiceInstance[]>, call:get, func:createServiceInstance(input: ServiceInstanceInput) → Promise<ServiceInstance>, call:post, func:updateServiceInstance(input: ServiceInstanceInput) → Promise<ServiceInstance>, call:put, raise:Error, func:deleteServiceInstance(serviceId: string) → Promise<{ status: string }>, call:del | dep: ./shared, ../types
+- shared.ts | Provides shared API helper functions (GET, POST, PUT, DELETE, etc.) that automatically attach OIDC auth tokens and handle URL building and error parsing for backend requests. | exp: API_BASE, func:buildUrl(path: string, params: Record<string, string>) → string, call:isAbsoluteUrl, call:Object.entries, call:url.searchParams.set, call:url.toString, func:readErrorDetail(response: Response) → Promise<string>, call:response.text, call:JSON.parse, call:detail.trim, func:buildHeaders(isJsonBody: boolean) → Headers, call:getAccessToken, call:headers.set, func:get(path: string, params: Record<string, string>) → Promise<T>, call:fetch, call:buildUrl, call:buildHeaders, call:response.json, raise:Error, func:post(path: string, body: unknown) → Promise<T>, call:fetch, call:buildUrl, call:buildHeaders, call:JSON.stringify, call:response.json, raise:Error, func:postForm(path: string, body: FormData) → Promise<T>, call:fetch, call:buildUrl, call:buildHeaders, call:response.json, raise:Error, func:put(path: string, body: unknown) → Promise<T>, call:fetch, call:buildUrl, call:buildHeaders, call:JSON.stringify, call:response.json, raise:Error, func:del(path: string) → Promise<T>, call:fetch, call:buildUrl, call:buildHeaders, call:response.json, raise:Error | dep: ../auth, getAccessToken (from ../auth), fetch API, Headers API, URL API, import.meta.env
+- widgets.ts | API client module providing CRUD operations for widget instances, widget references, builtin widget kinds, and widget data retrieval. | exp: WidgetReference, WidgetReferenceInput, func:fetchBuiltinWidgetKinds() → Promise< BuiltinWidgetKindInfo[] >, call:get, func:fetchWidgetInstances(serviceId: string, scope: "dashboard" | "service") → Promise<WidgetInstance[]>, call:get, func:createWidgetInstance(input: WidgetInstanceInput) → Promise<WidgetInstance>, call:post, func:updateWidgetInstance(input: WidgetInstanceInput) → Promise<WidgetInstance>, call:put, raise:Error, func:deleteWidgetInstance(widgetId: string) → Promise<{ status: string }>, call:del, func:fetchWidgetData(widgetId: string) → Promise<WidgetDataResponse>, call:get, func:fetchWidgetReferences(dashboardScope: string) → Promise<WidgetReference[]>, call:get, func:createWidgetReference(input: WidgetReferenceInput) → Promise<WidgetReference>, call:post, func:deleteWidgetReference(referenceId: string) → Promise<{ status: string }>, call:del, func:detachWidgetReference(referenceId: string) → Promise<WidgetInstance>, call:post, func:updateWidgetReference(referenceId: string, sortOrder: number) → Promise<WidgetReference>, call:put | dep: ./shared, ../types
 ## arch
-Modular typed fetch-based client functions organized by domain (backups, services, widgets, general), exposing per-endpoint helper methods consumed by the UI layer.
+Modular API client pattern with a shared base client (`shared.ts`) handling authentication and error parsing, while domain-specific modules (authentik, backups, dashboards, services, widgets, client) expose typed CRUD and fetch operations per service area.
 ## tags
-fetch, call:fetch, call:res.json, raise:error, backup, widget, delete, service
+fetch, call:get, widget, dashboard, call:build, authentik, delete, backup
 ## symbols
+- fetchAuthentikUsers
+- sendAuthentikMessage
+- fetchAuthentikMessageStatus
 - fetchBackupJobs
 - fetchBackupJob
 - fetchBackupRuns
 - fetchBackupRun
 - fetchBackupAlerts
-- acknowledgeBackupAlert
-- fetchBackupDashboard
-- fetchServiceTypes
 ## workflows
 - change api behavior
-  read: backups.ts, client.ts, services.ts
+  read: authentik.ts, backups.ts, client.ts
 - change api CLI
   read: client.ts
 ## dirty

frontend/src/components/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: frontend/src/components
 
 ## role
-React UI component library providing reusable display elements, dashboard widgets, and page-level views for backup management, observability, media sessions, and widget configuration.
+Reusable UI component library providing presentation-layer building blocks (tables, cards, charts, dialogs, widgets) for the frontend application.
 ## parent
 index: frontend/src/.pi-map.index.md
 map: frontend/src/.pi-map.md
@@ -18,14 +18,14 @@ map: frontend/src/.pi-map.md
 - BackupDashboardWidget.tsx
 - BackupJobsTable.tsx
 - BackupRunsTable.tsx
-- BackupsPage.tsx
 - ConfirmDialog.tsx
 - DialogFooter.tsx
 - HoverEditButton.tsx
 - LibraryOverview.tsx
+- LineSeriesChart.tsx
 - MetricCard.tsx
 - NowPlaying.tsx
-- ObservabilityPage.tsx
+- PinnedServiceLink.tsx
 - SectionCard.tsx
 - SelectionRailCard.tsx
 - SessionActivityPanel.tsx

frontend/src/components/.pi-map.md

@@ -4,39 +4,39 @@ dir: frontend/src/components
 index: frontend/src/components/.pi-map.index.md
 
 ## role
-React UI component library providing reusable display elements, dashboard widgets, and page-level views for backup management, observability, media sessions, and widget configuration.
+Reusable UI component library providing presentation-layer building blocks (tables, cards, charts, dialogs, widgets) for the frontend application.
 ## files
-- BackupAlertsTable.tsx | Renders a table of backup alerts with severity badges, timestamps, and acknowledge buttons | exp: func:BackupAlertsTable({ alerts, onAcknowledge }: Props), call:alerts.map, call:severityVariant, call:formatTimestamp, call:onAcknowledge | dep: @/components/ui/badge, @/components/ui/button, @/components/ui/table, ../types/backups
+- BackupAlertsTable.tsx | Renders a responsive table of backup alerts with severity badges and acknowledge actions, switching between desktop table and mobile card layouts. | exp: func:BackupAlertsTable({ alerts, onAcknowledge }: Props), call:useIsMobile, call:onAcknowledge, call:alerts.map, call:severityVariant, call:formatTimestamp | dep: @/components/ui/badge, @/components/ui/button, @/components/ui/table, @/components/ui/mobile-card, ../hooks/useIsMobile, ../types/backups, useIsMobile hook, BackupAlert type
 - BackupDashboardWidget.tsx | Displays a dashboard widget summarizing backup job statistics including total jobs, 24-hour success rate, active alerts, and last failure timestamp. | exp: func:BackupDashboardWidget(), call:useBackupDashboard, call:new Date(data.last_failed_at * 1000).toLocaleString | dep: @/components/ui/badge, @/components/ui/card, ../hooks/useBackups
-- BackupJobsTable.tsx | Renders a table displaying backup job information with status, schedule, and run history using associated latest run data. | exp: func:BackupJobsTable({ jobs, latestRuns }: Props), call:jobs.map, call:latestRuns.get, call:formatInterval, call:statusVariant, call:formatTimestamp | dep: @/components/ui/badge, @/components/ui/table, ../types/backups
-- BackupRunsTable.tsx | Renders a filterable table of backup runs with status, duration, size, and timestamp formatting. | exp: func:BackupRunsTable({ runs }: Props), call:useState, call:runs.filter, call:filteredRuns.map, call:statusVariant, call:formatDuration, call:formatBytes, call:formatTimestamp | dep: react, @/components/ui/badge, @/components/ui/select, @/components/ui/table, ../types/backups
-- BackupsPage.tsx | A React page component that displays backup management information across three tabs (Jobs, Runs, and Alerts) with data fetched from custom hooks. | exp: func:BackupsPage(), call:useState, call:useBackupJobs, call:useBackupRuns, call:useBackupAlerts, call:useAcknowledgeAlert, call:latestRuns.get, call:latestRuns.set, call:acknowledgeMutation.mutate | dep: react, @/components/ui/tabs, ../hooks/useBackups, ./BackupAlertsTable, ./BackupJobsTable, ./BackupRunsTable
+- BackupJobsTable.tsx | Renders a responsive table of backup jobs with status badges, switching to mobile card layout on small screens. | exp: func:BackupJobsTable({ jobs, latestRuns }: Props), call:useIsMobile, call:jobs.map, call:latestRuns.get, call:formatInterval, call:statusVariant, call:formatTimestamp | dep: @/components/ui/badge, @/components/ui/table, @/components/ui/mobile-card, ../hooks/useIsMobile, ../types/backups
+- BackupRunsTable.tsx | Displays a filterable table of backup run records with responsive layout that switches between a desktop table and mobile cards. | exp: func:BackupRunsTable({ runs }: Props), call:useState, call:useIsMobile, call:runs.filter, call:filteredRuns.map, call:statusVariant, call:formatDuration, call:formatBytes, call:formatTimestamp | dep: react, @/components/ui/badge, @/components/ui/select, @/components/ui/table, @/components/ui/mobile-card, ../hooks/useIsMobile, ../types/backups
 - ConfirmDialog.tsx | Reusable confirmation dialog component that wraps shadcn/ui Dialog primitives with standardized cancel/confirm footer behavior. | exp: func:ConfirmDialog({ open, title, message, confirmLabel = "Delete", onCancel, onConfirm, busy, }: { open: boolean; title: string; message: string; confirmLabel?: string; onCancel: () => void; onConfirm: () => void; busy?: boolean; }), call:onCancel | dep: @/components/ui/dialog, ./DialogFooter
-- DialogFooter.tsx | Renders a dialog footer with cancel/confirm buttons that maps legacy MUI-style props to shadcn Button variants for backward compatibility | exp: func:DialogFooter({ onCancel, cancelLabel = "Cancel", onConfirm, confirmLabel, confirmBusyLabel, confirmDisabled, confirmColor = "primary", confirmVariant = "contained", confirmStartIcon, secondaryAction, }: DialogFooterProps), call:resolveConfirmVariant | dep: react, @/components/ui/button
-- HoverEditButton.tsx | A hover-reveal edit button component that migrates from MUI to shadcn/ui while preserving backward-compatible CSS classes for existing hover-reveal behavior. | exp: func:HoverEditButton({ onClick, label = "Edit", }: HoverEditButtonProps), call:e.stopPropagation, call:onClick | dep: lucide-react, @/components/ui/button
+- DialogFooter.tsx | Renders a dialog footer component with cancel, optional secondary action, and confirm buttons, mapping legacy MUI color/variant props to shadcn Button variants. | exp: func:DialogFooter({ onCancel, cancelLabel = "Cancel", onConfirm, confirmLabel, confirmBusyLabel, confirmDisabled, confirmColor = "primary", confirmVariant = "contained", confirmStartIcon, secondaryAction, }: DialogFooterProps), call:resolveConfirmVariant | dep: react, @/components/ui/button
+- HoverEditButton.tsx | Renders a hover-reveal edit button for desktop and always-visible edit button for mobile, preserving legacy CSS class hooks. | exp: func:HoverEditButton({ onClick, label = "Edit", mobile = "always", }: HoverEditButtonProps), call:e.stopPropagation, call:onClick | dep: lucide-react, @/components/ui/button
 - LibraryOverview.tsx | Renders a two-column responsive grid displaying movie and TV library counts using shadcn/ui Card components | exp: func:LibraryOverview({ libraries }: Props), call:libraries.filter, call:movieLibs.map, call:lib.total.toLocaleString, call:lib.movies.toLocaleString, call:tvLibs.map, call:lib.series.toLocaleString | dep: @/components/ui/card, ../types
+- LineSeriesChart.tsx | Renders multiple time-series as a shared recharts line chart with merged data and formatted timestamps. | exp: SeriesPoint, ChartSeries, func:LineSeriesChart({ series, height = 300, }: LineSeriesChartProps), call:mergeSeries, call:formatTime, call:Number, call:series.map | dep: recharts
 - MetricCard.tsx | Renders a compact metric display card with label, value, and optional subtext using Tailwind CSS styling. | exp: func:MetricCard({ label, value, subtext }: Props) | dep: @/components/ui/card
 - NowPlaying.tsx | Renders a now-playing panel by wrapping SessionActivityPanel with a specific empty message for user activity sessions. | exp: func:NowPlaying({ sessions, onSelectSession }: Props) | dep: ../types, ./SessionActivityPanel
-- ObservabilityPage.tsx | This file renders a dashboard page that provides a unified observability view of system health, alerts, metrics, and logs from services like Prometheus, Alertmanager, and Grafana. | exp: func:ObservabilityPage(), call:useAlertmanagerAlerts, call:useAlertmanagerStatus, call:useGrafanaStatus, call:usePrometheusStatus, call:usePrometheusTargets, call:useMonitoringMachines, call:useServiceInstances, call:useState, call:grafanaServices.find, call:useMemo, call:machines.find, call:encodeURIComponent, call:JSON.stringify, call:alertsSummary?.alerts.some, call:alertsSummary.alerts.map, call:machines.map | dep: react, react-router-dom, lucide-react, ../hooks/useObservability, ../hooks/useServices, @/components/ui/card, @/components/ui/badge, @/components/ui/alert, @/components/ui/button, @/components/ui/select, @/components/ui/skeleton, @/components/ui/collapsible, ../types, @/components/ui (card, badge, alert, button, select, skeleton, collapsible)
+- PinnedServiceLink.tsx | Renders a navigable card-shaped button for pinned service shortcuts on dashboards and provides a helper to construct service target paths. | exp: PinnedServiceLinkProps, func:PinnedServiceLink({ label, target, icon: Icon = Boxes, className, }: PinnedServiceLinkProps), call:useNavigate, call:navigate, call:cn, func:serviceLinkTarget(serviceType: string, serviceId: string, tab: string) → string | dep: react-router-dom, lucide-react, @/lib/utils
 - SectionCard.tsx | A reusable card component that renders a titled section with optional description and action, built on shadcn/ui Card primitives for comfortable density layout. | exp: func:SectionCard({ title, description, action, children, }: SectionCardProps) | dep: react, @/components/ui/card
 - SelectionRailCard.tsx | A reusable card component for a selection rail UI with titled header, scrollable body, and optional footer, preserving legacy API compatibility during a migration from MUI. | exp: func:SelectionRailCard({ title, description, children, footer, minHeight = 420, }: SelectionRailCardProps) | dep: react, @/components/ui/card
-- SessionActivityPanel.tsx | Renders a scrollable table panel displaying active media streaming sessions with state badges, metadata, and optional user selection actions. | exp: func:SessionActivityPanel({ sessions, emptyMessage = "No live sessions matched to this user.", selectedUserLabel, onSelectSession, }: Props), call:buildStatusSummary, call:sessions.map, call:formatStateLabel, call:onSelectSession, call:sessionStateVariant, call:event.stopPropagation | dep: @/components/ui/badge, @/components/ui/button, @/components/ui/table, ../types
+- SessionActivityPanel.tsx | Renders a scrollable table displaying live media session activity details with status badges and optional session selection callbacks. | exp: func:SessionActivityPanel({ sessions, emptyMessage = "No live sessions matched to this user.", selectedUserLabel, onSelectSession, }: Props), call:buildStatusSummary, call:sessions.map, call:formatStateLabel, call:onSelectSession, call:sessionStateVariant, call:event.stopPropagation | dep: @/components/ui/badge, @/components/ui/button, @/components/ui/table, ../types
 - TabbedCard.tsx | Renders a card with a line-style tab bar header and content area, acting as a controlled wrapper around shadcn/ui Tabs for backward-compatible API migration from MUI. | exp: func:TabbedCard({ value, onChange, tabs, children, }: TabbedCardProps), call:onChange, call:String | dep: react, @/components/ui/card, @/components/ui/tabs
-- WidgetConfigDialog.tsx | A React dialog component for managing dashboard widget instances, including adding, editing, reordering, enabling/disabling, and deleting widgets with service-specific configuration support. | exp: func:WidgetConfigDialog({ open, onClose }: Props), call:useWidgetInstances, call:useServiceInstances, call:useTasks, call:useSaveWidgetInstance, call:useDeleteWidgetInstance, call:useState, call:useMemo, call:[...instances].sort, call:setDraft, call:SERVICE_REGISTRY[ services.find((s) => s.id === serviceId)?.service_type ?? "" ]?.widgets.find, call:services.find, call:saveWidget.mutateAsync, call:reset, call:Promise.all, call:deleteWidget.mutateAsync, call:onClose, call:SERVICE_REGISTRY[ services.find((s) => s.id === draft.serviceId)?.service_type ?? "" ]?.widgets.find, call:String, call:Number, call:sortedInstances.map, call:bindingLabel, call:moveInstance, call:toggleEnabled, call:startEdit, call:removeInstance, call:Object.values(BUILTIN_WIDGETS).map, call:startAddBuiltIn, call:services .filter((s) => s.enabled) .flatMap, call:(SERVICE_REGISTRY[s.service_type]?.widgets ?? []).map, call:startAddService | dep: react, @/components/ui/dialog, @/components/ui/button, @/components/ui/input, @/components/ui/label, @/components/ui/switch, @/components/ui/select, @/components/ui/badge, @/components/ui/alert, lucide-react, ../hooks/useWidgets, ../hooks/useServices, ../hooks/useSettings, ../types, ../integrations/registry
-- WidgetInstance.tsx | Renders a widget instance by resolving its component from a registry or displaying an error for unknown widgets. | exp: func:WidgetInstanceCard({ widget }: Props), call:useServiceInstances, call:resolveWidget | dep: @/components/ui/alert, ../hooks/useServices, ../integrations/registry, ../types, ./SectionCard
+- WidgetConfigDialog.tsx | Provides a user interface dialog and form for creating, configuring, editing, and managing the sort order of dashboard widgets and widget references. | exp: func:WidgetConfigDialog({ open, onClose, serviceId, dashboardScope, editWidgetId, }: Props), call:useWidgetInstances, call:useServiceInstances, call:useTasks, call:useSaveWidgetInstance, call:useDeleteWidgetInstance, call:useWidgetReferences, call:useCreateWidgetReference, call:useDeleteWidgetReference, call:useDetachWidgetReference, call:useUpdateWidgetReference, call:useState, call:Boolean, call:useEffect, call:instances.find, call:references.find, call:startEdit, call:setDraft, call:SERVICE_REGISTRY[ services.find((s) => s.id === serviceId)?.service_type ?? "" ]?.widgets.find, call:services.find, call:setDraftBaseline, call:onClose, call:saveWidget.mutateAsync, call:reset, call:updateRef.mutateAsync, call:deleteWidget.mutateAsync, call:[...instances].sort, call:references.map, call:[...owned, ...refs].sort, call:useMemo, call:instances.map, call:existingSearch.toLowerCase().trim, call:allWidgets .filter((w) => !onDashboard.has(w.id)) .filter, call:onDashboard.has, call:w.title.toLowerCase().includes, call:w.widget_kind.toLowerCase().includes, call:createRef.mutateAsync, call:deleteRef.mutateAsync, call:detachRef.mutateAsync, call:SERVICE_REGISTRY[ services.find((s) => s.id === draft.serviceId)?.service_type ?? "" ]?.widgets.find, call:useIsMobile, call:String, call:Number, call:combinedWidgets.map, call:bindingLabel, call:moveInstance, call:toggleEnabled, call:handleDetach, call:handleRemoveReference, call:removeInstance, call:setShowExisting, call:setExistingSearch, call:availableWidgets.map, call:handleAddReference, call:Object.values(BUILTIN_WIDGETS).map, call:startAddBuiltIn, call:services .filter((s) => s.enabled) // When scoped to a service Overview, only show widgets for THAT // service instance's type (not all services' widgets). .filter((s) => !serviceId || s.id === serviceId) .flatMap, call:(SERVICE_REGISTRY[s.service_type]?.widgets ?? []).map, call:startAddService, call:handleClose, call:JSON.stringify | dep: react, @/components/ui/dialog, @/components/ui/button, @/components/ui/input, @/components/ui/textarea, @/components/ui/label, @/components/ui/switch, @/components/ui/select, @/components/ui/badge, @/components/ui/alert, lucide-react, ../hooks/useWidgets, ../hooks/useServices, ../hooks/useSettings, ../hooks/useIsMobile, @/components/ui/sheet-form, ../types, ../integrations/registry, @/components/ui/*
+- WidgetInstance.tsx | Renders a widget instance card that dynamically resolves and displays a widget component, with optional edit and copy actions. | exp: func:WidgetInstanceCard({ widget, onEdit, onCopy }: Props), call:useServiceInstances, call:resolveWidget, call:onCopy, call:onEdit | dep: @/components/ui/alert, @/components/ui/button, lucide-react, ../hooks/useServices, ../integrations/registry, ../types, ./SectionCard
 ## arch
-Functional component pattern using shadcn/ui and Tailwind CSS, with composable table/card/dialog primitives, custom hooks for data fetching, and a backward-compatibility layer easing migration from MUI.
+React functional components with responsive design patterns, built on shadcn/ui and Tailwind CSS with adapter layers for backward-compatible MUI-to-shadcn migration.
 ## tags
-call:use, components, ui, card, backup, widget, table, dialog
+call:use, components, ui, card, widget, table, backup, call:on
 ## symbols
 - BackupAlertsTable
 - BackupDashboardWidget
 - BackupJobsTable
 - BackupRunsTable
-- BackupsPage
 - ConfirmDialog
 - DialogFooter
 - HoverEditButton
+- LibraryOverview
 ## workflows
 - change components behavior
   read: BackupAlertsTable.tsx, BackupDashboardWidget.tsx, BackupJobsTable.tsx

frontend/src/components/__tests__/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: frontend/src/components/__tests__
 
 ## role
-Test suite providing unit test coverage for reusable UI components and feature widgets in the frontend.
+Test suite providing unit test coverage for reusable UI components, verifying rendering, user interactions, responsive layouts, and edge cases.
 ## parent
 index: frontend/src/components/.pi-map.index.md
 map: frontend/src/components/.pi-map.md
@@ -11,22 +11,26 @@ map: frontend/src/components/.pi-map.md
 ## files
 - BackupAlertsTable.test.tsx
 - BackupDashboardWidget.test.tsx
+- BackupJobsTable.test.tsx
 - BackupRunsTable.test.tsx
 - ConfirmDialog.test.tsx
 - DialogFooter.test.tsx
 - HoverEditButton.test.tsx
 - LibraryOverview.test.tsx
+- LineSeriesChart.test.tsx
 - MetricCard.test.tsx
 - NowPlaying.test.tsx
+- PinnedServiceLink.test.tsx
 - SectionCard.test.tsx
 - SelectionRailCard.test.tsx
 - SessionActivityPanel.test.tsx
 - TabbedCard.test.tsx
+- WidgetConfigDialog.test.tsx
 ## links
 index: frontend/src/components/__tests__/.pi-map.index.md
 map: frontend/src/components/__tests__/.pi-map.md
 ## workflows
 - update __tests__ tests
-  read: BackupAlertsTable.test.tsx, BackupDashboardWidget.test.tsx, BackupRunsTable.test.tsx
+  read: BackupAlertsTable.test.tsx, BackupDashboardWidget.test.tsx, BackupJobsTable.test.tsx
 ## dirty
 -

frontend/src/components/__tests__/.pi-map.md

@@ -4,29 +4,33 @@ dir: frontend/src/components/__tests__
 index: frontend/src/components/__tests__/.pi-map.index.md
 
 ## role
-Test suite providing unit test coverage for reusable UI components and feature widgets in the frontend.
+Test suite providing unit test coverage for reusable UI components, verifying rendering, user interactions, responsive layouts, and edge cases.
 ## files
-- BackupAlertsTable.test.tsx | Unit tests for the BackupAlertsTable component verifying severity badge mapping, acknowledge button behavior, and conditional rendering | dep: vitest, @testing-library/react, @testing-library/user-event, ../BackupAlertsTable, ../../types/backups, BackupAlertsTable component, BackupAlert type
+- BackupAlertsTable.test.tsx | Tests the BackupAlertsTable component for severity-to-badge mapping, acknowledge button behavior, and responsive mobile card layout. | dep: vitest, @testing-library/react, @testing-library/user-event, ../BackupAlertsTable, ../../types/backups, BackupAlertsTable, BackupAlert type
 - BackupDashboardWidget.test.tsx | Unit tests for BackupDashboardWidget component covering loading, success, and alert states | dep: vitest, @testing-library/react, ../BackupDashboardWidget, ../../hooks/useBackups, BackupDashboardWidget, useBackupDashboard hook
-- BackupRunsTable.test.tsx | Tests the BackupRunsTable component's status-to-badge variant mapping and formatting of duration/bytes values. | dep: vitest, @testing-library/react, ../BackupRunsTable, ../../types/backups, BackupRunsTable, types/backups
+- BackupJobsTable.test.tsx | Tests the BackupJobsTable component for correct rendering in both desktop table and mobile card layouts. | dep: vitest, @testing-library/react, ../BackupJobsTable, ../../types/backups, BackupJobsTable, types/backups
+- BackupRunsTable.test.tsx | Tests the BackupRunsTable component for correct status badge variants, formatted output, and responsive mobile card layout. | dep: vitest, @testing-library/react, ../BackupRunsTable, ../../types/backups, BackupRunsTable, types/backups
 - ConfirmDialog.test.tsx | Tests the ConfirmDialog component's rendering behavior and user interaction handlers. | dep: vitest, @testing-library/react, @testing-library/user-event, ../ConfirmDialog, ConfirmDialog
 - DialogFooter.test.tsx | Tests the DialogFooter component's rendering, callback wiring, busy state, destructive styling, and secondary action support. | dep: vitest, @testing-library/react, @testing-library/user-event, ../DialogFooter
-- HoverEditButton.test.tsx | Tests the HoverEditButton component's click behavior and label customization. | dep: vitest, @testing-library/react, @testing-library/user-event, ../HoverEditButton, HoverEditButton
+- HoverEditButton.test.tsx | Tests the HoverEditButton component for click handling, custom labels, and responsive visibility behavior across mobile modes. | dep: vitest, @testing-library/react, @testing-library/user-event, ../HoverEditButton, HoverEditButton
 - LibraryOverview.test.tsx | Tests the LibraryOverview component renders movie and TV library cards with correct counts | dep: vitest, @testing-library/react, ../LibraryOverview, ../../types, LibraryOverview component, LibraryCount type
+- LineSeriesChart.test.tsx | Tests the LineSeriesChart component for crash-free rendering with series data, empty data, and custom height. | dep: vitest, @testing-library/react, ../LineSeriesChart, LineSeriesChart
 - MetricCard.test.tsx | Tests the MetricCard component rendering with and without optional subtext prop | dep: vitest, @testing-library/react, ../MetricCard
 - NowPlaying.test.tsx | Tests the NowPlaying component's empty-state rendering when no sessions exist | dep: vitest, @testing-library/react, ../NowPlaying, NowPlaying component
+- PinnedServiceLink.test.tsx | Tests the PinnedServiceLink component to verify it renders the correct label and navigates to the target route on click. | dep: vitest, @testing-library/react, react-router-dom, @testing-library/user-event, ../PinnedServiceLink, PinnedServiceLink
 - SectionCard.test.tsx | Unit tests for the SectionCard component verifying it renders title, description, action, and children correctly | dep: vitest, @testing-library/react, ../SectionCard, SectionCard
 - SelectionRailCard.test.tsx | Unit tests for the SelectionRailCard component verifying it renders title, body, footer, and applies minHeight prop correctly. | dep: vitest, @testing-library/react, ../SelectionRailCard, SelectionRailCard
 - SessionActivityPanel.test.tsx | Tests the SessionActivityPanel component's rendering of session states, empty state, and user interaction callbacks. | dep: vitest, @testing-library/react, @testing-library/user-event, ../SessionActivityPanel, ../../types, SessionActivityPanel, types
 - TabbedCard.test.tsx | Tests the TabbedCard component's rendering and tab selection behavior | dep: vitest, @testing-library/react, @testing-library/user-event, ../TabbedCard, @/components/ui/tabs
+- WidgetConfigDialog.test.tsx | Tests the WidgetConfigDialog component for desktop and mobile rendering modes, including draft discard confirmation behavior. | dep: vitest, @testing-library/react, ../WidgetConfigDialog, @testing-library/user-event, WidgetConfigDialog, useWidgets, useServices, useSettings
 ## arch
-Component-level React Testing Library tests organized as co-located per-component test files following a flat naming convention.
+React Testing Library with Jest, organized as co-located component test files following a one-test-file-per-component convention.
 ## tags
-library, @testing, tests, component, vitest, react, user, card.test
+library, @testing, react, tests, component, vitest, user, rendering
 ## symbols
 -
 ## workflows
 - update __tests__ tests
-  read: BackupAlertsTable.test.tsx, BackupDashboardWidget.test.tsx, BackupRunsTable.test.tsx
+  read: BackupAlertsTable.test.tsx, BackupDashboardWidget.test.tsx, BackupJobsTable.test.tsx
 ## dirty
 -

frontend/src/components/ui/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: frontend/src/components/ui
 
 ## role
-Reusable, design-system UI component library providing styled, accessible primitives (buttons, inputs, dialogs, tables, etc.) for consistent application interfaces.
+Reusable UI component library providing styled, accessible primitives (buttons, inputs, dialogs, tables, etc.) for consistent application interfaces.
 ## parent
 index: frontend/src/components/.pi-map.index.md
 map: frontend/src/components/.pi-map.md
@@ -23,13 +23,16 @@ map: frontend/src/components/.pi-map.md
 - dropdown-menu.tsx
 - input.tsx
 - label.tsx
+- mobile-card.tsx
 - progress.tsx
 - scroll-area.tsx
 - select.tsx
 - separator.tsx
+- sheet-form.tsx
 - sheet.tsx
 - skeleton.tsx
 - switch.tsx
+- table-pagination.tsx
 - table.tsx
 - tabs.tsx
 - textarea.tsx

frontend/src/components/ui/.pi-map.md

@@ -4,7 +4,7 @@ dir: frontend/src/components/ui
 index: frontend/src/components/ui/.pi-map.index.md
 
 ## role
-Reusable, design-system UI component library providing styled, accessible primitives (buttons, inputs, dialogs, tables, etc.) for consistent application interfaces.
+Reusable UI component library providing styled, accessible primitives (buttons, inputs, dialogs, tables, etc.) for consistent application interfaces.
 ## files
 - alert.tsx | Implements a composable alert/notification UI component with variant styling and subcomponents for title, description, and action. | dep: react, class-variance-authority, @/lib/utils
 - avatar.tsx | Provides a set of composable React avatar components with size variants, fallback support, badges, and grouped avatar layouts using Radix UI primitives. | dep: react, radix-ui, @/lib/utils
@@ -13,35 +13,38 @@ Reusable, design-system UI component library providing styled, accessible primit
 - card.tsx | A composable React card component system with sub-components for header, title, description, action, content, and footer with Tailwind styling. | dep: react, @/lib/utils, React
 - checkbox.tsx | A styled checkbox UI component built on Radix UI primitives with Tailwind CSS styling and accessibility features. | dep: react, radix-ui, @/lib/utils, lucide-react
 - collapsible.tsx | Wraps Radix UI's Collapsible primitive components with consistent data-slot attributes for a collapsible UI pattern. | dep: radix-ui, react
-- data-table.tsx | Reusable data table component wrapping TanStack Table with shadcn UI primitives, supporting row selection, column visibility toggling, pagination (client and server-side), and row click handling — explicitly excluding sorting and column resizing. | exp: DataTableProps, func:DataTable({ columns, data, getRowId, enableRowSelection = false, rowSelection, onRowSelectionChange, onRowClick, columnVisibility, onColumnVisibilityChange, enableColumnVisibilityToggle = false, enablePagination = false, manualPagination = false, pagination, onPaginationChange, pageSizeOptions = [10, 20, 30, 50], rowCount, emptyMessage = "No results.", }: DataTableProps<TData, TValue>), call:React.useMemo, call:table.getIsAllPageRowsSelected, call:table.getIsSomePageRowsSelected, call:table.toggleAllPageRowsSelected, call:e.stopPropagation, call:row.getIsSelected, call:row.toggleSelected, call:useReactTable, call:getCoreRowModel, call:getPaginationRowModel, call:Math.max, call:Math.ceil, call:table.getPageCount, call:table .getAllColumns() .filter((column) => column.getCanHide()) .map, call:column.getCanHide, call:column.getIsVisible, call:column.toggleVisibility, call:e.preventDefault, call:table.getHeaderGroups().map, call:headerGroup.headers.map, call:flexRender, call:header.getContext, call:table.getRowModel().rows.map, call:cn, call:onRowClick, call:row.getVisibleCells().map, call:cell.getContext | dep: react, @tanstack/react-table, lucide-react, @/lib/utils, @/components/ui/button, @/components/ui/checkbox, @/components/ui/table, @/components/ui/dropdown-menu, @/components/ui/select
-- dialog.tsx | A React dialog/modal component built on Radix UI primitives with styled subcomponents (overlay, content, header, footer, title, description) and close button functionality. | dep: react, radix-ui, @/lib/utils, @/components/ui/button, lucide-react
+- data-table.tsx | Reusable, generic data table component wrapping TanStack Table with support for row selection, column visibility, pagination, and row click handling. | exp: DataTableProps, func:DataTable({ columns, data, getRowId, enableRowSelection = false, rowSelection, onRowSelectionChange, onRowClick, columnVisibility, onColumnVisibilityChange, enableColumnVisibilityToggle = false, enablePagination = false, manualPagination = false, pagination, onPaginationChange, pageSizeOptions = [10, 20, 30, 50], rowCount, emptyMessage = "No results.", }: DataTableProps<TData, TValue>), call:React.useMemo, call:table.getIsAllPageRowsSelected, call:table.getIsSomePageRowsSelected, call:table.toggleAllPageRowsSelected, call:e.stopPropagation, call:row.getIsSelected, call:row.toggleSelected, call:useReactTable, call:getCoreRowModel, call:getPaginationRowModel, call:Math.max, call:Math.ceil, call:table.getPageCount, call:table .getAllColumns() .filter((column) => column.getCanHide()) .map, call:column.getCanHide, call:column.getIsVisible, call:column.toggleVisibility, call:e.preventDefault, call:table.getHeaderGroups().map, call:headerGroup.headers.map, call:flexRender, call:header.getContext, call:table.getRowModel().rows.map, call:cn, call:onRowClick, call:row.getVisibleCells().map, call:cell.getContext, call:table.getState | dep: react, @tanstack/react-table, lucide-react, @/lib/utils, @/components/ui/button, @/components/ui/checkbox, @/components/ui/table-pagination, @/components/ui/table, @/components/ui/dropdown-menu
+- dialog.tsx | Provides a customizable, accessible dialog/modal component set built on top of Radix UI primitives with Tailwind CSS styling. | dep: react, radix-ui, @/lib/utils, @/components/ui/button, lucide-react
 - dropdown-menu.tsx | A styled React dropdown menu component library built on top of Radix UI primitives with Tailwind CSS styling and animation support. | dep: react, radix-ui, @/lib/utils, lucide-react
 - input.tsx | A reusable styled input component that wraps HTML input elements with consistent Tailwind CSS styling and theme-aware states. | dep: react, @/lib/utils, React
 - label.tsx | A styled React label component that wraps Radix UI's LabelPrimitive with default Tailwind CSS styling and disabled state handling. | dep: react, radix-ui, @/lib/utils
+- mobile-card.tsx | Renders a responsive, stacked card list for displaying tabular data on mobile devices, with optional row click and action button support. | exp: MobileCardField, MobileCardRowProps, func:MobileCardRow({ rows, fields, getRowId, onRowClick, actions, className, }: MobileCardRowProps<T>), call:fields.find, call:fields.filter, call:cn, call:rows.map, call:getRowId, call:String, call:primary.render, call:rest.map, call:field.render, call:actions, call:onRowClick, call:e.preventDefault | dep: react, @/lib/utils, cn utility
 - progress.tsx | A React component that renders a styled horizontal progress bar using Radix UI primitives with customizable value and appearance. | dep: react, radix-ui, @/lib/utils
 - scroll-area.tsx | A React component that wraps Radix UI's ScrollArea primitive to provide a styled, accessible scrollable container with custom scrollbar support. | dep: react, radix-ui, @/lib/utils
 - select.tsx | A styled React select dropdown component built on top of Radix UI's Select primitive with Tailwind CSS styling and scroll buttons. | dep: react, radix-ui, @/lib/utils, lucide-react
 - separator.tsx | A React component that wraps Radix UI's Separator primitive to render accessible, styled horizontal or vertical dividers with Tailwind CSS. | dep: react, radix-ui, @/lib/utils
+- sheet-form.tsx | Provides a mobile-friendly, full-height form sheet component with fixed header/footer, scrolling body, and unsaved-changes discard confirmation. | exp: SheetFormProps, func:SheetForm({ open, onOpenChange, title, onSave, onCancel, isPending = false, saveDisabled = false, saveLabel = "Save", isDirty = false, children, bodyClassName, }: SheetFormProps), call:React.useState, call:React.useCallback, call:setConfirmDiscardOpen, call:onCancel, call:attemptClose, call:onOpenChange, call:e.preventDefault, call:cn | dep: react, lucide-react, @/lib/utils, @/components/ui/button, @/components/ui/sheet, @/components/ConfirmDialog
 - sheet.tsx | Implements a customizable slide-out panel UI component (sheet) with overlay, animations, and positioning options. | dep: react, radix-ui, @/lib/utils, @/components/ui/button, lucide-react
 - skeleton.tsx | A reusable Skeleton loading placeholder component that renders a pulsing, rounded div with muted background styling. | dep: @/lib/utils, React
 - switch.tsx | A reusable React Switch component that wraps Radix UI's Switch primitive with customizable styling, size variants, and accessibility features. | dep: react, radix-ui, @/lib/utils
+- table-pagination.tsx | Shared pagination footer component for tables and card layouts, rendering row counts, page-size selector, page indicator, and prev/next navigation buttons. | exp: TablePaginationProps, func:TablePagination({ pageIndex, pageSize, pageSizeOptions, totalRows, pageCount, onPaginationChange, className, }: TablePaginationProps), call:cn, call:String, call:onPaginationChange, call:Number, call:pageSizeOptions.map, call:Math.max | dep: @tanstack/react-table, @/lib/utils, @/components/ui/button, @/components/ui/select
 - table.tsx | A reusable, styled table component library for React with subcomponents for header, body, footer, rows, cells, and captions. | dep: react, @/lib/utils, React, cn utility from @/lib/utils
-- tabs.tsx | A React component library implementing an accessible, styled tabs UI primitive using Radix UI with support for horizontal/vertical orientations and default/line variants. | dep: react, class-variance-authority, radix-ui, @/lib/utils, React
+- tabs.tsx | Provides a styled, reusable Tabs UI component set built on Radix UI primitives with variant support. | dep: react, class-variance-authority, radix-ui, @/lib/utils
 - textarea.tsx | A reusable textarea component that applies consistent styling using Tailwind CSS classes and supports all native textarea props. | dep: react, @/lib/utils, React, cn utility from @/lib/utils
 - tooltip.tsx | Provides a styled, composable tooltip component built on top of Radix UI primitives with Tailwind CSS animations and theming. | dep: react, radix-ui, @/lib/utils
 ## arch
-shadcn/ui pattern combining Radix UI accessibility primitives, class-variance-authority (CVA) for variant styling, and Tailwind CSS utility classes, with composable sub-components and TanStack Table for data grids.
+Composable component pattern built on Radix UI primitives with Tailwind CSS styling and class-variance-authority (CVA) for variant management.
 ## tags
-react, radix, lib, utils, ui, component, table, styled
+react, radix, lib, utils, ui, component, table, row
 ## symbols
 - Badge
 - DataTable
+- MobileCardRow
+- SheetForm
+- TablePagination
 - call:cn
 - call:badgeVariants
 - DataTableProps
-- call:React.useMemo
-- call:table.getIsAllPageRowsSelected
-- call:table.getIsSomePageRowsSelected
 ## workflows
 - change ui behavior
   read: alert.tsx, avatar.tsx, badge.tsx

frontend/src/components/ui/__tests__/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: frontend/src/components/ui/__tests__
 
 ## role
-Test suite for UI component primitives, validating rendering, variants, and interactive behaviors of foundational elements like Badge and DataTable.
+Test suite providing unit and integration tests for reusable UI components including Badge, DataTable, MobileCardRow, and SheetForm.
 ## parent
 index: frontend/src/components/ui/.pi-map.index.md
 map: frontend/src/components/ui/.pi-map.md
@@ -11,11 +11,13 @@ map: frontend/src/components/ui/.pi-map.md
 ## files
 - badge.test.tsx
 - data-table.test.tsx
+- mobile-card.test.tsx
+- sheet-form.test.tsx
 ## links
 index: frontend/src/components/ui/__tests__/.pi-map.index.md
 map: frontend/src/components/ui/__tests__/.pi-map.md
 ## workflows
 - update __tests__ tests
-  read: badge.test.tsx, data-table.test.tsx
+  read: badge.test.tsx, data-table.test.tsx, mobile-card.test.tsx
 ## dirty
 -

frontend/src/components/ui/__tests__/.pi-map.md

@@ -4,18 +4,20 @@ dir: frontend/src/components/ui/__tests__
 index: frontend/src/components/ui/__tests__/.pi-map.index.md
 
 ## role
-Test suite for UI component primitives, validating rendering, variants, and interactive behaviors of foundational elements like Badge and DataTable.
+Test suite providing unit and integration tests for reusable UI components including Badge, DataTable, MobileCardRow, and SheetForm.
 ## files
 - badge.test.tsx | Tests that the Badge component renders a success variant with the correct data attribute and CSS class using a Vitest testing harness. | dep: vitest, @testing-library/react, ../badge
 - data-table.test.tsx | Tests a DataTable React component wrapper around TanStack Table, covering rendering, row selection, column visibility, row click events, empty states, and pagination. | dep: vitest, react, @testing-library/react, @testing-library/user-event, @tanstack/react-table, ../data-table
+- mobile-card.test.tsx | Tests the MobileCardRow component for correct rendering of fields, click interactions, actions, and edge cases like empty rows and missing primary fields. | dep: vitest, @testing-library/react, @testing-library/user-event, ../mobile-card
+- sheet-form.test.tsx | Tests the SheetForm component, verifying rendering, save/cancel callbacks, pending state, and dirty-state discard confirmation behavior. | dep: vitest, @testing-library/react, @testing-library/user-event, ../sheet-form
 ## arch
-Vitest and React Testing Lab testing patterns with declarative test cases covering visual variants, TanStack Table integration, user interactions, and edge-case rendering.
+Vitest-based React Testing Library tests organized in a co-located `__tests__` directory, following a one-test-file-per-component convention with focus on rendering, user interactions, and edge cases.
 ## tags
-react, data, vitest, @testing, library, table, tests, badge
+@testing, library, react, vitest, tests, component, data, table
 ## symbols
 -
 ## workflows
 - update __tests__ tests
-  read: badge.test.tsx, data-table.test.tsx
+  read: badge.test.tsx, data-table.test.tsx, mobile-card.test.tsx
 ## dirty
 -

frontend/src/hooks/.pi-map.index.md

@@ -2,16 +2,19 @@
 dir: frontend/src/hooks
 
 ## role
-Centralized React custom hooks package providing data-fetching, caching, and mutation logic via TanStack Query for all feature domains across the application.
+Centralized collection of custom React hooks that encapsulate all server-state data fetching, mutations, caching, and UI state logic for the frontend application.
 ## parent
 index: frontend/src/.pi-map.index.md
 map: frontend/src/.pi-map.md
 ## children
 -
 ## files
+- useAuthentik.ts
 - useBackups.ts
 - useDashboard.ts
+- useDashboards.ts
 - useFiles.ts
+- useIsMobile.ts
 - useMedia.ts
 - useObservability.ts
 - usePersistentState.ts
@@ -19,13 +22,12 @@ map: frontend/src/.pi-map.md
 - useServices.ts
 - useSettings.ts
 - useUserMessageQueueStatus.ts
-- useUsers.ts
 - useWidgets.ts
 ## links
 index: frontend/src/hooks/.pi-map.index.md
 map: frontend/src/hooks/.pi-map.md
 ## workflows
 - change hooks behavior
-  read: useBackups.ts, useDashboard.ts, useFiles.ts
+  read: useAuthentik.ts, useBackups.ts, useDashboard.ts
 ## dirty
 -

frontend/src/hooks/.pi-map.md

@@ -4,35 +4,37 @@ dir: frontend/src/hooks
 index: frontend/src/hooks/.pi-map.index.md
 
 ## role
-Centralized React custom hooks package providing data-fetching, caching, and mutation logic via TanStack Query for all feature domains across the application.
+Centralized collection of custom React hooks that encapsulate all server-state data fetching, mutations, caching, and UI state logic for the frontend application.
 ## files
+- useAuthentik.ts | Custom React hooks for fetching Authentik users, sending messages, and polling message status using TanStack Query. | exp: func:useAuthentikUsers(serviceId: string, params: { search?: string; page?: number; page_size?: number }), call:useQuery, call:fetchAuthentikUsers, func:useSendAuthentikMessage(serviceId: string), call:useQueryClient, call:useMutation, call:sendAuthentikMessage, call:queryClient.invalidateQueries, func:useAuthentikMessageStatus(serviceId: string), call:useQuery, call:fetchAuthentikMessageStatus | dep: @tanstack/react-query, ../api/authentik
 - useBackups.ts | Provides React Query custom hooks for fetching and managing backup-related data including jobs, runs, alerts, and dashboard metrics with automatic refetching. | exp: func:useBackupJobs(), call:useQuery, func:useBackupJob(jobId: string), call:useQuery, call:fetchBackupJob, func:useBackupRuns(jobId: string, status: string), call:useQuery, call:fetchBackupRuns, func:useBackupAlerts(jobId: string, acknowledged: boolean, severity: string), call:useQuery, call:fetchBackupAlerts, func:useAcknowledgeAlert(), call:useQueryClient, call:useMutation, call:queryClient.invalidateQueries, func:useBackupDashboard(), call:useQuery | dep: @tanstack/react-query, ../api/backups
 - useDashboard.ts | Provides React Query custom hooks for fetching and mutating dashboard data including counts, libraries, activity, and shortcuts. | exp: useNowPlaying, func:useCounts(jellyfinServiceId: string), call:useQuery, call:fetchCounts, func:useLibraries(jellyfinServiceId: string), call:useQuery, call:fetchLibraries, func:useActivity(jellyfinServiceId: string), call:useQuery, call:fetchActivity, func:useDashboardShortcuts(), call:useQuery, func:useSaveDashboardShortcut(), call:useQueryClient, call:useMutation, call:saveDashboardShortcut, call:queryClient.invalidateQueries, func:useDeleteDashboardShortcut(), call:useQueryClient, call:useMutation, call:deleteDashboardShortcut, call:queryClient.invalidateQueries | dep: @tanstack/react-query, ../api/client, ../types
+- useDashboards.ts | Custom React hooks for fetching, creating, updating, and deleting dashboards using TanStack React Query. | exp: func:useDashboards(), call:useQuery, func:useDashboardBySlug(slug: string | undefined), call:useQuery, call:fetchDashboardBySlug, func:useSaveDashboard(), call:useQueryClient, call:useMutation, call:updateDashboard, call:createDashboard, call:queryClient.invalidateQueries, func:useDeleteDashboard(), call:useQueryClient, call:useMutation, call:deleteDashboard, call:queryClient.invalidateQueries | dep: @tanstack/react-query, ../api/dashboards
 - useFiles.ts | Custom React hooks for file operations and job management using TanStack Query for data fetching, caching, and mutations. | exp: func:useDirectoryListing(path: string, machineId: string), call:useQuery, call:fetchDirectoryListing, func:useFfprobe(path: string, enabled, machineId: string), call:useQuery, call:fetchFfprobe, func:useStat(path: string, enabled, machineId: string), call:useQuery, call:fetchStat, func:useJobTemplates(), call:useQuery, func:useRunJob(machineId: string), call:useMutation, call:runJob | dep: @tanstack/react-query, ../api/client
-- useMedia.ts | Custom React hooks for managing media status, querying media, and controlling index build operations using TanStack Query. | exp: func:useMediaStatus(jellyfinServiceId: string), call:useQuery, call:fetchMediaStatus, func:useMediaQuery(params: { libraries?: string; types?: string; search?: string; hdr_filter?: string; sort_key?: string; sort_order?: string; limit?: number; offset?: number; jellyfinServiceId?: string; enabled?: boolean; }), call:useQuery, call:queryMedia, func:useBuildIndex(jellyfinServiceId: string), call:useQueryClient, call:useMutation, call:buildMediaIndex, call:invalidateMedia, func:useStopBuildIndex(jellyfinServiceId: string), call:useQueryClient, call:useMutation, call:stopMediaIndexBuild, call:invalidateMedia, func:useForceStopBuildIndex(jellyfinServiceId: string), call:useQueryClient, call:useMutation, call:forceStopMediaIndexBuild, call:invalidateMedia | dep: @tanstack/react-query, ../api/client
-- useObservability.ts | Custom React hooks for fetching and polling observability data (Alertmanager alerts/status, Grafana/Prometheus status, Prometheus targets, monitoring machines) via React Query. | exp: func:useAlertmanagerAlerts(), call:useQuery, func:useAlertmanagerStatus(), call:useQuery, func:useGrafanaStatus(), call:useQuery, func:usePrometheusStatus(), call:useQuery, func:usePrometheusTargets(), call:useQuery, func:useMonitoringMachines(), call:useQuery | dep: @tanstack/react-query, ../api/client
+- useIsMobile.ts | Custom React hook that provides a reactive, SSR-safe boolean indicating whether the viewport is at mobile width (max-width: 768px). | exp: func:useIsMobile() → boolean, call:useState, call:window.matchMedia, call:useEffect, call:setIsMobile, call:mql.addEventListener, call:mql.removeEventListener | dep: react
+- useMedia.ts | Custom React hooks for managing media index status, querying, and build lifecycle operations using TanStack Query. | exp: func:useMediaStatus(jellyfinServiceId: string), call:useQuery, call:fetchMediaStatus, func:useMediaQuery(params: { libraries?: string; types?: string; search?: string; hdr_filter?: string; sort_key?: string; sort_order?: string; limit?: number; offset?: number; jellyfinServiceId?: string; enabled?: boolean; }), call:useQuery, call:queryMedia, func:useBuildIndex(jellyfinServiceId: string), call:useQueryClient, call:useMutation, call:buildMediaIndex, call:invalidateMedia, func:useStopBuildIndex(jellyfinServiceId: string), call:useQueryClient, call:useMutation, call:stopMediaIndexBuild, call:invalidateMedia, func:useForceStopBuildIndex(jellyfinServiceId: string), call:useQueryClient, call:useMutation, call:forceStopMediaIndexBuild, call:invalidateMedia | dep: @tanstack/react-query, ../api/client
+- useObservability.ts | Provides custom React hooks for fetching and auto-refreshing observability data (Alertmanager alerts/status, Prometheus status/targets, monitoring machines) using React Query. | exp: func:useAlertmanagerAlerts(), call:useQuery, func:useAlertmanagerStatus(), call:useQuery, func:usePrometheusStatus(), call:useQuery, func:usePrometheusTargets(), call:useQuery, func:useMonitoringMachines(), call:useQuery | dep: @tanstack/react-query, ../api/client
 - usePersistentState.ts | React hook that synchronizes state with localStorage to persist UI state across browser sessions | exp: func:usePersistentState(key: string, initialValue: T | (() => T)), call:useCallback, call:window.localStorage.getItem, call:JSON.parse, call:useState, call:useEffect, call:window.localStorage.setItem, call:JSON.stringify | dep: react
 - useSendUserMessage.ts | Custom React hook that sends a user message and invalidates the message queue cache on success | exp: func:useSendUserMessage(), call:useQueryClient, call:useMutation, call:queryClient.invalidateQueries | dep: @tanstack/react-query, ../api/client
 - useServices.ts | Provides custom React hooks for fetching, creating, updating, and deleting service instances and types using React Query. | exp: func:useServiceTypes(), call:useQuery, func:useServiceInstances(serviceType: string), call:useQuery, call:fetchServiceInstances, func:useSaveServiceInstance(), call:useQueryClient, call:useMutation, call:updateServiceInstance, call:createServiceInstance, call:queryClient.invalidateQueries, func:useDeleteServiceInstance(), call:useQueryClient, call:useMutation, call:deleteServiceInstance, call:queryClient.invalidateQueries | dep: @tanstack/react-query, ../api/services, ../types
 - useSettings.ts | Provides React Query custom hooks for managing application settings including monitoring machines, SSH keys, saved tasks, and local database reset operations. | exp: func:useMonitoringSettings(), call:useQuery, func:useSSHKeys(), call:useQuery, func:useGenerateSSHKey(), call:useMutation, call:generateSSHKey, func:useSaveSSHKey(), call:useQueryClient, call:useMutation, call:saveSSHKey, call:queryClient.invalidateQueries, func:useDeleteSSHKey(), call:useQueryClient, call:useMutation, call:deleteSSHKey, call:queryClient.invalidateQueries, func:useTasks(), call:useQuery, func:useTaskRuns(taskId: string), call:useQuery, call:fetchSavedTaskRuns, call:Boolean, func:useSaveTask(), call:useQueryClient, call:useMutation, call:saveTask, call:queryClient.invalidateQueries, func:useDeleteTask(), call:useQueryClient, call:useMutation, call:deleteTask, call:queryClient.invalidateQueries, func:useRunTask(), call:useQueryClient, call:useMutation, call:runTask, call:queryClient.invalidateQueries, func:useSaveMonitoringMachine(), call:useQueryClient, call:useMutation, call:saveMonitoringMachine, call:queryClient.invalidateQueries, func:useTestMonitoringMachineSSH(), call:useMutation, func:useDeleteMonitoringMachine(), call:useQueryClient, call:useMutation, call:deleteMonitoringMachine, call:queryClient.invalidateQueries, func:useResetLocalDatabase(), call:useQueryClient, call:useMutation, call:resetLocalDatabase, call:queryClient.invalidateQueries | dep: @tanstack/react-query, ../api/client, ../types
 - useUserMessageQueueStatus.ts | Custom React hook that polls for user message queue status every 5 seconds using TanStack Query | exp: func:useUserMessageQueueStatus(), call:useQuery | dep: @tanstack/react-query, ../api/client
-- useUsers.ts | Custom React hook that fetches and caches user directory data using TanStack Query with configurable Jellyfin service ID | exp: func:useUsers(jellyfinServiceId: string), call:useQuery, call:fetchUsers | dep: @tanstack/react-query, ../api/client, ../types
-- useWidgets.ts | Custom React hooks for managing widget data fetching, caching, and mutations using TanStack Query. | exp: func:useWidgetInstances(), call:useQuery, func:useWidgetData(widgetId: string, refreshInterval: number), call:useQuery, call:fetchWidgetData, func:useSaveWidgetInstance(), call:useQueryClient, call:useMutation, call:updateWidgetInstance, call:createWidgetInstance, call:queryClient.invalidateQueries, func:useDeleteWidgetInstance(), call:useQueryClient, call:useMutation, call:deleteWidgetInstance, call:queryClient.invalidateQueries, func:useBuiltinWidgetKinds(), call:useQuery | dep: @tanstack/react-query, ../api/widgets, ../types
+- useWidgets.ts | Provides React Query hooks for fetching, creating, updating, and deleting widget instances and references. | exp: func:useWidgetInstances(serviceId: string, scope: "dashboard" | "service"), call:useQuery, call:fetchWidgetInstances, func:useWidgetData(widgetId: string, refreshInterval: number), call:useQuery, call:fetchWidgetData, func:useSaveWidgetInstance(), call:useQueryClient, call:useMutation, call:updateWidgetInstance, call:createWidgetInstance, call:queryClient.invalidateQueries, func:useDeleteWidgetInstance(), call:useQueryClient, call:useMutation, call:deleteWidgetInstance, call:queryClient.invalidateQueries, func:useBuiltinWidgetKinds(), call:useQuery, func:useWidgetReferences(dashboardScope: string | undefined), call:useQuery, call:fetchWidgetReferences, func:useCreateWidgetReference(), call:useQueryClient, call:useMutation, call:queryClient.invalidateQueries, func:useDeleteWidgetReference(), call:useQueryClient, call:useMutation, call:queryClient.invalidateQueries, func:useDetachWidgetReference(), call:useQueryClient, call:useMutation, call:queryClient.invalidateQueries, func:useUpdateWidgetReference(), call:useQueryClient, call:useMutation, call:updateWidgetReference, call:queryClient.invalidateQueries | dep: @tanstack/react-query, ../api/widgets, ../types
 ## arch
-React Query (TanStack Query) pattern with domain-specific hook modules, leveraging automatic refetching, polling, and cache invalidation, supplemented by a localStorage-backed persistent state hook.
+TanStack React Query (Query/Mutation) pattern with domain-oriented hook organization, automatic refetching/polling, cache invalidation strategies, and supplementary local-state hooks for responsive and persistent UI concerns.
 ## tags
 call:use, query, client, mutation, call:query, client.invalidate, queries, call:fetch
 ## symbols
+- useAuthentikUsers
+- useSendAuthentikMessage
+- useAuthentikMessageStatus
 - useBackupJobs
 - useBackupJob
 - useBackupRuns
 - useBackupAlerts
 - useAcknowledgeAlert
-- useBackupDashboard
-- useCounts
-- useLibraries
 ## workflows
 - change hooks behavior
-  read: useBackups.ts, useDashboard.ts, useFiles.ts
+  read: useAuthentik.ts, useBackups.ts, useDashboard.ts
 ## dirty
 -

frontend/src/integrations/.pi-map.index.md

@@ -2,13 +2,16 @@
 dir: frontend/src/integrations
 
 ## role
-Frontend integration layer that maps backend service types and widgets to their corresponding React components, metadata, and configuration schemas.
+Central registry and integration layer that maps external services and built-in widgets to their React components, metadata, and navigation entries.
 ## parent
 index: frontend/src/.pi-map.index.md
 map: frontend/src/.pi-map.md
 ## children
--
+- frontend/src/integrations/__tests__
+  index: frontend/src/integrations/__tests__/.pi-map.index.md
+  map: frontend/src/integrations/__tests__/.pi-map.md
 ## files
+- navEntries.ts
 - registry.test.ts
 - registry.ts
 ## links
@@ -16,8 +19,10 @@ index: frontend/src/integrations/.pi-map.index.md
 map: frontend/src/integrations/.pi-map.md
 ## workflows
 - change integrations behavior
-  read: registry.ts
+  read: navEntries.ts, registry.ts
 - update integrations tests
   read: registry.test.ts
+- explore integrations subdirectories
+  index: frontend/src/integrations/__tests__/.pi-map.index.md
 ## dirty
 -

frontend/src/integrations/.pi-map.md

@@ -4,27 +4,30 @@ dir: frontend/src/integrations
 index: frontend/src/integrations/.pi-map.index.md
 
 ## role
-Frontend integration layer that maps backend service types and widgets to their corresponding React components, metadata, and configuration schemas.
+Central registry and integration layer that maps external services and built-in widgets to their React components, metadata, and navigation entries.
 ## files
-- registry.test.ts | Tests the service and widget registry module, verifying correct service registrations, widget bindings, and widget resolution logic. | dep: vitest, ./registry, ../types
-- registry.ts | Defines a frontend registry mapping service types and built-in widgets to their React components, metadata, and config schemas, with a resolver to look up widgets by instance. | exp: WidgetComponentProps, ServiceWidgetBinding, ServiceBinding, SERVICE_REGISTRY, BUILTIN_WIDGETS, ResolvedWidget, func:getServiceBinding(serviceType: string) → ServiceBinding | undefined, func:getBuiltinBinding(kind: string) → ServiceWidgetBinding | undefined, func:resolveWidget(widget: WidgetInstance, services: ServiceInstance[]) → ResolvedWidget | undefined, call:services.find, call:getServiceBinding, call:binding?.widgets.find, call:getBuiltinBinding, func:enrichServiceTypes(types: ServiceTypeInfo[]) → ServiceTypeInfo[] | dep: react, ../widgets/AlertmanagerAlertsWidget, ../widgets/BackupsWidget, ../widgets/GrafanaLinkWidget, ../widgets/JellyfinWidget, ../widgets/PrometheusMetricWidget, ../widgets/SshTaskWidget, ../widgets/StaticWidget, ../types, AlertmanagerAlertsWidget, BackupsWidget, GrafanaLinkWidget, JellyfinWidget, PrometheusMetricWidget, SshTaskWidget, StaticWidget, types
+- navEntries.ts | Defines a static mapping of service types to their navigation entries and provides a filter function to return only entries for currently configured services. | exp: NavEntry, SERVICE_TYPE_NAV_ENTRIES, func:configuredNavEntries(configuredTypes: Set<string>) → NavEntry[], call:SERVICE_TYPE_NAV_ENTRIES.filter, call:configuredTypes.has | dep: lucide-react
+- registry.test.ts | Tests the service and widget registry module, validating service registrations, widget bindings, and widget resolution logic. | dep: vitest, ./registry, ../types
+- registry.ts | Maps service types and built-in widgets to their respective React components, metadata, and config schemas, and provides lookup functions to resolve widget instances. | exp: WidgetComponentProps, ServiceWidgetBinding, ServiceBinding, SERVICE_REGISTRY, BUILTIN_WIDGETS, ResolvedWidget, func:getServiceBinding(serviceType: string) → ServiceBinding | undefined, func:getBuiltinBinding(kind: string) → ServiceWidgetBinding | undefined, func:resolveWidget(widget: WidgetInstance, services: ServiceInstance[]) → ResolvedWidget | undefined, call:services.find, call:getServiceBinding, call:binding?.widgets.find, call:getBuiltinBinding, func:enrichServiceTypes(types: ServiceTypeInfo[]) → ServiceTypeInfo[] | dep: react, ../widgets/AlertmanagerAlertsWidget, ../widgets/BackupsWidget, ../widgets/PrometheusChartWidget, ../widgets/PrometheusGaugeWidget, ../widgets/PrometheusMeanWidget, ../widgets/JellyfinWidget, ../widgets/JellyfinNowPlayingWidget, ../widgets/PrometheusMetricWidget, ../widgets/QbittorrentActiveTorrentsWidget, ../widgets/QbittorrentSpeedWidget, ../widgets/QbittorrentTotalsWidget, ../widgets/SshTaskWidget, ../widgets/StaticWidget, ../types, various widget components, types
 ## arch
-Registry pattern implementing a centralized lookup dictionary with a resolver function to dynamically discover and instantiate the correct widget components based on service instances.
+Registry pattern with static mappings, lookup/resolution functions, and filter utilities to dynamically expose only configured service integrations.
 ## tags
-service, binding, widget, widgets, registry, types, builtin, get
+service, widgets, widget, binding, nav, entries, types, registry
 ## symbols
+- configuredNavEntries
 - getServiceBinding
 - getBuiltinBinding
 - resolveWidget
 - enrichServiceTypes
-- WidgetComponentProps
-- ServiceWidgetBinding
-- ServiceBinding
-- SERVICE_REGISTRY
+- NavEntry
+- SERVICE_TYPE_NAV_ENTRIES
+- call:SERVICE_TYPE_NAV_ENTRIES.filter
 ## workflows
 - change integrations behavior
-  read: registry.ts
+  read: navEntries.ts, registry.ts
 - update integrations tests
   read: registry.test.ts
+- explore integrations subdirectories
+  index: frontend/src/integrations/__tests__/.pi-map.index.md
 ## dirty
 -

frontend/src/integrations/__tests__/.pi-map.index.md

@@ -0,0 +1,20 @@
+# frontend/src/integrations/__tests__ (index)
+dir: frontend/src/integrations/__tests__
+
+## role
+Test suite that validates navigation entry generation logic for service type configurations.
+## parent
+index: frontend/src/integrations/.pi-map.index.md
+map: frontend/src/integrations/.pi-map.md
+## children
+-
+## files
+- navEntries.test.ts
+## links
+index: frontend/src/integrations/__tests__/.pi-map.index.md
+map: frontend/src/integrations/__tests__/.pi-map.md
+## workflows
+- update __tests__ tests
+  read: navEntries.test.ts
+## dirty
+-

frontend/src/integrations/__tests__/.pi-map.md

@@ -0,0 +1,20 @@
+# frontend/src/integrations/__tests__
+dir: frontend/src/integrations/__tests__
+
+index: frontend/src/integrations/__tests__/.pi-map.index.md
+
+## role
+Test suite that validates navigation entry generation logic for service type configurations.
+## files
+- navEntries.test.ts | Tests the `configuredNavEntries` function and `SERVICE_TYPE_NAV_ENTRIES` constant to verify correct navigation entry generation based on configured service types. | dep: vitest, ../navEntries
+## arch
+Unit testing pattern verifying pure functions and constants produce expected navigation structures based on input configuration.
+## tags
+nav, service, entries.test, tests, configurednaventries, type, entries, constant
+## symbols
+-
+## workflows
+- update __tests__ tests
+  read: navEntries.test.ts
+## dirty
+-

frontend/src/lib/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: frontend/src/lib
 
 ## role
-Provides shared utility functions for the frontend application.
+Provides shared utility functions for the frontend application, specifically Tailwind CSS class merging and conflict resolution.
 ## parent
 index: frontend/src/.pi-map.index.md
 map: frontend/src/.pi-map.md

frontend/src/lib/.pi-map.md

@@ -4,11 +4,11 @@ dir: frontend/src/lib
 index: frontend/src/lib/.pi-map.index.md
 
 ## role
-Provides shared utility functions for the frontend application.
+Provides shared utility functions for the frontend application, specifically Tailwind CSS class merging and conflict resolution.
 ## files
 - utils.ts | Utility function that merges Tailwind CSS classes with proper deduplication and conflict resolution | exp: func:cn(...inputs: ClassValue[]), call:twMerge, call:clsx | dep: clsx, tailwind-merge
 ## arch
-Functional utility module pattern leveraging clsx and tailwind-merge for deterministic CSS class composition.
+Functional utility module pattern using the `clsx` + `tailwind-merge` (cn) convention for deterministic class composition.
 ## tags
 merge, tailwind, cn, call:tw, call:clsx, utils, utility, merges
 ## symbols

frontend/src/pages/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: frontend/src/pages
 
 ## role
-Top-level page components constituting the primary UI screens/routes of the frontend application, covering dashboards, media management, file browsing, services, settings, users, and task automation.
+Top-level page components that render the main UI views for dashboards, services, and settings in the application.
 ## parent
 index: frontend/src/.pi-map.index.md
 map: frontend/src/.pi-map.md
@@ -10,25 +10,23 @@ map: frontend/src/.pi-map.md
 - frontend/src/pages/__tests__
   index: frontend/src/pages/__tests__/.pi-map.index.md
   map: frontend/src/pages/__tests__/.pi-map.md
+- frontend/src/pages/service-tabs
+  index: frontend/src/pages/service-tabs/.pi-map.index.md
+  map: frontend/src/pages/service-tabs/.pi-map.md
 ## files
-- Actions.tsx
-- Applications.tsx
 - Dashboard.tsx
-- FileBrowser.impl.tsx
-- FileBrowser.tsx
-- Media.tsx
+- NamedDashboardPage.tsx
 - ServicePage.tsx
+- ServiceTypePage.tsx
 - ServicesPage.tsx
 - Settings.tsx
-- Users.tsx
-- UsersPage.impl.tsx
 ## links
 index: frontend/src/pages/.pi-map.index.md
 map: frontend/src/pages/.pi-map.md
 ## workflows
 - change pages behavior
-  read: Actions.tsx, Applications.tsx, Dashboard.tsx
+  read: Dashboard.tsx, NamedDashboardPage.tsx, ServicePage.tsx
 - explore pages subdirectories
-  index: frontend/src/pages/__tests__/.pi-map.index.md
+  index: frontend/src/pages/__tests__/.pi-map.index.md, frontend/src/pages/service-tabs/.pi-map.index.md
 ## dirty
 -

frontend/src/pages/.pi-map.md

@@ -4,36 +4,31 @@ dir: frontend/src/pages
 index: frontend/src/pages/.pi-map.index.md
 
 ## role
-Top-level page components constituting the primary UI screens/routes of the frontend application, covering dashboards, media management, file browsing, services, settings, users, and task automation.
+Top-level page components that render the main UI views for dashboards, services, and settings in the application.
 ## files
-- Actions.tsx | Provides a React component for managing reusable server tasks (shell/python actions) with CRUD operations, service selection, and execution history display. | exp: func:Actions(), call:useServiceInstances, call:useTasks, call:useSaveTask, call:useDeleteTask, call:useRunTask, call:useState, call:emptyTask, call:useMemo, call:tasks.find, call:useTaskRuns, call:setDraft, call:setDraftBaseline, call:setEditOpen, call:setRunServiceId, call:saveTask.mutateAsync, call:setTab, call:String, call:tasks.map, call:openEdit, call:initialFromTask, call:runTask.mutateAsync, call:sshServices.map, call:selectedRuns.data.items.map, call:new Date(run.created_at * 1000).toLocaleString, call:deleteTask.mutate | dep: react, ../types, ../hooks/useSettings, ../hooks/useServices, ../components/DialogFooter, ../components/HoverEditButton, ../components/SectionCard, ../components/SelectionRailCard, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/card, @/components/ui/dialog, @/components/ui/input, @/components/ui/label, @/components/ui/select, @/components/ui/separator, @/components/ui/tabs, @/components/ui/textarea
-- Applications.tsx | Renders a tabbed Applications dashboard with Jellyfin library statistics and media management, plus a placeholder for future Nextcloud support. | exp: func:Applications(), call:useState | dep: react, react-router-dom, @/components/ui/alert, @/components/ui/badge, @/components/ui/tabs, ./Media, ../hooks/useDashboard, ../hooks/useServices, ../components/SectionCard, ../components/TabbedCard
-- Dashboard.tsx | Dashboard page component for managing and displaying configurable shortcuts and widget instances. | exp: func:Dashboard(), call:useNavigate, call:useDashboardShortcuts, call:useSaveDashboardShortcut, call:useDeleteDashboardShortcut, call:useState, call:emptyShortcut, call:useWidgetInstances, call:useMemo, call:widgetInstances .filter((w) => w.enabled) .sort, call:setShortcutDraft, call:setShortcutDialogOpen, call:saveShortcut.mutateAsync, call:setWidgetDialogOpen, call:shortcuts.map, call:shortcutHref, call:window.open, call:navigate, call:openEditShortcut, call:setDeleteShortcutId, call:visibleWidgets.map, call:Boolean, call:deleteShortcut.mutate | dep: react, react-router-dom, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/card, @/components/ui/dialog, @/components/ui/input, @/components/ui/label, @/components/ui/select, @/components/ui/switch, ../hooks/useDashboard, ../hooks/useWidgets, ../types, ../components/SectionCard, ../components/ConfirmDialog, ../components/DialogFooter, ../components/WidgetInstance, ../components/WidgetConfigDialog, @/components/ui/*
-- FileBrowser.impl.tsx | A React component that implements a file browser with directory listing, file selection, ffprobe media metadata inspection, and job execution capabilities. | exp: func:FileBrowser(), call:useSearchParams, call:useState, call:useMonitoringSettings, call:useMemo, call:(machines ?? []).filter, call:machine.services.includes, call:searchParams.get, call:usePersistentState, call:isVideoFile, call:requestedPath.includes, call:requestedPath.replace, call:selectedPath.replace, call:defaultFileBrowserState, call:useNavigate, call:setBrowserState, call:useDirectoryListing, call:useFfprobe, call:useJobTemplates, call:useRunJob, call:updateBrowserState, call:setSearchParams, call:next.set, call:next.delete, call:navigate, call:currentDir.replace, call:rows.push, call:entry.name.split(".").pop, call:formatSize, call:formatTime, call:updater, call:Object.keys(next).filter, call:rows.find, call:templates?.find, call:fileMachines.map, call:refetch, call:String, call:templates.map, call:runJob.mutate, call:navigateToSettings | dep: react, react-router-dom, @tanstack/react-table, @/components/ui/data-table, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/card, @/components/ui/input, @/components/ui/label, @/components/ui/select, @/components/ui/tabs, ../hooks/useFiles, ../hooks/usePersistentState, ../hooks/useSettings, ../components/SectionCard, ../components/TabbedCard
-- FileBrowser.tsx | Re-exports the FileBrowser component from its implementation file | dep: ./FileBrowser.impl
-- Media.tsx | A React component for managing and browsing Jellyfin media libraries with server-driven pagination, index building controls, and responsive data table display. | exp: func:Media(), call:useNavigate, call:useSearchParams, call:usePrefersSmallScreen, call:useServiceInstances, call:searchParams.get, call:jellyfinServices.find, call:useCounts, call:useLibraries, call:useMediaStatus, call:useBuildIndex, call:useStopBuildIndex, call:useForceStopBuildIndex, call:usePersistentState, call:defaultMediaTabState, call:setMediaState, call:useState, call:useEffect, call:setSearchParams, call:next.set, call:useMediaDataQuery, call:Math.floor, call:updater, call:useMemo, call:navigate, call:encodeURIComponent, call:Math.max, call:Math.ceil, call:formatDuration, call:jellyfinServices.map, call:status.item_count.toLocaleString, call:counts.movies.toLocaleString, call:counts.series.toLocaleString, call:counts.episodes.toLocaleString, call:(libraries?.length ?? 0).toLocaleString, call:buildIndex.mutate, call:stopBuildIndex.mutate, call:forceStopBuildIndex.mutate, call:Math.round, call:status?.build_items_processed?.toLocaleString, call:status?.build_items_total?.toLocaleString, call:status?.build_library_items_processed?.toLocaleString, call:status?.build_library_items_total?.toLocaleString, call:updateMediaState, call:total.toLocaleString | dep: react, react-router-dom, @tanstack/react-table, @/components/ui/data-table, @/components/ui/alert, @/components/ui/button, @/components/ui/card, @/components/ui/input, @/components/ui/label, @/components/ui/progress, @/components/ui/select, ../hooks/useMedia, ../hooks/usePersistentState, ../types, ../hooks/useServices, ../hooks/useDashboard, @/components/ui (data-table, alert, button, card, input, label, progress, select)
-- ServicePage.tsx | Provides a settings form to view, edit (config and secrets), save, and delete a specific service instance, and lists its available widgets. | exp: func:ServicePage(), call:useParams, call:useServiceInstances, call:useServiceTypes, call:useSaveServiceInstance, call:useDeleteServiceInstance, call:useMemo, call:services.find, call:getServiceBinding, call:types.find, call:useState, call:setName, call:setEnabled, call:setDraftConfig, call:setHydrated, call:saveService.mutateAsync, call:buildInput, call:setDeleteOpen, call:binding.widgets.map, call:deleteService.mutate | dep: react, react-router-dom, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/input, @/components/ui/label, @/components/ui/switch, ../hooks/useServices, ../types, ../components/SectionCard, ../components/ConfirmDialog, ../integrations/registry, @/components/ui (alert, badge, button, input, label, switch)
-- ServicesPage.tsx | A React page component for managing external service instances, allowing users to view, create, and delete service configurations with dynamic form fields based on service type schemas. | exp: func:ServicesPage(), call:useNavigate, call:useServiceInstances, call:useServiceTypes, call:useDeleteServiceInstance, call:useState, call:useMemo, call:map.get, call:list.push, call:map.set, call:[...map.entries()].sort, call:map.entries, call:a[0].localeCompare, call:types.find, call:getServiceBinding, call:setCreateOpen, call:grouped.map, call:typeName, call:instances.map, call:Object.entries(s.secrets_set).some, call:navigate, call:setDeleteId, call:Boolean, call:deleteService.mutate | dep: react, react-router-dom, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/input, @/components/ui/label, @/components/ui/switch, @/components/ui/dialog, lucide-react, ../hooks/useServices, ../types, ../components/SectionCard, ../components/ConfirmDialog, ../components/DialogFooter, ../integrations/registry, @/components/ui (alert, badge, button, input, label, switch, dialog)
-- Settings.tsx | Provides a React settings UI for managing monitoring machines, SSH keys, and local database operations with form editing and validation. | exp: func:Settings(), call:useMonitoringSettings, call:useSSHKeys, call:useSaveMonitoringMachine, call:useDeleteMonitoringMachine, call:useTestMonitoringMachineSSH, call:useState, call:emptyMachine, call:useMemo, call:orderedMachines.find, call:setSSHValidationMessage, call:setSSHValidationError, call:setSSHValidationStatus, call:clearSSHValidation, call:setMachineDraft, call:setEditingMachine, call:setMachineDialogOpen, call:saveMachine.mutateAsync, call:testMachineSSH.mutateAsync, call:String, call:message.toLowerCase, call:lowered.includes, call:setTab, call:orderedMachines.map, call:setSelectedMachineId, call:cn, call:openEditMachine, call:setDeleteMachineId, call:closeMachineDialog, call:saveMachineDraft, call:machineDraft.host.trim, call:Boolean, call:deleteMachine.mutate | dep: react, ../types, ../hooks/useSettings, ../components/DialogFooter, ../components/HoverEditButton, ../components/SectionCard, ../components/SelectionRailCard, ../components/TabbedCard, ../components/ConfirmDialog, @/lib/utils, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/card, @/components/ui/checkbox, @/components/ui/dialog, @/components/ui/input, @/components/ui/label, @/components/ui/select, @/components/ui/switch, @/components/ui/tabs, @/components/ui/textarea, @/components/ui/*
-- Users.tsx | Re-exports the UsersPage component from its implementation file to provide a cleaner import interface. | dep: ./UsersPage.impl
-- UsersPage.impl.tsx | A React page component for managing and messaging Jellyfin users with Jellyseerr enrichment, featuring a searchable directory table, user selection, email composition dialog, and queue status monitoring. | exp: func:UsersPage(), call:useUsers, call:useActivity, call:useUserMessageQueueStatus, call:useSendUserMessage, call:useIsMobile, call:useState, call:useSearchParams, call:useRef, call:useMemo, call:mergeUsersWithActivity, call:search.trim().toLowerCase, call:rows.filter, call:[ row.username, row.display_name, row.email, row.email_source, row.avatar_source, row.name_source, row.access_source, row.user_type_label, row.role, row.permissions_label, row.jellyseerr_username, row.activity_label, row.activity_summary, row.activity.primary_session?.title || "", String(row.jellyseerr_user_id ?? ""), ].some, call:String, call:value.toLowerCase().includes, call:queueStatus.active_request_id.slice, call:selectedIdSet.has, call:selectedRows.filter, call:filteredRows.filter, call:setSelectedUserIds, call:current.includes, call:current.filter, call:filteredRows.forEach, call:next.add, call:next.delete, call:Array.from, call:searchParams.get, call:resolveUserSelection, call:buildUserDrawerModel, call:sendUserMessage.reset, call:subject.trim, call:setSubject, call:htmlBody.trim, call:setHtmlBody, call:setComposeOpen, call:htmlBody.slice, call:requestAnimationFrame, call:textarea.focus, call:textarea.setSelectionRange, call:window.prompt, call:insertMarkup, call:setAttachments, call:formData.append, call:JSON.stringify, call:allSelectedRows.map, call:attachments.forEach, call:sendUserMessage.mutateAsync, call:setSearch, call:cn, call:toggleVisibleSelection, call:filteredRows.map, call:setSearchParams, call:event.stopPropagation, call:toggleUserSelected, call:userLabel(row).charAt(0).toUpperCase, call:activityBadgeVariant, call:Boolean, call:drawerModel.title.charAt(0).toUpperCase, call:drawerModel.identity.map, call:drawerModel.contactActions.map, call:drawerModel.contactActions .map((action) => action.hint) .join, call:drawerModel.permissions.map, call:closeCompose, call:sendUserMessage.data.request_id.slice, call:selectedDeliverableRows.map, call:attachments.map, call:removeAttachment | dep: react, react-router-dom, lucide-react, @/components/ui/dialog, @/components/ui/input, @/components/ui/textarea, @/components/ui/separator, @/components/ui/label, @/components/ui/avatar, @/components/ui/badge, @/components/ui/button, @/components/ui/checkbox, @/components/ui/alert, @/components/ui/progress, @/components/ui/tooltip, @/components/ui/sheet, @/components/ui/table, @/lib/utils, ../components/MetricCard, ../components/SessionActivityPanel, ../hooks/useUsers, ../hooks/useDashboard, ../hooks/useSendUserMessage, ../hooks/useUserMessageQueueStatus, ../types, ../users, ../userState, @/components/ui (dialog, input, textarea, separator, label, avatar, badge, button, checkbox, alert, progress, tooltip, sheet, table)
+- Dashboard.tsx | This file renders the main dashboard page, displaying widget instances grouped by category and user-created shortcuts with full CRUD dialog management. | exp: func:Dashboard(), call:useNavigate, call:useDashboardShortcuts, call:useSaveDashboardShortcut, call:useDeleteDashboardShortcut, call:useState, call:emptyShortcut, call:useWidgetInstances, call:useWidgetReferences, call:useServiceInstances, call:useIsMobile, call:useMemo, call:widgetReferences .filter((r) => r.widget.enabled) .map, call:[...widgetInstances, ...refs] .filter((w) => w.enabled) .sort, call:widgetReferences.map, call:useDetachWidgetReference, call:groupWidgetsBySection, call:setShortcutDraft, call:setShortcutDialogOpen, call:saveShortcut.mutateAsync, call:navigate, call:setWidgetDialogOpen, call:shortcuts.map, call:shortcutHref, call:window.open, call:openEditShortcut, call:setDeleteShortcutId, call:setEditWidgetId, call:widgetReferences.find, call:detachRef.mutate, call:visibleWidgets.map, call:referencedWidgetIds.has, call:Boolean, call:deleteShortcut.mutate | dep: react, react-router-dom, lucide-react, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/card, @/components/ui/dialog, @/components/ui/input, @/components/ui/label, @/components/ui/select, @/components/ui/switch, ../hooks/useDashboard, ../hooks/useWidgets, ../hooks/useServices, ../hooks/useIsMobile, ../types, ../components/SectionCard, ../components/ConfirmDialog, ../components/DialogFooter, ../components/WidgetInstance, ../components/WidgetConfigDialog, @/components/ui/*
+- NamedDashboardPage.tsx | Renders a named dashboard page that displays pinned service links and configurable widgets based on a slug-based lookup. | exp: func:NamedDashboardPage(), call:useParams, call:useDashboardBySlug, call:useWidgetReferences, call:useState, call:useMemo, call:parseItems, call:widgetRefs .filter((r) => r.widget.enabled) .map((r) => r.widget) .sort, call:setConfigOpen, call:visibleWidgets.map, call:setEditWidgetId, call:items.map | dep: react, react-router-dom, lucide-react, @/components/ui/alert, @/components/ui/button, @/components/ui/skeleton, ../hooks/useDashboards, ../hooks/useWidgets, ../components/PinnedServiceLink, ../components/WidgetInstance, ../components/WidgetConfigDialog, useDashboards hook, useWidgets hook, PinnedServiceLink, WidgetInstanceCard, WidgetConfigDialog
+- ServicePage.tsx | Displays a detailed service instance page with tabbed content, instance switching, and widget information based on URL parameters. | exp: func:ServicePage(), call:useParams, call:useServiceInstances, call:useNavigate, call:useMemo, call:services.find, call:getServiceBinding, call:serviceContentTabs, call:services.filter, call:binding.widgets.map, call:siblings.map, call:navigate, call:contentTabs.map, call:allTabs.map | dep: react, react-router-dom, @/components/ui/alert, @/components/ui/badge, @/components/ui/tabs, ../hooks/useServices, ../types, ../components/SectionCard, ../integrations/registry, ./service-tabs
+- ServiceTypePage.tsx | Resolves the first enabled service instance for a given type and redirects to it, or shows an empty state if none are configured. | exp: func:ServiceTypePage(), call:useParams, call:useServiceInstances, call:useMemo, call:instances.find | dep: react, react-router-dom, @/components/ui/alert, @/components/ui/button, ../hooks/useServices, useServices hook
+- ServicesPage.tsx | Provides the UI and logic for configuring external service instances and managing named dashboards with pinned links. | exp: func:ServicesPage(), call:useNavigate, call:useServiceInstances, call:useServiceTypes, call:useDeleteServiceInstance, call:useState, call:useMemo, call:map.get, call:list.push, call:map.set, call:[...map.entries()].sort, call:map.entries, call:a[0].localeCompare, call:types.find, call:getServiceBinding, call:setCreateOpen, call:grouped.map, call:typeName, call:instances.map, call:Object.entries(s.secrets_set).some, call:navigate, call:setDeleteId, call:Boolean, call:deleteService.mutate | dep: react, react-router-dom, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/input, @/components/ui/label, @/components/ui/switch, @/components/ui/dialog, @/components/ui/select, lucide-react, ../hooks/useServices, ../hooks/useDashboards, ../types, ../components/SectionCard, ../components/ConfirmDialog, ../components/DialogFooter, ../integrations/registry, ../components/PinnedServiceLink, ../api/dashboards, @/components/ui/*, useServices, useDashboards, SectionCard, ConfirmDialog, DialogFooter, integrations/registry
+- Settings.tsx | Provides the settings page UI for managing monitoring machines, SSH keys, services, and database resets, including CRUD operations and SSH connection validation. | exp: func:Settings(), call:useMonitoringSettings, call:useSSHKeys, call:useSaveMonitoringMachine, call:useDeleteMonitoringMachine, call:useTestMonitoringMachineSSH, call:useState, call:emptyMachine, call:useIsMobile, call:useMemo, call:orderedMachines.find, call:setSSHValidationMessage, call:setSSHValidationError, call:setSSHValidationStatus, call:clearSSHValidation, call:setMachineDraft, call:setEditingMachine, call:setMachineDialogOpen, call:saveMachine.mutateAsync, call:testMachineSSH.mutateAsync, call:String, call:message.toLowerCase, call:lowered.includes, call:setTab, call:orderedMachines.map, call:setSelectedMachineId, call:cn, call:openEditMachine, call:setDeleteMachineId, call:closeMachineDialog, call:saveMachineDraft, call:machineDraft.host.trim, call:isMachineDraftDirty, call:Boolean, call:deleteMachine.mutate | dep: react, ../types, ../hooks/useSettings, ../hooks/useIsMobile, @/components/ui/sheet-form, ../components/DialogFooter, ../components/HoverEditButton, ../components/SectionCard, ../components/SelectionRailCard, ../components/TabbedCard, ../components/ConfirmDialog, @/lib/utils, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/card, @/components/ui/checkbox, @/components/ui/dialog, @/components/ui/input, @/components/ui/label, @/components/ui/select, @/components/ui/switch, @/components/ui/tabs, @/components/ui/textarea, ../hooks/useServices, @/components/ui/*, @/hooks/useSettings, @/hooks/useServices, @/hooks/useIsMobile
 ## arch
-React functional component pattern with implementation/re-export splitting; each page encapsulates its own state management, CRUD operations, and UI rendering, typically integrating backend APIs, dynamic forms, and tabular/dialog-based interfaces.
+React functional components using URL-parameter-driven routing, tabbed interfaces, and dialog-based CRUD management with widget composition.
 ## tags
-call:use, components, ui, call:set, state, service, react, machine
+call:use, components, ui, call:set, service, machine, page, dashboard
 ## symbols
-- Actions
-- Applications
 - Dashboard
-- FileBrowser
-- Media
+- NamedDashboardPage
 - ServicePage
+- ServiceTypePage
 - ServicesPage
 - Settings
+- call:useNavigate
+- call:useDashboardShortcuts
 ## workflows
 - change pages behavior
-  read: Actions.tsx, Applications.tsx, Dashboard.tsx
+  read: Dashboard.tsx, NamedDashboardPage.tsx, ServicePage.tsx
 - explore pages subdirectories
-  index: frontend/src/pages/__tests__/.pi-map.index.md
+  index: frontend/src/pages/__tests__/.pi-map.index.md, frontend/src/pages/service-tabs/.pi-map.index.md
 ## dirty
 -

frontend/src/pages/__tests__/.pi-map.index.md

@@ -2,25 +2,22 @@
 dir: frontend/src/pages/__tests__
 
 ## role
-Test suite providing unit test coverage for top-level page components in the frontend application.
+Test suite for top-level page components, ensuring correct rendering, user interactions, and state handling across Dashboard, NamedDashboard, Service, and Settings views.
 ## parent
 index: frontend/src/pages/.pi-map.index.md
 map: frontend/src/pages/.pi-map.md
 ## children
 -
 ## files
-- Actions.test.tsx
-- Applications.test.tsx
 - Dashboard.test.tsx
-- FileBrowser.test.tsx
-- Media.test.tsx
+- NamedDashboardPage.test.tsx
+- ServicePage.test.tsx
 - Settings.test.tsx
-- UsersPage.test.tsx
 ## links
 index: frontend/src/pages/__tests__/.pi-map.index.md
 map: frontend/src/pages/__tests__/.pi-map.md
 ## workflows
 - update __tests__ tests
-  read: Actions.test.tsx, Applications.test.tsx, Dashboard.test.tsx
+  read: Dashboard.test.tsx, NamedDashboardPage.test.tsx, ServicePage.test.tsx
 ## dirty
 -

frontend/src/pages/__tests__/.pi-map.md

@@ -4,23 +4,20 @@ dir: frontend/src/pages/__tests__
 index: frontend/src/pages/__tests__/.pi-map.index.md
 
 ## role
-Test suite providing unit test coverage for top-level page components in the frontend application.
+Test suite for top-level page components, ensuring correct rendering, user interactions, and state handling across Dashboard, NamedDashboard, Service, and Settings views.
 ## files
-- Actions.test.tsx | Unit tests for the Actions component covering task creation, run button state, and task execution via SSH service selection. | dep: vitest, @testing-library/react, @testing-library/user-event, ../Actions, ../../types, ../../hooks/useSettings, ../../hooks/useServices
-- Applications.test.tsx | Tests the Applications component renders library statistics, tabs, and a mocked Media child while isolating slice-4 concerns from still-MUI dependencies. | dep: vitest, @testing-library/react, ../Applications, react-router-dom, ../Media, ../../hooks/useSettings, ../../hooks/useServices, ../../hooks/useDashboard
-- Dashboard.test.tsx | Unit tests for the Dashboard component focusing on shortcut CRUD operations (empty state, delete with confirmation, and create) while mocking child widgets and data hooks. | dep: vitest, @testing-library/react, @testing-library/user-event, ../Dashboard, ../../types, react-router-dom, ../../components/WidgetInstance, ../../components/WidgetConfigDialog, ../../hooks/useSettings, ../../hooks/useWidgets, ../../hooks/useDashboard
-- FileBrowser.test.tsx | Unit tests for a FileBrowser component verifying column rendering, file selection with ffprobe preview, and directory navigation behavior. | dep: vitest, @testing-library/react, @testing-library/user-event, ../FileBrowser.impl, ../../types, react-router-dom, ../../hooks/useFiles, ../../hooks/useSettings
-- Media.test.tsx | Tests the Media component's data table rendering, column toggling, row navigation, selection behavior, server-driven pagination, and build index controls. | dep: vitest, @testing-library/react, @testing-library/user-event, ../Media, ../../types, react-router-dom, custom hooks (useMedia, useSettings, useServices, useDashboard)
-- Settings.test.tsx | Tests the Settings component's rendering, machine editing, and machine deletion functionality using mocked hooks | dep: vitest, @testing-library/react, @testing-library/user-event, ../Settings, ../../types, ../../hooks/useSettings
-- UsersPage.test.tsx | Unit tests for the UsersPage component covering user directory rendering, row selection, drawer navigation, activity status badges, and compose dialog formatting actions. | dep: vitest, @testing-library/react, @testing-library/user-event, ../UsersPage.impl, ../../components/ui/tooltip, ../../types, react-router-dom, TooltipProvider, useUsers, useDashboard, useUserMessageQueueStatus, useSendUserMessage, SessionActivityPanel
+- Dashboard.test.tsx | Tests the Dashboard component's shortcut CRUD functionality (creation, deletion, empty state rendering) while stubbing out composed widgets and data hooks. | dep: vitest, @testing-library/react, @testing-library/user-event, ../Dashboard, ../../types, react-router-dom, Dashboard, DashboardShortcut
+- NamedDashboardPage.test.tsx | Tests the NamedDashboardPage component covering loading, error/404, data rendering, and empty states using mocked hooks. | dep: vitest, @testing-library/react, react-router-dom, @tanstack/react-query, ../NamedDashboardPage, ../../hooks/useDashboards, NamedDashboardPage, useDashboards, useWidgets, WidgetConfigDialog, WidgetInstance
+- ServicePage.test.tsx | Tests the ServicePage component's tab rendering logic, verifying conditional display of tabs based on service type and instance count. | dep: vitest, @testing-library/react, @testing-library/user-event, react-router-dom, ../ServicePage, ../../types, ServicePage, ServiceInstance
+- Settings.test.tsx | Tests the Settings component's machine list rendering, editing, and deletion flows with mocked hooks. | dep: vitest, @testing-library/react, @testing-library/user-event, ../Settings, ../../types, Settings, MonitoringMachine type, useSettings hooks
 ## arch
-React Testing Library with Jest, using component mocking, hook stubs, and isolated render testing per page module.
+React Testing Library with Jest, using mocked hooks and stubbed child components to isolate page-level rendering logic and CRUD workflows.
 ## tags
-library, @testing, hooks, react, tests, component, vitest, user
+react, @testing, library, dashboard, tests, component, rendering, hooks
 ## symbols
 -
 ## workflows
 - update __tests__ tests
-  read: Actions.test.tsx, Applications.test.tsx, Dashboard.test.tsx
+  read: Dashboard.test.tsx, NamedDashboardPage.test.tsx, ServicePage.test.tsx
 ## dirty
 -

frontend/src/pages/service-tabs/.pi-map.index.md

@@ -0,0 +1,34 @@
+# frontend/src/pages/service-tabs (index)
+dir: frontend/src/pages/service-tabs
+
+## role
+Provides service-specific tabbed UI components rendered within service detail pages based on service type.
+## parent
+index: frontend/src/pages/.pi-map.index.md
+map: frontend/src/pages/.pi-map.md
+## children
+- frontend/src/pages/service-tabs/__tests__
+  index: frontend/src/pages/service-tabs/__tests__/.pi-map.index.md
+  map: frontend/src/pages/service-tabs/__tests__/.pi-map.md
+## files
+- ActionsTab.tsx
+- AlertsTab.tsx
+- FilesTab.tsx
+- JobsTab.tsx
+- MediaTab.tsx
+- MessagingTab.tsx
+- MetricsTab.tsx
+- OverviewTab.tsx
+- RequestsTab.tsx
+- UsersTab.tsx
+- index.ts
+## links
+index: frontend/src/pages/service-tabs/.pi-map.index.md
+map: frontend/src/pages/service-tabs/.pi-map.md
+## workflows
+- change service-tabs behavior
+  read: ActionsTab.tsx, AlertsTab.tsx, FilesTab.tsx
+- explore service-tabs subdirectories
+  index: frontend/src/pages/service-tabs/__tests__/.pi-map.index.md
+## dirty
+-

frontend/src/pages/service-tabs/.pi-map.md

@@ -0,0 +1,39 @@
+# frontend/src/pages/service-tabs
+dir: frontend/src/pages/service-tabs
+
+index: frontend/src/pages/service-tabs/.pi-map.index.md
+
+## role
+Provides service-specific tabbed UI components rendered within service detail pages based on service type.
+## files
+- ActionsTab.tsx | Provides a UI tab for managing, editing, and running saved SSH tasks (shell or Python) within a service page. | exp: func:ActionsTab({ instance }: { instance: ServiceInstance }), call:useTasks, call:useSaveTask, call:useDeleteTask, call:useRunTask, call:useState, call:emptyTask, call:useMemo, call:tasks.find, call:useTaskRuns, call:setDraft, call:setDraftBaseline, call:setEditOpen, call:saveTask.mutateAsync, call:setTab, call:String, call:openEdit, call:tasks.map, call:initialFromTask, call:runTask.mutateAsync, call:selectedRuns.data.items.map, call:new Date(run.created_at * 1000).toLocaleString, call:deleteTask.mutate | dep: react, ../../types, ../../hooks/useSettings, ../../components/DialogFooter, ../../components/HoverEditButton, ../../components/SectionCard, ../../components/SelectionRailCard, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/card, @/components/ui/dialog, @/components/ui/input, @/components/ui/label, @/components/ui/select, @/components/ui/separator, @/components/ui/tabs, @/components/ui/textarea
+- AlertsTab.tsx | Renders an Alertmanager alerts summary and expandable alert list for a specific service instance. | exp: func:AlertsTab({ instance }: { instance: ServiceInstance }), call:useAlertmanagerAlerts, call:useAlertmanagerStatus, call:alertsSummary.alerts.map | dep: lucide-react, ../../hooks/useObservability, @/components/ui/card, @/components/ui/badge, @/components/ui/alert, @/components/ui/skeleton, @/components/ui/collapsible, ../../types, useObservability hooks
+- FilesTab.tsx | Displays a file browser interface for an SSH task instance, featuring directory navigation, media file previews via ffprobe, and job execution. | exp: func:FilesTab({ instance }: { instance: ServiceInstance }), call:useIsMobile, call:useSearchParams, call:searchParams.get, call:useState, call:usePersistentState, call:isVideoFile, call:path.includes, call:path.replace, call:selectedPath.replace, call:defaultFileBrowserState, call:setBrowserState, call:useDirectoryListing, call:useFfprobe, call:useJobTemplates, call:useRunJob, call:updateBrowserState, call:navigate, call:currentDir.replace, call:rows.push, call:entry.name.split(".").pop, call:formatSize, call:formatTime, call:updater, call:Object.keys(next).filter, call:rows.find, call:templates?.find, call:refetch, call:String, call:templates.map, call:runJob.mutate | dep: react, react-router-dom, @tanstack/react-table, @/components/ui/data-table, @/components/ui/mobile-card, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/card, @/components/ui/input, @/components/ui/label, @/components/ui/select, ../../hooks/useFiles, ../../hooks/usePersistentState, ../../components/SectionCard, ../../types, ../../hooks/useIsMobile, @/components/ui/*
+- JobsTab.tsx | Displays a tabbed UI for backup operations showing Jobs, Runs, and Alerts tables with global (non-instance-scoped) backup data. | exp: func:JobsTab({ instance }: { instance: ServiceInstance }), call:useState, call:useBackupJobs, call:useBackupRuns, call:useBackupAlerts, call:useAcknowledgeAlert, call:latestRuns.get, call:latestRuns.set, call:acknowledgeMutation.mutate | dep: react, @/components/ui/tabs, ../../hooks/useBackups, ../../components/BackupAlertsTable, ../../components/BackupJobsTable, ../../components/BackupRunsTable, ../../types, react/useState
+- MediaTab.tsx | Provides the media management interface for a Jellyfin service instance, including index building controls, filtering, and a paginated data table of media items. | exp: func:MediaTab({ instance }: { instance: ServiceInstance }), call:useNavigate, call:useServiceInstances, call:usePrefersSmallScreen, call:useIsMobile, call:useCounts, call:useLibraries, call:useMediaStatus, call:useBuildIndex, call:useStopBuildIndex, call:useForceStopBuildIndex, call:usePersistentState, call:defaultMediaTabState, call:setMediaState, call:useState, call:useMediaDataQuery, call:Math.floor, call:updater, call:useMemo, call:sshServices.find, call:navigate, call:encodeURIComponent, call:Math.max, call:Math.ceil, call:formatDuration, call:status.item_count.toLocaleString, call:counts.movies.toLocaleString, call:counts.series.toLocaleString, call:counts.episodes.toLocaleString, call:(libraries?.length ?? 0).toLocaleString, call:buildIndex.mutate, call:stopBuildIndex.mutate, call:forceStopBuildIndex.mutate, call:Math.round, call:status?.build_items_processed?.toLocaleString, call:status?.build_items_total?.toLocaleString, call:status?.build_library_items_processed?.toLocaleString, call:status?.build_library_items_total?.toLocaleString, call:updateMediaState, call:total.toLocaleString | dep: react, react-router-dom, @tanstack/react-table, @/components/ui/data-table, @/components/ui/mobile-card, @/components/ui/table-pagination, @/components/ui/alert, @/components/ui/button, @/components/ui/card, @/components/ui/input, @/components/ui/label, @/components/ui/progress, @/components/ui/select, ../../hooks/useMedia, ../../hooks/usePersistentState, ../../hooks/useIsMobile, ../../types, ../../hooks/useDashboard, ../../hooks/useServices, @/components/ui/* (data-table, mobile-card, table-pagination, alert, button, card, input, label, progress, select), useMedia, usePersistentState, useIsMobile, useDashboard, useServices
+- MessagingTab.tsx | Provides a UI for composing and sending HTML email messages to Authentik users via a mail queue system. | exp: func:MessagingTab({ instance }: { instance: ServiceInstance }), call:useState, call:useAuthentikUsers, call:useSendAuthentikMessage, call:(data?.items ?? []).filter, call:setSelectedEmails, call:next.has, call:next.delete, call:next.add, call:subject.trim, call:sendMessage.mutate, call:Array.from, call:sendMessage.data.request_id?.slice, call:setSearch, call:users.slice(0, 20).map, call:selectedEmails.has, call:toggleEmail, call:setSubject, call:setHtmlBody | dep: react, @/components/ui/alert, @/components/ui/button, @/components/ui/input, @/components/ui/label, @/components/ui/textarea, ../../hooks/useAuthentik, ../../types
+- MetricsTab.tsx | Displays Prometheus status and Node Exporter scrape targets in an instance-scoped metrics tab. | exp: func:MetricsTab({ instance }: { instance: ServiceInstance }), call:usePrometheusStatus, call:usePrometheusTargets | dep: lucide-react, ../../hooks/useObservability, @/components/ui/card, @/components/ui/badge, @/components/ui/alert, @/components/ui/skeleton, ../../types, useObservability hooks, UI components (Card, Badge, Alert, Skeleton), types
+- OverviewTab.tsx | Renders a configurable per-service overview tab that displays and manages service-specific widgets in a responsive grid. | exp: func:OverviewTab({ instance }: { instance: ServiceInstance }), call:useWidgetInstances, call:useState, call:useMemo, call:widgets .filter((w) => w.enabled) .sort, call:setConfigOpen, call:visibleWidgets.map, call:setEditWidgetId | dep: react, @/components/ui/alert, @/components/ui/button, lucide-react, ../../hooks/useWidgets, ../../components/WidgetInstance, ../../components/WidgetConfigDialog, ../../types, ui/alert, ui/button, useWidgets hook, WidgetInstance component, WidgetConfigDialog component, types
+- RequestsTab.tsx | Displays a Jellyseerr request-management tab within a Jellyfin page, showing either a configuration CTA or a placeholder view depending on whether Jellyseerr config fields are present. | exp: func:RequestsTab({ instance }: { instance: ServiceInstance }), call:String( (instance.config as Record<string, unknown>).jellyseerr_url ?? "", ).trim, call:String( (instance.config as Record<string, unknown>).jellyseerr_api_key ?? "", ).trim | dep: ../../types, @/components/ui/alert, lucide-react, ServiceInstance type, Alert/AlertDescription UI components, lucide-react ExternalLink icon
+- UsersTab.tsx | Displays a searchable, paginated table of Authentik users for a given service instance. | exp: func:UsersTab({ instance }: { instance: ServiceInstance }), call:useState, call:useAuthentikUsers, call:Math.max, call:Math.ceil, call:setPage, call:setCommittedSearch, call:setSearch, call:handleSearch, call:users.map, call:Math.min | dep: react, @/components/ui/alert, @/components/ui/badge, @/components/ui/button, @/components/ui/input, @/components/ui/table, ../../types, ../../hooks/useAuthentik
+- index.ts | Maps service types to their corresponding content tab components for rendering a service page. | exp: ServiceTabComponent, ContentTab, OVERVIEW_TAB, func:serviceContentTabs(serviceType: string) → ContentTab[] | dep: react, ../../types, ./OverviewTab, ./AlertsTab, ./MetricsTab, ./MediaTab, ./RequestsTab, ./FilesTab, ./ActionsTab, ./JobsTab, ./UsersTab, ./MessagingTab, OverviewTab, AlertsTab, MetricsTab, MediaTab, RequestsTab, FilesTab, ActionsTab, JobsTab, UsersTab, MessagingTab
+## arch
+Registry pattern via index.ts mapping service types to React tab components; each tab is a self-contained functional component scoped to a specific service instance.
+## tags
+call:use, components, ui, tab, state, call:set, locale, string
+## symbols
+- ActionsTab
+- AlertsTab
+- FilesTab
+- JobsTab
+- MediaTab
+- MessagingTab
+- MetricsTab
+- OverviewTab
+## workflows
+- change service-tabs behavior
+  read: ActionsTab.tsx, AlertsTab.tsx, FilesTab.tsx
+- explore service-tabs subdirectories
+  index: frontend/src/pages/service-tabs/__tests__/.pi-map.index.md
+## dirty
+-

frontend/src/pages/service-tabs/__tests__/.pi-map.index.md

@@ -0,0 +1,29 @@
+# frontend/src/pages/service-tabs/__tests__ (index)
+dir: frontend/src/pages/service-tabs/__tests__
+
+## role
+Test suite providing unit test coverage for all service detail tab components in the service management interface.
+## parent
+index: frontend/src/pages/service-tabs/.pi-map.index.md
+map: frontend/src/pages/service-tabs/.pi-map.md
+## children
+-
+## files
+- ActionsTab.test.tsx
+- AlertsTab.test.tsx
+- FilesTab.test.tsx
+- JobsTab.test.tsx
+- MediaTab.test.tsx
+- MessagingTab.test.tsx
+- MetricsTab.test.tsx
+- OverviewTab.test.tsx
+- RequestsTab.test.tsx
+- UsersTab.test.tsx
+## links
+index: frontend/src/pages/service-tabs/__tests__/.pi-map.index.md
+map: frontend/src/pages/service-tabs/__tests__/.pi-map.md
+## workflows
+- update __tests__ tests
+  read: ActionsTab.test.tsx, AlertsTab.test.tsx, FilesTab.test.tsx
+## dirty
+-

frontend/src/pages/service-tabs/__tests__/.pi-map.md

@@ -0,0 +1,29 @@
+# frontend/src/pages/service-tabs/__tests__
+dir: frontend/src/pages/service-tabs/__tests__
+
+index: frontend/src/pages/service-tabs/__tests__/.pi-map.index.md
+
+## role
+Test suite providing unit test coverage for all service detail tab components in the service management interface.
+## files
+- ActionsTab.test.tsx | Tests the ActionsTab component to verify it renders the saved-actions rail, task details, and Add action button. | dep: vitest, @testing-library/react, react-router-dom, ../ActionsTab, ../../../types, ActionsTab, useSettings hooks, ServiceInstance type
+- AlertsTab.test.tsx | Tests the AlertsTab component to verify it renders alert counts, alert names, and severity badges correctly. | dep: vitest, @testing-library/react, ../AlertsTab, ../../../types, AlertsTab, ServiceInstance type, useObservability hook
+- FilesTab.test.tsx | Tests the FilesTab component to verify it renders directory listings, a path bar, and a browser section correctly. | dep: vitest, @testing-library/react, react-router-dom, ../FilesTab, ../../../types, FilesTab, ServiceInstance, useFiles, usePersistentState
+- JobsTab.test.tsx | Tests the JobsTab component to verify it renders Jobs, Runs, and Alerts sub-tabs and displays backup job data correctly. | dep: vitest, @testing-library/react, ../JobsTab, ../../../types, JobsTab, useBackups hooks, ServiceInstance type
+- MediaTab.test.tsx | Tests the MediaTab component to verify it renders index status, library counts, and filter controls with mocked hooks. | dep: vitest, @testing-library/react, react-router-dom, ../MediaTab, ../../../types, MediaTab, ServiceInstance type
+- MessagingTab.test.tsx | Tests the MessagingTab component to verify it renders the compose form and recipient list correctly. | dep: vitest, @testing-library/react, ../MessagingTab, ../../../types, MessagingTab, useAuthentik hook, ServiceInstance type
+- MetricsTab.test.tsx | Tests the MetricsTab component to verify it renders Prometheus version and target information correctly. | dep: vitest, @testing-library/react, ../MetricsTab, ../../../types, MetricsTab, useObservability, ServiceInstance types
+- OverviewTab.test.tsx | Tests the OverviewTab component to verify widget rendering, empty states, and config dialog interactions. | dep: vitest, @testing-library/react, @testing-library/user-event, ../OverviewTab, ../../../types, useWidgets hook, WidgetInstance component, WidgetConfigDialog component
+- RequestsTab.test.tsx | Tests the RequestsTab component to verify it correctly displays empty-state messaging when Jellyseerr is unconfigured and shows the configured URL when both URL and API key are set. | dep: vitest, @testing-library/react, ../RequestsTab, ../../../types, RequestsTab, ServiceInstance
+- UsersTab.test.tsx | Tests the UsersTab component to verify it renders a directory table of users, search input, and pagination controls. | dep: vitest, @testing-library/react, ../UsersTab, ../../../types, UsersTab, useAuthentik hook, ServiceInstance type
+## arch
+React Testing Library with mocked hooks and child components, following a one-test-file-per-tab convention with shallow rendering and assertions on DOM content.
+## tags
+tab.test, react, library, @testing, tests, component, verify, vitest
+## symbols
+-
+## workflows
+- update __tests__ tests
+  read: ActionsTab.test.tsx, AlertsTab.test.tsx, FilesTab.test.tsx
+## dirty
+-

frontend/src/test/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: frontend/src/test
 
 ## role
-Provides test infrastructure configuration for the frontend's Vitest testing environment.
+Provides test infrastructure configuration and environment setup for the frontend's Vitest-based unit testing framework.
 ## parent
 index: frontend/src/.pi-map.index.md
 map: frontend/src/.pi-map.md

frontend/src/test/.pi-map.md

@@ -4,11 +4,11 @@ dir: frontend/src/test
 index: frontend/src/test/.pi-map.index.md
 
 ## role
-Provides test infrastructure configuration for the frontend's Vitest testing environment.
+Provides test infrastructure configuration and environment setup for the frontend's Vitest-based unit testing framework.
 ## files
 - setup.ts | Configures Vitest global test environment by registering jest-dom matchers and polyfilling missing jsdom APIs for Radix/shadcn UI component testing. | exp: class:ResizeObserverStub, method:observe(), method:unobserve(), method:disconnect() | dep: @testing-library/jest-dom/vitest, vitest, jsdom
 ## arch
-Setup module pattern that extends Vitest's global matchers with jest-dom and polyfills jsdom gaps for UI component compatibility.
+Bootstrap/configuration module pattern that extends the jsdom environment with custom polyfills and DOM assertion matchers to support UI component testing.
 ## tags
 vitest, jest, dom, jsdom, resize, observer, stub, observe
 ## symbols

frontend/src/types/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: frontend/src/types
 
 ## role
-Central TypeScript type definition module that provides shared interfaces and type contracts for the frontend application's API interactions and domain models.
+Central type definition package providing TypeScript interfaces for the application's domain models and API contracts.
 ## parent
 index: frontend/src/.pi-map.index.md
 map: frontend/src/.pi-map.md

frontend/src/types/.pi-map.md

@@ -4,14 +4,14 @@ dir: frontend/src/types
 index: frontend/src/types/.pi-map.index.md
 
 ## role
-Central TypeScript type definition module that provides shared interfaces and type contracts for the frontend application's API interactions and domain models.
+Central type definition package providing TypeScript interfaces for the application's domain models and API contracts.
 ## files
 - backups.ts | Defines TypeScript interfaces for a backup system including jobs, runs, alerts, and dashboard summaries. | exp: BackupJob, BackupRun, BackupAlert, BackupDashboardSummary
-- index.ts | Defines shared TypeScript interfaces for API responses covering media management, monitoring, SSH keys, tasks, widgets, and system administration. | exp: MediaCounts, LibraryCount, UserDirectoryItem, UserDirectoryResponse, UserMessageResponse, UserMessageQueueStatus, NowPlayingSession, SSHKey, SSHKeyInput, SSHKeyGenerated, SavedTask, SavedTaskInput, SavedTaskRun, MonitoringMachine, MonitoringMachineInput, ResetLocalDatabaseInput, ResetLocalDatabaseResponse, SSHValidationResult, AppVersionInfo, MediaIndexStatus, MediaIndexActionResponse, MediaItem, MediaQueryResponse, FileEntry, DirectoryListing, JobTemplate, JobResult, ResolvedPath, DashboardShortcut, DashboardShortcutInput, AlertmanagerAlert, AlertmanagerAlertSummary, AlertmanagerStatus, GrafanaStatus, PrometheusStatus, PrometheusTarget, WidgetInstance, WidgetInstanceInput, WidgetDataResponse, SecretFieldInfo, ServiceWidgetKindInfo, ServiceTypeInfo, ServiceInstance, ServiceInstanceInput, BuiltinWidgetKindInfo
+- index.ts | Defines shared TypeScript interfaces for backend API responses covering media management, user directories, SSH keys, monitoring, widgets, and task execution. | exp: MediaCounts, LibraryCount, UserDirectoryItem, UserDirectoryResponse, UserMessageResponse, UserMessageQueueStatus, NowPlayingSession, SSHKey, SSHKeyInput, SSHKeyGenerated, SavedTask, SavedTaskInput, SavedTaskRun, MonitoringMachine, MonitoringMachineInput, ResetLocalDatabaseInput, ResetLocalDatabaseResponse, SSHValidationResult, AppVersionInfo, MediaIndexStatus, MediaIndexActionResponse, MediaItem, MediaQueryResponse, FileEntry, DirectoryListing, JobTemplate, JobResult, ResolvedPath, DashboardShortcut, DashboardShortcutInput, AlertmanagerAlert, AlertmanagerAlertSummary, AlertmanagerStatus, PrometheusStatus, PrometheusTarget, WidgetInstance, WidgetInstanceInput, WidgetDataResponse, SecretFieldInfo, ServiceWidgetKindInfo, ServiceTypeInfo, ServiceInstance, ServiceInstanceInput, BuiltinWidgetKindInfo
 ## arch
-Flat type library pattern with domain-based file organization (backups vs. general types) and a barrel export structure via index.ts, enabling consistent type-safety across UI components and API layers.
+Pure type declaration modules with no runtime logic, exporting shared interfaces consumed across the frontend for type-safe data handling.
 ## tags
-input, response, media, status, info, widget, backup, user
+input, response, media, info, widget, backup, user, status
 ## symbols
 - BackupJob
 - BackupRun

frontend/src/widgets/.pi-map.index.md

@@ -2,18 +2,26 @@
 dir: frontend/src/widgets
 
 ## role
-Provides a collection of self-contained, UI-driven dashboard widgets that fetch and render data from various external services and integrations.
+Dashboard widget components that render visual data for various integrations (Alertmanager, Backups, Jellyfin, Prometheus, qBittorrent, SSH tasks, static content) within the monitoring application.
 ## parent
 index: frontend/src/.pi-map.index.md
 map: frontend/src/.pi-map.md
 ## children
--
+- frontend/src/widgets/__tests__
+  index: frontend/src/widgets/__tests__/.pi-map.index.md
+  map: frontend/src/widgets/__tests__/.pi-map.md
 ## files
 - AlertmanagerAlertsWidget.tsx
 - BackupsWidget.tsx
-- GrafanaLinkWidget.tsx
+- JellyfinNowPlayingWidget.tsx
 - JellyfinWidget.tsx
+- PrometheusChartWidget.tsx
+- PrometheusGaugeWidget.tsx
+- PrometheusMeanWidget.tsx
 - PrometheusMetricWidget.tsx
+- QbittorrentActiveTorrentsWidget.tsx
+- QbittorrentSpeedWidget.tsx
+- QbittorrentTotalsWidget.tsx
 - SshTaskWidget.tsx
 - StaticWidget.tsx
 - index.ts
@@ -22,6 +30,8 @@ index: frontend/src/widgets/.pi-map.index.md
 map: frontend/src/widgets/.pi-map.md
 ## workflows
 - change widgets behavior
-  read: AlertmanagerAlertsWidget.tsx, BackupsWidget.tsx, GrafanaLinkWidget.tsx
+  read: AlertmanagerAlertsWidget.tsx, BackupsWidget.tsx, JellyfinNowPlayingWidget.tsx
+- explore widgets subdirectories
+  index: frontend/src/widgets/__tests__/.pi-map.index.md
 ## dirty
 -

frontend/src/widgets/.pi-map.md

@@ -4,31 +4,39 @@ dir: frontend/src/widgets
 index: frontend/src/widgets/.pi-map.index.md
 
 ## role
-Provides a collection of self-contained, UI-driven dashboard widgets that fetch and render data from various external services and integrations.
+Dashboard widget components that render visual data for various integrations (Alertmanager, Backups, Jellyfin, Prometheus, qBittorrent, SSH tasks, static content) within the monitoring application.
 ## files
 - AlertmanagerAlertsWidget.tsx | Renders an Alertmanager alerts dashboard widget displaying alert summaries, severity badges, and individual alert details. | exp: func:AlertmanagerAlertsWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData, call:Object.entries(summary.by_severity).map, call:severityVariant, call:alerts.slice(0, 5).map | dep: @/components/ui/alert, @/components/ui/badge, @/components/ui/skeleton, ../components/SectionCard, ../hooks/useWidgets, ../types
 - BackupsWidget.tsx | Displays a dashboard widget showing backup job metrics including total jobs, 24-hour success rate, active alerts, and last failure timestamp. | exp: func:BackupsWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData, call:new Date(summary.last_failed_at * 1000).toLocaleString | dep: @/components/ui/alert, @/components/ui/badge, @/components/ui/skeleton, ../components/SectionCard, ../hooks/useWidgets, ../types/backups, ../types
-- GrafanaLinkWidget.tsx | Renders a widget that displays a link to Grafana with loading, error, and empty states. | exp: func:GrafanaLinkWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData | dep: @/components/ui/alert, @/components/ui/button, @/components/ui/skeleton, lucide-react, ../components/SectionCard, ../hooks/useWidgets, ../types
+- JellyfinNowPlayingWidget.tsx | Displays a Jellyfin now-playing widget that fetches and renders active media sessions using a custom data hook and session activity panel. | exp: func:JellyfinNowPlayingWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData, call:Array.isArray | dep: @/components/ui/alert, @/components/ui/skeleton, ../components/SessionActivityPanel, ../components/SectionCard, ../hooks/useWidgets, ../types, SessionActivityPanel, SectionCard, useWidgetData, types
 - JellyfinWidget.tsx | Displays Jellyfin media server activity sessions in a widget with loading, error, and empty states. | exp: func:JellyfinWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData, call:Array.isArray | dep: @/components/ui/alert, @/components/ui/skeleton, ../components/SessionActivityPanel, ../components/SectionCard, ../hooks/useWidgets, ../types
+- PrometheusChartWidget.tsx | Renders a Prometheus query widget that fetches time-series data and displays it as a line chart, with loading, error, and empty states. | exp: func:PrometheusChartWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData | dep: @/components/ui/alert, @/components/ui/skeleton, ../components/LineSeriesChart, ../components/SectionCard, ../hooks/useWidgets, ../types, LineSeriesChart, SectionCard, useWidgetData hook, WidgetInstance type
+- PrometheusGaugeWidget.tsx | Renders a Prometheus metric as a radial gauge widget with configurable warning/critical threshold bands. | exp: func:PrometheusGaugeWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData, call:Math.max, call:Math.round, call:Math.min, call:toPercent, call:trackCells.map, call:formatValue | dep: @/components/ui/alert, @/components/ui/skeleton, ../components/SectionCard, ../hooks/useWidgets, ../types, recharts, SectionCard, useWidgetData
+- PrometheusMeanWidget.tsx | Displays a single Prometheus metric value (mean) with adaptive formatting and unit support in a dashboard widget. | exp: func:PrometheusMeanWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData, call:formatMean | dep: @/components/ui/alert, @/components/ui/skeleton, ../components/SectionCard, ../hooks/useWidgets, ../types, SectionCard, useWidgetData, WidgetInstance
 - PrometheusMetricWidget.tsx | A React component that fetches and displays Prometheus metric data from a widget, handling loading, error, and data states with formatted output for scalar and vector result types. | exp: func:PrometheusMetricWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData, call:formatPrometheusValue | dep: @/components/ui/alert, @/components/ui/skeleton, ../components/SectionCard, ../hooks/useWidgets, ../types
+- QbittorrentActiveTorrentsWidget.tsx | Displays a list of active torrents from a qBittorrent instance with download/upload speeds and status badges in a dashboard widget. | exp: func:QbittorrentActiveTorrentsWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData, call:torrents.map, call:formatSpeed | dep: @/components/ui/alert, @/components/ui/badge, @/components/ui/skeleton, ../components/SectionCard, ../hooks/useWidgets, ../types, SectionCard, useWidgetData hook, WidgetInstance type
+- QbittorrentSpeedWidget.tsx | Renders a qBittorrent download/upload speed widget with a line series chart, handling loading, error, and empty states. | exp: func:QbittorrentSpeedWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData | dep: @/components/ui/alert, @/components/ui/skeleton, ../components/LineSeriesChart, ../components/SectionCard, ../hooks/useWidgets, ../types, LineSeriesChart, SectionCard, useWidgetData hook
+- QbittorrentTotalsWidget.tsx | Displays qBittorrent torrent totals and per-state breakdown using a widget with loading, error, and data states. | exp: func:QbittorrentTotalsWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData, call:Object.keys, call:Object.entries(payload.by_state).map | dep: @/components/ui/alert, @/components/ui/badge, @/components/ui/skeleton, ../components/SectionCard, ../hooks/useWidgets, ../types
 - SshTaskWidget.tsx | Displays SSH task execution results with exit status, stdout, and stderr in a polling widget card | exp: func:SshTaskWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData | dep: @/components/ui/alert, @/components/ui/skeleton, ../components/SectionCard, ../hooks/useWidgets, ../types
 - StaticWidget.tsx | Renders a static text widget that displays fetched text content or a fallback message within a section card. | exp: func:StaticWidget({ widget, refreshIntervalMs, description, }: Props), call:useWidgetData | dep: ../components/SectionCard, ../hooks/useWidgets, ../types, SectionCard, useWidgetData, WidgetInstance
-- index.ts | Barrel file that re-exports various dashboard widget components from their individual modules. | dep: AlertmanagerAlertsWidget, BackupsWidget, GrafanaLinkWidget, JellyfinWidget, PrometheusMetricWidget, SshTaskWidget, StaticWidget
+- index.ts | Barrel file that re-exports all dashboard widget components from a widgets directory. | dep: AlertmanagerAlertsWidget, BackupsWidget, PrometheusChartWidget, PrometheusGaugeWidget, PrometheusMeanWidget, JellyfinWidget, JellyfinNowPlayingWidget, PrometheusMetricWidget, QbittorrentActiveTorrentsWidget, QbittorrentSpeedWidget, QbittorrentTotalsWidget, SshTaskWidget, StaticWidget
 ## arch
-Component-based React architecture with each widget encapsulating its own data-fetching logic and standardized loading, error, and empty states, unified through a barrel-export pattern.
+React functional components using a per-widget pattern with consistent loading/error/empty state handling, custom data hooks, and barrel-file aggregation for modular dashboard composition.
 ## tags
-widget, components, data, ui, call:use, types, alert, sectioncard
+widget, components, data, ui, call:use, prometheus, sectioncard, types
 ## symbols
 - AlertmanagerAlertsWidget
 - BackupsWidget
-- GrafanaLinkWidget
+- JellyfinNowPlayingWidget
 - JellyfinWidget
+- PrometheusChartWidget
+- PrometheusGaugeWidget
+- PrometheusMeanWidget
 - PrometheusMetricWidget
-- SshTaskWidget
-- StaticWidget
-- call:useWidgetData
 ## workflows
 - change widgets behavior
-  read: AlertmanagerAlertsWidget.tsx, BackupsWidget.tsx, GrafanaLinkWidget.tsx
+  read: AlertmanagerAlertsWidget.tsx, BackupsWidget.tsx, JellyfinNowPlayingWidget.tsx
+- explore widgets subdirectories
+  index: frontend/src/widgets/__tests__/.pi-map.index.md
 ## dirty
 -

frontend/src/widgets/__tests__/.pi-map.index.md

@@ -0,0 +1,26 @@
+# frontend/src/widgets/__tests__ (index)
+dir: frontend/src/widgets/__tests__
+
+## role
+Test suite providing comprehensive unit tests for dashboard widget components, verifying rendering across loading, data, empty, and error states.
+## parent
+index: frontend/src/widgets/.pi-map.index.md
+map: frontend/src/widgets/.pi-map.md
+## children
+-
+## files
+- JellyfinNowPlayingWidget.test.tsx
+- PrometheusChartWidget.test.tsx
+- PrometheusGaugeWidget.test.tsx
+- PrometheusMeanWidget.test.tsx
+- QbittorrentActiveTorrentsWidget.test.tsx
+- QbittorrentSpeedWidget.test.tsx
+- QbittorrentTotalsWidget.test.tsx
+## links
+index: frontend/src/widgets/__tests__/.pi-map.index.md
+map: frontend/src/widgets/__tests__/.pi-map.md
+## workflows
+- update __tests__ tests
+  read: JellyfinNowPlayingWidget.test.tsx, PrometheusChartWidget.test.tsx, PrometheusGaugeWidget.test.tsx
+## dirty
+-

frontend/src/widgets/__tests__/.pi-map.md

@@ -0,0 +1,26 @@
+# frontend/src/widgets/__tests__
+dir: frontend/src/widgets/__tests__
+
+index: frontend/src/widgets/__tests__/.pi-map.index.md
+
+## role
+Test suite providing comprehensive unit tests for dashboard widget components, verifying rendering across loading, data, empty, and error states.
+## files
+- JellyfinNowPlayingWidget.test.tsx | Tests the JellyfinNowPlayingWidget component by verifying it correctly renders active sessions, empty state, and error conditions. | dep: vitest, @testing-library/react, ../JellyfinNowPlayingWidget, ../../types, JellyfinNowPlayingWidget, useWidgets hook
+- PrometheusChartWidget.test.tsx | Tests the PrometheusChartWidget component by verifying its rendering states including loading skeleton, chart with series data, error alerts, and empty states. | dep: vitest, @testing-library/react, ../PrometheusChartWidget, ../../types, ../../hooks/useWidgets, PrometheusChartWidget, useWidgets hook, WidgetInstance type
+- PrometheusGaugeWidget.test.tsx | Tests the PrometheusGaugeWidget component, covering loading, data with/without threshold bands, error, and empty states. | dep: vitest, @testing-library/react, ../PrometheusGaugeWidget, ../../types, ../../hooks/useWidgets, PrometheusGaugeWidget, WidgetInstance types, useWidgets hook
+- PrometheusMeanWidget.test.tsx | Tests the PrometheusMeanWidget component covering loading, data display, error, and empty states. | dep: vitest, @testing-library/react, ../PrometheusMeanWidget, ../../types, ../../hooks/useWidgets, PrometheusMeanWidget, useWidgets, types
+- QbittorrentActiveTorrentsWidget.test.tsx | Tests the QbittorrentActiveTorrentsWidget component for loading, data rendering, empty state, and error handling scenarios. | dep: vitest, @testing-library/react, ../QbittorrentActiveTorrentsWidget, ../../types, ../../hooks/useWidgets, QbittorrentActiveTorrentsWidget, WidgetInstance, useWidgets
+- QbittorrentSpeedWidget.test.tsx | Tests the QbittorrentSpeedWidget component for loading, data rendering, empty state, and error handling scenarios. | dep: vitest, @testing-library/react, ../QbittorrentSpeedWidget, ../../types, ../../hooks/useWidgets, QbittorrentSpeedWidget, useWidgets
+- QbittorrentTotalsWidget.test.tsx | Tests the QbittorrentTotalsWidget component for loading, data rendering, and error states. | dep: vitest, @testing-library/react, ../QbittorrentTotalsWidget, ../../types, ../../hooks/useWidgets, QbittorrentTotalsWidget, useWidgets, types
+## arch
+Co-located React component testing using a consistent arrange-act-assert pattern, with each widget receiving isolated test coverage of its visual and data-handling states.
+## tags
+widget.test, usewidgets, types, tests, component, error, vitest, @testing
+## symbols
+-
+## workflows
+- update __tests__ tests
+  read: JellyfinNowPlayingWidget.test.tsx, PrometheusChartWidget.test.tsx, PrometheusGaugeWidget.test.tsx
+## dirty
+-

frontend/tests/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: frontend/tests
 
 ## role
-Test suite validating frontend utility functions for user state management and UI model transformation.
+Test suite validating user state management and UI model transformation functions for the frontend application.
 ## parent
 index: frontend/.pi-map.index.md
 map: frontend/.pi-map.md

frontend/tests/.pi-map.md

@@ -4,12 +4,12 @@ dir: frontend/tests
 index: frontend/tests/.pi-map.index.md
 
 ## role
-Test suite validating frontend utility functions for user state management and UI model transformation.
+Test suite validating user state management and UI model transformation functions for the frontend application.
 ## files
 - userState.test.mjs | Tests user state utility functions for merging session activity with user data and resolving user selection by various identifiers | dep: node:assert/strict, node:test, ../src/userState.js
 - users.test.mjs | Tests the buildUserDrawerModel function that transforms user data into a UI drawer model with contact and permission details | dep: node:assert/strict, node:test, ../src/users.js
 ## arch
-Node.js Mocha/ES module test pattern testing pure data transformation functions in isolation.
+JavaScript test modules (Mocha/ES modules) following a unit testing pattern that verifies pure data transformation and state resolution logic.
 ## tags
 user, tests, data, node:assert, strict, node:test, src, js
 ## symbols