From 9e69a8f1e4b1362b79585067747aa44f8d9869b6 Mon Sep 17 00:00:00 2001
From: shin-core <153108882+shin-core@users.noreply.github.com>
Date: Thu, 16 Jul 2026 18:39:39 +1000
Subject: [PATCH] fix(miner-ui): render oldestQueuedAgeMs in the overview
 portfolio card (#6185)

portfolio-queue.ts computes and validates oldestQueuedAgeMs and its header
promises the miner-ui shares one data path with the CLI's queue dashboard,
which renders "oldest-queued: Xm" -- but OverviewPortfolioCard never read the
field. Render it as an "Oldest queued" stat using the CLI's exact
Math.round(ms / 60000)m minutes formatting, shown only when non-null (matching
the CLI, which omits the age on an empty queue). Adds tests for the populated
and null cases. CLI rendering is untouched.

Closes #6185
---
 apps/loopover-miner-ui/src/app.test.tsx     | 12 ++++++++++++
 apps/loopover-miner-ui/src/routes/index.tsx |  6 ++++++
 2 files changed, 18 insertions(+)

diff --git a/apps/loopover-miner-ui/src/app.test.tsx b/apps/loopover-miner-ui/src/app.test.tsx
index 0aa1e532d6..0c1069b334 100644
--- a/apps/loopover-miner-ui/src/app.test.tsx
+++ b/apps/loopover-miner-ui/src/app.test.tsx
@@ -39,6 +39,18 @@ describe("OverviewView (#4853)", () => {
     expect(statValue("Done")).toBe("2");
     expect(statValue("Active")).toBe("3");
     expect(statValue("Total recorded")).toBe("4");
+    // Oldest-queued age is omitted when null (empty queue), matching the CLI (#6185).
+    expect(screen.queryByText("Oldest queued")).toBeNull();
+  });
+
+  it("renders the oldest-queued age in CLI-parity minutes when the queue has one (#6185)", () => {
+    const portfolioWithAge: PortfolioQueueResult = {
+      ok: true,
+      summary: { total: 3, byStatus: { queued: 3, in_progress: 0, done: 0 }, repos: [], oldestQueuedAgeMs: 5_400_000 },
+    };
+    render(<OverviewView runs={runsOk} portfolio={portfolioWithAge} claims={claimsOk} />);
+    // 5_400_000ms / 60000 = 90m, matching portfolio-dashboard.js's `Math.round(oldestQueuedAgeMs / 60000)m`.
+    expect(statValue("Oldest queued")).toBe("90m");
   });
 
   it("shows an independent loading message per card before data arrives", () => {
diff --git a/apps/loopover-miner-ui/src/routes/index.tsx b/apps/loopover-miner-ui/src/routes/index.tsx
index 0975a3a001..7821daa92a 100644
--- a/apps/loopover-miner-ui/src/routes/index.tsx
+++ b/apps/loopover-miner-ui/src/routes/index.tsx
@@ -81,6 +81,12 @@ export function OverviewPortfolioCard({ portfolio }: { portfolio: PortfolioQueue
           <Stat label="Queued" value={portfolio.summary.byStatus.queued} />
           <Stat label="In progress" value={portfolio.summary.byStatus.in_progress} tone="text-[var(--warning)]" />
           <Stat label="Done" value={portfolio.summary.byStatus.done} tone="text-[var(--success)]" />
+          {/* Deliver the CLI/web-UI parity the portfolio-queue data path promises (#6185): the CLI's `queue
+              dashboard` renders "oldest-queued: Xm" (portfolio-dashboard.js), and the same minutes-rounded age
+              is shown here. Omitted (like the CLI) when the queue is empty and the age is null. */}
+          {portfolio.summary.oldestQueuedAgeMs !== null && (
+            <Stat label="Oldest queued" value={`${Math.round(portfolio.summary.oldestQueuedAgeMs / 60000)}m`} />
+          )}
         </>
       )}
     </SummaryCard>