From e691b5328a25d70ba86cc7b89522dd264401a0f5 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Fri, 27 Mar 2026 22:21:15 +0000
Subject: [PATCH] refactor(recovery): align inventory row scan pattern

---
 .../internal/subsystems/storage-recovery.md   |  5 ++
 .../RecoveryProtectedInventorySection.tsx     | 63 ++++++++++++-------
 .../Recovery/__tests__/Recovery.test.tsx      |  4 ++
 3 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/docs/release-control/v6/internal/subsystems/storage-recovery.md b/docs/release-control/v6/internal/subsystems/storage-recovery.md
index cd2f54cd1f..fc40ba9112 100644
--- a/docs/release-control/v6/internal/subsystems/storage-recovery.md
+++ b/docs/release-control/v6/internal/subsystems/storage-recovery.md
@@ -648,6 +648,11 @@ recovery-specific mini report. Recovery summary cards should prefer concise
 counts, bars, and badge-backed coverage cues over tall explanatory copy blocks
 so the protected-item table takes over the page at roughly the same visual
 density as the infrastructure and workloads monitoring surfaces.
+That same inventory surface should also follow the established monitoring-table
+scan pattern in its first column. Protected-item rows should lead with a clear
+status cue, the primary item name, and compact badge-backed item/platform
+context instead of relying on recovery-only rails or plain-text metadata lines
+that make the table read like a report instead of an operational grid.
 That shared unified-resource dependency now also includes policy-governed
 resource metadata on the frontend decode path: storage and recovery surfaces
 that route through `frontend-modern/src/hooks/useUnifiedResources.ts` must
diff --git a/frontend-modern/src/components/Recovery/RecoveryProtectedInventorySection.tsx b/frontend-modern/src/components/Recovery/RecoveryProtectedInventorySection.tsx
index 2648397b10..ff7e741126 100644
--- a/frontend-modern/src/components/Recovery/RecoveryProtectedInventorySection.tsx
+++ b/frontend-modern/src/components/Recovery/RecoveryProtectedInventorySection.tsx
@@ -6,6 +6,7 @@ import { EmptyState } from '@/components/shared/EmptyState';
 import { LabeledFilterSelect } from '@/components/shared/FilterToolbar';
 import { PageControls } from '@/components/shared/PageControls';
 import { SearchInput } from '@/components/shared/SearchInput';
+import { StatusDot } from '@/components/shared/StatusDot';
 import { getSourcePlatformBadge } from '@/components/shared/sourcePlatformBadges';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/shared/Table';
 import { STORAGE_KEYS } from '@/utils/localStorage';
@@ -38,9 +39,9 @@ import {
 } from '@/utils/recoveryTablePresentation';
 import {
   getRecoveryOutcomeBadgeClass,
+  getRecoveryOutcomeLabel,
   normalizeRecoveryOutcome,
 } from '@/utils/recoveryOutcomePresentation';
-import { getRecoveryIssueRailClass, type RecoveryIssueTone } from '@/utils/recoveryIssuePresentation';
 import { getRecoveryRollupPlatforms } from '@/utils/recoveryPlatformModel';
 import { getRecoveryRollupItemLabel } from '@/utils/recoveryRecordPresentation';
 import { getSourcePlatformLabel, normalizeSourcePlatformQueryValue } from '@/utils/sourcePlatforms';
@@ -414,14 +415,23 @@ export const RecoveryProtectedInventorySection: Component<
                   const itemTypePresentation =
                     getRecoveryItemTypePresentation(getRecoveryRollupItemTypeKey(rollup)) || null;
                   const nowMs = Date.now();
-                  const issueTone: RecoveryIssueTone = getRecoveryRollupIssueTone(rollup, nowMs);
-                  const issueRailClass =
-                    issueTone === 'none' ? '' : getRecoveryIssueRailClass(issueTone);
                   const stale = isRecoveryRollupStale(rollup, nowMs);
                   const neverSucceeded =
                     (!Number.isFinite(successMs) || successMs <= 0) &&
                     Number.isFinite(attemptMs) &&
                     attemptMs > 0;
+                  const outcomeVariant = (() => {
+                    switch (outcome) {
+                      case 'success':
+                        return 'success' as const;
+                      case 'warning':
+                        return 'warning' as const;
+                      case 'failed':
+                        return 'danger' as const;
+                      default:
+                        return 'muted' as const;
+                    }
+                  })();
 
                   return (
                     <TableRow
@@ -429,16 +439,18 @@ export const RecoveryProtectedInventorySection: Component<
                       onClick={() => props.onSelectRollup(rollup.rollupId)}
                     >
                       <TableCell
-                        class={`relative max-w-[420px] px-3 py-3 text-base-content ${
-                          issueTone === 'rose' || issueTone === 'blue' ? 'font-medium' : ''
-                        }`}
+                        class="max-w-[420px] px-3 py-2.5 text-base-content"
                         title={label}
                       >
-                        <Show when={issueTone !== 'none'}>
-                          <span class={`absolute inset-y-0 left-0 w-0.5 ${issueRailClass}`} />
-                        </Show>
-                        <div class="flex min-w-0 flex-col gap-1.5 pl-0.5">
+                        <div class="flex min-w-0 flex-col gap-1.5">
                           <div class="flex min-w-0 items-center gap-2">
+                            <StatusDot
+                              variant={outcomeVariant}
+                              size="xs"
+                              pulse={outcome === 'running'}
+                              title={getRecoveryOutcomeLabel(outcome)}
+                              ariaLabel={getRecoveryOutcomeLabel(outcome)}
+                            />
                             <span class="truncate text-sm font-medium">{label}</span>
                             <Show when={neverSucceeded}>
                               <span class={getRecoveryRollupStatusPillClass('never-succeeded')}>
@@ -451,22 +463,29 @@ export const RecoveryProtectedInventorySection: Component<
                               </span>
                             </Show>
                           </div>
-                          <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted">
+                          <div class="flex flex-wrap items-center gap-1.5 text-[10px]">
                             <Show when={itemTypePresentation?.label}>
-                              <span>{itemTypePresentation?.label}</span>
+                              <span class={itemTypePresentation?.badgeClasses || 'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-base-content'}>
+                                {itemTypePresentation?.label}
+                              </span>
                             </Show>
                             <Show when={platforms.length > 0}>
-                              <span>
-                                {platforms
-                                  .map((platform) => getSourcePlatformLabel(platform))
-                                  .join(' • ')}
-                              </span>
+                              <For each={platforms.slice(0, 2)}>
+                                {(platform) => {
+                                  const badge = getSourcePlatformBadge(platform);
+                                  return (
+                                    <span class={badge?.classes || ''}>
+                                      {badge?.label || getSourcePlatformLabel(platform)}
+                                    </span>
+                                  );
+                                }}
+                              </For>
                             </Show>
                           </div>
                         </div>
                       </TableCell>
 
-                      <TableCell class="hidden md:table-cell whitespace-nowrap px-3 py-3">
+                      <TableCell class="hidden md:table-cell whitespace-nowrap px-3 py-2.5">
                         <Show
                           when={itemTypePresentation}
                           fallback={<span class="text-muted">—</span>}
@@ -477,7 +496,7 @@ export const RecoveryProtectedInventorySection: Component<
                         </Show>
                       </TableCell>
 
-                      <TableCell class="hidden lg:table-cell whitespace-nowrap px-3 py-3">
+                      <TableCell class="hidden lg:table-cell whitespace-nowrap px-3 py-2.5">
                         <div class="flex flex-wrap gap-1.5">
                           <For each={platforms}>
                             {(platform) => {
@@ -493,7 +512,7 @@ export const RecoveryProtectedInventorySection: Component<
                       </TableCell>
 
                       <TableCell
-                        class={`whitespace-nowrap px-3 py-3 ${getRecoveryRollupAgeTextClass(
+                        class={`whitespace-nowrap px-3 py-2.5 ${getRecoveryRollupAgeTextClass(
                           rollup,
                           nowMs,
                         )}`}
@@ -514,7 +533,7 @@ export const RecoveryProtectedInventorySection: Component<
                         )}
                       </TableCell>
 
-                      <TableCell class="whitespace-nowrap px-3 py-3">
+                      <TableCell class="whitespace-nowrap px-3 py-2.5">
                         <span
                           class={`inline-flex rounded px-1.5 py-0.5 text-[10px] font-medium ${getRecoveryOutcomeBadgeClass(
                             outcome,
diff --git a/frontend-modern/src/components/Recovery/__tests__/Recovery.test.tsx b/frontend-modern/src/components/Recovery/__tests__/Recovery.test.tsx
index 5f9b1c6017..5ea005b4f0 100644
--- a/frontend-modern/src/components/Recovery/__tests__/Recovery.test.tsx
+++ b/frontend-modern/src/components/Recovery/__tests__/Recovery.test.tsx
@@ -214,6 +214,10 @@ describe('Recovery', () => {
     expect(within(inventoryTable).getByText('Item Type')).toBeInTheDocument();
     expect(within(inventoryTable).getByText('Platform')).toBeInTheDocument();
     expect(within(inventoryTable).getAllByText('VM').length).toBeGreaterThan(0);
+    const vmRow = screen.getByText('VM 123').closest('tr');
+    expect(vmRow).not.toBeNull();
+    expect(within(vmRow!).getByLabelText('Healthy')).toBeInTheDocument();
+    expect(within(vmRow!).getAllByText('PVE').length).toBeGreaterThan(0);
     expect(screen.queryByText('Backups By Date')).not.toBeInTheDocument();
 
     fireEvent.click(await screen.findByText('VM 123'));