@skyhook-io/radar-app 1.8.5 → 1.8.7

package/src/components/applications/ApplicationsView.tsx

@@ -1,28 +1,48 @@
-import { useCallback, useEffect, useMemo } from 'react'
-import { useSearchParams } from 'react-router-dom'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import {
   ApplicationsList,
   ApplicationDetail,
   CenteredEmpty,
   PageHeader,
   FreshnessControl,
+  IssueRow,
+  ISSUE_SEVERITY_RANK,
   useToast,
   orderEnvs,
   matchWorkloadAcrossInstances,
   workloadKey,
   healthOf,
   compareVersions,
+  gitOpsRouteForKind,
+  deploymentInventoryFromGitOps,
+  deploymentInventoryFromHelm,
+  memberRef,
+  subjectRef,
   type AppRow,
+  type AppWorkload,
   type AppIdentityInstance,
+  type ApplicationView,
+  type AppSourceRef,
+  type Issue,
+  type IssueResourceRef,
   type SelectedAppWorkload,
   type SelectedResource,
 } from '@skyhook-io/k8s-ui'
-import { Boxes } from 'lucide-react'
-import { useApplications, useTopology } from '../../api/client'
+import { AlertTriangle, Boxes } from 'lucide-react'
+import { SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
+import { useApplicationHistory, useApplications, useGitOpsTree, useHelmRelease, useIssues, useTopology, type IssuesResponse } from '../../api/client'
 import { useConnection } from '../../context/ConnectionContext'
-import { kindToPlural } from '../../utils/navigation'
+import { buildWorkloadPath, kindToPlural } from '../../utils/navigation'
 import { WorkloadView } from '../workload/WorkloadView'
 
+const APPLICATION_VIEWS: ReadonlySet<ApplicationView> = new Set<ApplicationView>(['overview', 'topology', 'history'])
+
+function parseApplicationView(value: string | null): ApplicationView {
+  if (!value || !APPLICATION_VIEWS.has(value as ApplicationView)) return 'overview'
+  return value as ApplicationView
+}
+
 interface ApplicationsViewProps {
   namespaces: string[]
   onOpenResource: (resource: SelectedResource) => void
@@ -44,7 +64,7 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
 
   // Which app is open lives in the URL (?app=<key>) so the detail view is
   // deep-linkable and the browser back button returns to the list. Opening or
-  // closing an app also clears the per-app params (workload, tab).
+  // closing an app also clears the per-app params (view, workload, tab).
   const [searchParams, setSearchParams] = useSearchParams()
   const selectedKey = searchParams.get('app')
   const selected = useMemo(() => apps.find((a) => a.key === selectedKey) ?? null, [apps, selectedKey])
@@ -54,6 +74,7 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
       const params = new URLSearchParams(searchParams)
       if (key) params.set('app', key)
       else params.delete('app')
+      params.delete('view')
       params.delete('workload')
       params.delete('tab')
       setSearchParams(params)
@@ -68,6 +89,7 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
     if (selectedKey && !selected && query.isSuccess) {
       const params = new URLSearchParams(searchParams)
       params.delete('app')
+      params.delete('view')
       params.delete('workload')
       params.delete('tab')
       setSearchParams(params, { replace: true })
@@ -83,7 +105,14 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
   // the page header from vanishing while loading / on error, the wrapper shows
   // the same header bar above those states. (Keep title + description in sync
   // with ApplicationsList's PageHeader.)
-  if (query.isLoading || query.error) {
+  if (query.isLoading) {
+    return (
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        <ApplicationsList apps={[]} onSelect={selectApp} headerActions={freshness} loading />
+      </div>
+    )
+  }
+  if (query.error) {
     return (
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
         <div className="shrink-0 border-b border-theme-border px-4 py-4">
@@ -93,11 +122,7 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
             description="Deployable software in this cluster — your services, workers, and jobs, grouped by app/release evidence."
           />
         </div>
-        {query.isLoading ? (
-          <CenteredEmpty icon={Boxes} headline="Loading applications…" />
-        ) : (
-          <CenteredEmpty tone="filtered" icon={Boxes} headline="Failed to load applications" body={(query.error as Error).message} />
-        )}
+        <CenteredEmpty tone="filtered" icon={Boxes} headline="Failed to load applications" body={(query.error as Error).message} />
       </div>
     )
   }
@@ -110,33 +135,151 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
 }
 
 // AppDetailRoute wires the OSS data hooks the shared ApplicationDetail can't:
-// the resources-view topology over the app's namespaces (for the app graph)
-// and the per-workload WorkloadView (which fetches its own topology for the
-// Topology tab). Split out so useTopology runs unconditionally (Rules of Hooks).
+// the resources-view topology over the app's namespaces and the per-workload
+// WorkloadView. Split out so useTopology runs unconditionally (Rules of Hooks).
 function AppDetailRoute({ app, apps, onBack, onOpenResource }: { app: AppRow; apps: AppRow[]; onBack: () => void; onOpenResource: (resource: SelectedResource) => void }) {
+  const navigate = useNavigate()
   const appNamespaces = useMemo(
     () => Array.from(new Set((app.workloads ?? []).map((w) => w.namespace).filter(Boolean))).sort(),
     [app.workloads],
   )
-  const { data: topology, isLoading: topologyLoading } = useTopology(appNamespaces, 'resources', { enabled: appNamespaces.length > 0 })
+  const appHistoryNamespaces = useMemo(() => {
+    const namespaces = new Set(appNamespaces)
+    if (app.sourceRef?.namespace) namespaces.add(app.sourceRef.namespace)
+    return Array.from(namespaces).sort()
+  }, [app.sourceRef?.namespace, appNamespaces])
+  const { data: topology, isLoading: topologyLoading } = useTopology(appNamespaces, 'resources', {
+    enabled: appNamespaces.length > 0,
+    includeReplicaSets: true,
+    refetchInterval: 10_000,
+  })
+  const issuesQuery = useIssues(appNamespaces)
+  const appIssues = useMemo(
+    () => appIssuesForWorkloads(issuesQuery.data?.issues ?? [], app.workloads ?? []),
+    [issuesQuery.data?.issues, app.workloads],
+  )
 
-  // The selected workload (?workload=<key>) lives in the URL too: deep-linkable,
-  // and back returns from a workload's runtime to the app graph. Clearing it
-  // also drops the workload's tab param.
+  // The selected workload (?workload=<key>) is the scope switch and wins over
+  // ?view= when both are present. With neither param, use the product default:
+  // multi-workload apps open on app overview, single-workload apps open on the
+  // workload. A single-workload app does not expose app scope.
   const [searchParams, setSearchParams] = useSearchParams()
-  const selectedWorkloadKey = searchParams.get('workload')
+  const viewParam = searchParams.get('view')
+  const selectedView = parseApplicationView(viewParam)
+  const selectedWorkloadParam = searchParams.get('workload')
+  const appWorkloads = app.workloads ?? []
+  const singleWorkloadKey = appWorkloads.length === 1 ? workloadKey(appWorkloads[0]) : null
+  const selectedWorkloadKey = singleWorkloadKey ?? selectedWorkloadParam
+  const historyQuery = useApplicationHistory(app.key, appHistoryNamespaces, { enabled: !selectedWorkloadKey })
+  const sourceInventoryEnabled = !selectedWorkloadKey && selectedView === 'topology'
+  const gitOpsSource = app.sourceRef?.type === 'gitops' ? app.sourceRef : undefined
+  const deploymentTreeQuery = useGitOpsTree(
+    gitOpsSource?.kind ?? '',
+    gitOpsSource?.namespace ?? '',
+    gitOpsSource?.name ?? '',
+    gitOpsSource?.group,
+    appHistoryNamespaces,
+    { enabled: sourceInventoryEnabled },
+  )
+  const helmSource = app.sourceRef?.type === 'helm' ? app.sourceRef : undefined
+  const helmReleaseQuery = useHelmRelease(helmSource?.namespace ?? '', helmSource?.name ?? '', { enabled: sourceInventoryEnabled })
+  const deploymentInventory = useMemo(
+    () => deploymentInventoryFromGitOps(deploymentTreeQuery.data) ?? deploymentInventoryFromHelm(helmReleaseQuery.data?.resources),
+    [deploymentTreeQuery.data, helmReleaseQuery.data?.resources],
+  )
+  useEffect(() => {
+    if (!singleWorkloadKey) return
+    if (selectedWorkloadParam === singleWorkloadKey && !viewParam) return
+    const params = new URLSearchParams(searchParams)
+    params.delete('view')
+    params.delete('run')
+    params.set('workload', singleWorkloadKey)
+    setSearchParams(params, { replace: true })
+  }, [searchParams, selectedWorkloadParam, setSearchParams, singleWorkloadKey, viewParam])
+  const selectView = useCallback(
+    (view: ApplicationView) => {
+      const params = new URLSearchParams(searchParams)
+      params.delete('tab')
+      params.delete('run')
+      if (singleWorkloadKey) {
+        params.delete('view')
+        params.set('workload', singleWorkloadKey)
+      } else if (view === 'overview') {
+        params.delete('view')
+        params.delete('workload')
+      } else {
+        params.set('view', view)
+        params.delete('workload')
+      }
+      setSearchParams(params)
+    },
+    [searchParams, setSearchParams, singleWorkloadKey],
+  )
   const selectWorkload = useCallback(
     (key: string | null) => {
       const params = new URLSearchParams(searchParams)
-      // Always drop the workload's tab: a fresh workload opens on its overview,
-      // and clearing back to the graph leaves no stale tab on the route.
+      params.delete('run')
+      if (key) {
+        const wasInWorkloadScope = !!selectedWorkloadKey
+        params.delete('view')
+        params.set('workload', key)
+        if (!wasInWorkloadScope) params.delete('tab')
+      } else if (singleWorkloadKey) {
+        params.delete('view')
+        params.set('workload', singleWorkloadKey)
+      } else {
+        params.delete('workload')
+        params.delete('tab')
+        params.delete('view')
+      }
+      setSearchParams(params)
+    },
+    [searchParams, selectedWorkloadKey, setSearchParams, singleWorkloadKey],
+  )
+  const selectWorkloadRun = useCallback(
+    (workload: SelectedAppWorkload, run: { kind: string; name: string; data: Record<string, unknown> }) => {
+      const params = new URLSearchParams(searchParams)
+      const runNamespace = typeof run.data?.namespace === 'string' ? run.data.namespace : workload.namespace
+      params.delete('view')
       params.delete('tab')
-      if (key) params.set('workload', key)
-      else params.delete('workload')
+      params.set('workload', workloadKey(workload))
+      params.set('run', `${kindToPlural(run.kind)}/${runNamespace}/${run.name}`)
       setSearchParams(params)
     },
     [searchParams, setSearchParams],
   )
+  const openWorkloadResource = useCallback(
+    (resource: SelectedResource) => {
+      if (kindToPlural(resource.kind).toLowerCase() !== 'pods') {
+        onOpenResource(resource)
+        return
+      }
+
+      const [pathname, rawSearch = ''] = buildWorkloadPath({ ...resource, kind: kindToPlural(resource.kind) }).split('?')
+      const params = new URLSearchParams(rawSearch)
+      const activeNamespaces = searchParams.get('namespaces')
+      if (activeNamespaces) params.set('namespaces', activeNamespaces)
+      navigate({ pathname, search: params.toString() })
+    },
+    [navigate, onOpenResource, searchParams],
+  )
+  const openSource = useCallback(
+    (source: AppSourceRef) => {
+      if (source.type === 'gitops') {
+        const path = gitOpsRouteForKind(source.kind, source.namespace, source.name)
+        if (path) navigate(path)
+        return
+      }
+      if (source.type === 'helm') {
+        const params = new URLSearchParams()
+        const activeNamespaces = searchParams.get('namespaces')
+        if (activeNamespaces) params.set('namespaces', activeNamespaces)
+        params.set('release', `${source.namespace}/${source.name}`)
+        navigate({ pathname: '/helm', search: params.toString() })
+      }
+    },
+    [navigate, searchParams],
+  )
 
   // App identity switcher data: this instance's siblings (ladder-ordered
   // digests). It switches between REAL instances — ?app= changes, deep links
@@ -172,6 +315,7 @@ function AppDetailRoute({ app, apps, onBack, onOpenResource }: { app: AppRow; ap
       const target = apps.find((a) => a.key === targetKey);
       const params = new URLSearchParams(searchParams);
       params.set('app', targetKey);
+      params.delete('run');
       const wk = params.get('workload');
       let matched = false;
       if (wk && target) {
@@ -186,12 +330,19 @@ function AppDetailRoute({ app, apps, onBack, onOpenResource }: { app: AppRow; ap
       }
       if (!matched && wk) {
         // A workload WAS selected but has no counterpart — land on the target
-        // instance's overview and say so. (With no workload selected the tab
-        // rides along: it applies to the lone workload either side.)
+        // instance's default scope and say so. Single-workload instances default
+        // to their workload; composed apps default to app overview.
         params.delete('workload');
         params.delete('tab');
+        const soleTargetWorkload = target?.workloads?.length === 1 ? target.workloads[0] : null;
+        if (soleTargetWorkload) {
+          params.delete('view');
+          params.set('workload', workloadKey(soleTargetWorkload));
+        } else {
+          params.delete('view');
+        }
         if (target) {
-          showToast(`No matching workload in ${target.identity?.env ?? target.name}`, { detail: 'Showing the instance overview instead.', type: 'info' });
+          showToast(`No matching workload in ${target.identity?.env ?? target.name}`, { detail: soleTargetWorkload ? 'Showing the instance workload instead.' : 'Showing the instance overview instead.', type: 'info' });
         }
       }
       setSearchParams(params);
@@ -205,30 +356,47 @@ function AppDetailRoute({ app, apps, onBack, onOpenResource }: { app: AppRow; ap
   );
 
   return (
-    <div className="flex-1 overflow-auto">
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
       <ApplicationDetail
         app={app}
         onBack={onBack}
         topology={topology}
         topologyLoading={topologyLoading}
+        deploymentInventory={deploymentInventory}
         identityInstances={identityInstances}
         onSwitchInstance={switchInstance}
         discoveredEnvs={discoveredEnvs}
         onNavigateToResource={onOpenResource}
+        onSelectWorkloadRun={selectWorkloadRun}
+        history={historyQuery.data}
+        historyLoading={historyQuery.isLoading}
+        onOpenSource={openSource}
         selectedWorkloadKey={selectedWorkloadKey}
         onSelectWorkload={selectWorkload}
+        selectedView={selectedView}
+        onSelectView={selectView}
+        renderOverviewIssues={() => (
+          <AppOverviewIssues
+            issues={appIssues}
+            error={issuesQuery.error}
+            hasData={Boolean(issuesQuery.data)}
+            visibility={issuesQuery.data?.visibility}
+            onOpenResource={onOpenResource}
+          />
+        )}
+        hasOverviewIssues={appIssues.length > 0}
         renderWorkload={(workload: SelectedAppWorkload) => (
           <div className="h-full overflow-hidden">
             <WorkloadView
               kind={kindToPlural(workload.kind)}
+              group={workload.group}
               namespace={workload.namespace}
               name={workload.name}
               onBack={() => selectWorkload(null)}
-              // "Back" returns to the app graph — meaningless for a
-              // single-workload app, which has no graph to return to.
-              hideBackButton={(app.workloads?.length ?? 0) <= 1}
+              hideBackButton
               compactHeader
-              onNavigateToResource={onOpenResource}
+              pushTabHistory
+              onNavigateToResource={openWorkloadResource}
             />
           </div>
         )}
@@ -236,3 +404,139 @@ function AppDetailRoute({ app, apps, onBack, onOpenResource }: { app: AppRow; ap
     </div>
   )
 }
+
+function AppOverviewIssues({ issues, error, hasData, visibility, onOpenResource }: { issues: Issue[]; error: unknown; hasData: boolean; visibility?: IssuesResponse['visibility']; onOpenResource: (resource: SelectedResource) => void }) {
+  const [openId, setOpenId] = useState<string | null>(null)
+  const sorted = useMemo(() => [...issues].sort(compareAppOverviewIssues), [issues])
+
+  if (error && !hasData) {
+    return <AppOverviewIssuesState headline="Operational issues unavailable" body={error instanceof Error ? error.message : 'Radar could not load issues for this application.'} />
+  }
+
+  if (error) {
+    return (
+      <section className="space-y-2">
+        <AppOverviewIssuesState headline="Operational issue refresh failed" body="Showing the last successful result for this application." />
+        {sorted.length > 0 && <AppOverviewIssueRows issues={sorted} openId={openId} setOpenId={setOpenId} onOpenResource={onOpenResource} />}
+      </section>
+    )
+  }
+
+  if (visibility?.impact) {
+    return (
+      <section className="space-y-2">
+        <AppOverviewIssuesState headline={sorted.length === 0 ? 'No visible operational issues' : 'Operational issue visibility is limited'} body={`${visibility.impact} Results may be incomplete.`} />
+        {sorted.length > 0 && <AppOverviewIssueRows issues={sorted} openId={openId} setOpenId={setOpenId} onOpenResource={onOpenResource} />}
+      </section>
+    )
+  }
+
+  if (sorted.length === 0) return null
+
+  return <AppOverviewIssueRows issues={sorted} openId={openId} setOpenId={setOpenId} onOpenResource={onOpenResource} />
+}
+
+function AppOverviewIssuesState({ headline, body }: { headline: string; body: string }) {
+  return (
+    <section className="rounded-lg border border-theme-border bg-theme-surface px-4 py-3 shadow-theme-sm">
+      <div className="flex items-start gap-3">
+        <AlertTriangle className={`mt-0.5 h-4 w-4 shrink-0 ${SEVERITY_TEXT.warning}`} aria-hidden />
+        <div className="min-w-0">
+          <h2 className="text-sm font-semibold text-theme-text-primary">{headline}</h2>
+          <p className="mt-0.5 text-sm text-theme-text-secondary">{body}</p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+function AppOverviewIssueRows({ issues: sorted, openId, setOpenId, onOpenResource }: { issues: Issue[]; openId: string | null; setOpenId: (value: string | null) => void; onOpenResource: (resource: SelectedResource) => void }) {
+
+  const navigate = (ref: IssueResourceRef) => {
+    onOpenResource({
+      kind: kindToPlural(ref.kind),
+      namespace: ref.namespace ?? '',
+      name: ref.name,
+      group: ref.group ?? '',
+    })
+  }
+
+  return (
+    <section className="space-y-2">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2 text-sm font-semibold text-theme-text-primary">
+          <AlertTriangle className="h-4 w-4 shrink-0 text-theme-text-secondary" aria-hidden />
+          <span>Operational Issues</span>
+          <span className="badge-sm text-[10px] text-theme-text-secondary">{sorted.length}</span>
+        </div>
+        <span className="text-xs text-theme-text-tertiary">Scoped to this application</span>
+      </div>
+      <ol className="flex flex-col gap-1.5">
+        {sorted.slice(0, 4).map((issue) => {
+          const rowKey = `${issue.cluster_id ?? ''}:${issue.id}`
+          return (
+            <IssueRow
+              key={rowKey}
+              issue={issue}
+              open={openId === rowKey}
+              onToggle={() => setOpenId(openId === rowKey ? null : rowKey)}
+              onResourceClick={navigate}
+            />
+          )
+        })}
+      </ol>
+      {sorted.length > 4 ? (
+        <div className="text-xs text-theme-text-tertiary">
+          Showing 4 of {sorted.length} issues. Open Issues for the full queue.
+        </div>
+      ) : null}
+    </section>
+  )
+}
+
+function compareAppOverviewIssues(a: Issue, b: Issue): number {
+  const severity = ISSUE_SEVERITY_RANK[b.severity] - ISSUE_SEVERITY_RANK[a.severity]
+  if (severity !== 0) return severity
+  const fa = a.first_seen ?? ''
+  const fb = b.first_seen ?? ''
+  if (fa !== fb) return fb.localeCompare(fa)
+  const ns = (a.namespace ?? '').localeCompare(b.namespace ?? '')
+  if (ns !== 0) return ns
+  const name = a.name.localeCompare(b.name)
+  if (name !== 0) return name
+  return a.id.localeCompare(b.id)
+}
+
+function appIssuesForWorkloads(issues: Issue[], workloads: AppWorkload[]): Issue[] {
+  if (issues.length === 0 || workloads.length === 0) return []
+  const workloadKeys = new Set(workloads.map(workloadIssueKey))
+  const out: Issue[] = []
+  const seen = new Set<string>()
+  for (const issue of issues) {
+    if (!issueRefs(issue).some((ref) => workloadKeys.has(issueRefKey(ref)))) continue
+    if (seen.has(issue.id)) continue
+    seen.add(issue.id)
+    out.push(issue)
+  }
+  return out
+}
+
+function workloadIssueKey(workload: AppWorkload): string {
+  return `${workload.kind.toLowerCase()}|${workload.namespace}|${workload.name}`
+}
+
+function issueRefKey(ref: IssueResourceRef): string {
+  return `${ref.kind.toLowerCase()}|${ref.namespace ?? ''}|${ref.name}`
+}
+
+function issueRefs(issue: Issue): IssueResourceRef[] {
+  const refs: IssueResourceRef[] = [subjectRef(issue)]
+  if (issue.owner) refs.push(issue.owner)
+  if (issue.incident_parent?.ref) refs.push(issue.incident_parent.ref)
+  for (const member of issue.members ?? []) refs.push(memberRef(issue, member))
+  for (const fact of issue.diagnostic_context?.facts ?? []) {
+    refs.push(...(fact.refs ?? []))
+    for (const related of fact.related_issues ?? []) refs.push(related.ref)
+  }
+  return refs
+}

package/src/components/audit/AuditSettingsDialog.tsx

@@ -5,6 +5,7 @@ import { useAuditSettings, useUpdateAuditSettings, useAudit, useCloudRole } from
 import type { CheckMeta } from '@skyhook-io/k8s-ui'
 import { validateRFC1123Label, type ValidationResult } from '@skyhook-io/k8s-ui/utils/validators'
 import { Tooltip } from '../ui/Tooltip'
+import { Input } from '@skyhook-io/k8s-ui'
 
 interface AuditSettingsDialogProps {
   namespaces: string[]
@@ -118,8 +119,7 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
             </div>
 
             <div className="flex gap-2">
-              <input
-                type="text"
+              <Input
                 value={newNs}
                 onChange={e => setNewNs(e.target.value)}
                 onKeyDown={e => { if (e.key === 'Enter') addNamespace() }}

package/src/components/curl/ServiceCurlButton.tsx

@@ -6,6 +6,7 @@ import { clsx } from 'clsx'
 import { apiFetch } from '../../api/client'
 import { apiUrl } from '../../api/config'
 import { Tooltip } from '../ui/Tooltip'
+import { Input } from '@skyhook-io/k8s-ui'
 
 // A port is "curl-able" only if it plausibly speaks HTTP — probing a raw TCP
 // port (Postgres, Redis) with a GET returns noise, so we don't offer it there
@@ -345,8 +346,7 @@ export function CurlPanel({
         </select>
         <div className="flex-1 min-w-0 flex items-center bg-theme-base border border-theme-border rounded px-2 focus-within:border-blue-500">
           <span className="text-xs text-theme-text-tertiary font-mono select-none pointer-events-none">/</span>
-          <input
-            type="text"
+          <Input
             value={path}
             onChange={(e) => setPath(e.target.value.replace(/^\/+/, ''))}
             placeholder="healthz"

package/src/components/diagnose/AISettings.tsx

@@ -0,0 +1,121 @@
+// 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.
+import { useState } from "react";
+import { Trash2 } from "lucide-react";
+import { clearHistory, type AgentInfo } from "../../api/diagnose";
+import { AgentControls } from "./parts";
+
+export interface AIDraft {
+  agent: string;
+  isolated: boolean;
+  model: string;
+  effort: string;
+}
+
+// ClearHistoryRow is an immediate action (not part of the staged draft): a
+// two-step confirm button that wipes finished investigations from the local
+// history DB. Live investigations survive.
+function ClearHistoryRow({ onCleared }: { onCleared: () => void }) {
+  const [confirming, setConfirming] = useState(false);
+  const [state, setState] = useState<"idle" | "busy" | "done" | "error">(
+    "idle",
+  );
+  const run = () => {
+    setState("busy");
+    clearHistory()
+      .then(() => {
+        setState("done");
+        setConfirming(false);
+        onCleared();
+      })
+      .catch(() => setState("error"));
+  };
+  return (
+    <div className="mt-3 flex items-center justify-between gap-2 border-t border-theme-border/60 pt-3">
+      <p className="text-[11px] leading-snug text-theme-text-tertiary">
+        Investigation transcripts are kept on this machine (
+        <code className="font-mono">~/.radar</code>) so history survives
+        restarts.
+        {state === "done" && (
+          <span className="ml-1 font-medium text-theme-text-secondary">
+            History cleared.
+          </span>
+        )}
+        {state === "error" && (
+          <span className="ml-1 font-medium text-red-400">
+            Couldn&apos;t clear history.
+          </span>
+        )}
+      </p>
+      {confirming ? (
+        <div className="flex shrink-0 items-center gap-1.5">
+          <button
+            onClick={() => setConfirming(false)}
+            className="rounded-md border border-theme-border px-2 py-1 text-xs text-theme-text-secondary hover:bg-theme-hover"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={run}
+            disabled={state === "busy"}
+            className="rounded-md border border-red-500/40 bg-red-500/10 px-2 py-1 text-xs font-medium text-red-400 hover:bg-red-500/20 disabled:opacity-50"
+          >
+            Clear all history
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={() => {
+            setState("idle");
+            setConfirming(true);
+          }}
+          className="flex shrink-0 items-center gap-1 rounded-md border border-theme-border px-2 py-1 text-xs text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary"
+        >
+          <Trash2 className="h-3 w-3" />
+          Clear history…
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function AISettingsSection({
+  available,
+  agents,
+  draft,
+  onChange,
+  onHistoryCleared,
+}: {
+  available: boolean;
+  agents: AgentInfo[];
+  draft: AIDraft;
+  onChange: (patch: Partial<AIDraft>) => void;
+  onHistoryCleared: () => void;
+}) {
+  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}
+        // Model + effort are agent-specific; reset them when the agent changes.
+        onSelectAgent={(a) => onChange({ agent: a, model: "", effort: "" })}
+        isolated={draft.isolated}
+        onSetIsolated={(v) => onChange({ isolated: v })}
+        model={draft.model}
+        onSetModel={(v) => onChange({ model: v })}
+        effort={draft.effort}
+        onSetEffort={(v) => onChange({ effort: v })}
+      />
+      <ClearHistoryRow onCleared={onHistoryCleared} />
+    </section>
+  );
+}