@skyhook-io/k8s-ui 1.8.9 → 1.8.11

package/src/components/applications/ApplicationsList.tsx

@@ -13,9 +13,11 @@ export interface ApplicationsListProps {
   onSelect: (key: string) => void
   /** Leading element in the header actions (e.g. a freshness control). */
   headerActions?: ReactNode
+  /** First fetch in flight — chassis renders its shape-stable skeleton. */
+  loading?: boolean
 }
 
-export function ApplicationsList({ apps, onSelect, headerActions }: ApplicationsListProps) {
+export function ApplicationsList({ apps, onSelect, headerActions, loading }: ApplicationsListProps) {
   // Env tokens this CLUSTER proved (identity classifications on the wire) feed
   // the namespace heuristic, so sibling-less rows in discovered env namespaces
   // still label without any hardcoded vocabulary.
@@ -24,6 +26,7 @@ export function ApplicationsList({ apps, onSelect, headerActions }: Applications
 
   return (
     <ApplicationsView
+      loading={loading}
       variant="single"
       entries={entries}
       onSelect={onSelect}

package/src/components/applications/ApplicationsView.tsx

@@ -5,6 +5,7 @@ import { clsx } from 'clsx'
 import { StatusDot, mapHealthToTone } from '../ui/status-tone'
 import { Tooltip } from '../ui/Tooltip'
 import { EmptyState } from '../ui/EmptyState'
+import { BoardTableSkeleton, BoardRailSkeleton } from '../ui/BoardSkeleton'
 import { SearchBox } from '../ui/SearchBox'
 import { useFilterState, defineFilterSchema } from '../../filter-state'
 import { PageHeader } from '../ui/PageHeader'
@@ -16,6 +17,7 @@ import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { pluralize } from '../../utils/pluralize'
 import {
   type AppEntry,
+  type AppRow,
   type AppHealth,
   type AppWorkloadClass,
   type AppSource,
@@ -35,12 +37,34 @@ import {
   isSystemNamespace,
   searchTextForEntry,
   foldAppGroups,
+  batchSignalForApp,
+  batchRuntimeForApp,
   type FoldedRow,
 } from '../../utils/applications'
 import { ReadyBar } from './ReadyBar'
-import { ProvenanceBadge, ClassBadge, CategoryChip, VersionInfo } from './AppChips'
+import { ProvenanceBadge, ClassBadge, CategoryChip, VersionInfo, BatchSignalChip } from './AppChips'
 import { AppIdentityTooltip, EnvHint } from './AppTooltips'
 
+function ApplicationRuntimeCell({ apps, workloadClass, ready, desired }: { apps: AppRow[]; workloadClass: AppWorkloadClass; ready: number; desired: number }) {
+  if (workloadClass !== 'job') return <ReadyBar ready={ready} desired={desired} />
+  const runtimes = apps.map(batchRuntimeForApp)
+  const worst = runtimes.reduce((current, runtime) => (HEALTH_RANK[runtime.health] ?? 0) > (HEALTH_RANK[current.health] ?? 0) ? runtime : current, runtimes[0])
+  if (!worst) return <span className="text-xs text-theme-text-tertiary">Idle</span>
+  const same = runtimes.every((runtime) => runtime.label === worst.label)
+  const label = same ? worst.label : `${runtimes.length} states`
+  return (
+    <Tooltip content={runtimes.map((runtime, index) => `${apps[index]?.name ?? 'app'}: ${runtime.label} — ${runtime.detail}`).join('\n')} delay={150}>
+      <span className="inline-flex items-center gap-1.5 text-xs text-theme-text-secondary"><StatusDot tone={mapHealthToTone(worst.health)} />{label}</span>
+    </Tooltip>
+  )
+}
+
+function applicationRuntimeLabel(apps: AppRow[], workloadClass: AppWorkloadClass, health: AppHealth): string {
+  if (workloadClass !== 'job') return HEALTH_META[health].label
+  const labels = Array.from(new Set(apps.map((app) => batchRuntimeForApp(app).label)))
+  return labels.length === 1 ? labels[0] : 'Multiple batch states'
+}
+
 // ApplicationsView — the shared, variant-agnostic core behind the Applications
 // surface. It owns the entire list chassis: a health hero header (PageHeader +
 // SummaryTiles + DistributionBar), a left facet rail (Availability / Class /
@@ -51,7 +75,7 @@ import { AppIdentityTooltip, EnvHint } from './AppTooltips'
 // the per-instance row. Styling mirrors the Resources table so the surfaces
 // read as one design.
 
-// Availability is the one status facet — map app health onto the shared facet
+// Status is the one health facet — map app health onto the shared facet
 // tone so its dots read red/amber/green/grey like the GitOps sync+health facets.
 const HEALTH_TONE: Record<AppHealth, FacetTone> = {
   unhealthy: 'error',
@@ -71,7 +95,7 @@ function compareEntries(a: AppEntry, b: AppEntry, key: SortKey): number {
     case 'name':
       return a.row.name.localeCompare(b.row.name)
     case 'ready':
-      return a.readyRatio - b.readyRatio
+      return runtimeSortValue(a) - runtimeSortValue(b)
     case 'version': {
       // Sort by distinct-version count first (skewed apps cluster), then the
       // first tag for a stable, human-meaningful order.
@@ -82,6 +106,10 @@ function compareEntries(a: AppEntry, b: AppEntry, key: SortKey): number {
   }
 }
 
+function runtimeSortValue(entry: AppEntry): number {
+  return entry.workloadClass === 'job' ? (HEALTH_RANK[entry.health] ?? 0) : entry.readyRatio
+}
+
 // The env token an entry filters under. Single entries carry one env; fleet
 // entries carry several — a fleet row matches an env facet if ANY of its slices
 // do (the same inclusive policy as the Class facet).
@@ -100,6 +128,9 @@ export interface ApplicationsViewProps {
   emptySlot?: ReactNode
   /** Leading element in the header actions cluster (e.g. a freshness control). */
   headerActions?: ReactNode
+  /** First fetch in flight — render the shape-stable skeleton (pulsing tiles,
+   *  rail stubs, table rows) instead of collapsing the chassis. */
+  loading?: boolean
 }
 
 const APPS_FILTER_SCHEMA = defineFilterSchema({
@@ -112,7 +143,7 @@ const APPS_FILTER_SCHEMA = defineFilterSchema({
   system: { param: 'system', type: 'boolean' },
 })
 
-export function ApplicationsView({ entries: allEntries, variant, onSelect, title = 'Applications', description, emptySlot, headerActions }: ApplicationsViewProps) {
+export function ApplicationsView({ entries: allEntries, variant, onSelect, title = 'Applications', description, emptySlot, headerActions, loading }: ApplicationsViewProps) {
   // Facets + search + show-system live in the URL (shareable, bookmarkable) via
   // the shared filter-state contract. Sort stays local: it's a compound
   // {key, dir} view-preference, not a result-narrowing filter, so it isn't
@@ -274,9 +305,16 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
     .sort((a, b) => (envRank(b[0] === 'none' ? undefined : b[0]) ?? -1) - (envRank(a[0] === 'none' ? undefined : a[0]) ?? -1))
     .map(([env, count]) => ({ value: env, label: env === 'none' ? 'unlabeled' : env, count }))
 
+  // First fetch, nothing to show yet: drive the shape-stable skeleton. The
+  // loaded state hides zero-count health tiles, so without this the header
+  // (tiles + distribution bar), rail, and table would all pop in at once.
+  const initialLoading = Boolean(loading) && allEntries.length === 0
+
   // Clickable status tile wired to the health facet — tap to filter to that tier.
   const healthTile = (h: AppHealth, tone: SummaryTone) =>
-    counts.health[h] ? (
+    initialLoading && (h === 'healthy' || h === 'degraded' || h === 'unhealthy') ? (
+      <SummaryTile key={h} label={HEALTH_META[h].label} value={0} tone={tone} loading />
+    ) : counts.health[h] ? (
       <SummaryTile key={h} label={HEALTH_META[h].label} value={counts.health[h]} tone={tone} active={fHealth.has(h)} onClick={() => filters.toggle('health', h)} />
     ) : null
 
@@ -301,7 +339,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
           actions={
             <>
               {headerActions}
-              <SummaryTile label={total === 1 ? 'application' : 'applications'} value={total} />
+              <SummaryTile label={total === 1 ? 'application' : 'applications'} value={total} loading={initialLoading} />
               {healthTile('unhealthy', 'error')}
               {healthTile('degraded', 'warning')}
               {healthTile('healthy', 'success')}
@@ -310,11 +348,15 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
             </>
           }
         />
-        <DistributionBar
-          className="mt-3"
-          ariaLabel="Health distribution"
-          segments={HEALTH_ORDER.map((h) => ({ key: h, count: counts.health[h] ?? 0, fillClass: HEALTH_META[h].bar }))}
-        />
+        {initialLoading ? (
+          <div className="mt-3 h-1.5 w-full animate-pulse rounded-full bg-theme-hover" aria-hidden />
+        ) : (
+          <DistributionBar
+            className="mt-3"
+            ariaLabel="Health distribution"
+            segments={HEALTH_ORDER.map((h) => ({ key: h, count: counts.health[h] ?? 0, fillClass: HEALTH_META[h].bar }))}
+          />
+        )}
       </div>
 
       {/* Body: filter sidebar | content (toolbar + table). */}
@@ -330,7 +372,19 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
             )}
           </div>
           <div className="flex-1 overflow-y-auto">
-            <Facet icon={HeartPulse} title="Availability" options={HEALTH_ORDER.map((h) => ({ value: h, label: HEALTH_META[h].label, count: counts.health[h] ?? 0, tone: HEALTH_TONE[h] }))} selected={fHealth} onToggle={(v) => filters.toggle('health', v)} />
+            {initialLoading ? (
+              <BoardRailSkeleton
+                sections={[
+                  ['Status', 5],
+                  ['Class', 3],
+                  ['Type', 4],
+                  ['Environment', 3],
+                  ['Source', 3],
+                ]}
+              />
+            ) : (
+              <>
+            <Facet icon={HeartPulse} title="Status" options={HEALTH_ORDER.map((h) => ({ value: h, label: HEALTH_META[h].label, count: counts.health[h] ?? 0, tone: HEALTH_TONE[h] }))} selected={fHealth} onToggle={(v) => filters.toggle('health', v)} />
             <Facet icon={Layers} title="Class" options={CLASS_ORDER.map((c) => ({ value: c, label: CLASS_META[c].label, count: counts.workloadClass[c] ?? 0 }))} selected={fClass} onToggle={(v) => filters.toggle('class', v)} />
             <Facet icon={Shapes} title="Type" options={CATEGORY_ORDER.map((c) => ({ value: c, label: CATEGORY_META[c].label, count: counts.category[c] ?? 0, tooltip: CATEGORY_META[c].tooltip }))} selected={fType} onToggle={(v) => filters.toggle('type', v)} />
             <Facet icon={Globe} title="Environment" info={<EnvHint />} options={envOptions} selected={fEnv} onToggle={(v) => filters.toggle('env', v)} />
@@ -342,6 +396,8 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
                 <span className="ml-auto tabular-nums text-theme-text-tertiary">{systemCount}</span>
               </label>
             )}
+              </>
+            )}
           </div>
         </aside>
 
@@ -369,7 +425,9 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
           </div>
 
           <div className="min-w-0 flex-1 overflow-auto bg-theme-base">
-          {entries.length === 0 ? (
+          {initialLoading ? (
+            <BoardTableSkeleton />
+          ) : entries.length === 0 ? (
             emptySlot && allEntries.length === 0 ? (
               emptySlot
             ) : (
@@ -399,7 +457,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
                       </>
                     )}
                     <th className={TH_CLASS}>Class</th>
-                    <SortableTh label="Ready" sortKey="ready" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} />
+                    <SortableTh label="Runtime" sortKey="ready" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} />
                     <SortableTh label="Version" sortKey="version" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} />
                     <th className={TH_CLASS}>Workloads</th>
                     <th className={clsx(TH_CLASS, 'w-8')} />
@@ -421,11 +479,12 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
                         <span className="flex items-center gap-2">
                           {/* Left status stripe (worst-child health) — the row status
                               gutter shared with the GitOps table. */}
-                          <Tooltip content={HEALTH_META[r.health].label} delay={150}>
+                          <Tooltip content={applicationRuntimeLabel(r.members.map((member) => member.row), r.workloadClass, r.health)} delay={150}>
                             <span className={clsx('h-8 w-1 shrink-0 rounded-full', HEALTH_META[r.health].bar)} />
                           </Tooltip>
                           <ChevronRight className={clsx('h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform', r.expanded && 'rotate-90')} aria-hidden />
                           <span className="truncate font-semibold text-theme-text-primary">{r.label}</span>
+                          {r.workloadClass !== 'job' && <BatchSignalChip signal={firstBatchSignal(r.members.map((m) => m.row))} />}
                           <Tooltip
                             content={<AppIdentityTooltip identityKey={r.label} source={r.members[0]?.row.identity?.source} portable={r.members[0]?.row.identity?.portable} fleet={variant === 'fleet'} members={r.members.map((m) => ({ name: m.row.name, env: m.row.identity!.env, confidence: m.row.identity!.confidence, evidence: m.row.identity!.evidence }))} />}
                             delay={150}
@@ -473,7 +532,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
                         </span>
                       </td>
                       <td className="px-2 py-2.5"><ClassBadge workloadClass={r.workloadClass} composition={r.classComposition} /></td>
-                      <td className="px-2 py-2.5"><ReadyBar ready={r.ready} desired={r.desired} /></td>
+                      <td className="px-2 py-2.5"><ApplicationRuntimeCell apps={r.members.map((member) => member.row)} workloadClass={r.workloadClass} ready={r.ready} desired={r.desired} /></td>
                       <td className="px-2 py-2.5">
                         {r.lag ? (
                           <Tooltip content={`Promotion lag: ${r.lag} (${r.cells.filter((c) => c.version).map((c) => `${c.env}=${c.version}`).join(', ')})`} delay={150}>
@@ -500,10 +559,11 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
                     >
                       <td className={clsx('py-2.5 pr-2', r.child ? 'pl-10' : 'pl-3')}>
                         <span className="flex items-center gap-2">
-                          <Tooltip content={HEALTH_META[e.health].label} delay={150}>
+                          <Tooltip content={applicationRuntimeLabel([e.row], e.workloadClass, e.health)} delay={150}>
                             <span className={clsx('h-8 w-1 shrink-0 rounded-full', HEALTH_META[e.health].bar)} />
                           </Tooltip>
                           <span className="truncate font-medium text-theme-text-primary">{e.row.name}</span>
+                          {e.workloadClass !== 'job' && <BatchSignalChip signal={batchSignalForApp(e.row)} />}
                           <ProvenanceBadge tier={e.row.tier} appKey={e.row.key} confidence={e.row.confidence} />
                           <CategoryChip category={e.category} addonReason={e.row.addonReason} />
                         </span>
@@ -570,7 +630,7 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
                         </>
                       )}
                       <td className="px-2 py-2.5"><ClassBadge workloadClass={e.workloadClass} composition={e.classComposition} /></td>
-                      <td className="px-2 py-2.5"><ReadyBar ready={e.ready} desired={e.desired} /></td>
+                      <td className="px-2 py-2.5"><ApplicationRuntimeCell apps={[e.row]} workloadClass={e.workloadClass} ready={e.ready} desired={e.desired} /></td>
                       <td className="px-2 py-2.5">
                         {e.variant === 'fleet' ? (
                           e.versionSkew ? (
@@ -609,3 +669,26 @@ export function ApplicationsView({ entries: allEntries, variant, onSelect, title
     </div>
   )
 }
+
+function firstBatchSignal(rows: AppRow[]) {
+  let best = null as ReturnType<typeof batchSignalForApp>
+  const rank = (tone: string | undefined) => {
+    switch (tone) {
+      case 'rose':
+        return 5
+      case 'amber':
+        return 4
+      case 'sky':
+        return 3
+      case 'emerald':
+        return 2
+      default:
+        return 0
+    }
+  }
+  for (const row of rows) {
+    const signal = batchSignalForApp(row)
+    if (signal && rank(signal.tone) > rank(best?.tone)) best = signal
+  }
+  return best
+}

package/src/components/applications/applications-view.test.tsx

@@ -67,6 +67,53 @@ describe('buildSingleAppEntry', () => {
     expect(e.env).toBe('staging')
     expect(e.envInferred).toBe(false)
   })
+
+  it('uses delivery degradation in the displayed application health', () => {
+    const e = buildSingleAppEntry(app({
+      health: 'degraded',
+      runtimeHealth: 'healthy',
+      sourceStatus: { sync: 'Synced', health: 'Degraded' },
+    }))
+
+    expect(e.health).toBe('degraded')
+  })
+
+  it('preserves the latest retained batch outcome when delivery adds no degradation', () => {
+    const e = buildSingleAppEntry(app({
+      health: 'unhealthy',
+      runtimeHealth: 'unhealthy',
+      workload_class: 'job',
+      workloads: [wl({
+        kind: 'CronJob',
+        workload_class: 'job',
+        health: 'unhealthy',
+        ready: 0,
+        desired: 0,
+        batch: { retainedRuns: 2, failedRuns: 1, succeededRuns: 1, latestRunPhase: 'Succeeded' },
+      })],
+    }))
+
+    expect(e.health).toBe('healthy')
+  })
+
+  it('applies delivery degradation to a batch app with a successful latest run', () => {
+    const e = buildSingleAppEntry(app({
+      health: 'unhealthy',
+      runtimeHealth: 'unhealthy',
+      workload_class: 'job',
+      sourceStatus: { sync: 'Synced', health: 'Degraded' },
+      workloads: [wl({
+        kind: 'CronJob',
+        workload_class: 'job',
+        health: 'unhealthy',
+        ready: 0,
+        desired: 0,
+        batch: { retainedRuns: 2, failedRuns: 1, succeededRuns: 1, latestRunPhase: 'Succeeded' },
+      })],
+    }))
+
+    expect(e.health).toBe('degraded')
+  })
 })
 
 describe('searchTextForEntry (single)', () => {

package/src/components/applications/index.ts

@@ -7,7 +7,7 @@ export { buildSingleAppEntry } from '../../utils/applications'
 // Facet moved to the shared ui/ primitives; re-exported here for compatibility.
 export { Facet } from '../ui/Facet'
 export { ApplicationDetail } from './ApplicationDetail'
-export type { ApplicationDetailProps, SelectedAppWorkload, AppIdentityInstance } from './ApplicationDetail'
+export type { ApplicationDetailProps, SelectedAppWorkload, AppIdentityInstance, ApplicationView } from './ApplicationDetail'
 export { CenteredEmpty } from '../ui/CenteredEmpty'
 export { ProvenanceBadge, ClassBadge, CategoryChip, VersionInfo } from './AppChips'
 export { ProvenanceTooltip, CategoryTooltip, VersionTooltip, AppIdentityTooltip } from './AppTooltips'

package/src/components/audit/AuditAlerts.tsx

@@ -41,14 +41,15 @@ export function AuditAlerts({ findings, onViewAll }: AuditAlertsProps) {
   const warnings = findings.filter(f => f.severity === 'warning').length
 
   return (
-    <div className="border-b-subtle pb-4 last:border-0">
+    <section className="rounded-lg border border-theme-border bg-theme-surface p-4 shadow-theme-sm">
       <button
+        type="button"
         onClick={() => setExpanded(!expanded)}
-        className="flex items-center gap-2 w-full text-left mb-2 hover:text-theme-text-primary transition-colors"
+        className="flex w-full items-center gap-2 rounded-md text-left transition-colors hover:text-theme-text-primary"
       >
         <ChevronRight className={clsx('w-4 h-4 text-theme-text-tertiary transition-transform duration-200', expanded && 'rotate-90')} />
         <ClipboardCheck className="w-4 h-4 text-theme-text-secondary" />
-        <span className="text-sm font-medium text-theme-text-secondary">Audit Findings</span>
+        <span className="text-sm font-semibold text-theme-text-primary">Audit Findings</span>
         <div className="flex items-center gap-2 ml-1">
           {dangers > 0 && (
             <span className={clsx('text-xs font-medium tabular-nums', SEVERITY_TEXT.error)}>{dangers} critical</span>
@@ -64,7 +65,7 @@ export function AuditAlerts({ findings, onViewAll }: AuditAlertsProps) {
         style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
       >
         <div className="overflow-hidden">
-          <div className="pl-6 pt-1 flex flex-col gap-0.5">
+          <div className="flex flex-col gap-0.5 pt-3">
             {findings.map((f, i) => {
               const isDanger = f.severity === 'danger'
               return (
@@ -74,17 +75,20 @@ export function AuditAlerts({ findings, onViewAll }: AuditAlertsProps) {
                   ) : (
                     <AlertTriangle className={clsx('w-3.5 h-3.5 shrink-0 mt-0.5', SEVERITY_TEXT.warning)} />
                   )}
-                  <span className="text-xs text-theme-text-secondary flex-1">{f.message}</span>
-                  <span className={clsx('badge-sm text-[10px] shrink-0', BP_CATEGORY_BADGE[f.category] || DEFAULT_BADGE_COLOR)}>
-                    {f.category}
-                  </span>
+                  <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">
+                    <span className="text-xs text-theme-text-secondary">{f.message}</span>
+                    <span className={clsx('badge-sm text-[10px] shrink-0', BP_CATEGORY_BADGE[f.category] || DEFAULT_BADGE_COLOR)}>
+                      {f.category}
+                    </span>
+                  </div>
                 </div>
               )
             })}
             {onViewAll && (
               <button
+                type="button"
                 onClick={(e) => { e.stopPropagation(); onViewAll() }}
-                className="flex items-center gap-1 text-xs text-skyhook-500 hover:text-skyhook-400 mt-1 py-1 transition-colors"
+                className="mt-1 flex items-center gap-1 py-1 text-xs text-accent-text transition-colors hover:text-accent"
               >
                 View all findings
                 <ArrowRight className="w-3 h-3" />
@@ -93,6 +97,6 @@ export function AuditAlerts({ findings, onViewAll }: AuditAlertsProps) {
           </div>
         </div>
       </div>
-    </div>
+    </section>
   )
 }