@skyhook-io/k8s-ui 1.0.0

package/src/components/resources/renderers/HPARenderer.tsx

@@ -0,0 +1,164 @@
+import { Cpu, AlertTriangle } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, ResourceLink } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+
+interface HPARendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+// Extract problems from HPA conditions
+function getHPAProblems(data: any): string[] {
+  const problems: string[] = []
+  const conditions = data.status?.conditions || []
+  const status = data.status || {}
+  const spec = data.spec || {}
+
+  // Check conditions for issues
+  for (const cond of conditions) {
+    // AbleToScale = False means target not found or can't scale
+    if (cond.type === 'AbleToScale' && cond.status === 'False') {
+      problems.push(`Cannot scale: ${cond.reason}${cond.message ? ' - ' + cond.message : ''}`)
+    }
+
+    // ScalingActive = False means metrics unavailable
+    if (cond.type === 'ScalingActive' && cond.status === 'False') {
+      if (cond.reason === 'FailedGetResourceMetric') {
+        problems.push('Metrics unavailable — is metrics-server running?')
+      } else {
+        problems.push(`Scaling inactive: ${cond.reason}${cond.message ? ' - ' + cond.message : ''}`)
+      }
+    }
+
+    // ScalingLimited = True means at min/max bound
+    if (cond.type === 'ScalingLimited' && cond.status === 'True') {
+      if (cond.reason === 'TooFewReplicas') {
+        problems.push(`At minimum replicas (${spec.minReplicas || 1}) — cannot scale down further`)
+      } else if (cond.reason === 'TooManyReplicas') {
+        problems.push(`At maximum replicas (${spec.maxReplicas}) — cannot scale up further`)
+      }
+    }
+  }
+
+  // Check for desired != current (scaling in progress or stuck)
+  if (status.currentReplicas !== undefined && status.desiredReplicas !== undefined) {
+    if (status.currentReplicas !== status.desiredReplicas) {
+      const direction = status.desiredReplicas > status.currentReplicas ? 'up' : 'down'
+      problems.push(`Scaling ${direction}: ${status.currentReplicas} → ${status.desiredReplicas} replicas`)
+    }
+  }
+
+  return problems
+}
+
+export function HPARenderer({ data, onNavigate }: HPARendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const metrics = status.currentMetrics || []
+
+  // Check for problems
+  const problems = getHPAProblems(data)
+  const hasProblems = problems.length > 0
+
+  // Determine if these are errors (red) or warnings (yellow)
+  const hasErrors = problems.some(p =>
+    p.includes('Cannot scale') || p.includes('unavailable') || p.includes('inactive')
+  )
+
+  return (
+    <>
+      {/* Problems/warnings alert */}
+      {hasProblems && (
+        <div className={clsx(
+          'mb-4 p-3 rounded-lg border',
+          hasErrors
+            ? 'bg-red-500/10 border-red-500/30'
+            : 'bg-yellow-500/10 border-yellow-500/30'
+        )}>
+          <div className="flex items-start gap-2">
+            <AlertTriangle className={clsx(
+              'w-4 h-4 mt-0.5 shrink-0',
+              hasErrors ? 'text-red-400' : 'text-yellow-400'
+            )} />
+            <div className="flex-1 min-w-0">
+              <div className={clsx(
+                'text-sm font-medium mb-1',
+                hasErrors ? 'text-red-400' : 'text-yellow-400'
+              )}>
+                {hasErrors ? 'Scaling Issues' : 'Scaling Status'}
+              </div>
+              <ul className={clsx(
+                'text-xs space-y-1',
+                hasErrors ? 'text-red-300' : 'text-yellow-300'
+              )}>
+                {problems.map((problem, i) => (
+                  <li key={i} className="flex items-start gap-1.5">
+                    <span className={clsx(
+                      'mt-0.5',
+                      hasErrors ? 'text-red-400/60' : 'text-yellow-400/60'
+                    )}>•</span>
+                    <span>{problem}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Section title="Scaling" icon={Cpu}>
+        <PropertyList>
+          <Property label="Target" value={
+            spec.scaleTargetRef?.name ? (
+              <ResourceLink
+                name={spec.scaleTargetRef.name}
+                kind={(spec.scaleTargetRef.kind || 'Deployment').toLowerCase() + 's'}
+                namespace={data.metadata?.namespace || ''}
+                label={`${spec.scaleTargetRef.kind}/${spec.scaleTargetRef.name}`}
+                onNavigate={onNavigate}
+              />
+            ) : undefined
+          } />
+          <Property label="Current" value={status.currentReplicas} />
+          <Property label="Desired" value={status.desiredReplicas} />
+          <Property label="Min" value={spec.minReplicas || 1} />
+          <Property label="Max" value={spec.maxReplicas} />
+          {status.lastScaleTime && <Property label="Last Scale" value={formatAge(status.lastScaleTime)} />}
+        </PropertyList>
+      </Section>
+
+      {metrics.length > 0 && (
+        <Section title="Metrics" defaultExpanded>
+          <div className="space-y-3">
+            {metrics.map((metric: any, i: number) => {
+              const current = metric.resource?.current?.averageUtilization || metric.resource?.current?.averageValue
+              const target = spec.metrics?.[i]?.resource?.target?.averageUtilization || spec.metrics?.[i]?.resource?.target?.averageValue
+              return (
+                <div key={i} className="bg-theme-elevated/30 rounded p-2">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-theme-text-primary">{metric.resource?.name || metric.type}</span>
+                    <span className="text-theme-text-secondary">{current}{typeof current === 'number' ? '%' : ''} / {target}{typeof target === 'number' ? '%' : ''}</span>
+                  </div>
+                  {typeof current === 'number' && typeof target === 'number' && (
+                    <div className="mt-2 h-2 bg-theme-hover rounded overflow-hidden">
+                      <div
+                        className={clsx(
+                          'h-full transition-all',
+                          current > target ? 'bg-red-500' : current > target * 0.8 ? 'bg-yellow-500' : 'bg-green-500'
+                        )}
+                        style={{ width: `${Math.min(100, (current / target) * 100)}%` }}
+                      />
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={status.conditions} />
+    </>
+  )
+}

package/src/components/resources/renderers/HTTPRouteRenderer.tsx

@@ -0,0 +1,303 @@
+import { Globe, ArrowRight, Network, Filter } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceRefBadge } from '../../ui/drawer-components'
+import type { ResourceRef } from '../../../types'
+
+interface HTTPRouteRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+export function HTTPRouteRenderer({ data, onNavigate }: HTTPRouteRendererProps) {
+  const spec = data.spec || {}
+  const status = data.status || {}
+  const parentRefs = spec.parentRefs || []
+  const hostnames = spec.hostnames || []
+  const rules = spec.rules || []
+  const parentStatuses = status.parents || []
+  const routeNs = data.metadata?.namespace || ''
+
+  const notAcceptedParents = parentStatuses.filter((p: any) =>
+    (p.conditions || []).some((c: any) => c.type === 'Accepted' && c.status === 'False')
+  )
+  const unresolvedRefsParents = parentStatuses.filter((p: any) =>
+    (p.conditions || []).some((c: any) => c.type === 'ResolvedRefs' && c.status === 'False')
+  )
+
+  const firstParentConditions = parentStatuses.length > 0
+    ? parentStatuses[0].conditions
+    : undefined
+
+  function toGatewayRef(ref: any): ResourceRef {
+    return {
+      kind: 'Gateway',
+      namespace: ref.namespace || routeNs,
+      name: ref.name,
+      group: 'gateway.networking.k8s.io',
+    }
+  }
+
+  function toServiceRef(backend: any): ResourceRef {
+    return {
+      kind: 'Service',
+      namespace: backend.namespace || routeNs,
+      name: backend.name,
+    }
+  }
+
+  return (
+    <>
+      {notAcceptedParents.length > 0 && (
+        <AlertBanner
+          variant="error"
+          title="Route Not Accepted"
+          message={notAcceptedParents.map((p: any) => {
+            const cond = (p.conditions || []).find((c: any) => c.type === 'Accepted' && c.status === 'False')
+            const gwName = p.parentRef?.name || 'unknown'
+            return cond?.reason
+              ? `Gateway "${gwName}": ${cond.reason}${cond.message ? ' — ' + cond.message : ''}`
+              : `Gateway "${gwName}" has not accepted this route.`
+          }).join('; ')}
+        />
+      )}
+
+      {unresolvedRefsParents.length > 0 && (
+        <AlertBanner
+          variant="warning"
+          title="Unresolved References"
+          message="Some backend references could not be resolved. Check that the target services exist and are accessible."
+        />
+      )}
+
+      <Section title="Status" icon={Globe}>
+        <PropertyList>
+          <Property
+            label="Hostnames"
+            value={
+              hostnames.length > 0 ? (
+                <div className="flex flex-wrap gap-1">
+                  {hostnames.map((h: string) => (
+                    <span key={h} className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">{h}</span>
+                  ))}
+                </div>
+              ) : (
+                <span className="text-xs text-theme-text-tertiary">Any</span>
+              )
+            }
+          />
+          <Property
+            label="Parent Gateways"
+            value={
+              parentRefs.length > 0 ? (
+                <div className="flex flex-wrap gap-1">
+                  {parentRefs.map((ref: any, i: number) => (
+                    <ResourceRefBadge key={`${ref.namespace || ''}-${ref.name}-${i}`} resourceRef={toGatewayRef(ref)} onClick={onNavigate} />
+                  ))}
+                </div>
+              ) : 'None'
+            }
+          />
+        </PropertyList>
+      </Section>
+
+      <Section title={`Rules (${rules.length})`} icon={Network} defaultExpanded>
+        <div className="space-y-1.5">
+          {rules.map((rule: any, ruleIdx: number) => {
+            const matches = rule.matches || []
+            const backendRefs = rule.backendRefs || []
+            const filters = rule.filters || []
+            const totalWeight = backendRefs.reduce((sum: number, b: any) => sum + (b.weight ?? 1), 0)
+            const hasWeights = backendRefs.length > 1 && backendRefs.some((b: any) => b.weight !== undefined)
+            const multiBackend = backendRefs.length > 1
+
+            return (
+              <div key={ruleIdx} className="bg-theme-elevated/30 rounded p-2.5">
+                <div className="text-xs font-medium text-theme-text-tertiary mb-1.5">
+                  Rule {ruleIdx + 1}
+                </div>
+
+                {/* Matches → backends inline */}
+                <div className="space-y-1">
+                  {matches.length === 0 && backendRefs.length === 0 && (
+                    <div className="text-xs text-theme-text-secondary italic">Match all</div>
+                  )}
+                  {matches.length === 0 && backendRefs.length > 0 && !multiBackend && (
+                    <div className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
+                      <span className="italic text-theme-text-tertiary">all</span>
+                      <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+                      <ResourceRefBadge resourceRef={toServiceRef(backendRefs[0])} onClick={onNavigate} />
+                      {backendRefs[0].port && <span className="text-theme-text-tertiary">:{backendRefs[0].port}</span>}
+                    </div>
+                  )}
+                  {matches.length === 0 && multiBackend && (
+                    <>
+                      <div className="text-xs text-theme-text-secondary italic">all</div>
+                      {backendRefs.map((b: any, bi: number) => {
+                        const pct = hasWeights ? Math.round(((b.weight ?? 1) / totalWeight) * 100) : null
+                        return (
+                          <div key={bi} className="text-xs text-theme-text-secondary flex items-center gap-1.5 pl-1">
+                            <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+                            <ResourceRefBadge resourceRef={toServiceRef(b)} onClick={onNavigate} />
+                            {b.port && <span className="text-theme-text-tertiary">:{b.port}</span>}
+                            {pct !== null && <span className="text-theme-text-tertiary text-[10px]">{pct}%</span>}
+                          </div>
+                        )
+                      })}
+                    </>
+                  )}
+                  {matches.map((match: any, matchIdx: number) => (
+                    <div key={matchIdx} className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
+                      {match.method && (
+                        <span className="px-1.5 py-0.5 bg-blue-500/20 text-blue-400 rounded font-medium">
+                          {match.method}
+                        </span>
+                      )}
+                      {match.path && (
+                        <span>
+                          <span className="text-theme-text-tertiary">{match.path.type || 'PathPrefix'}:</span>{' '}
+                          <span className="text-theme-text-primary">{match.path.value}</span>
+                        </span>
+                      )}
+                      {match.headers && match.headers.length > 0 && (
+                        <span className="text-theme-text-tertiary">
+                          headers: [{match.headers.map((h: any) => `${h.name}=${h.value}`).join(', ')}]
+                        </span>
+                      )}
+                      {match.queryParams && match.queryParams.length > 0 && (
+                        <span className="text-theme-text-tertiary">
+                          query: [{match.queryParams.map((q: any) => `${q.name}=${q.value}`).join(', ')}]
+                        </span>
+                      )}
+                      {/* Single backend inline on first match */}
+                      {matchIdx === 0 && backendRefs.length === 1 && (
+                        <>
+                          <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+                          <ResourceRefBadge resourceRef={toServiceRef(backendRefs[0])} onClick={onNavigate} />
+                          {backendRefs[0].port && <span className="text-theme-text-tertiary">:{backendRefs[0].port}</span>}
+                        </>
+                      )}
+                    </div>
+                  ))}
+                  {/* Multiple backends as aligned column below matches */}
+                  {matches.length > 0 && multiBackend && (
+                    backendRefs.map((b: any, bi: number) => {
+                      const pct = hasWeights ? Math.round(((b.weight ?? 1) / totalWeight) * 100) : null
+                      return (
+                        <div key={bi} className="text-xs text-theme-text-secondary flex items-center gap-1.5 pl-1">
+                          <ArrowRight className="w-3 h-3 text-theme-text-tertiary shrink-0" />
+                          <ResourceRefBadge resourceRef={toServiceRef(b)} onClick={onNavigate} />
+                          {b.port && <span className="text-theme-text-tertiary">:{b.port}</span>}
+                          {pct !== null && <span className="text-theme-text-tertiary text-[10px]">{pct}%</span>}
+                        </div>
+                      )
+                    })
+                  )}
+                </div>
+
+                {/* Filters inline */}
+                {filters.length > 0 && (
+                  <div className="mt-1.5">
+                    <div className="text-xs text-theme-text-secondary flex flex-wrap items-center gap-1.5">
+                      <Filter className="w-3 h-3 text-theme-text-tertiary" />
+                      {filters.map((filter: any, filterIdx: number) => (
+                        <span key={filterIdx} className="inline-flex items-center gap-1">
+                          <span className="px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded">
+                            {filter.type}
+                          </span>
+                          {filter.type === 'RequestHeaderModifier' && filter.requestHeaderModifier && (
+                            <span className="text-theme-text-tertiary">
+                              {summarizeHeaderModifier(filter.requestHeaderModifier)}
+                            </span>
+                          )}
+                          {filter.type === 'ResponseHeaderModifier' && filter.responseHeaderModifier && (
+                            <span className="text-theme-text-tertiary">
+                              {summarizeHeaderModifier(filter.responseHeaderModifier)}
+                            </span>
+                          )}
+                          {filter.type === 'RequestRedirect' && filter.requestRedirect && (
+                            <span className="text-theme-text-tertiary">
+                              {filter.requestRedirect.scheme && `${filter.requestRedirect.scheme}://`}
+                              {filter.requestRedirect.hostname || ''}
+                              {filter.requestRedirect.port ? `:${filter.requestRedirect.port}` : ''}
+                              {filter.requestRedirect.statusCode ? ` (${filter.requestRedirect.statusCode})` : ''}
+                            </span>
+                          )}
+                          {filter.type === 'URLRewrite' && filter.urlRewrite && (
+                            <span className="text-theme-text-tertiary">
+                              {filter.urlRewrite.hostname && `host: ${filter.urlRewrite.hostname}`}
+                              {filter.urlRewrite.path?.replacePrefixMatch && ` path: ${filter.urlRewrite.path.replacePrefixMatch}`}
+                            </span>
+                          )}
+                          {filter.type === 'RequestMirror' && filter.requestMirror && (
+                            <span className="text-theme-text-tertiary">
+                              {filter.requestMirror.backendRef?.name || 'unknown'}
+                              {filter.requestMirror.backendRef?.port ? `:${filter.requestMirror.backendRef.port}` : ''}
+                            </span>
+                          )}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </Section>
+
+      {/* Parent Status */}
+      {parentStatuses.length > 0 && (
+        <Section title={`Parent Status (${parentStatuses.length})`} defaultExpanded>
+          <div className="space-y-2">
+            {parentStatuses.map((parent: any, idx: number) => {
+              const ref = parent.parentRef || {}
+              const conditions = parent.conditions || []
+              const accepted = conditions.find((c: any) => c.type === 'Accepted')
+              const resolved = conditions.find((c: any) => c.type === 'ResolvedRefs')
+
+              return (
+                <div key={`${ref.namespace || ''}-${ref.name}-${idx}`} className="bg-theme-elevated/30 rounded p-2.5">
+                  <div className="text-sm font-medium text-theme-text-primary mb-1.5">
+                    {ref.namespace ? `${ref.namespace}/` : ''}{ref.name || 'unknown'}
+                    {ref.sectionName ? ` (${ref.sectionName})` : ''}
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {accepted && (
+                      <span className={clsx(
+                        'px-2 py-0.5 rounded text-xs font-medium',
+                        accepted.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
+                      )}>
+                        {accepted.status === 'True' ? 'Accepted' : 'Not Accepted'}
+                      </span>
+                    )}
+                    {resolved && (
+                      <span className={clsx(
+                        'px-2 py-0.5 rounded text-xs font-medium',
+                        resolved.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
+                      )}>
+                        {resolved.status === 'True' ? 'Refs Resolved' : 'Unresolved Refs'}
+                      </span>
+                    )}
+                  </div>
+                  {accepted?.message && accepted.status === 'False' && (
+                    <div className="text-xs text-theme-text-tertiary mt-1">{accepted.message}</div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={firstParentConditions} />
+    </>
+  )
+}
+
+function summarizeHeaderModifier(modifier: any): string {
+  const parts: string[] = []
+  if (modifier.set?.length) parts.push(`set: ${modifier.set.map((h: any) => h.name).join(', ')}`)
+  if (modifier.add?.length) parts.push(`add: ${modifier.add.map((h: any) => h.name).join(', ')}`)
+  if (modifier.remove?.length) parts.push(`remove: ${modifier.remove.join(', ')}`)
+  return parts.join('; ')
+}

package/src/components/resources/renderers/HelmRepositoryRenderer.tsx

@@ -0,0 +1,167 @@
+import { Database, AlertTriangle, CheckCircle2, Shield } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { formatAge } from '../resource-utils'
+import { formatBytes } from '../../../utils/format'
+import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
+import { fluxConditionsToGitOpsStatus, type FluxCondition } from '../../../types/gitops'
+
+interface HelmRepositoryRendererProps {
+  data: any
+}
+
+export function HelmRepositoryRenderer({ data }: HelmRepositoryRendererProps) {
+  const status = data.status || {}
+  const spec = data.spec || {}
+  const conditions = (status.conditions || []) as FluxCondition[]
+  const artifact = status.artifact || {}
+
+  // Convert to unified GitOps status
+  const gitOpsStatus = fluxConditionsToGitOpsStatus(conditions, spec.suspend === true)
+
+  // Determine repository type
+  const isOCI = spec.type === 'oci'
+
+  // Problem detection
+  const problems: Array<{ color: 'red' | 'yellow'; message: string }> = []
+
+  if (gitOpsStatus.suspended) {
+    problems.push({ color: 'yellow', message: 'HelmRepository is suspended' })
+  }
+
+  if (gitOpsStatus.health === 'Degraded' && gitOpsStatus.message) {
+    problems.push({ color: 'red', message: gitOpsStatus.message })
+  }
+
+  return (
+    <>
+      {/* Problem alerts */}
+      {problems.map((problem, i) => (
+        <div
+          key={i}
+          className={clsx(
+            'mb-4 p-3 border rounded-lg',
+            problem.color === 'red'
+              ? 'bg-red-500/10 border-red-500/30'
+              : 'bg-yellow-500/10 border-yellow-500/30'
+          )}
+        >
+          <div className="flex items-start gap-2">
+            <AlertTriangle
+              className={clsx(
+                'w-4 h-4 mt-0.5 shrink-0',
+                problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
+              )}
+            />
+            <div className="flex-1 min-w-0">
+              <div
+                className={clsx(
+                  'text-sm font-medium',
+                  problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
+                )}
+              >
+                {problem.color === 'red' ? 'Issue Detected' : 'Warning'}
+              </div>
+              <div
+                className={clsx(
+                  'text-xs mt-1',
+                  problem.color === 'red' ? 'text-red-300/80' : 'text-yellow-300/80'
+                )}
+              >
+                {problem.message}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+
+      {/* Status section */}
+      <Section title="Status">
+        <div className="space-y-3">
+          <GitOpsStatusBadge status={gitOpsStatus} showHealth={false} />
+          {spec.interval && (
+            <SyncCountdown
+              interval={spec.interval}
+              lastSyncTime={status.lastHandledReconcileAt}
+              suspended={gitOpsStatus.suspended}
+            />
+          )}
+        </div>
+      </Section>
+
+      {/* Repository section */}
+      <Section title="Repository" icon={Database}>
+        <PropertyList>
+          <Property label="URL" value={spec.url} />
+          <Property
+            label="Type"
+            value={
+              <span className={clsx(
+                'px-2 py-0.5 rounded text-xs font-medium',
+                isOCI ? 'bg-purple-500/20 text-purple-400' : 'bg-blue-500/20 text-blue-400'
+              )}>
+                {isOCI ? 'OCI' : 'HTTP'}
+              </span>
+            }
+          />
+          {spec.provider && <Property label="Provider" value={spec.provider} />}
+        </PropertyList>
+      </Section>
+
+      {/* Authentication section */}
+      {(spec.secretRef?.name || spec.certSecretRef?.name || spec.passCredentials) && (
+        <Section title="Authentication" icon={Shield} defaultExpanded={false}>
+          <PropertyList>
+            {spec.secretRef?.name && (
+              <Property label="Credentials Secret" value={spec.secretRef.name} />
+            )}
+            {spec.certSecretRef?.name && (
+              <Property label="TLS Secret" value={spec.certSecretRef.name} />
+            )}
+            {spec.passCredentials && (
+              <Property label="Pass Credentials" value="Yes" />
+            )}
+            {spec.insecure && (
+              <Property label="Insecure" value="Yes (TLS verification disabled)" />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Artifact/Index section */}
+      {artifact.revision && (
+        <Section title="Index" icon={CheckCircle2}>
+          <PropertyList>
+            <Property label="Revision" value={artifact.revision} />
+            <Property label="Digest" value={artifact.digest} />
+            <Property
+              label="Last Updated"
+              value={artifact.lastUpdateTime ? formatAge(artifact.lastUpdateTime) : '-'}
+            />
+            {artifact.size && (
+              <Property label="Size" value={formatBytes(artifact.size)} />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Additional Info */}
+      {status.observedGeneration !== undefined && (
+        <Section title="Additional Info" defaultExpanded={false}>
+          <PropertyList>
+            <Property label="Observed Generation" value={status.observedGeneration} />
+            {status.lastHandledReconcileAt && (
+              <Property
+                label="Last Reconciled"
+                value={formatAge(status.lastHandledReconcileAt)}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {/* Conditions section */}
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}