@skyhook-io/radar-app 1.9.0 → 1.9.1

package/src/components/settings/SettingsDialog.tsx

@@ -60,6 +60,7 @@ interface ConfigResponse {
 interface SettingsDialogProps {
   open: boolean
   onClose: () => void
+  initialSection?: SettingsSectionId
 }
 
 // The settings surface splits into three honest apply buckets:
@@ -68,7 +69,7 @@ interface SettingsDialogProps {
 //   • Live integrations (Prometheus, Argo CD) — their own Apply/Connect endpoints
 //     re-point the running server; effect immediately, NOT part of footer dirty.
 //   • AI diagnose — client-side prefs, self-saving, editable by everyone.
-type SectionId =
+export type SettingsSectionId =
   | 'overview' | 'perms' | 'connection' | 'prometheus' | 'argocd' | 'ai' | 'advanced'
 
 // Only STARTUP fields count toward footer dirty. Integration fields (prometheusUrl,
@@ -89,7 +90,11 @@ function normalizeStartup(c: Config) {
   }
 }
 
-export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
+export function SettingsDialog({
+  open,
+  onClose,
+  initialSection = 'overview',
+}: SettingsDialogProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
   const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
   const { data: versionInfo } = useVersionCheck()
@@ -107,7 +112,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
   const [saving, setSaving] = useState(false)
   const [saveMessage, setSaveMessage] = useState<string | null>(null)
   const [loadError, setLoadError] = useState<string | null>(null)
-  const [section, setSection] = useState<SectionId>('overview')
+  const [section, setSection] = useState<SettingsSectionId>('overview')
   const [confirmingClose, setConfirmingClose] = useState(false)
 
   // AI Diagnosis prefs are client-side (localStorage) and now SELF-SAVING: the
@@ -117,14 +122,14 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
   const aiAvailable = diag.available && diag.agents.length > 0
   const [aiDraft, setAiDraft] = useState<AIDraft>({
     agent: diag.selectedAgent,
-    isolated: diag.isolated,
+    profile: diag.profile,
     model: diag.model,
     effort: diag.effort,
   })
   const [aiSaved, setAiSaved] = useState(false)
   const aiDirty =
     aiDraft.agent !== diag.selectedAgent ||
-    aiDraft.isolated !== diag.isolated ||
+    aiDraft.profile !== diag.profile ||
     aiDraft.model !== diag.model ||
     aiDraft.effort !== diag.effort
 
@@ -158,16 +163,10 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
     setAiSaved(false)
     setAiDraft({
       agent: diag.selectedAgent,
-      isolated: diag.isolated,
+      profile: diag.profile,
       model: diag.model,
       effort: diag.effort,
     })
-    // Overview is the landing section — a status-at-a-glance of what Radar is
-    // connected to (cluster, integrations, MCP, AI), useful to owners and
-    // viewers alike, rather than dropping owners on a config form or everyone
-    // on a permissions dump.
-    setSection('overview')
-
     fetch(apiUrl('/config'), { credentials: getCredentialsMode(), headers: getAuthHeaders() })
       .then((res) => {
         if (!res.ok) throw new Error(`HTTP ${res.status}`)
@@ -185,6 +184,19 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 
+  useEffect(() => {
+    if (open) setSection(initialSection)
+  }, [open, initialSection])
+
+  useEffect(() => {
+    if (!open || diag.agents.length === 0) return
+    setAiDraft((current) => {
+      const profiles = diag.agents.find((agent) => agent.name === current.agent)?.profiles ?? []
+      if (profiles.length === 0 || profiles.includes(current.profile)) return current
+      return { ...current, profile: profiles[0] }
+    })
+  }, [open, diag.agents])
+
   const updateConfigField = useCallback(<K extends keyof Config>(field: K, value: Config[K]) => {
     setEditedConfig((prev) => ({ ...prev, [field]: value }))
     setSaveMessage(null)
@@ -234,7 +246,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
   // agent first, then restore the draft's model/effort.
   const saveAi = useCallback(() => {
     diag.setSelectedAgent(aiDraft.agent)
-    diag.setIsolated(aiDraft.isolated)
+    diag.setProfile(aiDraft.profile)
     diag.setModel(aiDraft.model)
     diag.setEffort(aiDraft.effort)
     setAiSaved(true)
@@ -335,7 +347,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
           // Fixed height so the dialog doesn't jump when switching tabs — short
           // tabs leave breathing room, tall ones scroll inside the content pane.
           // max-h keeps it on-screen on short viewports.
-          'sm:rounded-xl sm:max-w-4xl sm:mx-4 sm:h-[620px] sm:max-h-[85vh]',
+          'sm:rounded-xl sm:max-w-4xl sm:mx-4 sm:h-[660px] sm:max-h-[85vh]',
           TRANSITION_PANEL,
           isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
         )}
@@ -667,7 +679,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
 // -- Sidebar primitives -------------------------------------------------------
 
 interface NavItemDef {
-  id: SectionId
+  id: SettingsSectionId
   label: string
   icon: LucideIcon
   ownerOnly: boolean
@@ -748,8 +760,8 @@ function SectionPane({
   locked,
   children,
 }: {
-  id: SectionId
-  active: SectionId
+  id: SettingsSectionId
+  active: SettingsSectionId
   title: string
   caption?: string
   live?: boolean
@@ -802,7 +814,7 @@ function LockWall() {
 type OverviewTone = 'ok' | 'warn' | 'off' | 'unknown'
 
 interface OverviewRow {
-  id: SectionId
+  id: SettingsSectionId
   icon: LucideIcon
   label: string
   tone: OverviewTone
@@ -817,7 +829,7 @@ interface OverviewRow {
 // probe, so we don't want it firing when Settings opens on another section);
 // cluster and Prometheus status are shared app-wide caches, so they're read
 // unconditionally.
-function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s: SectionId) => void }) {
+function OverviewPanel({ active, onNavigate }: { active: boolean; onNavigate: (s: SettingsSectionId) => void }) {
   const { data: cluster } = useClusterInfo()
   const { data: prom } = usePrometheusStatus()
   const { data: argo } = useArgoStatus(active)

package/src/components/timeline/TimelineView.tsx

@@ -17,6 +17,7 @@ import {
   type TimelineGrouping,
   type TimelineSort,
   type PinnedLaneRef,
+  useDebouncedValue,
 } from '@skyhook-io/k8s-ui'
 import { TimelineList } from './TimelineList'
 import type { ActivityFilterKey } from './TimelineList'
@@ -308,6 +309,17 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
   // Search / activity-type / kind lifted here too, so they survive the view
   // switch and drive both views through one source of truth.
   const [search, setSearch] = useState(() => searchParams.get('q') ?? '')
+  // The `q` URL write is debounced so typing doesn't navigate per keystroke
+  // (clearing applies immediately — a delayed clear makes the × feel broken).
+  // The URL therefore lags the input while typing, so the URL→state read below
+  // must not sync a `q` that is merely the echo of our own write — it would
+  // revert in-flight keystrokes. Echoes are recognized by value: they carry
+  // exactly the debounced search we wrote. Ref instead of a dep: the read
+  // effect keys on searchParams alone (see its comment) and only needs the
+  // written value at fire time.
+  const debouncedSearch = useDebouncedValue(search, 300, (v) => v === '')
+  const writtenSearchRef = useRef(debouncedSearch)
+  writtenSearchRef.current = debouncedSearch
   // Seed the multi-select from the URL `activity` csv, else the home-page
   // deep-link preset: 'all'/undefined means no chips selected (everything).
   const [activityFilter, setActivityFilter] = useState<ActivityFilterKey[]>(
@@ -621,7 +633,9 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     const nextPinnedOnly = sp.get('pinnedOnly') === '1' && pinnedLanes.length > 0
     setPinnedOnly((prev) => (prev === nextPinnedOnly ? prev : nextPinnedOnly))
     const nextSearch = sp.get('q') ?? ''
-    setSearch((prev) => (prev === nextSearch ? prev : nextSearch))
+    if (nextSearch !== writtenSearchRef.current) {
+      setSearch((prev) => (prev === nextSearch ? prev : nextSearch))
+    }
     const nextActivity = parseActivity(sp) ?? []
     setActivityFilter((prev) => (arraysEqual(prev, nextActivity) ? prev : nextActivity))
     const nextKinds = parseKinds(sp)
@@ -638,7 +652,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     const current = searchParamsRef.current
     const target = writeTimelineParams(
       current,
-      { viewMode, mode, showDeleted, pinnedOnly, search, activityFilter, kindFilter, grouping, sort, selectedEventId },
+      { viewMode, mode, showDeleted, pinnedOnly, search: debouncedSearch, activityFilter, kindFilter, grouping, sort, selectedEventId },
       { isRetained: isRetained || isLocal, requiresNamespaceFilter: scopeRequiresNamespaceFilter },
     )
     const targetStr = target.toString()
@@ -652,7 +666,7 @@ export function TimelineView({ namespaces, onResourceClick, initialViewMode, ini
     const replace = !didMountUrlSyncRef.current || onlyHighFreqDiffer(currentStr, targetStr)
     didMountUrlSyncRef.current = true
     setSearchParamsRef.current(target, { replace })
-  }, [viewMode, mode, showDeleted, pinnedOnly, search, activityFilter, kindFilter, grouping, sort, selectedEventId, isRetained, isLocal, scopeRequiresNamespaceFilter])
+  }, [viewMode, mode, showDeleted, pinnedOnly, debouncedSearch, activityFilter, kindFilter, grouping, sort, selectedEventId, isRetained, isLocal, scopeRequiresNamespaceFilter])
 
   // Fetch all activity - zoom controls what's visible in the UI. This ring feeds
   // the swimlanes and the local strip's histogram, so it also runs in list mode

package/src/context/DiagnoseCustomization.tsx

@@ -41,7 +41,7 @@ export type DiagnoseConsentCopy = {
   /** Detail list under the body; each entry is rendered as its own "•" row. */
   bullets?: ReactNode[];
   /** Label for the settings link. `null` hides it — for hosts with one fixed
-   *  agent and no isolation choice, where it would open an empty dialog. */
+   *  agent and no execution-profile choice, where it would open an empty dialog. */
   settingsLabel?: string | null;
   approveLabel?: string;
 };