@skyhook-io/radar-app 1.4.0 → 1.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "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/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
+    />
+  )
+}