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/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