@skyhook-io/k8s-ui 1.13.0 → 1.13.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.13.0",
+  "version": "1.13.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -98,7 +98,7 @@
     "clsx": "^2.1.1",
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
-    "lucide-react": "^1.30.0",
+    "lucide-react": "^1.33.0",
     "monaco-editor": "0.55.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",

package/src/components/applications/AppTooltips.tsx

@@ -1,4 +1,4 @@
-import { provenanceSource, HEALTH_META, appSourceLabel, isDeclaredAppSource, APP_IDENTITY_ANNOTATION, type AppWorkload } from '../../utils/applications'
+import { provenanceSource, HEALTH_META, appSourceLabel, isDeclaredAppSource, APP_IDENTITY_ANNOTATION, type AppRolloutSummary, type AppWorkload } from '../../utils/applications'
 import { midTruncate } from '../../utils/format'
 
 // Structured tooltip content for the application chips. Both render a short
@@ -59,6 +59,18 @@ export function VersionTooltip({ workloads }: { workloads: Pick<AppWorkload, 'na
   )
 }
 
+export function RolloutSummaryTooltip({ summary }: { summary: AppRolloutSummary }) {
+  const details = summary.details.slice(0, 8)
+  return (
+    <div className="max-w-xs space-y-1">
+      {details.map((detail, index) => <div key={index}>{detail}</div>)}
+      {summary.details.length > details.length && (
+        <div className="text-theme-text-tertiary">+{summary.details.length - details.length} more</div>
+      )}
+    </div>
+  )
+}
+
 export function CategoryTooltip({
   category,
   addonReason,

package/src/components/applications/ApplicationDetail.test.tsx

@@ -76,6 +76,31 @@ function renderDetail(props: Partial<ApplicationDetailProps> = {}) {
 }
 
 describe("ApplicationDetail shell", () => {
+  it("shows rollout activity in the application summary and workload matrix", () => {
+    const rolling: AppRow = {
+      ...app,
+      workloads: app.workloads.map((workload, index) => index === 0 ? {
+        ...workload,
+        rollout: {
+          phase: 'progressing',
+          active: true,
+          manual: false,
+          label: 'Rolling out',
+          detail: '2/3 updated · 3 available',
+          desired: 3,
+          updated: 2,
+          ready: 3,
+          available: 3,
+        },
+      } : workload),
+    }
+    const html = renderDetail({ app: rolling })
+
+    expect(html).toContain('Rolling out')
+    expect(html).toContain('1 workload affected · 4/4 ready')
+    expect(html).toContain('2/3 updated · 3 available')
+  })
+
   it("preserves the built-in issue surface when the host slot is omitted", () => {
     const html = renderDetail({ renderOverviewIssues: undefined });
 

package/src/components/applications/ApplicationDetail.tsx

@@ -13,7 +13,7 @@ import {
   Boxes,
   ChevronDown,
   Clock3,
-  DollarSign,
+  Coins,
   ExternalLink,
   GitCommit,
   Layers,
@@ -31,7 +31,7 @@ import { EmptyState } from "../ui/EmptyState";
 import { ResourceRefBadge } from "../ui/drawer-components";
 import { TopologyGraph } from "../topology/TopologyGraph";
 import { pluralize } from "../../utils/pluralize";
-import { kindToPlural, refToSelectedResource } from "../../utils/navigation";
+import { kindToPluralWithGroup, refToSelectedResource } from "../../utils/navigation";
 import {
   batchRunParentNodes,
   tagWorkloadOwnership,
@@ -67,6 +67,8 @@ import {
   batchSignalForApp,
   batchActivityForApp,
   batchRuntimeForApp,
+  rolloutSummaryForApps,
+  rolloutDisplayHealth,
   applicationDisplayHealth,
   sourceReportedHealth,
   sourceSyncHealth,
@@ -80,7 +82,7 @@ import {
 } from "../../utils/applications";
 import { PaneLoader } from "../ui/PaneLoader";
 import { midTruncate } from "../../utils/format";
-import { VersionTooltip, AppIdentityTooltip } from "./AppTooltips";
+import { VersionTooltip, AppIdentityTooltip, RolloutSummaryTooltip } from "./AppTooltips";
 import {
   ProvenanceBadge,
   ClassBadge,
@@ -359,6 +361,10 @@ export function ApplicationDetail({
   );
   const workloadClass = workloadClassOf(app.workload_class);
   const batchRuntime = batchRuntimeForApp(app);
+  const rolloutSummary = useMemo(
+    () => rolloutSummaryForApps([{ ...app, workloads }]),
+    [app, workloads],
+  );
   const overall = applicationDisplayHealth(app);
   const verdictTone = HEALTH_META[overall].pill;
   const verdictLabel =
@@ -545,11 +551,12 @@ export function ApplicationDetail({
         onSelectWorkloadRun(parentWorkload, node);
         return;
       }
+      const group = topologyGroup(node);
       onNavigateToResource?.({
-        kind: kindToPlural(node.kind),
+        kind: kindToPluralWithGroup(node.kind, group ?? ""),
         namespace: ns,
         name: node.name,
-        group: topologyGroup(node),
+        group,
       });
     },
     [
@@ -702,8 +709,16 @@ export function ApplicationDetail({
         {workloadClass === "job" ? (
           <ContextFact label="Runtime">{batchRuntime.label}</ContextFact>
         ) : desired > 0 ? (
-          <ContextFact label="Ready">
-            <ReadyBar ready={ready} desired={desired} width="w-16" />
+          <ContextFact label="Ready"><ReadyBar ready={ready} desired={desired} width="w-16" /></ContextFact>
+        ) : null}
+        {workloadClass !== "job" && rolloutSummary ? (
+          <ContextFact label="Runtime">
+            <Tooltip content={<RolloutSummaryTooltip summary={rolloutSummary} />} delay={150}>
+              <span className="inline-flex items-center gap-1.5">
+                <StatusDot tone={mapHealthToTone(rolloutSummary.health)} />
+                {rolloutSummary.label}
+              </span>
+            </Tooltip>
           </ContextFact>
         ) : null}
         {(app.appVersion || versions.length > 0) && (
@@ -988,7 +1003,7 @@ function ApplicationViewTabs({
                 : "border-transparent text-theme-text-secondary hover:border-theme-border-light hover:text-theme-text-primary",
             )}
           >
-            <DollarSign className="h-4 w-4" />
+            <Coins className="h-4 w-4" />
             Cost
           </button>
         )}
@@ -1074,6 +1089,10 @@ function ApplicationOverview({
     app.runtimeHealth ??
       worstHealth(workloads.map((workload) => workload.health)),
   );
+  const rolloutSummary = useMemo(
+    () => rolloutSummaryForApps([{ ...app, workloads }]),
+    [app, workloads],
+  );
   const hasDeliveryStatus = Boolean(
     app.sourceStatus?.sync || app.sourceStatus?.health,
   );
@@ -1116,11 +1135,17 @@ function ApplicationOverview({
               value={
                 pureBatch
                   ? batchRuntimeForApp(app).label
-                  : HEALTH_META[runtimeHealth].label
+                  : rolloutSummary
+                    ? runtimeHealth === 'healthy' || runtimeHealth === 'neutral'
+                      ? rolloutSummary.label
+                      : `${HEALTH_META[runtimeHealth].label} · ${rolloutSummary.label}`
+                    : HEALTH_META[runtimeHealth].label
               }
               detail={
                 pureBatch
                   ? batchStats.activeDetail
+                  : rolloutSummary
+                    ? `${rolloutSummary.count} workload${rolloutSummary.count === 1 ? "" : "s"} affected · ${ready}/${desired} ready`
                   : desired > 0
                     ? `${ready}/${desired} ready`
                     : "No desired replicas"
@@ -2023,6 +2048,12 @@ function workloadRuntimeStatus(workload: AppWorkload): {
   label: string;
   health: AppHealth;
 } {
+  if (workload.rollout && (workload.rollout.active || workload.rollout.phase === 'stalled')) {
+    return {
+      label: workload.rollout.label,
+      health: rolloutDisplayHealth(workload.rollout, workload.health),
+    }
+  }
   const batch = workload.batch;
   if (!batch) {
     const health = healthOf(workload.health);
@@ -2039,6 +2070,7 @@ function workloadRuntimeStatus(workload: AppWorkload): {
 }
 
 function workloadRuntimeDetail(workload: AppWorkload): string {
+  if (workload.rollout && (workload.rollout.active || workload.rollout.phase === 'stalled')) return workload.rollout.detail || `${workload.ready}/${workload.desired} ready`
   const batch = workload.batch;
   if (!batch) return `${workload.ready}/${workload.desired} ready`;
   if ((batch.activeRuns ?? 0) > 0)

package/src/components/applications/ApplicationsView.tsx

@@ -39,14 +39,29 @@ import {
   foldAppGroups,
   batchSignalForApp,
   batchRuntimeForApp,
+  rolloutSummaryForApps,
   type FoldedRow,
 } from '../../utils/applications'
 import { ReadyBar } from './ReadyBar'
 import { ProvenanceBadge, ClassBadge, CategoryChip, VersionInfo, BatchSignalChip } from './AppChips'
-import { AppIdentityTooltip, EnvHint } from './AppTooltips'
+import { AppIdentityTooltip, EnvHint, RolloutSummaryTooltip } from './AppTooltips'
 
 function ApplicationRuntimeCell({ apps, workloadClass, ready, desired }: { apps: AppRow[]; workloadClass: AppWorkloadClass; ready: number; desired: number }) {
-  if (workloadClass !== 'job') return <ReadyBar ready={ready} desired={desired} />
+  if (workloadClass !== 'job') {
+    const rollout = rolloutSummaryForApps(apps)
+    if (!rollout) return <ReadyBar ready={ready} desired={desired} />
+    return (
+      <span className="inline-flex max-w-full items-center gap-3">
+        <ReadyBar ready={ready} desired={desired} />
+        <Tooltip content={<RolloutSummaryTooltip summary={rollout} />} delay={150}>
+          <span className="inline-flex min-w-0 items-center gap-1.5 text-xs text-theme-text-secondary">
+            <StatusDot tone={mapHealthToTone(rollout.health)} />
+            <span className="truncate">{rollout.label}</span>
+          </span>
+        </Tooltip>
+      </span>
+    )
+  }
   const runtimes = apps.map(batchRuntimeForApp)
   const worst = runtimes.reduce((current, runtime) => (HEALTH_RANK[runtime.health] ?? 0) > (HEALTH_RANK[current.health] ?? 0) ? runtime : current, runtimes[0])
   if (!worst) return <span className="text-xs text-theme-text-tertiary">Idle</span>
@@ -60,7 +75,7 @@ function ApplicationRuntimeCell({ apps, workloadClass, ready, desired }: { apps:
 }
 
 function applicationRuntimeLabel(apps: AppRow[], workloadClass: AppWorkloadClass, health: AppHealth): string {
-  if (workloadClass !== 'job') return HEALTH_META[health].label
+  if (workloadClass !== 'job') return rolloutSummaryForApps(apps)?.detail || HEALTH_META[health].label
   const labels = Array.from(new Set(apps.map((app) => batchRuntimeForApp(app).label)))
   return labels.length === 1 ? labels[0] : 'Multiple batch states'
 }

package/src/components/applications/ReadyBar.tsx

@@ -6,7 +6,8 @@ export function ReadyBar({ ready, desired, width = 'w-12' }: { ready: number; de
   if (desired <= 0) {
     return <span className="font-mono text-xs tabular-nums text-theme-text-tertiary">—</span>
   }
-  const pct = Math.min(100, Math.round((ready / desired) * 100))
+  const targetReady = Math.min(ready, desired)
+  const pct = Math.min(100, Math.round((targetReady / desired) * 100))
   const ok = ready >= desired
   // Text matches the bar's tier: amber for partial readiness, red only when
   // nothing is ready — partial must not read as fully down.
@@ -16,7 +17,7 @@ export function ReadyBar({ ready, desired, width = 'w-12' }: { ready: number; de
       <span className={`inline-block h-1.5 ${width} rounded-full bg-theme-hover`}>
         <span className={`block h-1.5 rounded-full ${tier.bar}`} style={{ width: `${pct}%` }} />
       </span>
-      <span className={`font-mono text-xs tabular-nums ${ok ? 'text-theme-text-secondary' : tier.text}`}>{ready}/{desired || '—'}</span>
+      <span className={`font-mono text-xs tabular-nums ${ok ? 'text-theme-text-secondary' : tier.text}`}>{targetReady}/{desired || '—'}</span>
     </span>
   )
 }

package/src/components/applications/applications-view.test.tsx

@@ -1,11 +1,14 @@
 import { describe, it, expect } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
 import {
   buildSingleAppEntry,
   searchTextForEntry,
   foldAppGroups,
   type AppRow,
   type SingleAppEntry,
+  rolloutSummaryForApps,
 } from '../../utils/applications'
+import { ReadyBar } from './ReadyBar'
 
 // Parity tests for the pure core the shared ApplicationsView is built on:
 // buildSingleAppEntry (the extracted former buildEntry), the search-text helper,
@@ -116,6 +119,94 @@ describe('buildSingleAppEntry', () => {
   })
 })
 
+describe('ReadyBar', () => {
+  it('caps target readiness during a surge', () => {
+    const html = renderToStaticMarkup(<ReadyBar ready={2} desired={1} />)
+    expect(html).toContain('1/1')
+    expect(html).not.toContain('2/1')
+  })
+})
+
+describe('rolloutSummaryForApps', () => {
+  it('surfaces a healthy surge rollout as activity rather than degradation', () => {
+    const summary = rolloutSummaryForApps([app({
+      workloads: [wl({
+        ready: 3,
+        desired: 3,
+        rollout: { phase: 'progressing', active: true, manual: false, label: 'Rolling out', detail: '2/3 updated · 3 available', desired: 3, updated: 2, ready: 3, available: 3 },
+      })],
+    })])
+
+    expect(summary).toMatchObject({ label: 'Rolling out', health: 'neutral', count: 1 })
+    expect(summary?.detail).toContain('2/3 updated')
+  })
+
+  it('keeps rollout copy while preserving a worse workload health tone', () => {
+    const summary = rolloutSummaryForApps([app({
+      workloads: [wl({
+        health: 'unhealthy',
+        rollout: { phase: 'progressing', active: true, manual: false, label: 'Rolling out', desired: 3, updated: 1, ready: 0, available: 0 },
+      })],
+    })])
+
+    expect(summary).toMatchObject({ label: 'Rolling out', health: 'unhealthy' })
+  })
+
+  it('escalates a stalled revision without changing stable app health data', () => {
+    const summary = rolloutSummaryForApps([app({
+      workloads: [wl({
+        rollout: { phase: 'stalled', active: false, manual: false, label: 'New revision cannot start', detail: 'ImagePullBackOff', desired: 1, updated: 0, ready: 1, available: 1 },
+      })],
+    })])
+
+    expect(summary).toMatchObject({ label: 'New revision cannot start', health: 'unhealthy' })
+  })
+
+  it('names stalled work before the other pending changes in a grouped app', () => {
+    const summary = rolloutSummaryForApps([app({
+      workloads: [
+        wl({ name: 'broken', rollout: { phase: 'stalled', active: false, manual: false, label: 'Rollout stalled', desired: 1, updated: 0, ready: 1, available: 1 } }),
+        wl({ name: 'manual', rollout: { phase: 'paused', active: true, manual: false, label: 'Rollout paused', desired: 1, updated: 0, ready: 1, available: 1 } }),
+      ],
+    })])
+
+    expect(summary).toMatchObject({ label: '1 stalled · 1 waiting', health: 'unhealthy', count: 2 })
+  })
+
+  it('does not report zero waiting workloads when every change is stalled', () => {
+    const stalled = { phase: 'stalled' as const, active: false, manual: false, label: 'Rollout stalled', desired: 1, updated: 0, ready: 1, available: 1 }
+    const summary = rolloutSummaryForApps([app({
+      workloads: [wl({ name: 'one', rollout: stalled }), wl({ name: 'two', rollout: stalled })],
+    })])
+
+    expect(summary?.label).toBe('2 stalled')
+  })
+
+  it('does not promote inactive rollout policies to app-level activity', () => {
+    const summary = rolloutSummaryForApps([app({
+      workloads: [
+        wl({ rollout: { phase: 'paused', active: false, manual: false, label: 'Rollout paused', desired: 1, updated: 1, ready: 0, available: 0 } }),
+        wl({ rollout: { phase: 'partition-reached', active: false, manual: false, label: 'Partition reached', desired: 3, updated: 2, ready: 2, available: 2 } }),
+      ],
+    })])
+
+    expect(summary).toBeNull()
+  })
+
+  it('caps grouped rollout details while preserving the full structured list', () => {
+    const summary = rolloutSummaryForApps([app({
+      workloads: Array.from({ length: 10 }, (_, index) => wl({
+        name: `worker-${index}`,
+        rollout: { phase: 'progressing', active: true, manual: false, label: 'Rolling out', desired: 1, updated: 0, ready: 1, available: 1 },
+      })),
+    })])
+
+    expect(summary).toMatchObject({ label: '10 updating', count: 10 })
+    expect(summary?.details).toHaveLength(10)
+    expect(summary?.detail).toContain('+2 more')
+  })
+})
+
 describe('searchTextForEntry (single)', () => {
   it('matches on name, namespace, version, env, and workload kind', () => {
     const e = buildSingleAppEntry(

package/src/components/cluster-switcher/ClusterSwitcher.tsx

@@ -18,6 +18,9 @@ export interface ClusterSwitcherItem {
   /** Raw context / display string. ClusterName collapses GKE/EKS/AKS
    *  shapes; user-named clusters pass through unchanged. */
   name: string
+  /** Short qualifier rendered after the parsed name without affecting
+   *  provider detection, e.g. a source suffix for colliding contexts. */
+  nameQualifier?: string
   secondary?: string
   badge?: string
   /** Origin label, rendered as a folder-icon line under the name.
@@ -44,6 +47,8 @@ export interface ClusterSwitcherProps {
   /** Raw context / display string. Pass it as-is — the trigger renders
    *  through ClusterName, which handles parse + provider badge + tooltip. */
   currentName: string
+  /** Trigger-side counterpart to {@link ClusterSwitcherItem.nameQualifier}. */
+  currentNameQualifier?: string
   /** Trigger-side counterpart to {@link ClusterSwitcherItem.sourceLabel}.
    *  Only pass when 2+ kubeconfig sources are loaded. */
   currentSourceLabel?: string
@@ -80,6 +85,7 @@ const TRIGGER_NAME_MAX_WIDTH = 'max-w-[140px] sm:max-w-[220px] xl:max-w-[340px]'
 export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcherProps>(({
   currentId,
   currentName,
+  currentNameQualifier,
   currentSourceLabel,
   items,
   onSelect,
@@ -114,6 +120,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
       if (!q) return true
       return (
         item.name.toLowerCase().includes(q) ||
+        item.nameQualifier?.toLowerCase().includes(q) ||
         item.secondary?.toLowerCase().includes(q) ||
         item.badge?.toLowerCase().includes(q) ||
         item.sourceLabel?.toLowerCase().includes(q) ||
@@ -209,7 +216,7 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
         disabled={disabled || loading}
         className={
           variant === 'segment'
-            ? `flex items-center gap-1.5 px-3 py-1.5 h-full min-w-[150px] max-w-[264px] text-[13px] font-medium
+            ? `flex items-center gap-1.5 px-3 py-1.5 h-full min-w-[150px] max-w-[264px] overflow-hidden text-[13px] font-medium
                text-theme-text-primary hover:bg-theme-hover transition-colors cursor-pointer
                disabled:opacity-50 disabled:cursor-not-allowed`
             : `flex items-center gap-1.5 px-2.5 py-1.5 min-w-[140px]
@@ -236,12 +243,25 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
           // context inline (per-row secondary line), and an extra hover
           // tooltip would just overlap the search input.
           <>
-            <ClusterName
-              name={currentName}
-              fallbackBadge={<Server className="w-3.5 h-3.5 text-theme-text-secondary" />}
-              className={variant === 'segment' ? 'min-w-0 max-w-[214px]' : TRIGGER_NAME_MAX_WIDTH}
-              noTooltip={isOpen}
-            />
+            {/* flex (not a plain span): ClusterName is inline-flex and would
+                otherwise baseline-align inside this wrapper's line box,
+                sitting a couple px above the segment's vertical center. */}
+            <span className={variant === 'segment' ? 'flex items-center min-w-0 flex-1' : 'flex items-center min-w-0'}>
+              <ClusterName
+                name={currentName}
+                fallbackBadge={<Server className="w-3.5 h-3.5 text-theme-text-secondary" />}
+                className={variant === 'segment' ? 'min-w-0 max-w-full' : TRIGGER_NAME_MAX_WIDTH}
+                noTooltip={isOpen}
+              />
+            </span>
+            {currentNameQualifier && (
+              <span
+                className="shrink-0 max-w-[80px] truncate text-xs font-normal text-theme-text-tertiary"
+                title={currentNameQualifier}
+              >
+                {currentNameQualifier}
+              </span>
+            )}
             {currentSourceLabel && (
               // Icon-only on the trigger: long folder paths (the very case
               // that motivates the chip) middle-truncate to something
@@ -358,6 +378,14 @@ export const ClusterSwitcher = forwardRef<ClusterSwitcherHandle, ClusterSwitcher
                                     : 'text-theme-text-primary'
                               }`}
                             />
+                            {item.nameQualifier && (
+                              <span
+                                className="shrink-0 max-w-[120px] truncate text-xs font-normal text-theme-text-tertiary"
+                                title={item.nameQualifier}
+                              >
+                                {item.nameQualifier}
+                              </span>
+                            )}
                             {item.badge && (
                               <span className="shrink-0 text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 rounded">
                                 {item.badge}

package/src/components/issues/IssuesView.tsx

@@ -4,7 +4,7 @@ import { CardBody, CardSection, ClusterName, EmptyState, KIND_CHIP_CLASS, Termin
 import { Tooltip } from '../ui/Tooltip';
 import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format';
 import { diagnosticRoleLabel, diagnosticFactLabel, confidenceTitle, incidentParentLabel } from './diagnostic';
-import { issueTiming } from './issue-timing';
+import { issueFirstSeenTitle, issueResourceCreatedTitle, issueTimingForDisplay } from './issue-timing';
 import {
   ISSUE_SEVERITY_BADGE_CLASS,
   ISSUE_SEVERITY_HEADER_BAND_CLASS,
@@ -212,7 +212,9 @@ export function IssueRow({
   const severity = normalizeIssueSeverity(issue.severity);
   const SeverityIcon = ISSUE_SEVERITY_ICON[severity];
   const slotCtx = { issue, open };
-  const timing = issueTiming(issue);
+  const partialUnknown = issue.onset_coverage?.unknown ?? 0;
+  const partialOnset = Boolean(issue.first_seen && partialUnknown > 0);
+  const timing = issueTimingForDisplay(issue);
 
   // Severity pill + age + timing chip. Rendered in two positions the container
   // query toggles: inline at the row's right edge on a wide container, and on a
@@ -224,28 +226,19 @@ export function IssueRow({
         {ISSUE_SEVERITY_LABEL[severity]}
       </span>
       {issue.first_seen ? (
-        <>
-          <Tooltip content={ageTitle(issue)} delay={200} wrapperClassName="shrink-0">
-            <time
-              dateTime={issue.first_seen}
-              className="flex items-center gap-1 text-xs tabular-nums text-theme-text-tertiary"
-            >
-              <Clock className="h-3 w-3" aria-hidden />
-              {formatCompactAge(issue.first_seen)}
-            </time>
-          </Tooltip>
-          {timing ? (
-            <Tooltip content={timing.tooltip} delay={200}>
-              <span className="badge-sm text-[10px] text-theme-text-secondary">{timing.chip}</span>
-            </Tooltip>
-          ) : null}
-        </>
-      ) : issue.onset_unknown ? (
-        <Tooltip content="Radar can confirm this issue is active, but current Kubernetes state does not reveal when it began." delay={200} wrapperClassName="shrink-0">
-          <span className="flex items-center gap-1 text-xs text-theme-text-tertiary">
+        <Tooltip content={ageTitle(issue)} delay={200} wrapperClassName="shrink-0">
+          <time
+            dateTime={issue.first_seen}
+            className="flex items-center gap-1 text-xs tabular-nums text-theme-text-tertiary"
+          >
             <Clock className="h-3 w-3" aria-hidden />
-            Onset unknown
-          </span>
+            {partialOnset ? '≥' : ''}{formatCompactAge(issue.first_seen)}
+          </time>
+        </Tooltip>
+      ) : null}
+      {timing ? (
+        <Tooltip content={timing.tooltip} delay={200}>
+          <span className="badge-sm text-[10px] text-theme-text-secondary">{timing.chip}</span>
         </Tooltip>
       ) : null}
     </div>
@@ -437,7 +430,9 @@ function Diagnosis({ issue, source }: { issue: Issue; source?: IssueDiagnosisSou
   // present, else headline+detail) rather than a string that may never appear.
   const visibleMessage = [headline, detail].filter(Boolean).join(' ');
   const shownText = issue.cause ?? visibleMessage;
-  const timing = issueTiming(issue);
+  const partialUnknown = issue.onset_coverage?.unknown ?? 0;
+  const partialOnset = Boolean(issue.first_seen && partialUnknown > 0);
+  const timing = issueTimingForDisplay(issue);
   const rawError = [
     ...new Set(
       [issue.raw_message ?? (issue.cause ? issue.message : undefined), detail].filter(
@@ -455,14 +450,24 @@ function Diagnosis({ issue, source }: { issue: Issue; source?: IssueDiagnosisSou
   if (issue.operation_retry_count) meta.push(`retried ${issue.operation_retry_count}×`);
   if (crash) meta.push(crash);
   if (timing) {
+    if (partialOnset && issue.first_seen) {
+      meta.push(`some signals active at least ${formatRelativeAgeTime(issue.first_seen)}`);
+    }
     meta.push(timing.meta);
+    if (!partialOnset && timing.kind === 'regression' && issue.first_seen) {
+      meta.push(`active at least ${formatRelativeAgeTime(issue.first_seen)}`);
+    }
+  } else if (partialOnset && issue.first_seen) {
+    const total = (issue.onset_coverage?.known ?? 0) + partialUnknown;
+    meta.push(`some signals active at least ${formatRelativeAgeTime(issue.first_seen)}; timing unknown for ${partialUnknown} of ${total} signals`);
   } else if (issue.first_seen) {
-    meta.push(`started ${formatRelativeAgeTime(issue.first_seen)}`);
-  } else if (issue.onset_unknown) {
-    meta.push('onset unknown');
+    meta.push(`active at least ${formatRelativeAgeTime(issue.first_seen)}`);
+  }
+  if (issue.onset_unknown && !timing && !partialOnset) {
+    meta.push('exact onset unknown');
   }
   if (issue.first_seen) {
-    if (issue.last_seen && timing?.kind !== 'creation') meta.push(`last seen ${formatRelativeAgeTime(issue.last_seen)}`);
+    if (issue.last_seen && (timing?.kind !== 'creation' || partialOnset)) meta.push(`last seen ${formatRelativeAgeTime(issue.last_seen)}`);
   }
   if (issue.change_context) meta.push(changeContextText(issue.change_context));
 
@@ -631,9 +636,13 @@ function DiagnosticContext({
 // freshness, the two facts the compact "2h" hides.
 function ageTitle(issue: Issue): string {
   const parts: string[] = [];
-  const timing = issueTiming(issue);
-  if (timing) parts.push(timing.tooltip);
-  if (issue.first_seen) parts.push(`First seen ${new Date(issue.first_seen).toLocaleString()}`);
+  const timing = issueTimingForDisplay(issue);
+  const partialUnknown = issue.onset_coverage?.unknown ?? 0;
+  if (timing && partialUnknown === 0) parts.push(timing.tooltip);
+  const firstSeenTitle = issueFirstSeenTitle(issue);
+  if (firstSeenTitle) parts.push(firstSeenTitle);
+  const resourceContext = issueResourceCreatedTitle(issue);
+  if (resourceContext) parts.push(resourceContext);
   if (issue.last_seen) parts.push(`Last seen ${formatRelativeAgeTime(issue.last_seen)}`);
   return parts.join('\n');
 }

package/src/components/issues/ResourceIssuesSection.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react'
 import { AlertTriangle } from 'lucide-react'
-import { kindToPlural } from '../../utils/navigation'
+import { kindToPluralWithGroup } from '../../utils/navigation'
 import { IssueRow } from './IssuesView'
 import { compareIssues, subjectRef, type Issue, type IssueResourceRef } from './types'
 
@@ -56,7 +56,8 @@ export function sameResource(a: IssueResourceRef, b: IssueResourceRef): boolean
   return (
     a.name === b.name &&
     (a.namespace ?? '') === (b.namespace ?? '') &&
-    kindToPlural(a.kind).toLowerCase() === kindToPlural(b.kind).toLowerCase()
+    kindToPluralWithGroup(a.kind, a.group ?? '').toLowerCase() ===
+      kindToPluralWithGroup(b.kind, b.group ?? '').toLowerCase()
   )
 }
 

package/src/components/issues/index.ts

@@ -5,7 +5,7 @@
 export { IssueRow, IssuesView } from './IssuesView';
 export type { IssueDiagnosisSource, IssueRowProps, IssueRowSlotContext, IssuesViewProps } from './IssuesView';
 export { ResourceIssuesSection } from './ResourceIssuesSection';
-export { issueTiming } from './issue-timing';
+export { issueFirstSeenTitle, issueResourceCreatedTitle, issueTiming, issueTimingForDisplay } from './issue-timing';
 export type { IssueTimingDisplay, IssueTimingDisplayKind } from './issue-timing';
 export {
   ISSUE_SEVERITIES,
@@ -13,6 +13,8 @@ export {
   isIssueSeverity,
   subjectRef,
   memberRef,
+  issueSortAnchor,
+  compareIssueSortAnchors,
 } from './types';
 export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticConfidence, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueIncidentParent, IssueChangeContext, IssueRecentChange, IssueRecentChangeField } from './types';
 export {