@skyhook-io/radar-app 1.8.6 → 1.8.7

package/src/components/resource/PrometheusChartsGrid.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react'
-import { BarChart3, ChevronDown, ChevronRight, Loader2, Wifi, WifiOff } from 'lucide-react'
+import { Loader2, Wifi, WifiOff } from 'lucide-react'
 import {
   AreaChart,
   SeriesLegend,
@@ -11,11 +11,9 @@ import {
   usePrometheusStatus,
   usePrometheusConnect,
   usePrometheusResourceMetrics,
-  usePrometheusRightsizing,
   useAutoPromConnect,
   type PrometheusMetricCategory,
   type PrometheusTimeRange,
-  type RightsizingTone,
 } from '../../api/client'
 import {
   MetricsSummary,
@@ -57,7 +55,6 @@ export function PrometheusChartsGrid({
   const showRestartLane = isSupported && kind !== 'Node'
 
   const [timeRange, setTimeRange] = useState<PrometheusTimeRange>('1h')
-  const [diskExpanded, setDiskExpanded] = useState(false)
 
   const categories = kind === 'Node' ? NODE_CATEGORIES : WORKLOAD_CATEGORIES
 
@@ -112,7 +109,6 @@ export function PrometheusChartsGrid({
   const findCategory = (key: PrometheusMetricCategory): CategoryDef | undefined =>
     categories.find(c => c.key === key)
 
-  // Disk I/O is collapsed by default — niche metric.
   const primaryCats: { def: CategoryDef; refLines?: ReferenceLine[] }[] = []
   const cpu = findCategory('cpu')
   if (cpu) primaryCats.push({ def: cpu, refLines: cpuRefLines })
@@ -125,19 +121,16 @@ export function PrometheusChartsGrid({
     if (tx) primaryCats.push({ def: tx })
   }
   const disk = findCategory('filesystem')
+  const chartPanels = disk ? [...primaryCats, { def: disk }] : primaryCats
 
   return (
     <div className="flex flex-col h-full overflow-auto">
-      <div className="shrink-0 flex items-center justify-between px-4 py-2.5 border-b border-theme-border bg-theme-surface/50">
-        <div className="flex items-center gap-2 text-sm font-medium text-theme-text-secondary">
-          <BarChart3 className="w-4 h-4 text-theme-text-tertiary" />
-          Metrics
-          <WorkloadHealthBadge kind={kind} namespace={namespace} name={name} />
-        </div>
+      <div className="flex shrink-0 justify-end px-4 pt-3">
         <select
+          aria-label="Metrics time range"
           value={timeRange}
           onChange={e => setTimeRange(e.target.value as PrometheusTimeRange)}
-          className="px-2 py-1 text-xs rounded-md bg-theme-elevated border border-theme-border text-theme-text-secondary focus:outline-none focus:ring-1 focus:ring-blue-500/50"
+          className="rounded-md border border-theme-border bg-theme-elevated px-2 py-1 text-xs text-theme-text-secondary shadow-theme-sm focus:outline-none focus:ring-1 focus:ring-accent/50"
         >
           {TIME_RANGES.map(tr => (
             <option key={tr.value} value={tr.value}>{tr.label}</option>
@@ -154,7 +147,7 @@ export function PrometheusChartsGrid({
       )}
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3 p-4">
-        {primaryCats.map(({ def, refLines }) => (
+        {chartPanels.map(({ def, refLines }) => (
           <MetricsPanel
             key={def.key}
             category={def}
@@ -166,30 +159,6 @@ export function PrometheusChartsGrid({
           />
         ))}
       </div>
-
-      {disk && (
-        <div className="px-4 pb-4">
-          <button
-            type="button"
-            onClick={() => setDiskExpanded(v => !v)}
-            className="flex items-center gap-1.5 text-xs font-medium text-theme-text-tertiary hover:text-theme-text-secondary py-1"
-          >
-            {diskExpanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
-            Disk I/O
-          </button>
-          {diskExpanded && (
-            <div className="mt-2">
-              <MetricsPanel
-                category={disk}
-                kind={kind}
-                namespace={namespace}
-                name={name}
-                timeRange={timeRange}
-              />
-            </div>
-          )}
-        </div>
-      )}
     </div>
   )
 }
@@ -269,49 +238,6 @@ function SaturationChip({ ratio, against }: { ratio: number; against: 'limit' |
   return <span className={`badge badge-sm ${SEVERITY_BADGE[tone]}`}>{label}</span>
 }
 
-// Severity ordering for rightsizing tones. Aligned with `Tone` constants in
-// `internal/prometheus/rightsizing.go` — adding a new tone there triggers a
-// TypeScript exhaustiveness error on the Record key set here.
-const TONE_RANK: Record<RightsizingTone, number> = {
-  ok: 0,
-  info: 1,
-  warning: 2,
-  alert: 3,
-  critical: 4,
-}
-
-function WorkloadHealthBadge({ kind, namespace, name }: { kind: string; namespace: string; name: string }) {
-  const supported = kind === 'Deployment' || kind === 'StatefulSet' || kind === 'DaemonSet'
-  const { data, error } = usePrometheusRightsizing(kind, namespace, name, supported)
-  if (!supported) return null
-  // Surface a neutral "Health unknown" pill when the rightsizing endpoint
-  // errors — otherwise an actually-throttled or OOM-risk workload would
-  // silently render as fine while we have no signal to display.
-  if (error && !data) {
-    const msg = error instanceof Error ? error.message : String(error)
-    return (
-      <Tooltip content={`Health check failed: ${msg}`}>
-      <span className={`badge badge-sm ${SEVERITY_BADGE.neutral}`}>Health unknown</span>
-      </Tooltip>
-    )
-  }
-  if (!data?.sampleAvailable || data.rows.length === 0) return null
-
-  const worst = data.rows.reduce<RightsizingTone>(
-    (acc, r) => (TONE_RANK[r.tone] > TONE_RANK[acc] ? r.tone : acc),
-    'ok',
-  )
-  // Skip the chip for the steady-state tones to avoid badge-blindness — we
-  // only want to draw the eye when there's something to address.
-  if (worst === 'ok' || worst === 'info') return null
-
-  const { label, severity }: { label: string; severity: Severity } =
-    worst === 'critical' ? { label: 'OOM risk', severity: 'error' } :
-    worst === 'alert' ? { label: 'CPU throttling', severity: 'alert' } :
-    /* warning */ { label: 'Needs review', severity: 'warning' }
-  return <span className={`badge badge-sm ${SEVERITY_BADGE[severity]}`}>{label}</span>
-}
-
 function PanelLoading() {
   return (
     <div className="flex items-center justify-center h-full min-h-[160px] text-theme-text-tertiary text-xs">

package/src/components/resource/RightsizingStrip.tsx

@@ -29,9 +29,6 @@ export function RightsizingStrip({ kind, namespace, name }: {
   const { data, error, isLoading } = usePrometheusRightsizing(kind, namespace, name, isConnected && supported)
 
   if (!supported || !isConnected || isLoading) return null
-  // Stay consistent with WorkloadHealthBadge — when the rightsizing query
-  // fails, surface a small inline note so the absence of recommendations
-  // doesn't read as "everything is fine."
   if (error && !data) {
     const msg = error instanceof Error ? error.message : String(error)
     return (

package/src/components/resources/ImageFilesystemModal.tsx

@@ -9,6 +9,7 @@ import { formatBytes } from '../../utils/format'
 import { downloadBlob, filterTree } from './file-browser-utils'
 import { Tooltip } from '../ui/Tooltip'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { Input } from '@skyhook-io/k8s-ui'
 
 // Manual fetch function for filesystem (not a hook - gives us full control)
 async function fetchImageFilesystem(
@@ -166,8 +167,7 @@ export function ImageFilesystemModal({
           <div className="p-3 border-b border-theme-border shrink-0">
             <div className="relative">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
-              <input
-                type="text"
+              <Input
                 placeholder="Search files..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}

package/src/components/resources/PodFilesystemModal.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react'
 import { createPortal } from 'react-dom'
 import { X, File, Link2, ChevronRight, AlertTriangle, Loader2, Search, Download, FolderOpen } from 'lucide-react'
-import { PaneLoader } from '@skyhook-io/k8s-ui'
+import { PaneLoader, Input } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
 import type { FileNode } from '../../types'
 import { formatBytes } from '../../utils/format'
@@ -192,8 +192,7 @@ export function PodFilesystemModal({
           {showFilesystem && (
             <div className="relative flex-1 min-w-[200px]">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
-              <input
-                type="text"
+              <Input
                 placeholder="Filter files..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}

package/src/components/resources/ResourceDetailDrawer.tsx

@@ -23,6 +23,8 @@ interface ResourceDetailDrawerProps {
   /** Top offset for the drawer (px). Defaults to Radar's 49px header height;
    *  pass 0 in chromeless embeds where there's no Radar header above it. */
   headerHeight?: number
+  /** Right inset in px so the drawer sits beside a docked side panel (AI), not under it. */
+  rightInset?: number
 }
 
 export function ResourceDetailDrawer(props: ResourceDetailDrawerProps) {

package/src/components/resources/ResourcesView.tsx

@@ -41,6 +41,7 @@ interface ResourcesViewProps {
 
 type SelectedKindInfo = { name: string; kind: string; group: string } | null
 
+const EMPTY_RESOURCE_COUNTS: Record<string, number> = {}
 const LARGE_RESOURCE_LIST_LIMIT = 25000
 const LARGE_RESOURCE_LIST_GUARD_KEYS = new Set([
   'Pod',
@@ -60,6 +61,10 @@ function resourceCountKey(kind: NonNullable<SelectedKindInfo>): string {
   return kind.group ? `${kind.group}/${kind.kind}` : kind.kind
 }
 
+function hasResourceCount(counts: Record<string, number> | undefined, key: string): boolean {
+  return Object.prototype.hasOwnProperty.call(counts ?? {}, key)
+}
+
 export function ResourcesView({ namespaces, selectedResource, onResourceClick, onResourceClickYaml, onKindChange, onClearNamespaces }: ResourcesViewProps) {
   const location = useLocation()
   const navigate = useNavigate()
@@ -181,14 +186,16 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
 
   const selectedCountKey = selectedKind ? resourceCountKey(selectedKind) : ''
   const selectedCount = selectedCountKey ? countsData?.counts[selectedCountKey] : undefined
+  const selectedCountKnown = selectedCountKey ? hasResourceCount(countsData?.counts, selectedCountKey) : false
   const selectedCountUnavailable = selectedCountKey ? countsData?.unavailable?.includes(selectedCountKey) ?? false : false
   const isSelectedKindGuarded = selectedCountKey !== '' && LARGE_RESOURCE_LIST_GUARD_KEYS.has(selectedCountKey)
   const waitingForGuardCount = isSelectedKindGuarded && !countsData && !countsIsError
-  const largeListBlocked = isSelectedKindGuarded && countsData != null && (selectedCountUnavailable || (selectedCount ?? 0) > LARGE_RESOURCE_LIST_LIMIT)
+  const largeListBlocked = isSelectedKindGuarded && countsData != null && (selectedCountUnavailable || (selectedCountKnown && (selectedCount ?? 0) > LARGE_RESOURCE_LIST_LIMIT))
   const selectedKindQueryBlocked = waitingForGuardCount || largeListBlocked
   const podCount = countsData?.counts.Pod
+  const podCountKnown = hasResourceCount(countsData?.counts, 'Pod')
   const podCountUnavailable = countsData?.unavailable?.includes('Pod') ?? false
-  const podCountAllowsBulkMetrics = countsData != null && !podCountUnavailable && (podCount ?? 0) <= LARGE_RESOURCE_LIST_LIMIT
+  const podCountAllowsBulkMetrics = countsData != null && podCountKnown && !podCountUnavailable && (podCount ?? 0) <= LARGE_RESOURCE_LIST_LIMIT
   const selectedKindName = selectedKind?.name.toLowerCase() ?? ''
   const topPodMetricsEnabled = selectedKindName === 'pods' && podCountAllowsBulkMetrics
   const topNodeMetricsEnabled = selectedKindName === 'nodes' && namespaces.length === 0 && podCountAllowsBulkMetrics
@@ -248,6 +255,8 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
   const selectedKindQueryResult: ResourceQueryResult | undefined = useMemo(() => {
     if (!selectedKind) return undefined
     return {
+      resourceName: selectedKind.name,
+      group: selectedKind.group,
       data: selectedKindQueryBlocked ? [] : selectedKindQuery.data as any[] | undefined,
       isLoading: waitingForGuardCount || selectedKindQuery.isLoading,
       error: selectedKindQueryBlocked ? undefined : selectedKindQuery.error,
@@ -315,7 +324,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
   return (
     <>
     <BaseResourcesView
-      key={location.pathname}
+      key={connection.context || 'default'}
       namespaces={namespaces}
       selectedResource={selectedResource}
       onResourceClick={onResourceClick}
@@ -325,7 +334,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       // Injected data
       apiResources={apiResources}
       // Lightweight counts for sidebar (replaces 233 parallel queries)
-      resourceCounts={countsData?.counts}
+      resourceCounts={countsData?.counts ?? EMPTY_RESOURCE_COUNTS}
       resourceForbidden={countsData?.forbidden}
       resourceReasons={countsData?.reasons}
       resourceUnavailable={countsData?.unavailable}

package/src/components/resources/renderers/CronWorkflowRenderer.tsx

@@ -0,0 +1 @@
+export * from '@skyhook-io/k8s-ui/components/resources/renderers/CronWorkflowRenderer'

package/src/components/resources/renderers/index.ts

@@ -7,6 +7,7 @@ export { ConfigMapRenderer } from './ConfigMapRenderer'
 export { SecretRenderer } from './SecretRenderer'
 export { JobRenderer } from './JobRenderer'
 export { CronJobRenderer } from './CronJobRenderer'
+export { CronWorkflowRenderer } from './CronWorkflowRenderer'
 export { HPARenderer } from './HPARenderer'
 export { NodeRenderer } from './NodeRenderer'
 export { PVCRenderer } from './PVCRenderer'

package/src/components/settings/SettingsDialog.tsx

@@ -9,6 +9,9 @@ import { useCloudRole, useVersionCheck } from '../../api/client'
 import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
 import { Tooltip } from '../ui/Tooltip'
 import type { DeploymentMode } from '../../types'
+import { Input } from '@skyhook-io/k8s-ui'
+import { AISettingsSection, type AIDraft } from '../diagnose/AISettings'
+import { useDiagnose } from '../diagnose/DiagnoseContext'
 
 interface Config {
   kubeconfig?: string
@@ -56,12 +59,35 @@ export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsD
   const [configDirty, setConfigDirty] = useState(false)
   const [loadError, setLoadError] = useState<string | null>(null)
 
+  // AI Diagnosis prefs are client-side (localStorage) but, like the rest of this
+  // dialog, are STAGED and committed on Save — not on every change. The draft
+  // mirrors the committed values (from DiagnoseContext) and is snapshotted on open.
+  const diag = useDiagnose()
+  const [aiDraft, setAiDraft] = useState<AIDraft>({
+    agent: diag.selectedAgent,
+    isolated: diag.isolated,
+    model: diag.model,
+    effort: diag.effort,
+  })
+  const aiDirty =
+    aiDraft.agent !== diag.selectedAgent ||
+    aiDraft.isolated !== diag.isolated ||
+    aiDraft.model !== diag.model ||
+    aiDraft.effort !== diag.effort
+
   // Load config on open
   useEffect(() => {
     if (!open) return
     setSaveMessage(null)
     setConfigDirty(false)
     setLoadError(null)
+    // Snapshot the committed AI prefs into the draft so edits stage cleanly.
+    setAiDraft({
+      agent: diag.selectedAgent,
+      isolated: diag.isolated,
+      model: diag.model,
+      effort: diag.effort,
+    })
 
     fetch(apiUrl('/config'), { credentials: getCredentialsMode(), headers: getAuthHeaders() })
       .then((res) => {
@@ -76,6 +102,8 @@ export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsD
         console.warn('[settings] Failed to load config:', err)
         setLoadError('Failed to load configuration.')
       })
+    // Snapshot-on-open only; we don't want late diag updates to wipe staged edits.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 
   // ESC key
@@ -107,32 +135,52 @@ export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsD
   const saveConfig = useCallback(async () => {
     setSaving(true)
     setSaveMessage(null)
+    // AI prefs are client-side (localStorage) — commit the staged draft now.
+    // setSelectedAgent clears model/effort (they're agent-specific), so set the
+    // agent first, then restore the draft's model/effort.
+    if (aiDirty) {
+      diag.setSelectedAgent(aiDraft.agent)
+      diag.setIsolated(aiDraft.isolated)
+      diag.setModel(aiDraft.model)
+      diag.setEffort(aiDraft.effort)
+    }
     try {
-      const res = await fetch(apiUrl('/config'), {
-        method: 'PUT',
-        credentials: getCredentialsMode(),
-        headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
-        body: JSON.stringify(editedConfig),
-      })
-      if (!res.ok) {
-        const data = await res.json().catch(() => null)
-        setSaveMessage(`Error: ${data?.error || res.statusText}`)
-      } else {
+      if (configDirty) {
+        const res = await fetch(apiUrl('/config'), {
+          method: 'PUT',
+          credentials: getCredentialsMode(),
+          headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+          body: JSON.stringify(editedConfig),
+        })
+        if (!res.ok) {
+          const data = await res.json().catch(() => null)
+          setSaveMessage(`Error: ${data?.error || res.statusText}`)
+          return
+        }
         setConfigDirty(false)
-        setSaveMessage('Saved. Changes take effect on next launch.')
+        setSaveMessage('Saved. Configuration changes take effect on next launch.')
+      } else {
+        setSaveMessage('Saved.')
       }
     } catch (err) {
       setSaveMessage(`Error: ${err}`)
     } finally {
       setSaving(false)
     }
-  }, [editedConfig])
+  }, [editedConfig, configDirty, aiDirty, aiDraft, diag])
 
   const resetConfig = useCallback(() => {
     setEditedConfig({})
     setConfigDirty(true)
+    // Revert staged AI edits back to the committed prefs.
+    setAiDraft({
+      agent: diag.selectedAgent,
+      isolated: diag.isolated,
+      model: diag.model,
+      effort: diag.effort,
+    })
     setSaveMessage('All fields cleared. Press Save to apply.')
-  }, [])
+  }, [diag])
 
   if (!shouldRender) return null
 
@@ -213,6 +261,17 @@ export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsD
             </div>
           )}
 
+          <AISettingsSection
+            available={diag.available}
+            agents={diag.agents}
+            draft={aiDraft}
+            onChange={(patch) => {
+              setAiDraft((d) => ({ ...d, ...patch }))
+              setSaveMessage(null)
+            }}
+            onHistoryCleared={diag.refreshRuns}
+          />
+
           <SectionLabel>Radar configuration</SectionLabel>
           {canEditConfig ? (
             <StartupConfigTab
@@ -266,11 +325,13 @@ export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsD
             <div className="flex items-center gap-3">
               <span className="hidden sm:flex items-center gap-1.5 text-[11px] text-theme-text-tertiary">
                 <RotateCw className="w-3 h-3" />
-                Applies on next launch
+                {aiDirty && !configDirty
+                  ? 'Applies to new investigations'
+                  : 'Applies on next launch'}
               </span>
               <button
                 onClick={saveConfig}
-                disabled={saving || !configDirty}
+                disabled={saving || (!configDirty && !aiDirty)}
                 className="flex items-center gap-1.5 px-4 py-1.5 text-sm font-medium btn-brand rounded-md"
               >
                 {saving && <Loader2 className="w-3.5 h-3.5 animate-spin" />}
@@ -630,8 +691,7 @@ function PrometheusConfigField({
         Manual Prometheus/VictoriaMetrics URL (skips auto-discovery)
       </p>
       <div className="flex items-center gap-2">
-        <input
-          type="text"
+        <Input
           value={value}
           onChange={(e) => onChange(e.target.value)}
           placeholder="http://prometheus-server.monitoring:9090"
@@ -689,8 +749,7 @@ function PrometheusConfigField({
           <div className="rounded-md border border-theme-border bg-theme-elevated/40 p-2.5 space-y-2">
             {headerRows.map((row, i) => (
               <div key={i} className="flex items-center gap-2">
-                <input
-                  type="text"
+                <Input
                   value={row.key}
                   onChange={(e) => {
                     setHeaderRows((rows) => rows!.map((r, j) => j === i ? { ...r, key: e.target.value } : r))
@@ -768,8 +827,7 @@ function ConfigField({
         {label}
       </label>
       {help && <p className="text-xs text-theme-text-tertiary mb-1">{help}</p>}
-      <input
-        type="text"
+      <Input
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
@@ -820,8 +878,7 @@ function ConfigArrayField({
         {label}
       </label>
       {help && <p className="text-xs text-theme-text-tertiary mb-1">{help}</p>}
-      <input
-        type="text"
+      <Input
         value={text}
         onFocus={() => { focusedRef.current = true }}
         onBlur={() => {

package/src/components/shared/LargeClusterNamespacePicker.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect, useMemo } from 'react'
 import { Search } from 'lucide-react'
+import { Input } from '@skyhook-io/k8s-ui'
 
 export function LargeClusterNamespacePicker({ namespaces, onSelect }: {
   namespaces: { name: string }[] | undefined
@@ -27,9 +28,8 @@ export function LargeClusterNamespacePicker({ namespaces, onSelect }: {
     <div className="text-left">
       <div className="relative mb-2">
         <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-theme-text-tertiary" />
-        <input
+        <Input
           ref={inputRef}
-          type="text"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           placeholder="Search namespaces..."