@skyhook-io/k8s-ui 1.7.6 → 1.7.8

package/src/components/ui/RowActionMenu.tsx

@@ -0,0 +1,149 @@
+import { Fragment, useEffect, useLayoutEffect, useRef, useState, type ComponentType } from 'react'
+import { Loader2, MoreVertical } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Tooltip } from './Tooltip'
+
+export interface RowActionItem {
+  key: string
+  label: string
+  icon: ComponentType<{ className?: string }>
+  onClick: () => void
+  disabled?: boolean
+  disabledReason?: string
+  pending?: boolean
+  danger?: boolean
+  /** Render a horizontal divider above this item. */
+  divider?: boolean
+}
+
+interface RowActionMenuProps {
+  items: RowActionItem[]
+  ariaLabel?: string
+  /** Compact button variant (default: true) — sized for table-row anchoring. */
+  compact?: boolean
+}
+
+export function RowActionMenu({ items, ariaLabel = 'Row actions', compact = true }: RowActionMenuProps) {
+  const [open, setOpen] = useState(false)
+  // Flip the menu above the trigger when it would otherwise spill past the
+  // viewport bottom. The GitOps table's bottom rows sit at the end of a scroll
+  // container with the app's fixed overlay buttons below them, so a
+  // downward-opening menu there clips its lowest items with no way to scroll
+  // them into view. Measured after open (useLayoutEffect, pre-paint, no flicker).
+  const [openUp, setOpenUp] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setOpenUp(false)
+      return
+    }
+    const trigger = ref.current?.getBoundingClientRect()
+    const menuH = menuRef.current?.offsetHeight ?? 0
+    if (!trigger) return
+    const spaceBelow = window.innerHeight - trigger.bottom
+    // Flip up only when there's not enough room below AND enough room above,
+    // so a tall menu near the top doesn't get clipped at the other end.
+    setOpenUp(menuH + 8 > spaceBelow && trigger.top > menuH + 8)
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  const triggerSize = compact ? 'p-1' : 'p-1.5'
+  const iconSize = compact ? 'h-4 w-4' : 'h-5 w-5'
+
+  return (
+    <div ref={ref} className="relative inline-block">
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={(e) => {
+          e.stopPropagation()
+          setOpen((v) => !v)
+        }}
+        className={clsx(
+          'rounded text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary',
+          triggerSize,
+        )}
+      >
+        <MoreVertical className={iconSize} />
+      </button>
+      {open && (
+        <div
+          ref={menuRef}
+          role="menu"
+          className={clsx(
+            'absolute right-0 z-50 min-w-[180px] rounded-lg border border-theme-border bg-theme-surface py-1 shadow-xl',
+            openUp ? 'bottom-full mb-1' : 'top-full mt-1',
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {items.map((item) => {
+            const Icon = item.icon
+            const content = (
+              <button
+                type="button"
+                role="menuitem"
+                disabled={item.disabled || item.pending}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (item.disabled || item.pending) return
+                  item.onClick()
+                  setOpen(false)
+                }}
+                className={clsx(
+                  'flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors',
+                  item.disabled || item.pending
+                    ? 'cursor-not-allowed text-theme-text-tertiary'
+                    : item.danger
+                    ? 'text-red-500 hover:bg-theme-hover hover:text-red-400'
+                    : 'text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary',
+                )}
+              >
+                {item.pending ? (
+                  <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin" />
+                ) : (
+                  <Icon className="h-3.5 w-3.5 shrink-0" />
+                )}
+                <span className="truncate">{item.label}</span>
+              </button>
+            )
+            return (
+              <Fragment key={item.key}>
+                {item.divider && <div className="my-1 h-px bg-theme-border" />}
+                {item.disabled && item.disabledReason ? (
+                  // wrapperClassName=w-full so the disabled item fills the menu
+                  // like enabled items — the Tooltip wrapper is inline-flex and
+                  // would otherwise shrink-wrap, and the menu inherits text-right
+                  // from the table's actions cell, shoving the item to the edge.
+                  <Tooltip content={item.disabledReason} position="left" wrapperClassName="w-full">
+                    {content}
+                  </Tooltip>
+                ) : (
+                  content
+                )}
+              </Fragment>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/ui/Tooltip.tsx

@@ -54,6 +54,7 @@ export function Tooltip({
   const triggerRef = useRef<HTMLSpanElement>(null)
   const tooltipRef = useRef<HTMLSpanElement>(null)
   const timeoutRef = useRef<number | null>(null)
+  const hideTimeoutRef = useRef<number | null>(null)
   const rafRef = useRef<number | null>(null)
 
   const updatePosition = useCallback(() => {
@@ -94,12 +95,24 @@ export function Tooltip({
       clearTimeout(timeoutRef.current)
       timeoutRef.current = null
     }
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current)
+      hideTimeoutRef.current = null
+    }
     setIsVisible(false)
     setCoords(null)
   }
 
+  const cancelHide = () => {
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current)
+      hideTimeoutRef.current = null
+    }
+  }
+
   const showTooltip = () => {
     if (disabled || !content) return
+    cancelHide()
     timeoutRef.current = window.setTimeout(() => {
       // Singleton: hide whoever was visible before us, register self
       // as the new active tooltip. Guards against stuck duplicates.
@@ -116,6 +129,10 @@ export function Tooltip({
       clearTimeout(timeoutRef.current)
       timeoutRef.current = null
     }
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current)
+      hideTimeoutRef.current = null
+    }
     if (activeHide === hideRef.current) {
       activeHide = null
     }
@@ -123,6 +140,15 @@ export function Tooltip({
     setCoords(null)
   }
 
+  const scheduleHideTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+    if (hideTimeoutRef.current) return
+    hideTimeoutRef.current = window.setTimeout(hideTooltip, 80)
+  }
+
   useEffect(() => {
     if (isVisible) {
       // Second rAF re-centers using the measured tooltip size; without
@@ -144,6 +170,9 @@ export function Tooltip({
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current)
       }
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current)
+      }
       if (rafRef.current !== null) {
         cancelAnimationFrame(rafRef.current)
       }
@@ -169,6 +198,10 @@ export function Tooltip({
         clearTimeout(timeoutRef.current)
         timeoutRef.current = null
       }
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current)
+        hideTimeoutRef.current = null
+      }
       setIsVisible(false)
       setCoords(null)
     }
@@ -202,7 +235,7 @@ export function Tooltip({
         className={clsx('inline-flex max-w-full', wrapperClassName)}
         style={wrapperStyle}
         onMouseEnter={showTooltip}
-        onMouseLeave={hideTooltip}
+        onMouseLeave={scheduleHideTooltip}
         onFocus={showTooltip}
         onBlur={hideTooltip}
         // pointerdown fires before click, so the tooltip is gone before
@@ -227,7 +260,7 @@ export function Tooltip({
               // max-w-xs (320px) + whitespace-normal, short tooltips
               // still fit on one line (content shorter than max-width)
               // and long ones wrap naturally near the trigger.
-              'max-w-xs whitespace-normal break-words pointer-events-none',
+              'max-w-xs whitespace-normal break-words',
               className
             )}
             style={{
@@ -238,6 +271,8 @@ export function Tooltip({
             }}
             role="tooltip"
             aria-hidden={coords ? undefined : true}
+            onMouseEnter={cancelHide}
+            onMouseLeave={scheduleHideTooltip}
           >
             {content}
           </span>,

package/src/components/ui/index.ts

@@ -20,3 +20,5 @@ export { ForceDeleteConfirmDialog } from './ForceDeleteConfirmDialog'
 export { ToastProvider, useToast, showApiError, showApiSuccess } from './Toast'
 export { CodeViewer } from './CodeViewer'
 export { YamlEditor, YamlDiffEditor } from './YamlEditor'
+export { RowActionMenu } from './RowActionMenu'
+export type { RowActionItem } from './RowActionMenu'

package/src/components/workload/WorkloadView.tsx

@@ -21,6 +21,7 @@ import {
   BarChart3,
 } from 'lucide-react'
 import type { TimelineEvent, ResourceRef, Relationships, SelectedResource, ResolvedEnvFrom } from '../../types'
+import type { GitOpsStatus } from '../../types/gitops'
 import type { NavigateToResource } from '../../utils/navigation'
 import { refToSelectedResource, pluralToKind } from '../../utils/navigation'
 import { gitOpsOwnerFromRelationships, type GitOpsOwnerRef } from '../../utils/gitops-owner'
@@ -44,7 +45,8 @@ import {
 import { ResourceActionsBar } from '../shared/ResourceActionsBar'
 import { EditableYamlView, SaveSuccessAnimation } from '../shared/EditableYamlView'
 import { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } from '../shared/ResourceRendererDispatch'
-import { ManagedByChip } from '../shared/ManagedByChip'
+import { DetailShell, type DetailShellTab } from '../shared/DetailShell'
+import { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from '../shared/ManagedByChip'
 import { getKindColorOutline, formatKindName } from '../ui/drawer-components'
 
 type TabType = 'overview' | 'timeline' | 'logs' | 'metrics' | 'yaml'
@@ -71,6 +73,20 @@ interface WorkloadViewProps {
   /** API group for CRD resources */
   group?: string
 
+  // ── Hosted chrome (expanded mode) ────────────────────────────────────────
+  /**
+   * A breadcrumb rendered above the identity header — e.g. when a larger
+   * surface (Radar Cloud's app page) hosts this view inside its own navigation.
+   * When set, the standalone back button is not rendered; `onBack` still backs
+   * the Escape shortcut.
+   */
+  breadcrumb?: ReactNode
+  /**
+   * 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
+
   // ── Data (injected by wrapper) ──────────────────────────────────────────
   /** The resource data object */
   resource?: any
@@ -126,6 +142,22 @@ interface WorkloadViewProps {
    * visible (useful for hosts that haven't routed the GitOps tab yet).
    */
   onOpenGitOpsResource?: (ref: GitOpsOwnerRef) => void
+  /** Owner ref resolved by the host when relationships lack enough detail, e.g. Argo labels without namespace. */
+  resolvedGitOpsOwner?: GitOpsOwnerRef | null
+  /** True when the owner exists locally and can be opened as a GitOps detail page. */
+  gitOpsOwnerVerified?: boolean
+  /** True while the host is still resolving whether the owner exists locally. */
+  gitOpsOwnerPending?: boolean
+  /** Metadata key/value that caused GitOps ownership inference, when known. */
+  gitOpsOwnerSource?: string | null
+  /** Sync/health status for the GitOps owner, when the host can resolve it. */
+  gitOpsOwnerStatus?: GitOpsStatus | null
+  /** Native Helm release that manages this resource, when detected. */
+  helmOwner?: HelmOwnerRef | null
+  /** Metadata key/value that caused native Helm ownership inference, when known. */
+  helmOwnerSource?: string | null
+  /** Open the native Helm release drawer. */
+  onOpenHelmRelease?: (ref: HelmOwnerRef) => void
   /**
    * Open the GitOps detail page for the resource itself, when the resource
    * is a portal-classified GitOps CR (Argo Application/ApplicationSet/
@@ -185,6 +217,8 @@ export function WorkloadView({
   onExpand,
   initialTab,
   group,
+  breadcrumb,
+  scopeControls,
   // Data
   resource,
   relationships,
@@ -226,6 +260,14 @@ export function WorkloadView({
   resolvedEnvFrom,
   // GitOps
   onOpenGitOpsResource,
+  resolvedGitOpsOwner,
+  gitOpsOwnerVerified = true,
+  gitOpsOwnerPending = false,
+  gitOpsOwnerSource,
+  gitOpsOwnerStatus,
+  helmOwner,
+  helmOwnerSource,
+  onOpenHelmRelease,
   onNavigateGitOpsPath,
 }: WorkloadViewProps) {
   // Normalize kind: URL has plural lowercase, internal logic uses singular PascalCase
@@ -315,7 +357,8 @@ export function WorkloadView({
 
   // Metadata
   const metadata = useMemo(() => extractMetadata(kind, resource), [kind, resource])
-  const gitopsOwner = useMemo(() => gitOpsOwnerFromRelationships(relationships), [relationships])
+  const relationshipGitOpsOwner = useMemo(() => gitOpsOwnerFromRelationships(relationships), [relationships])
+  const gitopsOwner = resolvedGitOpsOwner ?? relationshipGitOpsOwner
   // When the resource itself is a portal GitOps CR (Application, Kustomization,
   // HelmRelease, etc.), surface a link to its dedicated GitOps detail page —
   // the drawer's renderer is thorough but the tab has the tree + insights +
@@ -401,6 +444,18 @@ export function WorkloadView({
   const status = getResourceStatus(apiKind, resource)
 
   const showMetricsTab = isMetricsAvailable ? isMetricsAvailable(kind, resource) : false
+  const tabs: DetailShellTab<TabType>[] = [
+    { id: 'overview', label: 'Overview', icon: <Layers className="w-4 h-4" /> },
+    {
+      id: 'timeline',
+      label: 'Timeline',
+      icon: <Activity className="w-4 h-4" />,
+      badge: resourceEvents.length > 0 ? <span className="ml-1 badge-sm bg-theme-elevated">{resourceEvents.length}</span> : undefined,
+    },
+    { id: 'logs', label: 'Logs', icon: <Terminal className="w-4 h-4" />, hidden: !(allPods.length > 0 && renderLogsTab) },
+    { id: 'metrics', label: 'Metrics', icon: <BarChart3 className="w-4 h-4" />, hidden: !(showMetricsTab && renderMetricsTab) },
+    { id: 'yaml', label: 'YAML', icon: <FileText className="w-4 h-4" /> },
+  ]
 
   // ── Collapsed (drawer) mode ──────────────────────────────────────────────
   if (!expanded) {
@@ -465,9 +520,10 @@ export function WorkloadView({
               </button>
             </div>
             <p className="text-sm text-theme-text-tertiary">{namespace}</p>
-            {(gitopsOwner || (gitOpsResourcePath && onNavigateGitOpsPath)) && (
+            {(gitopsOwner || helmOwner || (gitOpsResourcePath && onNavigateGitOpsPath)) && (
               <div className="mt-1 flex flex-wrap items-center gap-1.5">
-                {gitopsOwner && <ManagedByChip owner={gitopsOwner} onOpen={onOpenGitOpsResource} />}
+                {gitopsOwner && <ManagedByChip owner={gitopsOwner} status={gitOpsOwnerStatus} verified={gitOpsOwnerVerified} pending={gitOpsOwnerPending} source={gitOpsOwnerSource} onOpen={onOpenGitOpsResource} />}
+                {helmOwner && <HelmManagedByChip owner={helmOwner} source={helmOwnerSource} onOpen={onOpenHelmRelease} />}
                 {gitOpsResourcePath && onNavigateGitOpsPath && (
                   <OpenInGitOpsChip onClick={() => onNavigateGitOpsPath(gitOpsResourcePath)} />
                 )}
@@ -534,11 +590,10 @@ export function WorkloadView({
 
   // ── Expanded (full) mode ─────────────────────────────────────────────────
   return (
-    <div className="flex flex-col h-full w-full bg-theme-surface">
-      {/* Header */}
-      <div className="shrink-0 border-b border-theme-border bg-theme-surface">
-        <div className="px-6 py-3 flex items-start gap-4">
-          {/* Back button */}
+    <DetailShell
+      breadcrumb={breadcrumb}
+      nav={
+        breadcrumb ? 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"
@@ -546,47 +601,52 @@ export function WorkloadView({
           >
             <ArrowLeft className="w-5 h-5" />
           </button>
-
-          {/* Resource identity */}
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-3 mb-1">
-              <h1 className="text-lg font-semibold text-theme-text-primary truncate">{name}</h1>
-              <button
-                onClick={() => copyToClipboard(name, 'name')}
-                className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded shrink-0"
-                title="Copy name"
-              >
-                {copied === 'name' ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
-              </button>
-            </div>
-            <div className="flex items-center gap-3 text-sm text-theme-text-secondary">
-              <span className={clsx('badge', getKindColorOutline(apiKind))}>
-                {formatKindName(apiKind)}
+        )
+      }
+      identity={
+        <>
+          <div className="flex items-center gap-3 mb-1">
+            <h1 className="text-lg font-semibold text-theme-text-primary truncate">{name}</h1>
+            <button
+              onClick={() => copyToClipboard(name, 'name')}
+              className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded shrink-0"
+              title="Copy name"
+            >
+              {copied === 'name' ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
+            </button>
+          </div>
+          <div className="flex items-center gap-3 text-sm text-theme-text-secondary">
+            <span className={clsx('badge', getKindColorOutline(apiKind))}>
+              {formatKindName(apiKind)}
+            </span>
+            {status && (
+              <span className={clsx('badge', status.color)}>
+                {status.text}
               </span>
-              {status && (
-                <span className={clsx('badge', status.color)}>
-                  {status.text}
-                </span>
-              )}
-              {namespace && namespace !== '_' && (
-                <span>Namespace: <span className="text-theme-text-primary">{namespace}</span></span>
-              )}
-              {metadata.find(m => m.label === 'Image') && (
-                <span className="truncate max-w-md font-mono text-xs">{metadata.find(m => m.label === 'Image')?.value}</span>
-              )}
-              {gitopsOwner && (
-                <ManagedByChip owner={gitopsOwner} onOpen={onOpenGitOpsResource} variant="block" />
-              )}
-              {gitOpsResourcePath && onNavigateGitOpsPath && (
-                <OpenInGitOpsChip onClick={() => onNavigateGitOpsPath(gitOpsResourcePath)} />
-              )}
-              {relationships?.owner && (
-                <span>Owner: <button onClick={() => onNavigateToResource?.(refToSelectedResource(relationships.owner!))} className="text-blue-500 hover:underline">{relationships.owner.name}</button></span>
-              )}
-            </div>
+            )}
+            {namespace && namespace !== '_' && (
+              <span>Namespace: <span className="text-theme-text-primary">{namespace}</span></span>
+            )}
+            {metadata.find(m => m.label === 'Image') && (
+              <span className="truncate max-w-md font-mono text-xs">{metadata.find(m => m.label === 'Image')?.value}</span>
+            )}
+            {gitopsOwner && (
+              <ManagedByChip owner={gitopsOwner} status={gitOpsOwnerStatus} verified={gitOpsOwnerVerified} pending={gitOpsOwnerPending} source={gitOpsOwnerSource} onOpen={onOpenGitOpsResource} variant="block" />
+            )}
+            {helmOwner && (
+              <HelmManagedByChip owner={helmOwner} source={helmOwnerSource} onOpen={onOpenHelmRelease} variant="block" />
+            )}
+            {gitOpsResourcePath && onNavigateGitOpsPath && (
+              <OpenInGitOpsChip onClick={() => onNavigateGitOpsPath(gitOpsResourcePath)} />
+            )}
+            {relationships?.owner && (
+              <span>Owner: <button onClick={() => onNavigateToResource?.(refToSelectedResource(relationships.owner!))} className="text-blue-500 hover:underline">{relationships.owner.name}</button></span>
+            )}
           </div>
-
-          {/* Refresh */}
+        </>
+      }
+      headerActions={
+        <>
           <button
             onClick={() => refetch()}
             disabled={isRefreshAnimating}
@@ -601,8 +661,6 @@ export function WorkloadView({
               : <RefreshCw className={clsx('w-5 h-5', refreshPhase === 'spinning' && 'animate-spin')} />
             }
           </button>
-
-          {/* Collapse back to drawer */}
           {onCollapseToDrawer && (
             <button
               onClick={onCollapseToDrawer}
@@ -612,50 +670,15 @@ export function WorkloadView({
               <Minimize2 className="w-5 h-5" />
             </button>
           )}
-        </div>
-
-        {/* Tabs (left) + Actions (right) */}
-        <div className="px-6 flex items-center border-t border-theme-border">
-          <div className="flex gap-1">
-            <TabButton active={activeTab === 'overview'} onClick={() => handleSetTab('overview')}>
-              <Layers className="w-4 h-4" />
-              Overview
-            </TabButton>
-            <TabButton active={activeTab === 'timeline'} onClick={() => handleSetTab('timeline')}>
-              <Activity className="w-4 h-4" />
-              Timeline
-              {resourceEvents.length > 0 && (
-                <span className="ml-1 badge-sm bg-theme-elevated">{resourceEvents.length}</span>
-              )}
-            </TabButton>
-            {allPods.length > 0 && renderLogsTab && (
-              <TabButton active={activeTab === 'logs'} onClick={() => handleSetTab('logs')}>
-                <Terminal className="w-4 h-4" />
-                Logs
-              </TabButton>
-            )}
-            {showMetricsTab && renderMetricsTab && (
-              <TabButton active={activeTab === 'metrics'} onClick={() => handleSetTab('metrics')}>
-                <BarChart3 className="w-4 h-4" />
-                Metrics
-              </TabButton>
-            )}
-            <TabButton active={activeTab === 'yaml'} onClick={() => handleSetTab('yaml')}>
-              <FileText className="w-4 h-4" />
-              YAML
-            </TabButton>
-          </div>
-          <div className="ml-auto">
-            <ResourceActionsBar resource={selectedResource} data={resource} hideLogs {...actionsBarProps} />
-          </div>
-        </div>
-      </div>
-
-      {/* Success animation overlay */}
-      {saveSuccess && <SaveSuccessAnimation />}
-
-      {/* Tab Content */}
-      <div className="flex-1 overflow-hidden relative">
+        </>
+      }
+      tabs={tabs}
+      activeTab={activeTab}
+      onTabChange={handleSetTab}
+      scopeControls={scopeControls}
+      tabStripEnd={<ResourceActionsBar resource={selectedResource} data={resource} hideLogs {...actionsBarProps} />}
+      overlay={saveSuccess ? <SaveSuccessAnimation /> : null}
+    >
         {activeTab === 'overview' && (
             <InfoTab
               resource={resource}
@@ -732,8 +755,7 @@ export function WorkloadView({
             )}
           </div>
         )}
-      </div>
-    </div>
+    </DetailShell>
   )
 }
 
@@ -792,22 +814,6 @@ function OpenInGitOpsChip({ onClick }: { onClick: () => void }) {
   )
 }
 
-function TabButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
-  return (
-    <button
-      onClick={onClick}
-      className={clsx(
-        'flex items-center gap-1.5 px-3 py-2 text-sm font-medium border-b-2 transition-colors',
-        active
-          ? 'text-theme-text-primary border-skyhook-500'
-          : 'text-theme-text-secondary border-transparent hover:text-theme-text-primary hover:border-theme-border-light'
-      )}
-    >
-      {children}
-    </button>
-  )
-}
-
 // ============================================================================
 // EVENTS TAB (Swimlane timeline)
 // ============================================================================

package/src/index.ts

@@ -45,6 +45,11 @@ export * from './components/audit'
 // resolve.
 export * from './components/checks'
 
+// Live issues queue (IssuesView — the grouped operational-issue triage queue,
+// shared by OSS single-cluster and the hub fleet view; sibling to the Checks
+// queue)
+export * from './components/issues'
+
 // Cluster switcher (shared trigger+dropdown for OSS Radar and Radar Hub)
 export * from './components/cluster-switcher'
 

package/src/theme/components.css

@@ -65,6 +65,22 @@
     box-shadow: var(--shadow-lg);
   }
 
+  /* ── INLINE CODE ── */
+
+  .inline-code {
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    border: 0.5px solid color-mix(in srgb, var(--color-brand) 24%, var(--border-default));
+    border-radius: 0.25rem;
+    background-color: color-mix(in srgb, var(--color-brand) 8%, var(--bg-elevated));
+    padding: 0.0625rem 0.3125rem;
+    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+    font-size: 0.9em;
+    font-weight: 500;
+    line-height: 1.5;
+    color: var(--text-primary);
+  }
+
   /* ── BADGES ── */
 
   .badge {

package/src/types/core.ts

@@ -411,7 +411,8 @@ export interface ResolvedEnvFromEntry {
   values: Record<string, string>
   isSecret: boolean
 }
-export type ResolvedEnvFrom = Record<string, ResolvedEnvFromEntry>
+export type ResolvedEnvFromKey = `configmap:${string}` | `secret:${string}`
+export type ResolvedEnvFrom = Partial<Record<ResolvedEnvFromKey, ResolvedEnvFromEntry>>
 
 // Resource reference (for relationships)
 export interface ResourceRef {
@@ -939,7 +940,7 @@ export interface TrafficFilters {
 // Library consumers (Radar Hub) get all GitOps surfaces — the package
 // IS the public surface, so adding new top-level views must extend
 // this type rather than rely on app-local extensions.
-export type ExtendedMainView = MainView | 'traffic' | 'cost' | 'audit' | 'gitops'
+export type ExtendedMainView = MainView | 'traffic' | 'cost' | 'audit' | 'gitops' | 'issues'
 
 // ============================================================================
 // Image Filesystem Types

package/src/utils/env-from.ts

@@ -0,0 +1,3 @@
+export function resolvedEnvFromKey(kind: 'configmap' | 'secret', name: string) {
+  return `${kind}:${name}` as const
+}