@skyhook-io/k8s-ui 1.8.10 → 1.8.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.8.10",
+  "version": "1.8.11",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -61,14 +61,15 @@
     "./assets/radar/radar-icon-loading.svg": "./src/assets/radar/radar-icon-loading.svg"
   },
   "scripts": {
-    "tsc": "tsc --noEmit",
+    "tsc": "node ../../node_modules/typescript-7/bin/tsc --noEmit",
+    "tsc:ts6": "tsc --noEmit",
     "test": "vitest run",
     "format": "prettier --write \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "html-to-image": "^1.11.0",
-    "react-virtuoso": "^4.18.7",
+    "react-virtuoso": "^4.18.10",
     "shiki": "^4.2.0"
   },
   "peerDependencies": {
@@ -95,7 +96,7 @@
     "clsx": "^2.1.1",
     "diff": "^9.0.0",
     "elkjs": "^0.11.1",
-    "lucide-react": "^1.22.0",
+    "lucide-react": "^1.23.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "typescript": "^6.0.2",

package/src/assets/gitops/flux.svg

@@ -0,0 +1,7 @@
+<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(11 2)" fill="none" fill-rule="evenodd">
+    <path fill="#326CE5" d="M.803 15.779c-1.049-.682-1.049-2.219 0-2.901L20.182.28a1.73 1.73 0 0 1 1.886 0l19.379 12.599c1.05.682 1.05 2.218 0 2.901L22.068 28.378a1.73 1.73 0 0 1-1.886 0L.803 15.779Z"/>
+    <path fill="#C1D2F7" d="M24.185 18.002h1.344a1.02 1.02 0 0 0 .884-1.529l-4.405-7.629a1.02 1.02 0 0 0-1.766 0l-4.404 7.629a1.02 1.02 0 0 0 .883 1.529h1.345c.563 0 1.019.457 1.019 1.02v8.708l.902.587a2.08 2.08 0 0 0 2.276 0l.902-.587v-8.708c0-.563.456-1.02 1.02-1.02Z"/>
+    <path fill="#326CE5" d="m27.839 34.838-4.674-3.039v1.44c1.525.653 3.094 1.162 4.674 1.599Zm-4.674.99v2.022c1.545.471 3.107.858 4.654 1.239 5.052 1.246 9.823 2.421 13.659 6.259.195.194.378.392.559.592.394-.752.197-1.744-.59-2.255l-7.591-4.936c-1.843-.608-3.72-1.073-5.575-1.53-1.75-.432-3.461-.862-5.116-1.391Zm-4.08-1.658a22.93 22.93 0 0 1-1.922-1.121l-1.736 1.128a20.12 20.12 0 0 0 3.658 2.145V34.17Zm5.809 6.435c-.58-.143-1.157-.285-1.729-.431v1.987c.424.106.847.211 1.268.315 5.051 1.245 9.822 2.421 13.659 6.258l.019.02 1.641-1.067c-.1-.105-.194-.212-.298-.315-4.216-4.217-9.475-5.513-14.56-6.767Zm-5.809-1.614c-2.195-.752-4.276-1.72-6.174-3.178l-1.699 1.105c2.416 1.993 5.107 3.202 7.873 4.099v-2.026Zm0 4.39c-3.778-.99-7.332-2.199-10.367-4.843l-1.671 1.087c3.566 3.285 7.807 4.658 12.038 5.746v-1.99Zm4.08 3.013c3.953 1.02 7.67 2.24 10.817 5.044l1.662-1.08c-3.679-3.458-8.093-4.839-12.479-5.954v1.99ZM4.579 41.23 2.93 42.302c.058.06.11.121.17.18 4.216 4.217 9.474 5.513 14.56 6.767 4.404 1.085 8.594 2.12 12.139 4.91l1.69-1.1c-3.993-3.362-8.75-4.543-13.367-5.68-5.001-1.233-9.726-2.403-13.543-6.149Zm-3.503 3.276a14.75 14.75 0 0 1-.552-.584c-.752.753-.663 2.05.28 2.663l5.706 3.71c2.525 1.046 5.166 1.7 7.764 2.34 4.054.999 7.927 1.957 11.284 4.281l1.725-1.123c-3.815-2.869-8.242-3.968-12.548-5.029-5.051-1.245-9.822-2.421-13.659-6.258Zm18.568 14.328c.38.185.756.38 1.125.588.44.093.908.016 1.299-.238l.958-.623c-3.077-2.058-6.498-3.1-9.906-3.968l6.524 4.241Z"/>
+  </g>
+</svg>

package/src/components/applications/AppChips.tsx

@@ -2,6 +2,7 @@ import { Tooltip } from '../ui/Tooltip'
 import {
   type AppRow,
   type AppWorkloadClass,
+  type BatchSignal,
   CHIP,
   CHIP_TONE,
   CLASS_META,
@@ -69,6 +70,15 @@ export function CategoryChip({ category, addonReason }: { category?: string; add
   )
 }
 
+export function BatchSignalChip({ signal }: { signal: BatchSignal | null }) {
+  if (!signal) return null
+  return (
+    <Tooltip content={signal.detail} delay={150}>
+      <span className={`${CHIP} ${CHIP_TONE[signal.tone]}`}>{signal.label}</span>
+    </Tooltip>
+  )
+}
+
 /** The version display: appVersion when the workloads agree on one upstream
  *  version, the single image tag, or "N versions" (amber only on real skew).
  *  `cell` = table chip styling, `fact` = the detail context strip. */

package/src/components/applications/ApplicationDetail.test.tsx

@@ -0,0 +1,569 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { ApplicationDetail, type ApplicationDetailProps } from './ApplicationDetail'
+import type { AppHistory, AppRow, AppSourceRef } from '../../utils/applications'
+import { workloadKey } from '../../utils/topology-neighborhood'
+
+const app: AppRow = {
+  key: "app:prod:checkout",
+  name: "checkout",
+  namespace: "prod",
+  health: "healthy",
+  workload_class: "mixed",
+  appVersion: "1.2.3",
+  workloads: [
+    {
+      kind: "Deployment",
+      namespace: "prod",
+      name: "checkout-api",
+      workload_class: "service",
+      health: "healthy",
+      ready: 3,
+      desired: 3,
+      restarts: 0,
+      version: "1.2.3",
+    },
+    {
+      kind: "Deployment",
+      namespace: "prod",
+      name: "checkout-worker",
+      workload_class: "worker",
+      health: "healthy",
+      ready: 1,
+      desired: 1,
+      restarts: 0,
+      version: "1.2.3",
+    },
+  ],
+  relationships: {
+    services: ["checkout-api"],
+    ingresses: ["checkout"],
+    configs: 2,
+    scalers: 1,
+    storage: 1,
+    networkPolicies: 1,
+    serviceRefs: [{ kind: 'Service', namespace: 'prod', name: 'checkout-api' }],
+    ingressRefs: [{ kind: 'Ingress', namespace: 'prod', name: 'checkout' }],
+    configRefs: [
+      { kind: 'ConfigMap', namespace: 'prod', name: 'checkout-config' },
+      { kind: 'Secret', namespace: 'prod', name: 'checkout-secret' },
+    ],
+    scalerRefs: [{ kind: 'HorizontalPodAutoscaler', namespace: 'prod', name: 'checkout-api' }],
+    storageRefs: [{ kind: 'PersistentVolumeClaim', namespace: 'prod', name: 'checkout-data' }],
+    networkPolicyRefs: [{ kind: 'NetworkPolicy', namespace: 'prod', name: 'checkout-ingress' }],
+  },
+  events: [
+    {
+      type: "Warning",
+      reason: "BackOff",
+      object: "Deployment/checkout-api",
+      message: "Back-off restarting failed container",
+      count: 2,
+      lastSeen: "1m ago",
+    },
+  ],
+};
+
+function renderDetail(props: Partial<ApplicationDetailProps> = {}) {
+  const componentProps = {
+    app,
+    onBack: () => {},
+    renderWorkload: (workload) => <div>Runtime for {workload.name}</div>,
+    renderOverviewIssues: () => null,
+    ...props,
+  } as ApplicationDetailProps;
+  return renderToString(<ApplicationDetail {...componentProps} />);
+}
+
+describe("ApplicationDetail shell", () => {
+  it("preserves the built-in issue surface when the host slot is omitted", () => {
+    const html = renderDetail({ renderOverviewIssues: undefined });
+
+    expect(html).toContain('Application views')
+    expect(html).toContain('Overview')
+    expect(html).toContain('Topology')
+    expect(html).toContain('History')
+    expect(html).toContain('BackOff on checkout-api')
+    expect(html).toContain('Application identity')
+    expect(html).toContain('Grouped from Kubernetes ownership')
+    expect(html).toContain('Entrypoints')
+    expect(html).toContain('Dependencies')
+    expect(html).toContain('svc<!-- -->/</span>checkout-api')
+    expect(html).toContain('ing<!-- -->/</span>checkout')
+    expect(html).toContain('Configuration')
+    expect(html).toContain('Autoscaling')
+    expect(html).toContain('Storage')
+    expect(html).toContain('Network policy')
+    expect(html).not.toContain('Related resources')
+    expect(html).toContain('Workloads')
+    expect(html).not.toContain('Runtime for')
+    expect(html).not.toContain('Components')
+    expect(html).not.toContain('Changes')
+    expect(html).not.toContain('YAML')
+    expect(html).not.toContain('Cost')
+    expect(html).not.toContain('>Deploy<')
+  })
+
+  it("defaults to the application overview scope", () => {
+    const html = renderDetail();
+
+    expect(html).toContain("Application views");
+    expect(html).toContain("Overview");
+    expect(html).toContain("Topology");
+    expect(html).toContain("History");
+    expect(html).not.toContain("BackOff on checkout-api");
+    expect(html).toContain("Application identity");
+    expect(html).toContain("Entrypoints");
+    expect(html).toContain("Dependencies");
+    expect(html).toContain("svc<!-- -->/</span>checkout-api");
+    expect(html).toContain("ing<!-- -->/</span>checkout");
+    expect(html).toContain("Configuration");
+    expect(html).toContain("Autoscaling");
+    expect(html).toContain("Storage");
+    expect(html).not.toContain("Related resources");
+    expect(html).toContain("Workloads");
+    expect(html).not.toContain("Runtime for");
+    expect(html).not.toContain("Components");
+    expect(html).not.toContain("Changes");
+    expect(html).not.toContain("YAML");
+    expect(html).not.toContain("Cost");
+    expect(html).not.toContain(">Deploy<");
+  });
+
+  it("shows workload scope without application view tabs when the URL names a workload", () => {
+    const selected = app.workloads[1];
+    const html = renderDetail({
+      selectedView: "overview",
+      onSelectView: () => {},
+      selectedWorkloadKey: workloadKey(selected),
+      onSelectWorkload: () => {},
+    });
+
+    expect(html).toContain('Runtime for')
+    expect(html).toContain('checkout-worker')
+    expect(html).not.toContain('Application views')
+    expect(html).not.toContain('Overview')
+    expect(html).not.toContain('Topology')
+    expect(html).not.toContain('History')
+    expect(html).not.toContain('Application identity')
+  })
+
+  it("does not render a workload selector for a single-workload app", () => {
+    const singleApp: AppRow = {
+      ...app,
+      workloads: [app.workloads[0]],
+    };
+    const selected = singleApp.workloads[0];
+    const html = renderDetail({
+      app: singleApp,
+      selectedWorkloadKey: workloadKey(selected),
+      onSelectWorkload: () => {},
+    });
+
+    expect(html).toContain("Runtime for");
+    expect(html).toContain("checkout-api");
+    expect(html).toContain("Workload");
+    expect(html).toContain("Deployment<!-- -->/<!-- -->checkout-api");
+    expect(html).not.toContain('aria-haspopup="listbox"');
+    expect(html).not.toContain("Application views");
+  });
+
+  it("opens the workload directly for uncontrolled single-workload apps", () => {
+    const singleApp: AppRow = {
+      ...app,
+      workloads: [app.workloads[0]],
+    };
+    const html = renderDetail({ app: singleApp });
+
+    expect(html).toContain("Runtime for");
+    expect(html).toContain("checkout-api");
+    expect(html).not.toContain("Application views");
+  });
+
+  it("renders application incidents in History", () => {
+    const html = renderDetail({
+      selectedView: "history",
+      onSelectView: () => {},
+      selectedWorkloadKey: null,
+      onSelectWorkload: () => {},
+    });
+
+    expect(html).toContain("Current incidents");
+    expect(html).toContain("BackOff on Deployment/checkout-api");
+    expect(html).toContain("Deployment/checkout-api");
+    expect(html).toContain("Open workload");
+  });
+
+  it("previews the latest retained deployment change in Overview", () => {
+    const healthyApp: AppRow = { ...app, events: [] };
+    const history: AppHistory = {
+      appKey: healthyApp.key,
+      sourceRef: {
+        type: "gitops",
+        tool: "argocd",
+        group: "argoproj.io",
+        kind: "Application",
+        namespace: "argocd",
+        name: "checkout",
+      },
+      summary: {
+        state: "change",
+        title: "Argo CD sync",
+        detail: "Succeeded · abc123",
+        timestamp: "2026-07-08T12:00:00Z",
+      },
+      anchors: [
+        {
+          type: "gitops",
+          title: "Argo CD sync",
+          status: "Succeeded",
+          revision: "abc123",
+          timestamp: "2026-07-08T12:00:00Z",
+        },
+      ],
+    };
+    const html = renderDetail({
+      app: healthyApp,
+      history,
+      onOpenSource: () => {},
+    });
+
+    expect(html).toContain('Latest change')
+    expect(html).toContain('Argo CD sync')
+    expect(html).toContain('History')
+    expect(html).toContain('View Argo CD application')
+    expect(html).not.toContain('No application issues detected')
+  })
+
+  it('shows an authoritative deployment source without duplicating its action in history', () => {
+    const sourceRef: AppSourceRef = { type: 'gitops', tool: 'flux', group: 'kustomize.toolkit.fluxcd.io', kind: 'Kustomization', namespace: 'flux-system', name: 'checkout' }
+    const sourceApp: AppRow = { ...app, events: [], sourceRef }
+    const history: AppHistory = {
+      appKey: sourceApp.key,
+      sourceRef,
+      summary: { state: 'change', title: 'Flux reconciliation', timestamp: '2026-07-08T12:00:00Z' },
+    }
+    const html = renderDetail({ app: sourceApp, history, onOpenSource: () => {} })
+
+    expect(html).toContain('Deployment source')
+    expect(html).toContain('Flux Kustomization')
+    expect(html).toContain('flux-system/checkout')
+    expect(html.match(/View Flux Kustomization/g)).toHaveLength(1)
+    expect(html).not.toContain('App key')
+    expect(html).not.toContain('Confidence')
+    expect(html).not.toContain('Source &amp; provenance')
+  })
+
+  it('separates healthy runtime from degraded delivery and rolls up the application status', () => {
+    const sourceRef: AppSourceRef = { type: 'gitops', tool: 'argocd', group: 'argoproj.io', kind: 'Application', namespace: 'argocd', name: 'checkout' }
+    const html = renderDetail({
+      app: {
+        ...app,
+        health: 'degraded',
+        runtimeHealth: 'healthy',
+        sourceRef,
+        sourceStatus: { sync: 'Synced', health: 'Degraded' },
+      },
+      onOpenSource: () => {},
+    })
+
+    expect(html).toContain('Degraded')
+    expect(html).toContain('Runtime')
+    expect(html).toContain('Healthy')
+    expect(html).toContain('4/4 ready')
+    expect(html).toContain('Delivery')
+    expect(html.match(/Synced/g)).toHaveLength(2)
+    expect((html.match(/Degraded/g) ?? []).length).toBeGreaterThanOrEqual(3)
+  })
+
+  it('warns when application workloads resolve to different deployment sources', () => {
+    const html = renderDetail({ app: { ...app, sourceConflict: true } })
+
+    expect(html).toContain('Deployment source')
+    expect(html).toContain('Multiple deployment sources detected')
+    expect(html).toContain('do not share one deployment manager')
+  })
+
+  it('distinguishes inferred application identity from declared identity', () => {
+    const inferred = renderDetail({
+      app: {
+        ...app,
+        identity: { key: 'checkout', env: 'prod', confidence: 'medium', evidence: 'name stem checkout + shared image repo', source: 'name-stem' },
+      },
+    })
+    expect(inferred).toContain('Application identity')
+    expect(inferred).toContain('Inferred application boundary')
+    expect(inferred).toContain('a shared name + image')
+
+    const declared = renderDetail({
+      app: {
+        ...app,
+        identity: { key: 'checkout', env: 'prod', confidence: 'high', evidence: 'app.skyhook.io/app=checkout', source: 'explicit' },
+      },
+    })
+    expect(declared).toContain('Identified by the app.skyhook.io/app annotation')
+    expect(declared).not.toContain('Inferred application boundary')
+  })
+
+  it('uses tier provenance when a grouped app has no cross-app identity', () => {
+    const html = renderDetail({ app: { ...app, tier: 5 } })
+
+    expect(html).toContain('Application identity')
+    expect(html).toContain('Grouped by Helm metadata')
+    expect(html).not.toContain('Grouped from Kubernetes ownership')
+  })
+
+  it('does not present completed init containers as a long-running workload state', () => {
+    const statefulApp: AppRow = {
+      ...app,
+      workloads: [
+        { ...app.workloads[0], kind: 'StatefulSet', name: 'redis-master', reason: 'Completed' },
+        { ...app.workloads[1], kind: 'StatefulSet', name: 'redis-replicas', reason: 'Completed' },
+      ],
+    }
+    const jobApp: AppRow = {
+      ...app,
+      workloads: [
+        { ...app.workloads[0], kind: 'Job', name: 'database-migration', workload_class: 'job', reason: 'Completed' },
+        { ...app.workloads[1], kind: 'CronJob', name: 'database-migration-schedule', workload_class: 'job' },
+      ],
+    }
+
+    expect(renderDetail({ app: statefulApp })).not.toMatch(/redis-master<\/button><div[^>]*>Completed/)
+    expect(renderDetail({ app: jobApp })).toMatch(/database-migration<\/button><div[^>]*>Completed/)
+  })
+
+  it("does not duplicate current incidents in the Overview history preview", () => {
+    const history: AppHistory = {
+      appKey: app.key,
+      summary: {
+        state: "incident",
+        title: "Current incident: BackOff on Deployment/checkout-api",
+        detail: "Back-off restarting failed container",
+      },
+      incidents: [
+        {
+          severity: "warning",
+          title: "BackOff on Deployment/checkout-api",
+          object: "Deployment/checkout-api",
+        },
+      ],
+    };
+    const html = renderDetail({ history });
+
+    expect(html).not.toContain("BackOff on checkout-api");
+    expect(html).not.toContain(
+      "Current incident: BackOff on Deployment/checkout-api",
+    );
+    expect(html).not.toContain("Latest change");
+  });
+
+  it('previews retained incidents in Overview when no current issue card exists', () => {
+    const healthyApp: AppRow = { ...app, events: [] }
+    const history: AppHistory = {
+      appKey: healthyApp.key,
+      summary: { state: 'incident', title: 'Current incident: FailedScheduling on Pod/checkout-api-abc', detail: '0/9 nodes are available' },
+      incidents: [{ severity: 'warning', title: 'FailedScheduling on Pod/checkout-api-abc', object: 'Pod/checkout-api-abc' }],
+    }
+    const html = renderDetail({
+      app: healthyApp,
+      history,
+    })
+
+    expect(html).toContain('Latest incident')
+    expect(html).toContain('Current incident: FailedScheduling on Pod/checkout-api-abc')
+    expect(html).toContain('View history')
+  })
+
+  it('does not duplicate retained incidents when the host renders current issues', () => {
+    const healthyApp: AppRow = { ...app, events: [] }
+    const history: AppHistory = {
+      appKey: healthyApp.key,
+      summary: { state: 'incident', title: 'Current incident: FailedScheduling on Pod/checkout-api-abc' },
+    }
+    const html = renderDetail({
+      app: healthyApp,
+      history,
+      renderOverviewIssues: () => <div>Operational Issues (1)</div>,
+      hasOverviewIssues: true,
+    })
+
+    expect(html).toContain('Operational Issues (1)')
+    expect(html).not.toContain('Latest incident')
+    expect(html).not.toContain('Current incident: FailedScheduling on Pod/checkout-api-abc')
+  })
+
+  it('does not report idle zero-replica workloads as application issues', () => {
+    const idleApp: AppRow = {
+      ...app,
+      health: "healthy",
+      events: [],
+      workloads: [
+        {
+          kind: "CronJob",
+          namespace: "prod",
+          name: "checkout-cleanup",
+          workload_class: "job",
+          health: "neutral",
+          ready: 0,
+          desired: 0,
+          restarts: 0,
+          version: "1.2.3",
+        },
+        {
+          kind: "Job",
+          namespace: "prod",
+          name: "checkout-cleanup-123",
+          workload_class: "job",
+          health: "unknown",
+          ready: 0,
+          desired: 0,
+          restarts: 0,
+          version: "1.2.3",
+        },
+      ],
+    };
+    const html = renderDetail({ app: idleApp });
+
+    expect(html).not.toContain('No application issues detected')
+    expect(html).not.toContain('needs attention')
+  })
+
+  it("does not link ambiguous event objects to a workload", () => {
+    const ambiguousApp: AppRow = {
+      ...app,
+      workloads: [
+        ...app.workloads,
+        {
+          kind: "Deployment",
+          namespace: "canary",
+          name: "checkout-api",
+          workload_class: "service",
+          health: "healthy",
+          ready: 1,
+          desired: 1,
+          restarts: 0,
+          version: "1.2.3",
+        },
+      ],
+    };
+    const html = renderDetail({
+      app: ambiguousApp,
+      selectedView: "history",
+      onSelectView: () => {},
+      selectedWorkloadKey: null,
+      onSelectWorkload: () => {},
+    });
+
+    expect(html).toContain("Deployment/checkout-api");
+    expect(html).not.toContain("Open workload");
+  });
+
+  it("shows batch activity and injected operational issues on the application overview", () => {
+    const batchApp: AppRow = {
+      key: "app:prod:batch",
+      name: "batch",
+      namespace: "prod",
+      health: "unhealthy",
+      workload_class: "job",
+      workloads: [
+        {
+          kind: "CronJob",
+          namespace: "prod",
+          name: "nightly",
+          workload_class: "job",
+          health: "healthy",
+          ready: 0,
+          desired: 0,
+          restarts: 0,
+          batch: {
+            schedule: "0 3 * * *",
+            retainedRuns: 3,
+            succeededRuns: 3,
+            failedRuns: 0,
+            activeRuns: 0,
+            latestRunName: "nightly-29720340",
+            latestRunPhase: "Succeeded",
+            latestStartedAt: "2026-07-05T10:25:00Z",
+            lastSuccessfulAt: "2026-07-05T10:29:00Z",
+          },
+        },
+        {
+          kind: "Job",
+          namespace: "prod",
+          name: "ad-hoc-import",
+          workload_class: "job",
+          health: "unhealthy",
+          ready: 0,
+          desired: 1,
+          restarts: 0,
+          batch: {
+            retainedRuns: 1,
+            succeededRuns: 0,
+            failedRuns: 1,
+            activeRuns: 0,
+            latestRunName: "ad-hoc-import",
+            latestRunPhase: "Failed",
+            latestStartedAt: "2026-07-05T09:25:00Z",
+            message: "Job has reached the specified backoff limit",
+          },
+        },
+      ],
+    };
+    const html = renderDetail({
+      app: batchApp,
+      renderOverviewIssues: () => <div>Operational Issues (1)</div>,
+    });
+
+    expect(html).toContain("Application views");
+    expect(html).toContain("Operational Issues (1)");
+    expect(html).not.toContain("Batch activity");
+    const workloadsPanel = html.indexOf(">Workloads</h2>");
+    expect(workloadsPanel).toBeGreaterThanOrEqual(0);
+    expect(html).toContain("Batch resources");
+    expect(html).toContain("Active runs");
+    expect(html).toContain("Retained runs");
+    expect(html).toContain("1 CronJob / 1 Job");
+    expect(html).toContain("3 succeeded / 1 failed");
+    expect(html).toContain("nightly-29720340");
+    expect(html).toContain("ad-hoc-import");
+    expect(html).not.toContain("ad-hoc-import is down");
+    expect(html).not.toContain("Runtime for");
+    expect(html).toContain('2xl:grid-cols-4');
+  });
+
+  it("uses the delivery verdict in a successful batch application header", () => {
+    const batchApp: AppRow = {
+      key: "app:prod:batch",
+      name: "batch",
+      namespace: "prod",
+      health: "unhealthy",
+      runtimeHealth: "unhealthy",
+      workload_class: "job",
+      sourceStatus: { sync: "Synced", health: "Degraded" },
+      workloads: [
+        {
+          kind: "CronJob",
+          namespace: "prod",
+          name: "nightly",
+          workload_class: "job",
+          health: "unhealthy",
+          ready: 0,
+          desired: 0,
+          restarts: 0,
+          batch: {
+            retainedRuns: 2,
+            succeededRuns: 1,
+            failedRuns: 1,
+            activeRuns: 0,
+            latestRunPhase: "Succeeded",
+          },
+        },
+      ],
+    };
+    const html = renderDetail({ app: batchApp });
+
+    expect(html).toMatch(/<span class="text-sm font-semibold">Degraded<\/span>/);
+    expect(html).toContain("Succeeded");
+  });
+});