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