@skyhook-io/k8s-ui 1.7.7 → 1.7.8

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);
+}

package/src/components/issues/types.ts

@@ -0,0 +1,194 @@
+// Shared Issues identity contract + data shapes for the live-issues queue.
+//
+// k8s-ui owns these because the Issues queue presentation (IssuesView) is
+// host-agnostic: Radar Hub feeds it fleet-resolved grouped issues, and OSS
+// Radar feeds a single-cluster ("fleet of one") set. Hosts map their wire
+// payloads onto these types; the component renders against them.
+//
+// Mirrors the grouped Issue model radar emits (internal/issues.GroupIssues →
+// /api/issues, and the hub's /api/fleet/issues). IssueResourceRef intentionally
+// matches the Checks queue's contract (components/checks/types.ts) and
+// radar/pkg/audit.ResourceKey — so Issues and Checks share deep-links rather
+// than forking a second convention.
+
+/** Operational severity for live issues — distinct from the Checks 4-tier
+ *  posture ladder on purpose (operational urgency vs compliance risk are
+ *  separate axes). Matches radar's issues.Severity. */
+export type IssueSeverity = 'critical' | 'warning';
+
+/** Ordered worst→least. */
+export const ISSUE_SEVERITIES: IssueSeverity[] = ['critical', 'warning'];
+
+export const ISSUE_SEVERITY_RANK: Record<IssueSeverity, number> = {
+  critical: 2,
+  warning: 1,
+};
+
+export function isIssueSeverity(s: string): s is IssueSeverity {
+  return s === 'critical' || s === 'warning';
+}
+
+/**
+ * Canonical resource identity. `group` is '' for the core API group;
+ * `namespace` is '' for cluster-scoped resources. `cluster_id` scopes the ref
+ * to its source cluster (the hub injects it; single-cluster OSS leaves it
+ * undefined). Same shape as Checks' CheckResourceRef so deep-link plumbing is
+ * shared.
+ */
+export interface IssueResourceRef {
+  cluster_id?: string;
+  // group/namespace are optional to match the Go wire (omitempty): a
+  // cluster-scoped or core-group member (Node, a core/v1 object) arrives
+  // without them. Consumers default to '' (subjectRef/memberRef do this).
+  group?: string;
+  kind: string;
+  namespace?: string;
+  name: string;
+}
+
+/** Rollup of the underlying resources folded into a grouped issue, by kind
+ *  bucket. Empty for single-resource issues (no fan-out). Mirrors the Go
+ *  issues.Affected struct. */
+export interface IssueAffected {
+  pods?: number;
+  workloads?: number;
+  services?: number;
+  pvcs?: number;
+  nodes?: number;
+}
+
+/**
+ * A grouped live issue — one row of the triage queue. Subject (kind/group/
+ * namespace/name) is the topmost owner when the rows folded under a workload,
+ * else the resource itself; `members` are the folded underlying resources
+ * (the fan-out), bounded inline with `members_truncated`. Mirrors the Go
+ * issues.Issue after GroupIssues.
+ */
+export interface Issue {
+  id: string;
+  severity: IssueSeverity;
+  /** Detection channel (problem|missing_ref|scheduling|condition) — an output
+   *  label, not the triage axis. */
+  source: string;
+  /** Symptom taxonomy (image_pull_failed, crashloop, …) — the triage axis. */
+  category: string;
+  /** Coarse rollup of category (startup|runtime|networking|…). Server-emitted
+   *  so the UI never needs its own category→group map. */
+  category_group: string;
+  /** Subject kind bucket (workload|service|pvc|ingress|node|unknown). */
+  grouping_scope: string;
+
+  // Subject identity (the grouped thing). group is omitted for the core API
+  // group, namespace for cluster-scoped subjects — both optional to match the
+  // wire (radar emits them omitempty).
+  cluster_id?: string;
+  cluster_name?: string;
+  group?: string;
+  kind: string;
+  namespace?: string;
+  name: string;
+
+  reason: string;
+  message?: string;
+  first_seen?: string;
+  last_seen?: string;
+  /** Affected-resource fan-out, EXCLUDING the subject (the row header).
+   *  0/omitted for a single-resource issue; e.g. 50 for one Deployment's
+   *  50 crashlooping pods. Exposed to API/MCP/CEL consumers, not just here. */
+  count?: number;
+
+  affected?: IssueAffected;
+  members?: IssueResourceRef[];
+  members_truncated?: boolean;
+
+  // Pod crash context carried from the representative member.
+  restart_count?: number;
+  last_terminated_reason?: string;
+}
+
+/** subjectRef builds a deep-linkable ref for an issue's subject — the row's
+ *  cluster_id threaded onto its group/kind/namespace/name. */
+export function subjectRef(issue: Issue): IssueResourceRef {
+  return {
+    cluster_id: issue.cluster_id,
+    group: issue.group ?? '',
+    kind: issue.kind,
+    namespace: issue.namespace ?? '',
+    name: issue.name,
+  };
+}
+
+/** memberRef threads the issue's cluster_id onto a member ref (members carry
+ *  no cluster_id of their own — every member shares the issue's cluster). */
+export function memberRef(issue: Issue, member: IssueResourceRef): IssueResourceRef {
+  // Normalize the same wire-omitted optionals subjectRef does: Go's Ref.Group /
+  // Ref.Namespace are omitempty, so core-API members (Pods) arrive with group /
+  // namespace undefined — left raw they'd interpolate "undefined" into host
+  // deep-links / React keys and break callbacks that assume a string.
+  return {
+    ...member,
+    group: member.group ?? '',
+    namespace: member.namespace ?? '',
+    cluster_id: issue.cluster_id,
+  };
+}
+
+/**
+ * compareIssues is the queue's stable sort order (extracted from IssuesView so
+ * it can be unit-tested). Severity first (critical before warning), then ONSET
+ * — first_seen DESC, deliberately NOT last_seen: last_seen bumps to compose-time
+ * on every poll, so sorting by it would reshuffle same-severity rows on each
+ * refetch. The remaining keys (cluster → namespace → name → id) are a fully
+ * deterministic tiebreak so the order never churns under auto-refresh.
+ */
+export function compareIssues(a: Issue, b: Issue): number {
+  const r = ISSUE_SEVERITY_RANK[b.severity] - ISSUE_SEVERITY_RANK[a.severity];
+  if (r !== 0) return r;
+  const fa = a.first_seen ?? '';
+  const fb = b.first_seen ?? '';
+  if (fa !== fb) return fb.localeCompare(fa);
+  const c = (a.cluster_name ?? '').localeCompare(b.cluster_name ?? '');
+  if (c !== 0) return c;
+  const ns = (a.namespace ?? '').localeCompare(b.namespace ?? '');
+  if (ns !== 0) return ns;
+  const nm = a.name.localeCompare(b.name);
+  if (nm !== 0) return nm;
+  return a.id.localeCompare(b.id);
+}
+
+/**
+ * normalizeImagePullMessage turns a raw containerd/CRI image-pull error — which
+ * is verbose and re-quotes the image ref at every wrapped layer ("Back-off
+ * pulling image X: ErrImagePull: rpc error: code = NotFound desc = failed to
+ * pull and unpack image X: failed to resolve reference X: X: not found") — into
+ * a short headline: cause + the image ref once. Returns null for shapes it
+ * doesn't recognize, so the caller falls back to the raw string.
+ */
+export function normalizeImagePullMessage(raw: string): string | null {
+  if (!raw) return null;
+  const ref = raw.match(/image "([^"]+)"/)?.[1];
+  const lower = raw.toLowerCase();
+  let cause: string | null = null;
+  if (/not\s*found|manifest\s*unknown|no such (image|manifest)/.test(lower)) cause = 'Image not found';
+  else if (/unauthorized|forbidden|denied|\b401\b|\b403\b|authentication required/.test(lower)) cause = 'Not authorized to pull image';
+  else if (/no such host|i\/o timeout|\btimeout\b|connection refused|dial tcp/.test(lower)) cause = 'Registry unreachable';
+  else if (/toomanyrequests|too many requests|rate limit/.test(lower)) cause = 'Registry rate-limited';
+  if (!cause) return null;
+  return ref ? `${cause}: ${ref}` : cause;
+}
+
+/**
+ * issueMessageParts splits an issue's message into the inline headline and the
+ * raw secondary detail. For image-pull issues the headline is a normalized
+ * one-liner and detail holds the original CRI string; for every other issue the
+ * headline IS the (already concise) message and detail is empty — no
+ * duplication. Gated on image-pull so a generic "not found" in, say, a
+ * missing_config_ref message ('secret "x" not found') is never mislabeled.
+ */
+export function issueMessageParts(issue: Issue): { headline: string; detail: string } {
+  const raw = issue.message ?? '';
+  const isImagePull = issue.category === 'image_pull_failed' || /ImagePull|ErrImage|InvalidImageName|ImageInspect/i.test(issue.reason ?? '');
+  const normalized = isImagePull ? normalizeImagePullMessage(raw) : null;
+  if (normalized && normalized !== raw) return { headline: normalized, detail: raw };
+  return { headline: raw, detail: '' };
+}

package/src/components/resources/ResourcesView.tsx

@@ -256,7 +256,7 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
   pods: [
     { key: 'name', label: 'Name' },
     { key: 'namespace', label: 'Namespace', width: 'w-48' },
-    { key: 'containers', label: 'Containers', width: 'w-32' },
+    { key: 'containers', label: 'Containers', width: 'w-32', tooltip: 'Container readiness; hover each square for name and state' },
     { key: 'status', label: 'Status', width: 'w-40' },
     { key: 'cpu', label: 'CPU', width: 'w-40', tooltip: 'CPU usage / limit (marker = request)' },
     { key: 'memory', label: 'Memory', width: 'w-40', tooltip: 'Memory usage / limit (marker = request)' },
@@ -3996,23 +3996,6 @@ export function ResourcesView({
                   <X className="w-3.5 h-3.5" />
                 </button>
               )}
-              {/*
-                The sidebar's count badge shows the cluster-wide
-                total for the selected kind (from resourceCounts) and
-                deliberately stays unfiltered. When a search yields
-                zero results the user can think the badge is lying.
-                Spell out that the badge is the cluster total, not
-                the filtered count.
-              */}
-              {searchTerm && (() => {
-                const totalForKind = counts[selectedKind.group ? `${selectedKind.group}/${selectedKind.kind}` : selectedKind.kind] ?? 0
-                if (totalForKind === 0) return null
-                return (
-                  <p className="text-xs mt-1 text-theme-text-disabled">
-                    The sidebar shows {pluralize(totalForKind, selectedKind.kind)} in the cluster — the count is unfiltered.
-                  </p>
-                )
-              })()}
               {namespaces.length > 0 && <p className="text-sm mt-1 text-theme-text-disabled">Searching in {namespaces.length === 1 ? `namespace: ${namespaces[0]}` : `${namespaces.length} namespaces`}</p>}
               {/* Show active filters as dismissible badges so user can clear them */}
               {(() => {
@@ -4933,7 +4916,7 @@ function PodCell({ resource, column }: { resource: any; column: string }) {
       const squares = getContainerSquareStates(resource)
       const hasInit = squares.some(s => s.isInit)
       return (
-        <div className="flex items-center gap-1">
+        <div className="flex w-full items-center justify-center gap-1">
           {squares.map((sq, i) => {
             const showSeparator = hasInit && i > 0 && sq.isInit !== squares[i - 1].isInit
             const bgClass =

package/src/components/resources/renderers/CAPIKubeadmControlPlaneRenderer.tsx

@@ -115,7 +115,7 @@ export function CAPIKubeadmControlPlaneRenderer({ data, onNavigate }: Props) {
 
       {/* Owned Machines hint */}
       <div className="px-3 py-1.5 text-xs text-theme-text-tertiary">
-        Machines with label <code className="bg-theme-surface px-1 py-0.5 rounded text-[10px] font-mono select-all">cluster.x-k8s.io/control-plane-name={data.metadata?.name}</code>
+        Machines with label <code className="inline-code text-[10px] select-all">cluster.x-k8s.io/control-plane-name={data.metadata?.name}</code>
       </div>
 
       <ConditionsSection conditions={conditions} />

package/src/components/resources/renderers/CAPIMachineDeploymentRenderer.tsx

@@ -119,7 +119,7 @@ export function CAPIMachineDeploymentRenderer({ data, onNavigate }: Props) {
 
       {/* Owned Machines hint */}
       <div className="px-3 py-1.5 text-xs text-theme-text-tertiary">
-        Machines with label <code className="bg-theme-surface px-1 py-0.5 rounded text-[10px] font-mono select-all">cluster.x-k8s.io/deployment-name={data.metadata?.name}</code>
+        Machines with label <code className="inline-code text-[10px] select-all">cluster.x-k8s.io/deployment-name={data.metadata?.name}</code>
       </div>
 
       <ConditionsSection conditions={conditions} />

package/src/components/resources/renderers/CAPIMachineSetRenderer.tsx

@@ -92,7 +92,7 @@ export function CAPIMachineSetRenderer({ data, onNavigate }: Props) {
 
       {/* Owned Machines hint */}
       <div className="px-3 py-1.5 text-xs text-theme-text-tertiary">
-        Machines with label <code className="bg-theme-surface px-1 py-0.5 rounded text-[10px] font-mono select-all">cluster.x-k8s.io/set-name={data.metadata?.name}</code>
+        Machines with label <code className="inline-code text-[10px] select-all">cluster.x-k8s.io/set-name={data.metadata?.name}</code>
       </div>
 
       <ConditionsSection conditions={conditions} />

package/src/components/resources/renderers/CNPGPoolerRenderer.tsx

@@ -50,7 +50,7 @@ export function CNPGPoolerRenderer({ data, onNavigate }: CNPGPoolerRendererProps
           <PropertyList>
             {authQuery && (
               <Property label="Auth Query" value={
-                <code className="text-xs font-mono bg-theme-elevated px-1.5 py-0.5 rounded break-all">{authQuery}</code>
+                <code className="inline-code text-xs break-all">{authQuery}</code>
               } />
             )}
             {authQuerySecret && (

package/src/components/resources/renderers/CompositionRenderer.tsx

@@ -57,13 +57,13 @@ function CompositionBody({ data, onNavigate, revision }: CompositionRendererProp
           {xrdKind && (
             <Property
               label="Composite Kind"
-              value={<span className="font-mono text-theme-text-secondary">{xrdKind}</span>}
+              value={<span className="inline-code">{xrdKind}</span>}
             />
           )}
           {compositeTypeRef.apiVersion && (
             <Property
               label="API Version"
-              value={<span className="font-mono text-theme-text-tertiary text-xs">{compositeTypeRef.apiVersion}</span>}
+              value={<span className="inline-code text-xs">{compositeTypeRef.apiVersion}</span>}
             />
           )}
           {writeConnNs && <Property label="Connection Secret Namespace" value={writeConnNs} />}
@@ -149,7 +149,7 @@ function CompositionBody({ data, onNavigate, revision }: CompositionRendererProp
               return (
                 <div key={i} className="card-inner text-sm flex items-center gap-2 flex-wrap">
                   <span className="badge-sm status-neutral">{baseKind || 'Unknown'}</span>
-                  <span className="font-mono text-theme-text-secondary break-all">{res.name || `resource-${i}`}</span>
+                  <span className="inline-code break-all">{res.name || `resource-${i}`}</span>
                   {baseApiVersion && (
                     <span className="text-theme-text-tertiary text-xs">{baseApiVersion}</span>
                   )}

package/src/components/resources/renderers/CrossplanePackageRenderer.tsx

@@ -54,7 +54,7 @@ export function CrossplanePackageRenderer({ data, kindLabel, onNavigate }: Cross
 
       <Section title={kindLabel} icon={Package} defaultExpanded>
         <PropertyList>
-          <Property label="Package" value={<span className="font-mono break-all">{pkg}</span>} />
+          <Property label="Package" value={<span className="inline-code break-all">{pkg}</span>} />
           {pullPolicy && <Property label="Pull Policy" value={pullPolicy} />}
           {data?.spec?.revisionActivationPolicy && (
             <Property label="Revision Activation" value={data.spec.revisionActivationPolicy} />
@@ -73,12 +73,12 @@ export function CrossplanePackageRenderer({ data, kindLabel, onNavigate }: Cross
         <Section title="Revision" icon={ScrollText} defaultExpanded>
           <PropertyList>
             {currentRevision && (
-              <Property label="Current Revision" value={<span className="font-mono break-all">{currentRevision}</span>} />
+              <Property label="Current Revision" value={<span className="inline-code break-all">{currentRevision}</span>} />
             )}
             {data?.status?.currentIdentifier && (
               <Property
                 label="Current Identifier"
-                value={<span className="font-mono break-all">{data.status.currentIdentifier}</span>}
+                value={<span className="inline-code break-all">{data.status.currentIdentifier}</span>}
               />
             )}
           </PropertyList>
@@ -112,7 +112,7 @@ export function CrossplanePackageRenderer({ data, kindLabel, onNavigate }: Cross
               return (
                 <div key={i} className="card-inner text-sm flex items-center gap-2 flex-wrap">
                   <span className="badge-sm status-neutral">{depKind}</span>
-                  <span className="font-mono text-theme-text-secondary break-all">{ref || '-'}</span>
+                  <span className="inline-code break-all">{ref || '-'}</span>
                   {dep.version && (
                     <span className="text-theme-text-tertiary text-xs">version: {dep.version}</span>
                   )}
@@ -129,7 +129,7 @@ export function CrossplanePackageRenderer({ data, kindLabel, onNavigate }: Cross
             {objectRefs.map((ref: any, i: number) => (
               <div key={i} className="card-inner text-sm flex items-center gap-2 flex-wrap">
                 <span className="badge-sm status-neutral">{ref.kind || 'Unknown'}</span>
-                <span className="font-mono text-theme-text-secondary break-all">{ref.name}</span>
+                <span className="inline-code break-all">{ref.name}</span>
                 {ref.apiVersion && (
                   <span className="text-theme-text-tertiary text-xs">{ref.apiVersion}</span>
                 )}

package/src/components/resources/renderers/CrossplaneProviderConfigRenderer.tsx

@@ -56,7 +56,7 @@ export function CrossplaneProviderConfigRenderer({ data, onNavigate }: Crossplan
               }
             />
             {secretRef.namespace && <Property label="Namespace" value={secretRef.namespace} />}
-            {secretRef.key && <Property label="Key" value={<span className="font-mono">{secretRef.key}</span>} />}
+            {secretRef.key && <Property label="Key" value={<span className="inline-code">{secretRef.key}</span>} />}
           </PropertyList>
         </Section>
       )}

package/src/components/resources/renderers/KnativeSourceRenderer.tsx

@@ -58,7 +58,7 @@ export function PingSourceRenderer({ data, onNavigate }: RendererProps) {
           <Property label="Timezone" value={spec.timezone} />
           <Property label="Content Type" value={spec.contentType} />
           <Property label="Data" value={spec.data ? (
-            <span className="font-mono text-xs break-all">{spec.data.length > 200 ? spec.data.slice(0, 200) + '...' : spec.data}</span>
+            <span className="inline-code text-xs break-all">{spec.data.length > 200 ? spec.data.slice(0, 200) + '...' : spec.data}</span>
           ) : undefined} />
           <SinkProperty sink={spec.sink} ns={ns} onNavigate={onNavigate} />
         </PropertyList>