@skyhook-io/k8s-ui 1.8.6 → 1.8.8

package/src/index.ts

@@ -53,6 +53,14 @@ export * from './components/issues'
 // Cluster switcher (shared trigger+dropdown for OSS Radar and Radar Hub)
 export * from './components/cluster-switcher'
 
+// Namespace picker (shared scope-filter trigger+dropdown for OSS Radar and
+// Radar Hub — pure presentation, data injected via props)
+export * from './components/namespace-switcher'
+
+// Scope pill — the shared bordered shell that groups the cluster + namespace
+// segments into one unit (OSS header + Radar Hub cluster top bar)
+export * from './components/scope-pill'
+
 // 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'

package/src/types/core.ts

@@ -193,7 +193,7 @@ export function displayKind(kind: string): string {
   return shortNames[kind] || kind
 }
 
-export type HealthStatus = 'healthy' | 'degraded' | 'unhealthy' | 'unknown'
+export type HealthStatus = 'healthy' | 'degraded' | 'unhealthy' | 'neutral' | 'unknown'
 
 export type EdgeType = 'routes-to' | 'exposes' | 'manages' | 'uses' | 'configures' | 'protects'
 
@@ -557,7 +557,7 @@ export interface HelmRelease {
   lastOperation?: HelmOperation
   operations?: HelmOperation[]
   // Health summary from owned resources
-  resourceHealth?: 'healthy' | 'degraded' | 'unhealthy' | 'unknown'
+  resourceHealth?: 'healthy' | 'degraded' | 'unhealthy' | 'neutral' | 'unknown'
   healthIssue?: string    // Primary issue if unhealthy (e.g., "OOMKilled")
   healthSummary?: string  // Brief summary like "2/3 pods ready"
   // When set, this release was installed by Flux's helm-controller — the
@@ -587,6 +587,7 @@ export interface HelmOperation {
   source: HelmOperationSource
   confidence: HelmOperationConfidence
   message: string
+  rawMessage?: string
   evidence?: string
   failureDescription?: string
   revision?: number
@@ -597,6 +598,22 @@ export interface HelmOperation {
   updated?: string
 }
 
+export type HelmOperationInsightState = 'active' | 'recovered'
+
+export interface HelmSuggestedCompare {
+  revision1: number
+  revision2: number
+  reason?: string
+}
+
+export interface HelmOperationInsight {
+  state: HelmOperationInsightState
+  primaryResource?: HelmOwnedResource
+  relatedResources?: HelmOwnedResource[]
+  signalCount?: number
+  suggestedCompare?: HelmSuggestedCompare
+}
+
 export interface HelmReleaseDetail {
   name: string
   namespace: string
@@ -612,14 +629,16 @@ export interface HelmReleaseDetail {
   notes: string
   history: HelmRevision[]
   resources: HelmOwnedResource[]
-  resourceHealth?: 'healthy' | 'degraded' | 'unhealthy' | 'unknown'
+  resourceHealth?: 'healthy' | 'degraded' | 'unhealthy' | 'neutral' | 'unknown'
   healthIssue?: string
   healthSummary?: string
   hooks?: HelmHook[]
+  hookDiagnostics?: HookDiagnostic[]
   readme?: string
   dependencies?: ChartDependency[]
   lastOperation?: HelmOperation
   operations?: HelmOperation[]
+  operationInsight?: HelmOperationInsight
   // When set, this release was installed by Flux's helm-controller — see
   // HelmRelease.managedByFluxHelmRelease for context. Format: "namespace/name".
   managedByFluxHelmRelease?: string
@@ -627,10 +646,79 @@ export interface HelmReleaseDetail {
 
 export interface HelmHook {
   name: string
+  namespace?: string
   kind: string
+  path?: string
+  manifestChanged?: boolean
   events: string[]
   weight: number
   status?: string
+  startedAt?: string
+  completedAt?: string
+  deletePolicies?: string[]
+  outputLogPolicies?: string[]
+}
+
+export interface HookDiagnostic {
+  name: string
+  namespace?: string
+  kind: string
+  events?: string[]
+  phase: string
+  message: string
+  evidence?: HookEvidence
+  evidenceUnavailable?: boolean
+  evidenceUnavailableReason?: string
+}
+
+export interface HookEvidence {
+  summary?: string
+  jobs?: HookJobEvidence[]
+  pods?: HookPodEvidence[]
+  events?: HookEventEvidence[]
+  logs?: HookLogEvidence[]
+  errors?: string[]
+}
+
+export interface HookJobEvidence {
+  name: string
+  namespace?: string
+  status?: string
+  active?: number
+  succeeded?: number
+  failed?: number
+  conditions?: string[]
+}
+
+export interface HookPodEvidence {
+  name: string
+  namespace?: string
+  phase?: string
+  ready?: string
+  restartCount?: number
+  reason?: string
+  message?: string
+}
+
+export interface HookEventEvidence {
+  involvedKind: string
+  involvedName: string
+  type?: string
+  reason?: string
+  message?: string
+  count?: number
+  lastSeen?: string
+}
+
+export interface HookLogEvidence {
+  pod: string
+  container: string
+  previous?: boolean
+  lines?: string[]
+  totalLines?: number
+  matchedLines?: number
+  fallback?: boolean
+  error?: string
 }
 
 export interface ChartDependency {
@@ -658,12 +746,63 @@ export interface HelmValues {
   computed?: Record<string, unknown>
 }
 
+export interface ValuesDiff {
+  revision1: number
+  revision2: number
+  allValues: boolean
+  diff: string
+}
+
 export interface ManifestDiff {
   revision1: number
   revision2: number
   diff: string
 }
 
+export interface NotesDiff {
+  revision1: number
+  revision2: number
+  diff: string
+}
+
+export interface HooksDiff {
+  revision1: number
+  revision2: number
+  added: HelmHook[]
+  removed: HelmHook[]
+  modified: HelmHook[]
+  unchanged: HelmHook[]
+}
+
+export interface HelmResourceRef {
+  kind: string
+  apiVersion?: string
+  name: string
+  namespace: string
+}
+
+export interface HelmResourceFieldChange {
+  path: string
+  oldValue: unknown
+  newValue: unknown
+}
+
+export interface HelmResourceChange extends HelmResourceRef {
+  summary?: string
+  fieldCount: number
+  fields: HelmResourceFieldChange[]
+}
+
+export interface ResourceDiff {
+  revision1: number
+  revision2: number
+  added: HelmResourceRef[]
+  removed: HelmResourceRef[]
+  modified: HelmResourceChange[]
+  unchanged: HelmResourceRef[]
+  parseErrorCount?: number
+}
+
 // Selected Helm release (for drawer state)
 export interface SelectedHelmRelease {
   namespace: string

package/src/types/gitops-insights.ts

@@ -45,6 +45,7 @@ export interface GitOpsInsightSummary {
   // Latest operation status message — surfaced inline in the status strip
   // when an operation is in flight or just failed.
   operationMessage?: string
+  rawOperationMessage?: string
   source?: string
   targetRevision?: string
   lastRevision?: string
@@ -79,6 +80,7 @@ export interface GitOpsIssue {
   scope: GitOpsScope
   reason: string
   message: string
+  rawMessage?: string
   refs?: GitOpsInsightRef[]
   action?: string
   // Plain-English root cause when the message matched a recognized error
@@ -112,6 +114,7 @@ export interface GitOpsChange {
   // Per-resource sync failure message (Argo's status.resources[].syncResult).
   // Distinct from `message` (live health). Empty when sync succeeded.
   syncError?: string
+  rawSyncError?: string
   // Sync hook phase: PreSync / PostSync / SyncFail / PostDelete. Empty
   // for non-hook resources.
   hookPhase?: string
@@ -175,6 +178,7 @@ export interface GitOpsHistoryItem {
   deployedAt?: string
   phase?: string
   message?: string
+  rawMessage?: string
   source?: string
   initiatedBy?: string
 }

package/src/utils/animation.ts

@@ -22,6 +22,16 @@ export const DURATION_DOCK = 150
 /** Toast exit animation */
 export const DURATION_TOAST_EXIT = 200
 
+/** Drawer ↔ fullscreen expand/collapse morph. Longer than DURATION_NORMAL so a
+ *  large width change advances in small per-frame steps (reads as fluid, not
+ *  abrupt). Drives the frame width, the content crossfade, and the JS window
+ *  together — keep them in lockstep. */
+export const DURATION_DRAWER_MORPH = 260
+/** Decelerate curve — fast start, gentle settle. Reads as snappy/responsive (the
+ *  earlier ease-in-out's slow start felt sluggish). Safe now that the pinned-layer
+ *  crossfade fixed the reflow that originally needed the gentle start. */
+export const EASE_DRAWER_MORPH = 'cubic-bezier(0.2, 0.8, 0.2, 1)'
+
 // -- Tailwind class presets ---------------------------------------------------
 // Reusable class fragments — import and spread into clsx() calls.
 

package/src/utils/applications.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { compareVersions, appGroupingExplainer, APP_IDENTITY_ANNOTATION, appGroupLagMessage, matchWorkloadAcrossInstances, foldAppGroups, identityEnvInferred, type AppGroupFoldEntry } from './applications'
+import { compareVersions, appGroupingExplainer, APP_IDENTITY_ANNOTATION, appGroupLagMessage, matchWorkloadAcrossInstances, foldAppGroups, identityEnvInferred, worstHealth, type AppGroupFoldEntry } from './applications'
 
 describe('compareVersions', () => {
   it('orders semver', () => {
@@ -206,6 +206,60 @@ describe('foldAppGroups', () => {
   })
 })
 
+describe('worstHealth', () => {
+  // Mirrors pkg/health.WorseOf: unhealthy > degraded > unknown > healthy > neutral,
+  // with neutral as the most-benign identity. Regression for the rank-inversion
+  // fix — seeding the fold with `unknown` (now rank 2) made all-healthy/all-idle
+  // sets wrongly return `unknown`.
+  it('all-healthy stays healthy (not unknown)', () => {
+    expect(worstHealth(['healthy', 'healthy'])).toBe('healthy')
+  })
+  it('all-neutral stays neutral', () => {
+    expect(worstHealth(['neutral', 'neutral'])).toBe('neutral')
+  })
+  it('healthy + neutral resolves to healthy (healthy out-ranks idle)', () => {
+    expect(worstHealth(['healthy', 'neutral'])).toBe('healthy')
+    expect(worstHealth(['neutral', 'healthy'])).toBe('healthy')
+  })
+  it('unknown out-ranks healthy (a node-lost workload is worse than a running one)', () => {
+    expect(worstHealth(['unknown', 'healthy'])).toBe('unknown')
+  })
+  it('unhealthy dominates everything', () => {
+    expect(worstHealth(['unhealthy', 'degraded', 'unknown', 'healthy', 'neutral'])).toBe('unhealthy')
+  })
+  it('empty set is the most-benign identity', () => {
+    expect(worstHealth([])).toBe('neutral')
+  })
+})
+
+describe('foldAppGroups health rollup', () => {
+  const grp = (env: string, health: string): AppGroupFoldEntry => ({
+    row: { key: `k-${env}`, name: `billing-${env}`, identity: { key: 'billing', env, confidence: 'medium', evidence: 'e' } },
+    health: health as AppGroupFoldEntry['health'],
+    versions: [],
+    ready: 1,
+    desired: 1,
+    kinds: { Deployment: 1 },
+    classComposition: [{ cls: 'service', count: 1 }],
+  })
+  const rollup = (...hs: string[]) => {
+    const rows = foldAppGroups(hs.map((h, i) => grp(`env${i}`, h)), new Set(), false)
+    return (rows[0] as Extract<(typeof rows)[0], { kind: 'group' }>).health
+  }
+  it('all-healthy group rolls up healthy (regression: was unknown)', () => {
+    expect(rollup('healthy', 'healthy')).toBe('healthy')
+  })
+  it('all-idle group rolls up neutral (Idle), not green', () => {
+    expect(rollup('neutral', 'neutral')).toBe('neutral')
+  })
+  it('mixed healthy + idle reads healthy', () => {
+    expect(rollup('healthy', 'neutral')).toBe('healthy')
+  })
+  it('healthy + unknown reads unknown (node-lost dominates)', () => {
+    expect(rollup('healthy', 'unknown')).toBe('unknown')
+  })
+})
+
 describe('appGroupingExplainer', () => {
   it('declared origins fold across clusters with no fix needed', () => {
     for (const source of ['explicit', 'argo-path', 'argo-appset', 'flux-source']) {

package/src/utils/applications.ts

@@ -6,7 +6,7 @@
 // (internal/server/applications.go). Field names match the Go json tags.
 
 export type AppWorkloadClass = 'service' | 'worker' | 'job' | 'mixed' | 'unknown'
-export type AppHealth = 'healthy' | 'degraded' | 'unhealthy' | 'unknown'
+export type AppHealth = 'healthy' | 'degraded' | 'unhealthy' | 'neutral' | 'unknown'
 
 export interface AppWorkload {
   kind: string
@@ -582,7 +582,9 @@ export function foldAppGroups<T extends AppGroupFoldEntry>(
     const compMap = new Map<AppWorkloadClass, number>()
     let ready = 0
     let desired = 0
-    let health: AppHealth = 'unknown'
+    // Seed with the most-benign tier (rank 0) so the max-fold below has a valid
+    // identity now that `unknown` ranks above healthy — see worstHealth.
+    let health: AppHealth = 'neutral'
     for (const m of members) {
       const v = newest(m)
       // A fleet member spans several per-cluster envs; the host supplies them so
@@ -640,7 +642,9 @@ export function foldAppGroups<T extends AppGroupFoldEntry>(
 /** Normalize a wire health string to the AppHealth union (the health twin of
  *  workloadClassOf — keeps `as AppHealth` casts out of components). */
 export function healthOf(value: string | undefined): AppHealth {
-  return value === 'unhealthy' || value === 'degraded' || value === 'healthy' ? value : 'unknown'
+  return value === 'unhealthy' || value === 'degraded' || value === 'healthy' || value === 'neutral'
+    ? value
+    : 'unknown'
 }
 
 // -----------------------------------------------------------------------------
@@ -648,8 +652,16 @@ export function healthOf(value: string | undefined): AppHealth {
 // pale-pastel pills (which have no theme token) for the colored tiers.
 // -----------------------------------------------------------------------------
 
-export const HEALTH_ORDER: AppHealth[] = ['unhealthy', 'degraded', 'healthy', 'unknown']
-export const HEALTH_RANK: Record<string, number> = { unhealthy: 3, degraded: 2, healthy: 1, unknown: 0 }
+// Worst-first display + aggregation order. Mirrors the backend's
+// `pkg/health` Rank ordering (unhealthy > degraded > unknown > healthy ≈ neutral)
+// so the app rollup agrees with every other surface. `unknown` ranks ABOVE
+// healthy (a node-lost workload is worse than a running one); `neutral`
+// (intentional/idle) is the most-benign tier, so an all-idle app rolls up to
+// "Idle" while a mixed healthy+idle app still reads Healthy (healthy out-ranks
+// neutral in the max). NOTE: the previous map inverted this — it ranked
+// `unknown: 0` below `healthy`, disagreeing with the backend rollup.
+export const HEALTH_ORDER: AppHealth[] = ['unhealthy', 'degraded', 'unknown', 'healthy', 'neutral']
+export const HEALTH_RANK: Record<string, number> = { unhealthy: 4, degraded: 3, unknown: 2, healthy: 1, neutral: 0 }
 
 export interface HealthMeta {
   label: string
@@ -670,6 +682,7 @@ export const CHIP_TONE = {
   amber: 'bg-amber-50 text-amber-700 ring-amber-200 dark:bg-amber-950/40 dark:text-amber-300 dark:ring-amber-900',
   emerald: 'bg-emerald-50 text-emerald-700 ring-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-300 dark:ring-emerald-900',
   blue: 'bg-blue-50 text-blue-700 ring-blue-200 dark:bg-blue-950/40 dark:text-blue-300 dark:ring-blue-900',
+  sky: 'bg-sky-50 text-sky-700 ring-sky-200 dark:bg-sky-950/40 dark:text-sky-300 dark:ring-sky-900',
   violet: 'bg-violet-50 text-violet-700 ring-violet-200 dark:bg-violet-950/40 dark:text-violet-300 dark:ring-violet-900',
   neutral: 'bg-theme-hover text-theme-text-secondary ring-theme-border',
   muted: 'bg-theme-hover text-theme-text-tertiary ring-theme-border',
@@ -679,6 +692,9 @@ export const HEALTH_META: Record<AppHealth, HealthMeta> = {
   unhealthy: { label: 'Down', bar: 'bg-rose-500', text: 'text-rose-600 dark:text-rose-400', pill: CHIP_TONE.rose },
   degraded: { label: 'Degraded', bar: 'bg-amber-500', text: 'text-amber-600 dark:text-amber-400', pill: CHIP_TONE.amber },
   healthy: { label: 'Healthy', bar: 'bg-emerald-500', text: 'text-emerald-600 dark:text-emerald-400', pill: CHIP_TONE.emerald },
+  // neutral = intentionally idle/off (every workload suspended or scaled to 0).
+  // Sky, calm — not "Healthy" (it isn't serving) and not a problem to act on.
+  neutral: { label: 'Idle', bar: 'bg-sky-500', text: 'text-sky-600 dark:text-sky-400', pill: CHIP_TONE.sky },
   unknown: { label: 'Unknown', bar: 'bg-slate-400', text: 'text-theme-text-tertiary', pill: CHIP_TONE.muted },
 }
 
@@ -726,9 +742,14 @@ export function workloadClassOf(value?: AppWorkloadClass): AppWorkloadClass {
   }
 }
 
-/** Worst health across a set of raw health strings. */
+/** Worst health across a set of raw health strings. Seeds with `neutral` — the
+ *  most-benign tier (rank 0) — so it acts as the max-fold identity: any real
+ *  value out-ranks it, an all-neutral set stays neutral, and healthy+neutral
+ *  resolves to healthy. (Seeding with `unknown` would be wrong now that `unknown`
+ *  ranks ABOVE healthy — an all-healthy set would never beat it and return
+ *  `unknown`. Mirrors pkg/health.WorseOf.) */
 export function worstHealth(hs: string[]): AppHealth {
-  let w: AppHealth = 'unknown'
+  let w: AppHealth = 'neutral'
   for (const h of hs) if ((HEALTH_RANK[h] ?? 0) > (HEALTH_RANK[w] ?? 0)) w = h as AppHealth
   return w
 }

package/src/utils/badge-colors.ts

@@ -38,6 +38,10 @@ export const HEALTH_BADGE_COLORS: Record<string, string> = {
   degraded: BADGE_SEVERITY_COLORS.warning,
   alert: BADGE_SEVERITY_COLORS.alert,
   unhealthy: BADGE_SEVERITY_COLORS.error,
+  // neutral = intentional/idle (suspended, scaled-to-0, completed) — sky, calm
+  // and distinct from `unknown` (gray, "can't determine"). Reuses the `info`
+  // sky palette; see `.status-neutral` in theme/components.css.
+  neutral: BADGE_SEVERITY_COLORS.info,
   unknown: BADGE_SEVERITY_COLORS.neutral,
 }
 
@@ -225,6 +229,9 @@ export function healthToSeverity(health: string): Severity {
     case 'error':
     case 'failed':
       return 'error'
+    // health 'neutral' (intentional/idle) renders sky via the `info` palette —
+    // calm, and visually distinct from 'unknown' which falls through to gray.
+    case 'neutral':
     case 'info':
       return 'info'
     default:

package/src/utils/format-freshness.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { formatUpdatedAgo, formatLastUpdatedBucket, msToNextBucket } from './format'
+
+describe('formatUpdatedAgo', () => {
+  it('collapses the first minute to "just now"', () => {
+    expect(formatUpdatedAgo(0)).toBe('just now')
+    expect(formatUpdatedAgo(59_000)).toBe('just now')
+  })
+  it('renders minutes and hours with an "ago" suffix', () => {
+    expect(formatUpdatedAgo(60_000)).toBe('1m ago')
+    expect(formatUpdatedAgo(3_600_000)).toBe('1h ago')
+  })
+  it('collapses anything past a day to "over a day ago"', () => {
+    expect(formatUpdatedAgo(25 * 3_600_000)).toBe('over a day ago')
+  })
+})
+
+describe('formatLastUpdatedBucket', () => {
+  it('buckets by the coarsest unit', () => {
+    expect(formatLastUpdatedBucket(0)).toBe('just now')
+    expect(formatLastUpdatedBucket(60_000)).toBe('1m')
+    expect(formatLastUpdatedBucket(3_600_000)).toBe('1h')
+    expect(formatLastUpdatedBucket(86_400_000)).toBe('1d')
+  })
+})
+
+describe('msToNextBucket', () => {
+  it('schedules the next re-render exactly on the bucket boundary', () => {
+    expect(msToNextBucket(0)).toBe(60_000)
+    expect(msToNextBucket(30_000)).toBe(30_000)
+    // 90s elapsed → 30s until the "2m" bucket flips.
+    expect(msToNextBucket(90_000)).toBe(30_000)
+  })
+})

package/src/utils/format.ts

@@ -192,6 +192,38 @@ export function formatCompactAge(value?: string): string {
   return `${Math.floor(hours / 24)}d`
 }
 
+// Coarse "just now / Xm / Xh / Xd" buckets for freshness labels — finer-grained
+// updates add motion in the periphery without aiding any user decision.
+export function formatLastUpdatedBucket(elapsedMs: number): string {
+  const elapsedSec = Math.max(0, Math.floor(elapsedMs / 1000))
+  if (elapsedSec < 60) return 'just now'
+  const minutes = Math.floor(elapsedSec / 60)
+  if (minutes < 60) return `${minutes}m`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h`
+  return `${Math.floor(hours / 24)}d`
+}
+
+// ms until the bucket produced by formatLastUpdatedBucket would change — lets a
+// ticker re-render exactly on the boundary instead of polling every second.
+export function msToNextBucket(elapsedMs: number): number {
+  const elapsed = Math.max(0, elapsedMs)
+  if (elapsed < 60_000) return 60_000 - elapsed
+  if (elapsed < 3_600_000) return 60_000 - (elapsed % 60_000)
+  if (elapsed < 86_400_000) return 3_600_000 - (elapsed % 3_600_000)
+  return 86_400_000 - (elapsed % 86_400_000)
+}
+
+// Freshness phrasing for "Updated X" indicators: just now / Xm ago / Xh ago /
+// over a day ago. An exact day count is noise for an auto-refresh signal, so
+// anything past 24h collapses to "over a day ago".
+export function formatUpdatedAgo(elapsedMs: number): string {
+  const bucket = formatLastUpdatedBucket(elapsedMs)
+  if (bucket === 'just now') return 'just now'
+  if (bucket.endsWith('d')) return 'over a day ago'
+  return `${bucket} ago`
+}
+
 export function formatRelativeAgeTime(value?: string, fallback = '-'): string {
   if (!value) return fallback
   const time = Date.parse(value)

package/src/utils/resource-hierarchy.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+
+import type { TimelineEvent, Topology } from '../types/core'
+
+import { buildResourceHierarchy } from './resource-hierarchy'
+
+function svcEvent(namespace: string, name: string): TimelineEvent {
+  return {
+    id: `${namespace}/${name}`,
+    timestamp: '2024-01-01T00:00:00.000Z',
+    source: 'informer',
+    kind: 'Service',
+    namespace,
+    name,
+    eventType: 'update',
+  }
+}
+
+function svcNode(namespace: string, name: string, app: string) {
+  return {
+    id: `service/${namespace}/${name}`,
+    data: { apiVersion: 'v1', labels: { 'app.kubernetes.io/name': app } },
+  }
+}
+
+function topo(nodes: ReturnType<typeof svcNode>[]): Topology {
+  return { nodes, edges: [] } as unknown as Topology
+}
+
+describe('buildResourceHierarchy app-label grouping', () => {
+  it('does not merge the same app label across namespaces', () => {
+    const events = [svcEvent('team-a', 'web'), svcEvent('team-b', 'web')]
+    const topology = topo([svcNode('team-a', 'web', 'web'), svcNode('team-b', 'web', 'web')])
+
+    const lanes = buildResourceHierarchy({ events, topology, groupByApp: true })
+
+    expect(lanes).toHaveLength(2)
+    expect(lanes.every((l) => (l.children ?? []).length === 0)).toBe(true)
+    expect(new Set(lanes.map((l) => l.namespace))).toEqual(new Set(['team-a', 'team-b']))
+  })
+
+  it('groups distinct resources sharing an app label within one namespace', () => {
+    const events = [svcEvent('team-a', 'web'), svcEvent('team-a', 'web-edge')]
+    const topology = topo([svcNode('team-a', 'web', 'web'), svcNode('team-a', 'web-edge', 'web')])
+
+    const lanes = buildResourceHierarchy({ events, topology, groupByApp: true })
+
+    expect(lanes).toHaveLength(1)
+    expect(lanes[0].children).toHaveLength(1)
+  })
+})

package/src/utils/resource-hierarchy.ts

@@ -465,17 +465,20 @@ export function buildResourceHierarchy(options: HierarchyOptions): ResourceLane[
       'HTTPProxy', // Contour
     ])
 
-    // Group lanes by app label
+    // Group lanes by app label, scoped to namespace: the same app label in two
+    // namespaces (e.g. the same workload deployed to dev and staging) is two
+    // distinct apps and must not collapse into one lane.
     const appGroups = new Map<string, string[]>()
     for (const [laneId, lane] of laneMap) {
       if (laneParent.has(laneId)) continue
       if (!appLabelEligibleKinds.has(lane.kind)) continue
       const appLabel = laneAppLabels.get(laneId)
       if (!appLabel) continue
-      if (!appGroups.has(appLabel)) {
-        appGroups.set(appLabel, [])
+      const groupKey = `${lane.namespace}/${appLabel}`
+      if (!appGroups.has(groupKey)) {
+        appGroups.set(groupKey, [])
       }
-      appGroups.get(appLabel)!.push(laneId)
+      appGroups.get(groupKey)!.push(laneId)
     }
 
     // For each app group with multiple members, pick the best parent