@skyhook-io/k8s-ui 1.7.12 → 1.7.13

package/src/components/topology/layout.ts

@@ -109,6 +109,17 @@ const pendingRequests = new Map<number, {
   reject: (error: Error) => void
 }>()
 
+const WORKER_UNAVAILABLE = 'Worker unavailable'
+
+function rejectPendingWorkerRequests() {
+  for (const [, pending] of pendingRequests) {
+    pending.reject(new Error(WORKER_UNAVAILABLE))
+  }
+  pendingRequests.clear()
+  layoutWorker?.terminate()
+  layoutWorker = null
+}
+
 function getOrCreateWorker(): Worker {
   if (!layoutWorker) {
     layoutWorker = new Worker(new URL('./layout.worker.ts', import.meta.url), { type: 'module' })
@@ -126,10 +137,7 @@ function getOrCreateWorker(): Worker {
     }
     layoutWorker.onerror = (e) => {
       console.error('[TopologyLayout] Worker error:', e)
-      for (const [, pending] of pendingRequests) {
-        pending.reject(new Error('Worker error'))
-      }
-      pendingRequests.clear()
+      rejectPendingWorkerRequests()
     }
   }
   return layoutWorker
@@ -142,10 +150,16 @@ function runLayoutViaWorker(
   padding: typeof GROUP_PADDING
 ): Promise<LayoutResult> {
   return new Promise((resolve, reject) => {
-    const worker = getOrCreateWorker()
-    const requestId = ++requestIdCounter
-    pendingRequests.set(requestId, { resolve, reject })
-    worker.postMessage({ type: 'layout', requestId, elkGraph, groupingMode, hideGroupHeader, padding })
+    try {
+      const worker = getOrCreateWorker()
+      const requestId = ++requestIdCounter
+      pendingRequests.set(requestId, { resolve, reject })
+      worker.postMessage({ type: 'layout', requestId, elkGraph, groupingMode, hideGroupHeader, padding })
+    } catch (err) {
+      console.error('[TopologyLayout] Worker unavailable:', err)
+      rejectPendingWorkerRequests()
+      reject(new Error(WORKER_UNAVAILABLE))
+    }
   })
 }
 
@@ -273,7 +287,18 @@ function runLayout(
   if (layoutEngine === 'main-thread') {
     return runLayoutOnMainThread(elkGraph, groupingMode, hideGroupHeader, padding)
   }
-  return runLayoutViaWorker(elkGraph, groupingMode, hideGroupHeader, padding)
+  return runLayoutViaWorker(elkGraph, groupingMode, hideGroupHeader, padding).catch((err) => {
+    // A worker failure before a layout result arrives usually means the
+    // consumer's bundler/CSP couldn't serve or run the worker chunk.
+    // Fall back to the inline engine permanently rather than rendering a dead
+    // "Layout Error" pane.
+    if (err instanceof Error && err.message === WORKER_UNAVAILABLE) {
+      console.warn('[TopologyLayout] layout worker unavailable — falling back to main-thread ELK')
+      layoutEngine = 'main-thread'
+      return runLayoutOnMainThread(elkGraph, groupingMode, hideGroupHeader, padding)
+    }
+    throw err
+  })
 }
 
 interface ElkNode {
@@ -798,7 +823,7 @@ function computeGridDimensions(cardCount: number, groupKey: string): { width: nu
 }
 
 // Two-phase layout: first layout groups internally, then position groups based on connections
-// Layout is performed in a Web Worker to avoid blocking the main thread
+// Layout runs via the active engine — a Web Worker when available, else inline
 export async function applyHierarchicalLayout(
   elkGraph: ElkGraph,
   topologyNodes: TopologyNode[],
@@ -817,7 +842,7 @@ export async function applyHierarchicalLayout(
   try {
     const padding = hideGroupHeader ? GROUP_PADDING_NO_HEADER : GROUP_PADDING
 
-    // Run layout in worker (off main thread)
+    // Run layout via the active engine
     const workerResult = await runLayout(elkGraph, groupingMode, hideGroupHeader, padding)
 
     if (workerResult.error) {

package/src/components/ui/CenteredEmpty.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { EmptyState, type EmptyStateTone } from './EmptyState'
+
+// CenteredEmpty — the shared "whole panel is empty" state, centered in the
+// available height (matches how the view components present their own
+// empty/healthy states). Use for not-found / no-data-at-all; for "the filter
+// excluded everything" render an inline EmptyState card where the rows would be.
+export function CenteredEmpty({
+  tone = 'neutral',
+  icon,
+  headline,
+  body,
+  action,
+}: {
+  tone?: EmptyStateTone
+  icon?: LucideIcon
+  headline: string
+  body?: ReactNode
+  action?: ReactNode
+}) {
+  return (
+    <div className="flex min-h-[55vh] flex-1 items-center justify-center p-4">
+      <EmptyState tone={tone} variant="card" icon={icon} headline={headline} body={body} action={action} className="border-none bg-transparent" />
+    </div>
+  )
+}

package/src/components/ui/SearchBox.tsx

@@ -0,0 +1,85 @@
+import { useRef } from 'react'
+import { Search, X } from 'lucide-react'
+import { clsx } from 'clsx'
+import { useRegisterShortcut, type ShortcutScope } from '../../hooks/useKeyboardShortcuts'
+
+/** The standard list-view search box: themed input with a `/`-to-focus
+ *  shortcut, Escape-to-blur, and a clear affordance. One definition so the
+ *  views can't drift (hand-rolled copies had already diverged: a blue focus
+ *  ring in Timeline, no clear button in Audit). ResourcesView keeps its inline
+ *  variant — regex mode and row-navigation handoff are coupled to its table. */
+export function SearchBox({
+  value,
+  onChange,
+  scope,
+  shortcutId,
+  placeholder = 'Search... (press /)',
+  className,
+  onEnter,
+  onArrowDown,
+}: {
+  value: string
+  onChange: (value: string) => void
+  /** Help-overlay grouping + collision priority for the `/` shortcut. */
+  scope: ShortcutScope
+  /** Unique shortcut id, e.g. 'applications-search'. */
+  shortcutId: string
+  placeholder?: string
+  /** Width/layout overrides — the box itself stays themed. */
+  className?: string
+  /** Enter in the box — e.g. open the first filtered row. */
+  onEnter?: () => void
+  /** ArrowDown in the box — hand focus off to list keyboard navigation. */
+  onArrowDown?: () => void
+}) {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useRegisterShortcut({
+    id: shortcutId,
+    keys: '/',
+    description: 'Focus search',
+    category: 'Search',
+    scope,
+    handler: () => inputRef.current?.focus(),
+  })
+
+  return (
+    <div className={clsx('relative', className)}>
+      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-theme-text-tertiary" />
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            inputRef.current?.blur()
+          } else if (e.key === 'Enter' && onEnter) {
+            e.preventDefault()
+            inputRef.current?.blur()
+            onEnter()
+          } else if (e.key === 'ArrowDown' && onArrowDown) {
+            e.preventDefault()
+            inputRef.current?.blur()
+            onArrowDown()
+          }
+        }}
+        className="w-full rounded-lg border border-theme-border-light bg-theme-elevated py-1.5 pl-10 pr-9 text-sm text-theme-text-primary placeholder-theme-text-disabled focus:outline-none focus:ring-2 focus:ring-skyhook-500"
+      />
+      {value && (
+        <button
+          type="button"
+          aria-label="Clear search"
+          onClick={() => {
+            onChange('')
+            inputRef.current?.focus()
+          }}
+          className="absolute right-2.5 top-1/2 -translate-y-1/2 text-theme-text-tertiary hover:text-theme-text-primary"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/ui/index.ts

@@ -6,6 +6,7 @@ export type { MiddleEllipsisProps } from './MiddleEllipsis'
 export { EmptyState } from './EmptyState'
 export type { EmptyStateTone, EmptyStateVariant } from './EmptyState'
 export { FetchResult } from './FetchResult'
+export { SearchBox } from './SearchBox'
 export { FilterPill } from './FilterPill'
 export type { FilterPillTone } from './FilterPill'
 export { StatusDot, mapHealthToTone } from './status-tone'

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'
@@ -48,8 +52,10 @@ import { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } f
 import { DetailShell, type DetailShellTab } from '../shared/DetailShell'
 import { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from '../shared/ManagedByChip'
 import { getKindColorOutline, formatKindName } 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',
@@ -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"
@@ -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">{formatKindName(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'