@skyhook-io/radar-app 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",

package/src/App.tsx

@@ -19,6 +19,7 @@ import { CostView } from './components/cost/CostView'
 import { AuditView } from './components/audit/AuditView'
 import { IssuesPane } from './components/issues/IssuesPane'
 import { GitOpsView } from './components/gitops/GitOpsView'
+import { ApplicationsView } from './components/applications/ApplicationsView'
 import { HelmReleaseDrawer } from './components/helm/HelmReleaseDrawer'
 import { PortForwardProvider, PortForwardIndicator, PortForwardPanel } from './components/portforward/PortForwardManager'
 import { DockProvider, BottomDock, useDock, useDockReservedHeight, useOpenLocalTerminal } from './components/dock'
@@ -93,7 +94,7 @@ const FLEET_MODE_KINDS = new Set<NodeKind>([
 
 // Convert API resource name back to topology node ID prefix
 // Extended MainView type that includes traffic and cost
-type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'audit' | 'gitops' | 'compare' | 'issues'
+type ExtendedMainView = MainView | 'traffic' | 'cost' | 'workload' | 'audit' | 'gitops' | 'compare' | 'issues' | 'applications'
 
 // Extract view from URL path
 function getViewFromPath(pathname: string): ExtendedMainView {
@@ -108,6 +109,7 @@ function getViewFromPath(pathname: string): ExtendedMainView {
   if (path === 'workload') return 'workload'
   if (path === 'audit') return 'audit'
   if (path === 'gitops') return 'gitops'
+  if (path === 'applications') return 'applications'
   if (path === 'compare') return 'compare'
   if (path === 'issues') return 'issues'
   return 'home'
@@ -451,7 +453,7 @@ function AppInner() {
   const contextSwitcherRef = useRef<ContextSwitcherHandle>(null)
 
   // View switching keyboard shortcuts
-  const views: ExtendedMainView[] = ['home', 'topology', 'resources', 'timeline', 'helm', 'gitops', 'traffic', 'cost', 'audit']
+  const views: ExtendedMainView[] = ['home', 'topology', 'resources', 'timeline', 'helm', 'gitops', 'applications', 'traffic', 'cost', 'audit']
   useRegisterShortcuts([
     ...views.map((view, i) => ({
       id: `view-${view}`,
@@ -1207,6 +1209,10 @@ function AppInner() {
             { view: 'timeline' as const, icon: Clock, label: 'Timeline' },
             { view: 'helm' as const, icon: Package, label: 'Helm' },
             { view: 'gitops' as const, icon: GitBranch, label: 'GitOps' },
+            // Applications is intentionally hidden from the pill bar for now —
+            // the bar is full, and the view's primary home is Cloud's fleet
+            // rail. The view still exists and is reachable via /applications
+            // and the view-switching shortcuts. Same treatment as Cost below.
             { view: 'traffic' as const, icon: Activity, label: 'Traffic' },
             // Cost is intentionally hidden from the pill bar for now — the view still
             // exists and is reachable via /cost, the Home dashboard card, and the
@@ -1654,6 +1660,16 @@ function AppInner() {
           />
         )}
 
+        {/* Applications view — deployable software grouped by app/release evidence */}
+        {mainView === 'applications' && (
+          <ApplicationsView
+            namespaces={namespaces}
+            onOpenResource={(resource) => {
+              setSelectedResource(resource)
+            }}
+          />
+        )}
+
         {/* Traffic view */}
         {mainView === 'traffic' && (
           <TrafficView namespaces={namespaces} />

package/src/api/client.ts

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react'
+import type { AppRow } from '@skyhook-io/k8s-ui'
 import { useQuery, useMutation, useQueryClient, skipToken } from '@tanstack/react-query'
 import { showApiError, showApiSuccess } from '../components/ui/Toast'
 import { useCanHelmWrite } from '../contexts/CapabilitiesContext'
@@ -853,6 +854,19 @@ export function useTopology(namespaces: string[], viewMode: string = 'resources'
   })
 }
 
+export function useApplications(namespaces: string[]) {
+  const params = new URLSearchParams()
+  if (namespaces.length > 0) params.set('namespaces', namespaces.join(','))
+  const queryString = params.toString()
+
+  return useQuery<{ applications: AppRow[] }>({
+    queryKey: ['applications', namespaces],
+    queryFn: () => fetchJSON(`/applications${queryString ? `?${queryString}` : ''}`),
+    staleTime: 30_000,
+    refetchInterval: 60_000,
+  })
+}
+
 export function useGitOpsTree(kind: string, namespace: string, name: string, group?: string, namespaces: string[] = []) {
   const ns = namespace || '_'
   const params = new URLSearchParams()

package/src/components/applications/ApplicationsView.tsx

@@ -0,0 +1,218 @@
+import { useCallback, useEffect, useMemo } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import {
+  ApplicationsList,
+  ApplicationDetail,
+  CenteredEmpty,
+  useToast,
+  orderEnvs,
+  matchWorkloadAcrossInstances,
+  workloadKey,
+  healthOf,
+  compareVersions,
+  type AppRow,
+  type AppIdentityInstance,
+  type SelectedAppWorkload,
+  type SelectedResource,
+} from '@skyhook-io/k8s-ui'
+import { Boxes } from 'lucide-react'
+import { useApplications, useTopology } from '../../api/client'
+import { kindToPlural } from '../../utils/navigation'
+import { WorkloadView } from '../workload/WorkloadView'
+
+interface ApplicationsViewProps {
+  namespaces: string[]
+  onOpenResource: (resource: SelectedResource) => void
+}
+
+export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsViewProps) {
+  const query = useApplications(namespaces)
+  const apps = query.data?.applications ?? []
+
+  // Which app is open lives in the URL (?app=<key>) so the detail view is
+  // deep-linkable and the browser back button returns to the list. Opening or
+  // closing an app also clears the per-app params (workload, tab).
+  const [searchParams, setSearchParams] = useSearchParams()
+  const selectedKey = searchParams.get('app')
+  const selected = useMemo(() => apps.find((a) => a.key === selectedKey) ?? null, [apps, selectedKey])
+
+  const selectApp = useCallback(
+    (key: string | null) => {
+      const params = new URLSearchParams(searchParams)
+      if (key) params.set('app', key)
+      else params.delete('app')
+      params.delete('workload')
+      params.delete('tab')
+      setSearchParams(params)
+    },
+    [searchParams, setSearchParams],
+  )
+
+  // A stale ?app= (uninstalled/renamed app, or a link from another cluster)
+  // would leave the URL lying under the list view — clear it once data is
+  // fresh. Never during load, so a slow fetch can't eject a valid deep link.
+  useEffect(() => {
+    if (selectedKey && !selected && query.isSuccess) {
+      const params = new URLSearchParams(searchParams)
+      params.delete('app')
+      params.delete('workload')
+      params.delete('tab')
+      setSearchParams(params, { replace: true })
+    }
+  }, [selectedKey, selected, query.isSuccess, searchParams, setSearchParams])
+
+  if (selectedKey && selected) {
+    return <AppDetailRoute app={selected} apps={apps} onBack={() => selectApp(null)} onOpenResource={onOpenResource} />
+  }
+
+  return (
+    <div className="flex-1 overflow-auto px-4 py-4 sm:px-6">
+      <header className="mb-4 flex flex-col gap-1">
+        <h1 className="text-xl font-semibold text-theme-text-primary">Applications</h1>
+        <p className="max-w-3xl text-sm text-theme-text-secondary">Deployable software in this cluster — your services, workers, and jobs, grouped by app/release evidence.</p>
+      </header>
+
+      {query.isLoading ? (
+        <CenteredEmpty icon={Boxes} headline="Loading applications…" />
+      ) : query.error ? (
+        <CenteredEmpty tone="filtered" icon={Boxes} headline="Failed to load applications" body={(query.error as Error).message} />
+      ) : apps.length === 0 ? (
+        <CenteredEmpty
+          icon={Boxes}
+          headline="No applications detected yet"
+          body="Deploy services, workers, or jobs to this cluster to see them grouped by app."
+        />
+      ) : (
+        <ApplicationsList apps={apps} onSelect={selectApp} />
+      )}
+    </div>
+  )
+}
+
+// AppDetailRoute wires the OSS data hooks the shared ApplicationDetail can't:
+// the resources-view topology over the app's namespaces (for the app graph)
+// and the per-workload WorkloadView (which fetches its own topology for the
+// Topology tab). Split out so useTopology runs unconditionally (Rules of Hooks).
+function AppDetailRoute({ app, apps, onBack, onOpenResource }: { app: AppRow; apps: AppRow[]; onBack: () => void; onOpenResource: (resource: SelectedResource) => void }) {
+  const appNamespaces = useMemo(
+    () => Array.from(new Set((app.workloads ?? []).map((w) => w.namespace).filter(Boolean))).sort(),
+    [app.workloads],
+  )
+  const { data: topology, isLoading: topologyLoading } = useTopology(appNamespaces, 'resources', { enabled: appNamespaces.length > 0 })
+
+  // The selected workload (?workload=<key>) lives in the URL too: deep-linkable,
+  // and back returns from a workload's runtime to the app graph. Clearing it
+  // also drops the workload's tab param.
+  const [searchParams, setSearchParams] = useSearchParams()
+  const selectedWorkloadKey = searchParams.get('workload')
+  const selectWorkload = useCallback(
+    (key: string | null) => {
+      const params = new URLSearchParams(searchParams)
+      // Always drop the workload's tab: a fresh workload opens on its overview,
+      // and clearing back to the graph leaves no stale tab on the route.
+      params.delete('tab')
+      if (key) params.set('workload', key)
+      else params.delete('workload')
+      setSearchParams(params)
+    },
+    [searchParams, setSearchParams],
+  )
+
+  // App identity switcher data: this instance's siblings (ladder-ordered
+  // digests). It switches between REAL instances — ?app= changes, deep links
+  // stay instance-keyed.
+  const { showToast } = useToast();
+  const identityInstances = useMemo<AppIdentityInstance[] | null>(() => {
+    const fam = app.identity;
+    if (!fam) return null;
+    const sibs = apps.filter((a) => a.identity?.key === fam.key);
+    if (sibs.length < 2) return null;
+    const newest = (a: AppRow) =>
+      (a.versions ?? []).reduce<string | undefined>((best, v) => (!best || compareVersions(v, best) === 1 ? v : best), undefined) ?? a.appVersion;
+    const order = orderEnvs(sibs.map((a) => a.identity!.env));
+    return [...sibs]
+      .sort((a, b) => order.indexOf(a.identity!.env) - order.indexOf(b.identity!.env) || a.name.localeCompare(b.name))
+      .map((a) => ({
+        appKey: a.key,
+        name: a.name,
+        env: a.identity!.env,
+        health: healthOf(a.health),
+        version: newest(a),
+        confidence: a.identity!.confidence,
+        evidence: a.identity!.evidence,
+      }));
+  }, [apps, app]);
+
+  // Position-preserving env switch: carry the selected workload + tab into the
+  // sibling when a matching workload exists there (exact kind+name, else the
+  // env-affix-stripped stem); otherwise land on the instance overview and say
+  // the workload wasn't found.
+  const switchInstance = useCallback(
+    (targetKey: string) => {
+      const target = apps.find((a) => a.key === targetKey);
+      const params = new URLSearchParams(searchParams);
+      params.set('app', targetKey);
+      const wk = params.get('workload');
+      let matched = false;
+      if (wk && target) {
+        // Stem matching strips this app group's own env tokens too, so
+        // discovered envs (loadtest, …) carry position like the trio does.
+        const identityEnvs = new Set((identityInstances ?? []).map((i) => i.env));
+        const m = matchWorkloadAcrossInstances(wk, target.workloads, identityEnvs);
+        if (m) {
+          params.set('workload', workloadKey(m));
+          matched = true;
+        }
+      }
+      if (!matched && wk) {
+        // A workload WAS selected but has no counterpart — land on the target
+        // instance's overview and say so. (With no workload selected the tab
+        // rides along: it applies to the lone workload either side.)
+        params.delete('workload');
+        params.delete('tab');
+        if (target) {
+          showToast(`No matching workload in ${target.identity?.env ?? target.name}`, { detail: 'Showing the instance overview instead.', type: 'info' });
+        }
+      }
+      setSearchParams(params);
+    },
+    [apps, identityInstances, searchParams, setSearchParams, showToast],
+  );
+
+  const discoveredEnvs = useMemo(
+    () => new Set(apps.map((a) => a.identity?.env).filter((e): e is string => !!e)),
+    [apps],
+  );
+
+  return (
+    <div className="flex-1 overflow-auto">
+      <ApplicationDetail
+        app={app}
+        onBack={onBack}
+        topology={topology}
+        topologyLoading={topologyLoading}
+        identityInstances={identityInstances}
+        onSwitchInstance={switchInstance}
+        discoveredEnvs={discoveredEnvs}
+        onNavigateToResource={onOpenResource}
+        selectedWorkloadKey={selectedWorkloadKey}
+        onSelectWorkload={selectWorkload}
+        renderWorkload={(workload: SelectedAppWorkload) => (
+          <div className="h-full overflow-hidden">
+            <WorkloadView
+              kind={kindToPlural(workload.kind)}
+              namespace={workload.namespace}
+              name={workload.name}
+              onBack={() => selectWorkload(null)}
+              // "Back" returns to the app graph — meaningless for a
+              // single-workload app, which has no graph to return to.
+              hideBackButton={(app.workloads?.length ?? 0) <= 1}
+              compactHeader
+              onNavigateToResource={onOpenResource}
+            />
+          </div>
+        )}
+      />
+    </div>
+  )
+}

package/src/components/audit/AuditSettingsDialog.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo } from 'react'
-import { X, Plus, Trash2 } from 'lucide-react'
+import { X, Plus, Trash2, Lock } from 'lucide-react'
 import { clsx } from 'clsx'
-import { useAuditSettings, useUpdateAuditSettings, useAudit } from '../../api/client'
+import { useAuditSettings, useUpdateAuditSettings, useAudit, useCloudRole } from '../../api/client'
 import type { CheckMeta } from '@skyhook-io/k8s-ui'
 import { validateRFC1123Label, type ValidationResult } from '@skyhook-io/k8s-ui/utils/validators'
 
@@ -14,6 +14,11 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
   const { data: settings } = useAuditSettings()
   const { data: auditData } = useAudit(namespaces)
   const updateSettings = useUpdateAuditSettings()
+  // Audit policy is cluster-shared, so writes are owner-gated (enforced
+  // server-side too). Non-owners get a read-only view. Non-Cloud callers
+  // have no role and pass.
+  const { canAtLeast } = useCloudRole()
+  const canEdit = canAtLeast('owner')
   const [ignoredNs, setIgnoredNs] = useState<string[]>([])
   const [disabledChecks, setDisabledChecks] = useState<string[]>([])
   const [newNs, setNewNs] = useState('')
@@ -75,6 +80,15 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
         </div>
 
         <div className="px-5 py-4 overflow-y-auto flex-1">
+          {!canEdit && (
+            <div className="mb-4 rounded-lg border border-theme-border bg-theme-elevated/50 p-3 flex items-start gap-2.5">
+              <Lock className="w-3.5 h-3.5 mt-0.5 shrink-0 text-theme-text-tertiary" />
+              <p className="text-xs text-theme-text-tertiary">
+                Audit policy is shared across everyone using this Radar instance, so editing
+                is limited to owners. You can review the current settings here.
+              </p>
+            </div>
+          )}
           {/* Ignored Namespaces */}
           <div className="mb-6">
             <label className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider">
@@ -90,7 +104,8 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
                   <span className="text-sm text-theme-text-primary">{ns}</span>
                   <button
                     onClick={() => setIgnoredNs(ignoredNs.filter(n => n !== ns))}
-                    className="p-1 rounded hover:bg-theme-hover text-theme-text-tertiary hover:text-red-400 transition-colors"
+                    disabled={!canEdit}
+                    className="p-1 rounded hover:bg-theme-hover text-theme-text-tertiary hover:text-red-400 transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:text-theme-text-tertiary"
                   >
                     <Trash2 className="w-3.5 h-3.5" />
                   </button>
@@ -108,6 +123,7 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
                 onChange={e => setNewNs(e.target.value)}
                 onKeyDown={e => { if (e.key === 'Enter') addNamespace() }}
                 placeholder="Add namespace..."
+                disabled={!canEdit}
                 aria-invalid={newNsError ? true : undefined}
                 aria-describedby="new-ns-help"
                 className={clsx(
@@ -119,7 +135,7 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
               />
               <button
                 onClick={addNamespace}
-                disabled={!canAddNamespace}
+                disabled={!canEdit || !canAddNamespace}
                 className="px-3 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <Plus className="w-4 h-4" />
@@ -155,7 +171,8 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
                       type="checkbox"
                       checked={!disabled}
                       onChange={() => toggleCheck(check.id)}
-                      className="w-4 h-4 rounded border-theme-border text-skyhook-500 focus:ring-skyhook-500"
+                      disabled={!canEdit}
+                      className="w-4 h-4 rounded border-theme-border text-skyhook-500 focus:ring-skyhook-500 disabled:opacity-40 disabled:cursor-not-allowed"
                     />
                     <div className="flex-1 min-w-0">
                       <span className="text-sm text-theme-text-primary">{check.title}</span>
@@ -181,14 +198,16 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
             // text — otherwise the user clicks Save expecting their
             // entry to be included and it's silently dropped.
             disabled={
-              updateSettings.isPending || newNsError !== null || newNsDuplicate
+              !canEdit || updateSettings.isPending || newNsError !== null || newNsDuplicate
             }
             title={
-              newNsError
-                ? 'Fix or clear the pending namespace input before saving'
-                : newNsDuplicate
-                  ? 'Clear the duplicate pending input before saving'
-                  : undefined
+              !canEdit
+                ? 'Audit settings can only be changed by owners'
+                : newNsError
+                  ? 'Fix or clear the pending namespace input before saving'
+                  : newNsDuplicate
+                    ? 'Clear the duplicate pending input before saving'
+                    : undefined
             }
             className="px-4 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
           >

package/src/components/audit/AuditView.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'react'
-import { useAudit, useAuditSettings, useUpdateAuditSettings } from '../../api/client'
+import { useAudit, useAuditSettings, useUpdateAuditSettings, useCloudRole } from '../../api/client'
 import type { SelectedResource } from '../../types'
 import { ChecksView, PaneLoader, type CheckResourceRef } from '@skyhook-io/k8s-ui'
 import { ArrowLeft, ClipboardCheck, Settings } from 'lucide-react'
@@ -21,6 +21,11 @@ export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditVie
   const { data, isLoading, error } = useAudit(namespaces)
   const { data: auditSettings } = useAuditSettings()
   const updateSettings = useUpdateAuditSettings()
+  // Audit policy is owner-gated (enforced server-side). Withhold the inline
+  // hide affordances from non-owners so they don't click into a 403 — the
+  // hide menus render only when these callbacks are passed.
+  const { canAtLeast } = useCloudRole()
+  const canEdit = canAtLeast('owner')
   const [showSettings, setShowSettings] = useState(false)
 
   const ignoredCount = auditSettings?.ignoredNamespaces?.length ?? 0
@@ -105,8 +110,8 @@ export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditVie
         catalog={data.checks ?? {}}
         anyData
         onResourceClick={onResourceClick}
-        onHideCheck={hideCheck}
-        onHideCategory={hideCategory}
+        onHideCheck={canEdit ? hideCheck : undefined}
+        onHideCategory={canEdit ? hideCategory : undefined}
       />
 
       {showSettings && <AuditSettingsDialog namespaces={namespaces} onClose={() => setShowSettings(false)} />}

package/src/components/settings/SettingsDialog.tsx

@@ -1,10 +1,11 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
+import { useState, useEffect, useRef, useCallback, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
-import { Settings, X, RotateCcw, Loader2, Copy, Check, Pin, Shield } from 'lucide-react'
+import { Settings, X, RotateCcw, Loader2, Copy, Check, Pin, Shield, Lock } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
 import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { useCloudRole } from '../../api/client'
 
 interface Config {
   kubeconfig?: string
@@ -34,6 +35,13 @@ interface SettingsDialogProps {
 export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsDialogProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
   const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
+  // Radar configuration (kubeconfig, port, integrations…) is host-level and
+  // affects every user of this instance, so it's gated to owners. Personal
+  // sections (My permissions) stay visible to everyone. Non-Cloud callers
+  // (OSS, OIDC, kubectl plugin) have no role and pass — single-user laptops
+  // are never locked out of their own config. Backend enforces this too.
+  const { canAtLeast } = useCloudRole()
+  const canEditConfig = canAtLeast('owner')
   const [configData, setConfigData] = useState<ConfigResponse | null>(null)
   const [editedConfig, setEditedConfig] = useState<Config>({})
   const [saving, setSaving] = useState(false)
@@ -169,33 +177,55 @@ export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsD
             </div>
           )}
           {onShowMyPermissions && (
-            <div className="mb-4 rounded-md border border-theme-border bg-theme-elevated/50 p-3">
-              <div className="flex items-center justify-between gap-3">
-                <div className="min-w-0">
-                  <h3 className="text-sm font-medium text-theme-text-primary">My permissions</h3>
-                  <p className="mt-0.5 text-xs text-theme-text-tertiary">
-                    View what your current identity can do in this cluster.
-                  </p>
+            <div className="mb-5">
+              <SectionLabel>Personal</SectionLabel>
+              <div className="rounded-md border border-theme-border bg-theme-elevated/50 p-3">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <h3 className="text-sm font-medium text-theme-text-primary">My permissions</h3>
+                    <p className="mt-0.5 text-xs text-theme-text-tertiary">
+                      View what your current identity can do in this cluster.
+                    </p>
+                  </div>
+                  <button
+                    onClick={onShowMyPermissions}
+                    className="shrink-0 flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-hover rounded-md transition-colors"
+                  >
+                    <Shield className="w-3.5 h-3.5" />
+                    Open
+                  </button>
                 </div>
-                <button
-                  onClick={onShowMyPermissions}
-                  className="shrink-0 flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-hover rounded-md transition-colors"
-                >
-                  <Shield className="w-3.5 h-3.5" />
-                  Open
-                </button>
               </div>
             </div>
           )}
-          <StartupConfigTab
-            config={editedConfig}
-            effectiveConfig={configData?.effective}
-            isDesktop={isDesktop}
-            onChange={updateConfigField}
-          />
+
+          <SectionLabel>Radar configuration</SectionLabel>
+          {canEditConfig ? (
+            <StartupConfigTab
+              config={editedConfig}
+              effectiveConfig={configData?.effective}
+              isDesktop={isDesktop}
+              onChange={updateConfigField}
+            />
+          ) : (
+            <div className="rounded-md border border-theme-border bg-theme-elevated/50 p-4 flex items-start gap-3">
+              <Lock className="w-4 h-4 mt-0.5 shrink-0 text-theme-text-tertiary" />
+              <div className="min-w-0">
+                <p className="text-sm font-medium text-theme-text-primary">Owner access required</p>
+                <p className="mt-0.5 text-xs text-theme-text-tertiary">
+                  These settings (kubeconfig, server port, timeline, integrations) affect
+                  every user of this Radar instance, so they're limited to owners. Ask an
+                  owner if you need a change here.
+                </p>
+              </div>
+            </div>
+          )}
         </div>
 
-        {/* Footer */}
+        {/* Footer — only the owner-gated config section is editable, so hide
+            the save controls entirely for non-owners (personal sections save
+            themselves). */}
+        {canEditConfig && (
         <div className="flex items-center justify-between gap-3 p-4 border-t border-theme-border shrink-0">
             <div className="flex items-center gap-2">
               <button
@@ -225,12 +255,23 @@ export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsD
               Save
             </button>
           </div>
+        )}
       </div>
     </div>,
     document.body
   )
 }
 
+// -- Section label ------------------------------------------------------------
+
+function SectionLabel({ children }: { children: ReactNode }) {
+  return (
+    <h3 className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-2">
+      {children}
+    </h3>
+  )
+}
+
 // -- Startup Configuration Tab ------------------------------------------------
 
 function StartupConfigTab({

package/src/components/workload/WorkloadView.tsx

@@ -5,6 +5,9 @@ import { clsx } from 'clsx'
 import { Terminal } from 'lucide-react'
 import {
   WorkloadView as BaseWorkloadView,
+  EditableYamlView,
+  FetchResult,
+  type WorkloadTabType,
   type RendererOverrides,
   type GitOpsOwnerRef,
   type GitOpsStatus,
@@ -57,7 +60,7 @@ import { useDesktopDownload } from '../../hooks/useDesktopDownload'
 import { useCompareLauncher } from '../compare/useCompareLauncher'
 import { apiVersionToGroup } from '../../utils/navigation'
 
-type TabType = 'overview' | 'timeline' | 'logs' | 'metrics' | 'yaml'
+type TabType = WorkloadTabType
 
 // Stable reference — web renderer wrappers inject platform hooks internally
 const rendererOverrides: RendererOverrides = {
@@ -136,6 +139,8 @@ interface WorkloadViewProps {
   namespace: string
   name: string
   onBack: () => void
+  hideBackButton?: boolean
+  compactHeader?: boolean
   onNavigateToResource?: NavigateToResource
   onCollapseToDrawer?: () => void
   expanded?: boolean
@@ -496,6 +501,7 @@ export function WorkloadView({
       onTabChange={handleTabChange}
       // Render props
       renderLogsTab={(props) => <LogsTabContent {...props} />}
+      renderRelatedYaml={(ref) => <RelatedResourceYaml key={`${ref.kind}/${ref.namespace}/${ref.name}`} target={ref} />}
       renderMetricsTab={({ kind, namespace: ns, name: n }) => (
         <MetricsTabContent kind={kind} namespace={ns} name={n} resource={resource} expanded={expanded} />
       )}
@@ -964,3 +970,26 @@ const FLUX_SOURCE_KIND_BY_LOWER = new Map<string, string>([
   ['ocirepository', 'OCIRepository'],
   ['bucket', 'Bucket'],
 ])
+
+// Read-only manifest view for an object in the workload's neighborhood (the
+// YAML tab's object rail). Read-only by design — editing an arbitrary related
+// object belongs on that resource's own page.
+function RelatedResourceYaml({ target }: { target: { kind: string; namespace: string; name: string; group?: string } }) {
+  const { data, isLoading, error } = useResource<any>(kindToPlural(target.kind), target.namespace, target.name, target.group)
+  const [copied, setCopied] = useState(false)
+  const handleCopy = useCallback((text: string) => {
+    navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }, [])
+  if (!data) return <FetchResult loading={isLoading} error={error as Error | null} className="h-32" />
+  return (
+    <EditableYamlView
+      resource={{ kind: kindToPlural(target.kind), namespace: target.namespace, name: target.name, group: target.group }}
+      data={data}
+      onCopy={handleCopy}
+      copied={copied}
+      readOnly
+    />
+  )
+}