@skyhook-io/radar-app 0.1.1

package/src/components/helm/ValuesViewer.tsx

@@ -0,0 +1,365 @@
+import { useState, useCallback } from 'react'
+import { Copy, Check, Settings, Pencil, X, Eye, Play, Loader2 } from 'lucide-react'
+import { clsx } from 'clsx'
+import yaml from 'yaml'
+import type { HelmValues, ValuesPreviewResponse } from '../../types'
+import { CodeViewer } from '../ui/CodeViewer'
+import { YamlEditor } from '../ui/YamlEditor'
+import { useHelmPreviewValues, useHelmApplyValues } from '../../api/client'
+import { useCanHelmWrite } from '../../contexts/CapabilitiesContext'
+import { ValuesDiffPreview } from './ValuesDiffPreview'
+
+interface ValuesViewerProps {
+  values?: HelmValues
+  isLoading: boolean
+  showAllValues: boolean
+  onToggleAllValues: (show: boolean) => void
+  onCopy: (text: string) => void
+  copied: boolean
+  // Required for editing
+  namespace?: string
+  name?: string
+  onApplySuccess?: () => void
+}
+
+export function ValuesViewer({
+  values,
+  isLoading,
+  showAllValues,
+  onToggleAllValues,
+  onCopy,
+  copied,
+  namespace,
+  name,
+  onApplySuccess,
+}: ValuesViewerProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [editedYaml, setEditedYaml] = useState('')
+  const [yamlError, setYamlError] = useState<string | null>(null)
+  const [previewData, setPreviewData] = useState<ValuesPreviewResponse | null>(null)
+  const [showPreview, setShowPreview] = useState(false)
+
+  const previewMutation = useHelmPreviewValues()
+  const applyMutation = useHelmApplyValues()
+  const canHelmWrite = useCanHelmWrite()
+
+  const canEdit = Boolean(namespace && name) && canHelmWrite
+
+  const displayValues = showAllValues && values?.computed ? values.computed : values?.userSupplied
+  const isEmpty = !displayValues || Object.keys(displayValues).length === 0
+
+  // Start editing mode
+  const handleStartEdit = useCallback(() => {
+    // Allow editing even with no user-supplied values (start with empty YAML)
+    const yamlStr = values?.userSupplied ? jsonToYaml(values.userSupplied) : ''
+    setEditedYaml(yamlStr)
+    setYamlError(null)
+    setIsEditing(true)
+    // Switch to user-supplied view when editing
+    if (showAllValues) {
+      onToggleAllValues(false)
+    }
+  }, [values?.userSupplied, showAllValues, onToggleAllValues])
+
+  // Cancel editing
+  const handleCancelEdit = useCallback(() => {
+    setIsEditing(false)
+    setEditedYaml('')
+    setYamlError(null)
+    setPreviewData(null)
+    setShowPreview(false)
+  }, [])
+
+  // Parse YAML and validate
+  const parseYaml = useCallback((yamlStr: string): Record<string, unknown> | null => {
+    try {
+      const parsed = yaml.parse(yamlStr)
+      setYamlError(null)
+      return parsed || {}
+    } catch (err) {
+      setYamlError(err instanceof Error ? err.message : 'Invalid YAML')
+      return null
+    }
+  }, [])
+
+  // Preview changes
+  const handlePreview = useCallback(async () => {
+    if (!namespace || !name) return
+    const parsed = parseYaml(editedYaml)
+    if (!parsed) return
+
+    try {
+      const result = await previewMutation.mutateAsync({
+        namespace,
+        name,
+        values: parsed,
+      })
+      setPreviewData(result)
+      setShowPreview(true)
+    } catch {
+      // Error is handled by mutation
+    }
+  }, [namespace, name, editedYaml, parseYaml, previewMutation])
+
+  // Apply changes
+  const handleApply = useCallback(async () => {
+    if (!namespace || !name) return
+    const parsed = parseYaml(editedYaml)
+    if (!parsed) return
+
+    try {
+      await applyMutation.mutateAsync({
+        namespace,
+        name,
+        values: parsed,
+      })
+      handleCancelEdit()
+      onApplySuccess?.()
+    } catch {
+      // Error is handled by mutation
+    }
+  }, [namespace, name, editedYaml, parseYaml, applyMutation, handleCancelEdit, onApplySuccess])
+
+  // Apply from preview modal
+  const handleApplyFromPreview = useCallback(async () => {
+    if (!previewData || !namespace || !name) return
+    try {
+      await applyMutation.mutateAsync({
+        namespace,
+        name,
+        values: previewData.newValues,
+      })
+      setShowPreview(false)
+      handleCancelEdit()
+      onApplySuccess?.()
+    } catch {
+      // Error is handled by mutation
+    }
+  }, [previewData, namespace, name, applyMutation, handleCancelEdit, onApplySuccess])
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-32 text-theme-text-tertiary">
+        Loading values...
+      </div>
+    )
+  }
+
+  if (isEmpty && !isEditing) {
+    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">
+            <ToggleButton showAll={showAllValues} onToggle={onToggleAllValues} disabled={isEditing} />
+            {canEdit && (
+              <button
+                onClick={handleStartEdit}
+                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"
+              >
+                <Pencil className="w-3.5 h-3.5" />
+                Edit
+              </button>
+            )}
+          </div>
+        </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>
+        </div>
+      </div>
+    )
+  }
+
+  const yamlContent = isEditing ? editedYaml : jsonToYaml(displayValues || {})
+
+  return (
+    <div className="p-4 flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-theme-text-secondary">
+            {isEditing ? 'Editing Values' : showAllValues ? 'All Values (Computed)' : 'User-Supplied Values'}
+          </span>
+          {isEditing && (
+            <span className="badge-sm bg-amber-500/20 text-amber-400 border-amber-500/30">
+              unsaved
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {!isEditing && (
+            <>
+              <ToggleButton showAll={showAllValues} onToggle={onToggleAllValues} disabled={isEditing} />
+              <button
+                onClick={() => onCopy(yamlContent)}
+                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"
+              >
+                {copied ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
+                Copy
+              </button>
+              {canEdit && (
+                <button
+                  onClick={handleStartEdit}
+                  className="flex items-center gap-1 px-2 py-1 text-xs text-blue-400 hover:text-blue-300 hover:bg-blue-500/10 rounded border border-blue-500/30"
+                >
+                  <Pencil className="w-3.5 h-3.5" />
+                  Edit
+                </button>
+              )}
+            </>
+          )}
+          {isEditing && (
+            <>
+              <button
+                onClick={handleCancelEdit}
+                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"
+              >
+                <X className="w-3.5 h-3.5" />
+                Cancel
+              </button>
+              <button
+                onClick={handlePreview}
+                disabled={!!yamlError || previewMutation.isPending}
+                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 ? (
+                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                ) : (
+                  <Eye className="w-3.5 h-3.5" />
+                )}
+                Preview
+              </button>
+              <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 ? 'Helm write permissions required (rbac.helm=true)' : undefined}
+              >
+                {applyMutation.isPending ? (
+                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                ) : (
+                  <Play className="w-3.5 h-3.5" />
+                )}
+                Apply
+              </button>
+            </>
+          )}
+        </div>
+      </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">
+          {yamlError}
+        </div>
+      )}
+
+      {/* Mutation error */}
+      {(previewMutation.error || applyMutation.error) && (
+        <div className="mb-3 px-3 py-2 text-xs text-red-400 bg-red-500/10 border border-red-500/30 rounded">
+          {previewMutation.error?.message || applyMutation.error?.message}
+        </div>
+      )}
+
+      {/* Editor / Viewer */}
+      <div className="flex-1 min-h-0">
+        {isEditing ? (
+          <YamlEditor
+            value={editedYaml}
+            onChange={setEditedYaml}
+            height="calc(100vh - 400px)"
+            onValidate={(isValid, errors) => {
+              setYamlError(isValid ? null : errors[0] || 'Invalid YAML')
+            }}
+          />
+        ) : (
+          <CodeViewer
+            code={yamlContent}
+            language="yaml"
+            showLineNumbers
+            maxHeight="calc(100vh - 300px)"
+          />
+        )}
+      </div>
+
+      {/* Preview Modal */}
+      {showPreview && previewData && (
+        <ValuesDiffPreview
+          previewData={previewData}
+          onClose={() => setShowPreview(false)}
+          onApply={handleApplyFromPreview}
+          isApplying={applyMutation.isPending}
+        />
+      )}
+    </div>
+  )
+}
+
+function ToggleButton({ showAll, onToggle, disabled }: { showAll: boolean; onToggle: (show: boolean) => void; disabled?: boolean }) {
+  return (
+    <div className={clsx('flex items-center bg-theme-elevated/50 rounded-md p-0.5 text-xs', disabled && 'opacity-50 pointer-events-none')}>
+      <button
+        onClick={() => onToggle(false)}
+        disabled={disabled}
+        className={clsx(
+          'px-2 py-1 rounded transition-colors',
+          !showAll ? 'bg-theme-hover text-theme-text-primary' : 'text-theme-text-secondary hover:text-theme-text-primary'
+        )}
+      >
+        User
+      </button>
+      <button
+        onClick={() => onToggle(true)}
+        disabled={disabled}
+        className={clsx(
+          'px-2 py-1 rounded transition-colors',
+          showAll ? 'bg-theme-hover text-theme-text-primary' : 'text-theme-text-secondary hover:text-theme-text-primary'
+        )}
+      >
+        All
+      </button>
+    </div>
+  )
+}
+
+// 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)
+}

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

@@ -0,0 +1,37 @@
+// Utility functions for Helm components
+
+import { getHelmStatusColor } from '../../utils/badge-colors'
+// Re-export formatAge from resource-utils to avoid duplication
+export { formatAge } from '../resources/resource-utils'
+
+// Get status color classes for Helm release status
+// Delegates to centralized badge-colors for consistency
+export function getStatusColor(status: string): string {
+  return getHelmStatusColor(status)
+}
+
+// Format date for display
+export function formatDate(dateString: string): string {
+  const date = new Date(dateString)
+  return date.toLocaleString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+// Truncate text with ellipsis
+export function truncate(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text
+  return text.slice(0, maxLength - 3) + '...'
+}
+
+// Get chart display name (combines chart name and version)
+export function getChartDisplay(chart: string, version: string): string {
+  return `${chart}-${version}`
+}
+
+// Re-export kindToPlural from centralized navigation utils
+export { kindToPlural } from '../../utils/navigation'

package/src/components/home/ActivitySummary.tsx

@@ -0,0 +1,262 @@
+import { useMemo } from 'react'
+import { clsx } from 'clsx'
+import { Clock, ArrowRight, Shield } from 'lucide-react'
+import { useChanges } from '../../api/client'
+import { isChangeEvent } from '../../types'
+import type { TimelineEvent } from '../../types'
+import type { Topology } from '../../types'
+import { useHasLimitedAccess } from '../../contexts/CapabilitiesContext'
+import { buildResourceHierarchy, isProblematicEvent, type ResourceLane } from '../../utils/resource-hierarchy'
+import { buildHealthSpans, timeToX } from '../timeline/shared'
+
+interface ActivitySummaryProps {
+  namespaces: string[]
+  topology?: Topology | null
+  onNavigate: () => void
+}
+
+const MAX_LANES = 6
+const SPAN_MINUTES = 60
+
+const HEALTH_SPAN_COLORS: Record<string, string> = {
+  healthy: 'bg-green-500/50 dark:bg-green-600/50',
+  rolling: 'bg-blue-500/50 dark:bg-blue-500/50',
+  degraded: 'bg-amber-500/50 dark:bg-[#b8861e]',
+  unhealthy: 'bg-red-500/50 dark:bg-red-500/50',
+}
+
+// Simplified interestingness scoring for the mini view
+function scoreLane(lane: ResourceLane): number {
+  const allEvents = [...lane.events, ...(lane.children?.flatMap(c => c.events) || [])]
+  let score = 0
+
+  const kindScores: Record<string, number> = {
+    Deployment: 50, Rollout: 50, StatefulSet: 50, DaemonSet: 50,
+    Service: 45, Ingress: 45, Gateway: 45,
+    HTTPRoute: 42, GRPCRoute: 42, TCPRoute: 42, TLSRoute: 42,
+    Job: 40, CronJob: 40,
+    Pod: 30, ReplicaSet: 20,
+  }
+  score += kindScores[lane.kind] || 15
+
+  // Problematic events are most important
+  score += allEvents.filter(e => isProblematicEvent(e)).length * 40
+
+  // Recency bonus
+  const fiveMinAgo = Date.now() - 5 * 60 * 1000
+  score += Math.min(allEvents.filter(e => new Date(e.timestamp).getTime() > fiveMinAgo).length * 30, 150)
+
+  // Children bonus
+  if (lane.children && lane.children.length > 0) score += 10
+
+  // System namespace penalty
+  if (['kube-system', 'kube-public', 'kube-node-lease'].includes(lane.namespace)) score -= 30
+
+  return score
+}
+
+// Short kind labels for compact display
+const KIND_SHORT: Record<string, string> = {
+  Deployment: 'Deploy',
+  StatefulSet: 'SS',
+  DaemonSet: 'DS',
+  ReplicaSet: 'RS',
+  Service: 'Svc',
+  ConfigMap: 'CM',
+  CronJob: 'CJ',
+  Ingress: 'Ing',
+  Gateway: 'GW',
+  HTTPRoute: 'HR',
+  GRPCRoute: 'gRPC',
+  TCPRoute: 'TCP',
+  TLSRoute: 'TLS',
+}
+
+export function ActivitySummary({ namespaces, topology, onNavigate }: ActivitySummaryProps) {
+  const hasLimitedAccess = useHasLimitedAccess()
+  const { data: events, isLoading, error } = useChanges({
+    namespaces,
+    timeRange: '1h',
+    includeK8sEvents: true,
+    includeManaged: true,
+    limit: 1000,
+  })
+
+  const now = useMemo(() => Date.now(), [events])
+  const spanMs = SPAN_MINUTES * 60 * 1000
+  const startTime = now - spanMs
+
+  const lanes = useMemo(() => {
+    if (!events || events.length === 0) return []
+
+    // Only use events within the visible window
+    const windowEvents = events.filter(e => {
+      const t = new Date(e.timestamp).getTime()
+      return t >= startTime && t <= now
+    })
+    if (windowEvents.length === 0) return []
+
+    const hierarchy = buildResourceHierarchy({
+      events: windowEvents,
+      topology: topology || undefined,
+    })
+    return hierarchy
+      .sort((a, b) => scoreLane(b) - scoreLane(a))
+      .slice(0, MAX_LANES)
+  }, [events, startTime, now, topology])
+
+  const hasActivity = lanes.length > 0
+
+  return (
+    <button
+      onClick={onNavigate}
+      className="group h-[260px] rounded-xl bg-theme-surface shadow-theme-sm hover:-translate-y-1 hover:shadow-theme-md transition-all duration-200 text-left"
+    >
+      <div className="flex flex-col h-full w-full">
+      <div className="flex items-center justify-between px-5 py-3 border-b border-theme-border/50">
+        <div className="flex items-center gap-2">
+          <Clock className="w-4 h-4 text-theme-text-tertiary" />
+          <span className="text-xs font-semibold uppercase tracking-wider text-theme-text-secondary">Timeline</span>
+        </div>
+        <span className="text-xs text-theme-text-tertiary">last {SPAN_MINUTES}m</span>
+      </div>
+
+      {/* Mini swimlanes */}
+      <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...
+          </div>
+        ) : error ? (
+          <div className="flex items-center justify-center h-full py-4 text-xs text-theme-text-tertiary">
+            Could not load activity
+          </div>
+        ) : !hasActivity ? (
+          <div className="flex flex-col items-center justify-center h-full py-4 text-xs text-theme-text-tertiary">
+            <span>No recent activity</span>
+            {hasLimitedAccess && (
+              <span className="flex items-center gap-1 mt-1.5 text-[11px] text-amber-400/80">
+                <Shield className="w-3 h-3" />
+                Some resource types are not monitored due to RBAC restrictions
+              </span>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {lanes.map((lane) => (
+              <MiniLane
+                key={lane.id}
+                lane={lane}
+                startTime={startTime}
+                now={now}
+                spanMs={spanMs}
+              />
+            ))}
+
+            {/* Time axis */}
+            <div className="flex items-center justify-between text-[10px] text-theme-text-tertiary pt-1">
+              <span>{SPAN_MINUTES}m ago</span>
+              <span>now</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="px-4 py-1.5 border-t border-theme-border/50 flex items-center justify-end gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-theme-text-secondary group-hover:text-theme-text-primary transition-colors">
+        Open Timeline
+        <ArrowRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
+      </div>
+      </div>
+    </button>
+  )
+}
+
+// A single compact swimlane row: [kind label + name] [health bar with event dots]
+function MiniLane({ lane, startTime, now, spanMs }: {
+  lane: ResourceLane
+  startTime: number
+  now: number
+  spanMs: number
+}) {
+  const allEvents: TimelineEvent[] = lane.allEventsSorted || [
+    ...lane.events,
+    ...(lane.children?.flatMap(c => c.events) || []),
+  ]
+  const changeEvents = allEvents.filter(e => isChangeEvent(e))
+  const { spans } = buildHealthSpans(changeEvents, startTime, now, allEvents)
+
+  const hasProblems = allEvents.some(e => isProblematicEvent(e))
+  const kindLabel = KIND_SHORT[lane.kind] || lane.kind
+
+  return (
+    <div className="flex items-center gap-2 h-5">
+      {/* Label */}
+      <div className="w-[6.5rem] shrink-0 flex items-center gap-1 min-w-0">
+        <span className={clsx(
+          'badge-sm shrink-0',
+          hasProblems
+            ? 'status-degraded'
+            : 'bg-theme-elevated text-theme-text-tertiary',
+        )}>
+          {kindLabel}
+        </span>
+        <span className="text-[11px] text-theme-text-secondary truncate">
+          {lane.name}
+        </span>
+      </div>
+
+      {/* Health bar track */}
+      <div className="flex-1 relative h-3 bg-theme-border/20 rounded-sm overflow-hidden">
+        {/* Health state spans */}
+        {spans.map((span, i) => {
+          const left = timeToX(span.start, startTime, spanMs)
+          const right = timeToX(span.end, startTime, spanMs)
+          const width = right - left
+          if (width <= 0 || right < 0 || left > 100) return null
+
+          const clampedLeft = Math.max(0, left)
+          const clampedWidth = Math.min(100 - clampedLeft, width - (clampedLeft - left))
+          if (clampedWidth <= 0) return null
+
+          return (
+            <div
+              key={i}
+              className={clsx(
+                'absolute top-0 bottom-0 rounded-sm',
+                HEALTH_SPAN_COLORS[span.health] || 'bg-gray-400/30',
+              )}
+              style={{ left: `${clampedLeft}%`, width: `${clampedWidth}%` }}
+            />
+          )
+        })}
+
+        {/* All event dots — small for normal, larger for critical */}
+        {allEvents.map((event, idx) => {
+          const x = timeToX(new Date(event.timestamp).getTime(), startTime, spanMs)
+          if (x < 0 || x > 100) return null
+
+          const isCritical = isProblematicEvent(event)
+
+          return (
+            <div
+              key={`${event.id}-${idx}`}
+              className={clsx(
+                'absolute top-1/2 -translate-y-1/2 -translate-x-1/2 rounded-full',
+                isCritical
+                  ? 'w-2.5 h-2.5 bg-red-500 ring-1 ring-red-500/30 z-10'
+                  : 'w-1.5 h-1.5',
+                !isCritical && (
+                  event.eventType === 'add' ? 'bg-green-500'
+                    : event.eventType === 'delete' ? 'bg-red-500'
+                      : event.eventType === 'update' ? 'bg-blue-500'
+                        : 'bg-theme-text-tertiary'
+                ),
+              )}
+              style={{ left: `${x}%` }}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}