@skyhook-io/k8s-ui 1.8.10 → 1.8.11

package/src/components/gitops/insights/insights-helpers.ts

@@ -2,7 +2,7 @@
 // GitOpsInsightViews.tsx so they can be unit-tested without importing JSX.
 
 import { SEVERITY_DOT, type Severity } from '../../../utils/badge-colors'
-import type { GitOpsHistoryItem } from '../../../types'
+import type { GitOpsChange, GitOpsHistoryItem } from '../../../types'
 import type { SyncStatus, GitOpsHealthStatus } from '../../../types/gitops'
 
 const SYNC_STATUS_SET = new Set<SyncStatus>(['Synced', 'OutOfSync', 'Reconciling', 'Unknown'])
@@ -23,6 +23,74 @@ export function normalizeHealthStatus(value: string | undefined | null): GitOpsH
   return 'Unknown'
 }
 
+// --- Resources table: filtering + sorting -------------------------------
+// Pure predicates + rank functions backing the Resources list's search box,
+// status facets, and sortable columns. Kept here (not inline in the view) so
+// the sort/filter behavior is unit-testable without rendering.
+
+// The status facets an operator filters the Resources list by — the three
+// states worth isolating on a broadly-drifted app. (These replaced the
+// per-resource OutOfSync "issues" that used to restate the whole table.)
+export type ResourceStatusFacet = 'outOfSync' | 'degraded' | 'missing'
+
+export type ResourceSortKey = 'order' | 'name' | 'sync' | 'health'
+
+// changeSync/changeHealth normalize a change's raw backend strings onto the
+// badge unions. `sync` falls back to `category` to match how ChangeRow and
+// the sync badge resolve it.
+export function changeSync(change: GitOpsChange): SyncStatus {
+  return normalizeSyncStatus(change.sync ?? change.category)
+}
+
+export function changeHealth(change: GitOpsChange): GitOpsHealthStatus {
+  return normalizeHealthStatus(change.health)
+}
+
+// Rank sync/health so an ascending sort surfaces the states an operator cares
+// about first (drift, then failures). Mirrors the GitOps application table's
+// syncRank/healthRank so the two tables order status the same way.
+export function syncStatusRank(sync: SyncStatus): number {
+  return ({ OutOfSync: 0, Reconciling: 1, Unknown: 2, Synced: 3 } as Record<SyncStatus, number>)[sync]
+}
+
+export function healthStatusRank(health: GitOpsHealthStatus): number {
+  return ({ Missing: 0, Degraded: 1, Progressing: 2, Unknown: 3, Suspended: 4, Healthy: 5 } as Record<GitOpsHealthStatus, number>)[health]
+}
+
+export function changeMatchesSearch(change: GitOpsChange, query: string): boolean {
+  const q = query.trim().toLowerCase()
+  if (!q) return true
+  const { kind, name, namespace, group } = change.ref
+  return [kind, name, namespace, group].some((s) => s?.toLowerCase().includes(q))
+}
+
+// Union match: a change passes when it satisfies ANY active facet (empty set
+// = no filter). OutOfSync keys off sync status; Degraded/Missing off health.
+export function changeMatchesFacets(change: GitOpsChange, facets: Set<ResourceStatusFacet>): boolean {
+  if (facets.size === 0) return true
+  if (facets.has('outOfSync') && changeSync(change) === 'OutOfSync') return true
+  if (facets.has('degraded') && changeHealth(change) === 'Degraded') return true
+  if (facets.has('missing') && changeHealth(change) === 'Missing') return true
+  return false
+}
+
+export interface ResourceStatusCounts {
+  outOfSync: number
+  degraded: number
+  missing: number
+}
+
+export function resourceStatusCounts(changes: GitOpsChange[]): ResourceStatusCounts {
+  const counts: ResourceStatusCounts = { outOfSync: 0, degraded: 0, missing: 0 }
+  for (const c of changes) {
+    if (changeSync(c) === 'OutOfSync') counts.outOfSync++
+    const health = changeHealth(c)
+    if (health === 'Degraded') counts.degraded++
+    if (health === 'Missing') counts.missing++
+  }
+  return counts
+}
+
 // Map GitOps-flavored vocabulary (Argo/Flux phase strings, insight Issue
 // severities) onto the canonical Severity tokens used by SEVERITY_BADGE /
 // SEVERITY_TEXT / SEVERITY_DOT. Centralizing this keeps call sites from

package/src/components/gitops/tree/GitOpsTreeGraph.tsx

@@ -17,12 +17,14 @@ import {
 import '@xyflow/react/dist/style.css'
 import { AlertTriangle, ChevronRight, Maximize, Search, X } from 'lucide-react'
 import { PaneLoader } from '../../ui/PaneLoader'
+import { Input } from '../../ui/Input'
 import { clsx } from 'clsx'
 
 import type { GitOpsResourceTree, GitOpsTreeNode, GitOpsTreeRef, HealthStatus } from '../../../types'
 import { displayKind } from '../../../types'
 import { healthToSeverity, SEVERITY_DOT } from '../../../utils/badge-colors'
 import { formatCompactAge } from '../../../utils/format'
+import { getTopologyIcon } from '../../../utils/resource-icons'
 import { Tooltip } from '../../ui/Tooltip'
 import { hasGitOpsTreeFilters, matchesGitOpsTreeFilters, type GitOpsTreeFilters } from './tree-helpers'
 
@@ -252,7 +254,7 @@ function GitOpsTreeToolbar({
       </div>
       <div className="flex items-center gap-1 rounded-lg border border-theme-border bg-theme-surface/90 px-2 py-1.5 backdrop-blur">
         <Search className="h-3.5 w-3.5 text-theme-text-tertiary" />
-        <input
+        <Input
           value={query}
           onChange={(event) => onQueryChange(event.target.value)}
           placeholder="Find node..."
@@ -549,6 +551,7 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
   const gitopsTool = gitopsToolForNode(node)
   const chips = buildChips(node)
   const dim = getNodeDimensions(node)
+  const KindIcon = getTopologyIcon(kind)
 
   return (
     <>
@@ -584,7 +587,7 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
       >
         <div className="px-3 py-2.5">
           <div className="mb-1 flex items-center gap-1.5">
-            <span className={`topology-icon topology-icon-${kind.toLowerCase()}`} />
+            <KindIcon className="h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" aria-hidden />
             <span className="truncate text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary">
               {node.role === 'group' ? displayKind((node.data?.groupedKind as string) || kind) : displayKind(kind)}
             </span>

package/src/components/issues/IssuesView.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useMemo, useState, type ComponentType, type ReactNode } from 'react';
 import { AlertOctagon, AlertTriangle, ArrowRight, ChevronRight, CircleCheck, Clock, ExternalLink, Layers, Terminal, Workflow } from 'lucide-react';
 import { CardBody, CardSection, ClusterName, EmptyState, KIND_CHIP_CLASS, TerminalBlock } from '../ui';
+import { Tooltip } from '../ui/Tooltip';
 import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format';
 import { diagnosticRoleLabel, diagnosticFactLabel, confidenceTitle, incidentParentLabel } from './diagnostic';
+import { issueTiming } from './issue-timing';
 import {
   ISSUE_SEVERITY_BADGE_CLASS,
   ISSUE_SEVERITY_HEADER_BAND_CLASS,
@@ -60,12 +62,15 @@ export interface IssuesViewProps {
   clusterLabel?: (issue: Issue) => string | undefined;
   /** Empty-state CTA shown when there's no data. */
   emptyAction?: ReactNode;
+  /** Per-row trailing action, rendered after the severity badge — e.g. the
+   *  "Diagnose with AI" button in OSS. Omit to render no per-row action. */
+  renderActions?: (ctx: IssueRowSlotContext) => ReactNode;
 }
 
 // The queue list. Filtering/faceting is the host page's job (FleetPageShell on
 // the hub, a thin wrapper in OSS) — this renders the rows + the healthy /
 // no-data terminal states only.
-export function IssuesView({ issues, anyData, resourceHref, onResourceClick, clusterLabel, emptyAction }: IssuesViewProps) {
+export function IssuesView({ issues, anyData, resourceHref, onResourceClick, clusterLabel, emptyAction, renderActions }: IssuesViewProps) {
   // Single-open accordion: opening a row collapses the previous one, so the
   // queue stays scannable and you never lose your place to a wall of expansions.
   const [openId, setOpenId] = useState<string | null>(null);
@@ -104,6 +109,7 @@ export function IssuesView({ issues, anyData, resourceHref, onResourceClick, clu
             onToggle={() => setOpenId((cur) => (cur === rowKey ? null : rowKey))}
             resourceHref={resourceHref}
             onResourceClick={onResourceClick}
+            renderActions={renderActions}
           />
         );
       })}
@@ -155,6 +161,7 @@ export function IssueRow({
   const severity = normalizeIssueSeverity(issue.severity);
   const SeverityIcon = ISSUE_SEVERITY_ICON[severity];
   const slotCtx = { issue, open };
+  const timing = issueTiming(issue);
 
   useEffect(() => {
     if (open) {
@@ -248,10 +255,12 @@ export function IssueRow({
                 <span aria-hidden>·</span>
                 {/* Non-interactive signal (the header is the toggle — a nested
                     button would be invalid); the clickable link lives in the body. */}
-                <span className="min-w-0 truncate text-theme-text-tertiary" title={confidenceTitle(issue.incident_parent.confidence ?? '')}>
-                  ↳ {incidentParentLabel(issue.incident_parent.fact_type, issue.incident_parent.confidence)}{' '}
-                  <span className="font-medium text-theme-text-secondary">{issue.incident_parent.ref.kind} / {issue.incident_parent.ref.name}</span>
-                </span>
+                <Tooltip content={confidenceTitle(issue.incident_parent.confidence ?? '')} delay={200} wrapperClassName="min-w-0">
+                  <span className="truncate text-theme-text-tertiary">
+                    ↳ {incidentParentLabel(issue.incident_parent.fact_type, issue.incident_parent.confidence)}{' '}
+                    <span className="font-medium text-theme-text-secondary">{issue.incident_parent.ref.kind} / {issue.incident_parent.ref.name}</span>
+                  </span>
+                </Tooltip>
               </>
             ) : null}
             {renderMeta?.(slotCtx)}
@@ -265,17 +274,22 @@ export function IssueRow({
           </span>
           {/* Age chip: keep recency visible; the deployment-start signal rides as a secondary tag. */}
           {issue.first_seen ? (
-            <time
-              dateTime={issue.first_seen}
-              title={ageTitle(issue)}
-              className="flex shrink-0 items-center gap-1 text-xs tabular-nums text-theme-text-tertiary"
-            >
-              <Clock className="h-3 w-3" aria-hidden />
-              {formatCompactAge(issue.first_seen)}
-              {issue.issue_timing === 'started_at_resource_creation' ? (
-                <span className="badge-sm ml-1 text-[10px] text-theme-text-secondary">since deploy</span>
+            <>
+              <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}
-            </time>
+            </>
           ) : null}
           {renderActions?.(slotCtx)}
           <ChevronRight className={`h-4 w-4 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
@@ -302,9 +316,11 @@ export function IssueRow({
                     <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">
                       {incidentParentLabel(issue.incident_parent.fact_type, issue.incident_parent.confidence)}
                       {issue.incident_parent.confidence ? (
-                        <span className="ml-2 badge-sm text-[10px] font-normal text-theme-text-tertiary" title={confidenceTitle(issue.incident_parent.confidence)}>
-                          {issue.incident_parent.confidence} confidence
-                        </span>
+                        <Tooltip content={confidenceTitle(issue.incident_parent.confidence)} delay={200}>
+                          <span className="ml-2 badge-sm text-[10px] font-normal text-theme-text-tertiary">
+                            {issue.incident_parent.confidence} confidence
+                          </span>
+                        </Tooltip>
                       ) : null}
                     </h4>
                     <ul className="flex flex-col gap-px">
@@ -343,6 +359,7 @@ function Diagnosis({ issue }: { issue: Issue }) {
   // 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 rawError = [
     ...new Set(
       [issue.raw_message ?? (issue.cause ? issue.message : undefined), detail].filter(
@@ -359,15 +376,13 @@ function Diagnosis({ issue }: { issue: Issue }) {
   else if (issue.operation_retry_count) meta.push('Retrying');
   if (issue.operation_retry_count) meta.push(`retried ${issue.operation_retry_count}×`);
   if (crash) meta.push(crash);
+  if (timing) {
+    meta.push(timing.meta);
+  } else if (issue.first_seen) {
+    meta.push(`started ${formatRelativeAgeTime(issue.first_seen)}`);
+  }
   if (issue.first_seen) {
-    meta.push(
-      issue.issue_timing === 'started_at_resource_creation'
-        ? 'present since deployment'
-        : issue.issue_timing === 'started_after_resource_was_healthy'
-          ? `started ${formatRelativeAgeTime(issue.first_seen)} · was previously healthy`
-          : `started ${formatRelativeAgeTime(issue.first_seen)}`,
-    );
-    if (issue.last_seen && issue.issue_timing !== 'started_at_resource_creation') meta.push(`last seen ${formatRelativeAgeTime(issue.last_seen)}`);
+    if (issue.last_seen && timing?.kind !== 'creation') meta.push(`last seen ${formatRelativeAgeTime(issue.last_seen)}`);
   }
   if (issue.change_context) meta.push(changeContextText(issue.change_context));
 
@@ -448,12 +463,11 @@ function DiagnosticContext({
             <div className="flex min-w-0 items-baseline gap-2">
               <span className="shrink-0 text-xs font-medium text-theme-text-secondary">{diagnosticFactLabel(fact.type)}</span>
               {fact.confidence ? (
-                <span
-                  className="shrink-0 badge-sm text-[10px] text-theme-text-tertiary"
-                  title={confidenceTitle(fact.confidence)}
-                >
-                  {fact.confidence} confidence
-                </span>
+                <Tooltip content={confidenceTitle(fact.confidence)} delay={200}>
+                  <span className="shrink-0 badge-sm text-[10px] text-theme-text-tertiary">
+                    {fact.confidence} confidence
+                  </span>
+                </Tooltip>
               ) : null}
               {fact.message ? <span className="min-w-0 break-words text-xs leading-relaxed text-theme-text-tertiary">{fact.message}</span> : null}
             </div>
@@ -496,11 +510,8 @@ function DiagnosticContext({
 // freshness, the two facts the compact "2h" hides.
 function ageTitle(issue: Issue): string {
   const parts: string[] = [];
-  if (issue.issue_timing === 'started_at_resource_creation') {
-    parts.push('Present since deployment — treat as baseline');
-  } else if (issue.issue_timing === 'started_after_resource_was_healthy') {
-    parts.push('Resource was previously healthy');
-  }
+  const timing = issueTiming(issue);
+  if (timing) parts.push(timing.tooltip);
   if (issue.first_seen) parts.push(`First seen ${new Date(issue.first_seen).toLocaleString()}`);
   if (issue.last_seen) parts.push(`Last seen ${formatRelativeAgeTime(issue.last_seen)}`);
   return parts.join('\n');
@@ -589,7 +600,9 @@ function ResourceLine({
         {r.name}
       </span>
       {count && count > 1 ? (
-        <span className="shrink-0 text-[10px] text-theme-text-tertiary tabular-nums" title={`${count} affected resources grouped under this issue`}>{count} affected</span>
+        <Tooltip content={`${count} affected resources grouped under this issue`} delay={200}>
+          <span className="shrink-0 text-[10px] text-theme-text-tertiary tabular-nums">{count} affected</span>
+        </Tooltip>
       ) : null}
       {linkable && <ResourceLinkIcon className="h-3 w-3 shrink-0 text-theme-text-tertiary opacity-0 transition-opacity group-hover/r:opacity-100" />}
     </>

package/src/components/issues/ResourceIssuesSection.test.tsx

@@ -28,12 +28,13 @@ const issue: Issue = {
 }
 
 describe('ResourceIssuesSection', () => {
-  it('keeps drawer context facts but omits the role badge', () => {
+  it('uses the Issues row treatment and defaults collapsed', () => {
     const html = renderToString(<ResourceIssuesSection issues={[issue]} />)
 
-    expect(html).toContain('Context')
-    expect(html).toContain('Blocked pods')
-    expect(html).toContain('high<!-- --> confidence')
-    expect(html).not.toContain('Possible cause')
+    expect(html).toContain('Operational issues')
+    expect(html).toContain('StorageClassMissing')
+    expect(html).not.toContain('What&#x27;s wrong')
+    expect(html).not.toContain('Context')
+    expect(html).not.toContain('Blocked pods')
   })
 })

package/src/components/issues/ResourceIssuesSection.tsx

@@ -1,26 +1,8 @@
-import { AlertTriangle, ExternalLink } from 'lucide-react'
-import { Section } from '../ui/drawer-components'
-import { Badge } from '../ui/Badge'
-import type { Issue, IssueResourceRef } from './types'
-import { categoryLabel } from './severity'
-import { diagnosticFactLabel, confidenceTitle, incidentParentLabel } from './diagnostic'
+import { useMemo, useState } from 'react'
+import { AlertTriangle } from 'lucide-react'
+import { IssueRow } from './IssuesView'
+import { compareIssues, type Issue, type IssueResourceRef } from './types'
 
-/**
- * ResourceIssuesSection — the compact "Operational Issues" block for the resource
- * detail. Renders the live, diagnosed Issues that touch one resource (its own +,
- * for a workload, its owned pods' issues, server-rolled-up via RelatedIssues).
- * The diagnosis sibling of IssuesView's queue row — same Cause/Action vocabulary,
- * stripped of the queue chrome (accordion, scope copy, fan-out expansion).
- *
- * Header mirrors the queue: the plain `categoryLabel` is the operator-facing
- * headline and the raw `reason` rides alongside as a muted signal (so the K8s
- * jargon is available but not the lead). Body is primarily the plain
- * `cause` (which names the offending object) + the `Next step` — the diagnosis
- * and the fix. The raw `message`/evidence stays in the queue + MCP where the
- * locator detail is wanted; inline it mostly restated the cause or the category,
- * so it's omitted to keep the card scannable. (`message` is the body fallback
- * only for categories that don't yet emit a `cause`.)
- */
 export function ResourceIssuesSection({
   issues,
   onResourceClick,
@@ -29,135 +11,35 @@ export function ResourceIssuesSection({
   /** When provided, related resources in a causal link become clickable. */
   onResourceClick?: (ref: IssueResourceRef) => void
 }) {
-  if (!issues || issues.length === 0) return null
+  const sorted = useMemo(() => [...(issues ?? [])].sort(compareIssues), [issues])
+  const [openId, setOpenId] = useState<string | null>(null)
+
+  if (sorted.length === 0) return null
+
   return (
-    <Section title={`Operational Issues (${issues.length})`} icon={AlertTriangle} defaultExpanded>
-      <div className="space-y-3">
-        {issues.map((issue) => {
-          const parent = issue.incident_parent
+    <section className="space-y-2">
+      <div className="flex items-center gap-2 px-1 text-xs font-semibold uppercase tracking-wide text-theme-text-secondary">
+        <AlertTriangle className="h-4 w-4 text-theme-text-tertiary" aria-hidden />
+        <span>Operational issues ({sorted.length})</span>
+      </div>
+      <ol className="flex flex-col gap-1.5">
+        {sorted.map((issue) => {
+          const key = issueKey(issue)
           return (
-            <div key={issue.id} className="card-inner">
-              <div className="mb-1 flex min-w-0 items-baseline gap-2">
-                <Badge severity={issue.severity === 'critical' ? 'error' : 'warning'} size="sm">
-                  {issue.severity}
-                </Badge>
-                <span className="shrink-0 text-sm font-medium text-theme-text-primary">{categoryLabel(issue.category)}</span>
-                {issue.reason ? (
-                  <span className="min-w-0 flex-1 truncate text-xs text-theme-text-tertiary">{issue.reason}</span>
-                ) : null}
-                {issue.count ? (
-                  <span className="shrink-0 text-xs text-theme-text-tertiary tabular-nums">· {issue.count} affected</span>
-                ) : null}
-              </div>
-              {issue.cause ? (
-                <p className="text-sm leading-relaxed text-theme-text-secondary">{issue.cause}</p>
-              ) : issue.message ? (
-                <p className="text-sm leading-relaxed text-theme-text-secondary">{issue.message}</p>
-              ) : null}
-              {issue.action ? (
-                <p className="mt-1 text-sm leading-relaxed text-theme-text-secondary">
-                  <span className="font-medium text-theme-text-primary">Next step: </span>
-                  {issue.action}
-                </p>
-              ) : null}
-              {issue.remediation_kind === 'create-namespace' && issue.remediation_target ? (
-                <p className="mt-1 text-xs text-theme-text-tertiary">
-                  Suggested fix: create namespace{' '}
-                  <code className="rounded bg-theme-elevated px-1 font-mono">{issue.remediation_target}</code> — apply it from the GitOps detail page.
-                </p>
-              ) : null}
-              {parent ? (
-                <p className="mt-1 text-xs text-theme-text-tertiary">
-                  {incidentParentLabel(parent.fact_type, parent.confidence)}:{' '}
-                  {onResourceClick ? (
-                    <button
-                      type="button"
-                      onClick={() => onResourceClick(parent.ref)}
-                      className="group inline-flex items-center gap-1 text-left font-mono hover:text-theme-text-secondary"
-                      title={confidenceTitle(parent.confidence ?? '')}
-                    >
-                      {parent.ref.kind} / {parent.ref.name}
-                      <ExternalLink className="h-3 w-3 opacity-0 group-hover:opacity-100" />
-                    </button>
-                  ) : (
-                    <span className="font-mono">{parent.ref.kind} / {parent.ref.name}</span>
-                  )}
-                </p>
-              ) : null}
-              <CausalContext issue={issue} onResourceClick={onResourceClick} />
-            </div>
+            <IssueRow
+              key={key}
+              issue={issue}
+              open={openId === key}
+              onToggle={() => setOpenId((cur) => (cur === key ? null : key))}
+              onResourceClick={onResourceClick}
+            />
           )
         })}
-      </div>
-    </Section>
+      </ol>
+    </section>
   )
 }
 
-/**
- * CausalContext — the compact, drawer-density rendering of an issue's
- * cross-subject causal links (DiagnosticContext). Shows only the linking facts
- * (those carrying a confidence tier or related issues) — the queue's IssuesView
- * renders the fuller context with clickable resource navigation; here the related
- * resources are shown as plain identifiers to keep the resource panel scannable.
- */
-function CausalContext({ issue, onResourceClick }: { issue: Issue; onResourceClick?: (ref: IssueResourceRef) => void }) {
-  const ctx = issue.diagnostic_context
-  const links = ctx?.facts?.filter((f) => f.confidence || (f.related_issues && f.related_issues.length > 0)) ?? []
-  if (!ctx || links.length === 0) return null
-  return (
-    <div className="mt-2 border-t border-theme-border/60 pt-2">
-      <div className="mb-1 flex items-center gap-2">
-        <span className="text-[10px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Context</span>
-      </div>
-      <ul className="space-y-1.5">
-        {links.map((fact, idx) => (
-          <li key={`${fact.type}-${idx}`} className="text-xs">
-            <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
-              <span className="font-medium text-theme-text-secondary">{diagnosticFactLabel(fact.type)}</span>
-              {fact.confidence ? (
-                <span className="badge-sm text-[10px] text-theme-text-tertiary" title={confidenceTitle(fact.confidence)}>
-                  {fact.confidence} confidence
-                </span>
-              ) : null}
-              {fact.message ? <span className="text-theme-text-tertiary">{fact.message}</span> : null}
-            </div>
-            {fact.related_issues && fact.related_issues.length > 0 ? (
-              <ul className="mt-0.5 space-y-0.5 pl-3">
-                {fact.related_issues.map((rel, ri) => {
-                  const label = (
-                    <>
-                      <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary">{rel.ref.kind}</span>{' '}
-                      <span className="font-mono">
-                        {rel.ref.namespace ? `${rel.ref.namespace} / ` : ''}
-                        {rel.ref.name}
-                      </span>
-                      {rel.count && rel.count > 1 ? (
-                        <span className="ml-1 tabular-nums" title={`${rel.count} affected resources grouped under this issue`}>· {rel.count} affected</span>
-                      ) : null}
-                    </>
-                  )
-                  return (
-                    <li key={ri} className="text-theme-text-tertiary">
-                      {onResourceClick ? (
-                        <button
-                          type="button"
-                          onClick={() => onResourceClick(rel.ref)}
-                          className="group inline-flex items-center gap-1 text-left hover:text-theme-text-secondary"
-                        >
-                          {label}
-                          <ExternalLink className="h-3 w-3 opacity-0 group-hover:opacity-100" />
-                        </button>
-                      ) : (
-                        label
-                      )}
-                    </li>
-                  )
-                })}
-              </ul>
-            ) : null}
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
+function issueKey(issue: Issue): string {
+  return `${issue.cluster_id ?? ''}:${issue.id}`
 }

package/src/components/issues/index.ts

@@ -5,6 +5,8 @@
 export { IssueRow, IssuesView } from './IssuesView';
 export type { IssueRowProps, IssueRowSlotContext, IssuesViewProps } from './IssuesView';
 export { ResourceIssuesSection } from './ResourceIssuesSection';
+export { issueTiming } from './issue-timing';
+export type { IssueTimingDisplay, IssueTimingDisplayKind } from './issue-timing';
 export {
   ISSUE_SEVERITIES,
   ISSUE_SEVERITY_RANK,
@@ -17,6 +19,7 @@ export {
   ISSUE_SEVERITY_LABEL,
   ISSUE_SEVERITY_BADGE_CLASS,
   ISSUE_SEVERITY_TEXT_CLASS,
+  ISSUE_SEVERITY_FILL_CLASS,
   ISSUE_SEVERITY_RAIL_CLASS,
   categoryLabel,
   groupLabel,

package/src/components/issues/issue-timing.ts

@@ -0,0 +1,53 @@
+import { formatRelativeAgeTime } from '../../utils/format';
+import { isDeploymentLikeWorkloadKind } from '../../types';
+import type { Issue } from './types';
+
+export type IssueTimingDisplayKind = 'creation' | 'regression';
+
+export interface IssueTimingDisplay {
+  kind: IssueTimingDisplayKind;
+  chip: string;
+  meta: string;
+  tooltip: string;
+}
+
+function isDeploymentLikeCreation(issue: Issue): boolean {
+  const group = issue.group ?? '';
+  if (issue.kind === 'Pod') {
+    return issue.issue_timing_basis === 'pod_creation'
+      || issue.issue_timing_basis === 'owner_condition';
+  }
+  return isDeploymentLikeWorkloadKind(issue.kind, group);
+}
+
+export function issueTiming(issue: Issue): IssueTimingDisplay | null {
+  switch (issue.issue_timing) {
+    case 'started_after_resource_was_healthy': {
+      const started = issue.first_seen ? `started ${formatRelativeAgeTime(issue.first_seen)} after being healthy` : 'started after being healthy';
+      return {
+        kind: 'regression',
+        chip: 'after healthy',
+        meta: started,
+        tooltip: 'Previously healthy before this failing signal.',
+      };
+    }
+    case 'started_at_resource_creation': {
+      if (isDeploymentLikeCreation(issue)) {
+        return {
+          kind: 'creation',
+          chip: 'since deploy',
+          meta: 'present since deployment or first reconciliation',
+          tooltip: 'Failing signal began during deployment or first reconciliation.',
+        };
+      }
+      return {
+        kind: 'creation',
+        chip: 'since creation',
+        meta: 'present since creation or first reconciliation',
+        tooltip: 'Failing signal began during resource creation or first reconciliation.',
+      };
+    }
+    default:
+      return null;
+  }
+}