@skyhook-io/k8s-ui 1.6.0 → 1.6.2

package/src/components/charts/types.ts

@@ -0,0 +1,36 @@
+// Shared time-series chart types. The shape originated from Prometheus query
+// results but is generic — any source emitting time-stamped numeric samples
+// can feed AreaChart.
+
+export interface TimeSeriesPoint {
+  timestamp: number
+  value: number
+}
+
+export interface TimeSeries {
+  labels: Record<string, string>
+  /** Expected to be sorted ascending by timestamp and finite-valued. The
+   *  chart's path math and saturation peak scans assume this; passing
+   *  unsorted or NaN samples will produce garbage rendering, not crashes. */
+  dataPoints: TimeSeriesPoint[]
+}
+
+/** @deprecated Use {@link TimeSeriesPoint}. Kept for one release for callers
+ *  still importing the Prom-prefixed name. */
+export type PrometheusDataPoint = TimeSeriesPoint
+
+/** @deprecated Use {@link TimeSeries}. Kept for one release for callers still
+ *  importing the Prom-prefixed name. */
+export type PrometheusSeries = TimeSeries
+
+/**
+ * Horizontal reference line overlaid on a chart. `kind` is semantic — it
+ * drives which value `computeSaturation` treats as the operational ceiling.
+ * The chart auto-extends its Y axis to fit reference lines, so they're
+ * never clipped.
+ */
+export interface ReferenceLine {
+  value: number
+  label: string
+  kind: 'request' | 'limit'
+}

package/src/components/compare/CompareResourcePicker.tsx

@@ -0,0 +1,192 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { clsx } from 'clsx'
+import { GitCompare, Search, X } from 'lucide-react'
+import { DialogPortal } from '../ui/DialogPortal'
+import { pluralToKind } from '../../utils/navigation'
+import type { CompareResourceRef } from './ResourceCompareView'
+import { sortCandidates, filterCandidates } from './sort'
+import { SIDE_TONES, type CompareSide } from './types'
+
+export interface CompareResourcePickerProps {
+  open: boolean
+  onClose: () => void
+  /** The resource the user is comparing *from*. */
+  source: CompareResourceRef
+  /** Which side the source occupies — drives the chip color/label in the dialog header.
+   *  Defaults to 'a': the launcher flow's source becomes A in the resulting URL. */
+  sourceSide?: CompareSide
+  /** Candidate resources — same kind as source. Source is filtered out automatically. */
+  candidates: CompareResourceRef[]
+  loading?: boolean
+  error?: unknown
+  onPick: (r: CompareResourceRef) => void
+}
+
+export function CompareResourcePicker({
+  open,
+  onClose,
+  source,
+  sourceSide = 'a',
+  candidates,
+  loading,
+  error,
+  onPick,
+}: CompareResourcePickerProps) {
+  const [query, setQuery] = useState('')
+  const [highlightIdx, setHighlightIdx] = useState(0)
+  const listRef = useRef<HTMLUListElement | null>(null)
+
+  // Reset query + highlight every time the picker opens. The drawer flow keeps
+  // the picker mounted across opens, so without this a previous session's
+  // search would leak into the next compare.
+  useEffect(() => {
+    if (open) {
+      setQuery('')
+      setHighlightIdx(0)
+    }
+  }, [open])
+
+  const filtered = useMemo(
+    () => filterCandidates(sortCandidates(candidates, source), query),
+    [candidates, source, query],
+  )
+
+  // Clamp on any filter shape change — list length OR query (the user typing
+  // can swap which rows are visible without changing length).
+  useEffect(() => {
+    setHighlightIdx(prev => (prev >= filtered.length ? 0 : prev))
+  }, [filtered.length, query])
+
+  useEffect(() => {
+    if (!listRef.current) return
+    const el = listRef.current.querySelector<HTMLElement>(`[data-idx="${highlightIdx}"]`)
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [highlightIdx])
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    // Empty list: arrow keys would otherwise compute Math.min(0+1, -1) = -1.
+    if (filtered.length === 0) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setHighlightIdx(i => Math.min(i + 1, filtered.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setHighlightIdx(i => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      const pick = filtered[highlightIdx]
+      if (pick) onPick(pick)
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      setHighlightIdx(0)
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      setHighlightIdx(filtered.length - 1)
+    }
+  }
+
+  const sourceLabel = sourceSide === 'a' ? 'A' : 'B'
+  const sourceChipBg = SIDE_TONES[sourceSide].chipBg
+
+  return (
+    <DialogPortal open={open} onClose={onClose} className="max-w-xl w-full max-h-[70vh] flex flex-col">
+      <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">
+          <GitCompare className="w-5 h-5 text-skyhook-400" />
+          <h3 className="text-sm font-semibold text-theme-text-primary">
+            {sourceSide === 'a'
+              ? `Compare to another ${pluralToKind(source.kind)}`
+              : `Replace side B with another ${pluralToKind(source.kind)}`}
+          </h3>
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+          aria-label="Close"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+
+      <div className="px-4 py-3 border-b border-theme-border shrink-0 space-y-2">
+        <div className="text-xs text-theme-text-secondary flex items-center gap-1.5 flex-wrap">
+          <span className={clsx('inline-flex items-center justify-center w-4 h-4 rounded text-[10px] font-bold leading-none', sourceChipBg)}>
+            {sourceLabel}
+          </span>
+          <span className="font-mono text-theme-text-primary">
+            {source.namespace && <span className="opacity-60">{source.namespace}/</span>}
+            {source.name}
+          </span>
+        </div>
+        <div className="relative">
+          <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-theme-text-tertiary pointer-events-none" />
+          <input
+            autoFocus
+            type="text"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Search by name or namespace…  ↑↓ navigate, ↵ pick"
+            className="w-full pl-9 pr-3 py-2 text-sm bg-theme-elevated border border-theme-border rounded-lg text-theme-text-primary placeholder:text-theme-text-tertiary focus:outline-none focus:border-skyhook-400"
+          />
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        {loading && (
+          <div className="flex items-center justify-center py-8 text-theme-text-secondary text-sm">
+            Loading {source.kind}…
+          </div>
+        )}
+        {error != null && (
+          <div className="flex items-center justify-center py-8 text-red-400 text-sm">
+            {error instanceof Error ? error.message : String(error)}
+          </div>
+        )}
+        {!loading && error == null && filtered.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-12 text-theme-text-tertiary text-sm gap-1">
+            {candidates.length <= 1
+              ? `No other ${source.kind} available to compare against.`
+              : 'No matches.'}
+          </div>
+        )}
+        {!loading && error == null && filtered.length > 0 && (
+          <ul ref={listRef} className="divide-y divide-theme-border/50">
+            {filtered.map((c, idx) => {
+              const sameNs = c.namespace === source.namespace
+              const isActive = idx === highlightIdx
+              return (
+                <li key={`${c.namespace}/${c.name}`} data-idx={idx}>
+                  <button
+                    onClick={() => onPick(c)}
+                    onMouseEnter={() => setHighlightIdx(idx)}
+                    className={clsx(
+                      'w-full text-left px-4 py-2.5 transition-colors',
+                      'flex items-baseline gap-2',
+                      isActive ? 'bg-skyhook-500/10' : 'hover:bg-theme-hover',
+                    )}
+                  >
+                    <span className="text-sm font-mono text-theme-text-primary truncate flex-1">
+                      {c.name}
+                    </span>
+                    {c.namespace && (
+                      <span
+                        className={clsx(
+                          'text-xs font-mono shrink-0',
+                          sameNs ? 'text-skyhook-400' : 'text-theme-text-tertiary',
+                        )}
+                        title={sameNs ? 'Same namespace as the source — likely target' : undefined}
+                      >
+                        {c.namespace}
+                      </span>
+                    )}
+                  </button>
+                </li>
+              )
+            })}
+          </ul>
+        )}
+      </div>
+    </DialogPortal>
+  )
+}

package/src/components/compare/CompareTray.tsx

@@ -0,0 +1,130 @@
+import { clsx } from 'clsx'
+import { GitCompare, X, ArrowRight } from 'lucide-react'
+import { Tooltip } from '../ui/Tooltip'
+import { pluralToKind } from '../../utils/navigation'
+import { SIDE_TONES, type CompareSide, type NamespacedRef } from './types'
+
+export type CompareTrayPick = NamespacedRef
+
+export interface CompareTrayProps {
+  /** Plural kind (e.g. "deployments") — used to label the tray. */
+  kind: string
+  picks: CompareTrayPick[]
+  onRemove: (index: number) => void
+  /** Called when the user hits the Compare CTA. Only invoked when 2 picks. */
+  onCompare: () => void
+  /** Exit compare mode entirely (clears picks). */
+  onExit: () => void
+}
+
+export function CompareTray({ kind, picks, onRemove, onCompare, onExit }: CompareTrayProps) {
+  const slotA = picks[0]
+  const slotB = picks[1]
+  const ready = !!(slotA && slotB)
+  const kindLabel = pluralToKind(kind)
+
+  return (
+    <div
+      role="region"
+      aria-label="Compare resources tray"
+      className={clsx(
+        'shrink-0 border-t border-skyhook-500/30 bg-theme-surface/95 backdrop-blur',
+        'shadow-[0_-8px_24px_-12px_rgba(0,0,0,0.35)]',
+      )}
+    >
+      <div className="h-0.5 w-full bg-gradient-to-r from-blue-400/70 via-skyhook-400/40 to-emerald-400/70" />
+
+      {/* Right padding clears the fixed bottom-right overlay buttons (debug / shortcut-help). */}
+      <div className="flex items-center gap-3 pl-4 pr-20 py-2.5">
+        <div className="flex items-center gap-2 shrink-0">
+          <GitCompare className="w-4 h-4 text-skyhook-400" />
+          <span className="text-xs font-semibold text-theme-text-primary uppercase tracking-wider">
+            Compare {kindLabel}
+          </span>
+          <span className="text-[10px] text-theme-text-tertiary font-medium px-1.5 py-0.5 rounded bg-theme-elevated">
+            {picks.length}/2
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2 min-w-0 flex-1">
+          <PickSlot side="a" pick={slotA} onRemove={() => onRemove(0)} />
+          <ArrowRight className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />
+          <PickSlot side="b" pick={slotB} onRemove={() => onRemove(1)} />
+        </div>
+
+        <button
+          onClick={onCompare}
+          disabled={!ready}
+          className={clsx(
+            'shrink-0 flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-colors',
+            ready
+              ? 'btn-brand'
+              : 'text-theme-text-disabled bg-theme-elevated border border-theme-border-light cursor-not-allowed',
+          )}
+        >
+          <GitCompare className="w-3.5 h-3.5" />
+          Compare
+        </button>
+
+        <Tooltip content="Exit compare mode (Esc)">
+          <button
+            onClick={onExit}
+            className="shrink-0 p-1.5 rounded-lg text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated transition-colors"
+            aria-label="Exit compare mode"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+function PickSlot({
+  side,
+  pick,
+  onRemove,
+}: {
+  side: CompareSide
+  pick?: CompareTrayPick
+  onRemove: () => void
+}) {
+  const tones = SIDE_TONES[side]
+
+  if (!pick) {
+    return (
+      <div className="group flex items-center gap-2 pl-1.5 pr-2.5 py-1 rounded-lg border border-dashed border-theme-border-light text-xs font-mono min-w-0 max-w-[22rem] text-theme-text-tertiary italic flex-1">
+        <span className={clsx('inline-flex items-center justify-center w-4 h-4 rounded text-[10px] font-bold leading-none shrink-0 opacity-50', tones.chipBg)}>
+          {side === 'a' ? 'A' : 'B'}
+        </span>
+        <span className="truncate">Pick {side === 'a' ? 'a resource' : 'a second resource'} from the table…</span>
+      </div>
+    )
+  }
+
+  const full = pick.namespace ? `${pick.namespace}/${pick.name}` : pick.name
+  return (
+    <div
+      className={clsx(
+        'group flex items-center gap-2 pl-1.5 pr-1.5 py-1 rounded-lg border text-xs font-mono min-w-0 max-w-[22rem] flex-1',
+        tones.containerBorder, tones.containerBg,
+      )}
+      title={full}
+    >
+      <span className={clsx('inline-flex items-center justify-center w-4 h-4 rounded text-[10px] font-bold leading-none shrink-0', tones.chipBg)}>
+        {side === 'a' ? 'A' : 'B'}
+      </span>
+      <span className="text-theme-text-primary truncate min-w-0 flex-1">
+        {pick.namespace && <span className="opacity-60">{pick.namespace}/</span>}
+        {pick.name}
+      </span>
+      <button
+        onClick={onRemove}
+        className="shrink-0 p-0.5 rounded text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated/70"
+        aria-label={`Remove ${side === 'a' ? 'A' : 'B'}`}
+      >
+        <X className="w-3 h-3" />
+      </button>
+    </div>
+  )
+}

package/src/components/compare/ResourceCompareView.tsx

@@ -0,0 +1,272 @@
+import { useMemo, useRef, useState } from 'react'
+import { clsx } from 'clsx'
+import { ArrowLeftRight, GitCompare, Rows, FileText, FileCode2, X, Pencil, AlertTriangle, Sparkles } from 'lucide-react'
+import { YamlDiffEditor } from '../ui/YamlEditor'
+import { PaneLoader } from '../ui/PaneLoader'
+import { Tooltip } from '../ui/Tooltip'
+import { pluralToKind } from '../../utils/navigation'
+import { toComparableYaml } from './normalize'
+import { SIDE_TONES, type CompareSide } from './types'
+
+export type { CompareSide }
+
+export interface CompareResourceRef {
+  kind: string
+  namespace: string
+  name: string
+  group?: string
+}
+
+export interface CompareSideError {
+  side: CompareSide
+  message: string
+}
+
+export interface ResourceCompareViewProps {
+  a: CompareResourceRef
+  b: CompareResourceRef
+  aData: unknown
+  bData: unknown
+  /** Per-side fetch errors. Each side renders independently — a working side stays useful. */
+  errors?: CompareSideError[]
+  /** Caller-supplied theme passthrough for the Monaco editor. */
+  editorTheme?: 'vs-dark' | 'vs'
+  onSwap: () => void
+  onClose: () => void
+  /** Optional — when provided, the resource pill shows a pencil button to re-pick. */
+  onChangeA?: () => void
+  onChangeB?: () => void
+  /**
+   * Optional small label rendered after the resource name in each pill.
+   * Used by cross-cluster compare to surface the cluster identity for
+   * each side; single-cluster compare leaves these undefined.
+   */
+  aSubtitle?: string
+  bSubtitle?: string
+  /**
+   * When true, the diff editor area drops its padding + rounded border.
+   * Use when the host renders compare as a full-bleed page (the diff IS
+   * the page). Default false preserves the inset-card look that works
+   * inside OSS Radar's narrower compare route.
+   */
+  bleed?: boolean
+}
+
+function ResourcePill({
+  resource,
+  side,
+  error,
+  onChange,
+  subtitle,
+}: {
+  resource: CompareResourceRef
+  side: CompareSide
+  error?: string
+  onChange?: () => void
+  subtitle?: string
+}) {
+  const tones = SIDE_TONES[side]
+  const errTone = 'border-red-400/50 bg-red-500/10'
+  const label = side === 'a' ? 'A' : 'B'
+  const full = resource.namespace ? `${resource.namespace}/${resource.name}` : resource.name
+  return (
+    <div
+      className={clsx(
+        'group flex items-center gap-2 pl-1.5 pr-2 py-1 rounded-lg border text-xs font-mono min-w-0 max-w-[18rem]',
+        error ? errTone : clsx(tones.containerBorder, tones.containerBg),
+      )}
+      title={error ? `${full} — ${error}` : full}
+    >
+      <span className={clsx('inline-flex items-center justify-center w-4 h-4 rounded text-[10px] font-bold leading-none shrink-0', error ? 'bg-red-400/90 text-red-950' : tones.chipBg)}>
+        {label}
+      </span>
+      {error && <AlertTriangle className="w-3 h-3 text-red-400 shrink-0" aria-hidden />}
+      <span className={clsx('truncate min-w-0', error ? 'text-red-300' : 'text-theme-text-primary')}>
+        {resource.namespace && <span className="opacity-60">{resource.namespace}/</span>}
+        {resource.name}
+        {subtitle && (
+          <span className="opacity-60 ml-1" aria-label={`Source: ${subtitle}`}>
+            · {subtitle}
+          </span>
+        )}
+      </span>
+      {onChange && (
+        <Tooltip content="Pick a different resource">
+          <button
+            onClick={onChange}
+            className="shrink-0 p-0.5 rounded text-theme-text-tertiary opacity-0 group-hover:opacity-100 focus:opacity-100 hover:text-theme-text-primary hover:bg-theme-elevated/70 transition-opacity"
+          >
+            <Pencil className="w-3 h-3" />
+          </button>
+        </Tooltip>
+      )}
+    </div>
+  )
+}
+
+export function ResourceCompareView({
+  a,
+  b,
+  aData,
+  bData,
+  errors,
+  editorTheme = 'vs-dark',
+  onSwap,
+  onClose,
+  onChangeA,
+  onChangeB,
+  aSubtitle,
+  bSubtitle,
+  bleed = false,
+}: ResourceCompareViewProps) {
+  const [specOnly, setSpecOnly] = useState(false)
+  const [unified, setUnified] = useState(false)
+  const [hideUnchanged, setHideUnchanged] = useState(true)
+  const [rawMetadata, setRawMetadata] = useState(false)
+
+  const aYaml = useMemo(() => (aData ? toComparableYaml(aData, { specOnly, rawMetadata }) : ''), [aData, specOnly, rawMetadata])
+  const bYaml = useMemo(() => (bData ? toComparableYaml(bData, { specOnly, rawMetadata }) : ''), [bData, specOnly, rawMetadata])
+
+  const identical = aYaml && bYaml && aYaml === bYaml
+  const kindLabel = pluralToKind(a.kind)
+  const aError = errors?.find(e => e.side === 'a')?.message
+  const bError = errors?.find(e => e.side === 'b')?.message
+  const anyError = !!(aError || bError)
+
+  // Settle gate, keyed on the rendered A/B identity. Mount the diff
+  // editor only after both sides have first settled (data or error) for
+  // the current pair. Once settled, Monaco stays mounted across re-picks
+  // — clearing a side's data transiently during a refetch must not
+  // blank the editor. When the A/B identity changes (navigating to a
+  // new pair on the same route), the latch resets so the loader shows
+  // again until the new fetches settle.
+  const settleKey = `${a.kind}|${a.namespace}|${a.name}|${a.group ?? ''}|${aSubtitle ?? ''}` +
+    `|${b.kind}|${b.namespace}|${b.name}|${b.group ?? ''}|${bSubtitle ?? ''}`
+  const settleKeyRef = useRef(settleKey)
+  const hasSettledRef = useRef(false)
+  if (settleKeyRef.current !== settleKey) {
+    settleKeyRef.current = settleKey
+    hasSettledRef.current = false
+  }
+  const bothSettled = (!!aData || !!aError) && (!!bData || !!bError)
+  if (bothSettled) hasSettledRef.current = true
+  const showInitialLoader = !hasSettledRef.current && !bothSettled
+
+  return (
+    <div className="flex-1 min-w-0 flex flex-col h-full bg-theme-base">
+      <div className="h-0.5 w-full bg-gradient-to-r from-blue-400/70 via-skyhook-400/40 to-emerald-400/70" />
+
+      <div className="flex items-center gap-3 px-4 py-2.5 border-b border-theme-border bg-theme-surface">
+        <GitCompare className="w-5 h-5 text-skyhook-400 shrink-0" />
+        <h2 className="text-sm font-semibold text-theme-text-primary shrink-0 whitespace-nowrap">
+          Compare <span className="text-theme-text-tertiary mx-0.5">·</span>{' '}
+          <span className="text-theme-text-secondary font-medium">{kindLabel}</span>
+        </h2>
+
+        <div className="flex items-center gap-2 min-w-0 flex-1">
+          <ResourcePill resource={a} side="a" error={aError} onChange={onChangeA} subtitle={aSubtitle} />
+          <Tooltip content="Swap A and B">
+            <button
+              onClick={onSwap}
+              className="shrink-0 p-1.5 rounded-lg text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated transition-colors"
+            >
+              <ArrowLeftRight className="w-3.5 h-3.5" />
+            </button>
+          </Tooltip>
+          <ResourcePill resource={b} side="b" error={bError} onChange={onChangeB} subtitle={bSubtitle} />
+        </div>
+
+        <div className="flex items-center gap-1 shrink-0">
+          <ToggleButton active={rawMetadata} onClick={() => setRawMetadata(v => !v)} icon={<Sparkles className="w-3.5 h-3.5" />} label="Raw metadata" tooltip="Keep server-assigned noise (uid, resourceVersion, managedFields, last-applied)" />
+          <ToggleButton active={specOnly} onClick={() => setSpecOnly(v => !v)} icon={<FileCode2 className="w-3.5 h-3.5" />} label="Spec only" tooltip="Drop status fields from both sides" />
+          <ToggleButton active={hideUnchanged} onClick={() => setHideUnchanged(v => !v)} icon={<FileText className="w-3.5 h-3.5" />} label="Diff only" tooltip="Collapse unchanged regions" />
+          <ToggleButton active={unified} onClick={() => setUnified(v => !v)} icon={<Rows className="w-3.5 h-3.5" />} label="Unified" tooltip="Switch between side-by-side and single-column" />
+        </div>
+
+        <div className="w-px h-5 bg-theme-border shrink-0" aria-hidden />
+
+        <Tooltip content="Close">
+          <button
+            onClick={onClose}
+            className="shrink-0 p-1.5 rounded-lg text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </Tooltip>
+      </div>
+
+      {anyError && (
+        <div className="px-4 py-2 text-xs text-red-400 bg-red-500/10 border-b border-red-500/20 flex items-center gap-2">
+          <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
+          <span className="min-w-0">
+            {aError && bError ? (
+              <>
+                Failed to load both sides — <span className="font-mono">A: {aError}</span>{' · '}<span className="font-mono">B: {bError}</span>
+              </>
+            ) : (
+              <>
+                Failed to load side {aError ? 'A' : 'B'}: <span className="font-mono">{aError || bError}</span>
+              </>
+            )}
+            {(onChangeA || onChangeB) && ' — use the pencil icon on the affected pill to pick a different resource.'}
+          </span>
+        </div>
+      )}
+
+      {identical && !anyError && (
+        <div className="px-4 py-2 text-xs text-emerald-400 bg-emerald-500/10 border-b border-emerald-500/20 flex items-center gap-2">
+          <GitCompare className="w-3.5 h-3.5" />
+          These resources are identical{specOnly ? ' (spec only)' : ''}.
+        </div>
+      )}
+
+      <div className={clsx('flex-1 min-h-0', bleed ? '' : 'p-3')}>
+        {showInitialLoader ? (
+          <PaneLoader label="Loading resources…" className="h-full" />
+        ) : (
+          <YamlDiffEditor
+            original={aYaml}
+            modified={bYaml}
+            unified={unified}
+            hideUnchanged={hideUnchanged && !identical}
+            theme={editorTheme}
+            height="100%"
+            bleed={bleed}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function ToggleButton({
+  active,
+  onClick,
+  icon,
+  label,
+  tooltip,
+}: {
+  active: boolean
+  onClick: () => void
+  icon: React.ReactNode
+  label: string
+  tooltip: string
+}) {
+  return (
+    <Tooltip content={tooltip}>
+      <button
+        onClick={onClick}
+        aria-pressed={active}
+        className={clsx(
+          'flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-lg border transition-colors whitespace-nowrap',
+          active
+            ? 'border-skyhook-400/50 bg-skyhook-500/15 text-skyhook-300'
+            : 'border-transparent text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated',
+        )}
+      >
+        {icon}
+        {label}
+      </button>
+    </Tooltip>
+  )
+}

package/src/components/compare/index.ts

@@ -0,0 +1,14 @@
+export { ResourceCompareView } from './ResourceCompareView'
+export type { ResourceCompareViewProps, CompareResourceRef, CompareSideError } from './ResourceCompareView'
+export { CompareResourcePicker } from './CompareResourcePicker'
+export type { CompareResourcePickerProps } from './CompareResourcePicker'
+export { CompareTray } from './CompareTray'
+export type { CompareTrayProps, CompareTrayPick } from './CompareTray'
+export { normalizeForCompare, toComparableYaml } from './normalize'
+export type { NormalizeOptions } from './normalize'
+export { parseRef, refToParam } from './url'
+export type { ParsedRef } from './url'
+export { togglePick, pickIndex, COMPARE_PICK_CAP } from './picks'
+export { sortCandidates, filterCandidates } from './sort'
+export { SIDE_TONES } from './types'
+export type { CompareSide, NamespacedRef } from './types'