@skyhook-io/k8s-ui 1.8.1 → 1.8.2

package/src/components/applications/ApplicationsList.tsx

@@ -1,167 +1,12 @@
-import { useMemo, useState, useEffect, useRef, useCallback } from 'react'
-import { ChevronRight, Layers, Boxes, HeartPulse, Shapes, Globe, Tag } from 'lucide-react'
-import { clsx } from 'clsx'
-import { StatusDot, mapHealthToTone } from '../ui/status-tone'
-import { Tooltip } from '../ui/Tooltip'
-import { EmptyState } from '../ui/EmptyState'
-import { SearchBox } from '../ui/SearchBox'
-import { PageHeader } from '../ui/PageHeader'
-import { SummaryTile, type SummaryTone } from '../ui/SummaryTile'
-import { Facet, type FacetTone } from '../ui/Facet'
-import { SortableTh, TH_CLASS } from '../ui/SortableTh'
-import { DistributionBar } from '../ui/DistributionBar'
-import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
-import { pluralize } from '../../utils/pluralize'
-import {
-  type AppRow,
-  type AppHealth,
-  type AppWorkloadClass,
-  type AppSource,
-  type AppCategory,
-  HEALTH_ORDER,
-  HEALTH_RANK,
-  HEALTH_META,
-  CLASS_ORDER,
-  CLASS_META,
-  CATEGORY_ORDER,
-  CATEGORY_META,
-  CHIP,
-  CHIP_TONE,
-  SOURCE_ORDER,
-  SOURCE_META,
-  categoryOf,
-  envRank,
-  healthOf,
-  isSystemNamespace,
-  namespaceOf,
-  namespacesOf,
-  resolveEnv,
-  identityEnvInferred,
-  sourceOf,
-  workloadClassOf,
-  classSetOf,
-  classCompositionOf,
-  foldAppGroups,
-  type FoldedRow,
-} from '../../utils/applications'
-import { ReadyBar } from './ReadyBar'
-import { ProvenanceBadge, ClassBadge, CategoryChip, VersionInfo } from './AppChips'
-import { AppIdentityTooltip, EnvHint } from './AppTooltips'
+import { useMemo } from 'react'
+import { type AppRow, buildSingleAppEntry } from '../../utils/applications'
+import { ApplicationsView } from './ApplicationsView'
 
-// ApplicationsList — pure, single-cluster dense list of logical apps. Health
-// dot + name + provenance/add-on/mixed chips; a Namespace column; an env pill
-// (namespace-inferred shown as ~env); class; ready bar; version; workloads. A
-// facet rail + a health hero bar sit alongside. Data + selection are injected.
-// Styling mirrors the Resources table so the two read as one design.
-
-interface AppEntry {
-  row: AppRow
-  health: AppHealth
-  versions: string[]
-  namespace: string
-  namespaces: string[]
-  env: string
-  envInferred: boolean
-  kinds: Record<string, number>
-  workloadClass: AppWorkloadClass
-  /** Distinct contained classes — the inclusive facet-matching set. */
-  classSet: AppWorkloadClass[]
-  classComposition: { cls: AppWorkloadClass; count: number }[]
-  category: AppCategory
-  ready: number
-  desired: number
-  /** ready/desired as a fraction for sorting; -1 when nothing is desired. */
-  readyRatio: number
-  source: AppSource
-}
-
-function buildEntry(row: AppRow, discoveredEnvs?: ReadonlySet<string>): AppEntry {
-  const kinds: Record<string, number> = {}
-  let ready = 0
-  let desired = 0
-  for (const wl of row.workloads || []) {
-    kinds[wl.kind] = (kinds[wl.kind] ?? 0) + 1
-    ready += wl.ready ?? 0
-    desired += wl.desired ?? 0
-  }
-  const namespace = namespaceOf(row)
-  // The server's identity classification carries the authoritative env (label/
-  // declared/discovered); plain rows fall back to the trio + discovered-token
-  // namespace heuristic.
-  const resolved = resolveEnv(undefined, namespace, discoveredEnvs)
-  const env = row.identity?.env ?? resolved.env
-  const inferred = row.identity ? identityEnvInferred(row.identity) : resolved.inferred
-  return {
-    row,
-    health: healthOf(row.health),
-    versions: Array.from(new Set((row.versions || []).filter(Boolean))),
-    namespace,
-    namespaces: namespacesOf(row),
-    env,
-    envInferred: inferred,
-    kinds,
-    workloadClass: workloadClassOf(row.workload_class),
-    classSet: classSetOf(row),
-    classComposition: classCompositionOf(row),
-    category: categoryOf(row.category),
-    ready,
-    desired,
-    readyRatio: desired > 0 ? ready / desired : -1,
-    source: sourceOf(row.tier),
-  }
-}
-
-const envLabel = (env: string) => (env ? env : 'unlabeled')
-
-function searchTextForEntry(e: AppEntry): string {
-  const workloadText = (e.row.workloads || []).flatMap((wl) => [wl.kind, wl.namespace, wl.name, wl.version])
-  return [
-    e.row.name,
-    e.row.key,
-    e.namespace,
-    SOURCE_META[e.source].label,
-    CLASS_META[e.workloadClass].label,
-    ...e.classSet.map((c) => CLASS_META[c].label),
-    CATEGORY_META[e.category].label,
-    ...e.versions,
-    envLabel(e.env),
-    ...Object.keys(e.kinds),
-    ...workloadText,
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .toLowerCase()
-}
-
-// Availability is the one status facet — map app health onto the shared facet
-// tone so its dots read red/amber/green/grey like the GitOps sync+health facets.
-const HEALTH_TONE: Record<AppHealth, FacetTone> = {
-  unhealthy: 'error',
-  degraded: 'warning',
-  healthy: 'success',
-  unknown: 'neutral',
-}
-
-// Sortable columns. `health` is the implicit default (worst-first then name);
-// clicking a sortable header cycles asc → desc → off (back to default).
-type SortKey = 'name' | 'ready' | 'version'
-type SortDir = 'asc' | 'desc'
-
-function compareEntries(a: AppEntry, b: AppEntry, key: SortKey): number {
-  switch (key) {
-    case 'name':
-      return a.row.name.localeCompare(b.row.name)
-    case 'ready':
-      return a.readyRatio - b.readyRatio
-    case 'version': {
-      // Sort by distinct-version count first (skewed apps cluster), then the
-      // first tag for a stable, human-meaningful order.
-      const byCount = a.versions.length - b.versions.length
-      if (byCount !== 0) return byCount
-      return (a.versions[0] ?? '').localeCompare(b.versions[0] ?? '')
-    }
-  }
-}
+// ApplicationsList — the OSS single-cluster Applications view. A thin wrapper
+// that maps wire rows to single-cluster entries and drives the shared
+// ApplicationsView core (the facet rail, hero header, fold, search, sort, and
+// keyboard nav all live there). Data + selection are injected. The Cloud fleet
+// view is a sibling wrapper over the same core with variant="fleet".
 
 export interface ApplicationsListProps {
   apps: AppRow[]
@@ -169,417 +14,19 @@ export interface ApplicationsListProps {
 }
 
 export function ApplicationsList({ apps, onSelect }: ApplicationsListProps) {
-  const [textFilter, setTextFilter] = useState('')
-  const [fHealth, setFHealth] = useState<Set<AppHealth>>(new Set())
-  const [fEnv, setFEnv] = useState<Set<string>>(new Set())
-  const [fSource, setFSource] = useState<Set<AppSource>>(new Set())
-  const [fClass, setFClass] = useState<Set<AppWorkloadClass>>(new Set())
-  const [fType, setFType] = useState<Set<AppCategory>>(new Set())
-  const [showSystem, setShowSystem] = useState(false)
-  const [sort, setSort] = useState<{ key: SortKey; dir: SortDir } | null>(null)
-
   // Env tokens this CLUSTER proved (identity classifications on the wire) feed
   // the namespace heuristic, so sibling-less rows in discovered env namespaces
-  // namespace still label without any hardcoded vocabulary.
+  // still label without any hardcoded vocabulary.
   const discoveredEnvs = useMemo(() => new Set(apps.map((a) => a.identity?.env).filter((e): e is string => !!e)), [apps])
-  const allRaw = useMemo<AppEntry[]>(() => apps.map((a) => buildEntry(a, discoveredEnvs)), [apps, discoveredEnvs])
-  // System namespaces are filtered before facet counts so the counts reflect
-  // what the user is actually looking at (consistent with the other facets).
-  // An app counts as system only when EVERY workload namespace is system —
-  // hiding a partly-user app would be worse than showing a partly-system one.
-  const isSystemApp = (e: AppEntry) => e.namespaces.length > 0 && e.namespaces.every(isSystemNamespace)
-  const all = useMemo(() => (showSystem ? allRaw : allRaw.filter((e) => !isSystemApp(e))), [allRaw, showSystem])
-  const systemCount = useMemo(() => allRaw.filter(isSystemApp).length, [allRaw])
-
-  const entries = useMemo(() => {
-    const t = textFilter.trim().toLowerCase()
-    const filtered = all.filter((e) => {
-      if (t && !searchTextForEntry(e).includes(t)) return false
-      if (fHealth.size && !fHealth.has(e.health)) return false
-      // Inclusive: a mixed app matches the filter of ANY class it contains.
-      if (fClass.size && !e.classSet.some((c) => fClass.has(c))) return false
-      if (fType.size && !fType.has(e.category)) return false
-      if (fSource.size && !fSource.has(e.source)) return false
-      if (fEnv.size && !fEnv.has(e.env || 'none')) return false
-      return true
-    })
-    if (sort) {
-      const factor = sort.dir === 'asc' ? 1 : -1
-      filtered.sort((a, b) => compareEntries(a, b, sort.key) * factor || a.row.name.localeCompare(b.row.name))
-    } else {
-      filtered.sort((a, b) => (HEALTH_RANK[b.health] ?? 0) - (HEALTH_RANK[a.health] ?? 0) || a.row.name.localeCompare(b.row.name))
-    }
-    return filtered
-  }, [all, textFilter, fHealth, fEnv, fSource, fClass, fType, sort])
-
-  // ── App groups ──────────────────────────────────────────────────────────────
-  // Instances sharing a wire `identity` fold into one ladder row (foldAppGroups).
-  // THE COLLAPSE EXPERIMENT: default collapsed, contingent on (a) text search
-  // auto-expanding into hidden instances, (b) instance rows one chevron away,
-  // (c) the group chip visibly carrying confidence. If heuristic precision
-  // disappoints in the field, default-expand by seeding expandedGroups with
-  // every group key instead of an empty set.
-  const FAMILY_AUTO_EXPAND_ON_SEARCH = true
-  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set())
-  const toggleGroup = (key: string) =>
-    setExpandedGroups((s) => {
-      const n = new Set(s)
-      n.has(key) ? n.delete(key) : n.add(key)
-      return n
-    })
-
-  const visibleRows = useMemo<FoldedRow<AppEntry>[]>(
-    () => foldAppGroups(entries, expandedGroups, FAMILY_AUTO_EXPAND_ON_SEARCH && textFilter.trim() !== ''),
-    [entries, expandedGroups, textFilter],
-  )
-
-  // Row keyboard navigation — same contract as the Resources table: j/k or
-  // arrows move a highlight, g g / G jump, Enter opens, Escape clears the
-  // highlight. The search box hands off via ArrowDown.
-  const [highlightedIndex, setHighlightedIndex] = useState(-1)
-  const rowsRef = useRef(visibleRows)
-  rowsRef.current = visibleRows
-  useEffect(() => setHighlightedIndex(-1), [visibleRows])
-  const firstOpenableVisibleRow = useCallback(() => {
-    const first = rowsRef.current[0]
-    if (!first) return null
-    return first.kind === 'group' ? first.cells[0]?.firstKey ?? null : first.entry.row.key
-  }, [])
-  const moveHighlight = (delta: number) =>
-    setHighlightedIndex((i) => Math.min(Math.max(i + delta, 0), rowsRef.current.length - 1))
-  useRegisterShortcuts([
-    { id: 'applications-nav-down', keys: 'j', description: 'Next row', category: 'Table', scope: 'applications', handler: () => moveHighlight(1) },
-    { id: 'applications-nav-down-arrow', keys: 'ArrowDown', description: 'Next row', category: 'Table', scope: 'applications', handler: () => moveHighlight(1) },
-    { id: 'applications-nav-up', keys: 'k', description: 'Previous row', category: 'Table', scope: 'applications', handler: () => moveHighlight(-1) },
-    { id: 'applications-nav-up-arrow', keys: 'ArrowUp', description: 'Previous row', category: 'Table', scope: 'applications', handler: () => moveHighlight(-1) },
-    { id: 'applications-nav-top', keys: 'g g', description: 'Jump to first row', category: 'Table', scope: 'applications', handler: () => setHighlightedIndex(rowsRef.current.length > 0 ? 0 : -1) },
-    { id: 'applications-nav-bottom', keys: 'G', description: 'Jump to last row', category: 'Table', scope: 'applications', handler: () => setHighlightedIndex(rowsRef.current.length - 1) },
-    {
-      id: 'applications-open', keys: 'Enter', description: 'Open application', category: 'Table', scope: 'applications',
-      handler: () => {
-        const r = rowsRef.current[highlightedIndex]
-        if (!r) return
-        // Enter on a group toggles it; on an instance, opens it.
-        if (r.kind === 'group') toggleGroup(r.key)
-        else onSelect(r.entry.row.key)
-      },
-      enabled: highlightedIndex >= 0,
-    },
-    {
-      id: 'applications-escape', keys: 'Escape', description: 'Clear row highlight', category: 'Table', scope: 'applications',
-      handler: () => setHighlightedIndex(-1),
-      enabled: highlightedIndex >= 0,
-    },
-  ])
-
-  const counts = useMemo(() => {
-    const health: Record<string, number> = {}
-    const env: Record<string, number> = {}
-    const source: Record<string, number> = {}
-    const workloadClass: Record<string, number> = {}
-    const category: Record<string, number> = {}
-    for (const e of all) {
-      health[e.health] = (health[e.health] ?? 0) + 1
-      for (const c of e.classSet) workloadClass[c] = (workloadClass[c] ?? 0) + 1
-      source[e.source] = (source[e.source] ?? 0) + 1
-      category[e.category] = (category[e.category] ?? 0) + 1
-      env[e.env || 'none'] = (env[e.env || 'none'] ?? 0) + 1
-    }
-    return { health, env, source, workloadClass, category }
-  }, [all])
-
-  const toggle = <T,>(set: Set<T>, setter: (s: Set<T>) => void, v: T) => {
-    const next = new Set(set)
-    next.has(v) ? next.delete(v) : next.add(v)
-    setter(next)
-  }
-
-  // asc → desc → off (null = default health-worst-first sort).
-  const onSort = (key: SortKey) => {
-    setSort((prev) => {
-      if (!prev || prev.key !== key) return { key, dir: 'asc' }
-      if (prev.dir === 'asc') return { key, dir: 'desc' }
-      return null
-    })
-  }
-
-  const total = all.length
-  const envOptions = Object.entries(counts.env)
-    .sort((a, b) => (envRank(b[0] === 'none' ? undefined : b[0]) ?? -1) - (envRank(a[0] === 'none' ? undefined : a[0]) ?? -1))
-    .map(([env, count]) => ({ value: env, label: env === 'none' ? 'unlabeled' : env, count }))
-
-  // Clickable status tile wired to the health facet — tap to filter to that tier.
-  const healthTile = (h: AppHealth, tone: SummaryTone) =>
-    counts.health[h] ? (
-      <SummaryTile key={h} label={HEALTH_META[h].label} value={counts.health[h]} tone={tone} active={fHealth.has(h)} onClick={() => toggle(fHealth, setFHealth, h)} />
-    ) : null
-
-  // showSystem lives in the Filters rail, so Clear resets it too (and its
-  // non-default ON state counts as an active filter that surfaces the button).
-  const anyFilterActive = !!(textFilter || fHealth.size || fClass.size || fType.size || fSource.size || fEnv.size || showSystem)
-  const clearAllFilters = () => {
-    setTextFilter('')
-    setFHealth(new Set())
-    setFClass(new Set())
-    setFType(new Set())
-    setFSource(new Set())
-    setFEnv(new Set())
-    setShowSystem(false)
-  }
+  const entries = useMemo(() => apps.map((a) => buildSingleAppEntry(a, discoveredEnvs)), [apps, discoveredEnvs])
 
   return (
-    <div className="flex h-full w-full min-w-0 flex-1 flex-col overflow-hidden bg-theme-base">
-      {/* Header band: title + description + clickable status tiles + slim health
-          bar. Same chassis as the GitOps view so the two list surfaces read as
-          siblings (status in the header, filters in a left rail, search in a
-          toolbar). */}
-      <div className="shrink-0 border-b border-theme-border px-4 py-4">
-        <PageHeader
-          icon={Boxes}
-          title="Applications"
-          description="Deployable software in this cluster — your services, workers, and jobs, grouped by app/release evidence."
-          actions={
-            <>
-              <SummaryTile label={total === 1 ? 'application' : 'applications'} value={total} />
-              {healthTile('unhealthy', 'error')}
-              {healthTile('degraded', 'warning')}
-              {healthTile('healthy', 'success')}
-              {healthTile('unknown', 'neutral')}
-            </>
-          }
-        />
-        <DistributionBar
-          className="mt-3"
-          ariaLabel="Health distribution"
-          segments={HEALTH_ORDER.map((h) => ({ key: h, count: counts.health[h] ?? 0, fillClass: HEALTH_META[h].bar }))}
-        />
-      </div>
-
-      {/* Body: filter sidebar | content (toolbar + table). */}
-      <div className="flex min-w-0 flex-1 overflow-hidden max-[899px]:flex-col">
-        {/* Filters sidebar — titled, with Clear; mirrors the GitOps facet rail.
-            Arbitrary 900px breakpoint (not `sm`) so the collapse is independent of
-            the consuming app's Tailwind breakpoint config (Hub uses defaults). */}
-        <aside className="flex w-52 shrink-0 flex-col overflow-hidden border-r border-theme-border bg-theme-surface/90 max-[899px]:max-h-72 max-[899px]:w-full max-[899px]:border-b max-[899px]:border-r-0">
-          <div className="flex items-center justify-between border-b border-theme-border px-3 py-2">
-            <span className="text-sm font-medium text-theme-text-secondary">Filters</span>
-            {anyFilterActive && (
-              <button type="button" onClick={clearAllFilters} className="text-[10px] font-medium text-blue-500 hover:text-blue-400">Clear</button>
-            )}
-          </div>
-          <div className="flex-1 overflow-y-auto">
-            <Facet icon={HeartPulse} title="Availability" options={HEALTH_ORDER.map((h) => ({ value: h, label: HEALTH_META[h].label, count: counts.health[h] ?? 0, tone: HEALTH_TONE[h] }))} selected={fHealth} onToggle={(v) => toggle(fHealth, setFHealth, v)} />
-            <Facet icon={Layers} title="Class" options={CLASS_ORDER.map((c) => ({ value: c, label: CLASS_META[c].label, count: counts.workloadClass[c] ?? 0 }))} selected={fClass} onToggle={(v) => toggle(fClass, setFClass, v)} />
-            <Facet icon={Shapes} title="Type" options={CATEGORY_ORDER.map((c) => ({ value: c, label: CATEGORY_META[c].label, count: counts.category[c] ?? 0, tooltip: CATEGORY_META[c].tooltip }))} selected={fType} onToggle={(v) => toggle(fType, setFType, v)} />
-            <Facet icon={Globe} title="Environment" info={<EnvHint />} options={envOptions} selected={fEnv} onToggle={(v) => toggle(fEnv, setFEnv, v)} />
-            <Facet icon={Tag} title="Source" options={SOURCE_ORDER.map((s) => ({ value: s, label: SOURCE_META[s].label, count: counts.source[s] ?? 0 }))} selected={fSource} onToggle={(v) => toggle(fSource, setFSource, v)} />
-            {systemCount > 0 && (
-              <label className="flex cursor-pointer items-center gap-2 border-b border-theme-border px-3 py-2 text-[11px] text-theme-text-secondary hover:bg-theme-hover">
-                <input type="checkbox" checked={showSystem} onChange={(e) => setShowSystem(e.target.checked)} className="accent-skyhook-500" />
-                <span>Show system namespaces</span>
-                <span className="ml-auto tabular-nums text-theme-text-tertiary">{systemCount}</span>
-              </label>
-            )}
-          </div>
-        </aside>
-
-        {/* Content: toolbar (search + sort) over the scrollable table. */}
-        <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
-          <div className="flex shrink-0 items-center gap-3 border-b border-theme-border px-4 py-3">
-            <SearchBox
-              value={textFilter}
-              onChange={setTextFilter}
-              scope="applications"
-              shortcutId="applications-search"
-              className="max-w-md flex-1"
-              onEnter={() => {
-                const key = highlightedIndex >= 0 && rowsRef.current[highlightedIndex]?.kind === 'instance'
-                  ? (rowsRef.current[highlightedIndex] as Extract<FoldedRow<AppEntry>, { kind: 'instance' }>).entry.row.key
-                  : firstOpenableVisibleRow()
-                if (key) onSelect(key)
-              }}
-              onArrowDown={() => {
-                if (visibleRows.length > 0) setHighlightedIndex(0)
-              }}
-            />
-            {/* Sorting is via the clickable column headers (Resources-table
-                pattern) — no separate sort control. */}
-          </div>
-
-          <div className="min-w-0 flex-1 overflow-auto bg-theme-base">
-          {entries.length === 0 ? (
-            <div className="p-4">
-              <EmptyState
-                tone="filtered"
-                variant="card"
-                headline={total === 0 ? 'No applications detected yet' : 'No applications match the filters'}
-                body={total === 0 ? 'Deploy services, workers, or jobs to this cluster to see them grouped by app.' : 'Clear the filters above.'}
-              />
-            </div>
-          ) : (
-              <table className="w-full text-left text-sm">
-                <thead className="sticky top-0 z-10 bg-theme-base">
-                  <tr>
-                    <SortableTh label="Application" sortKey="name" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} />
-                    <th className={TH_CLASS}>Namespace</th>
-                    <th className={TH_CLASS}>Env</th>
-                    <th className={TH_CLASS}>Class</th>
-                    <SortableTh label="Ready" sortKey="ready" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} />
-                    <SortableTh label="Version" sortKey="version" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} />
-                    <th className={TH_CLASS}>Workloads</th>
-                    <th className={clsx(TH_CLASS, 'w-8')} />
-                  </tr>
-                </thead>
-                <tbody>
-                  {visibleRows.map((r, idx) => r.kind === 'group' ? (
-                    <tr
-                      key={`group:${r.key}`}
-                      ref={idx === highlightedIndex ? (el) => el?.scrollIntoView({ block: 'nearest' }) : undefined}
-                      aria-expanded={r.expanded}
-                      className={clsx(
-                        'group/row cursor-pointer border-b-subtle',
-                        idx === highlightedIndex ? 'selection selection-ring' : 'hover:bg-theme-hover',
-                      )}
-                      onClick={() => toggleGroup(r.key)}
-                    >
-                      <td className="py-2.5 pl-3 pr-2">
-                        <span className="flex items-center gap-2">
-                          {/* Left status stripe (worst-child health) — the row status
-                              gutter shared with the GitOps table. */}
-                          <Tooltip content={HEALTH_META[r.health].label} delay={150}>
-                            <span className={clsx('h-8 w-1 shrink-0 rounded-full', HEALTH_META[r.health].bar)} />
-                          </Tooltip>
-                          <ChevronRight className={clsx('h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform', r.expanded && 'rotate-90')} aria-hidden />
-                          <span className="truncate font-semibold text-theme-text-primary">{r.label}</span>
-                          <Tooltip
-                            content={<AppIdentityTooltip identityKey={r.label} members={r.members.map((m) => ({ name: m.row.name, env: m.row.identity!.env, confidence: m.row.identity!.confidence, evidence: m.row.identity!.evidence }))} />}
-                            delay={150}
-                          >
-                            <span className={`${CHIP} ${r.confidence === 'high' ? CHIP_TONE.emerald : CHIP_TONE.neutral}`}>
-                              <Layers className="mr-1 h-3 w-3" aria-hidden />{r.cells.length} envs
-                            </span>
-                          </Tooltip>
-                        </span>
-                      </td>
-                      <td className="px-2 py-2.5">
-                        <span className="text-xs text-theme-text-tertiary">{pluralize(r.members.length, 'instance')}</span>
-                      </td>
-                      <td className="px-2 py-2.5">
-                        {/* The ladder: env-ordered cells; click drills into that env's instance. */}
-                        <span className="flex flex-wrap items-center gap-1">
-                          {/* Ladder cells scale-capped: a handful inline, the
-                              rest behind "+N" (expand shows every instance). */}
-                          {r.cells.slice(0, 4).map((c) => (
-                            <Tooltip key={c.env} content={`${c.env}${c.version ? ` · ${c.version}` : ''}${c.count > 1 ? ` · ${c.count} instances — expand to choose` : ' — open'}`} delay={150}>
-                              <button
-                                type="button"
-                                onClick={(ev) => {
-                                  ev.stopPropagation()
-                                  if (c.count > 1) toggleGroup(r.key)
-                                  else onSelect(c.firstKey)
-                                }}
-                                className={`${CHIP} ${CHIP_TONE.neutral} gap-1 hover:bg-theme-hover`}
-                              >
-                                <StatusDot tone={mapHealthToTone(c.health)} />{c.env}
-                              </button>
-                            </Tooltip>
-                          ))}
-                          {r.cells.length > 4 && (
-                            <Tooltip content={`${r.cells.length - 4} more environments — expand to see all instances`} delay={150}>
-                              <button
-                                type="button"
-                                onClick={(ev) => { ev.stopPropagation(); toggleGroup(r.key) }}
-                                className={`${CHIP} ${CHIP_TONE.muted} hover:bg-theme-hover`}
-                              >
-                                +{r.cells.length - 4}
-                              </button>
-                            </Tooltip>
-                          )}
-                        </span>
-                      </td>
-                      <td className="px-2 py-2.5"><ClassBadge workloadClass={r.workloadClass} composition={r.classComposition} /></td>
-                      <td className="px-2 py-2.5"><ReadyBar ready={r.ready} desired={r.desired} /></td>
-                      <td className="px-2 py-2.5">
-                        {r.lag ? (
-                          <Tooltip content={`Promotion lag: ${r.lag} (${r.cells.filter((c) => c.version).map((c) => `${c.env}=${c.version}`).join(', ')})`} delay={150}>
-                            <span className={`${CHIP} ${CHIP_TONE.amber}`}>{r.lag}</span>
-                          </Tooltip>
-                        ) : (
-                          <span className="text-theme-text-tertiary">—</span>
-                        )}
-                      </td>
-                      <td className="px-2 py-2.5">
-                        <span className="text-xs text-theme-text-secondary">{Object.entries(r.kinds).map(([k, n]) => pluralize(n, k)).join(' · ')}</span>
-                      </td>
-                      <td className="pr-2 text-right" />
-                    </tr>
-                  ) : ((e) => (
-                    <tr
-                      key={e.row.key}
-                      ref={idx === highlightedIndex ? (el) => el?.scrollIntoView({ block: 'nearest' }) : undefined}
-                      className={clsx(
-                        'group/row cursor-pointer border-b-subtle',
-                        idx === highlightedIndex ? 'selection selection-ring' : 'hover:bg-theme-hover',
-                      )}
-                      onClick={() => onSelect(e.row.key)}
-                    >
-                      <td className={clsx('py-2.5 pr-2', r.child ? 'pl-10' : 'pl-3')}>
-                        <span className="flex items-center gap-2">
-                          <Tooltip content={HEALTH_META[e.health].label} delay={150}>
-                            <span className={clsx('h-8 w-1 shrink-0 rounded-full', HEALTH_META[e.health].bar)} />
-                          </Tooltip>
-                          <span className="truncate font-medium text-theme-text-primary">{e.row.name}</span>
-                          <ProvenanceBadge tier={e.row.tier} appKey={e.row.key} confidence={e.row.confidence} />
-                          <CategoryChip category={e.category} addonReason={e.row.addonReason} />
-                        </span>
-                      </td>
-                      <td className="px-2 py-2.5">
-                        {e.namespace ? (
-                          <span className="truncate font-mono text-xs text-theme-text-secondary">{e.namespace}</span>
-                        ) : e.namespaces.length > 1 ? (
-                          <Tooltip content={e.namespaces.join(', ')} delay={150}>
-                            <span className="text-xs text-theme-text-secondary">{e.namespaces.length} namespaces</span>
-                          </Tooltip>
-                        ) : (
-                          <span className="text-theme-text-tertiary">—</span>
-                        )}
-                      </td>
-                      <td className="px-2 py-2.5">
-                        {e.env ? (
-                          e.envInferred ? (
-                            <Tooltip content={`Inferred from namespace "${e.namespace || e.env}" — confirm with an environment label.`} delay={150}>
-                              <span className={`${CHIP} italic ${CHIP_TONE.muted}`}>~{e.env}</span>
-                            </Tooltip>
-                          ) : (
-                            <span className={`${CHIP} ${CHIP_TONE.neutral}`}>{e.env}</span>
-                          )
-                        ) : (
-                          <Tooltip content={<EnvHint unlabeled />} delay={300}>
-                            <span className="cursor-default text-theme-text-tertiary">—</span>
-                          </Tooltip>
-                        )}
-                      </td>
-                      <td className="px-2 py-2.5"><ClassBadge workloadClass={e.workloadClass} composition={e.classComposition} /></td>
-                      <td className="px-2 py-2.5"><ReadyBar ready={e.ready} desired={e.desired} /></td>
-                      <td className="px-2 py-2.5">
-                        <VersionInfo app={e.row} variant="cell" />
-                      </td>
-                      <td className="px-2 py-2.5">
-                        {Object.keys(e.kinds).length === 0 ? (
-                          <span className="text-xs text-theme-text-tertiary">—</span>
-                        ) : (
-                          <span className="text-xs text-theme-text-secondary">{Object.entries(e.kinds).map(([k, n]) => pluralize(n, k)).join(' · ')}</span>
-                        )}
-                      </td>
-                      <td className="pr-2 text-right"><ChevronRight className="inline h-4 w-4 text-theme-text-tertiary" /></td>
-                    </tr>
-                  ))(r.entry))}
-                </tbody>
-              </table>
-          )}
-          </div>
-        </div>
-      </div>
-    </div>
+    <ApplicationsView
+      variant="single"
+      entries={entries}
+      onSelect={onSelect}
+      title="Applications"
+      description="Deployable software in this cluster — your services, workers, and jobs, grouped by app/release evidence."
+    />
   )
 }