@skyhook-io/radar-app 1.8.11 → 1.8.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.8.11",
+  "version": "1.8.13",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "@fontsource/dm-mono": "^5.2.7",
     "@monaco-editor/react": "^4.7.0",
     "diff": "^9.0.0",
-    "monaco-editor": "^0.55.1",
+    "monaco-editor": "0.55.1",
     "react-markdown": "^10.1.0",
     "react-virtuoso": "^4.18.11",
     "remark-gfm": "^4.0.1",
@@ -41,7 +41,7 @@
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.8.11",
+    "@skyhook-io/k8s-ui": ">=1.8.15",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",
@@ -83,7 +83,6 @@
     "vite": "^8.1.5"
   },
   "sideEffects": [
-    "*.css",
-    "./src/monaco-setup.ts"
+    "*.css"
   ]
 }

package/src/api/client.ts

@@ -1,5 +1,11 @@
 import { useEffect, useRef } from 'react'
-import type { AppHistory, AppRow, ArgoSyncOpts } from '@skyhook-io/k8s-ui'
+import type {
+  AppHistory,
+  AppRow,
+  ArgoSyncOpts,
+  YamlDocumentIdentity,
+  YamlSchemaLoadResult,
+} from '@skyhook-io/k8s-ui'
 import { useQuery, useMutation, useQueryClient, skipToken } from '@tanstack/react-query'
 import { showApiError, showApiSuccess } from '../components/ui/Toast'
 import { useCanHelmWrite } from '../contexts/CapabilitiesContext'
@@ -438,6 +444,8 @@ export interface IssuesResponse {
   total_matched?: number
   recent_changes?: IssueRecentChange[]
   recent_changes_reason?: string
+  recent_changes_guidance?: string
+  recent_changes_truncated?: boolean
   // Present only when RBAC visibility is incomplete (absent = full access).
   // state 'degraded' means core workload reads are denied, so an empty list may
   // mean "can't see" rather than "nothing broken" — the UI must say so.
@@ -2627,12 +2635,16 @@ export function useUpdateResource() {
       name,
       yaml,
       force = true,
+      reviewedResourceVersion,
+      reviewedContext,
     }: {
       kind: string
       namespace: string
       name: string
       yaml: string
       force?: boolean
+      reviewedResourceVersion?: string
+      reviewedContext?: string
     }) => {
       const url = new URL(
         `${getApiBase()}/resources/${kind}/${namespace}/${name}`,
@@ -2641,6 +2653,12 @@ export function useUpdateResource() {
       if (!force) {
         url.searchParams.set('force', 'false')
       }
+      if (reviewedResourceVersion) {
+        url.searchParams.set('resourceVersion', reviewedResourceVersion)
+      }
+      if (reviewedContext) {
+        url.searchParams.set('reviewedContext', reviewedContext)
+      }
       const response = await apiFetch(url.toString(), {
         method: 'PUT',
         headers: { 'Content-Type': 'text/plain' },
@@ -2979,6 +2997,144 @@ export interface ApplyResourceResult {
   created: boolean
 }
 
+interface ApplyResourceErrorResponse {
+  error?: string
+  results?: ApplyResourceResult[]
+  failedIndex?: number
+  total?: number
+}
+
+export class ApplyResourceError extends Error {
+  readonly appliedResults: ApplyResourceResult[]
+  readonly failedIndex?: number
+  readonly total?: number
+
+  constructor(payload: ApplyResourceErrorResponse, status: number) {
+    super(formatApplyResourceError(payload, status))
+    this.name = 'ApplyResourceError'
+    this.appliedResults = payload.results ?? []
+    this.failedIndex = payload.failedIndex
+    this.total = payload.total
+  }
+}
+
+export function formatApplyResourceError(
+  payload: ApplyResourceErrorResponse,
+  status: number,
+): string {
+  const message = payload.error || `HTTP ${status}`
+  const applied = payload.results ?? []
+  if (applied.length === 0 || payload.failedIndex === undefined) return message
+
+  const total = payload.total ?? applied.length + 1
+  const appliedLabel = applied.length === 1 ? 'resource was' : 'resources were'
+  const names = applied
+    .slice(0, 3)
+    .map(({ kind, namespace, name }) => `${kind} ${namespace ? `${namespace}/` : ''}${name}`)
+    .join(', ')
+  const more = applied.length > 3 ? ` and ${applied.length - 3} more` : ''
+  const cause = message.replace(/^document \d+:\s*/i, '')
+  return `${applied.length} of ${total} ${appliedLabel} applied before document ${payload.failedIndex + 1} failed. Applied: ${names}${more}. ${cause}`
+}
+
+interface YamlSchemaResponse {
+  documents: Array<{
+    index: number
+    status: 'available' | 'unavailable'
+    bundleKey?: string
+    schemaRef?: string
+    error?: string
+  }>
+  bundles: Record<string, { definitions: Record<string, unknown> }>
+}
+
+export async function fetchYamlSchemas(
+  documents: YamlDocumentIdentity[],
+): Promise<YamlSchemaLoadResult> {
+  const response = await apiFetch(`${getApiBase()}/resources/schemas`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      documents: documents.map(({ index, apiVersion, kind }) => ({
+        index,
+        apiVersion,
+        kind,
+      })),
+    }),
+  })
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ error: 'Cluster schemas are unavailable' }))
+    throw new Error(error.error || `HTTP ${response.status}`)
+  }
+  const result = (await response.json()) as YamlSchemaResponse
+  const schemas: Array<Record<string, unknown> | null> = documents.map(() => null)
+  const unavailable: Array<{ index: number; reason: string }> = []
+  for (const document of result.documents) {
+    const position = documents.findIndex(({ index }) => index === document.index)
+    if (position < 0) continue
+    const bundle = document.bundleKey ? result.bundles[document.bundleKey] : undefined
+    if (document.status === 'available' && document.schemaRef && bundle) {
+      schemas[position] = {
+        $ref: document.schemaRef,
+        definitions: bundle.definitions,
+      }
+    } else {
+      unavailable.push({
+        index: document.index,
+        reason: document.error || 'Schema unavailable',
+      })
+    }
+  }
+  return { schemas, unavailable }
+}
+
+export interface YamlPreviewDocument {
+  index: number
+  status: 'accepted' | 'rejected' | 'unavailable'
+  apiVersion?: string
+  kind?: string
+  namespace?: string
+  name?: string
+  action?: 'create' | 'update' | 'unknown'
+  submittedYaml?: string
+  baselineYaml?: string
+  predictedYaml?: string
+  warnings?: string[]
+  error?: string
+  reviewedResourceVersion?: string
+  redacted?: boolean
+}
+
+export interface YamlPreviewResponse {
+  documents: YamlPreviewDocument[]
+  nonAtomic: boolean
+  context: string
+}
+
+export interface YamlPreviewRequest {
+  yaml: string
+  mode: 'apply' | 'create' | 'update'
+  force: boolean
+  target?: { kind: string; namespace: string; name: string }
+}
+
+export function usePreviewResources() {
+  return useMutation({
+    mutationFn: async (request: YamlPreviewRequest) => {
+      const response = await apiFetch(`${getApiBase()}/resources/preview`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(request),
+      })
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: 'Preview failed' }))
+        throw new Error(error.error || `HTTP ${response.status}`)
+      }
+      return response.json() as Promise<YamlPreviewResponse>
+    },
+  })
+}
+
 export function useApplyResource() {
   const queryClient = useQueryClient()
 
@@ -2988,11 +3144,15 @@ export function useApplyResource() {
       mode = 'apply',
       dryRun = false,
       force = false,
+      reviewedResourceVersions,
+      reviewedContext,
     }: {
       yaml: string
       mode?: 'apply' | 'create'
       dryRun?: boolean
       force?: boolean
+      reviewedResourceVersions?: Record<number, string>
+      reviewedContext?: string
     }) => {
       const url = new URL(`${getApiBase()}/resources/apply`, window.location.origin)
       url.searchParams.set('mode', mode)
@@ -3002,20 +3162,28 @@ export function useApplyResource() {
       if (force) {
         url.searchParams.set('force', 'true')
       }
+      if (reviewedResourceVersions && Object.keys(reviewedResourceVersions).length > 0) {
+        url.searchParams.set('reviewedVersions', JSON.stringify(reviewedResourceVersions))
+      }
+      if (reviewedContext) {
+        url.searchParams.set('reviewedContext', reviewedContext)
+      }
       const response = await apiFetch(url.toString(), {
         method: 'POST',
         headers: { 'Content-Type': 'text/plain' },
         body: yaml,
       })
       if (!response.ok) {
-        const error = await response.json().catch(() => ({ error: 'Unknown error' }))
-        throw new Error(error.error || `HTTP ${response.status}`)
+        const error = (await response
+          .json()
+          .catch(() => ({ error: 'Unknown error' }))) as ApplyResourceErrorResponse
+        throw new ApplyResourceError(error, response.status)
       }
       return response.json() as Promise<ApplyResourceResult[]>
     },
     // No meta errorMessage/successMessage — the CreateResourceDialog
     // handles all feedback inline to avoid duplicate toasts.
-    onSuccess: () => {
+    onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ['resources'] })
       queryClient.invalidateQueries({ queryKey: ['topology'] })
     },

package/src/api/client.yaml.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { ApplyResourceError, formatApplyResourceError } from './client'
+
+describe('formatApplyResourceError', () => {
+  it('reports resources persisted before a multi-document failure', () => {
+    expect(
+      formatApplyResourceError(
+        {
+          error: 'document 3: admission denied the Service',
+          failedIndex: 2,
+          total: 4,
+          results: [
+            { kind: 'Namespace', namespace: '', name: 'checkout', created: true },
+            { kind: 'Deployment', namespace: 'checkout', name: 'api', created: true },
+          ],
+        },
+        422,
+      ),
+    ).toBe(
+      '2 of 4 resources were applied before document 3 failed. Applied: Namespace checkout, Deployment checkout/api. admission denied the Service',
+    )
+  })
+
+  it('preserves ordinary apply errors', () => {
+    expect(formatApplyResourceError({ error: 'field is invalid' }, 422)).toBe('field is invalid')
+  })
+
+  it('preserves structured partial-apply results for recovery', () => {
+    const result = { kind: 'Namespace', namespace: '', name: 'checkout', created: true }
+    const error = new ApplyResourceError(
+      {
+        error: 'document 2: admission denied',
+        failedIndex: 1,
+        total: 3,
+        results: [result],
+      },
+      422,
+    )
+
+    expect(error.message).toContain('1 of 3 resource was applied')
+    expect(error.appliedResults).toEqual([result])
+    expect(error.failedIndex).toBe(1)
+    expect(error.total).toBe(3)
+  })
+})

package/src/api/diagnose.ts

@@ -10,6 +10,7 @@ export interface AgentInfo {
   version: string;
   present: boolean;
   supported: boolean;
+  hosted?: boolean;
 }
 
 export interface AgentsResponse {

package/src/components/diagnose/AISettings.tsx

@@ -18,7 +18,15 @@ export interface AIDraft {
 // 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 }) {
+function ClearHistoryRow({
+  hosted,
+  agentLabel,
+  onCleared,
+}: {
+  hosted: boolean;
+  agentLabel: string;
+  onCleared: () => void;
+}) {
   const [confirming, setConfirming] = useState(false);
   const [state, setState] = useState<"idle" | "busy" | "done" | "error">(
     "idle",
@@ -36,9 +44,15 @@ function ClearHistoryRow({ onCleared }: { onCleared: () => void }) {
   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.
+        {hosted ? (
+          `Investigation transcripts are stored by ${agentLabel} so history survives restarts.`
+        ) : (
+          <>
+            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.
@@ -85,12 +99,16 @@ function ClearHistoryRow({ onCleared }: { onCleared: () => void }) {
 export function AISettingsSection({
   available,
   agents,
+  hosted,
+  agentLabel,
   draft,
   onChange,
   onHistoryCleared,
 }: {
   available: boolean;
   agents: AgentInfo[];
+  hosted: boolean;
+  agentLabel: string;
   draft: AIDraft;
   onChange: (patch: Partial<AIDraft>) => void;
   onHistoryCleared: () => void;
@@ -98,19 +116,32 @@ export function AISettingsSection({
   if (!available || agents.length === 0) return null;
   return (
     <>
-      <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 })}
+      {hosted ? (
+        // The agent, its model, and how it runs are all fixed by the host — none
+        // of the local BYO-agent knobs apply, so there's nothing to configure.
+        <p className="text-xs leading-snug text-theme-text-tertiary">
+          {agentLabel} manages the model and how it runs — there&apos;s nothing to
+          configure here.
+        </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
+        hosted={hosted}
+        agentLabel={agentLabel}
+        onCleared={onHistoryCleared}
       />
-      <ClearHistoryRow onCleared={onHistoryCleared} />
     </>
   );
 }

package/src/components/diagnose/DiagnoseContext.tsx

@@ -34,6 +34,7 @@ export type DiagnoseView = "home" | "investigation";
 interface DiagnoseCtx {
   available: boolean; // an agent CLI is present (button/entry gate)
   agentLabel: string; // label of the selected agent, e.g. "Claude Code"
+  hosted: boolean; // selected agent runs on the host's backend, not this machine
   agents: AgentInfo[]; // supported agents detected on PATH (for the picker)
   selectedAgent: string; // name of the chosen backend ("claude"/"codex")
   setSelectedAgent: (name: string) => void;
@@ -262,6 +263,7 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
     selectedAgent,
     agents.find((a) => a.name === selectedAgent)?.label,
   );
+  const hosted = !!agents.find((a) => a.name === selectedAgent)?.hosted;
 
   useEffect(() => {
     const onResize = () => setViewportW(window.innerWidth);
@@ -434,6 +436,7 @@ export function DiagnoseProvider({ children }: { children: ReactNode }) {
   const value: DiagnoseCtx = {
     available,
     agentLabel,
+    hosted,
     agents,
     selectedAgent,
     setSelectedAgent,

package/src/components/diagnose/InvestigationView.tsx

@@ -44,7 +44,9 @@ export function InvestigationView({
   maximized: boolean;
 }) {
   const { kind, namespace, name } = run;
-  const { refreshRuns, openInvestigation, startError } = useDiagnose();
+  // Apply is off for hosted agents (read-only server-side). Keyed on the selected
+  // agent, which matches run.agent unless a deployment mixes hosted + local agents.
+  const { refreshRuns, openInvestigation, startError, hosted } = useDiagnose();
   const retryDiagnosis = useCallback(
     () => openInvestigation({ kind, namespace, name }),
     [openInvestigation, kind, namespace, name],
@@ -498,7 +500,8 @@ export function InvestigationView({
             <RunContextCard run={run} />
             {turns.map((t, i) => {
               const isLast = i === turns.length - 1;
-              const canApply = i === lastRemediationIdx && !stale;
+              // Hosted runners are read-only — the server refuses apply turns.
+              const canApply = i === lastRemediationIdx && !stale && !hosted;
               const canCheck = isLast && t.status === "done" && !!t.apply;
               return (
                 <TurnView
@@ -541,7 +544,9 @@ export function InvestigationView({
           <ResultCard
             diagnosis={turns[pinnedIdx].diagnosis!}
             onApply={
-              pinnedIdx === lastRemediationIdx && !stale ? requestApply : undefined
+              pinnedIdx === lastRemediationIdx && !stale && !hosted
+                ? requestApply
+                : undefined
             }
             onAsk={!busy && !stale ? askFollowup : undefined}
             reveal="full"

package/src/components/diagnose/LocalDiagnoseAction.tsx

@@ -5,14 +5,15 @@ import type { RenderDiagnoseAction } from "../../context/DiagnoseCustomization";
 
 // The per-resource AI entry point. It no longer owns a panel — it just dispatches
 // to the single app-level AI surface (DiagnoseContext), opening a new investigation
-// for this resource. Self-hides when no agent CLI is present. A host like Radar Hub
-// overrides this slot with its own action.
+// for this resource. Self-hides when no agent CLI is present. Hosts can override
+// this slot with their own action.
 //
 // Adaptive by health: on a resource with a live problem it reads as a prominent
 // "Diagnose" (find the root cause); when the resource is fine or health is unknown
 // it shrinks to a quiet colored-icon affordance ("ask my agent about this") — so it
 // never implies "something is wrong here" on a healthy resource. The tooltip leads
-// with the BYO framing: this runs the user's OWN agent, locally.
+// with the BYO framing (the user's OWN agent, locally) — unless the agent is
+// hosted, where those claims would be false.
 function DiagnoseResourceButton({
   kind,
   namespace,
@@ -31,9 +32,13 @@ function DiagnoseResourceButton({
   const running = runningKeys.has(runTargetKey(kind, namespace, name));
   const tooltip = running
     ? `${d.agentLabel} is investigating this resource — click to watch it live.`
-    : problem
-      ? `Diagnose with your own ${d.agentLabel} — runs locally, reads this resource's spec, events & logs to find the root cause.`
-      : `Ask your own ${d.agentLabel} about this resource — runs locally, reads its spec, events & logs.`;
+    : d.hosted
+      ? problem
+        ? `Diagnose with ${d.agentLabel} — reads this resource's spec, events & logs to find the root cause.`
+        : `Ask ${d.agentLabel} about this resource — reads its spec, events & logs.`
+      : problem
+        ? `Diagnose with your own ${d.agentLabel} — runs locally, reads this resource's spec, events & logs to find the root cause.`
+        : `Ask your own ${d.agentLabel} about this resource — runs locally, reads its spec, events & logs.`;
   // While an investigation is live, the button advertises it (and clicking focuses
   // the existing run rather than starting a new one — openInvestigation dedups).
   const showLabel = problem || running;
@@ -95,7 +100,11 @@ export function IssueDiagnoseButton({
   if (!d.available) return null;
   return (
     <Tooltip
-      content={`Runs ${d.agentLabel} on your machine and sends it this resource's context to find the root cause`}
+      content={
+        d.hosted
+          ? `Sends this resource's context to ${d.agentLabel} to find the root cause`
+          : `Runs ${d.agentLabel} on your machine and sends it this resource's context to find the root cause`
+      }
       position="left"
     >
       <button
@@ -119,12 +128,15 @@ export function GlobalDiagnoseButton() {
   const { runningKeys } = useDiagnoseLayout();
   if (!d.available) return null;
   const runningCount = runningKeys.size;
+  const agentSuffix = d.hosted
+    ? `powered by ${d.agentLabel}`
+    : `runs your own ${d.agentLabel} locally`;
   return (
     <Tooltip
       content={
         runningCount > 0
-          ? `${runningCount} investigation${runningCount > 1 ? "s" : ""} running — runs your own ${d.agentLabel} locally`
-          : `AI investigations — runs your own ${d.agentLabel} locally`
+          ? `${runningCount} investigation${runningCount > 1 ? "s" : ""} running — ${agentSuffix}`
+          : `AI investigations — ${agentSuffix}`
       }
       position="bottom"
     >

package/src/components/helm/InstallWizard.tsx

@@ -28,7 +28,6 @@ function deepMerge(base: Record<string, unknown>, overrides: Record<string, unkn
   }
   return result
 }
-
 interface InstallWizardProps {
   repo: string
   chartName: string
@@ -757,6 +756,7 @@ function ValuesStep({ valuesYaml, setValuesYaml, yamlError, setYamlError, chartD
               <YamlEditor
                 value={valuesYaml}
                 onChange={setValuesYaml}
+                showProblems={false}
                 height="300px"
                 onValidate={(isValid, errors) => {
                   setYamlError(isValid ? null : errors[0] || 'Invalid YAML')

package/src/components/helm/ValuesViewer.tsx

@@ -25,7 +25,6 @@ interface ValuesViewerProps {
   currentRevision?: number
   onApplySuccess?: () => void
 }
-
 export function ValuesViewer({
   values,
   isLoading,
@@ -297,6 +296,7 @@ export function ValuesViewer({
           <YamlEditor
             value={editedYaml}
             onChange={setEditedYaml}
+            showProblems={false}
             height="calc(100vh - 400px)"
             onValidate={(isValid, errors) => {
               setYamlError(isValid ? null : errors[0] || 'Invalid YAML')

package/src/components/settings/SettingsDialog.tsx

@@ -517,8 +517,9 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
               <div className="mb-4">
                 <h3 className="text-base font-semibold text-theme-text-primary">AI diagnose</h3>
                 <p className="mt-0.5 text-xs text-theme-text-tertiary">
-                  Investigate incidents with an AI agent that runs on your own machine — reading
-                  logs, events, and topology to explain what's wrong. No Radar cloud, no API key.
+                  {diag.hosted
+                    ? `Investigate incidents with ${diag.agentLabel} — reading logs, events, and topology to explain what's wrong.`
+                    : "Investigate incidents with an AI agent that runs on your own machine — reading logs, events, and topology to explain what's wrong. No Radar cloud, no API key."}
                 </p>
               </div>
               {aiAvailable ? (
@@ -526,6 +527,8 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
                   <AISettingsSection
                     available={diag.available}
                     agents={diag.agents}
+                    hosted={diag.hosted}
+                    agentLabel={diag.agentLabel}
                     draft={aiDraft}
                     onChange={(patch) => {
                       setAiDraft((d) => ({ ...d, ...patch }))
@@ -533,21 +536,23 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
                     }}
                     onHistoryCleared={diag.refreshRuns}
                   />
-                  <div className="flex items-center justify-end gap-3">
-                    {aiSaved && !aiDirty && (
-                      <span className="flex items-center gap-1 text-xs text-green-600 dark:text-green-400/80">
-                        <Check className="w-3 h-3" />
-                        Saved
-                      </span>
-                    )}
-                    <button
-                      onClick={saveAi}
-                      disabled={!aiDirty}
-                      className="px-4 py-1.5 text-sm font-medium btn-brand rounded-md disabled:opacity-50 disabled:pointer-events-none"
-                    >
-                      Save
-                    </button>
-                  </div>
+                  {!diag.hosted && (
+                    <div className="flex items-center justify-end gap-3">
+                      {aiSaved && !aiDirty && (
+                        <span className="flex items-center gap-1 text-xs text-green-600 dark:text-green-400/80">
+                          <Check className="w-3 h-3" />
+                          Saved
+                        </span>
+                      )}
+                      <button
+                        onClick={saveAi}
+                        disabled={!aiDirty}
+                        className="px-4 py-1.5 text-sm font-medium btn-brand rounded-md disabled:opacity-50 disabled:pointer-events-none"
+                      >
+                        Save
+                      </button>
+                    </div>
+                  )}
                 </div>
               ) : (
                 <AIUnavailableNotice />

package/src/components/shared/CreateResourceDialog.tsx

@@ -1,17 +1,24 @@
 import { type ComponentProps } from 'react'
 import { CreateResourceDialog as BaseCreateResourceDialog } from '@skyhook-io/k8s-ui'
-import { useApplyResource } from '../../api/client'
+import { fetchYamlSchemas, useApplyResource, usePreviewResources } from '../../api/client'
+import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
 
 type BaseProps = ComponentProps<typeof BaseCreateResourceDialog>
 
-export function CreateResourceDialog(props: Omit<BaseProps, 'onApply' | 'isApplying'>) {
+export function CreateResourceDialog(props: Omit<BaseProps, 'onApply' | 'isApplying' | 'onPreview' | 'isPreviewing' | 'previewError' | 'schemaLoader'>) {
   const applyResource = useApplyResource()
+  const previewResources = usePreviewResources()
+  const { features } = useCapabilitiesContext()
 
   return (
     <BaseCreateResourceDialog
       {...props}
       onApply={(params) => applyResource.mutateAsync(params)}
       isApplying={applyResource.isPending}
+      onPreview={features?.yamlReview ? (params) => previewResources.mutateAsync(params) : undefined}
+      isPreviewing={previewResources.isPending}
+      previewError={previewResources.error?.message ?? null}
+      schemaLoader={features?.yamlSchemas ? fetchYamlSchemas : undefined}
     />
   )
 }

package/src/components/workload/WorkloadView.tsx

@@ -35,6 +35,7 @@ import {
   usePodLogs,
   useTopology,
   useUpdateResource,
+  usePreviewResources,
   useDeleteResource,
   useTriggerCronJob,
   useSuspendCronJob,
@@ -60,6 +61,7 @@ import {
   useWorkloadRuns,
   useApplications,
   fetchJSON,
+  fetchYamlSchemas,
 } from '../../api/client'
 import { PrometheusCharts, isPrometheusSupported } from '../resource/PrometheusCharts'
 import { PrometheusChartsGrid } from '../resource/PrometheusChartsGrid'
@@ -79,6 +81,7 @@ import {
   useCanNodeWrite,
   useNamespacedCapabilities,
   useIsLocalDeployment,
+  useCapabilitiesContext,
 } from '../../contexts/CapabilitiesContext'
 import { useOpenTerminal, useOpenLogs, useOpenWorkloadLogs, useOpenNodeTerminal } from '../dock'
 import { PortForwardButton, PortForwardInlineButton } from '../portforward/PortForwardButton'
@@ -651,6 +654,7 @@ export function WorkloadView({
 
   // RBAC
   const canUpdateSecrets = useCanUpdateSecrets()
+  const { features } = useCapabilitiesContext()
   const { canPortForward } = useNamespacedCapabilities(namespace)
   const isLocalDeployment = useIsLocalDeployment()
   const showServingPortForward = canPortForward || !isLocalDeployment
@@ -724,6 +728,7 @@ export function WorkloadView({
     [closeServingCurl, servingCurl],
   )
   const updateResource = useUpdateResource()
+  const previewResources = usePreviewResources()
   const baseActionsBarProps = useActionsBarProps(apiKind, namespace, name)
   const desktopDownload = useDesktopDownload()
 
@@ -761,11 +766,16 @@ export function WorkloadView({
   )
 
   const handleUpdateResource = useCallback(
-    async (params: { kind: string; namespace: string; name: string; yaml: string }) => {
+    async (params: Parameters<typeof updateResource.mutateAsync>[0]) => {
       await updateResource.mutateAsync(params)
     },
     [updateResource],
   )
+  const handlePreviewResource = useCallback(
+    async (params: Parameters<typeof previewResources.mutateAsync>[0]) =>
+      previewResources.mutateAsync(params),
+    [previewResources],
+  )
 
   const navigateRouter = useNavigate()
   const handleOpenGitOpsResource = useCallback(
@@ -901,6 +911,10 @@ export function WorkloadView({
         onUpdateResource={handleUpdateResource}
         isUpdatingResource={updateResource.isPending}
         updateResourceError={updateResource.error?.message ?? null}
+        onPreviewResource={features?.yamlReview ? handlePreviewResource : undefined}
+        isPreviewingResource={previewResources.isPending}
+        previewResourceError={previewResources.error?.message ?? null}
+        yamlSchemaLoader={features?.yamlSchemas ? fetchYamlSchemas : undefined}
         // Tab state (URL-synced)
         activeTab={migratedTab}
         onTabChange={handleTabChange}

package/src/main.tsx

@@ -1,15 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { configureBundledMonaco } from './monaco-setup'
 import { RadarApp } from './RadarApp'
 import { openExternal } from './utils/navigation'
 import './index.css'
 
-// Keep this as an explicit call: side-effect-only imports of the Monaco setup can
-// be dropped by production tree-shaking, which makes offline desktop builds fall
-// back to Monaco's CDN loader.
-configureBundledMonaco()
-
 // Intercept external link clicks in the Wails desktop app.
 // <a target="_blank"> is swallowed by WKWebView/WebView2 — route through openExternal()
 // which calls the backend /api/desktop/open-url endpoint to open in the system browser.

package/src/monaco-deep.d.ts

@@ -1,8 +0,0 @@
-// monaco-editor's package `exports` map ("./*": "./*") doesn't surface type
-// declarations for deep ESM subpaths, so TS can't resolve these imports even
-// though the .js/.d.ts files exist on disk. Re-export the root types for the
-// editor API and declare the YAML grammar as a side-effect-only module.
-declare module 'monaco-editor/esm/vs/editor/editor.api' {
-  export * from 'monaco-editor'
-}
-declare module 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'

package/src/monaco-setup.ts

@@ -1,33 +0,0 @@
-// Load the Monaco editor from the bundled npm package instead of the default
-// jsdelivr CDN. Without this, @monaco-editor/react fetches the editor at runtime
-// over the network, so the YAML editor never loads in airgapped / offline
-// deployments. Bundling makes the binary fully self-contained.
-//
-// Called from main.tsx (Radar's binary entry) only — library consumers
-// (e.g. Radar Hub) keep the default CDN loader unless they opt in.
-//
-// Import the editor API + YAML grammar directly rather than the `monaco-editor`
-// barrel: the barrel pulls in the JSON/CSS/HTML/TypeScript language services,
-// each of which bundles a heavy web worker (the TS one alone is ~7MB) that Radar
-// never uses — it only ever edits YAML.
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
-import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
-import { loader } from '@monaco-editor/react'
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-
-let configured = false
-
-export function configureBundledMonaco() {
-  if (configured) return
-  configured = true
-
-  // YAML has no dedicated Monaco language worker — the base editor worker covers
-  // everything we use, so route every label to it.
-  ;(globalThis as typeof globalThis & { MonacoEnvironment?: { getWorker(): Worker } }).MonacoEnvironment = {
-    getWorker() {
-      return new EditorWorker()
-    },
-  }
-
-  loader.config({ monaco })
-}