feat(console): rotation alerts — banner + dashboard widget [v1.11.0]

resources/console/src/components/Layout.tsx

@@ -5,6 +5,7 @@ import { NavLink, Outlet } from 'react-router-dom'
 import { apiPost, errorMessage } from '../lib/api'
 import { cx, initials } from '../lib/format'
 import { useCurrentUser } from '../hooks/useCurrentUser'
+import { useRotationAlerts } from '../hooks/useRotationAlerts'
 import { Button } from './ui'
 import { useToast } from './toast-context'
 
@@ -60,6 +61,21 @@ function NavItemLink({ item, onNavigate }: { item: NavItem; onNavigate?: () => v
   )
 }
 
+// Global alert: OAuth client secrets that are expiring/expired and need rotation (from GET metrics/clients).
+function RotationBanner() {
+  const alerts = useRotationAlerts()
+  if (!alerts || alerts.needs_rotation <= 0) {
+    return null
+  }
+  const n = alerts.needs_rotation
+  return (
+    <div className="mb-5 flex flex-wrap items-center justify-between gap-2 rounded-lg border border-warn/40 bg-warn/10 px-4 py-2.5 text-sm text-warn">
+      <span>⚠ {n} app secret{n > 1 ? 's' : ''} need rotation{alerts.expired > 0 ? ` — ${alerts.expired} already expired` : ''}.</span>
+      <NavLink to="/applications" className="font-medium underline hover:no-underline">Review applications →</NavLink>
+    </div>
+  )
+}
+
 export default function Layout() {
   const user = useCurrentUser()
   const toast = useToast()
@@ -133,6 +149,7 @@ export default function Layout() {
         </header>
 
         <main className="mx-auto w-full max-w-7xl flex-1 px-4 py-6 sm:px-6">
+          <RotationBanner />
           <Outlet />
         </main>
       </div>

resources/console/src/hooks/useRotationAlerts.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react'
+import { apiGet } from '../lib/api'
+
+export interface RotationAlerts {
+  expired: number
+  expiring: number
+  in_grace: number
+  needs_rotation: number
+  items: Array<Record<string, unknown>>
+}
+
+/**
+ * Fetches the client-secret rotation alerts (GET metrics/clients) — how many OAuth client secrets are
+ * expired / expiring / in a rotation grace, plus the most-urgent items. Best-effort: a failure (e.g. the
+ * operator lacks iam:metrics.read) resolves to null and the banner/widget simply hide.
+ */
+export function useRotationAlerts(): RotationAlerts | null {
+  const [data, setData] = useState<RotationAlerts | null>(null)
+  useEffect(() => {
+    let alive = true
+    apiGet<RotationAlerts>('metrics/clients')
+      .then((d) => alive && setData(d))
+      .catch(() => {})
+    return () => {
+      alive = false
+    }
+  }, [])
+  return data
+}

resources/console/src/pages/Dashboard.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 import { apiGet } from '../lib/api'
 import { useResource, useCursorList } from '../hooks/useApi'
+import { useRotationAlerts } from '../hooks/useRotationAlerts'
 import { asText, formatDate, pick } from '../lib/format'
 import PageHeader from '../components/PageHeader'
 import { Card, CardHeader, EmptyState, ErrorState, Loading, Table, Td, Th, Badge } from '../components/ui'
@@ -62,6 +63,33 @@ function StatGrid({ title, to, metrics, loading, error, note }: { title: string;
   )
 }
 
+// Client secrets needing rotation (expired/expiring) — hidden when there's nothing to act on.
+function ClientSecretsCard() {
+  const alerts = useRotationAlerts()
+  if (!alerts || alerts.needs_rotation <= 0) {
+    return null
+  }
+  return (
+    <Card>
+      <CardHeader
+        title="Client secrets to rotate"
+        subtitle={`${alerts.expired} expired · ${alerts.expiring} expiring · ${alerts.in_grace} in grace`}
+        actions={<Link to="/applications" className="text-sm text-accent-2 hover:underline">Applications</Link>}
+      />
+      <Table head={<><Th>Application</Th><Th>Client</Th><Th>Status</Th><Th>Expires</Th></>}>
+        {alerts.items.map((c, i) => (
+          <tr key={asText(pick(c, ['client_id'])) !== '—' ? asText(pick(c, ['client_id'])) : i}>
+            <Td className="font-medium text-ink">{asText(pick(c, ['application_key']))}</Td>
+            <Td className="font-mono text-xs text-muted">{asText(pick(c, ['client_id']))}</Td>
+            <Td><Badge tone={asText(pick(c, ['status'])) === 'expired' ? 'danger' : 'warn'}>{asText(pick(c, ['status']))}</Badge></Td>
+            <Td className="text-muted">{formatDate(pick(c, ['secret_expires_at']))}</Td>
+          </tr>
+        ))}
+      </Table>
+    </Card>
+  )
+}
+
 export default function Dashboard() {
   const users = useResource<Metrics>(() => apiGet('metrics/users'), [])
   const decisions = useResource<Metrics>(() => apiGet('metrics/decisions'), [])
@@ -74,6 +102,7 @@ export default function Dashboard() {
       <PageHeader title="Dashboard" description="Live decision, grant and audit metrics across the tenant." />
 
       <div className="space-y-5">
+        <ClientSecretsCard />
         <StatGrid
           title="Users"
           to="/users"