@skyhook-io/k8s-ui 1.7.12 → 1.7.14

package/src/components/workload/WorkloadView.tsx

@@ -3,6 +3,7 @@ import { flushSync } from 'react-dom'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { startViewTransitionSafe } from '../../utils/view-transition'
 import { FetchResult } from '../ui/FetchResult'
+import { PaneLoader } from '../ui/PaneLoader'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { clsx } from 'clsx'
 import {
@@ -19,11 +20,14 @@ import {
   Maximize2,
   X,
   BarChart3,
+  Network,
 } from 'lucide-react'
-import type { TimelineEvent, ResourceRef, Relationships, SelectedResource, ResolvedEnvFrom } from '../../types'
+import type { TimelineEvent, ResourceRef, Relationships, SelectedResource, ResolvedEnvFrom, Topology, TopologyNode } from '../../types'
 import type { GitOpsStatus } from '../../types/gitops'
 import type { NavigateToResource } from '../../utils/navigation'
-import { refToSelectedResource, pluralToKind } from '../../utils/navigation'
+import { refToSelectedResource, pluralToKind, kindToPlural, apiVersionToGroup } from '../../utils/navigation'
+import { neighborhoodFor, seedNodeIds } from '../../utils/topology-neighborhood'
+import { TopologyGraph } from '../topology/TopologyGraph'
 import { gitOpsOwnerFromRelationships, type GitOpsOwnerRef } from '../../utils/gitops-owner'
 import { gitOpsRouteForResource } from '../../utils/gitops-route'
 import { isChangeEvent, isHistoricalEvent } from '../../types'
@@ -47,9 +51,11 @@ import { EditableYamlView, SaveSuccessAnimation } from '../shared/EditableYamlVi
 import { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } from '../shared/ResourceRendererDispatch'
 import { DetailShell, type DetailShellTab } from '../shared/DetailShell'
 import { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from '../shared/ManagedByChip'
-import { getKindColorOutline, formatKindName } from '../ui/drawer-components'
+import { getKindColorOutline, displayKindName } from '../ui/drawer-components'
+import { midTruncate } from '../../utils/format'
 
-type TabType = 'overview' | 'timeline' | 'logs' | 'metrics' | 'yaml'
+export type WorkloadTabType = 'overview' | 'topology' | 'timeline' | 'logs' | 'metrics' | 'yaml'
+type TabType = WorkloadTabType
 
 // ============================================================================
 // MAIN WORKLOAD VIEW — presentation only, data injected via props
@@ -81,11 +87,16 @@ interface WorkloadViewProps {
    * the Escape shortcut.
    */
   breadcrumb?: ReactNode
+  /** Suppress the standalone back arrow — for embeddings where "back" has no
+   *  meaningful target (a single-workload app has no app graph to return to). */
+  hideBackButton?: boolean
   /**
    * Controls injected into the shell's tab-row scope slot — e.g. a cluster /
    * workload picker in Radar Cloud. Absent in standalone Radar.
    */
   scopeControls?: ReactNode
+  /** Hide WorkloadView's own breadcrumb/identity header when a host page owns that chrome. */
+  compactHeader?: boolean
 
   // ── Data (injected by wrapper) ──────────────────────────────────────────
   /** The resource data object */
@@ -107,8 +118,8 @@ interface WorkloadViewProps {
   allEvents?: TimelineEvent[]
   /** Whether timeline events are loading */
   eventsLoading?: boolean
-  /** Topology data for hierarchy building */
-  topology?: any
+  /** Topology data for hierarchy building + the Topology tab's neighborhood. */
+  topology?: Topology
   resourceFocusedK8sEvents?: TimelineEvent[]
   resourceFocusedUpdates?: TimelineEvent[]
   resourceFocusedEventsLoading?: boolean
@@ -118,6 +129,8 @@ interface WorkloadViewProps {
   // ── Capabilities ─────────────────────────────────────────────────────────
   /** Whether secrets can be updated */
   canUpdateSecrets?: boolean
+  /** Whether YAML editing should be disabled for read-only host surfaces. */
+  readOnlyYaml?: boolean
 
   // ── Mutations ────────────────────────────────────────────────────────────
   /** Update a resource from YAML */
@@ -183,6 +196,12 @@ interface WorkloadViewProps {
   }) => ReactNode
   /** Render the metrics tab content */
   renderMetricsTab?: (props: { kind: string; namespace: string; name: string }) => ReactNode
+  /** Render a read-only YAML view for a related object from the workload's
+   *  neighborhood. Providing this turns the YAML tab into an object explorer
+   *  (rail of the workload + its Services/config/policies/pods); omitting it
+   *  keeps the single-manifest YAML tab. Injected because resource fetching
+   *  lives host-side. */
+  renderRelatedYaml?: (ref: { kind: string; namespace: string; name: string; group?: string }) => ReactNode
   /** Whether metrics are available for this resource kind */
   isMetricsAvailable?: (kind: string, resource: any) => boolean
   /** Render extra content at the bottom of the overview tab (e.g. audit findings) */
@@ -218,7 +237,9 @@ export function WorkloadView({
   initialTab,
   group,
   breadcrumb,
+  hideBackButton,
   scopeControls,
+  compactHeader,
   // Data
   resource,
   relationships,
@@ -237,6 +258,7 @@ export function WorkloadView({
   resourceFocusedUpdatesError = null,
   // Capabilities
   canUpdateSecrets,
+  readOnlyYaml,
   // Mutations
   onUpdateResource,
   isUpdatingResource,
@@ -246,6 +268,7 @@ export function WorkloadView({
   onTabChange,
   // Render props
   renderLogsTab,
+  renderRelatedYaml,
   renderMetricsTab,
   isMetricsAvailable,
   // Duplicate
@@ -292,7 +315,6 @@ export function WorkloadView({
     // startViewTransitionSafe handles the API-missing fallback AND
     // swallows the InvalidStateError that the API rejects with when
     // a new transition supersedes an in-flight one (rapid clicks).
-    // (SKY-833 bug 49)
     startViewTransitionSafe(() => flushSync(() => setShowYaml(yaml)))
   }, [])
 
@@ -317,10 +339,75 @@ export function WorkloadView({
     })
   }, [allEvents, topology, kind, namespace, name])
 
+  // Topology tab — the seeded neighborhood around this one workload (its
+  // ownership core + attached Services/config/policies), not the whole namespace.
+  const neighborhoodSeed = useMemo(() => [{ kind, namespace, name }], [kind, namespace, name])
+  const neighborhood = useMemo(
+    () => (topology ? neighborhoodFor(topology, neighborhoodSeed) : null),
+    [topology, neighborhoodSeed],
+  )
+  const neighborhoodFocusId = useMemo(
+    () => (topology ? seedNodeIds(topology, neighborhoodSeed)[0] : undefined),
+    [topology, neighborhoodSeed],
+  )
+
+  // The Topology tab stays visible while topology is loading (the pane shows a
+  // loader) and hides only when topology arrived and nothing matched the seed.
+  // A deep-linked ?tab=topology that turns out unavailable falls back to
+  // overview instead of rendering an empty body under a hidden tab.
+  const topologyTabHidden = !!topology && (!neighborhood || neighborhood.nodes.length === 0)
+  const effectiveTab: TabType = activeTab === 'topology' && topologyTabHidden ? 'overview' : activeTab
+
+  // YAML tab object rail — the same neighborhood, as a manifest list: the
+  // workload first, then routing → config → policy/scaling → ownership.
+  const yamlObjects = useMemo(() => {
+    if (!neighborhood) return []
+    const order: Record<string, number> = {
+      Service: 1, Ingress: 1, HTTPRoute: 1,
+      ConfigMap: 2, Secret: 2,
+      HorizontalPodAutoscaler: 3, PodDisruptionBudget: 3, NetworkPolicy: 3,
+      ReplicaSet: 4, Pod: 5,
+    }
+    return neighborhood.nodes
+      .filter((n) => n.kind !== 'Internet' && n.kind !== 'PodGroup')
+      .map((n) => ({
+        id: n.id,
+        kind: n.kind as string,
+        namespace: (n.data?.namespace as string) || namespace,
+        name: n.name,
+        group: apiVersionToGroup(n.data?.apiVersion as string | undefined),
+        primary: n.id === neighborhoodFocusId,
+      }))
+      .sort((a, b) =>
+        a.primary !== b.primary
+          ? (a.primary ? -1 : 1)
+          : (order[a.kind] ?? 9) - (order[b.kind] ?? 9) || a.kind.localeCompare(b.kind) || a.name.localeCompare(b.name),
+      )
+  }, [neighborhood, neighborhoodFocusId, namespace])
+  // null = the workload's own manifest (the editable one).
+  const [yamlObjectId, setYamlObjectId] = useState<string | null>(null)
+  useEffect(() => setYamlObjectId(null), [kind, namespace, name])
+  const yamlObject = yamlObjectId ? yamlObjects.find((o) => o.id === yamlObjectId) : undefined
+  const handleTopologyNodeClick = useCallback(
+    (node: TopologyNode) => {
+      if (!onNavigateToResource || !node.kind || !node.name) return
+      onNavigateToResource({
+        kind: kindToPlural(node.kind),
+        namespace: (node.data?.namespace as string) || '',
+        name: node.name,
+        group: apiVersionToGroup(node.data?.apiVersion as string | undefined),
+      })
+    },
+    [onNavigateToResource],
+  )
+
   // Flatten events from hierarchy
   const resourceEvents = useMemo(() => {
     return getAllEventsFromHierarchy(resourceLanes)
   }, [resourceLanes])
+  const overviewEvents = resourceEvents.length > 0 ? resourceEvents : (resourceFocusedK8sEvents ?? [])
+  const overviewEventsLoading = resourceEvents.length > 0 ? eventsLoading : resourceFocusedEventsLoading
+  const overviewEventsError = resourceEvents.length > 0 ? undefined : resourceFocusedK8sError
 
   // Get pods from relationships and hierarchy
   const childPods = useMemo(() => {
@@ -446,6 +533,7 @@ export function WorkloadView({
   const showMetricsTab = isMetricsAvailable ? isMetricsAvailable(kind, resource) : false
   const tabs: DetailShellTab<TabType>[] = [
     { id: 'overview', label: 'Overview', icon: <Layers className="w-4 h-4" /> },
+    { id: 'topology', label: 'Topology', icon: <Network className="w-4 h-4" />, hidden: topologyTabHidden },
     {
       id: 'timeline',
       label: 'Timeline',
@@ -467,7 +555,7 @@ export function WorkloadView({
           <div className="flex items-center justify-between px-4 pt-3 pb-2">
             <div className="flex items-center gap-2 flex-wrap">
               <span className={clsx('badge', getKindColorOutline(apiKind))}>
-                {formatKindName(apiKind)}
+                {displayKindName(apiKind, resource?.kind)}
               </span>
               {status && (
                 <span className={clsx('badge', status.color)}>
@@ -548,6 +636,7 @@ export function WorkloadView({
               data={resource}
               onCopy={(text) => copyToClipboard(text, 'yaml')}
               copied={copied === 'yaml'}
+              readOnly={readOnlyYaml}
               onSaved={handleSaved}
               onSave={onUpdateResource}
               isSaving={isUpdatingResource}
@@ -593,7 +682,7 @@ export function WorkloadView({
     <DetailShell
       breadcrumb={breadcrumb}
       nav={
-        breadcrumb ? undefined : (
+        breadcrumb || hideBackButton ? undefined : (
           <button
             onClick={onBack}
             className="p-1.5 mt-0.5 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded-lg transition-colors"
@@ -617,7 +706,7 @@ export function WorkloadView({
           </div>
           <div className="flex items-center gap-3 text-sm text-theme-text-secondary">
             <span className={clsx('badge', getKindColorOutline(apiKind))}>
-              {formatKindName(apiKind)}
+              {displayKindName(apiKind, resource?.kind)}
             </span>
             {status && (
               <span className={clsx('badge', status.color)}>
@@ -673,13 +762,14 @@ export function WorkloadView({
         </>
       }
       tabs={tabs}
-      activeTab={activeTab}
+      activeTab={effectiveTab}
       onTabChange={handleSetTab}
       scopeControls={scopeControls}
       tabStripEnd={<ResourceActionsBar resource={selectedResource} data={resource} hideLogs {...actionsBarProps} />}
       overlay={saveSuccess ? <SaveSuccessAnimation /> : null}
+      compactHeader={compactHeader}
     >
-        {activeTab === 'overview' && (
+        {effectiveTab === 'overview' && (
             <InfoTab
               resource={resource}
               selectedResource={selectedResource}
@@ -695,15 +785,32 @@ export function WorkloadView({
               onSwitchToTimeline={() => handleSetTab('timeline')}
               rendererOverrides={rendererOverrides}
               resolvedEnvFrom={resolvedEnvFrom}
-              events={resourceFocusedK8sEvents}
-              eventsLoading={resourceFocusedEventsLoading}
+              events={overviewEvents}
+              eventsLoading={overviewEventsLoading}
               updates={resourceFocusedUpdates}
-              eventsError={resourceFocusedK8sError}
+              eventsError={overviewEventsError}
               updatesError={resourceFocusedUpdatesError}
               extraContent={renderOverviewExtra && renderOverviewExtra({ kind, namespace, name })}
             />
         )}
-        {activeTab === 'timeline' && (
+        {effectiveTab === 'topology' && (
+          <div className="relative h-full min-h-0 w-full">
+            {topology ? (
+              <TopologyGraph
+                topology={neighborhood}
+                viewMode="resources"
+                groupingMode="namespace"
+                hideGroupHeader
+                onNodeClick={handleTopologyNodeClick}
+                showExportButton={false}
+                focusNodeId={neighborhoodFocusId}
+              />
+            ) : (
+              <PaneLoader label="Loading topology…" className="absolute inset-0" />
+            )}
+          </div>
+        )}
+        {effectiveTab === 'timeline' && (
           <EventsTab
             events={resourceEvents}
             resourceLanes={resourceLanes}
@@ -716,7 +823,7 @@ export function WorkloadView({
             onSelectEvent={setSelectedEventId}
           />
         )}
-        {activeTab === 'logs' && renderLogsTab && (
+        {effectiveTab === 'logs' && renderLogsTab && (
           renderLogsTab({
             kind,
             apiKind,
@@ -730,29 +837,56 @@ export function WorkloadView({
             onConsumeInitialContainer: () => setInitialContainer(null),
           })
         )}
-        {activeTab === 'metrics' && renderMetricsTab && (
+        {effectiveTab === 'metrics' && renderMetricsTab && (
           <div className="h-full overflow-auto p-4">
             {renderMetricsTab({ kind: resource?.kind || kind, namespace, name })}
           </div>
         )}
-        {activeTab === 'yaml' && (
-          <div className="h-full overflow-auto">
-            {!resource ? (
-              <FetchResult loading={resourceLoading} error={resourceError} className="h-32" />
-            ) : (
-              <EditableYamlView
-                resource={selectedResource}
-                data={resource}
-                onCopy={(text) => copyToClipboard(text, 'yaml')}
-                copied={copied === 'yaml'}
-                onSaved={handleSaved}
-                onSave={onUpdateResource}
-                isSaving={isUpdatingResource}
-                saveError={updateResourceError}
-                onDuplicate={onDuplicate}
-                onDownload={onDownload}
-              />
+        {effectiveTab === 'yaml' && (
+          <div className="flex h-full min-h-0">
+            {renderRelatedYaml && yamlObjects.length > 1 && (
+              <div className="flex w-56 shrink-0 flex-col gap-0.5 overflow-y-auto border-r border-theme-border bg-theme-base px-2 py-2">
+                <div className="px-1.5 pb-1 pt-0.5 text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary">Objects</div>
+                {yamlObjects.map((o) => {
+                  const active = o.primary ? yamlObjectId === null : yamlObjectId === o.id
+                  return (
+                    <button
+                      key={o.id}
+                      type="button"
+                      onClick={() => setYamlObjectId(o.primary ? null : o.id)}
+                      className={clsx(
+                        'flex w-full flex-col rounded-md px-1.5 py-1.5 text-left transition-colors',
+                        active ? 'selection selection-ring' : 'hover:bg-theme-hover',
+                      )}
+                    >
+                      <span className="truncate text-xs font-medium text-theme-text-primary">{midTruncate(o.name, 26)}</span>
+                      <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary">{o.kind}</span>
+                    </button>
+                  )
+                })}
+              </div>
             )}
+            <div className="h-full min-w-0 flex-1 overflow-auto">
+              {yamlObject && !yamlObject.primary && renderRelatedYaml ? (
+                renderRelatedYaml(yamlObject)
+              ) : !resource ? (
+                <FetchResult loading={resourceLoading} error={resourceError} className="h-32" />
+              ) : (
+                <EditableYamlView
+                  resource={selectedResource}
+                  data={resource}
+                  onCopy={(text) => copyToClipboard(text, 'yaml')}
+                  copied={copied === 'yaml'}
+                  readOnly={readOnlyYaml}
+                  onSaved={handleSaved}
+                  onSave={onUpdateResource}
+                  isSaving={isUpdatingResource}
+                  saveError={updateResourceError}
+                  onDuplicate={onDuplicate}
+                  onDownload={onDownload}
+                />
+              )}
+            </div>
           </div>
         )}
     </DetailShell>
@@ -1240,7 +1374,7 @@ function InfoTab({
             onClick={onSwitchToTimeline}
             className="text-xs text-theme-text-tertiary hover:text-theme-text-secondary transition-colors"
           >
-            These are events for this resource only. Switch to the <span className="underline">Timeline</span> tab to see events across all related resources.
+            Showing recent events across this workload. Switch to the <span className="underline">Timeline</span> tab for full history and resource relationships.
           </button>
         )}
         renderSidebar={(sidebarSections) => (

package/src/components/workload/index.ts

@@ -1,2 +1,2 @@
-export { WorkloadView } from './WorkloadView'
+export { WorkloadView, type WorkloadTabType } from './WorkloadView'
 export { ResourceDetailDrawer } from './ResourceDetailDrawer'

package/src/hooks/useKeyboardShortcuts.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 
-export type ShortcutScope = 'global' | 'topology' | 'resources' | 'timeline' | 'helm' | 'gitops' | 'traffic' | 'drawer'
+export type ShortcutScope = 'global' | 'topology' | 'resources' | 'timeline' | 'helm' | 'gitops' | 'traffic' | 'applications' | 'audit' | 'drawer'
 
 // Scope priority: higher number = higher priority (wins when multiple scopes active)
 const SCOPE_PRIORITY: Record<ShortcutScope, number> = {
@@ -11,6 +11,8 @@ const SCOPE_PRIORITY: Record<ShortcutScope, number> = {
   helm: 1,
   gitops: 1,
   traffic: 1,
+  applications: 1,
+  audit: 1,
   drawer: 2,
 }
 

package/src/index.ts

@@ -53,6 +53,10 @@ export * from './components/issues'
 // Cluster switcher (shared trigger+dropdown for OSS Radar and Radar Hub)
 export * from './components/cluster-switcher'
 
+// Applications (shared host-agnostic list + detail shell for the deployable-
+// software surface; OSS renders single-cluster, Cloud adds the fleet layer)
+export * from './components/applications'
+
 // Compare (ResourceCompareView, CompareResourcePicker, normalize utilities)
 export * from './components/compare'
 

package/src/utils/applications.test.ts

@@ -0,0 +1,207 @@
+import { describe, it, expect } from 'vitest'
+import { compareVersions, appGroupLagMessage, matchWorkloadAcrossInstances, foldAppGroups, identityEnvInferred, type AppGroupFoldEntry } from './applications'
+
+describe('compareVersions', () => {
+  it('orders semver', () => {
+    expect(compareVersions('1.2.0', '1.10.0')).toBe(-1)
+    expect(compareVersions('v2.0.0', 'v2.0.0')).toBe(0)
+  })
+
+  // Date-stamped CI tags are the dominant shape on real clusters
+  // (main_2026-03-26_05) — semver-only made promotion lag inert on them.
+  it('orders same-prefix date-stamped tags by date then sequence', () => {
+    expect(compareVersions('main_2026-03-26_05', 'main_2026-06-02_03')).toBe(-1)
+    expect(compareVersions('main_2026-06-02_03', 'main_2026-06-02_01')).toBe(1)
+    expect(compareVersions('main_2026-06-02_03', 'main_2026-06-02_03')).toBe(0)
+  })
+
+  it('refuses date tags with different prefixes', () => {
+    expect(compareVersions('main_2026-06-02_03', 'hotfix_2026-06-02_03')).toBeNull()
+    expect(compareVersions('billing_main_2026-05-18_00', 'project-infra_main_2026-06-05_01')).toBeNull()
+  })
+
+  it('refuses mixed date-tag vs non-date and unparseable input', () => {
+    expect(compareVersions('main_2026-06-02_03', '1.2.0')).toBeNull()
+    expect(compareVersions('latest', 'abc123')).toBeNull()
+    expect(compareVersions(undefined, '1.0.0')).toBeNull()
+  })
+
+  it('handles long compound prefixes as one prefix', () => {
+    expect(compareVersions('billing_main_2026-05-18_00', 'billing_main_2026-06-05_01')).toBe(-1)
+  })
+})
+
+// The lag arrow is the trust-fatal output: direction, unranked exclusion, and
+// same-env refusal each have a distinct silent-inversion failure mode.
+describe('appGroupLagMessage', () => {
+  it('fires when a strictly-lower env runs a strictly-newer version, with correct direction', () => {
+    expect(appGroupLagMessage([
+      { env: 'dev', version: '2.0.0' },
+      { env: 'staging', version: '1.0.0' },
+    ])).toBe('staging is behind dev')
+  })
+
+  it('does not fire when the higher env is newer (healthy promotion)', () => {
+    expect(appGroupLagMessage([
+      { env: 'dev', version: '1.0.0' },
+      { env: 'staging', version: '2.0.0' },
+    ])).toBeNull()
+  })
+
+  it('never draws arrows through unranked (discovered) envs', () => {
+    expect(appGroupLagMessage([
+      { env: 'qa', version: '9.0.0' },
+      { env: 'prod', version: '1.0.0' },
+    ])).toBeNull()
+  })
+
+  it('never compares two instances of the same env', () => {
+    expect(appGroupLagMessage([
+      { env: 'prod', version: '2.0.0' },
+      { env: 'prod', version: '1.0.0' },
+    ])).toBeNull()
+  })
+
+  it('treats missing or incomparable versions as no signal', () => {
+    expect(appGroupLagMessage([{ env: 'dev' }, { env: 'prod', version: '1.0.0' }])).toBeNull()
+    expect(appGroupLagMessage([
+      { env: 'dev', version: 'latest' },
+      { env: 'prod', version: '1.0.0' },
+    ])).toBeNull()
+  })
+
+  it('orders date-stamped CI tags through the ladder', () => {
+    expect(appGroupLagMessage([
+      { env: 'dev', version: 'main_2026-06-07_02' },
+      { env: 'staging', version: 'main_2026-03-26_05' },
+    ])).toBe('staging is behind dev')
+  })
+})
+
+describe('identityEnvInferred', () => {
+  it('marks only namespace-derived identity envs as inferred', () => {
+    expect(identityEnvInferred({ key: 'billing', env: 'staging', confidence: 'medium', evidence: 'namespace stem "billing" + shared image repo repo/app' })).toBe(true)
+    expect(identityEnvInferred({ key: 'billing', env: 'staging', confidence: 'medium', evidence: 'name stem "billing" + shared image repo repo/app' })).toBe(false)
+    expect(identityEnvInferred({ key: 'billing', env: 'staging', confidence: 'medium', evidence: 'environment label "staging" + name/repo evidence' })).toBe(false)
+    expect(identityEnvInferred({ key: 'billing', env: 'staging', confidence: 'high', evidence: 'Argo CD source path billing (env overlay staging)' })).toBe(false)
+  })
+})
+
+// Position-preserving env switch: exact match, stem fallback (suffix, prefix,
+// discovered tokens), and the explicit no-counterpart null.
+describe('matchWorkloadAcrossInstances', () => {
+  const dep = (name: string, namespace = 'staging') => ({ kind: 'Deployment', namespace, name })
+
+  it('prefers the exact kind+name match', () => {
+    expect(matchWorkloadAcrossInstances('Deployment/dev/billing', [dep('billing')])).toEqual(dep('billing'))
+  })
+
+  it('prefers namespace-specific exact matches and refuses ambiguous same-name matches', () => {
+    expect(matchWorkloadAcrossInstances('Deployment/dev/billing', [dep('billing', 'prod'), dep('billing', 'dev')])).toEqual(dep('billing', 'dev'))
+    expect(matchWorkloadAcrossInstances('Deployment/dev/billing', [dep('billing', 'prod'), dep('billing', 'staging')])).toBeNull()
+  })
+
+  it('falls back to the env-affix-stripped stem (suffix and prefix)', () => {
+    expect(matchWorkloadAcrossInstances('Deployment/dev/billing-dev', [dep('billing-staging')])).toEqual(dep('billing-staging'))
+    expect(matchWorkloadAcrossInstances('Deployment/qa/qa-koala', [dep('staging-koala')])).toEqual(dep('staging-koala'))
+  })
+
+  it('strips discovered env tokens passed via extraTokens', () => {
+    const tokens = new Set(['loadtest'])
+    expect(matchWorkloadAcrossInstances('Deployment/team/api-loadtest', [dep('api', 'dev')], tokens)).toEqual(dep('api', 'dev'))
+    expect(matchWorkloadAcrossInstances('Deployment/team/api-loadtest', [dep('api', 'dev')])).toBeNull()
+  })
+
+  it('returns null when no counterpart exists', () => {
+    expect(matchWorkloadAcrossInstances('Deployment/dev/billing', [dep('finops')])).toBeNull()
+    expect(matchWorkloadAcrossInstances('garbage', [dep('billing')])).toBeNull()
+  })
+})
+
+// foldAppGroups pins the collapse experiment's safety rails — each fails
+// silently in a component-embedded loop.
+describe('foldAppGroups', () => {
+  const entry = (key: string, name: string, famEnv?: string, over: Partial<AppGroupFoldEntry> = {}): AppGroupFoldEntry => ({
+    row: { key, name, identity: famEnv ? { key: 'billing', env: famEnv, confidence: 'medium', evidence: 'e' } : undefined },
+    health: 'healthy',
+    versions: [],
+    ready: 1,
+    desired: 1,
+    kinds: { Deployment: 1 },
+    classComposition: [{ cls: 'service', count: 1 }],
+    ...over,
+  })
+
+  it('folds app group members into one ladder row with instances hidden by default', () => {
+    const rows = foldAppGroups([entry('a', 'billing', 'dev'), entry('b', 'billing-staging', 'staging'), entry('c', 'lonely')], new Set(), false)
+    expect(rows.map((r) => r.kind)).toEqual(['group', 'instance'])
+    const group = rows[0] as Extract<(typeof rows)[0], { kind: 'group' }>
+    expect(group.label).toBe('billing')
+    expect(group.cells.map((c) => c.env)).toEqual(['dev', 'staging'])
+    expect(group.ready).toBe(2)
+  })
+
+  it('renders a filter-orphaned member as the plain instance it is', () => {
+    const rows = foldAppGroups([entry('a', 'billing', 'dev')], new Set(), false)
+    expect(rows).toEqual([{ kind: 'instance', entry: entry('a', 'billing', 'dev') }])
+  })
+
+  it('search auto-expansion emits the member rows', () => {
+    const rows = foldAppGroups([entry('a', 'billing', 'dev'), entry('b', 'billing-staging', 'staging')], new Set(), true)
+    expect(rows.map((r) => r.kind)).toEqual(['group', 'instance', 'instance'])
+    expect(rows.filter((r) => r.kind === 'instance').every((r) => (r as { child?: boolean }).child)).toBe(true)
+  })
+
+  it('aggregates same-env instances into one cell: count, worst health, newest version', () => {
+    const rows = foldAppGroups(
+      [
+        entry('a', 'billing', 'staging', { versions: ['1.0.0'], health: 'healthy' }),
+        entry('b', 'billing-2', 'staging', { versions: ['2.0.0'], health: 'unhealthy' }),
+        entry('c', 'billing-dev', 'dev'),
+      ],
+      new Set(),
+      false,
+    )
+    const group = rows[0] as Extract<(typeof rows)[0], { kind: 'group' }>
+    const staging = group.cells.find((c) => c.env === 'staging')!
+    expect(staging.count).toBe(2)
+    expect(staging.health).toBe('unhealthy')
+    expect(staging.version).toBe('2.0.0')
+  })
+
+  it('derives the group workload class like the server: service+worker collapses, jobs make mixed', () => {
+    const mk = (cls: 'service' | 'worker' | 'job', key: string, env: string) =>
+      entry(key, key, env, { classComposition: [{ cls, count: 1 }] })
+    const sw = foldAppGroups([mk('service', 'a', 'dev'), mk('worker', 'b', 'staging')], new Set(), false)
+    expect((sw[0] as { workloadClass?: string }).workloadClass).toBe('service')
+    const sj = foldAppGroups([mk('service', 'a', 'dev'), mk('job', 'b', 'staging')], new Set(), false)
+    expect((sj[0] as { workloadClass?: string }).workloadClass).toBe('mixed')
+  })
+
+  it('scopes non-portable identities but folds portable identities across scopes', () => {
+    const portable = (key: string, name: string, env: string): AppGroupFoldEntry => ({
+      ...entry(key, name, env),
+      row: { key, name, identity: { key: 'billing', env, confidence: 'high', evidence: 'e', portable: true } },
+    })
+
+    const oss = foldAppGroups(
+      [portable('a', 'billing', 'dev'), entry('b', 'billing-staging', 'staging')],
+      new Set(),
+      false,
+    )
+    expect(oss.map((r) => r.kind)).toEqual(['group'])
+
+    const local = foldAppGroups(
+      [entry('a', 'billing', 'dev'), entry('b', 'billing-staging', 'staging')],
+      new Set(),
+      false,
+      { localScope: (e) => e.row.key },
+    )
+    expect(local.map((r) => r.kind)).toEqual(['instance', 'instance'])
+
+    const grouped = foldAppGroups([portable('a', 'billing', 'dev'), portable('b', 'billing-staging', 'staging')], new Set(), false, {
+      localScope: (e) => e.row.key,
+    })
+    expect(grouped.map((r) => r.kind)).toEqual(['group'])
+  })
+})