chore: archive observability-service-registry, track pi-map artifacts

- Archive the completed observability-service-registry SDD change into openspec/changes/archive/ (delivered across 5 slices; only jellyfin-service-registry remains active). - Stop ignoring .pi-map.md / .pi-map.index.md so the navigation maps are versioned alongside the code, and add the regenerated map pairs repo-wide.
2026-06-24 13:28:23 +00:00
parent c1610c93a1
commit 38b2de54ff
164 changed files with 4047 additions and 2 deletions
@@ -0,0 +1,34 @@
+# frontend/src/pages (index)
+dir: frontend/src/pages
+
+## role
+Top-level page components constituting the primary routed views of the frontend application, each encapsulating a distinct feature domain (dashboard, media, services, actions, files, settings, users).
+## parent
+index: frontend/src/.pi-map.index.md
+map: frontend/src/.pi-map.md
+## children
+- frontend/src/pages/__tests__
+  index: frontend/src/pages/__tests__/.pi-map.index.md
+  map: frontend/src/pages/__tests__/.pi-map.md
+## files
+- Actions.tsx
+- Applications.tsx
+- Dashboard.tsx
+- FileBrowser.impl.tsx
+- FileBrowser.tsx
+- Media.tsx
+- ServicePage.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
+- explore pages subdirectories
+  index: frontend/src/pages/__tests__/.pi-map.index.md
+## dirty
+-
@@ -0,0 +1,39 @@
+# frontend/src/pages
+dir: frontend/src/pages
+
+index: frontend/src/pages/.pi-map.index.md
+
+## role
+Top-level page components constituting the primary routed views of the frontend application, each encapsulating a distinct feature domain (dashboard, media, services, actions, files, settings, users).
+## 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 UI for viewing and editing a service instance's configuration, secrets, and widget bindings, with save and delete functionality. | exp: func:ServicePage(), call:useParams, call:useServiceInstances, call:useSaveServiceInstance, call:useDeleteServiceInstance, call:useMemo, call:services.find, call:getServiceBinding, call:useState, call:setName, call:setEnabled, 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/*
+- 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 | A React settings page component for managing monitoring machines, SSH keys, and dangerous operations with tabbed navigation, forms, and confirmation dialogs. | 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
+- 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)
+## arch
+React functional component pages organized by feature domain, employing implementation/re-export file pairs for complex views, with each page composing CRUD operations, tabbed navigation, dynamic forms, and data tables against backend service APIs.
+## tags
+call:use, components, ui, call:set, state, service, react, machine
+## symbols
+- Actions
+- Applications
+- Dashboard
+- FileBrowser
+- Media
+- ServicePage
+- ServicesPage
+- Settings
+## workflows
+- change pages behavior
+  read: Actions.tsx, Applications.tsx, Dashboard.tsx
+- explore pages subdirectories
+  index: frontend/src/pages/__tests__/.pi-map.index.md
+## dirty
+-
@@ -0,0 +1,26 @@
+# frontend/src/pages/__tests__ (index)
+dir: frontend/src/pages/__tests__
+
+## role
+Test suite providing unit test coverage for top-level page components in the frontend application.
+## 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
+- 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
+## dirty
+-
@@ -0,0 +1,26 @@
+# frontend/src/pages/__tests__
+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.
+## 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
+## arch
+React Testing Library with Jest, using component mocking, hook stubs, and isolated render testing per page module.
+## tags
+library, @testing, hooks, react, tests, component, vitest, user
+## symbols
+-
+## workflows
+- update __tests__ tests
+  read: Actions.test.tsx, Applications.test.tsx, Dashboard.test.tsx
+## dirty
+-