@skyhook-io/radar-app 0.2.2 → 0.3.1

package/src/components/helm/RevisionHistory.tsx

@@ -1,19 +1,21 @@
 import { useState } from 'react'
 import { History, Eye, GitCompare, Check, RotateCcw } from 'lucide-react'
 import { clsx } from 'clsx'
-import type { HelmRevision } from '../../types'
+import type { HelmOperation, HelmRevision } from '../../types'
 import { getStatusColor, formatDate, formatAge } from './helm-utils'
 import { SEVERITY_BADGE } from '../../utils/badge-colors'
+import { Tooltip } from '../ui/Tooltip'
 
 interface RevisionHistoryProps {
   history: HelmRevision[]
   currentRevision: number
+  operations?: HelmOperation[]
   onViewRevision: (revision: number) => void
   onCompare: (rev1: number, rev2: number) => void
   onRollback?: (revision: number) => void
 }
 
-export function RevisionHistory({ history, currentRevision, onViewRevision, onCompare, onRollback }: RevisionHistoryProps) {
+export function RevisionHistory({ history, currentRevision, operations = [], onViewRevision, onCompare, onRollback }: RevisionHistoryProps) {
   const [selectedForCompare, setSelectedForCompare] = useState<number | null>(null)
 
   const handleCompareClick = (revision: number) => {
@@ -62,6 +64,7 @@ export function RevisionHistory({ history, currentRevision, onViewRevision, onCo
         {history.map((revision, index) => {
           const isCurrent = revision.revision === currentRevision
           const isSelectedForCompare = selectedForCompare === revision.revision
+          const annotations = operationAnnotationsForRevision(operations, revision.revision, revision.status)
 
           return (
             <div
@@ -105,10 +108,15 @@ export function RevisionHistory({ history, currentRevision, onViewRevision, onCo
                         Current
                       </span>
                     )}
+                    {annotations.map((annotation) => (
+                      <span key={annotation.label} className={clsx('badge-sm', annotation.className)}>
+                        {annotation.label}
+                      </span>
+                    ))}
                   </div>
 
                   <div className="flex items-center gap-4 mt-1 text-xs text-theme-text-tertiary">
-                    <span title={revision.updated}>{formatDate(revision.updated)}</span>
+                    <Tooltip content={revision.updated}><span>{formatDate(revision.updated)}</span></Tooltip>
                     <span>{formatAge(revision.updated)} ago</span>
                   </div>
 
@@ -165,3 +173,44 @@ export function RevisionHistory({ history, currentRevision, onViewRevision, onCo
     </div>
   )
 }
+
+function operationAnnotationsForRevision(operations: HelmOperation[], revision: number, revisionStatus: string): Array<{ label: string; className: string }> {
+  const annotations: Array<{ label: string; className: string }> = []
+  const seen = new Set<string>()
+  const add = (label: string, className: string) => {
+    if (seen.has(label)) return
+    seen.add(label)
+    annotations.push({ label, className })
+  }
+  const addFailure = (label: string) => {
+    if (revisionStatus.toLowerCase() === 'failed') return
+    add(label, SEVERITY_BADGE.error)
+  }
+
+  for (const op of operations) {
+    if (op.failedRevision === revision) {
+      addFailure('Failed upgrade')
+    }
+    if (op.rollbackRevision === revision) {
+      add('Rollback revision', SEVERITY_BADGE.warning)
+    }
+    if (op.revision === revision) {
+      switch (op.kind) {
+        case 'upgrade_failed':
+          addFailure('Failed upgrade')
+          break
+        case 'release_failed':
+          addFailure('Failed')
+          break
+        case 'rollback':
+          add('Rollback', SEVERITY_BADGE.warning)
+          break
+        case 'pending':
+          add('Pending', SEVERITY_BADGE.warning)
+          break
+      }
+    }
+  }
+
+  return annotations
+}

package/src/components/helm/RoleGatedPanel.tsx

@@ -22,7 +22,7 @@ interface RoleGatedPanelProps {
  *
  * Bypasses for non-Cloud users (OSS, OIDC, etc.) — `canAtLeast` returns
  * true when no Cloud role is present. The backend gate has the same
- * shape, so the SPA stays in lockstep.
+ * shape, so the frontend stays in lockstep.
  */
 export function RoleGatedPanel({ min, feature, children }: RoleGatedPanelProps) {
   const { role, canAtLeast } = useCloudRole()
@@ -38,8 +38,8 @@ export function RoleGatedPanel({ min, feature, children }: RoleGatedPanelProps)
         Your role can't view {feature}
       </div>
       <div className="mt-1 max-w-md text-xs text-theme-text-secondary">
-        You're signed in as <span className="font-mono text-theme-text-primary">{role ?? 'viewer'}</span>.
-        This view requires <span className="font-mono text-theme-text-primary">{min}</span> or higher.
+        You're signed in as <span className="inline-code">{role ?? 'viewer'}</span>.
+        This view requires <span className="inline-code">{min}</span> or higher.
         Ask a {min} or owner if you need access.
       </div>
     </div>

package/src/components/helm/TrackChartSourceDialog.tsx

@@ -0,0 +1,185 @@
+import { useState } from 'react'
+import { DialogPortal } from '@skyhook-io/k8s-ui/components/ui/DialogPortal'
+import { X, Plus, Trash2, Link2, AlertTriangle } from 'lucide-react'
+import { clsx } from 'clsx'
+import { useHelmOCISources, useAddOCISource, useRemoveOCISource, useClusterInfo } from '../../api/client'
+import { Input } from '@skyhook-io/k8s-ui'
+import type { UpgradeInfo } from '../../types'
+
+interface TrackChartSourceDialogProps {
+  open: boolean
+  onClose: () => void
+  /** Chart name of the release this was opened from, for the example prompt. */
+  chartName?: string
+  sourceIssue?: UpgradeInfo['sourceIssue']
+  sourceError?: string
+}
+
+function getSourceIssueCopy(sourceIssue: UpgradeInfo['sourceIssue'], sourceError?: string) {
+  switch (sourceIssue) {
+    case 'repo_index_error':
+      return {
+        title: 'A Helm repo index failed',
+        body: 'Fix, refresh, or remove the broken Helm repo index. If this release came from OCI, add its registry prefix and Radar will check OCI before reporting that repo error.',
+      }
+    case 'ambiguous_repository':
+      return {
+        title: 'Multiple Helm repos match',
+        body: 'Radar will not guess between classic repos. Adding an OCI prefix will not enable direct upgrades while those repos remain ambiguous.',
+      }
+    case 'untracked':
+      return {
+        title: 'Source not tracked',
+        body: 'Helm does not record the install source. Add the OCI prefix that contains this chart.',
+      }
+    default:
+      return sourceError
+        ? { title: 'Source unresolved', body: sourceError }
+        : undefined
+  }
+}
+
+// TrackChartSourceDialog lets the user register an OCI chart-source prefix — the
+// OCI analog of `helm repo add`. Helm doesn't persist the ref a release was
+// installed from, so for charts published to an OCI registry (and not managed by
+// GitOps) Radar can only track upgrades once the user declares where they live.
+// Registering a registry/org prefix lets Radar probe "<prefix>/<chartName>".
+export function TrackChartSourceDialog({ open, onClose, chartName, sourceIssue, sourceError }: TrackChartSourceDialogProps) {
+  const [value, setValue] = useState('')
+  const { data: sources } = useHelmOCISources()
+  const { data: clusterInfo } = useClusterInfo()
+  const addSource = useAddOCISource()
+  const removeSource = useRemoveOCISource()
+
+  // In-cluster Radar has no `helm registry login` store (the pod's HELM_CONFIG_HOME
+  // points at an empty /tmp), so private registries can't authenticate — only
+  // public charts can be tracked. Be honest about it rather than silently failing.
+  const inCluster = clusterInfo?.inCluster ?? false
+
+  const trimmed = value.trim()
+  const invalid = trimmed !== '' && !trimmed.startsWith('oci://')
+  const normalizedInput = trimmed.replace(/\/+$/, '')
+  const normalizedChartName = chartName?.trim().replace(/^\/+|\/+$/g, '') ?? ''
+  const probedRef = normalizedInput && normalizedChartName ? `${normalizedInput}/${normalizedChartName}` : ''
+  const looksLikeFullChartRef = Boolean(normalizedInput && normalizedChartName && normalizedInput.endsWith(`/${normalizedChartName}`))
+  const sourceIssueCopy = getSourceIssueCopy(sourceIssue, sourceError)
+
+  const handleAdd = () => {
+    if (!trimmed || invalid) return
+    addSource.mutate(trimmed, { onSuccess: () => setValue('') })
+  }
+
+  return (
+    <DialogPortal open={open} onClose={onClose} className="max-w-lg w-full">
+      <div className="flex items-start gap-3 p-4 border-b border-theme-border">
+        <div className="flex items-center justify-center w-10 h-10 rounded-full shrink-0 bg-theme-hover">
+          <Link2 className="w-5 h-5 text-theme-text-secondary" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <h3 className="text-lg font-semibold text-theme-text-primary">Track chart source</h3>
+          <p className="text-sm text-theme-text-secondary mt-1">
+            Helm doesn&apos;t record where a chart was installed from. Register your OCI
+            registry prefix and Radar will check it for newer versions of your charts.
+          </p>
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+
+      <div className="p-4 space-y-4">
+        {sourceIssueCopy && (
+          <div className="flex items-start gap-2 rounded-lg border border-theme-border bg-theme-elevated px-3 py-2 text-sm">
+            <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5 text-theme-text-secondary" />
+            <div>
+              <p className="font-medium text-theme-text-primary">{sourceIssueCopy.title}</p>
+              <p className="text-theme-text-secondary">{sourceIssueCopy.body}</p>
+            </div>
+          </div>
+        )}
+
+        <div>
+          <label className="block text-sm font-medium text-theme-text-secondary mb-2">
+            OCI registry prefix
+          </label>
+          <div className="flex gap-2">
+            <Input
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
+              placeholder="oci://ghcr.io/myorg/charts"
+              aria-invalid={invalid ? true : undefined}
+              className={clsx(
+                'flex-1 px-3 py-2 bg-theme-elevated border rounded-lg text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2',
+                invalid ? 'border-red-500/60 focus:ring-red-500' : 'border-theme-border-light focus:ring-accent',
+              )}
+            />
+            <button
+              onClick={handleAdd}
+              disabled={!trimmed || invalid || addSource.isPending}
+              className="btn-brand px-3 py-2 text-sm inline-flex items-center gap-1 disabled:opacity-50 disabled:pointer-events-none"
+            >
+              <Plus className="w-4 h-4" />
+              Add
+            </button>
+          </div>
+          <p className="mt-1 text-xs text-theme-text-tertiary">
+            {invalid
+              ? 'Must be an oci:// reference.'
+              : looksLikeFullChartRef
+                ? `This looks like a full chart ref. Radar would probe "${probedRef}"; remove the final "/${normalizedChartName}" if "${normalizedChartName}" is the chart name.`
+              : chartName
+                ? `Radar will probe "${probedRef || `<prefix>/${normalizedChartName}`}".`
+                : 'Radar probes <prefix>/<chartName> for each untracked release.'}
+          </p>
+        </div>
+
+        {sources && sources.length > 0 && (
+          <div>
+            <p className="text-xs font-medium text-theme-text-tertiary uppercase tracking-wide mb-2">
+              Registered sources
+            </p>
+            <ul className="space-y-1">
+              {sources.map((src) => (
+                <li
+                  key={src}
+                  className="flex items-center justify-between gap-2 px-3 py-2 bg-theme-elevated rounded-lg"
+                >
+                  <span className="text-sm text-theme-text-primary font-mono truncate">{src}</span>
+                  <button
+                    onClick={() => removeSource.mutate(src)}
+                    disabled={removeSource.isPending}
+                    className="p-1 text-theme-text-secondary hover:text-red-400 hover:bg-red-500/10 rounded disabled:opacity-50"
+                    aria-label={`Remove ${src}`}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {inCluster ? (
+          <div className="flex items-start gap-2 rounded-lg border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-400">
+            <AlertTriangle className="w-4 h-4 shrink-0 mt-px" />
+            <span>
+              Radar is running in-cluster, where it has no{' '}
+              <span className="font-mono">helm registry login</span> credentials — only{' '}
+              <strong>public</strong> charts can be tracked. Private-registry support for in-cluster
+              Radar isn&apos;t available yet.
+            </span>
+          </div>
+        ) : (
+          <p className="text-xs text-theme-text-tertiary">
+            Credentials are reused from your <span className="font-mono">helm registry login</span>.
+            Radar stores no registry secrets.
+          </p>
+        )}
+      </div>
+    </DialogPortal>
+  )
+}

package/src/components/helm/ValuesDiffPreview.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { X, Play, Loader2, FileText, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
+import { classifyDiffLine } from '@skyhook-io/k8s-ui'
 import type { ValuesPreviewResponse } from '../../types'
 
 interface ValuesDiffPreviewProps {
@@ -8,6 +10,8 @@ interface ValuesDiffPreviewProps {
   onClose: () => void
   onApply: () => void
   isApplying: boolean
+  title?: string
+  applyLabel?: string
 }
 
 export function ValuesDiffPreview({
@@ -15,6 +19,8 @@ export function ValuesDiffPreview({
   onClose,
   onApply,
   isApplying,
+  title = 'Preview Changes',
+  applyLabel = 'Apply Changes',
 }: ValuesDiffPreviewProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
 
@@ -40,7 +46,10 @@ export function ValuesDiffPreview({
   const hasChanges = previewData.manifestDiff.trim().length > 0 &&
     previewData.manifestDiff.split('\n').some(line => line.startsWith('+') || line.startsWith('-'))
 
-  return (
+  // Portal to body so the modal escapes any CSS-transformed ancestor (the release
+  // drawer, the upgrade ConfirmDialog) and layers on top rather than being trapped
+  // in a lower stacking context.
+  return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
@@ -51,6 +60,8 @@ export function ValuesDiffPreview({
       {/* Dialog */}
       <div
         ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
         tabIndex={-1}
         className="relative dialog max-w-4xl w-full mx-4 max-h-[85vh] flex flex-col outline-none"
       >
@@ -58,7 +69,7 @@ export function ValuesDiffPreview({
         <div className="flex items-center justify-between px-4 py-3 border-b border-theme-border shrink-0">
           <div className="flex items-center gap-2">
             <FileText className="w-5 h-5 text-blue-400" />
-            <h3 className="text-lg font-semibold text-theme-text-primary">Preview Changes</h3>
+            <h3 className="text-lg font-semibold text-theme-text-primary">{title}</h3>
           </div>
           <button
             onClick={onClose}
@@ -120,12 +131,13 @@ export function ValuesDiffPreview({
               ) : (
                 <Play className="w-4 h-4" />
               )}
-              Apply Changes
+              {applyLabel}
             </button>
           </div>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   )
 }
 
@@ -158,9 +170,7 @@ interface DiffLineProps {
 }
 
 function DiffLine({ line, lineNumber }: DiffLineProps) {
-  const isAddition = line.startsWith('+') && !line.startsWith('+++')
-  const isDeletion = line.startsWith('-') && !line.startsWith('---')
-  const isHeader = line.startsWith('@@') || line.startsWith('---') || line.startsWith('+++')
+  const { isAddition, isRemoval: isDeletion, isHeader } = classifyDiffLine(line)
 
   return (
     <div

package/src/components/helm/ValuesViewer.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 import { Copy, Check, Settings, Pencil, X, Eye, Play, Loader2 } from 'lucide-react'
 import { PaneLoader } from '@skyhook-io/k8s-ui'
 import { clsx } from 'clsx'
@@ -9,6 +9,7 @@ import { YamlEditor } from '../ui/YamlEditor'
 import { useHelmPreviewValues, useHelmApplyValues } from '../../api/client'
 import { useCanHelmAct } from '../../api/client'
 import { ValuesDiffPreview } from './ValuesDiffPreview'
+import { Tooltip } from '../ui/Tooltip'
 
 interface ValuesViewerProps {
   values?: HelmValues
@@ -20,9 +21,10 @@ interface ValuesViewerProps {
   // Required for editing
   namespace?: string
   name?: string
+  revision?: number
+  currentRevision?: number
   onApplySuccess?: () => void
 }
-
 export function ValuesViewer({
   values,
   isLoading,
@@ -32,6 +34,8 @@ export function ValuesViewer({
   copied,
   namespace,
   name,
+  revision,
+  currentRevision,
   onApplySuccess,
 }: ValuesViewerProps) {
   const [isEditing, setIsEditing] = useState(false)
@@ -43,8 +47,9 @@ export function ValuesViewer({
   const previewMutation = useHelmPreviewValues()
   const applyMutation = useHelmApplyValues()
   const { allowed: canHelmWrite, reason: helmActReason } = useCanHelmAct()
+  const isHistoricalRevision = typeof revision === 'number' && typeof currentRevision === 'number' && revision !== currentRevision
 
-  const canEdit = Boolean(namespace && name) && canHelmWrite
+  const canEdit = Boolean(namespace && name) && canHelmWrite && !isHistoricalRevision
 
   const displayValues = showAllValues && values?.computed ? values.computed : values?.userSupplied
   const isEmpty = !displayValues || Object.keys(displayValues).length === 0
@@ -71,6 +76,12 @@ export function ValuesViewer({
     setShowPreview(false)
   }, [])
 
+  useEffect(() => {
+    if (isHistoricalRevision && isEditing) {
+      handleCancelEdit()
+    }
+  }, [isHistoricalRevision, isEditing, handleCancelEdit])
+
   // Parse YAML and validate
   const parseYaml = useCallback((yamlStr: string): Record<string, unknown> | null => {
     try {
@@ -85,7 +96,7 @@ export function ValuesViewer({
 
   // Preview changes
   const handlePreview = useCallback(async () => {
-    if (!namespace || !name) return
+    if (!namespace || !name || isHistoricalRevision) return
     const parsed = parseYaml(editedYaml)
     if (!parsed) return
 
@@ -100,11 +111,11 @@ export function ValuesViewer({
     } catch {
       // Error is handled by mutation
     }
-  }, [namespace, name, editedYaml, parseYaml, previewMutation])
+  }, [namespace, name, isHistoricalRevision, editedYaml, parseYaml, previewMutation])
 
   // Apply changes
   const handleApply = useCallback(async () => {
-    if (!namespace || !name) return
+    if (!namespace || !name || isHistoricalRevision) return
     const parsed = parseYaml(editedYaml)
     if (!parsed) return
 
@@ -119,11 +130,11 @@ export function ValuesViewer({
     } catch {
       // Error is handled by mutation
     }
-  }, [namespace, name, editedYaml, parseYaml, applyMutation, handleCancelEdit, onApplySuccess])
+  }, [namespace, name, isHistoricalRevision, editedYaml, parseYaml, applyMutation, handleCancelEdit, onApplySuccess])
 
   // Apply from preview modal
   const handleApplyFromPreview = useCallback(async () => {
-    if (!previewData || !namespace || !name) return
+    if (!previewData || !namespace || !name || isHistoricalRevision) return
     try {
       await applyMutation.mutateAsync({
         namespace,
@@ -136,7 +147,7 @@ export function ValuesViewer({
     } catch {
       // Error is handled by mutation
     }
-  }, [previewData, namespace, name, applyMutation, handleCancelEdit, onApplySuccess])
+  }, [previewData, namespace, name, isHistoricalRevision, applyMutation, handleCancelEdit, onApplySuccess])
 
   if (isLoading) {
     return <PaneLoader label="Loading values…" className="h-32" />
@@ -146,7 +157,12 @@ export function ValuesViewer({
     return (
       <div className="p-4">
         <div className="flex items-center justify-between mb-3">
-          <span className="text-sm font-medium text-theme-text-secondary">Values</span>
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-theme-text-secondary">Values</span>
+            {isHistoricalRevision && (
+              <span className="badge-sm bg-theme-hover/50 text-theme-text-secondary">revision {revision}</span>
+            )}
+          </div>
           <div className="flex items-center gap-2">
             <ToggleButton showAll={showAllValues} onToggle={onToggleAllValues} disabled={isEditing} />
             {canEdit && (
@@ -160,6 +176,11 @@ export function ValuesViewer({
             )}
           </div>
         </div>
+        {isHistoricalRevision && (
+          <div className="mb-3 rounded border border-theme-border bg-theme-elevated/40 px-3 py-2 text-xs text-theme-text-secondary">
+            Viewing historical values. Switch back to the latest revision before editing or applying changes.
+          </div>
+        )}
         <div className="flex flex-col items-center justify-center h-32 text-theme-text-tertiary gap-2">
           <Settings className="w-8 h-8 text-theme-text-disabled" />
           <span>{showAllValues ? 'No computed values' : 'No user-supplied values'}</span>
@@ -178,6 +199,9 @@ export function ValuesViewer({
           <span className="text-sm font-medium text-theme-text-secondary">
             {isEditing ? 'Editing Values' : showAllValues ? 'All Values (Computed)' : 'User-Supplied Values'}
           </span>
+          {isHistoricalRevision && !isEditing && (
+            <span className="badge-sm bg-theme-hover/50 text-theme-text-secondary">revision {revision}</span>
+          )}
           {isEditing && (
             <span className="badge-sm bg-amber-500/20 text-amber-400 border-amber-500/30">
               unsaved
@@ -217,7 +241,7 @@ export function ValuesViewer({
               </button>
               <button
                 onClick={handlePreview}
-                disabled={!!yamlError || previewMutation.isPending}
+                disabled={!!yamlError || previewMutation.isPending || isHistoricalRevision}
                 className="flex items-center gap-1 px-2 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded border border-theme-border disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {previewMutation.isPending ? (
@@ -227,11 +251,11 @@ export function ValuesViewer({
                 )}
                 Preview
               </button>
+              <Tooltip content={!canHelmWrite ? helmActReason : ''}>
               <button
                 onClick={handleApply}
-                disabled={!!yamlError || applyMutation.isPending || !canHelmWrite}
-                className="flex items-center gap-1 px-2.5 py-1 text-xs btn-brand rounded disabled:cursor-not-allowed"
-                title={!canHelmWrite ? helmActReason : undefined}
+                disabled={!!yamlError || applyMutation.isPending || !canHelmWrite || isHistoricalRevision}
+                className="flex items-center gap-1 px-2.5 py-1 text-xs btn-brand rounded disabled:cursor-not-allowed disabled:pointer-events-none"
               >
                 {applyMutation.isPending ? (
                   <Loader2 className="w-3.5 h-3.5 animate-spin" />
@@ -240,11 +264,18 @@ export function ValuesViewer({
                 )}
                 Apply
               </button>
+              </Tooltip>
             </>
           )}
         </div>
       </div>
 
+      {isHistoricalRevision && (
+        <div className="mb-3 rounded border border-theme-border bg-theme-elevated/40 px-3 py-2 text-xs text-theme-text-secondary">
+          Viewing historical values. Switch back to the latest revision before editing or applying changes.
+        </div>
+      )}
+
       {/* Error message */}
       {yamlError && (
         <div className="mb-3 px-3 py-2 text-xs text-red-400 bg-red-500/10 border border-red-500/30 rounded">
@@ -265,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')
@@ -320,43 +352,7 @@ function ToggleButton({ showAll, onToggle, disabled }: { showAll: boolean; onTog
   )
 }
 
-// Simple JSON to YAML converter for display
-function jsonToYaml(obj: Record<string, unknown>, indent = 0): string {
-  const spaces = '  '.repeat(indent)
-  let result = ''
-
-  for (const [key, value] of Object.entries(obj)) {
-    if (value === null || value === undefined) {
-      result += `${spaces}${key}: null\n`
-    } else if (typeof value === 'object' && !Array.isArray(value)) {
-      result += `${spaces}${key}:\n`
-      result += jsonToYaml(value as Record<string, unknown>, indent + 1)
-    } else if (Array.isArray(value)) {
-      result += `${spaces}${key}:\n`
-      for (const item of value) {
-        if (typeof item === 'object' && item !== null) {
-          result += `${spaces}- \n`
-          const itemYaml = jsonToYaml(item as Record<string, unknown>, indent + 2)
-          result += itemYaml
-        } else {
-          result += `${spaces}- ${formatValue(item)}\n`
-        }
-      }
-    } else {
-      result += `${spaces}${key}: ${formatValue(value)}\n`
-    }
-  }
-
-  return result
-}
-
-function formatValue(value: unknown): string {
-  if (typeof value === 'string') {
-    // Quote strings that contain special characters
-    if (value.includes(':') || value.includes('#') || value.includes('\n') || value.startsWith(' ') || value.endsWith(' ')) {
-      return `"${value.replace(/"/g, '\\"')}"`
-    }
-    return value
-  }
-  return String(value)
+function jsonToYaml(obj: Record<string, unknown>): string {
+  if (!obj || Object.keys(obj).length === 0) return ''
+  return yaml.stringify(obj, { lineWidth: 0 })
 }

package/src/components/helm/helm-utils.ts

@@ -35,3 +35,7 @@ export function getChartDisplay(chart: string, version: string): string {
 
 // Re-export kindToPlural from centralized navigation utils
 export { kindToPlural } from '../../utils/navigation'
+
+// Re-export from k8s-ui where the predicate lives next to the
+// Helm status color palette and is unit-tested.
+export { isHelmReleaseActionable } from '../../utils/badge-colors'

package/src/components/home/ActivitySummary.tsx

@@ -82,6 +82,9 @@ export function ActivitySummary({ namespaces, topology, onNavigate }: ActivitySu
     limit: 1000,
   })
 
+  // Intentionally re-sample 'now' only when events refresh (not every render),
+  // so the timeline window stays stable between data updates.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const now = useMemo(() => Date.now(), [events])
   const spanMs = SPAN_MINUTES * 60 * 1000
   const startTime = now - spanMs
@@ -125,7 +128,7 @@ export function ActivitySummary({ namespaces, topology, onNavigate }: ActivitySu
       <div className="flex-1 min-h-0 overflow-hidden px-4 py-1.5">
         {isLoading ? (
           <div className="flex items-center justify-center h-full py-4 text-xs text-theme-text-tertiary">
-            Loading...
+            Loading…
           </div>
         ) : error ? (
           <div className="flex items-center justify-center h-full py-4 text-xs text-theme-text-tertiary">