From efd50dceb7e759378a884d6ab0fa26e354df501c Mon Sep 17 00:00:00 2001
From: Antoine Toussaint
 <312536060+antoinetoussaint-byte@users.noreply.github.com>
Date: Fri, 2 Oct 2026 06:43:34 -0400
Subject: [PATCH 1/3] feat: a solution's declared dashboard is a tab beside it,
 and saas-ui says when someone last signed in
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The solution page stacked every declared dashboard above the solution, so a
dashboard with nothing to show yet sat on top of what the person came for and
pushed it below the fold. A solution that declares a dashboard now gets two
tabs, App and Dashboard; the App panel stays mounted while the dashboard is
open, so the solution keeps its state. A solution with no dashboard renders as
before.

saas-ui gains <LastLogin> and relativeTime: "Last login · 12 seconds ago",
kept true as time passes, the exact time on the <time> element and beneath,
"Never" for no recorded sign-in. The host already had two hand-written "x ago"
helpers that disagree; a solution no longer writes a third.

The co-versioned kit moves to 0.11.4 (@codefly-dev/ui, @codefly-dev/saas-ui).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 module/docs/plugin-manifest-schema.md         |  7 +-
 .../services/frontend/code/package-lock.json  |  4 +-
 .../code/packages/codefly-ui/package.json     |  2 +-
 .../frontend/code/packages/saas-ui/README.md  | 13 +++
 .../code/packages/saas-ui/package.json        |  2 +-
 .../src/audit/__tests__/last-login.test.tsx   | 58 ++++++++++++
 .../packages/saas-ui/src/audit/last-login.tsx | 94 +++++++++++++++++++
 .../code/packages/saas-ui/src/index.ts        |  3 +
 .../saas-ui/stories/audit.stories.tsx         | 18 ++++
 .../s/[solutionId]/__tests__/page.test.tsx    | 57 +++++++++++
 .../app/(dashboard)/s/[solutionId]/page.tsx   | 67 ++++++++-----
 .../services/frontend/code/ui-inventory.json  | 26 +++++
 12 files changed, 322 insertions(+), 29 deletions(-)
 create mode 100644 module/services/frontend/code/packages/saas-ui/src/audit/__tests__/last-login.test.tsx
 create mode 100644 module/services/frontend/code/packages/saas-ui/src/audit/last-login.tsx
 create mode 100644 module/services/frontend/code/packages/saas-ui/stories/audit.stories.tsx
 create mode 100644 module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/__tests__/page.test.tsx

diff --git a/module/docs/plugin-manifest-schema.md b/module/docs/plugin-manifest-schema.md
index 3b0612581..767b4f60f 100644
--- a/module/docs/plugin-manifest-schema.md
+++ b/module/docs/plugin-manifest-schema.md
@@ -97,8 +97,11 @@ has three node kinds:
   one metric. These metric-bound widgets are distinct from `ui.widgets`, which
   are presentation slots contributed to host surfaces; the two never mix.
 
-On a registered solution's page the host renders every declared dashboard, and
-each viewer can arrange it for themselves: reorder its declared widgets, remove
+On a registered solution's page the host renders every declared dashboard in a
+**Dashboard** tab beside the solution's own **App** tab, never stacked above
+the solution; the solution stays mounted while the dashboard is open. A
+solution that declares no dashboard gets no tab bar. Each viewer can arrange a
+dashboard for themselves: reorder its declared widgets, remove
 them, and re-add the ones they removed. The declared widgets, in declared order,
 are where every viewer starts, and a widget declared later reaches viewers who
 already rearranged. A viewer's arrangement is a preference (ADR 0007): it never
diff --git a/module/services/frontend/code/package-lock.json b/module/services/frontend/code/package-lock.json
index 44a082097..1f485c95d 100644
--- a/module/services/frontend/code/package-lock.json
+++ b/module/services/frontend/code/package-lock.json
@@ -15266,7 +15266,7 @@
 		},
 		"packages/codefly-ui": {
 			"name": "@codefly-dev/ui",
-			"version": "0.11.3",
+			"version": "0.11.4",
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@base-ui/react": "^1.3.0",
@@ -15418,7 +15418,7 @@
 		},
 		"packages/saas-ui": {
 			"name": "@codefly-dev/saas-ui",
-			"version": "0.11.3",
+			"version": "0.11.4",
 			"license": "Apache-2.0",
 			"devDependencies": {
 				"@bufbuild/protobuf": "^2.11.0",
diff --git a/module/services/frontend/code/packages/codefly-ui/package.json b/module/services/frontend/code/packages/codefly-ui/package.json
index f541dd943..d86b3edfc 100644
--- a/module/services/frontend/code/packages/codefly-ui/package.json
+++ b/module/services/frontend/code/packages/codefly-ui/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@codefly-dev/ui",
-	"version": "0.11.3",
+	"version": "0.11.4",
 	"description": "The shared, versioned Codefly SaaS frontend kit: the plugin host and the tokens-as-data skin mechanism, standalone so the host and Module-Federation remotes import and dedupe one copy.",
 	"repository": {
 		"type": "git",
diff --git a/module/services/frontend/code/packages/saas-ui/README.md b/module/services/frontend/code/packages/saas-ui/README.md
index 66efcb037..c3a3ec783 100644
--- a/module/services/frontend/code/packages/saas-ui/README.md
+++ b/module/services/frontend/code/packages/saas-ui/README.md
@@ -292,6 +292,19 @@ role via Accounts' registration/grant service paths. Only `admin@acme.com` and
 a demo source; other fixture viewers remain ungranted. Reseeding reconverges the
 declared grants, so test revocation without restarting the fixture runtime.
 
+## Audit
+
+`<LastLogin at subject? label? />` says when someone last signed in the way a
+person reads it ("Last login · 12 seconds ago"), and keeps it true as time
+passes: it re-says itself every second for the first minute, then every 30
+seconds, then every five minutes. The exact time is on the `<time>` element
+(`dateTime`, and a `title` for hover) and on the line beneath. `at` is an ISO
+string or a `Date`; `null`, or anything that is not a date, reads "Never" with
+"No sign-in is recorded yet", never "Invalid Date". A solution hands it the
+value it read (from the audit log, say) and owns nothing of how it is said.
+`relativeTime(at, now, locale?)` is its words alone, counting whole units
+elapsed through `Intl.RelativeTimeFormat`, for a consumer's own shell.
+
 ## Installing from a solution
 
 This package is published to GitHub Packages under the org's `@codefly-dev`
diff --git a/module/services/frontend/code/packages/saas-ui/package.json b/module/services/frontend/code/packages/saas-ui/package.json
index 83215b1ae..491745d99 100644
--- a/module/services/frontend/code/packages/saas-ui/package.json
+++ b/module/services/frontend/code/packages/saas-ui/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@codefly-dev/saas-ui",
-	"version": "0.11.3",
+	"version": "0.11.4",
 	"description": "Reusable SaaS-domain frontend components (datasources, \u2026) the portal and solutions both import, built on @codefly-dev/ui primitives and driven by an injected typed client.",
 	"repository": {
 		"type": "git",
diff --git a/module/services/frontend/code/packages/saas-ui/src/audit/__tests__/last-login.test.tsx b/module/services/frontend/code/packages/saas-ui/src/audit/__tests__/last-login.test.tsx
new file mode 100644
index 000000000..8a6284dad
--- /dev/null
+++ b/module/services/frontend/code/packages/saas-ui/src/audit/__tests__/last-login.test.tsx
@@ -0,0 +1,58 @@
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { LastLogin, relativeTime } from "../last-login.js";
+
+afterEach(() => {
+	cleanup();
+	vi.useRealTimers();
+});
+
+const at = new Date("2026-10-02T10:00:00Z");
+const after = (seconds: number) => new Date(at.getTime() + seconds * 1000);
+
+describe("relativeTime", () => {
+	it("says how long ago, in the largest unit that fits", () => {
+		expect(relativeTime(at, after(12), "en")).toBe("12 seconds ago");
+		expect(relativeTime(at, after(90), "en")).toBe("1 minute ago");
+		expect(relativeTime(at, after(120), "en")).toBe("2 minutes ago");
+		expect(relativeTime(at, after(3 * 3600), "en")).toBe("3 hours ago");
+		expect(relativeTime(at, after(26 * 3600), "en")).toBe("yesterday");
+		expect(relativeTime(at, after(10 * 24 * 3600), "en")).toBe("last week");
+	});
+
+	it("says now for this second, and for a clock that runs ahead", () => {
+		expect(relativeTime(at, at, "en")).toBe("now");
+		expect(relativeTime(after(5), at, "en")).toBe("now");
+	});
+});
+
+describe("<LastLogin>", () => {
+	it("says when, with the exact time on the element and beside it", () => {
+		render(<LastLogin at={at.toISOString()} subject="ana@example.com" now={() => after(12)} />);
+		expect(screen.getByText("Last login")).toBeTruthy();
+		const time = screen.getByText(/12 seconds ago/);
+		expect(time.tagName).toBe("TIME");
+		expect(time.getAttribute("datetime")).toBe(at.toISOString());
+		expect(screen.getByText(/ana@example\.com/)).toBeTruthy();
+	});
+
+	it("stays true as time passes", () => {
+		vi.useFakeTimers();
+		vi.setSystemTime(after(10));
+		render(<LastLogin at={at} />);
+		expect(screen.getByText(/10 seconds ago/)).toBeTruthy();
+		act(() => {
+			vi.advanceTimersByTime(5_000);
+		});
+		expect(screen.getByText(/15 seconds ago/)).toBeTruthy();
+	});
+
+	it("says no sign-in is recorded, never an invalid date", () => {
+		render(<LastLogin at={null} />);
+		expect(screen.getByText("Never")).toBeTruthy();
+		expect(screen.queryByText(/Invalid Date|NaN/)).toBeNull();
+		cleanup();
+		render(<LastLogin at="not a date" />);
+		expect(screen.getByText("Never")).toBeTruthy();
+	});
+});
diff --git a/module/services/frontend/code/packages/saas-ui/src/audit/last-login.tsx b/module/services/frontend/code/packages/saas-ui/src/audit/last-login.tsx
new file mode 100644
index 000000000..285f6a1c0
--- /dev/null
+++ b/module/services/frontend/code/packages/saas-ui/src/audit/last-login.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { cn } from "../datasources/util.js";
+
+/** The units a relative time is said in, largest first, in seconds. */
+const UNITS: readonly [Intl.RelativeTimeFormatUnit, number][] = [
+	["year", 365 * 24 * 3600],
+	["month", 30 * 24 * 3600],
+	["week", 7 * 24 * 3600],
+	["day", 24 * 3600],
+	["hour", 3600],
+	["minute", 60],
+	["second", 1],
+];
+
+/**
+ * How long ago `at` was, from `now`, in words: "12 seconds ago", "3 hours ago",
+ * "yesterday", counting whole units elapsed. Pure, so a consumer can say it in its own shell. A moment in the
+ * future (a clock ahead of this one) reads as "now" rather than "in 2 seconds".
+ */
+export function relativeTime(at: Date, now: Date, locale?: string): string {
+	const seconds = Math.round((at.getTime() - now.getTime()) / 1000);
+	const format = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+	if (seconds >= 0) return format.format(0, "second");
+	for (const [unit, size] of UNITS) {
+		// Whole units elapsed: 90 seconds is "1 minute ago" until two have passed.
+		if (-seconds >= size || unit === "second") return format.format(Math.trunc(seconds / size), unit);
+	}
+	return format.format(seconds, "second");
+}
+
+/** How often the words must be re-said to stay true. */
+function tick(at: Date, now: Date): number {
+	const elapsed = now.getTime() - at.getTime();
+	return elapsed < 60_000 ? 1_000 : elapsed < 3_600_000 ? 30_000 : 300_000;
+}
+
+export interface LastLoginProps {
+	/** When the person last signed in, as an ISO string or a Date; null when
+	 *  no sign-in is recorded. */
+	at: string | Date | null;
+	/** Who signed in, when it should be said (an email, a name). */
+	subject?: string;
+	/** The label above the time. Default "Last login". */
+	label?: string;
+	/** The clock, for tests and stories. Default the system clock. */
+	now?: () => Date;
+	className?: string;
+}
+
+/**
+ * When someone last signed in, as a person reads it: "Last login · 12 seconds
+ * ago", kept true as time passes, with the exact time on hover and for
+ * assistive technology (`<time dateTime title>`). A solution hands it the value
+ * it read — from the audit log, say — and owns nothing of how it is said.
+ *
+ * It is the kit's rather than each solution's because every page that shows a
+ * sign-in time otherwise writes its own "x ago" with its own thresholds; the
+ * host already has two that disagree.
+ */
+export function LastLogin({ at, subject, label = "Last login", now = () => new Date(), className }: LastLoginProps) {
+	const when = at === null ? null : at instanceof Date ? at : new Date(at);
+	const atMs = when === null ? Number.NaN : when.getTime();
+	const valid = !Number.isNaN(atMs);
+	const [current, setCurrent] = useState(now);
+	useEffect(() => {
+		if (Number.isNaN(atMs)) return;
+		const timer = setInterval(() => setCurrent(now()), tick(new Date(atMs), current));
+		return () => clearInterval(timer);
+	}, [atMs, current, now]);
+
+	return (
+		<div data-slot="last-login" className={cn("space-y-1", className)}>
+			<div className="type-metric-label text-muted-foreground">{label}</div>
+			{valid ? (
+				<>
+					<time dateTime={when!.toISOString()} title={when!.toLocaleString()} className="type-metric-value-lg tabular-nums">
+						{relativeTime(when!, current)}
+					</time>
+					<p className="type-caption-plain text-muted-foreground">
+						{when!.toLocaleString()}
+						{subject ? <> · {subject}</> : null}
+					</p>
+				</>
+			) : (
+				<>
+					<div className="type-metric-value-lg text-muted-foreground">Never</div>
+					<p className="type-caption-plain text-muted-foreground">No sign-in is recorded yet.</p>
+				</>
+			)}
+		</div>
+	);
+}
diff --git a/module/services/frontend/code/packages/saas-ui/src/index.ts b/module/services/frontend/code/packages/saas-ui/src/index.ts
index 6249ac256..989a900f5 100644
--- a/module/services/frontend/code/packages/saas-ui/src/index.ts
+++ b/module/services/frontend/code/packages/saas-ui/src/index.ts
@@ -101,3 +101,6 @@ export {
 	viewerIdentity,
 	viewerOrganization,
 } from "./solution/index.js";
+// When someone last signed in, said as a person reads it and kept true as time
+// passes; relativeTime is its words alone, for a consumer's own shell.
+export { LastLogin, type LastLoginProps, relativeTime } from "./audit/last-login.js";
diff --git a/module/services/frontend/code/packages/saas-ui/stories/audit.stories.tsx b/module/services/frontend/code/packages/saas-ui/stories/audit.stories.tsx
new file mode 100644
index 000000000..ed7d968bb
--- /dev/null
+++ b/module/services/frontend/code/packages/saas-ui/stories/audit.stories.tsx
@@ -0,0 +1,18 @@
+import { LastLogin } from "../src/index.js";
+
+export default { title: "SaaS UI/Audit" };
+
+// A fixed clock, so a story renders the same words on every run.
+const now = () => new Date("2026-10-02T10:00:12Z");
+
+export const LastLoginSecondsAgo = {
+	render: () => <LastLogin at="2026-10-02T10:00:00Z" subject="ana@example.com" now={now} />,
+};
+
+export const LastLoginYesterday = {
+	render: () => <LastLogin at="2026-10-01T08:30:00Z" now={now} />,
+};
+
+export const LastLoginNeverRecorded = {
+	render: () => <LastLogin at={null} now={now} />,
+};
diff --git a/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/__tests__/page.test.tsx b/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/__tests__/page.test.tsx
new file mode 100644
index 000000000..d6d66b646
--- /dev/null
+++ b/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/__tests__/page.test.tsx
@@ -0,0 +1,57 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const { findSolution } = vi.hoisted(() => ({ findSolution: vi.fn() }));
+vi.mock("@/solutions/registry", () => ({
+	findSolution,
+	browserManifestUrl: () => "/assets/mf-manifest.json",
+	solutionProxyBase: (id: string) => `/api/solutions/${id}/proxy`,
+}));
+// The remote and the dashboard are their own components with their own tests;
+// what is pinned here is where the page puts them.
+vi.mock("@/solutions/SolutionRuntime", () => ({
+	SolutionRuntime: ({ remote }: { remote: { id: string } }) => <div data-testid="remote">{remote.id}</div>,
+}));
+vi.mock("@/solutions/SolutionDashboard", () => ({
+	SolutionDashboards: () => <div data-testid="dashboard">dashboards</div>,
+}));
+
+import SolutionPage from "../page";
+
+afterEach(cleanup);
+
+const solution = (dashboard?: object) => ({
+	id: "example-solution",
+	nav: { title: "Example" },
+	frontend: { exposedModule: "./Page" },
+	...(dashboard ? { dashboard } : {}),
+});
+
+async function renderPage() {
+	render(await SolutionPage({ params: Promise.resolve({ solutionId: "example-solution" }) }));
+}
+
+describe("the solution page", () => {
+	// The declared dashboard was stacked above the solution, so a dashboard with
+	// nothing to show yet sat on top of what the person came for.
+	it("puts a declared dashboard in its own tab beside the solution, not above it", async () => {
+		findSolution.mockResolvedValue(solution({ events: [], metrics: [], dashboards: [] }));
+		await renderPage();
+		expect(screen.getByRole("tab", { name: "App" })).toBeTruthy();
+		expect(screen.getByRole("tab", { name: "Dashboard" })).toBeTruthy();
+		expect(screen.getByTestId("remote")).toBeTruthy();
+		expect(screen.queryByTestId("dashboard")).toBeNull();
+
+		fireEvent.click(screen.getByRole("tab", { name: "Dashboard" }));
+		expect(await screen.findByTestId("dashboard")).toBeTruthy();
+		// The solution stays mounted behind the dashboard, so its state survives.
+		expect(screen.getByTestId("remote")).toBeTruthy();
+	});
+
+	it("shows a solution without a dashboard as before, with no tab bar", async () => {
+		findSolution.mockResolvedValue(solution());
+		await renderPage();
+		expect(screen.getByTestId("remote")).toBeTruthy();
+		expect(screen.queryByRole("tablist")).toBeNull();
+	});
+});
diff --git a/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/page.tsx b/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/page.tsx
index cedbbc5d6..a628c9e02 100644
--- a/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/page.tsx
+++ b/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/page.tsx
@@ -1,5 +1,6 @@
 import { notFound } from "next/navigation";
 
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/ui";
 import { SolutionDashboards } from "@/solutions/SolutionDashboard";
 import { SolutionRuntime } from "@/solutions/SolutionRuntime";
 import {
@@ -27,33 +28,53 @@ export default async function SolutionPage({
 		notFound();
 	}
 
+	const app = (
+		<SolutionRuntime
+			remote={{
+				id: solution.id,
+				// A backend-relative registration is served through this host's
+				// own origin; the browser is never handed a pod-local address.
+				manifestUrl: browserManifestUrl(solution),
+				exposedModule: solution.frontend.exposedModule,
+			}}
+			pageProps={{
+				solutionId: solution.id,
+				// Same-origin base for every backend call the remote makes. The
+				// proxy routes on the path: a `saas.<pkg>.v1.<Service>/<Method>`
+				// procedure reaches the API gateway's root (the host's own
+				// services, e.g. the DatasourceService `<DatasourcesPanel>`
+				// calls), anything else reaches this solution's upstream.
+				apiBase: solutionProxyBase(solution.id),
+			}}
+		/>
+	);
+
+	// A declared dashboard is its own tab beside the solution, not a block
+	// stacked above it: stacked, it pushed the solution below the fold on every
+	// visit, and a dashboard with nothing to show yet ("No data yet") sat on top
+	// of the thing the person came for. The solution's panel stays mounted
+	// while the dashboard is open, so switching back keeps its state (an open
+	// chat, a half-typed question). A solution without a dashboard renders as
+	// before, with no tab bar for a single tab.
 	return (
 		<div className="flex flex-col gap-4 p-6">
 			<h1 data-slot="page-title" className="type-page-title">{solution.nav.title}</h1>
-			{solution.dashboard && (
-				<SolutionDashboards
-					graph={solution.dashboard}
-					solutionId={solution.id}
-				/>
+			{solution.dashboard ? (
+				<Tabs defaultValue="app" className="w-full">
+					<TabsList>
+						<TabsTrigger value="app">App</TabsTrigger>
+						<TabsTrigger value="dashboard">Dashboard</TabsTrigger>
+					</TabsList>
+					<TabsContent value="app" keepMounted>
+						{app}
+					</TabsContent>
+					<TabsContent value="dashboard">
+						<SolutionDashboards graph={solution.dashboard} solutionId={solution.id} />
+					</TabsContent>
+				</Tabs>
+			) : (
+				app
 			)}
-			<SolutionRuntime
-				remote={{
-					id: solution.id,
-					// A backend-relative registration is served through this host's
-					// own origin; the browser is never handed a pod-local address.
-					manifestUrl: browserManifestUrl(solution),
-					exposedModule: solution.frontend.exposedModule,
-				}}
-				pageProps={{
-					solutionId: solution.id,
-					// Same-origin base for every backend call the remote makes. The
-					// proxy routes on the path: a `saas.<pkg>.v1.<Service>/<Method>`
-					// procedure reaches the API gateway's root (the host's own
-					// services, e.g. the DatasourceService `<DatasourcesPanel>`
-					// calls), anything else reaches this solution's upstream.
-					apiBase: solutionProxyBase(solution.id),
-				}}
-			/>
 		</div>
 	);
 }
diff --git a/module/services/frontend/code/ui-inventory.json b/module/services/frontend/code/ui-inventory.json
index ab086910c..5023e20e8 100644
--- a/module/services/frontend/code/ui-inventory.json
+++ b/module/services/frontend/code/ui-inventory.json
@@ -1183,6 +1183,32 @@
       "coverage": "owner stories; browser/skin verification pending",
       "remaining": "Verify explorer rendering, interactive accessibility and visual baselines under external skins."
     },
+    {
+      "source": "packages/saas-ui/src/audit/last-login.tsx",
+      "imports": [
+        "react",
+        "../datasources/util.js"
+      ],
+      "owner": "@codefly-dev/saas-ui",
+      "disposition": "already canonical",
+      "reason": "When someone last signed in, said as a person reads it ('12 seconds ago') and kept true as time passes, so a solution showing a sign-in time does not write its own 'x ago'.",
+      "stories": [
+        {
+          "file": "packages/saas-ui/stories/audit.stories.tsx",
+          "export": "LastLoginSecondsAgo"
+        },
+        {
+          "file": "packages/saas-ui/stories/audit.stories.tsx",
+          "export": "LastLoginYesterday"
+        },
+        {
+          "file": "packages/saas-ui/stories/audit.stories.tsx",
+          "export": "LastLoginNeverRecorded"
+        }
+      ],
+      "coverage": "owner stories and unit tests; browser/skin verification pending",
+      "remaining": "Verify explorer rendering and the metric type slots under external skins."
+    },
     {
       "source": "packages/saas-ui/src/datasources/collection-access.tsx",
       "imports": [

From 803ac969fb8dac7770d782fc83ba9e136d2c78d2 Mon Sep 17 00:00:00 2001
From: Antoine Toussaint
 <312536060+antoinetoussaint-byte@users.noreply.github.com>
Date: Fri, 2 Oct 2026 11:30:52 -0400
Subject: [PATCH 2/3] fix: LastLogin hydrates, keeps time under re-renders and
 counts whole units; a graph with no dashboard gets no tab

From the review of this pull request:
- LastLogin's first render read the clock and the local timezone, so a
  server render and the browser's hydration disagreed and React recovered.
  The first render now says the time in UTC on both; the relative words and
  the viewer's local time follow once mounted.
- A parent re-rendering faster than the cadence restarted its interval every
  time (a new default clock function was a dependency), freezing "5 minutes
  ago". The clock is read through a ref and the next re-saying is scheduled
  from the time itself.
- relativeTime rounded before choosing a unit: 59.999 seconds read "1 minute
  ago". It now counts whole elapsed units.
- A data graph with events and metrics but no dashboard got a Dashboard tab
  over an empty panel. The tabs now need at least one declared dashboard.
- The root frontend package pinned the kit at 0.11.3; it pins 0.11.4.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../services/frontend/code/package-lock.json  |  4 +-
 module/services/frontend/code/package.json    |  4 +-
 .../src/audit/__tests__/last-login.test.tsx   | 35 ++++++++++
 .../packages/saas-ui/src/audit/last-login.tsx | 70 ++++++++++++++-----
 .../s/[solutionId]/__tests__/page.test.tsx    | 11 ++-
 .../app/(dashboard)/s/[solutionId]/page.tsx   |  7 +-
 6 files changed, 104 insertions(+), 27 deletions(-)

diff --git a/module/services/frontend/code/package-lock.json b/module/services/frontend/code/package-lock.json
index 1f485c95d..606968f29 100644
--- a/module/services/frontend/code/package-lock.json
+++ b/module/services/frontend/code/package-lock.json
@@ -14,8 +14,8 @@
 				"@base-ui/react": "^1.3.0",
 				"@bufbuild/protobuf": "^2.11.0",
 				"@codefly-dev/saas-sdk": "0.3.15",
-				"@codefly-dev/saas-ui": "0.11.3",
-				"@codefly-dev/ui": "0.11.3",
+				"@codefly-dev/saas-ui": "0.11.4",
+				"@codefly-dev/ui": "0.11.4",
 				"@codefly/saas-plugin-contract": "2.3.0",
 				"@codefly/saas-plugin-manifest": "0.1.0",
 				"@codefly/saas-plugin-react": "0.4.1",
diff --git a/module/services/frontend/code/package.json b/module/services/frontend/code/package.json
index 6b6676246..e64b5826e 100644
--- a/module/services/frontend/code/package.json
+++ b/module/services/frontend/code/package.json
@@ -37,8 +37,8 @@
 		"@base-ui/react": "^1.3.0",
 		"@bufbuild/protobuf": "^2.11.0",
 		"@codefly-dev/saas-sdk": "0.3.15",
-		"@codefly-dev/saas-ui": "0.11.3",
-		"@codefly-dev/ui": "0.11.3",
+		"@codefly-dev/saas-ui": "0.11.4",
+		"@codefly-dev/ui": "0.11.4",
 		"@codefly/saas-plugin-contract": "2.3.0",
 		"@codefly/saas-plugin-manifest": "0.1.0",
 		"@codefly/saas-plugin-react": "0.4.1",
diff --git a/module/services/frontend/code/packages/saas-ui/src/audit/__tests__/last-login.test.tsx b/module/services/frontend/code/packages/saas-ui/src/audit/__tests__/last-login.test.tsx
index 8a6284dad..564461ee6 100644
--- a/module/services/frontend/code/packages/saas-ui/src/audit/__tests__/last-login.test.tsx
+++ b/module/services/frontend/code/packages/saas-ui/src/audit/__tests__/last-login.test.tsx
@@ -1,4 +1,5 @@
 import { act, cleanup, render, screen } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { LastLogin, relativeTime } from "../last-login.js";
 
@@ -20,6 +21,14 @@ describe("relativeTime", () => {
 		expect(relativeTime(at, after(10 * 24 * 3600), "en")).toBe("last week");
 	});
 
+	it("counts whole units elapsed, never rounding up to the next", () => {
+		const almost = (seconds: number) => new Date(at.getTime() + seconds * 1000 - 1);
+		expect(relativeTime(at, almost(60), "en")).toBe("59 seconds ago");
+		expect(relativeTime(at, after(60), "en")).toBe("1 minute ago");
+		expect(relativeTime(at, almost(3600), "en")).toBe("59 minutes ago");
+		expect(relativeTime(at, after(3600), "en")).toBe("1 hour ago");
+	});
+
 	it("says now for this second, and for a clock that runs ahead", () => {
 		expect(relativeTime(at, at, "en")).toBe("now");
 		expect(relativeTime(after(5), at, "en")).toBe("now");
@@ -47,6 +56,32 @@ describe("<LastLogin>", () => {
 		expect(screen.getByText(/15 seconds ago/)).toBeTruthy();
 	});
 
+	// The server and the browser's hydration render must say the same thing,
+	// whatever either one's clock or timezone: the time in UTC. The relative
+	// words and the viewer's local time follow once mounted.
+	it("renders the same first text on any clock, so hydration matches", () => {
+		const html = renderToString(<LastLogin at={at} now={() => after(12)} />);
+		expect(html).toContain("2026-10-02 10:00 UTC");
+		expect(html).not.toContain("seconds ago");
+		expect(renderToString(<LastLogin at={at} now={() => after(999)} />)).toBe(html);
+	});
+
+	// A parent that re-renders more often than the words change, handing a new
+	// clock function each time, must not hold them still.
+	it("keeps moving while its parent re-renders every five seconds", () => {
+		vi.useFakeTimers();
+		vi.setSystemTime(after(5 * 60));
+		const { rerender } = render(<LastLogin at={at} now={() => new Date()} />);
+		expect(screen.getByText("5 minutes ago")).toBeTruthy();
+		for (let i = 0; i < 24; i++) {
+			act(() => {
+				vi.advanceTimersByTime(5_000);
+			});
+			rerender(<LastLogin at={at} now={() => new Date()} />);
+		}
+		expect(screen.getByText("7 minutes ago")).toBeTruthy();
+	});
+
 	it("says no sign-in is recorded, never an invalid date", () => {
 		render(<LastLogin at={null} />);
 		expect(screen.getByText("Never")).toBeTruthy();
diff --git a/module/services/frontend/code/packages/saas-ui/src/audit/last-login.tsx b/module/services/frontend/code/packages/saas-ui/src/audit/last-login.tsx
index 285f6a1c0..cd6900e92 100644
--- a/module/services/frontend/code/packages/saas-ui/src/audit/last-login.tsx
+++ b/module/services/frontend/code/packages/saas-ui/src/audit/last-login.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { cn } from "../datasources/util.js";
 
 /** The units a relative time is said in, largest first, in seconds. */
@@ -16,26 +16,37 @@ const UNITS: readonly [Intl.RelativeTimeFormatUnit, number][] = [
 
 /**
  * How long ago `at` was, from `now`, in words: "12 seconds ago", "3 hours ago",
- * "yesterday", counting whole units elapsed. Pure, so a consumer can say it in its own shell. A moment in the
- * future (a clock ahead of this one) reads as "now" rather than "in 2 seconds".
+ * "yesterday", counting whole units elapsed: 59.999 seconds is still "59
+ * seconds ago". Pure, so a consumer can say it in its own shell. A moment in
+ * the future (a clock ahead of this one) reads as "now" rather than "in 2
+ * seconds".
  */
 export function relativeTime(at: Date, now: Date, locale?: string): string {
-	const seconds = Math.round((at.getTime() - now.getTime()) / 1000);
 	const format = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
-	if (seconds >= 0) return format.format(0, "second");
+	const elapsed = Math.floor((now.getTime() - at.getTime()) / 1000);
+	if (elapsed <= 0) return format.format(0, "second");
 	for (const [unit, size] of UNITS) {
-		// Whole units elapsed: 90 seconds is "1 minute ago" until two have passed.
-		if (-seconds >= size || unit === "second") return format.format(Math.trunc(seconds / size), unit);
+		if (elapsed >= size) return format.format(-Math.floor(elapsed / size), unit);
 	}
-	return format.format(seconds, "second");
+	return format.format(0, "second");
 }
 
-/** How often the words must be re-said to stay true. */
-function tick(at: Date, now: Date): number {
-	const elapsed = now.getTime() - at.getTime();
+/** How long until the words must be re-said to stay true. */
+function cadence(at: number, now: number): number {
+	const elapsed = now - at;
 	return elapsed < 60_000 ? 1_000 : elapsed < 3_600_000 ? 30_000 : 300_000;
 }
 
+/** The system clock, one function for every render so it is never a new
+ *  dependency. */
+const systemNow = () => new Date();
+
+/** What the server renders and the browser's first render repeats: the time in
+ *  UTC, which depends on neither environment's clock, timezone nor locale. */
+function stableTime(at: Date): string {
+	return `${at.toISOString().slice(0, 16).replace("T", " ")} UTC`;
+}
+
 export interface LastLoginProps {
 	/** When the person last signed in, as an ISO string or a Date; null when
 	 *  no sign-in is recorded. */
@@ -55,31 +66,52 @@ export interface LastLoginProps {
  * assistive technology (`<time dateTime title>`). A solution hands it the value
  * it read — from the audit log, say — and owns nothing of how it is said.
  *
+ * The first render, on the server and again in the browser while it hydrates,
+ * says the time in UTC, which no clock or timezone can change between the two;
+ * once mounted it reads the browser's clock and says it relatively, in the
+ * viewer's own timezone. Its re-saying is scheduled from the time itself, so a
+ * parent that re-renders often cannot hold it still.
+ *
  * It is the kit's rather than each solution's because every page that shows a
  * sign-in time otherwise writes its own "x ago" with its own thresholds; the
  * host already has two that disagree.
  */
-export function LastLogin({ at, subject, label = "Last login", now = () => new Date(), className }: LastLoginProps) {
+export function LastLogin({ at, subject, label = "Last login", now = systemNow, className }: LastLoginProps) {
 	const when = at === null ? null : at instanceof Date ? at : new Date(at);
 	const atMs = when === null ? Number.NaN : when.getTime();
 	const valid = !Number.isNaN(atMs);
-	const [current, setCurrent] = useState(now);
+	// The clock is read through a ref, so a caller handing a new function on
+	// every render does not restart the schedule below.
+	const clock = useRef(now);
+	clock.current = now;
+	// null until mounted: the first render is the hydration render.
+	const [current, setCurrent] = useState<Date | null>(null);
 	useEffect(() => {
 		if (Number.isNaN(atMs)) return;
-		const timer = setInterval(() => setCurrent(now()), tick(new Date(atMs), current));
-		return () => clearInterval(timer);
-	}, [atMs, current, now]);
+		let timer: ReturnType<typeof setTimeout>;
+		const say = () => {
+			const read = clock.current();
+			setCurrent(read);
+			timer = setTimeout(say, cadence(atMs, read.getTime()));
+		};
+		say();
+		return () => clearTimeout(timer);
+	}, [atMs]);
 
 	return (
 		<div data-slot="last-login" className={cn("space-y-1", className)}>
 			<div className="type-metric-label text-muted-foreground">{label}</div>
 			{valid ? (
 				<>
-					<time dateTime={when!.toISOString()} title={when!.toLocaleString()} className="type-metric-value-lg tabular-nums">
-						{relativeTime(when!, current)}
+					<time
+						dateTime={when!.toISOString()}
+						title={current ? when!.toLocaleString() : stableTime(when!)}
+						className="type-metric-value-lg tabular-nums"
+					>
+						{current ? relativeTime(when!, current) : stableTime(when!)}
 					</time>
 					<p className="type-caption-plain text-muted-foreground">
-						{when!.toLocaleString()}
+						{current ? when!.toLocaleString() : stableTime(when!)}
 						{subject ? <> · {subject}</> : null}
 					</p>
 				</>
diff --git a/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/__tests__/page.test.tsx b/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/__tests__/page.test.tsx
index d6d66b646..6068a164c 100644
--- a/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/__tests__/page.test.tsx
+++ b/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/__tests__/page.test.tsx
@@ -35,7 +35,7 @@ describe("the solution page", () => {
 	// The declared dashboard was stacked above the solution, so a dashboard with
 	// nothing to show yet sat on top of what the person came for.
 	it("puts a declared dashboard in its own tab beside the solution, not above it", async () => {
-		findSolution.mockResolvedValue(solution({ events: [], metrics: [], dashboards: [] }));
+		findSolution.mockResolvedValue(solution({ events: [], metrics: [], dashboards: [{ id: "overview", title: "Overview", layout: "grid", widgets: [] }] }));
 		await renderPage();
 		expect(screen.getByRole("tab", { name: "App" })).toBeTruthy();
 		expect(screen.getByRole("tab", { name: "Dashboard" })).toBeTruthy();
@@ -48,6 +48,15 @@ describe("the solution page", () => {
 		expect(screen.getByTestId("remote")).toBeTruthy();
 	});
 
+	// A graph may declare events and metrics and no dashboard: a Dashboard tab
+	// would hide the solution behind an empty panel.
+	it("shows no tab bar for a graph that declares no dashboard", async () => {
+		findSolution.mockResolvedValue(solution({ events: [], metrics: [], dashboards: [] }));
+		await renderPage();
+		expect(screen.getByTestId("remote")).toBeTruthy();
+		expect(screen.queryByRole("tablist")).toBeNull();
+	});
+
 	it("shows a solution without a dashboard as before, with no tab bar", async () => {
 		findSolution.mockResolvedValue(solution());
 		await renderPage();
diff --git a/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/page.tsx b/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/page.tsx
index a628c9e02..2714926c6 100644
--- a/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/page.tsx
+++ b/module/services/frontend/code/src/app/(dashboard)/s/[solutionId]/page.tsx
@@ -54,12 +54,13 @@ export default async function SolutionPage({
 	// visit, and a dashboard with nothing to show yet ("No data yet") sat on top
 	// of the thing the person came for. The solution's panel stays mounted
 	// while the dashboard is open, so switching back keeps its state (an open
-	// chat, a half-typed question). A solution without a dashboard renders as
-	// before, with no tab bar for a single tab.
+	// chat, a half-typed question). A solution that declares no dashboard
+	// (no graph, or a graph of events and metrics with no dashboard in it)
+	// renders as before, with no tab bar for a single tab.
 	return (
 		<div className="flex flex-col gap-4 p-6">
 			<h1 data-slot="page-title" className="type-page-title">{solution.nav.title}</h1>
-			{solution.dashboard ? (
+			{solution.dashboard?.dashboards?.length ? (
 				<Tabs defaultValue="app" className="w-full">
 					<TabsList>
 						<TabsTrigger value="app">App</TabsTrigger>

From 05ce7d1d175e0a57a15fb03d89f875f25c436491 Mon Sep 17 00:00:00 2001
From: Antoine Toussaint
 <312536060+antoinetoussaint-byte@users.noreply.github.com>
Date: Fri, 2 Oct 2026 11:35:15 -0400
Subject: [PATCH 3/3] fix: LastLogin updates its clock ref in an effect, not
 during render

react-hooks refuses a ref written while rendering (Codefly quality lint). The
clock is now set in an effect declared before the schedule, so the first
reading already uses it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../frontend/code/packages/saas-ui/src/audit/last-login.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/module/services/frontend/code/packages/saas-ui/src/audit/last-login.tsx b/module/services/frontend/code/packages/saas-ui/src/audit/last-login.tsx
index cd6900e92..0ce9707a5 100644
--- a/module/services/frontend/code/packages/saas-ui/src/audit/last-login.tsx
+++ b/module/services/frontend/code/packages/saas-ui/src/audit/last-login.tsx
@@ -83,7 +83,9 @@ export function LastLogin({ at, subject, label = "Last login", now = systemNow,
 	// The clock is read through a ref, so a caller handing a new function on
 	// every render does not restart the schedule below.
 	const clock = useRef(now);
-	clock.current = now;
+	useEffect(() => {
+		clock.current = now;
+	}, [now]);
 	// null until mounted: the first render is the hydration render.
 	const [current, setCurrent] = useState<Date | null>(null);
 	useEffect(() => {