@skyhook-io/k8s-ui 1.8.4 → 1.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -85,7 +85,7 @@
     "yaml": ">=2.0.0"
   },
   "devDependencies": {
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.0.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@xterm/addon-fit": "^0.11.0",

package/src/components/charts/PrometheusChartsView.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx'
 import { BarChart3, Wifi, WifiOff, Loader2 } from 'lucide-react'
 import { AreaChart } from './AreaChart'
+import { PaneLoader } from '../ui/PaneLoader'
 import { MetricsSummary } from './MetricsSummary'
 import { SeriesLegend } from './SeriesLegend'
 import type { TimeSeries, ReferenceLine } from './types'
@@ -108,10 +109,7 @@ export function PrometheusChartsView({
   if (statusLoading) {
     if (!showEmptyState) return null
     return (
-      <div className="flex items-center justify-center py-12 text-theme-text-tertiary">
-        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-        Checking Prometheus availability...
-      </div>
+      <PaneLoader label="Checking Prometheus availability…" className="py-12" />
     )
   }
 
@@ -181,10 +179,7 @@ export function PrometheusChartsView({
       {/* Chart area */}
       <div className="min-h-[280px] flex-1 p-4">
         {metricsLoading ? (
-          <div className="flex min-h-[240px] items-center justify-center text-theme-text-tertiary">
-            <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-            Loading metrics...
-          </div>
+          <PaneLoader label="Loading metrics…" className="min-h-[240px]" />
         ) : metricsError ? (
           <div className="flex h-full items-center justify-center text-sm text-red-400">
             Failed to load metrics: {(metricsError as Error).message}

package/src/components/gitops/GitOpsDetailLayout.tsx

@@ -1,5 +1,6 @@
 import { useEffect, type ComponentType, type ReactNode } from 'react'
 import { ArrowDownUp, ChevronDown, ChevronRight, Clock3, GitBranch, GitCommit, Loader2, Pause, Play, RefreshCw, Settings, Trash2, XCircle, Zap } from 'lucide-react'
+import { PaneLoader } from '../ui/PaneLoader'
 
 import { HealthStatusBadge, SyncStatusBadge } from './GitOpsStatusBadge'
 import { GitOpsIssuesBand, GitOpsStatusStrip } from './insights'
@@ -487,9 +488,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
       )}
 
       {resourceLoading ? (
-        <div className="flex flex-1 items-center justify-center text-theme-text-secondary">
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Loading GitOps resource…
-        </div>
+        <PaneLoader label="Loading GitOps resource…" className="flex-1" />
       ) : resourceError ? (
         <div className="p-4 text-sm text-red-500">Failed to load resource: {resourceError.message}</div>
       ) : (

package/src/components/gitops/GitOpsTableView.tsx

@@ -12,7 +12,6 @@ import {
   HeartPulse,
   LayoutGrid,
   List,
-  Loader2,
   Pause,
   Play,
   RefreshCw,
@@ -33,6 +32,7 @@ import { FacetSection, FacetButton } from '../ui/Facet'
 import { SortableTh, TH_CLASS, type SortDir } from '../ui/SortableTh'
 import { DistributionBar } from '../ui/DistributionBar'
 import { RowActionMenu, type RowActionItem } from '../ui/RowActionMenu'
+import { PaneLoader } from '../ui/PaneLoader'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { getGitOpsResourceStatus } from './detail-helpers'
 import { isArgoSuspendedByRadar } from '../resources/resource-utils-argo'
@@ -754,9 +754,7 @@ export function GitOpsTableView({
               {modeLabel(mode)} view is queued behind the application list.
             </div>
           ) : loading && filteredRows.length === 0 ? (
-            <div className="flex h-full items-center justify-center text-sm text-theme-text-secondary">
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Loading GitOps applications...
-            </div>
+            <PaneLoader label="Loading GitOps applications…" className="h-full" />
           ) : error ? (
             <div className="p-4 text-sm text-red-500">Failed to load GitOps applications: {error.message}</div>
           ) : filteredRows.length === 0 ? (

package/src/components/gitops/insights/GitOpsInsightViews.tsx

@@ -1,4 +1,5 @@
 import { AlertTriangle, ChevronDown, ChevronRight, CircleAlert, Clock3, GitBranch, GitCommit, Info, Loader2, Plus, Trash2 } from 'lucide-react'
+import { PaneLoader } from '../../ui/PaneLoader'
 import { clsx } from 'clsx'
 import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react'
 import type { GitOpsChange, GitOpsHistoryItem, GitOpsInsight, GitOpsInsightRef, GitOpsIssue, GitOpsPlanItem, GitOpsRemediation, GitOpsResourceTree, GitOpsTreeNode } from '../../../types'
@@ -725,7 +726,7 @@ export function GitOpsChangesView({ insight, error, onOpenResource, focusKey, tr
     return <InsightErrorState error={error} />
   }
   if (!insight) {
-    return <CenteredText>Loading GitOps resources...</CenteredText>
+    return <PaneLoader label="Loading GitOps resources…" className="h-full" />
   }
   // Build plan metadata maps keyed by ref so each Change row can advertise
   // its sync step, hook phase, and wave assignment. The plan and changes
@@ -1274,7 +1275,7 @@ interface GitOpsActivityInsightViewProps {
 
 export function GitOpsActivityInsightView({ insight, error, onRollback }: GitOpsActivityInsightViewProps) {
   if (error && !insight) return <InsightErrorState error={error} />
-  if (!insight) return <CenteredText>Loading GitOps activity...</CenteredText>
+  if (!insight) return <PaneLoader label="Loading GitOps activity…" className="h-full" />
   const canRollback = !!insight.capabilities?.rollback && !!onRollback
   // Auto-sync makes rollback futile — the controller would re-sync to HEAD
   // immediately. Argo's own Web UI disables the button in this state. Detect
@@ -1429,10 +1430,6 @@ function SectionHeader({ icon: Icon, title, hint }: { icon: typeof GitBranch; ti
   )
 }
 
-function CenteredText({ children }: { children: ReactNode }) {
-  return <div className="flex h-full items-center justify-center text-sm text-theme-text-secondary">{children}</div>
-}
-
 // Surfaced when the insights endpoint errors. Without this the subviews
 // would render their "Loading…" placeholder forever, hiding the failure
 // from the user and from the operator looking at logs.

package/src/components/gitops/tree/GitOpsTreeGraph.tsx

@@ -15,7 +15,8 @@ import {
   type NodeTypes,
 } from '@xyflow/react'
 import '@xyflow/react/dist/style.css'
-import { AlertTriangle, ChevronRight, Loader2, Maximize, Search, X } from 'lucide-react'
+import { AlertTriangle, ChevronRight, Maximize, Search, X } from 'lucide-react'
+import { PaneLoader } from '../../ui/PaneLoader'
 import { clsx } from 'clsx'
 
 import type { GitOpsResourceTree, GitOpsTreeNode, GitOpsTreeRef, HealthStatus } from '../../../types'
@@ -127,12 +128,7 @@ function GitOpsTreeGraphInner({
   }, [onNodeClick])
 
   if (loading) {
-    return (
-      <div className="flex h-full items-center justify-center text-theme-text-secondary">
-        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-        Loading GitOps resource tree...
-      </div>
-    )
+    return <PaneLoader label="Loading GitOps resource tree…" className="h-full" />
   }
 
   if (error) {

package/src/components/logs/LogCore.tsx

@@ -796,7 +796,7 @@ export function LogCore({
         <div className={`flex-1 flex items-center justify-center ${palette.textTertiary}`}>
           <div className="flex items-center gap-2">
             <RotateCcw className="w-4 h-4 animate-spin" />
-            <span>Loading logs...</span>
+            <span>Loading logs…</span>
           </div>
         </div>
       ) : errorMessage ? (

package/src/components/resources/ResourcesView.tsx

@@ -2,6 +2,7 @@ import React, { useState, useMemo, useEffect, useCallback, useRef, useContext, u
 import { TableVirtuoso, type TableVirtuosoHandle } from 'react-virtuoso'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
 import { PaneLoader } from '../ui/PaneLoader'
+import { RestrictedState } from '../ui/RestrictedState'
 import type { TopPodMetrics, TopNodeMetrics } from '../../types'
 import {
   Search,
@@ -1840,6 +1841,9 @@ interface ResourcesViewProps {
   // Lightweight counts for sidebar badges (from /api/resource-counts)
   resourceCounts?: Record<string, number>
   resourceForbidden?: string[]
+  /** Per-kind reason a forbidden kind is hidden ("rbac_denied" | "unavailable"),
+   *  keyed by the same count key as resourceForbidden. Drives RestrictedState copy. */
+  resourceReasons?: Record<string, string>
   resourceUnavailable?: string[]
   // Single query for the currently selected kind's full data
   selectedKindQuery?: ResourceQueryResult
@@ -2058,6 +2062,7 @@ export function ResourcesView({
   resourceQueries: resourceQueriesProp,
   resourceCounts: resourceCountsProp,
   resourceForbidden: resourceForbiddenProp,
+  resourceReasons,
   resourceUnavailable: resourceUnavailableProp,
   selectedKindQuery: selectedKindQueryProp,
   largeListGuard,
@@ -3232,7 +3237,6 @@ export function ResourcesView({
   }, [resources])
   const isLoading = selectedQuery?.isLoading ?? true
   const selectedQueryError = selectedQuery?.error
-  const isSelectedForbidden = isForbiddenError(selectedQueryError)
   const refetchFn = selectedQuery?.refetch
   const dataUpdatedAt = selectedQuery?.dataUpdatedAt
 
@@ -3294,6 +3298,23 @@ export function ResourcesView({
     return result
   }, [useNewCountsMode, resourceForbiddenProp, resourcesToCount, resourceQueries])
 
+  // Render the restricted state when EITHER the list query 403s (namespaced
+  // denials) OR the selected kind is in the counts `forbidden` set. Denied
+  // cluster-scoped kinds return 200 with `[]` from the list endpoint, so the
+  // 403 signal alone misses them — they'd fall through to "No <kind> found".
+  const selectedKindCountKey = selectedKind.group
+    ? `${selectedKind.group}/${selectedKind.kind}`
+    : selectedKind.kind
+  // Actual rows win over a stale counts `forbidden` entry: a kind can be marked
+  // forbidden/unavailable in counts (e.g. an informer not yet synced at counts
+  // time) while the list query has since returned data — show the table, not
+  // RestrictedState. A 403 on the list itself never carries rows, so it still
+  // forces the restricted state.
+  const selectedHasRows = Array.isArray(resources) && resources.length > 0
+  const isSelectedForbidden =
+    isForbiddenError(selectedQueryError) ||
+    (!selectedHasRows && forbiddenKinds.has(selectedKindCountKey))
+
   // Reset sort and filters when kind changes (but not when syncing from URL navigation)
   // Track previous kind to skip on mount (where the effect fires but kind hasn't actually changed)
   const prevKindRef = useRef(selectedKind.name)
@@ -4505,10 +4526,18 @@ export function ResourcesView({
           {isLoading ? (
             <PaneLoader className="absolute inset-0" />
           ) : isSelectedForbidden ? (
-            <div className="absolute inset-0 flex flex-col items-center justify-center text-theme-text-tertiary">
-              <Shield className="w-8 h-8 text-amber-400 mb-2" />
-              <p className="text-theme-text-secondary font-medium">Access Restricted</p>
-              <p className="text-sm mt-1">Insufficient permissions to list {selectedKind.kind} resources</p>
+            // overflow-y-auto + min-h-full: centered when the panel is short
+            // (collapsed), scrollable (no top clip) when the RBAC snippet is
+            // expanded on a shorter pane.
+            <div className="absolute inset-0 overflow-y-auto">
+              <div className="min-h-full flex items-center justify-center">
+                <RestrictedState
+                  kindLabel={selectedKind.kind}
+                  group={selectedKind.group}
+                  resource={selectedKind.name}
+                  reason={resourceReasons?.[selectedKindCountKey]}
+                />
+              </div>
             </div>
           ) : largeListGuard ? (
             <div className="absolute inset-0 flex flex-col items-center justify-center text-theme-text-tertiary px-6 text-center">

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

@@ -128,7 +128,7 @@ export function ServiceRenderer({ data, onCopy, copied, endpointSlices, endpoint
       {hasNoSelector && !isExternalName && (
         <Section title="EndpointSlices" icon={Radio}>
           {endpointSlicesLoading ? (
-            <div className="text-sm text-theme-text-tertiary">Loading EndpointSlices...</div>
+            <div className="text-sm text-theme-text-tertiary">Loading EndpointSlices…</div>
           ) : endpointSlices && endpointSlices.length > 0 ? (
             <div className="space-y-2">
               {endpointSlices.map((slice: any) => {

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

@@ -422,7 +422,7 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
 
 function ScalerDiagnosisRow({ entry }: { entry: ScalerDiagnosis }) {
   if (entry.loading) {
-    return <div className="text-xs text-theme-text-tertiary">Loading autoscaler diagnosis...</div>
+    return <div className="text-xs text-theme-text-tertiary">Loading autoscaler diagnosis…</div>
   }
   if (entry.error) {
     return <div className="text-xs text-theme-text-tertiary">Autoscaler diagnosis unavailable</div>

package/src/components/shared/ResourceActionsBar.tsx

@@ -907,7 +907,7 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
         <div className={clsx("p-4 overflow-y-auto", diffRevision ? "max-h-48 shrink-0" : "max-h-80")}>
           {isLoading && (
             <div className="flex items-center justify-center py-8 text-theme-text-secondary text-sm">
-              Loading revisions...
+              Loading revisions…
             </div>
           )}
 

package/src/components/topology/TopologyGraph.tsx

@@ -30,7 +30,7 @@ import { K8sResourceNode } from './K8sResourceNode'
 import { GroupNode } from './GroupNode'
 import { NEUTRAL_OWNER, type WorkloadFocus } from '../../utils/workload-colors'
 import { ownershipOf } from '../../utils/topology-neighborhood'
-import { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, type GroupDisplayLevel } from './layout'
+import { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, isGroupEffectivelyCollapsed, type GroupDisplayLevel } from './layout'
 import type { Topology, TopologyNode, TopologyEdge, ViewMode, GroupingMode } from '../../types'
 import { pluralize } from '../../utils/pluralize'
 import { foldHash } from '../../utils/structure-hash'
@@ -94,7 +94,9 @@ function buildEdges(
   groupingMode: GroupingMode,
   isTrafficView: boolean,
   nodeToGroup?: Map<string, string>,
-  nodeCount?: number
+  nodeCount?: number,
+  groupLevels?: Map<string, GroupDisplayLevel>,
+  smartDefaultActive = false,
 ): Edge[] {
   const edges: Edge[] = []
   const seenEdgeIds = new Set<string>() // O(1) duplicate detection
@@ -117,15 +119,17 @@ function buildEdges(
     let source = edge.source
     let target = edge.target
 
-    // If source is in a collapsed group, point to the group instead
+    // If source is in a collapsed group, point to the group instead. Same
+    // predicate as ELK node placement (isGroupEffectivelyCollapsed) so a
+    // rendered edge never references a member hidden inside a chip.
     const sourceGroup = nodeGroupMap.get(source)
-    if (sourceGroup && collapsedGroups.has(sourceGroup)) {
+    if (sourceGroup && isGroupEffectivelyCollapsed(sourceGroup, collapsedGroups, groupLevels, smartDefaultActive)) {
       source = sourceGroup
     }
 
     // If target is in a collapsed group, point to the group instead
     const targetGroup = nodeGroupMap.get(target)
-    if (targetGroup && collapsedGroups.has(targetGroup)) {
+    if (targetGroup && isGroupEffectivelyCollapsed(targetGroup, collapsedGroups, groupLevels, smartDefaultActive)) {
       target = targetGroup
     }
 
@@ -607,13 +611,20 @@ export function TopologyGraph({
     // Increment version to invalidate any previous in-flight layout
     const thisLayoutVersion = ++layoutVersionRef.current
 
+    // The smart-default chip pass only ever materializes namespace groups, so its
+    // "no-entry group defaults to collapsed" semantics apply only in namespace
+    // mode. Outside it (small clusters, app grouping) a no-entry group stays
+    // expanded — see isGroupEffectivelyCollapsed.
+    const smartDefaultActive = hasAppliedSmartDefaultRef.current && groupingMode === 'namespace'
+
     // Build hierarchical ELK graph
     const { elkGraph, groupMap, nodeToGroup } = buildHierarchicalElkGraph(
       workingNodes,
       workingEdges,
       groupingMode,
       collapsedGroups,
-      groupLevels
+      groupLevels,
+      smartDefaultActive
     )
     groupMapRef.current = groupMap
 
@@ -711,7 +722,9 @@ export function TopologyGraph({
           groupingMode,
           isTrafficView,
           nodeToGroup,
-          nodesWithHandlers.length
+          nodesWithHandlers.length,
+          groupLevels,
+          smartDefaultActive
         )
         setEdges(builtEdges)
       }

package/src/components/topology/layout-elk-graph.test.ts

@@ -0,0 +1,222 @@
+import { describe, it, expect, beforeAll } from 'vitest'
+import { buildHierarchicalElkGraph, applyHierarchicalLayout, buildInterGroupEdges, setLayoutEngine, type GroupDisplayLevel } from './layout'
+import type { TopologyNode, TopologyEdge } from '../../types'
+
+// Collect every id ELK will see as a layoutable shape: top-level children plus
+// the members of expanded groups. An edge endpoint outside this set is exactly
+// what makes ELK throw "Referenced shape does not exist".
+function validEndpointIds(elkGraph: { children: Array<{ id: string; children?: Array<{ id: string }> }> }): Set<string> {
+  const ids = new Set<string>()
+  for (const child of elkGraph.children) {
+    ids.add(child.id)
+    for (const c of child.children ?? []) ids.add(c.id)
+  }
+  return ids
+}
+
+function deployment(ns: string, name: string): TopologyNode {
+  return {
+    id: `deployment/${ns}/${name}`,
+    kind: 'Deployment',
+    name,
+    status: 'healthy',
+    data: { namespace: ns },
+  }
+}
+
+describe('buildHierarchicalElkGraph — collapse predicate consistency', () => {
+  // Reproduces the Resources→Traffic crash: smart-default chipped the namespaces
+  // present at the time (app1), then a view switch surfaced a namespace
+  // (skyhook-gateway) with no groupLevels entry. Node placement hid its members
+  // (treated as collapsed) but the old edge-redirect only fired for groups in
+  // collapsedGroups — leaving an edge pointed at a hidden plain node id.
+  it('redirects edges into a late-arriving (no-level) group so no edge dangles', () => {
+    const nodes: TopologyNode[] = [
+      deployment('app1', 'web'),
+      deployment('skyhook-gateway', 'skyhook-frpc'),
+    ]
+    const edges: TopologyEdge[] = [
+      { id: 'e1', source: 'deployment/app1/web', target: 'deployment/skyhook-gateway/skyhook-frpc', type: 'routes-to' },
+    ]
+
+    // Smart default chipped app1 only; skyhook-gateway appeared later → no entry.
+    const groupLevels = new Map<string, GroupDisplayLevel>([['group-namespace-app1', 'chip']])
+    // collapsedGroups mirrors TopologyGraph: only explicit non-'topology' levels.
+    const collapsedGroups = new Set<string>(['group-namespace-app1'])
+
+    // smartDefaultActive=true: the large-cluster chip pass ran, so the
+    // late-arriving skyhook-gateway defaults to collapsed.
+    const { elkGraph } = buildHierarchicalElkGraph(nodes, edges, 'namespace', collapsedGroups, groupLevels, true)
+
+    const valid = validEndpointIds(elkGraph)
+    for (const edge of elkGraph.edges) {
+      expect(valid.has(edge.sources[0]), `source ${edge.sources[0]} must exist`).toBe(true)
+      expect(valid.has(edge.targets[0]), `target ${edge.targets[0]} must exist`).toBe(true)
+    }
+
+    // The plain hidden member id must never survive as an endpoint.
+    const endpoints = elkGraph.edges.flatMap(e => [...e.sources, ...e.targets])
+    expect(endpoints).not.toContain('deployment/skyhook-gateway/skyhook-frpc')
+    expect(endpoints).toContain('group-namespace-skyhook-gateway')
+  })
+
+  // Without smart-default (small clusters, manual toggles), collapsing one group
+  // must NOT cascade-collapse untouched no-entry groups. app2 has no level entry;
+  // since smartDefaultActive is false it stays expanded and its member renders.
+  it('does not cascade-collapse no-entry groups when smart-default is inactive', () => {
+    const nodes: TopologyNode[] = [
+      deployment('app1', 'web'),
+      deployment('app2', 'api'),
+    ]
+    const edges: TopologyEdge[] = [
+      { id: 'e1', source: 'deployment/app1/web', target: 'deployment/app2/api', type: 'routes-to' },
+    ]
+    // User collapsed only app1; app2 untouched (no entry).
+    const groupLevels = new Map<string, GroupDisplayLevel>([['group-namespace-app1', 'chip']])
+    const collapsedGroups = new Set<string>(['group-namespace-app1'])
+
+    const { elkGraph } = buildHierarchicalElkGraph(nodes, edges, 'namespace', collapsedGroups, groupLevels, false)
+
+    // app2 stays expanded with its member as a child.
+    const app2 = elkGraph.children.find(c => c.id === 'group-namespace-app2')
+    expect(app2?.children?.some(c => c.id === 'deployment/app2/api')).toBe(true)
+
+    // Edge stays valid: app1 redirected to its chip, app2 member kept (it exists).
+    const valid = validEndpointIds(elkGraph)
+    for (const edge of elkGraph.edges) {
+      expect(valid.has(edge.sources[0])).toBe(true)
+      expect(valid.has(edge.targets[0])).toBe(true)
+    }
+    const endpoints = elkGraph.edges.flatMap(e => [...e.sources, ...e.targets])
+    expect(endpoints).toContain('group-namespace-app1')
+    expect(endpoints).toContain('deployment/app2/api')
+  })
+
+  it('keeps edges between expanded groups referencing plain member ids', () => {
+    const nodes: TopologyNode[] = [
+      deployment('app1', 'web'),
+      deployment('app2', 'api'),
+    ]
+    const edges: TopologyEdge[] = [
+      { id: 'e1', source: 'deployment/app1/web', target: 'deployment/app2/api', type: 'routes-to' },
+    ]
+    // Both groups explicitly expanded.
+    const groupLevels = new Map<string, GroupDisplayLevel>([
+      ['group-namespace-app1', 'topology'],
+      ['group-namespace-app2', 'topology'],
+    ])
+
+    const { elkGraph } = buildHierarchicalElkGraph(nodes, edges, 'namespace', new Set(), groupLevels)
+
+    const valid = validEndpointIds(elkGraph)
+    for (const edge of elkGraph.edges) {
+      expect(valid.has(edge.sources[0])).toBe(true)
+      expect(valid.has(edge.targets[0])).toBe(true)
+    }
+    const endpoints = elkGraph.edges.flatMap(e => [...e.sources, ...e.targets])
+    expect(endpoints).toContain('deployment/app1/web')
+    expect(endpoints).toContain('deployment/app2/api')
+  })
+
+  it('produces no dangling endpoints with no grouping', () => {
+    const nodes: TopologyNode[] = [deployment('app1', 'web'), deployment('app1', 'api')]
+    const edges: TopologyEdge[] = [
+      { id: 'e1', source: 'deployment/app1/web', target: 'deployment/app1/api', type: 'routes-to' },
+    ]
+    const { elkGraph } = buildHierarchicalElkGraph(nodes, edges, 'none', new Set(), new Map())
+    const valid = validEndpointIds(elkGraph)
+    for (const edge of elkGraph.edges) {
+      expect(valid.has(edge.sources[0])).toBe(true)
+      expect(valid.has(edge.targets[0])).toBe(true)
+    }
+  })
+})
+
+// Phase-2 meta layout: edges that position groups relative to each other must
+// survive even when both endpoints are already meta nodes (two collapsed chips, or
+// a chip and an ungrouped node). The old branching dropped those, so connected
+// chips weren't pulled together.
+describe('buildInterGroupEdges — meta-graph connectivity', () => {
+  const edge = (id: string, source: string, target: string) => ({ id, sources: [source], targets: [target] })
+
+  it('keeps chip↔chip edges (both endpoints already meta nodes)', () => {
+    const metaIds = new Set(['group-namespace-app1', 'group-namespace-app2'])
+    // Neither endpoint is an expanded-group member, so nodeToGroup is empty.
+    const out = buildInterGroupEdges([edge('e1', 'group-namespace-app1', 'group-namespace-app2')], new Map(), metaIds)
+    expect(out).toHaveLength(1)
+    expect(out[0]).toMatchObject({ sources: ['group-namespace-app1'], targets: ['group-namespace-app2'] })
+  })
+
+  it('keeps chip↔ungrouped edges', () => {
+    const metaIds = new Set(['group-namespace-app1', 'orphan-node'])
+    const out = buildInterGroupEdges([edge('e1', 'group-namespace-app1', 'orphan-node')], new Map(), metaIds)
+    expect(out).toHaveLength(1)
+  })
+
+  it('normalizes expanded-group members to their group', () => {
+    const nodeToGroup = new Map([
+      ['deployment/app1/web', 'group-namespace-app1'],
+      ['deployment/app2/api', 'group-namespace-app2'],
+    ])
+    const metaIds = new Set(['group-namespace-app1', 'group-namespace-app2'])
+    const out = buildInterGroupEdges([edge('e1', 'deployment/app1/web', 'deployment/app2/api')], nodeToGroup, metaIds)
+    expect(out[0]).toMatchObject({ sources: ['group-namespace-app1'], targets: ['group-namespace-app2'] })
+  })
+
+  it('drops intra-group edges and endpoints absent from the meta graph', () => {
+    const nodeToGroup = new Map([
+      ['deployment/app1/web', 'group-namespace-app1'],
+      ['deployment/app1/api', 'group-namespace-app1'],
+    ])
+    const metaIds = new Set(['group-namespace-app1'])
+    // Same group on both ends → intra, skip. And an edge to a non-meta id → skip.
+    const out = buildInterGroupEdges([
+      edge('e1', 'deployment/app1/web', 'deployment/app1/api'),
+      edge('e2', 'group-namespace-app1', 'ghost-node'),
+    ], nodeToGroup, metaIds)
+    expect(out).toHaveLength(0)
+  })
+
+  it('dedupes edges collapsing to the same meta pair', () => {
+    const nodeToGroup = new Map([
+      ['deployment/app1/web', 'group-namespace-app1'],
+      ['deployment/app1/api', 'group-namespace-app1'],
+      ['deployment/app2/x', 'group-namespace-app2'],
+    ])
+    const metaIds = new Set(['group-namespace-app1', 'group-namespace-app2'])
+    const out = buildInterGroupEdges([
+      edge('e1', 'deployment/app1/web', 'deployment/app2/x'),
+      edge('e2', 'deployment/app1/api', 'deployment/app2/x'),
+    ], nodeToGroup, metaIds)
+    expect(out).toHaveLength(1)
+  })
+})
+
+// Render layer: the GroupNode's displayLevel must agree with ELK placement, or a
+// chip renders over its own laid-out children. group.isCollapsed (from the layout
+// engine) is the single source of truth.
+describe('applyHierarchicalLayout — rendered displayLevel matches placement', () => {
+  beforeAll(() => setLayoutEngine('main-thread'))
+
+  const noop = () => {}
+  const callbacks = { onSetLevel: noop, onCardClick: noop }
+
+  it('renders an untouched no-entry group as topology (not chip) on manual collapse', async () => {
+    const nodes: TopologyNode[] = [deployment('app1', 'web'), deployment('app2', 'api')]
+    const edges: TopologyEdge[] = [
+      { id: 'e1', source: 'deployment/app1/web', target: 'deployment/app2/api', type: 'routes-to' },
+    ]
+    // Small cluster, smart-default inactive: user collapsed only app1.
+    const groupLevels = new Map<string, GroupDisplayLevel>([['group-namespace-app1', 'chip']])
+    const collapsedGroups = new Set<string>(['group-namespace-app1'])
+
+    const { elkGraph, groupMap } = buildHierarchicalElkGraph(nodes, edges, 'namespace', collapsedGroups, groupLevels, false)
+    const { nodes: rendered } = await applyHierarchicalLayout(
+      elkGraph, nodes, edges, groupMap, 'namespace', collapsedGroups, callbacks, false, groupLevels,
+    )
+
+    const groupNode = (id: string) => rendered.find(n => n.id === id && n.type === 'group')
+    expect(groupNode('group-namespace-app1')?.data.displayLevel).toBe('chip')
+    expect(groupNode('group-namespace-app2')?.data.displayLevel).toBe('topology')
+  })
+})

package/src/components/topology/layout.ts

@@ -245,19 +245,11 @@ async function runLayoutOnMainThread(
 
   // Phase 2: Build meta-graph and position groups based on inter-group edges
   // (nodeToGroup was built once above).
-  const interGroupEdges: ElkEdge[] = []
-  const seen = new Set<string>()
-  for (const edge of elkGraph.edges) {
-    const sg = nodeToGroup.get(edge.sources[0])
-    const tg = nodeToGroup.get(edge.targets[0])
-    if (sg && tg && sg !== tg) {
-      const key = `${sg}->${tg}`
-      if (!seen.has(key)) { seen.add(key); interGroupEdges.push({ id: `inter-${key}`, sources: [sg], targets: [tg] }) }
-    } else if ((!sg && tg) || (sg && !tg)) {
-      const s = sg || edge.sources[0], t = tg || edge.targets[0], key = `${s}->${t}`
-      if (!seen.has(key)) { seen.add(key); interGroupEdges.push({ id: `inter-${key}`, sources: [s], targets: [t] }) }
-    }
-  }
+  const metaIds = new Set<string>([
+    ...groupLayouts.map(g => g.groupId),
+    ...ungroupedNodes.map(n => n.id),
+  ])
+  const interGroupEdges = buildInterGroupEdges(elkGraph.edges, nodeToGroup, metaIds)
 
   const metaResult = await elk.layout({
     id: 'meta-root',
@@ -323,6 +315,36 @@ interface ElkGraph {
   edges: ElkEdge[]
 }
 
+/**
+ * Build the meta-graph edges that position groups relative to each other (Phase 2).
+ * Each endpoint is normalized to its meta node: an expanded group's member maps to
+ * its group (via nodeToGroup); a collapsed-group chip id or an ungrouped node id is
+ * ALREADY a meta node and is used as-is. Edges between two already-meta nodes
+ * (chip↔chip, chip↔ungrouped) must still be included — dropping them loses the
+ * connectivity ELK uses to place connected groups near each other. Endpoints absent
+ * from metaIds are skipped (defensive — keeps the meta graph importable).
+ *
+ * Mirrored inline in layout.worker.ts, which is intentionally self-contained.
+ */
+export function buildInterGroupEdges(
+  edges: ElkEdge[],
+  nodeToGroup: Map<string, string>,
+  metaIds: Set<string>,
+): ElkEdge[] {
+  const out: ElkEdge[] = []
+  const seen = new Set<string>()
+  for (const edge of edges) {
+    const s = nodeToGroup.get(edge.sources[0]) ?? edge.sources[0]
+    const t = nodeToGroup.get(edge.targets[0]) ?? edge.targets[0]
+    if (s === t || !metaIds.has(s) || !metaIds.has(t)) continue
+    const key = `${s}->${t}`
+    if (seen.has(key)) continue
+    seen.add(key)
+    out.push({ id: `inter-${key}`, sources: [s], targets: [t] })
+  }
+  return out
+}
+
 // Get app label from a node (if it has one)
 function getAppLabel(node: TopologyNode): string | null {
   const labels = (node.data.labels as Record<string, string>) || {}
@@ -459,13 +481,41 @@ function pickGroupName(nodes: TopologyNode[]): string {
   return sorted[0].name
 }
 
+/**
+ * Whether a group renders as a single collapsed chip/card (members hidden) vs an
+ * expanded container. This is the ONE predicate that node placement, ELK edge
+ * redirect, and ReactFlow edge building must all agree on — if they diverge, an
+ * edge can reference a member hidden inside a chip, which either crashes ELK
+ * ("Referenced shape does not exist") or silently drops the rendered edge.
+ *
+ * - Explicit chip/cardGrid levels are always collapsed (they're in collapsedGroups).
+ * - When the smart-default chip pass is active (large clusters), a group with no
+ *   level entry is a late arrival and defaults to collapsed — e.g. a namespace
+ *   that only surfaces after switching Resources↔Traffic. When it is NOT active
+ *   (small clusters, manual per-group toggles), a no-entry group stays expanded,
+ *   so collapsing one group never cascades to untouched groups.
+ */
+export function isGroupEffectivelyCollapsed(
+  groupId: string,
+  collapsedGroups: Set<string>,
+  groupLevels: Map<string, GroupDisplayLevel> | undefined,
+  smartDefaultActive: boolean,
+): boolean {
+  if (collapsedGroups.has(groupId)) return true
+  if (smartDefaultActive && groupLevels?.get(groupId) !== 'topology') return true
+  return false
+}
+
 // Build hierarchical ELK graph with groups containing children
 export function buildHierarchicalElkGraph(
   topologyNodes: TopologyNode[],
   edges: Array<{ id: string; source: string; target: string; type: string }>,
   groupingMode: GroupingMode,
   collapsedGroups: Set<string>,
-  groupLevels?: Map<string, GroupDisplayLevel>
+  groupLevels?: Map<string, GroupDisplayLevel>,
+  /** True when the large-cluster smart-default chip pass has materialized levels;
+   *  makes no-entry groups default to collapsed (see isGroupEffectivelyCollapsed). */
+  smartDefaultActive = false,
 ): { elkGraph: ElkGraph; groupMap: Map<string, string[]>; nodeToGroup: Map<string, string> } {
   const groupMap = new Map<string, string[]>()
   const nodeToGroup = new Map<string, string>()
@@ -496,6 +546,11 @@ export function buildHierarchicalElkGraph(
     }
   }
 
+  // Node placement and edge redirect MUST share this predicate — see
+  // isGroupEffectivelyCollapsed for why.
+  const isGroupCollapsed = (groupId: string): boolean =>
+    isGroupEffectivelyCollapsed(groupId, collapsedGroups, groupLevels, smartDefaultActive)
+
   const children: ElkNode[] = []
   const processedNodes = new Set<string>()
 
@@ -516,16 +571,7 @@ export function buildHierarchicalElkGraph(
     // Create group nodes with children
     for (const [groupKey, memberIds] of groupMap) {
       const groupId = `group-${groupingMode}-${groupKey}`
-      // When groupLevels has entries for the CURRENT grouping mode, any group without
-      // an explicit 'topology' level is collapsed. This prevents late-arriving namespaces
-      // from defaulting to expanded and overlapping with collapsed chips.
-      // Only apply when levels exist for the same grouping prefix — don't let namespace
-      // levels leak into app/label grouping contexts.
-      const groupPrefix = `group-${groupingMode}-`
-      const hasLevelsForCurrentMode = groupLevels && groupLevels.size > 0 &&
-        [...groupLevels.keys()].some(k => k.startsWith(groupPrefix))
-      const isCollapsed = collapsedGroups.has(groupId) ||
-        (hasLevelsForCurrentMode && groupLevels!.get(groupId) !== 'topology')
+      const isCollapsed = isGroupCollapsed(groupId)
 
       if (isCollapsed) {
         const displayLevel = groupLevels?.get(groupId) || 'chip'
@@ -623,6 +669,18 @@ export function buildHierarchicalElkGraph(
     }
   }
 
+  // Every ELK edge endpoint must reference a node present in the graph (a
+  // top-level child, or a member of an expanded group). A single dangling
+  // reference makes ELK reject the whole import, blanking the topology — so we
+  // drop the stray edge instead. With the unified isGroupCollapsed predicate
+  // this should never fire; it's insurance against future placement/redirect
+  // drift.
+  const validEndpointIds = new Set<string>()
+  for (const child of children) {
+    validEndpointIds.add(child.id)
+    if (child.children) for (const c of child.children) validEndpointIds.add(c.id)
+  }
+
   // Build edges, redirecting to groups when collapsed
   const elkEdges: ElkEdge[] = []
   const seenEdges = new Set<string>()
@@ -631,17 +689,21 @@ export function buildHierarchicalElkGraph(
     let source = edge.source
     let target = edge.target
 
-    // Redirect edges to collapsed groups
+    // Redirect edges to collapsed groups — same predicate as node placement so
+    // an edge never references a member hidden inside a chip.
     const sourceGroup = nodeToGroup.get(source)
-    if (sourceGroup && collapsedGroups.has(sourceGroup)) {
+    if (sourceGroup && isGroupCollapsed(sourceGroup)) {
       source = sourceGroup
     }
 
     const targetGroup = nodeToGroup.get(target)
-    if (targetGroup && collapsedGroups.has(targetGroup)) {
+    if (targetGroup && isGroupCollapsed(targetGroup)) {
       target = targetGroup
     }
 
+    // Drop edges whose endpoints aren't in the graph (see validEndpointIds)
+    if (!validEndpointIds.has(source) || !validEndpointIds.has(target)) continue
+
     // Skip self-loops
     if (source === target) continue
 
@@ -865,12 +927,13 @@ export async function applyHierarchicalLayout(
       positions.set(group.groupId, pos)
 
       const { worstStatus, unhealthyCount } = computeGroupHealth(memberIds, nodeMap)
-      // Default to 'chip' when groupLevels has entries for the current grouping mode,
-      // so late-arriving namespaces don't render as expanded topology and overlap with chips.
-      const hasLevelsForMode = groupLevels && groupLevels.size > 0 &&
-        [...groupLevels.keys()].some(k => k.startsWith(`group-${groupingMode}-`))
-      const defaultLevel: GroupDisplayLevel = hasLevelsForMode ? 'chip' : 'topology'
-      const displayLevel: GroupDisplayLevel = groupLevels?.get(group.groupId) || (group.isCollapsed ? 'chip' : defaultLevel)
+      // Display level derives from the SAME source of truth as ELK node placement:
+      // group.isCollapsed reflects buildHierarchicalElkGraph's isGroupEffectivelyCollapsed
+      // decision (an expanded group was laid out with its children). Recomputing a
+      // separate "default" here would let the rendered chip disagree with the laid-out
+      // children — e.g. a manual single collapse rendering untouched groups as chips
+      // while their children are still placed. An explicit level (e.g. cardGrid) wins.
+      const displayLevel: GroupDisplayLevel = groupLevels?.get(group.groupId) || (group.isCollapsed ? 'chip' : 'topology')
 
       // Compute kind breakdown for collapsed chips
       const kindCounts: Record<string, number> = {}

package/src/components/topology/layout.worker.ts

@@ -198,44 +198,28 @@ self.onmessage = async (e: MessageEvent<LayoutRequest>) => {
     }
 
     // Phase 2: Build meta-graph and position groups (nodeToGroup built once above).
-    // Find inter-group edges
-    const interGroupEdges: ElkEdge[] = []
-    const seenInterGroupEdges = new Set<string>()
-
-    for (const edge of elkGraph.edges) {
-      const sourceGroup = nodeToGroup.get(edge.sources[0])
-      const targetGroup = nodeToGroup.get(edge.targets[0])
-
-      if (sourceGroup && targetGroup && sourceGroup !== targetGroup) {
-        const edgeKey = `${sourceGroup}->${targetGroup}`
-        if (!seenInterGroupEdges.has(edgeKey)) {
-          seenInterGroupEdges.add(edgeKey)
-          interGroupEdges.push({
-            id: `inter-${edgeKey}`,
-            sources: [sourceGroup],
-            targets: [targetGroup],
-          })
-        }
-      } else if ((!sourceGroup && targetGroup) || (sourceGroup && !targetGroup)) {
-        const source = sourceGroup || edge.sources[0]
-        const target = targetGroup || edge.targets[0]
-        const edgeKey = `${source}->${target}`
-        if (!seenInterGroupEdges.has(edgeKey)) {
-          seenInterGroupEdges.add(edgeKey)
-          interGroupEdges.push({
-            id: `inter-${edgeKey}`,
-            sources: [source],
-            targets: [target],
-          })
-        }
-      }
-    }
-
-    // Build and layout meta-graph
+    // Canonical version: buildInterGroupEdges in layout.ts — kept inline here because
+    // the worker is intentionally self-contained. Normalize each endpoint to its meta
+    // node (expanded member → its group; a chip id or ungrouped id is already a meta
+    // node) and keep edges between two already-meta nodes (chip↔chip, chip↔ungrouped),
+    // which the old branching dropped — losing the connectivity used to place groups.
     const metaChildren: ElkNode[] = [
       ...groupLayouts.map(g => ({ id: g.groupId, width: g.width, height: g.height })),
       ...ungroupedNodes.map(n => ({ id: n.id, width: n.width, height: n.height })),
     ]
+    const metaIds = new Set<string>(metaChildren.map(c => c.id))
+
+    const interGroupEdges: ElkEdge[] = []
+    const seenInterGroupEdges = new Set<string>()
+    for (const edge of elkGraph.edges) {
+      const source = nodeToGroup.get(edge.sources[0]) ?? edge.sources[0]
+      const target = nodeToGroup.get(edge.targets[0]) ?? edge.targets[0]
+      if (source === target || !metaIds.has(source) || !metaIds.has(target)) continue
+      const edgeKey = `${source}->${target}`
+      if (seenInterGroupEdges.has(edgeKey)) continue
+      seenInterGroupEdges.add(edgeKey)
+      interGroupEdges.push({ id: `inter-${edgeKey}`, sources: [source], targets: [target] })
+    }
 
     const metaGraph: ElkGraph = {
       id: 'meta-root',

package/src/components/ui/CodeViewer.tsx

@@ -391,7 +391,7 @@ export function CodeViewer({
         style={{ maxHeight }}
       >
         {highlighting ? (
-          <div className="p-4 text-theme-text-tertiary text-sm font-mono">Loading...</div>
+          <div className="p-4 text-theme-text-tertiary text-sm font-mono">Loading…</div>
         ) : (
           <div
             ref={contentRef}

package/src/components/ui/RestrictedState.tsx

@@ -0,0 +1,152 @@
+import { useState } from 'react'
+import { clsx } from 'clsx'
+import { Shield, ChevronDown, Copy, Check } from 'lucide-react'
+
+// RestrictedState is the shared "you can't see this because of Kubernetes RBAC"
+// surface — distinct from EmptyState (which covers healthy / filtered / no-data).
+// It never claims WHY the SAR failed (Radar can't prove tier vs custom-role vs
+// disabled-value from a denied check); it states the fact and hands the operator
+// something to forward to whoever administers their cluster.
+//
+// Reused across the resource list, topology, search, and the per-cluster access
+// summary so the messaging can't drift.
+
+interface Props {
+  /** Display kind, e.g. "Node". */
+  kindLabel: string
+  /** API group for the kind ("" for core). Used to build the example RBAC. */
+  group?: string
+  /** Plural resource name, e.g. "nodes". When omitted the snippet uses a
+   *  placeholder the admin fills in. */
+  resource?: string
+  /** Why the kind is hidden. "rbac_denied" (default): Radar can read it but the
+   *  user's RBAC can't — show the grant request. "unavailable": Radar's
+   *  ServiceAccount can't read it at all (not installed / SA RBAC / feature off)
+   *  — a user grant won't help, so show a different message and no snippet. */
+  reason?: 'rbac_denied' | 'unavailable' | string
+  /** Tightens spacing for inline/embedded use (topology overlay, etc.). */
+  compact?: boolean
+  className?: string
+}
+
+function buildRbacRequest(group: string, resource: string): string {
+  // resource is the placeholder when we don't have a confident API plural
+  // (e.g. a CRD deep-link before discovery resolves the kind) — use a generic
+  // role name rather than radar-read-<Kind>.
+  const roleName = resource === '<resource>' ? 'radar-read-access' : `radar-read-${resource}`
+  return [
+    `apiVersion: rbac.authorization.k8s.io/v1`,
+    `kind: ClusterRole`,
+    `metadata:`,
+    `  name: ${roleName}`,
+    `rules:`,
+    `  - apiGroups: ["${group}"]`,
+    `    resources: ["${resource}"]`,
+    `    verbs: ["get", "list", "watch"]`,
+    `---`,
+    `apiVersion: rbac.authorization.k8s.io/v1`,
+    `kind: ClusterRoleBinding`,
+    `metadata:`,
+    `  name: ${roleName}`,
+    `roleRef:`,
+    `  apiGroup: rbac.authorization.k8s.io`,
+    `  kind: ClusterRole`,
+    `  name: ${roleName}`,
+    `subjects:`,
+    `  - kind: Group        # or User / ServiceAccount`,
+    `    name: <your-identity>`,
+    `    apiGroup: rbac.authorization.k8s.io`,
+  ].join('\n')
+}
+
+export function RestrictedState({ kindLabel, group = '', resource, reason, compact, className }: Props) {
+  const [expanded, setExpanded] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const isUnavailable = reason === 'unavailable'
+
+  // RBAC `resources` must be the lowercase API plural. selectedKind.name is
+  // that in normal use, but a CRD deep-link can transiently carry the Kind
+  // (e.g. "HTTPRoute") before discovery resolves it — emitting that would
+  // produce a snippet that doesn't grant access. Only inline the resource when
+  // it looks like a valid resource name; otherwise leave a clear placeholder.
+  const validResource = resource && /^[a-z0-9.-]+$/.test(resource) ? resource : '<resource>'
+  const snippet = buildRbacRequest(group, validResource)
+
+  const copy = () => {
+    navigator.clipboard.writeText(snippet).then(
+      () => {
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      },
+      () => {},
+    )
+  }
+
+  return (
+    <div
+      className={clsx(
+        'flex flex-col items-center justify-center text-center text-theme-text-tertiary',
+        compact ? 'p-4' : 'p-6',
+        className,
+      )}
+    >
+      <Shield className="w-8 h-8 text-amber-400 mb-2" />
+      {isUnavailable ? (
+        // Radar's ServiceAccount can't read this kind — a user grant won't help.
+        <>
+          <p className="text-theme-text-secondary font-medium">{kindLabel} isn't available here</p>
+          <p className="text-sm mt-1 max-w-md">
+            Radar can't read {kindLabel} resources in this cluster — the type may not be installed,
+            or read access isn't granted to Radar's ServiceAccount (some kinds, like RBAC objects
+            and Secrets, are off unless enabled in the Radar chart). Granting your own identity
+            access won't surface it.
+          </p>
+        </>
+      ) : (
+        <>
+          <p className="text-theme-text-secondary font-medium">You don't have access to {kindLabel}</p>
+          <p className="text-sm mt-1 max-w-md">
+            Your Kubernetes RBAC doesn't allow listing {kindLabel} resources in this cluster. This
+            isn't an empty cluster — Radar is hiding what your identity can't read.
+          </p>
+
+          <div className="mt-3 w-full max-w-md">
+            <button
+              onClick={() => setExpanded((v) => !v)}
+              className="flex items-center gap-1.5 mx-auto text-sm text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+            >
+              <ChevronDown className={clsx('w-4 h-4 transition-transform', expanded && 'rotate-180')} />
+              How to get access
+            </button>
+
+            {expanded && (
+              <div className="mt-2 text-left">
+                <p className="text-xs text-theme-text-tertiary mb-2">
+                  Apply this, or send it to whoever administers your cluster, to grant your identity
+                  read access.
+                </p>
+                <div className="rounded-md border border-theme-border bg-theme-base overflow-hidden">
+                  <div className="flex items-center justify-between px-3 py-1.5 border-b border-theme-border bg-theme-elevated">
+                    <span className="text-xs text-theme-text-tertiary">
+                      ClusterRole + ClusterRoleBinding
+                    </span>
+                    <button
+                      onClick={copy}
+                      className="flex items-center gap-1 text-xs text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+                    >
+                      {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
+                      {copied ? 'Copied' : 'Copy'}
+                    </button>
+                  </div>
+                  <pre className="text-xs p-3 max-h-72 overflow-auto text-theme-text-secondary">
+                    {snippet}
+                  </pre>
+                </div>
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/ui/YamlEditor.tsx

@@ -233,7 +233,7 @@ export function YamlEditor({
         }}
         loading={
           <div className="flex items-center justify-center h-full bg-theme-surface text-theme-text-secondary">
-            Loading editor...
+            Loading editor…
           </div>
         }
       />

package/src/components/ui/drawer-components.tsx

@@ -990,7 +990,7 @@ export function EventsSection({ events, updates = [], isLoading, eventsError, up
   if (isLoading) {
     return (
       <Section title="Recent Events" defaultExpanded>
-        <div className="text-sm text-theme-text-tertiary">Loading events...</div>
+        <div className="text-sm text-theme-text-tertiary">Loading events…</div>
       </Section>
     )
   }

package/src/components/ui/index.ts

@@ -5,6 +5,7 @@ export { MiddleEllipsis } from './MiddleEllipsis'
 export type { MiddleEllipsisProps } from './MiddleEllipsis'
 export { EmptyState } from './EmptyState'
 export type { EmptyStateTone, EmptyStateVariant } from './EmptyState'
+export { RestrictedState } from './RestrictedState'
 export { FetchResult } from './FetchResult'
 export { SearchBox } from './SearchBox'
 export { FilterPill } from './FilterPill'

package/src/components/workload/WorkloadView.tsx

@@ -1126,7 +1126,7 @@ function EventsTab({
     return (
       <div className="flex items-center justify-center h-full text-theme-text-tertiary">
         <RefreshCw className="w-5 h-5 animate-spin mr-2" />
-        Loading events...
+        Loading events…
       </div>
     )
   }