@skyhook-io/k8s-ui 1.7.13 → 1.7.15

package/src/components/issues/IssuesView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { useEffect, useMemo, useState, type ComponentType, type ReactNode } from 'react';
 import { ChevronRight, CircleCheck, Clock, ExternalLink } from 'lucide-react';
 import { ClusterName, EmptyState } from '../ui';
 import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format';
@@ -90,25 +90,48 @@ export function IssuesView({ issues, anyData, resourceHref, onResourceClick, clu
   );
 }
 
-function IssueRow({
-  issue,
-  clusterLabel,
-  open,
-  onToggle,
-  resourceHref,
-  onResourceClick,
-}: {
+export interface IssueRowSlotContext {
+  issue: Issue;
+  open: boolean;
+}
+
+export interface IssueRowProps {
   issue: Issue;
   clusterLabel?: (issue: Issue) => string | undefined;
   open: boolean;
   onToggle: () => void;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
-}) {
+  as?: 'li' | 'div';
+  className?: string;
+  dimmed?: boolean;
+  renderBadges?: (ctx: IssueRowSlotContext) => ReactNode;
+  renderMeta?: (ctx: IssueRowSlotContext) => ReactNode;
+  renderActions?: (ctx: IssueRowSlotContext) => ReactNode;
+  ResourceLinkIcon?: ComponentType<{ className?: string }>;
+}
+
+export function IssueRow({
+  issue,
+  clusterLabel,
+  open,
+  onToggle,
+  resourceHref,
+  onResourceClick,
+  as = 'li',
+  className,
+  dimmed,
+  renderBadges,
+  renderMeta,
+  renderActions,
+  ResourceLinkIcon = ExternalLink,
+}: IssueRowProps) {
   const cluster = clusterLabel?.(issue);
   const affected = affectedSummary(issue.affected);
   const { headline } = issueMessageParts(issue);
   const [renderDetails, setRenderDetails] = useState(open);
+  const Container = as;
+  const slotCtx = { issue, open };
 
   useEffect(() => {
     if (open) {
@@ -122,8 +145,12 @@ function IssueRow({
   }, [open, renderDetails]);
 
   return (
-    <li
-      className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm"
+    <Container
+      className={[
+        'overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm',
+        dimmed ? 'opacity-60' : '',
+        className ?? '',
+      ].filter(Boolean).join(' ')}
       style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 72px' }}
     >
       {/* The whole header is the single toggle target — chevron is just the
@@ -149,6 +176,7 @@ function IssueRow({
           <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>
+            {renderBadges?.(slotCtx)}
             {/* 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
@@ -180,6 +208,7 @@ function IssueRow({
                 <span className="shrink-0 tabular-nums">{affected}</span>
               </>
             ) : null}
+            {renderMeta?.(slotCtx)}
           </div>
         </div>
 
@@ -203,6 +232,7 @@ function IssueRow({
         <span className={`badge-sm shrink-0 text-[10px] font-semibold ${ISSUE_SEVERITY_BADGE_CLASS[issue.severity]}`}>
           {ISSUE_SEVERITY_LABEL[issue.severity]}
         </span>
+        {renderActions?.(slotCtx)}
       </div>
 
       {renderDetails ? (
@@ -218,16 +248,16 @@ function IssueRow({
             <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} />
-                <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
+                <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
                 <div className="border-t border-theme-border/70 pt-3">
-                  <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
+                  <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
                 </div>
               </div>
             </div>
           </div>
         </div>
       ) : null}
-    </li>
+    </Container>
   );
 }
 
@@ -241,11 +271,9 @@ function Diagnosis({ issue }: { issue: Issue }) {
           .join(' · ')
       : null;
   const { headline, detail } = issueMessageParts(issue);
-  // When the issue carries a parsed plain-English cause (GitOps controller
-  // errors), lead with it — the raw controller message is long and buries the
-  // useful part, and the detector reason ("OperationFailed") just repeats the
-  // category chip. The raw message is kept below as de-emphasized detail.
-  const rawMessage = [headline, detail].filter(Boolean).join(' ');
+  // When the issue carries a parsed plain-English cause, lead with it. The raw
+  // detector message is kept below as de-emphasized detail.
+  const rawMessage = issue.cause ? issue.message ?? '' : [headline, detail].filter(Boolean).join(' ');
   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>
@@ -280,7 +308,7 @@ function Diagnosis({ issue }: { issue: Issue }) {
           {issue.operation_retry_count ? ` · retried ${issue.operation_retry_count}×` : ''}
         </p>
       ) : null}
-      {/* Raw controller message, de-emphasized — shown below the parsed cause so
+      {/* Raw detector message, de-emphasized — shown below the parsed cause so
           the precise error (URLs, resource names) is available without leading. */}
       {issue.cause && rawMessage ? (
         <p className="break-words font-mono text-[11px] leading-relaxed text-theme-text-tertiary">{rawMessage}</p>
@@ -316,10 +344,12 @@ function DiagnosticContext({
   issue,
   resourceHref,
   onResourceClick,
+  ResourceLinkIcon,
 }: {
   issue: Issue;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
+  ResourceLinkIcon: ComponentType<{ className?: string }>;
 }) {
   const ctx = issue.diagnostic_context;
   const facts = ctx?.facts?.filter((fact) => fact.message || fact.refs?.length || fact.related_issues?.length) ?? [];
@@ -347,6 +377,7 @@ function DiagnosticContext({
                     refForLink={memberRef(issue, related.ref)}
                     resourceHref={resourceHref}
                     onResourceClick={onResourceClick}
+                    ResourceLinkIcon={ResourceLinkIcon}
                   />
                 ))}
               </ul>
@@ -359,6 +390,7 @@ function DiagnosticContext({
                     refForLink={memberRef(issue, ref)}
                     resourceHref={resourceHref}
                     onResourceClick={onResourceClick}
+                    ResourceLinkIcon={ResourceLinkIcon}
                   />
                 ))}
               </ul>
@@ -424,10 +456,12 @@ function AffectedResources({
   issue,
   resourceHref,
   onResourceClick,
+  ResourceLinkIcon,
 }: {
   issue: Issue;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
+  ResourceLinkIcon: ComponentType<{ className?: string }>;
 }) {
   const members = issue.members ?? [];
   // count is the backend fan-out size (members, subject excluded — see
@@ -439,7 +473,7 @@ function AffectedResources({
           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} />
+        <ResourceLine label="Subject" refForLink={subjectRef(issue)} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
       </ul>
       {members.length > 0 && (
         <>
@@ -453,6 +487,7 @@ function AffectedResources({
                 refForLink={memberRef(issue, m)}
                 resourceHref={resourceHref}
                 onResourceClick={onResourceClick}
+                ResourceLinkIcon={ResourceLinkIcon}
               />
             ))}
           </ul>
@@ -472,11 +507,13 @@ function ResourceLine({
   refForLink,
   resourceHref,
   onResourceClick,
+  ResourceLinkIcon,
 }: {
   label?: string;
   refForLink: IssueResourceRef;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
+  ResourceLinkIcon: ComponentType<{ className?: string }>;
 }) {
   const r = refForLink;
   const linkable = !!(onResourceClick || resourceHref);
@@ -488,7 +525,7 @@ function ResourceLine({
         {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" />}
+      {linkable && <ResourceLinkIcon 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';

package/src/components/issues/index.ts

@@ -2,8 +2,8 @@
 // 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 { IssueRow, IssuesView } from './IssuesView';
+export type { IssueRowProps, IssueRowSlotContext, IssuesViewProps } from './IssuesView';
 export {
   ISSUE_SEVERITIES,
   ISSUE_SEVERITY_RANK,

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

@@ -28,6 +28,13 @@ describe('compareIssues', () => {
     expect([older, newer].sort(compareIssues).map((i) => i.id)).toEqual(['n', 'o'])
   })
 
+  it('orders direct startup blockers before generic problem rows at same severity', () => {
+    const generic = mk({ id: 'generic', source: 'problem', first_seen: '2026-05-01T00:00:00Z' })
+    const blocker = mk({ id: 'blocker', source: 'scheduling', first_seen: '2026-01-01T00:00:00Z' })
+    const missing = mk({ id: 'missing', source: 'missing_ref', first_seen: '2026-03-01T00:00:00Z' })
+    expect([generic, blocker, missing].sort(compareIssues).map((i) => i.id)).toEqual(['blocker', 'missing', 'generic'])
+  })
+
   it('does NOT reshuffle same-severity rows when only last_seen changes (anti-churn)', () => {
     // Two same-severity rows, same first_seen — 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' })

package/src/components/issues/types.ts

@@ -24,6 +24,13 @@ export const ISSUE_SEVERITY_RANK: Record<IssueSeverity, number> = {
   warning: 1,
 };
 
+const ISSUE_SOURCE_RANK: Record<string, number> = {
+  scheduling: 4,
+  missing_ref: 3,
+  condition: 2,
+  problem: 1,
+};
+
 export function isIssueSeverity(s: string): s is IssueSeverity {
   return s === 'critical' || s === 'warning';
 }
@@ -101,6 +108,16 @@ export interface IssueRecentChange {
   change_category?: 'spec_config' | 'lifecycle' | 'runtime_status' | string;
   rank_reason?: string;
   fields?: IssueRecentChangeField[];
+  /** Workloads that mount/reference this ConfigMap directly ("Deployment/flagd").
+   *  Direct spec references only — runtime consumers via an intermediary
+   *  service are not captured. */
+  consumed_by?: string[];
+}
+
+/** "No tracked non-status changes in the window" — the claim is scoped by
+ *  window_seconds so a change just outside it can't be misread as absent. */
+export interface IssueNoRecentChanges {
+  window_seconds: number;
 }
 
 /**
@@ -136,8 +153,8 @@ export interface Issue {
 
   reason: string;
   message?: string;
-  /** Parsed domain diagnosis (today GitOps controller errors): plain-English
-   *  cause, suggested next step, and an optional structured one-click fix.
+  /** Parsed domain diagnosis: plain-English cause, suggested next step, and
+   *  an optional structured one-click fix.
    *  Server-emitted (omitempty); empty for issues without a parser. */
   cause?: string;
   action?: string;
@@ -178,6 +195,16 @@ export interface Issue {
   issue_timing?: 'started_at_resource_creation' | 'started_after_resource_was_healthy';
   /** The evidence that determined issue_timing (for auditability). */
   issue_timing_basis?: 'condition' | 'owner_condition' | 'pod_creation' | 'deletion' | 'phase' | 'spec';
+
+  /** Recent non-status changes (spec/config and lifecycle) on this issue's
+   *  subject (and, for workload subjects, its referenced ConfigMaps) —
+   *  deterministic evidence, not a causal claim. Populated only on
+   *  single-namespace MCP issue responses; never set on /api/issues today. */
+  correlated_changes?: IssueRecentChange[];
+  /** Explicit "no tracked changes in the window" evidence. An issue with
+   *  NEITHER correlation field was not checked — absence must not be read as
+   *  "no changes". MCP-only, like correlated_changes. */
+  no_recent_changes?: IssueNoRecentChanges;
 }
 
 /** subjectRef builds a deep-linkable ref for an issue's subject — the row's
@@ -209,15 +236,18 @@ export function memberRef(issue: Issue, member: IssueResourceRef): IssueResource
 
 /**
  * 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.
+ * it can be unit-tested). Severity first (critical before warning), then
+ * direct-blocker source priority, 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 sr = (ISSUE_SOURCE_RANK[b.source] ?? 0) - (ISSUE_SOURCE_RANK[a.source] ?? 0);
+  if (sr !== 0) return sr;
   const fa = a.first_seen ?? '';
   const fb = b.first_seen ?? '';
   if (fa !== fb) return fb.localeCompare(fa);

package/src/components/logs/WorkloadLogsViewer.tsx

@@ -82,6 +82,11 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
     pods.forEach((pod, i) => m.set(pod.name, i))
     return m
   }, [pods])
+  const podColorIndexRef = useRef<Map<string, number>>(new Map())
+
+  useEffect(() => {
+    podColorIndexRef.current = podColorIndex
+  }, [podColorIndex])
 
   const podsInitialized = useRef(false)
 
@@ -94,6 +99,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       const resultPods = result.pods ?? []
       const resultLogs = result.logs ?? []
 
+      podColorIndexRef.current = new Map(resultPods.map((pod, i) => [pod.name, i]))
       setPods(resultPods)
 
       if (!podsInitialized.current && resultPods.length > 0) {
@@ -148,10 +154,12 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       {
         onConnected: (data: any) => {
           if (data?.pods) {
-            setPods(data.pods)
-            if (selectedPods.size === 0) {
-              setSelectedPods(new Set((data.pods as WorkloadPodInfo[]).map((p: WorkloadPodInfo) => p.name)))
-            }
+            const nextPods = data.pods as WorkloadPodInfo[]
+            podColorIndexRef.current = new Map(nextPods.map((pod, i) => [pod.name, i]))
+            setPods(nextPods)
+            setSelectedPods(prev => (
+              prev.size === 0 ? new Set(nextPods.map((p: WorkloadPodInfo) => p.name)) : prev
+            ))
           }
         },
         onLog: (data: any) => {
@@ -161,7 +169,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
               content: data.content || '',
               container: data.container || '',
               pod: data.pod || '',
-              podColorIndex: podColorIndex.get(data.pod || ''),
+              podColorIndex: podColorIndexRef.current.get(data.pod || ''),
             })
           }
         },
@@ -171,7 +179,8 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
             setPods(prev => {
               const existing = new Set(prev.map(p => p.name))
               const toAdd = newPods.filter(p => !existing.has(p.name))
-              return toAdd.length > 0 ? [...prev, ...toAdd] : prev
+              if (toAdd.length === 0) return prev
+              return [...prev, ...toAdd]
             })
             setSelectedPods(prev => {
               const next = new Set(prev)
@@ -191,7 +200,7 @@ export function WorkloadLogsViewer({ name, fetchAll, createStream, overrideDownl
       },
       'Workload log stream connection failed',
     )
-  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, podColorIndex, selectedPods.size, clear])
+  }, [createStream, startStreaming, selectedContainer, sinceSeconds, append, clear])
 
   const handleStopStreaming = useCallback(() => {
     userStoppedRef.current = true