@skyhook-io/k8s-ui 1.7.7 → 1.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.7.7",
+  "version": "1.7.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -31,6 +31,11 @@
       "./src/components/gitops/*.tsx",
       "./src/components/gitops/*.ts"
     ],
+    "./components/issues": "./src/components/issues/index.ts",
+    "./components/issues/*": [
+      "./src/components/issues/*.tsx",
+      "./src/components/issues/*.ts"
+    ],
     "./components/timeline/*": [
       "./src/components/timeline/*.tsx",
       "./src/components/timeline/*.ts"

package/src/components/charts/PrometheusChartsView.tsx

@@ -0,0 +1,233 @@
+import { clsx } from 'clsx'
+import { BarChart3, Wifi, WifiOff, Loader2 } from 'lucide-react'
+import { AreaChart } from './AreaChart'
+import { MetricsSummary } from './MetricsSummary'
+import { SeriesLegend } from './SeriesLegend'
+import type { TimeSeries, ReferenceLine } from './types'
+
+// Pure presentational Prometheus charts view, shared between radar's WorkloadView
+// and Radar Hub's Application metrics tab. It owns NO data fetching — the host
+// passes status, the selected category/range, the metrics result, and an
+// onConnect callback. radar/web injects its global-apiBase hooks; the hub injects
+// per-cluster tunnel fetches. Built on the AreaChart/MetricsSummary/SeriesLegend
+// primitives already in this package.
+
+export type PrometheusMetricCategory = 'cpu' | 'memory' | 'network_rx' | 'network_tx' | 'filesystem' | 'restarts'
+export type PrometheusTimeRange = '10m' | '30m' | '1h' | '3h' | '6h' | '12h' | '24h' | '48h' | '7d' | '14d'
+
+export interface MetricCategoryDef {
+  key: PrometheusMetricCategory
+  label: string
+  color: string // tailwind text class for the summary's current value
+  chartColor: string // hex for the SVG line
+  fillColor: string // hex + alpha for the SVG fill
+}
+
+export const WORKLOAD_METRIC_CATEGORIES: MetricCategoryDef[] = [
+  { key: 'cpu', label: 'CPU', color: 'text-blue-400', chartColor: '#60a5fa', fillColor: '#60a5fa22' },
+  { key: 'memory', label: 'Memory', color: 'text-purple-400', chartColor: '#c084fc', fillColor: '#c084fc22' },
+  { key: 'network_rx', label: 'Net RX', color: 'text-emerald-400', chartColor: '#34d399', fillColor: '#34d39922' },
+  { key: 'network_tx', label: 'Net TX', color: 'text-orange-400', chartColor: '#fb923c', fillColor: '#fb923c22' },
+  { key: 'filesystem', label: 'Disk I/O', color: 'text-amber-400', chartColor: '#fbbf24', fillColor: '#fbbf2422' },
+]
+
+export const NODE_METRIC_CATEGORIES: MetricCategoryDef[] = [
+  { key: 'cpu', label: 'CPU', color: 'text-blue-400', chartColor: '#60a5fa', fillColor: '#60a5fa22' },
+  { key: 'memory', label: 'Memory', color: 'text-purple-400', chartColor: '#c084fc', fillColor: '#c084fc22' },
+  { key: 'filesystem', label: 'Disk', color: 'text-amber-400', chartColor: '#fbbf24', fillColor: '#fbbf2422' },
+]
+
+export const METRIC_TIME_RANGES: { value: PrometheusTimeRange; label: string }[] = [
+  { value: '10m', label: '10m' },
+  { value: '30m', label: '30m' },
+  { value: '1h', label: '1h' },
+  { value: '3h', label: '3h' },
+  { value: '6h', label: '6h' },
+  { value: '12h', label: '12h' },
+  { value: '24h', label: '24h' },
+  { value: '7d', label: '7d' },
+]
+
+const SUPPORTED_KINDS = new Set([
+  'Pod', 'Deployment', 'StatefulSet', 'DaemonSet', 'ReplicaSet', 'Job', 'CronJob', 'Node',
+])
+
+export interface PrometheusResourceMetricsResult {
+  unit: string
+  result?: { series?: TimeSeries[] }
+  query?: string
+  hint?: string
+}
+
+export interface PrometheusChartsViewProps {
+  kind: string
+  /** When false (embedded in an Overview), hide entirely when not connected or no data. */
+  showEmptyState?: boolean
+  // Connection status (host-provided)
+  statusLoading: boolean
+  isConnected: boolean
+  statusError?: string
+  onConnect: () => void
+  connecting: boolean
+  // Selection (controlled by host)
+  category: PrometheusMetricCategory
+  onCategoryChange: (c: PrometheusMetricCategory) => void
+  range: PrometheusTimeRange
+  onRangeChange: (r: PrometheusTimeRange) => void
+  // Metrics (host-fetched)
+  metrics?: PrometheusResourceMetricsResult
+  metricsLoading: boolean
+  metricsError?: Error | null
+  referenceLines?: ReferenceLine[]
+}
+
+export function PrometheusChartsView({
+  kind,
+  showEmptyState = false,
+  statusLoading,
+  isConnected,
+  statusError,
+  onConnect,
+  connecting,
+  category,
+  onCategoryChange,
+  range,
+  onRangeChange,
+  metrics,
+  metricsLoading,
+  metricsError,
+  referenceLines,
+}: PrometheusChartsViewProps) {
+  const categories = kind === 'Node' ? NODE_METRIC_CATEGORIES : WORKLOAD_METRIC_CATEGORIES
+  const isSupported = SUPPORTED_KINDS.has(kind)
+  const activeCategoryDef = categories.find((c) => c.key === category) || categories[0]
+  const series = metrics?.result?.series ?? []
+
+  if (!isSupported) return null
+
+  if (statusLoading) {
+    if (!showEmptyState) return null
+    return (
+      <div className="flex items-center justify-center py-12 text-theme-text-tertiary">
+        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+        Checking Prometheus availability...
+      </div>
+    )
+  }
+
+  if (!showEmptyState) {
+    if (!isConnected) return null
+    if (!metricsLoading && !metricsError && !series.length) return null
+  }
+
+  if (!isConnected) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-4 py-12">
+        <WifiOff className="h-10 w-10 text-theme-text-tertiary" />
+        <div className="text-center">
+          <p className="mb-1 text-sm text-theme-text-secondary">Prometheus not connected</p>
+          <p className="mb-4 text-xs text-theme-text-tertiary">
+            {statusError || 'Connect to view historical CPU, memory, and network metrics'}
+          </p>
+          <button
+            type="button"
+            onClick={onConnect}
+            disabled={connecting}
+            className="btn-brand inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium"
+          >
+            {connecting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Wifi className="h-4 w-4" />}
+            Discover Prometheus
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Toolbar */}
+      <div className="flex shrink-0 items-center justify-between border-b border-theme-border bg-theme-surface/50 px-4 py-2.5">
+        <div className="flex items-center gap-1">
+          <BarChart3 className="mr-2 h-4 w-4 text-theme-text-tertiary" />
+          {categories.map((cat) => (
+            <button
+              key={cat.key}
+              type="button"
+              onClick={() => onCategoryChange(cat.key)}
+              className={clsx(
+                'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
+                category === cat.key
+                  ? 'bg-theme-elevated text-theme-text-primary shadow-sm'
+                  : 'text-theme-text-tertiary hover:bg-theme-elevated/50 hover:text-theme-text-secondary',
+              )}
+            >
+              {cat.label}
+            </button>
+          ))}
+        </div>
+        <select
+          value={range}
+          onChange={(e) => onRangeChange(e.target.value as PrometheusTimeRange)}
+          className="rounded-md border border-theme-border bg-theme-elevated px-2 py-1 text-xs text-theme-text-secondary focus:outline-none focus:ring-1 focus:ring-blue-500/50"
+        >
+          {METRIC_TIME_RANGES.map((tr) => (
+            <option key={tr.value} value={tr.value}>
+              {tr.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Chart area */}
+      <div className="min-h-[280px] flex-1 p-4">
+        {metricsLoading ? (
+          <div className="flex min-h-[240px] items-center justify-center text-theme-text-tertiary">
+            <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+            Loading metrics...
+          </div>
+        ) : metricsError ? (
+          <div className="flex h-full items-center justify-center text-sm text-red-400">
+            Failed to load metrics: {(metricsError as Error).message}
+          </div>
+        ) : series.length ? (
+          <div className="flex h-full flex-col gap-4">
+            <MetricsSummary series={series} unit={metrics!.unit} currentColorClass={activeCategoryDef.color} />
+            <div className="min-h-0 flex-1">
+              <AreaChart
+                series={series}
+                color={activeCategoryDef.chartColor}
+                fillColor={activeCategoryDef.fillColor}
+                unit={metrics!.unit}
+                referenceLines={referenceLines}
+              />
+            </div>
+            {series.length > 1 && <SeriesLegend series={series} color={activeCategoryDef.chartColor} />}
+          </div>
+        ) : (
+          <div className="flex h-full flex-col items-center justify-center text-theme-text-tertiary">
+            <BarChart3 className="mb-2 h-8 w-8 opacity-40" />
+            <p className="text-sm">No data for this time range</p>
+            <p className="mt-1 text-xs text-theme-text-quaternary">
+              Try a different time range or check that metrics are being collected
+            </p>
+            {metrics?.hint && (
+              <p className="mt-3 w-full max-w-lg rounded border border-yellow-500/30 bg-yellow-500/10 px-3 py-2 text-xs text-yellow-700 dark:text-yellow-400">
+                {metrics.hint}
+              </p>
+            )}
+            {metrics?.query && (
+              <details className="mt-3 w-full max-w-lg text-left">
+                <summary className="cursor-pointer text-xs text-theme-text-quaternary hover:text-theme-text-tertiary">
+                  Diagnostics: show PromQL query
+                </summary>
+                <div className="mt-2 break-all rounded border border-theme-border bg-theme-base p-2 font-mono text-xs text-theme-text-secondary">
+                  {metrics.query}
+                </div>
+              </details>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/charts/index.ts

@@ -1,6 +1,19 @@
 export { AreaChart } from './AreaChart'
 export { MetricsSummary } from './MetricsSummary'
 export { SeriesLegend } from './SeriesLegend'
+export {
+  PrometheusChartsView,
+  WORKLOAD_METRIC_CATEGORIES,
+  NODE_METRIC_CATEGORIES,
+  METRIC_TIME_RANGES,
+} from './PrometheusChartsView'
+export type {
+  PrometheusChartsViewProps,
+  PrometheusMetricCategory,
+  PrometheusTimeRange,
+  MetricCategoryDef,
+  PrometheusResourceMetricsResult,
+} from './PrometheusChartsView'
 export { SERIES_COLORS, seriesColor, seriesFill, computeShortLabels } from './colors'
 export { formatMetricValue, formatTimestamp } from './format'
 export { computeSaturation } from './saturation'

package/src/components/checks/ChecksView.tsx

@@ -703,7 +703,11 @@ function FindingLine({
           {body}
         </button>
       ) : resourceHref ? (
-        <a href={resourceHref(r)} className={cls}>
+        // Opens in a new tab to match the ExternalLink glyph in `body`. For the
+        // Hub fleet view this href crosses the Hub→Cluster SPA boundary (a full
+        // document nav); a new tab keeps the Checks queue intact and avoids the
+        // cross-tree browser-Back dead-end (SKY-931).
+        <a href={resourceHref(r)} target="_blank" rel="noreferrer" className={cls}>
           {body}
         </a>
       ) : (

package/src/components/gitops/GitOpsTableView.tsx

@@ -552,7 +552,7 @@ export function GitOpsTableView({
           // understand why some destinations show as unmatched.
           <div className="shrink-0 border-b border-amber-500/30 bg-amber-500/10 px-4 py-2 text-xs text-amber-700 dark:text-amber-300">
             <span className="font-medium">Cross-cluster mapping limited for {forbiddenSecretsClusters.join(', ')}.</span>{' '}
-            Owner needs <code>get secrets</code> in the <code>argocd</code> namespace there; destination
+            Owner needs <code className="inline-code">get secrets</code> in the <code className="inline-code">argocd</code> namespace there; destination
             correlation falls back to name-only resolution.
           </div>
         )}
@@ -1915,4 +1915,3 @@ function newestConditionTime(resource: any): string {
     .sort()
   return times[times.length - 1] ?? ''
 }
-

package/src/components/gitops/insights/GitOpsInsightViews.tsx

@@ -818,12 +818,12 @@ export function GitOpsChangesView({ insight, error, onOpenResource, focusKey, tr
           <div className="border-b border-theme-border bg-theme-base/40 px-4 py-2 text-[11px] text-theme-text-tertiary">
             Radar reads each resource's drift status from the controller. For a line-by-line diff, {insight.summary.tool === 'fluxcd' ? (
               insight.summary.kind === 'HelmRelease' ? (
-                <>run <code className="rounded bg-theme-elevated px-1 py-0.5 font-mono text-[10px]">helm diff upgrade {insight.summary.name} &lt;chart&gt;</code> (requires the helm-diff plugin).</>
+                <>run <code className="inline-code text-[10px]">helm diff upgrade {insight.summary.name} &lt;chart&gt;</code> (requires the helm-diff plugin).</>
               ) : (
-                <>run <code className="rounded bg-theme-elevated px-1 py-0.5 font-mono text-[10px]">flux diff kustomization {insight.summary.name} --path &lt;local-manifests&gt;</code>.</>
+                <>run <code className="inline-code text-[10px]">flux diff kustomization {insight.summary.name} --path &lt;local-manifests&gt;</code>.</>
               )
             ) : (
-              <>use the Argo CD UI or run <code className="rounded bg-theme-elevated px-1 py-0.5 font-mono text-[10px]">argocd app diff {insight.summary.name}</code>.</>
+              <>use the Argo CD UI or run <code className="inline-code text-[10px]">argocd app diff {insight.summary.name}</code>.</>
             )}
           </div>
         )}

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