@skyhook-io/radar-app 1.8.7 → 1.8.8

package/src/components/cost/WorkloadCostTab.tsx

@@ -0,0 +1,372 @@
+import { useEffect, useState } from 'react'
+import { AlertCircle, DollarSign, HelpCircle, Loader2, TrendingUp } from 'lucide-react'
+import {
+  useOpenCostWorkload,
+  useOpenCostWorkloadTrend,
+  COST_DISCOVERY_GRACE_MS,
+  type CostTimeRange,
+  type CostUnavailableReason,
+  type OpenCostWorkloadDetailResponse,
+  type OpenCostWorkloadTrendResponse,
+} from '../../api/client'
+import { Tooltip } from '../ui/Tooltip'
+import { CostTimeRangeSelector, StackedAreaChart } from './CostTrendChart'
+import {
+  formatCostPerHour,
+  formatHistoricalSpend,
+  formatProjectedDailyRate,
+  formatProjectedMonthlyCost,
+} from './format'
+import { CurrentAllocationUse } from './CurrentAllocationUse'
+import { costUnavailableReasonFromError } from './errors'
+
+type WorkloadCostState =
+  | 'loading'
+  | 'data'
+  | 'partial_missing_history'
+  | 'partial_missing_current'
+  | 'zero'
+  | 'load_error'
+  | CostUnavailableReason
+
+interface WorkloadCostQueryStatus {
+  currentLoading?: boolean
+  trendLoading?: boolean
+  currentError?: unknown
+  trendError?: unknown
+}
+
+interface WorkloadCostTabProps {
+  kind: string
+  namespace: string
+  name: string
+}
+
+export function WorkloadCostTab({ kind, namespace, name }: WorkloadCostTabProps) {
+  const [range, setRange] = useState<CostTimeRange>('24h')
+  const [noPrometheusSince, setNoPrometheusSince] = useState<number | null>(null)
+  const currentQuery = useOpenCostWorkload(kind, namespace, name)
+  const trendQuery = useOpenCostWorkloadTrend(kind, namespace, name, range)
+  const trendMatchesRange = trendQuery.data?.range === range
+  const trendData = trendMatchesRange ? trendQuery.data : undefined
+  const trendLoading =
+    trendQuery.isLoading ||
+    (trendQuery.isFetching && Boolean(trendQuery.data) && !trendMatchesRange)
+
+  const state = getWorkloadCostState(currentQuery.data, trendData, {
+    currentLoading: currentQuery.isLoading,
+    trendLoading,
+    currentError: currentQuery.error,
+    trendError: trendQuery.error,
+  })
+
+  useEffect(() => {
+    if (state === 'no_prometheus') {
+      setNoPrometheusSince((prev) => prev ?? Date.now())
+    } else {
+      setNoPrometheusSince(null)
+    }
+  }, [state])
+
+  if (state === 'loading') {
+    return (
+      <div className="flex h-full min-h-[320px] items-center justify-center text-theme-text-tertiary">
+        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+        Loading workload cost…
+      </div>
+    )
+  }
+
+  if (
+    state === 'no_prometheus' ||
+    state === 'no_metrics' ||
+    state === 'query_error' ||
+    state === 'access_denied' ||
+    state === 'not_found' ||
+    state === 'load_error'
+  ) {
+    const discoveryAgeMs = noPrometheusSince == null ? 0 : Date.now() - noPrometheusSince
+    if (state === 'no_prometheus' && discoveryAgeMs < COST_DISCOVERY_GRACE_MS) {
+      return (
+        <WorkloadCostDiscovering
+          isFetching={currentQuery.isFetching || trendQuery.isFetching}
+          onRetry={() => {
+            setNoPrometheusSince(Date.now())
+            currentQuery.refetch()
+            trendQuery.refetch()
+          }}
+        />
+      )
+    }
+    return <WorkloadCostUnavailable state={state} />
+  }
+
+  const current = currentQuery.data?.current
+  const trend = trendData
+  const points = trend?.available ? (trend.dataPoints ?? []) : []
+  const hasTrend = points.length >= 2 && points.some((p) => p.value > 0)
+  const hasCurrent = Boolean(current)
+  const hourly = current?.hourlyCost ?? 0
+  const windowTotal = trend?.available ? (trend.windowTotalCost ?? 0) : 0
+  const cpuCost = current?.cpuCost ?? 0
+  const memoryCost = current?.memoryCost ?? 0
+  const windowSpendValue = formatHistoricalSpend(
+    points.length,
+    windowTotal,
+    trendLoading || state === 'partial_missing_history',
+  )
+
+  return (
+    <div className="mx-auto w-full max-w-[1600px] space-y-4">
+      <section className="rounded-lg border border-theme-border bg-theme-surface/50">
+        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-theme-border px-4 py-3">
+          <div className="flex items-center gap-2">
+            <TrendingUp className="h-4 w-4 text-theme-text-tertiary" />
+            <div>
+              <div className="flex items-center gap-1.5">
+                <div className="text-sm font-semibold text-theme-text-primary">
+                  Historical compute cost
+                </div>
+                <MetricInfoTooltip content="Dollars are based on OpenCost CPU and memory allocation over time, not raw utilization. OpenCost allocation uses the greater of requested or observed resources." />
+              </div>
+              <div className="text-xs text-theme-text-tertiary">
+                OpenCost CPU and memory allocation rate ($/hr) attributed by workload ownership
+              </div>
+            </div>
+          </div>
+          <CostTimeRangeSelector value={range} onChange={setRange} />
+        </div>
+
+        <div className="grid gap-4 p-4 lg:grid-cols-[220px_minmax(0,1fr)]">
+          <div className="space-y-4">
+            <MetricBlock
+              label={`Spend over ${range}`}
+              value={windowSpendValue}
+              subvalue={
+                state === 'partial_missing_history' ? 'Historical data unavailable' : undefined
+              }
+            />
+            <MetricBlock
+              label="Projected monthly"
+              value={hasCurrent ? formatProjectedMonthlyCost(hourly) : '—'}
+              subvalue={
+                hasCurrent
+                  ? `${formatCostPerHour(hourly)} current rate`
+                  : 'Current allocation unavailable'
+              }
+            />
+          </div>
+          <div className="min-w-0">
+            {trendLoading ? (
+              <div className="flex h-[240px] items-center justify-center rounded-md border border-dashed border-theme-border bg-theme-base/60 text-sm text-theme-text-tertiary">
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Loading historical cost…
+              </div>
+            ) : hasTrend ? (
+              <StackedAreaChart series={[{ namespace: 'Allocation rate', dataPoints: points }]} />
+            ) : (
+              <div className="flex h-[240px] items-center justify-center rounded-md border border-dashed border-theme-border bg-theme-base/60 text-sm text-theme-text-tertiary">
+                No historical workload owner cost points for this range.
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {state === 'partial_missing_history' && (
+        <div className="flex items-start gap-2 rounded-lg border border-theme-border bg-theme-base px-3 py-2 text-sm text-theme-text-secondary">
+          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-theme-text-tertiary" />
+          <span>
+            Current cost is available, but historical workload owner metrics are not available for
+            this range.
+          </span>
+        </div>
+      )}
+      {state === 'partial_missing_current' && (
+        <div className="flex items-start gap-2 rounded-lg border border-theme-border bg-theme-base px-3 py-2 text-sm text-theme-text-secondary">
+          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-theme-text-tertiary" />
+          <span>
+            Historical cost is available, but current workload allocation metrics are not available.
+          </span>
+        </div>
+      )}
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <MetricTile label="Replicas" value={hasCurrent ? String(current?.replicas ?? 0) : '—'} />
+        <MetricTile
+          label="Projected daily"
+          value={hasCurrent ? formatProjectedDailyRate(hourly) : '—'}
+          subvalue={
+            hasCurrent
+              ? `${formatCostPerHour(hourly)} current hourly rate`
+              : 'Current allocation unavailable'
+          }
+        />
+      </div>
+
+      <CurrentAllocationUse
+        dataAvailable={hasCurrent}
+        cpuCost={cpuCost}
+        memoryCost={memoryCost}
+        hourlyCost={hourly}
+        cpuAllocationUse={current?.cpuAllocationUse ?? 0}
+        memoryAllocationUse={current?.memoryAllocationUse ?? 0}
+        cpuUsageAvailable={current?.cpuUsageAvailable ?? false}
+        memoryUsageAvailable={current?.memoryUsageAvailable ?? false}
+      />
+
+      <div className="text-xs text-theme-text-tertiary">
+        Powered by OpenCost via Prometheus. Historical spend uses the selected range; projected
+        monthly values multiply the current hourly allocation. Storage/PVC attribution remains at
+        namespace and cluster level.
+      </div>
+    </div>
+  )
+}
+
+export function getWorkloadCostState(
+  current: OpenCostWorkloadDetailResponse | undefined,
+  trend: OpenCostWorkloadTrendResponse | undefined,
+  status: boolean | WorkloadCostQueryStatus,
+): WorkloadCostState {
+  const queryStatus: WorkloadCostQueryStatus =
+    typeof status === 'boolean' ? { currentLoading: status, trendLoading: status } : status
+  const loading = Boolean(queryStatus.currentLoading || queryStatus.trendLoading)
+  const queryError = Boolean(queryStatus.currentError || queryStatus.trendError)
+
+  const currentRow = current?.available ? current.current : undefined
+  const trendHasData =
+    trend?.available === true && (trend.dataPoints ?? []).some((p) => p.value > 0)
+  if (currentRow) {
+    if (queryStatus.trendLoading && !trend) return 'data'
+    if (queryStatus.trendError || (trend?.available === false && trend.reason !== 'no_metrics'))
+      return 'partial_missing_history'
+    if (currentRow.hourlyCost === 0 && currentRow.replicas === 0 && !trendHasData) return 'zero'
+    if (!trend?.available) return 'partial_missing_history'
+    return 'data'
+  }
+  if (trendHasData) return 'partial_missing_current'
+  const reason =
+    current?.reason ??
+    trend?.reason ??
+    costUnavailableReasonFromError(queryStatus.currentError) ??
+    costUnavailableReasonFromError(queryStatus.trendError)
+  if (
+    reason === 'no_prometheus' ||
+    reason === 'query_error' ||
+    reason === 'access_denied' ||
+    reason === 'not_found'
+  )
+    return reason
+  if (queryError) return 'load_error'
+  if (loading) return 'loading'
+
+  return 'no_metrics'
+}
+
+function WorkloadCostDiscovering({
+  isFetching,
+  onRetry,
+}: {
+  isFetching: boolean
+  onRetry: () => void
+}) {
+  return (
+    <div className="flex h-full min-h-[320px] items-center justify-center">
+      <div className="flex max-w-md flex-col items-center gap-3 text-center text-theme-text-secondary">
+        <Loader2 className="h-8 w-8 animate-spin text-theme-text-tertiary/60" />
+        <div>
+          <p className="text-sm font-medium text-theme-text-primary">
+            Looking for Prometheus cost data…
+          </p>
+          <p className="mt-1 text-xs text-theme-text-tertiary">
+            First discovery can take a few seconds while Radar checks cluster services and opens a
+            local port-forward.
+          </p>
+        </div>
+        <button
+          onClick={onRetry}
+          disabled={isFetching}
+          className="text-xs text-accent-text transition-colors hover:text-theme-text-primary disabled:cursor-not-allowed disabled:text-theme-text-disabled"
+        >
+          {isFetching ? 'Checking…' : 'Check again'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function WorkloadCostUnavailable({ state }: { state: CostUnavailableReason | 'load_error' }) {
+  const message =
+    state === 'no_prometheus'
+      ? 'Prometheus not found. OpenCost workload cost requires Prometheus or VictoriaMetrics.'
+      : state === 'query_error'
+        ? 'Cost data is temporarily unavailable. Prometheus was found, but workload cost queries failed.'
+        : state === 'access_denied'
+          ? 'You do not have access to view cost for this workload.'
+          : state === 'not_found'
+            ? 'This workload no longer exists.'
+            : state === 'load_error'
+              ? 'Could not load workload cost data. Check access to this workload and try again.'
+              : 'OpenCost workload metrics were not found for this workload.'
+
+  return (
+    <div className="flex h-full min-h-[320px] items-center justify-center">
+      <div className="flex max-w-md flex-col items-center gap-3 text-center text-theme-text-secondary">
+        <DollarSign className="h-8 w-8 text-theme-text-tertiary/50" />
+        <div className="text-sm">{message}</div>
+      </div>
+    </div>
+  )
+}
+
+function MetricBlock({
+  label,
+  value,
+  subvalue,
+}: {
+  label: string
+  value: string
+  subvalue?: string
+}) {
+  return (
+    <div>
+      <div className="text-xs font-medium uppercase text-theme-text-tertiary">{label}</div>
+      <div className="mt-1 text-2xl font-semibold text-theme-text-primary tabular-nums">
+        {value}
+      </div>
+      {subvalue && <div className="mt-1 text-xs text-theme-text-tertiary">{subvalue}</div>}
+    </div>
+  )
+}
+
+function MetricTile({
+  label,
+  value,
+  subvalue,
+  tooltip,
+}: {
+  label: string
+  value: string
+  subvalue?: string
+  tooltip?: string
+}) {
+  return (
+    <div className="rounded-lg border border-theme-border bg-theme-surface/50 p-4">
+      <div className="flex items-center gap-1.5">
+        <div className="text-xs font-medium uppercase text-theme-text-tertiary">{label}</div>
+        {tooltip && <MetricInfoTooltip content={tooltip} />}
+      </div>
+      <div className="mt-1 text-lg font-semibold text-theme-text-primary tabular-nums">{value}</div>
+      {subvalue && <div className="mt-1 text-xs text-theme-text-tertiary">{subvalue}</div>}
+    </div>
+  )
+}
+
+function MetricInfoTooltip({ content }: { content: string }) {
+  return (
+    <Tooltip content={content} className="max-w-[280px] whitespace-normal text-left" delay={150}>
+      <HelpCircle className="h-3.5 w-3.5 cursor-help text-theme-text-tertiary transition-colors hover:text-theme-text-secondary" />
+    </Tooltip>
+  )
+}

package/src/components/cost/cloud-console.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { clusterCloudConsoleLink, nodeCloudConsoleLink } from './cloud-console'
+
+describe('cloud console links', () => {
+  it('builds Google Compute Engine node links from GCE provider IDs', () => {
+    expect(nodeCloudConsoleLink('gce://proj-1/us-east1-b/gke-node-1')).toEqual({
+      label: 'Open in Google Cloud Console',
+      url: 'https://console.cloud.google.com/compute/instancesDetail/zones/us-east1-b/instances/gke-node-1?project=proj-1',
+    })
+  })
+
+  it('builds AWS EC2 node links from AWS provider IDs', () => {
+    expect(nodeCloudConsoleLink('aws:///us-east-1a/i-0123456789abcdef0')).toEqual({
+      label: 'Open in AWS Console',
+      url: 'https://us-east-1.console.aws.amazon.com/ec2/home?region=us-east-1#InstanceDetails:instanceId=i-0123456789abcdef0',
+    })
+  })
+
+  it('omits ambiguous node links', () => {
+    expect(nodeCloudConsoleLink('aws:///us-east-1-wl1-bos-wlz-1/i-0123456789abcdef0')).toBeNull()
+    expect(nodeCloudConsoleLink('azure:///subscriptions/123/resourceGroups/rg/providers/Microsoft.Compute/virtualMachines/vm')).toBeNull()
+  })
+
+  it('builds high-confidence cluster links from canonical contexts', () => {
+    expect(clusterCloudConsoleLink('gke_proj-1_us-east1_nonprod')).toEqual({
+      label: 'Open cluster in Google Cloud Console',
+      url: 'https://console.cloud.google.com/kubernetes/clusters/details/us-east1/nonprod/details?project=proj-1',
+    })
+    expect(clusterCloudConsoleLink('arn:aws:eks:us-west-2:123456789012:cluster/prod')).toEqual({
+      label: 'Open cluster in AWS Console',
+      url: 'https://us-west-2.console.aws.amazon.com/eks/home?region=us-west-2#/clusters/prod',
+    })
+  })
+
+  it('omits renamed or non-commercial-partition cluster contexts', () => {
+    expect(clusterCloudConsoleLink('nonprod-cluster-us-east1')).toBeNull()
+    expect(clusterCloudConsoleLink('arn:aws-us-gov:eks:us-gov-west-1:123456789012:cluster/prod')).toBeNull()
+  })
+})

package/src/components/cost/cloud-console.ts

@@ -0,0 +1,81 @@
+export interface CloudConsoleLink {
+  label: string
+  url: string
+}
+
+export function nodeCloudConsoleLink(providerID?: string): CloudConsoleLink | null {
+  if (!providerID) return null
+
+  const gce = parseGCEProviderID(providerID)
+  if (gce) {
+    return {
+      label: 'Open in Google Cloud Console',
+      url: `https://console.cloud.google.com/compute/instancesDetail/zones/${encodeURIComponent(gce.zone)}/instances/${encodeURIComponent(gce.instance)}?project=${encodeURIComponent(gce.project)}`,
+    }
+  }
+
+  const aws = parseAWSProviderID(providerID)
+  if (aws) {
+    return {
+      label: 'Open in AWS Console',
+      url: `https://${aws.region}.console.aws.amazon.com/ec2/home?region=${aws.region}#InstanceDetails:instanceId=${encodeURIComponent(aws.instanceID)}`,
+    }
+  }
+
+  return null
+}
+
+export function clusterCloudConsoleLink(context?: string): CloudConsoleLink | null {
+  if (!context) return null
+
+  const gke = parseGKEContext(context)
+  if (gke) {
+    return {
+      label: 'Open cluster in Google Cloud Console',
+      url: `https://console.cloud.google.com/kubernetes/clusters/details/${encodeURIComponent(gke.location)}/${encodeURIComponent(gke.cluster)}/details?project=${encodeURIComponent(gke.project)}`,
+    }
+  }
+
+  const eks = parseEKSContext(context)
+  if (eks) {
+    return {
+      label: 'Open cluster in AWS Console',
+      url: `https://${eks.region}.console.aws.amazon.com/eks/home?region=${eks.region}#/clusters/${encodeURIComponent(eks.cluster)}`,
+    }
+  }
+
+  return null
+}
+
+function parseGCEProviderID(providerID: string): { project: string; zone: string; instance: string } | null {
+  if (!providerID.startsWith('gce://')) return null
+  const parts = providerID.replace(/^gce:\/\/\/?/, '').split('/')
+  if (parts.length !== 3 || parts.some((part) => part === '')) return null
+  return { project: parts[0], zone: parts[1], instance: parts[2] }
+}
+
+function parseAWSProviderID(providerID: string): { region: string; instanceID: string } | null {
+  if (!providerID.startsWith('aws://')) return null
+  const parts = providerID.replace(/^aws:\/\/\/?/, '').split('/')
+  if (parts.length !== 2 || parts.some((part) => part === '')) return null
+  const region = regionFromAWSZone(parts[0])
+  if (!region) return null
+  return { region, instanceID: parts[1] }
+}
+
+function parseGKEContext(context: string): { project: string; location: string; cluster: string } | null {
+  const match = /^gke_([^_]+)_([^_]+)_(.+)$/.exec(context)
+  if (!match) return null
+  return { project: match[1], location: match[2], cluster: match[3] }
+}
+
+function parseEKSContext(context: string): { region: string; cluster: string } | null {
+  const match = /^arn:aws:eks:([^:]+):\d{12}:cluster\/(.+)$/.exec(context)
+  if (!match) return null
+  return { region: match[1], cluster: match[2] }
+}
+
+function regionFromAWSZone(zone: string): string | null {
+  const match = /^([a-z]{2}-[a-z]+-\d)[a-z]$/.exec(zone)
+  return match?.[1] ?? null
+}

package/src/components/cost/errors.ts

@@ -0,0 +1,8 @@
+import { ApiError, type CostUnavailableReason } from '../../api/client'
+
+export function costUnavailableReasonFromError(error: unknown): CostUnavailableReason | undefined {
+  if (!(error instanceof ApiError)) return undefined
+  if (error.status === 403) return 'access_denied'
+  if (error.status === 404) return 'not_found'
+  return undefined
+}

package/src/components/cost/format.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest'
+import {
+  formatCostPerHour,
+  formatHistoricalSpend,
+  formatProjectedDailyRate,
+  formatProjectedMonthlyCost,
+  formatProjectedMonthlyRate,
+} from './format'
+
+describe('cost formatters', () => {
+  it('formats projected run rates from hourly allocation', () => {
+    expect(formatProjectedDailyRate(0.1)).toBe('~$2.40/day')
+    expect(formatProjectedMonthlyCost(1)).toBe('~$730.00')
+    expect(formatProjectedMonthlyRate(0.1)).toBe('~$73.00/mo')
+  })
+
+  it('keeps hourly rates explicit', () => {
+    expect(formatCostPerHour(0.1)).toBe('$0.100/hr')
+  })
+
+  it('does not turn insufficient history into zero spend', () => {
+    expect(formatHistoricalSpend(1, 0, false)).toBe('—')
+    expect(formatHistoricalSpend(2, 0, false)).toBe('$0.00')
+    expect(formatHistoricalSpend(2, 1.25, false)).toBe('~$1.25')
+    expect(formatHistoricalSpend(2, 1.25, true)).toBe('—')
+  })
+})

package/src/components/cost/format.ts

@@ -0,0 +1,46 @@
+export const COST_HOURS_PER_DAY = 24
+export const COST_HOURS_PER_MONTH = 730
+
+export function formatCostAxis(value: number): string {
+  if (!Number.isFinite(value) || value <= 0) return '$0'
+  if (value >= 1000) return `$${(value / 1000).toFixed(0)}k`
+  if (value >= 1) return `$${value.toFixed(1)}`
+  if (value >= 0.01) return `$${value.toFixed(2)}`
+  if (value >= 0.0001) return `$${value.toFixed(4)}`
+  if (value >= 0.00001) return `$${value.toFixed(5)}`
+  return '<$0.00001'
+}
+
+export function formatCost(value: number): string {
+  if (!Number.isFinite(value) || value <= 0) return '$0.00'
+  if (value >= 1000) return `$${(value / 1000).toFixed(1)}k`
+  if (value >= 1) return `$${value.toFixed(2)}`
+  if (value >= 0.01) return `$${value.toFixed(3)}`
+  if (value >= 0.0001) return `$${value.toFixed(4)}`
+  return formatCostAxis(value)
+}
+
+export function formatCostPerHour(value: number): string {
+  return `${formatCost(value)}/hr`
+}
+
+export function formatHistoricalSpend(pointCount: number, windowTotalCost: number, unavailable: boolean): string {
+  if (unavailable || pointCount < 2) return '—'
+  return windowTotalCost > 0 ? `~${formatCost(windowTotalCost)}` : formatCost(0)
+}
+
+export function formatProjectedDailyCost(hourlyCost: number): string {
+  return `~${formatCost(hourlyCost * COST_HOURS_PER_DAY)}`
+}
+
+export function formatProjectedDailyRate(hourlyCost: number): string {
+  return `${formatProjectedDailyCost(hourlyCost)}/day`
+}
+
+export function formatProjectedMonthlyCost(hourlyCost: number): string {
+  return `~${formatCost(hourlyCost * COST_HOURS_PER_MONTH)}`
+}
+
+export function formatProjectedMonthlyRate(hourlyCost: number): string {
+  return `${formatProjectedMonthlyCost(hourlyCost)}/mo`
+}

package/src/components/cost/kinds.ts

@@ -0,0 +1,5 @@
+const OPEN_COST_WORKLOAD_KINDS = new Set(['Deployment', 'StatefulSet', 'DaemonSet'])
+
+export function isOpenCostWorkloadKind(kind: string): boolean {
+  return OPEN_COST_WORKLOAD_KINDS.has(kind)
+}

package/src/components/diagnose/AISettings.tsx

@@ -1,6 +1,8 @@
-// The "AI Diagnosis" section of the Settings dialog. Controlled by the dialog:
-// it edits a STAGED draft and is committed on Save (like the rest of Settings),
-// not on every keystroke. Renders nothing when no supported agent CLI is installed.
+// The agent/model/effort controls + a clear-history action for the Settings
+// "AI diagnose" tab. Controlled by the dialog: it edits a STAGED draft committed
+// on Save (like the rest of Settings), not on every keystroke. The heading,
+// description, and Save button live in the dialog so this tab matches the other
+// Settings tabs' layout — this renders only the controls (no card, no heading).
 import { useState } from "react";
 import { Trash2 } from "lucide-react";
 import { clearHistory, type AgentInfo } from "../../api/diagnose";
@@ -95,14 +97,7 @@ export function AISettingsSection({
 }) {
   if (!available || agents.length === 0) return null;
   return (
-    <section className="mb-5 rounded-md border border-theme-border bg-theme-elevated/50 p-3">
-      <h3 className="mb-1 text-sm font-medium text-theme-text-primary">
-        AI Diagnosis
-      </h3>
-      <p className="mb-3 text-xs text-theme-text-tertiary">
-        Investigations run on your own machine via your installed agent CLI — no
-        Radar cloud, no API key. These preferences apply to new investigations.
-      </p>
+    <>
       <AgentControls
         agents={agents}
         selectedAgent={draft.agent}
@@ -116,6 +111,6 @@ export function AISettingsSection({
         onSetEffort={(v) => onChange({ effort: v })}
       />
       <ClearHistoryRow onCleared={onHistoryCleared} />
-    </section>
+    </>
   );
 }

package/src/components/gitops/ArgoResourceDiffLoader.tsx

@@ -0,0 +1,23 @@
+import { ArgoResourceDiff } from '@skyhook-io/k8s-ui'
+import type { GitOpsInsightRef } from '@skyhook-io/k8s-ui'
+import { useArgoResourceDiff } from '../../api/client'
+
+interface ArgoResourceDiffLoaderProps {
+  appNamespace: string
+  appName: string
+  resourceRef: GitOpsInsightRef
+}
+
+// Host wrapper: fetches the Argo CD resource diff and hands the data to the
+// pure k8s-ui presentation component. Mirrors the data-in-web / render-in-
+// k8s-ui split the resource renderers use for their host-wired data.
+export function ArgoResourceDiffLoader({ appNamespace, appName, resourceRef }: ArgoResourceDiffLoaderProps) {
+  const { data, isLoading, error } = useArgoResourceDiff(appNamespace, appName, resourceRef)
+  return (
+    <ArgoResourceDiff
+      diff={data ?? null}
+      loading={isLoading}
+      error={(error as Error | null)?.message ?? null}
+    />
+  )
+}