feat(ri-050): RI-5-001 typed freshness states and stale-safe Mission Control surfaces (#1275) (#1300)

2026-08-18 05:56:58 +00:00
parent d92de53399
commit 7c7dab3898
15 changed files with 2525 additions and 188 deletions
@@ -0,0 +1,110 @@
+'use client';
+
+import type { ReactElement } from 'react';
+import { formatAge, type FreshnessLabel } from '@/lib/freshness/model';
+
+/**
+ * Rendering rules for non-current freshness states (RI-5-001).
+ *
+ * - `unavailable` renders an explicit failure panel — never an empty
+ *   healthy collection.
+ * - `stale` may render last-known data, but only under a visible label
+ *   carrying source identity, snapshot version, and age.
+ * - `partial` renders the verified parts plus an explicit list of what is
+ *   missing.
+ */
+
+interface RetryableNoticeProps {
+  readonly onRetry?: () => void;
+  readonly retryLabel?: string;
+}
+
+function RetryButton({ onRetry, retryLabel }: RetryableNoticeProps): ReactElement | null {
+  if (!onRetry) return null;
+  return (
+    <button
+      type="button"
+      onClick={onRetry}
+      className="mt-2 rounded-lg border border-surface-border px-3 py-1.5 text-xs transition-colors hover:border-gray-500"
+    >
+      {retryLabel ?? 'Retry'}
+    </button>
+  );
+}
+
+export interface UnavailableDataNoticeProps extends RetryableNoticeProps {
+  /** What is unavailable, e.g. "Tasks". */
+  readonly title: string;
+  /** Optional underlying failure detail (network message, invalidation reason). */
+  readonly detail?: string | null;
+}
+
+/** Explicit `unavailable` state. Never renders as an empty healthy collection. */
+export function UnavailableDataNotice({
+  title,
+  detail,
+  onRetry,
+  retryLabel,
+}: UnavailableDataNoticeProps): ReactElement {
+  return (
+    <div role="alert" className="rounded-lg border border-error/40 px-4 py-3 text-sm">
+      <p className="font-medium text-text-primary">{title} are unavailable</p>
+      <p className="mt-1 text-text-muted">
+        This is not an empty result — the data could not be verified from the gateway.
+        {detail ? ` ${detail}` : ''}
+      </p>
+      <RetryButton onRetry={onRetry} retryLabel={retryLabel} />
+    </div>
+  );
+}
+
+export interface StaleDataNoticeProps extends RetryableNoticeProps {
+  /** Provenance of the last-known snapshot being displayed. */
+  readonly label: FreshnessLabel;
+}
+
+/**
+ * Situational-awareness banner for `stale` data: last-known data may render,
+ * but visibly labeled with source identity, snapshot version, and age.
+ */
+export function StaleDataNotice({
+  label,
+  onRetry,
+  retryLabel,
+}: StaleDataNoticeProps): ReactElement {
+  return (
+    <div role="status" className="rounded-lg border border-warning/40 px-4 py-3 text-sm">
+      <p className="font-medium text-warning">Showing last-known data — it may be out of date</p>
+      <p className="mt-1 text-xs text-text-muted">
+        Source {label.source} · snapshot v{label.version} · fetched{' '}
+        {formatAge(label.fetchedAt, Date.now())}. Verdicts derived from this data are unknown and
+        changes are disabled until it is revalidated.
+      </p>
+      <RetryButton onRetry={onRetry} retryLabel={retryLabel ?? 'Revalidate'} />
+    </div>
+  );
+}
+
+export interface PartialDataNoticeProps extends RetryableNoticeProps {
+  /** Display names of the sections whose collections are unavailable. */
+  readonly missing: readonly string[];
+}
+
+/** `partial` surface banner: verified parts render, missing parts are explicit. */
+export function PartialDataNotice({
+  missing,
+  onRetry,
+  retryLabel,
+}: PartialDataNoticeProps): ReactElement {
+  return (
+    <div role="status" className="rounded-lg border border-warning/40 px-4 py-3 text-sm">
+      <p className="font-medium text-warning">Some data could not be loaded</p>
+      <p className="mt-1 text-xs text-text-muted">
+        {missing.join(', ')} {missing.length === 1 ? 'is' : 'are'} unavailable — sections below show
+        an explicit unavailable state instead of an empty list. Derived verdicts remain unknown
+        until every collection is revalidated.
+      </p>
+      <RetryButton onRetry={onRetry} retryLabel={retryLabel ?? 'Revalidate'} />
+    </div>
+  );
+}