@skyhook-io/k8s-ui 1.7.6 → 1.7.8

package/src/components/issues/IssuesView.tsx

@@ -0,0 +1,352 @@
+import { useMemo, useState, type ReactNode } from 'react';
+import { ChevronRight, CircleCheck, Clock, ExternalLink } from 'lucide-react';
+import { ClusterName, EmptyState } from '../ui';
+import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format';
+import {
+  ISSUE_SEVERITY_BADGE_CLASS,
+  ISSUE_SEVERITY_LABEL,
+  ISSUE_SEVERITY_RAIL_CLASS,
+  categoryLabel,
+  groupBadgeClass,
+  groupLabel,
+} from './severity';
+import {
+  compareIssues,
+  issueMessageParts,
+  memberRef,
+  subjectRef,
+  type Issue,
+  type IssueAffected,
+  type IssueResourceRef,
+} from './types';
+
+export interface IssuesViewProps {
+  /** Grouped live issues — one row per subject+category. Typically flattened
+   *  across the fleet by the host (the hub) or a single cluster (OSS). */
+  issues: Issue[];
+  /** True when at least one source returned issue data — distinguishes "clean"
+   *  from "nothing connected / everything errored". */
+  anyData: boolean;
+  /** Resolve a deep-link href for a resource (host-specific routing). Omit to
+   *  render non-link text. */
+  resourceHref?: (ref: IssueResourceRef) => string;
+  /** In-app resource navigation. When set, resource lines call this (no reload)
+   *  instead of following resourceHref — OSS opens its own drawer this way.
+   *  Takes precedence over resourceHref. */
+  onResourceClick?: (ref: IssueResourceRef) => void;
+  /** Display label for an issue's source cluster. Omit (or return falsy) to
+   *  hide the cluster line — e.g. single-cluster OSS. */
+  clusterLabel?: (issue: Issue) => string | undefined;
+  /** Empty-state CTA shown when there's no data. */
+  emptyAction?: 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) {
+  // 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);
+
+  // Stable order keyed on severity → onset → identity (see compareIssues), so
+  // the queue doesn't reshuffle under the host's auto-refresh.
+  const sorted = useMemo(() => [...issues].sort(compareIssues), [issues]);
+
+  if (sorted.length === 0) {
+    return anyData ? (
+      <EmptyState
+        tone="healthy"
+        variant="card"
+        icon={CircleCheck}
+        headline="Nothing broken right now"
+        body="No active issues across the selected scope."
+      />
+    ) : (
+      <EmptyState headline="No issue data yet" body="Connect a cluster to populate the issue queue." action={emptyAction} />
+    );
+  }
+
+  return (
+    <ol className="flex flex-col gap-1.5">
+      {sorted.map((issue) => {
+        // Stable identity for the React key + open-accordion state, so a row
+        // survives auto-refresh in place. cluster_id scopes the id across the
+        // fleet (the hub renders issues from many clusters in one list).
+        const rowKey = `${issue.cluster_id ?? ''}:${issue.id}`;
+        return (
+          <IssueRow
+            key={rowKey}
+            issue={issue}
+            clusterLabel={clusterLabel}
+            open={openId === rowKey}
+            onToggle={() => setOpenId((cur) => (cur === rowKey ? null : rowKey))}
+            resourceHref={resourceHref}
+            onResourceClick={onResourceClick}
+          />
+        );
+      })}
+    </ol>
+  );
+}
+
+function IssueRow({
+  issue,
+  clusterLabel,
+  open,
+  onToggle,
+  resourceHref,
+  onResourceClick,
+}: {
+  issue: Issue;
+  clusterLabel?: (issue: Issue) => string | undefined;
+  open: boolean;
+  onToggle: () => void;
+  resourceHref?: (ref: IssueResourceRef) => string;
+  onResourceClick?: (ref: IssueResourceRef) => void;
+}) {
+  const cluster = clusterLabel?.(issue);
+  const affected = affectedSummary(issue.affected);
+  const { headline } = issueMessageParts(issue);
+
+  return (
+    <li className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm">
+      {/* The whole header is the single toggle target — chevron is just the
+          open/closed indicator, not a separate action. Deep-links live in the
+          expanded body (a link nested in a button would be invalid). */}
+      <div
+        role="button"
+        tabIndex={0}
+        aria-expanded={open}
+        onClick={onToggle}
+        onKeyDown={(e) => {
+          if (e.target !== e.currentTarget) return;
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onToggle();
+          }
+        }}
+        className={`group flex cursor-pointer items-center gap-3 border-l-2 py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40 ${ISSUE_SEVERITY_RAIL_CLASS[issue.severity]}`}
+      >
+        <ChevronRight className={`h-4 w-4 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
+
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <div className="flex min-w-0 items-baseline gap-2">
+            <span className="shrink-0 text-sm font-medium text-theme-text-primary">{categoryLabel(issue.category)}</span>
+            <span className={`badge-sm shrink-0 self-center text-[10px] ${groupBadgeClass(issue.category_group)}`}>{groupLabel(issue.category_group)}</span>
+            {/* The detector reason/message rides the title row so the most
+                useful triage signal is visible without expanding — it fills
+                the otherwise-empty band between the title and the severity
+                badge. Full text (plus crash context) stays in the body. */}
+            {issue.reason ? (
+              <span className="min-w-0 flex-1 truncate text-xs text-theme-text-tertiary">
+                <span className="font-medium text-theme-text-secondary">{issue.reason}</span>
+                {headline ? <span> — {headline}</span> : null}
+              </span>
+            ) : null}
+          </div>
+          <div className="flex min-w-0 items-center gap-1.5 text-xs text-theme-text-tertiary">
+            <span className="shrink-0 font-mono uppercase tracking-wide">{issue.kind}</span>
+            <span className="min-w-0 truncate font-medium text-theme-text-secondary">
+              {issue.namespace ? `${issue.namespace} / ` : ''}
+              {issue.name}
+            </span>
+            {cluster ? (
+              <>
+                <span aria-hidden>·</span>
+                <span className="max-w-[160px] shrink-0 truncate">
+                  <ClusterName name={cluster} />
+                </span>
+              </>
+            ) : null}
+            {affected ? (
+              <>
+                <span aria-hidden>·</span>
+                <span className="shrink-0 tabular-nums">{affected}</span>
+              </>
+            ) : null}
+          </div>
+        </div>
+
+        {/* Onset age (first_seen, fixed for the issue's life) is the chronic-vs-
+            acute signal — "broken 2m" reads very differently from "broken 5d".
+            Keyed on first_seen, not last_seen, so it doesn't churn on refresh. */}
+        {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)}
+          </time>
+        ) : null}
+
+        <span className={`badge-sm shrink-0 text-[10px] font-semibold ${ISSUE_SEVERITY_BADGE_CLASS[issue.severity]}`}>
+          {ISSUE_SEVERITY_LABEL[issue.severity]}
+        </span>
+      </div>
+
+      <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: open ? '1fr' : '0fr' }}>
+        {/* Kept mounted (not `open &&`) so the grid-rows transition animates the
+            collapse too; inert when closed so SR + tab skip the clipped content. */}
+        <div className="overflow-hidden" inert={!open || undefined}>
+          <div className="border-t border-theme-border bg-theme-base/40 px-4 py-4 pl-11">
+            <div className="flex flex-col gap-4">
+              <Diagnosis issue={issue} />
+              <div className="border-t border-theme-border/70 pt-3">
+                <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  );
+}
+
+// What's-wrong block: the specific detector reason + message, plus pod crash
+// context when present (the "chronic vs acute" signal).
+function Diagnosis({ issue }: { issue: Issue }) {
+  const crash =
+    issue.restart_count || issue.last_terminated_reason
+      ? [issue.restart_count ? `${issue.restart_count} restart${issue.restart_count === 1 ? '' : 's'}` : null, issue.last_terminated_reason ? `last exit: ${issue.last_terminated_reason}` : null]
+          .filter(Boolean)
+          .join(' · ')
+      : null;
+  const { headline, detail } = issueMessageParts(issue);
+  return (
+    <section className="flex flex-col gap-1">
+      <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">What's wrong</h4>
+      <p className="text-sm leading-relaxed text-theme-text-primary">
+        <span className="font-medium">{issue.reason}</span>
+        {headline ? <span className="text-theme-text-secondary"> — {headline}</span> : null}
+      </p>
+      {/* Raw source string kept as secondary detail only when we showed a
+          normalized headline above (e.g. the verbose containerd image-pull
+          error) — so the precise message is never lost, just de-emphasized. */}
+      {detail ? <p className="break-words font-mono text-xs leading-relaxed text-theme-text-tertiary">{detail}</p> : null}
+      {crash ? <p className="text-xs text-theme-text-tertiary tabular-nums">{crash}</p> : null}
+      {issue.first_seen ? (
+        <p className="text-xs text-theme-text-tertiary tabular-nums">
+          Started {formatRelativeAgeTime(issue.first_seen)}
+          {issue.last_seen ? ` · last seen ${formatRelativeAgeTime(issue.last_seen)}` : ''}
+        </p>
+      ) : null}
+    </section>
+  );
+}
+
+// Native-tooltip detail for the collapsed-row age chip: absolute onset + last-seen
+// freshness, the two facts the compact "2h" hides.
+function ageTitle(issue: Issue): string {
+  const parts: string[] = [];
+  if (issue.first_seen) parts.push(`Started ${new Date(issue.first_seen).toLocaleString()}`);
+  if (issue.last_seen) parts.push(`Last seen ${formatRelativeAgeTime(issue.last_seen)}`);
+  return parts.join('\n');
+}
+
+function AffectedResources({
+  issue,
+  resourceHref,
+  onResourceClick,
+}: {
+  issue: Issue;
+  resourceHref?: (ref: IssueResourceRef) => string;
+  onResourceClick?: (ref: IssueResourceRef) => void;
+}) {
+  const members = issue.members ?? [];
+  // count is the backend fan-out size (members, subject excluded — see
+  // grouping.go); fall back to the inline member count, not +1.
+  const total = issue.count ?? members.length;
+  return (
+    <section className="flex flex-col gap-1.5">
+      {/* The subject (the grouped thing — e.g. the Deployment) is always the
+          first deep-link; members (the folded pods) follow. ResourceLine emits
+          an <li>, so it needs a list parent of its own. */}
+      <ul className="flex flex-col gap-px">
+        <ResourceLine label="Subject" refForLink={subjectRef(issue)} resourceHref={resourceHref} onResourceClick={onResourceClick} />
+      </ul>
+      {members.length > 0 && (
+        <>
+          <h4 className="mt-1.5 text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">
+            Affected resources <span className="tabular-nums">({total})</span>
+          </h4>
+          <ul className="flex flex-col gap-px">
+            {members.map((m, i) => (
+              <ResourceLine
+                key={`${m.group}/${m.kind}/${m.namespace}/${m.name}#${i}`}
+                refForLink={memberRef(issue, m)}
+                resourceHref={resourceHref}
+                onResourceClick={onResourceClick}
+              />
+            ))}
+          </ul>
+          {issue.members_truncated && (
+            <p className="mt-0.5 text-xs text-theme-text-tertiary">
+              Showing {members.length} of {total} — open the subject to see the rest.
+            </p>
+          )}
+        </>
+      )}
+    </section>
+  );
+}
+
+function ResourceLine({
+  label,
+  refForLink,
+  resourceHref,
+  onResourceClick,
+}: {
+  label?: string;
+  refForLink: IssueResourceRef;
+  resourceHref?: (ref: IssueResourceRef) => string;
+  onResourceClick?: (ref: IssueResourceRef) => void;
+}) {
+  const r = refForLink;
+  const linkable = !!(onResourceClick || resourceHref);
+  const body = (
+    <>
+      {label ? <span className="shrink-0 text-[10px] font-semibold uppercase tracking-wide text-theme-text-tertiary">{label}</span> : null}
+      <span className="shrink-0 font-mono text-[11px] uppercase tracking-wide text-theme-text-tertiary">{r.kind}</span>
+      <span className={`min-w-0 truncate font-medium ${linkable ? 'text-[var(--color-radar-accent)]' : 'text-theme-text-primary'}`}>
+        {r.namespace ? `${r.namespace} / ` : ''}
+        {r.name}
+      </span>
+      {linkable && <ExternalLink className="h-3 w-3 shrink-0 text-theme-text-tertiary opacity-0 transition-opacity group-hover/r:opacity-100" />}
+    </>
+  );
+  const cls = 'group/r flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-sm transition-colors hover:bg-theme-hover/60';
+  return (
+    <li>
+      {onResourceClick ? (
+        <button type="button" onClick={() => onResourceClick(r)} className={cls}>
+          {body}
+        </button>
+      ) : resourceHref ? (
+        <a href={resourceHref(r)} className={cls}>
+          {body}
+        </a>
+      ) : (
+        <span className="flex items-center gap-2 rounded-md px-2 py-1 text-sm">{body}</span>
+      )}
+    </li>
+  );
+}
+
+// "3 pods · 1 service" from the affected rollup; null when there's no fan-out
+// (single-resource issue — the subject line already says everything).
+function affectedSummary(a?: IssueAffected): string | null {
+  if (!a) return null;
+  const parts: string[] = [];
+  const add = (n: number | undefined, singular: string, plural: string) => {
+    if (n && n > 0) parts.push(`${n} ${n === 1 ? singular : plural}`);
+  };
+  add(a.pods, 'pod', 'pods');
+  add(a.workloads, 'workload', 'workloads');
+  add(a.services, 'service', 'services');
+  add(a.pvcs, 'PVC', 'PVCs');
+  add(a.nodes, 'node', 'nodes');
+  return parts.length > 0 ? parts.join(' · ') : null;
+}

package/src/components/issues/index.ts

@@ -0,0 +1,24 @@
+// Explicit exports (not `export *`) so the generic identity helpers stay
+// module-internal and don't collide at the top-level barrel with the Checks
+// queue's identically-named helpers when both land. Issue-prefixed public
+// names are safe to surface.
+export { IssuesView } from './IssuesView';
+export type { IssuesViewProps } from './IssuesView';
+export {
+  ISSUE_SEVERITIES,
+  ISSUE_SEVERITY_RANK,
+  isIssueSeverity,
+  subjectRef,
+  memberRef,
+} from './types';
+export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef } from './types';
+export {
+  ISSUE_SEVERITY_LABEL,
+  ISSUE_SEVERITY_BADGE_CLASS,
+  ISSUE_SEVERITY_FILL_CLASS,
+  ISSUE_SEVERITY_TEXT_CLASS,
+  ISSUE_SEVERITY_RAIL_CLASS,
+  groupBadgeClass,
+  categoryLabel,
+  groupLabel,
+} from './severity';

package/src/components/issues/issues.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect } from 'vitest'
+import { compareIssues, subjectRef, memberRef, normalizeImagePullMessage, issueMessageParts, type Issue } from './types'
+import { categoryLabel, groupLabel, groupBadgeClass } from './severity'
+
+const base: Issue = {
+  id: 'id-0',
+  severity: 'warning',
+  source: 'problem',
+  category: 'crashloop',
+  category_group: 'runtime',
+  grouping_scope: 'workload',
+  kind: 'Deployment',
+  name: 'app',
+  reason: 'CrashLoopBackOff',
+}
+const mk = (o: Partial<Issue>): Issue => ({ ...base, ...o })
+
+describe('compareIssues', () => {
+  it('orders critical before warning regardless of onset', () => {
+    const warn = mk({ id: 'w', severity: 'warning', first_seen: '2026-05-01T00:00:00Z' }) // newer
+    const crit = mk({ id: 'c', severity: 'critical', first_seen: '2026-01-01T00:00:00Z' }) // older
+    expect([warn, crit].sort(compareIssues).map((i) => i.id)).toEqual(['c', 'w'])
+  })
+
+  it('breaks same-severity ties by first_seen DESC (newest onset first)', () => {
+    const older = mk({ id: 'o', first_seen: '2026-01-01T00:00:00Z' })
+    const newer = mk({ id: 'n', first_seen: '2026-05-01T00:00:00Z' })
+    expect([older, newer].sort(compareIssues).map((i) => i.id)).toEqual(['n', 'o'])
+  })
+
+  it('does NOT reshuffle same-severity rows when only last_seen changes (anti-churn)', () => {
+    // Two same-severity rows, same onset — order is the deterministic name tiebreak.
+    const a = mk({ id: 'id-a', name: 'a', first_seen: '2026-01-01T00:00:00Z', last_seen: '2026-05-01T00:00:00Z' })
+    const b = mk({ id: 'id-b', name: 'b', first_seen: '2026-01-01T00:00:00Z', last_seen: '2026-05-30T00:00:00Z' })
+    const before = [a, b].sort(compareIssues).map((i) => i.id)
+    expect(before).toEqual(['id-a', 'id-b'])
+    // A refetch bumps a's last_seen to "now". Sorting on last_seen would flip the
+    // order; keying on first_seen + identity must NOT — this is the whole point
+    // of the onset-based sort.
+    const aRefetched = mk({ ...a, last_seen: '2026-06-01T00:00:00Z' })
+    const after = [aRefetched, b].sort(compareIssues).map((i) => i.id)
+    expect(after).toEqual(before)
+  })
+})
+
+describe('category/group label fallbacks', () => {
+  it('returns the mapped label, else humanizes (server-added category needs no frontend deploy)', () => {
+    expect(categoryLabel('crashloop')).toBe('Crash loop')
+    expect(categoryLabel('some_new_future_category')).toBe('Some new future category')
+  })
+  it('humanizes an unmapped group', () => {
+    expect(groupLabel('runtime')).toBe('Runtime')
+    expect(groupLabel('some_future_group')).toBe('Some future group')
+  })
+  it('groupBadgeClass falls back to a non-empty neutral class for an unknown group', () => {
+    expect(groupBadgeClass('totally_unknown_group')).toBeTruthy()
+  })
+})
+
+describe('subjectRef / memberRef', () => {
+  it('subjectRef defaults empty group/namespace and threads cluster_id', () => {
+    const issue = mk({ cluster_id: 'cl_1', kind: 'Deployment', name: 'web' }) // no group/namespace
+    expect(subjectRef(issue)).toEqual({ cluster_id: 'cl_1', group: '', kind: 'Deployment', namespace: '', name: 'web' })
+  })
+  it('memberRef threads the issue cluster_id onto a member', () => {
+    const issue = mk({ cluster_id: 'cl_2' })
+    const member = { group: 'apps', kind: 'Pod', namespace: 'ns', name: 'p1' }
+    expect(memberRef(issue, member)).toEqual({ ...member, cluster_id: 'cl_2' })
+  })
+})
+
+describe('image-pull message normalization', () => {
+  const notFound =
+    'Back-off pulling image "reg.io/team/api:v2": ErrImagePull: rpc error: code = NotFound desc = failed to pull and unpack image "reg.io/team/api:v2": failed to resolve reference "reg.io/team/api:v2": "reg.io/team/api:v2": not found'
+
+  it('extracts cause + single image ref from the verbose CRI string', () => {
+    expect(normalizeImagePullMessage(notFound)).toBe('Image not found: reg.io/team/api:v2')
+  })
+  it('classifies the common failure modes', () => {
+    expect(normalizeImagePullMessage('pull access denied for image "x:1", repository does not exist or may require authorization')).toBe('Not authorized to pull image: x:1')
+    expect(normalizeImagePullMessage('failed to pull image "x:1": dial tcp: lookup reg.io: no such host')).toBe('Registry unreachable: x:1')
+    expect(normalizeImagePullMessage('toomanyrequests: rate limit exceeded for image "x:1"')).toBe('Registry rate-limited: x:1')
+  })
+  it('returns null for shapes it does not recognize (caller keeps raw)', () => {
+    expect(normalizeImagePullMessage('some novel kubelet error')).toBeNull()
+    expect(normalizeImagePullMessage('')).toBeNull()
+  })
+
+  it('issueMessageParts normalizes image-pull headline and keeps raw as detail', () => {
+    const parts = issueMessageParts(mk({ category: 'image_pull_failed', reason: 'ImagePullBackOff', message: notFound }))
+    expect(parts.headline).toBe('Image not found: reg.io/team/api:v2')
+    expect(parts.detail).toBe(notFound)
+  })
+  it('does NOT mislabel a non-image "not found" message (gating)', () => {
+    // missing_config_ref carries 'secret "x" not found' — must stay verbatim, no detail split.
+    const parts = issueMessageParts(mk({ category: 'missing_config_ref', reason: 'Missing Secret', message: 'secret "project-infra" not found' }))
+    expect(parts.headline).toBe('secret "project-infra" not found')
+    expect(parts.detail).toBe('')
+  })
+})

package/src/components/issues/severity.ts

@@ -0,0 +1,125 @@
+import type { IssueSeverity } from './types';
+
+// Visual language for the 2-tier Issues severity, deliberately reusing the
+// SAME class strings as the Checks queue (components/checks/severity.ts):
+// critical = red (= Checks `critical`), warning = amber (= Checks `medium`).
+// Issues and Checks are different severity axes, but the queues must read as
+// one product — sharing the exact hues makes the rails/pills pixel-identical.
+//
+// Class strings are literal so each consuming app's Tailwind @source scan emits
+// them.
+
+export const ISSUE_SEVERITY_LABEL: Record<IssueSeverity, string> = {
+  critical: 'Critical',
+  warning: 'Warning',
+};
+
+// Pill badge — the loud, explicit severity signal on a row.
+export const ISSUE_SEVERITY_BADGE_CLASS: Record<IssueSeverity, string> = {
+  critical: 'bg-red-50 text-red-700 ring-1 ring-red-200 dark:bg-red-950/50 dark:text-red-300 dark:ring-red-900',
+  warning: 'bg-amber-50 text-amber-700 ring-1 ring-amber-200 dark:bg-amber-950/50 dark:text-amber-300 dark:ring-amber-900',
+};
+
+// Solid fill — dots + the proportional distribution bar segments.
+export const ISSUE_SEVERITY_FILL_CLASS: Record<IssueSeverity, string> = {
+  critical: 'bg-red-500',
+  warning: 'bg-amber-500',
+};
+
+export const ISSUE_SEVERITY_TEXT_CLASS: Record<IssueSeverity, string> = {
+  critical: 'text-red-600 dark:text-red-400',
+  warning: 'text-amber-600 dark:text-amber-400',
+};
+
+// Left accent rail on a queue row — the scan-down severity cue.
+export const ISSUE_SEVERITY_RAIL_CLASS: Record<IssueSeverity, string> = {
+  critical: 'border-l-red-500 hover:bg-red-50/40 dark:hover:bg-red-950/20',
+  warning: 'border-l-amber-500 hover:bg-amber-50/30 dark:hover:bg-amber-950/15',
+};
+
+// Category-group accent — the quiet classification tag (severity is the loud
+// one). One hue per group; unknown/unmapped falls back to a neutral theme tag.
+const GROUP_BADGE_CLASS: Record<string, string> = {
+  scheduling: 'bg-violet-50 text-violet-700 ring-1 ring-violet-200 dark:bg-violet-950/40 dark:text-violet-300 dark:ring-violet-900',
+  startup: 'bg-sky-50 text-sky-700 ring-1 ring-sky-200 dark:bg-sky-950/40 dark:text-sky-300 dark:ring-sky-900',
+  runtime: 'bg-rose-50 text-rose-700 ring-1 ring-rose-200 dark:bg-rose-950/40 dark:text-rose-300 dark:ring-rose-900',
+  configuration: 'bg-teal-50 text-teal-700 ring-1 ring-teal-200 dark:bg-teal-950/40 dark:text-teal-300 dark:ring-teal-900',
+  networking: 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 dark:bg-indigo-950/40 dark:text-indigo-300 dark:ring-indigo-900',
+  storage: 'bg-cyan-50 text-cyan-700 ring-1 ring-cyan-200 dark:bg-cyan-950/40 dark:text-cyan-300 dark:ring-cyan-900',
+  scaling: 'bg-fuchsia-50 text-fuchsia-700 ring-1 ring-fuchsia-200 dark:bg-fuchsia-950/40 dark:text-fuchsia-300 dark:ring-fuchsia-900',
+  security: 'bg-amber-50 text-amber-700 ring-1 ring-amber-200 dark:bg-amber-950/40 dark:text-amber-300 dark:ring-amber-900',
+  control_plane: 'bg-slate-100 text-slate-600 ring-1 ring-slate-200 dark:bg-slate-800/60 dark:text-slate-300 dark:ring-slate-700',
+};
+
+export function groupBadgeClass(group: string): string {
+  return GROUP_BADGE_CLASS[group] ?? 'bg-theme-elevated text-theme-text-secondary ring-1 ring-theme-border';
+}
+
+// Display labels. The server emits raw snake_case category/group enums (so a
+// new category needs no frontend deploy to APPEAR); the UI humanizes for
+// display, falling back to title-cased snake_case for anything unmapped.
+const CATEGORY_LABEL: Record<string, string> = {
+  unschedulable: 'Unschedulable',
+  quota_exceeded: 'Quota exceeded',
+  admission_webhook_blocking: 'Admission blocked',
+  image_pull_failed: 'Image pull failed',
+  container_waiting: 'Container waiting',
+  init_container_failed: 'Init container failed',
+  crashloop: 'Crash loop',
+  oom_killed: 'OOM killed',
+  liveness_probe_failed: 'Liveness probe failing',
+  readiness_failed: 'Readiness failing',
+  workload_degraded: 'Workload degraded',
+  high_restart: 'High restart count',
+  missing_config_ref: 'Missing reference',
+  pdb_blocks_evictions: 'PDB blocks evictions',
+  service_no_endpoints: 'No endpoints',
+  ingress_backend_missing: 'Ingress backend missing',
+  dns_failure: 'DNS failure',
+  network_policy_block: 'Network policy block',
+  pvc_pending: 'PVC pending',
+  pvc_lost: 'PVC lost',
+  volume_mount_failed: 'Volume mount failed',
+  volume_access_mode_conflict: 'Volume access conflict',
+  job_failed: 'Job failed',
+  cronjob_failed: 'CronJob failed',
+  rollout_stalled: 'Rollout stalled',
+  hpa_limited_or_failed: 'HPA limited',
+  rbac_forbidden: 'RBAC forbidden',
+  certificate_not_ready: 'Certificate not ready',
+  pod_security_violation: 'Pod Security violation',
+  node_not_ready: 'Node not ready',
+  operator_condition_failed: 'Controller condition',
+  gitops_sync_failed: 'GitOps sync failed',
+  webhook_backend_down: 'Webhook backend down',
+  control_plane_not_ready: 'Control plane not ready',
+  machine_not_ready: 'Machine not ready',
+  unknown: 'Unknown',
+};
+
+const GROUP_LABEL: Record<string, string> = {
+  scheduling: 'Scheduling',
+  startup: 'Startup',
+  runtime: 'Runtime',
+  configuration: 'Configuration',
+  networking: 'Networking',
+  storage: 'Storage',
+  scaling: 'Scaling',
+  security: 'Security',
+  control_plane: 'Control plane',
+  unknown: 'Unknown',
+};
+
+function humanize(raw: string): string {
+  if (!raw) return '';
+  const spaced = raw.replace(/_/g, ' ');
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+
+export function categoryLabel(category: string): string {
+  return CATEGORY_LABEL[category] ?? humanize(category);
+}
+
+export function groupLabel(group: string): string {
+  return GROUP_LABEL[group] ?? humanize(group);
+}