@skyhook-io/radar-app 1.8.6 → 1.8.8

package/src/components/applications/ApplicationsView.tsx

@@ -1,37 +1,93 @@
-import { useCallback, useEffect, useMemo } from 'react'
-import { useSearchParams } from 'react-router-dom'
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import {
   ApplicationsList,
   ApplicationDetail,
   CenteredEmpty,
   PageHeader,
   FreshnessControl,
+  IssueRow,
+  ISSUE_SEVERITY_RANK,
   useToast,
   orderEnvs,
   matchWorkloadAcrossInstances,
   workloadKey,
   healthOf,
   compareVersions,
+  gitOpsRouteForKind,
+  deploymentInventoryFromGitOps,
+  deploymentInventoryFromHelm,
+  buildAppMembershipIndex,
+  buildApplicationHistoryItems,
+  eventsForApplication,
+  memberRef,
+  subjectRef,
   type AppRow,
+  type AppWorkload,
   type AppIdentityInstance,
+  type ApplicationView,
+  type ApplicationHistoryRange,
+  type AppSourceRef,
+  type Issue,
+  type IssueResourceRef,
   type SelectedAppWorkload,
   type SelectedResource,
-} from '@skyhook-io/k8s-ui'
-import { Boxes } from 'lucide-react'
-import { useApplications, useTopology } from '../../api/client'
-import { useConnection } from '../../context/ConnectionContext'
-import { kindToPlural } from '../../utils/navigation'
-import { WorkloadView } from '../workload/WorkloadView'
+} from "@skyhook-io/k8s-ui";
+import { AlertTriangle, Boxes } from "lucide-react";
+import { SEVERITY_TEXT } from "@skyhook-io/k8s-ui/utils/badge-colors";
+import {
+  useApplicationHistory,
+  useApplications,
+  useGitOpsTree,
+  useHelmRelease,
+  useIssues,
+  useTopology,
+  type IssuesResponse,
+} from "../../api/client";
+import { useConnection } from "../../context/ConnectionContext";
+import { useTimelineSource } from "../../context/TimelineSource";
+import { buildWorkloadPath, kindToPlural } from "../../utils/navigation";
+import { WorkloadView } from "../workload/WorkloadView";
+import { ApplicationCostTab } from "../cost/ApplicationCostTab";
+import { isOpenCostWorkloadKind } from "../cost/kinds";
+
+type ApplicationRouteView = ApplicationView | "cost";
+
+const APPLICATION_HISTORY_WINDOW: Record<
+  ApplicationHistoryRange,
+  number | "all"
+> = {
+  "24h": 24 * 60 * 60 * 1000,
+  "7d": 7 * 24 * 60 * 60 * 1000,
+  "30d": 30 * 24 * 60 * 60 * 1000,
+  all: "all",
+};
+const APPLICATION_HISTORY_EVENT_LIMIT = 10_000;
+const DEFAULT_RETAINED_HISTORY_DAYS = 7;
+const APPLICATION_TIMELINE_FOCUS_MS = 60 * 60 * 1000;
+const APPLICATION_TIMELINE_AFTER_MS = 45 * 60 * 1000;
+
+const APPLICATION_VIEWS: ReadonlySet<ApplicationRouteView> =
+  new Set<ApplicationRouteView>(["overview", "topology", "history", "cost"]);
+
+function parseApplicationView(value: string | null): ApplicationRouteView {
+  if (!value || !APPLICATION_VIEWS.has(value as ApplicationRouteView))
+    return "overview";
+  return value as ApplicationRouteView;
+}
 
 interface ApplicationsViewProps {
-  namespaces: string[]
-  onOpenResource: (resource: SelectedResource) => void
+  namespaces: string[];
+  onOpenResource: (resource: SelectedResource) => void;
 }
 
-export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsViewProps) {
-  const query = useApplications(namespaces)
-  const { connection } = useConnection()
-  const apps = useMemo(() => query.data?.applications ?? [], [query.data])
+export function ApplicationsView({
+  namespaces,
+  onOpenResource,
+}: ApplicationsViewProps) {
+  const query = useApplications(namespaces);
+  const { connection } = useConnection();
+  const apps = useMemo(() => query.data?.applications ?? [], [query.data]);
 
   const freshness = (
     <FreshnessControl
@@ -40,42 +96,54 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
       onRefresh={() => query.refetch()}
       connectionState={connection.state}
     />
-  )
+  );
 
   // 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])
+  // closing an app also clears the per-app params (view, 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)
+      const params = new URLSearchParams(searchParams);
+      if (key) params.set("app", key);
+      else params.delete("app");
+      params.delete("view");
+      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 })
+      const params = new URLSearchParams(searchParams);
+      params.delete("app");
+      params.delete("view");
+      params.delete("workload");
+      params.delete("tab");
+      setSearchParams(params, { replace: true });
     }
-  }, [selectedKey, selected, query.isSuccess, searchParams, setSearchParams])
+  }, [selectedKey, selected, query.isSuccess, searchParams, setSearchParams]);
 
   if (selectedKey && selected) {
-    return <AppDetailRoute app={selected} apps={apps} onBack={() => selectApp(null)} onOpenResource={onOpenResource} />
+    return (
+      <AppDetailRoute
+        app={selected}
+        apps={apps}
+        onBack={() => selectApp(null)}
+        onOpenResource={onOpenResource}
+      />
+    );
   }
 
   // The header + status + filters + table chassis lives inside ApplicationsList
@@ -86,9 +154,14 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
   if (query.isLoading) {
     return (
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-        <ApplicationsList apps={[]} onSelect={selectApp} headerActions={freshness} loading />
+        <ApplicationsList
+          apps={[]}
+          onSelect={selectApp}
+          headerActions={freshness}
+          loading
+        />
       </div>
-    )
+    );
   }
   if (query.error) {
     return (
@@ -100,46 +173,358 @@ export function ApplicationsView({ namespaces, onOpenResource }: ApplicationsVie
             description="Deployable software in this cluster — your services, workers, and jobs, grouped by app/release evidence."
           />
         </div>
-        <CenteredEmpty tone="filtered" icon={Boxes} headline="Failed to load applications" body={(query.error as Error).message} />
+        <CenteredEmpty
+          tone="filtered"
+          icon={Boxes}
+          headline="Failed to load applications"
+          body={(query.error as Error).message}
+        />
       </div>
-    )
+    );
   }
 
   return (
     <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-      <ApplicationsList apps={apps} onSelect={selectApp} headerActions={freshness} />
+      <ApplicationsList
+        apps={apps}
+        onSelect={selectApp}
+        headerActions={freshness}
+      />
     </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 }) {
+// the resources-view topology over the app's namespaces and the per-workload
+// WorkloadView. 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 navigate = useNavigate();
+  const timelineSource = useTimelineSource();
   const appNamespaces = useMemo(
-    () => Array.from(new Set((app.workloads ?? []).map((w) => w.namespace).filter(Boolean))).sort(),
+    () =>
+      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 appHistoryNamespaces = useMemo(() => {
+    const namespaces = new Set(appNamespaces);
+    if (app.sourceRef?.namespace) namespaces.add(app.sourceRef.namespace);
+    return Array.from(namespaces).sort();
+  }, [app.sourceRef?.namespace, appNamespaces]);
+  const { data: topology, isLoading: topologyLoading } = useTopology(
+    appNamespaces,
+    "resources",
+    {
+      enabled: appNamespaces.length > 0,
+      includeReplicaSets: true,
+      refetchInterval: 10_000,
+    },
+  );
+  const issuesQuery = useIssues(appNamespaces);
+  const appIssues = useMemo(
+    () =>
+      appIssuesForWorkloads(
+        issuesQuery.data?.issues ?? [],
+        app.workloads ?? [],
+      ),
+    [issuesQuery.data?.issues, app.workloads],
+  );
+
+  // The selected workload (?workload=<key>) is the scope switch and wins over
+  // ?view= when both are present. With neither param, use the product default:
+  // multi-workload apps open on app overview, single-workload apps open on the
+  // workload. A single-workload app does not expose app scope.
+  const [searchParams, setSearchParams] = useSearchParams();
+  const viewParam = searchParams.get("view");
+  const selectedRouteView = parseApplicationView(viewParam);
+  const selectedView: ApplicationView =
+    selectedRouteView === "cost" ? "overview" : selectedRouteView;
+  const selectedWorkloadParam = searchParams.get("workload");
+  const appWorkloads = app.workloads ?? [];
+  const singleWorkloadKey =
+    appWorkloads.length === 1 ? workloadKey(appWorkloads[0]) : null;
+  const selectedWorkloadKey = singleWorkloadKey ?? selectedWorkloadParam;
+  const applicationCostAvailable =
+    !singleWorkloadKey &&
+    appWorkloads.some((workload) => isOpenCostWorkloadKind(workload.kind));
+  const applicationCostSelected =
+    selectedRouteView === "cost" && applicationCostAvailable;
+  const historyQuery = useApplicationHistory(app.key, appHistoryNamespaces, {
+    enabled: !selectedWorkloadKey,
+  });
+  const [retainedHistoryRange, setRetainedHistoryRange] =
+    useState<ApplicationHistoryRange>("7d");
+  const historyRangeOptions = useMemo(
+    () =>
+      applicationHistoryRangeOptions(
+        timelineSource.capabilities.mode,
+        timelineSource.capabilities.maxRangeDays,
+      ),
+    [
+      timelineSource.capabilities.maxRangeDays,
+      timelineSource.capabilities.mode,
+    ],
+  );
+  const historyRange =
+    timelineSource.capabilities.mode === "local"
+      ? "all"
+      : historyRangeOptions.some(
+            (option) => option.value === retainedHistoryRange,
+          )
+        ? retainedHistoryRange
+        : historyRangeOptions[0].value;
+  const historyTimelineEnabled =
+    !selectedWorkloadKey && selectedView === "history";
+  const historyTimelineQuery = timelineSource.useEvents({
+    namespaces: appHistoryNamespaces,
+    timeRange: historyRange,
+    filter: "all",
+    includeK8sEvents: true,
+    includeManaged: true,
+    includeDeleted: true,
+    limit: APPLICATION_HISTORY_EVENT_LIMIT,
+    enabled: historyTimelineEnabled,
+  });
+  const historyRuntimeLimited = useMemo(() => {
+    if (timelineSource.capabilities.mode !== "retained") return false;
+    const events = historyTimelineQuery.data;
+    if (!events || events.length < APPLICATION_HISTORY_EVENT_LIMIT)
+      return false;
+    const oldestTimestamp = events.reduce((oldest, event) => {
+      const timestamp = new Date(event.timestamp).getTime();
+      return Number.isFinite(timestamp) ? Math.min(oldest, timestamp) : oldest;
+    }, Number.POSITIVE_INFINITY);
+    if (!Number.isFinite(oldestTimestamp)) return false;
+    const configuredWindow = APPLICATION_HISTORY_WINDOW[historyRange];
+    const rangeMs =
+      configuredWindow === "all"
+        ? (timelineSource.capabilities.maxRangeDays ??
+            DEFAULT_RETAINED_HISTORY_DAYS) *
+          24 *
+          60 *
+          60 *
+          1000
+        : configuredWindow;
+    return oldestTimestamp > Date.now() - rangeMs + 60_000;
+  }, [
+    historyRange,
+    historyTimelineQuery.data,
+    timelineSource.capabilities.maxRangeDays,
+    timelineSource.capabilities.mode,
+  ]);
+  const historyMembership = useMemo(
+    () => buildAppMembershipIndex([app]),
+    [app],
+  );
+  const applicationEvents = useMemo(
+    () =>
+      eventsForApplication(
+        historyTimelineQuery.data ?? [],
+        topology,
+        historyMembership,
+      ),
+    [historyMembership, historyTimelineQuery.data, topology],
+  );
+  const historyItems = useMemo(
+    () => buildApplicationHistoryItems(historyQuery.data, applicationEvents),
+    [applicationEvents, historyQuery.data],
+  );
+  const sourceInventoryEnabled =
+    !selectedWorkloadKey && selectedView === "topology";
+  const gitOpsSource =
+    app.sourceRef?.type === "gitops" ? app.sourceRef : undefined;
+  const deploymentTreeQuery = useGitOpsTree(
+    gitOpsSource?.kind ?? "",
+    gitOpsSource?.namespace ?? "",
+    gitOpsSource?.name ?? "",
+    gitOpsSource?.group,
+    appHistoryNamespaces,
+    { enabled: sourceInventoryEnabled },
+  );
+  const helmSource = app.sourceRef?.type === "helm" ? app.sourceRef : undefined;
+  const helmReleaseQuery = useHelmRelease(
+    helmSource?.namespace ?? "",
+    helmSource?.name ?? "",
+    { enabled: sourceInventoryEnabled },
+  );
+  const deploymentInventory = useMemo(
+    () =>
+      deploymentInventoryFromGitOps(deploymentTreeQuery.data) ??
+      deploymentInventoryFromHelm(helmReleaseQuery.data?.resources),
+    [deploymentTreeQuery.data, helmReleaseQuery.data?.resources],
+  );
+  useEffect(() => {
+    if (!singleWorkloadKey) return;
+    if (selectedWorkloadParam === singleWorkloadKey && !viewParam) return;
+    const params = new URLSearchParams(searchParams);
+    params.delete("view");
+    params.delete("run");
+    params.set("workload", singleWorkloadKey);
+    if (selectedRouteView === "cost") params.set("tab", "cost");
+    setSearchParams(params, { replace: true });
+  }, [
+    searchParams,
+    selectedRouteView,
+    selectedWorkloadParam,
+    setSearchParams,
+    singleWorkloadKey,
+    viewParam,
+  ]);
+  useEffect(() => {
+    if (
+      singleWorkloadKey ||
+      selectedRouteView !== "cost" ||
+      applicationCostAvailable
+    )
+      return;
+    const params = new URLSearchParams(searchParams);
+    params.delete("view");
+    setSearchParams(params, { replace: true });
+  }, [
+    applicationCostAvailable,
+    searchParams,
+    selectedRouteView,
+    setSearchParams,
+    singleWorkloadKey,
+  ]);
+  const selectView = useCallback(
+    (view: ApplicationRouteView) => {
+      const params = new URLSearchParams(searchParams);
+      params.delete("tab");
+      params.delete("run");
+      if (singleWorkloadKey) {
+        params.delete("view");
+        params.set("workload", singleWorkloadKey);
+      } else if (view === "cost") {
+        params.set("view", "cost");
+        params.delete("workload");
+      } else if (view === "overview") {
+        params.delete("view");
+        params.delete("workload");
+      } else {
+        params.set("view", view);
+        params.delete("workload");
+      }
+      setSearchParams(params);
+    },
+    [searchParams, setSearchParams, singleWorkloadKey],
+  );
   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)
+    (key: string | null, options?: { tab?: string }) => {
+      const params = new URLSearchParams(searchParams);
+      params.delete("run");
+      if (key) {
+        const wasInWorkloadScope = !!selectedWorkloadKey;
+        params.delete("view");
+        params.set("workload", key);
+        if (options?.tab) params.set("tab", options.tab);
+        else if (!wasInWorkloadScope) params.delete("tab");
+      } else if (singleWorkloadKey) {
+        params.delete("view");
+        params.set("workload", singleWorkloadKey);
+      } else {
+        params.delete("workload");
+        params.delete("tab");
+        params.delete("view");
+      }
+      setSearchParams(params);
+    },
+    [searchParams, selectedWorkloadKey, setSearchParams, singleWorkloadKey],
+  );
+  const selectWorkloadRun = useCallback(
+    (
+      workload: SelectedAppWorkload,
+      run: { kind: string; name: string; data: Record<string, unknown> },
+    ) => {
+      const params = new URLSearchParams(searchParams);
+      const runNamespace =
+        typeof run.data?.namespace === "string"
+          ? run.data.namespace
+          : workload.namespace;
+      params.delete("view");
+      params.delete("tab");
+      params.set("workload", workloadKey(workload));
+      params.set(
+        "run",
+        `${kindToPlural(run.kind)}/${runNamespace}/${run.name}`,
+      );
+      setSearchParams(params);
     },
     [searchParams, setSearchParams],
-  )
+  );
+  const openWorkloadResource = useCallback(
+    (resource: SelectedResource) => {
+      if (kindToPlural(resource.kind).toLowerCase() !== "pods") {
+        onOpenResource(resource);
+        return;
+      }
+
+      const [pathname, rawSearch = ""] = buildWorkloadPath({
+        ...resource,
+        kind: kindToPlural(resource.kind),
+      }).split("?");
+      const params = new URLSearchParams(rawSearch);
+      const activeNamespaces = searchParams.get("namespaces");
+      if (activeNamespaces) params.set("namespaces", activeNamespaces);
+      navigate({ pathname, search: params.toString() });
+    },
+    [navigate, onOpenResource, searchParams],
+  );
+  const openSource = useCallback(
+    (source: AppSourceRef) => {
+      if (source.type === "gitops") {
+        const path = gitOpsRouteForKind(
+          source.kind,
+          source.namespace,
+          source.name,
+        );
+        if (path) navigate(path);
+        return;
+      }
+      if (source.type === "helm") {
+        const params = new URLSearchParams();
+        const activeNamespaces = searchParams.get("namespaces");
+        if (activeNamespaces) params.set("namespaces", activeNamespaces);
+        params.set("release", `${source.namespace}/${source.name}`);
+        navigate({ pathname: "/helm", search: params.toString() });
+      }
+    },
+    [navigate, searchParams],
+  );
+  const openApplicationTimeline = useCallback(
+    (timestamp?: string) => {
+      const params = new URLSearchParams();
+      params.set("app", app.key);
+      params.set("scopeNamespaces", appHistoryNamespaces.join(","));
+      params.set("grouping", "app");
+      const latestTimestamp = timestamp
+        ? new Date(timestamp).getTime()
+        : Number.NaN;
+      if (Number.isFinite(latestTimestamp)) {
+        const to = Math.min(
+          Date.now(),
+          latestTimestamp + APPLICATION_TIMELINE_AFTER_MS,
+        );
+        params.set("from", String(to - APPLICATION_TIMELINE_FOCUS_MS));
+        params.set("to", String(to));
+      } else {
+        params.set("window", String(APPLICATION_HISTORY_WINDOW[historyRange]));
+      }
+      navigate({ pathname: "/timeline", search: params.toString() });
+    },
+    [app.key, appHistoryNamespaces, historyRange, navigate],
+  );
 
   // App identity switcher data: this instance's siblings (ladder-ordered
   // digests). It switches between REAL instances — ?app= changes, deep links
@@ -151,10 +536,17 @@ function AppDetailRoute({ app, apps, onBack, onOpenResource }: { app: AppRow; ap
     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;
+      (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))
+      .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,
@@ -174,27 +566,50 @@ function AppDetailRoute({ app, apps, onBack, onOpenResource }: { app: AppRow; ap
     (targetKey: string) => {
       const target = apps.find((a) => a.key === targetKey);
       const params = new URLSearchParams(searchParams);
-      params.set('app', targetKey);
-      const wk = params.get('workload');
+      params.set("app", targetKey);
+      params.delete("run");
+      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);
+        const identityEnvs = new Set(
+          (identityInstances ?? []).map((i) => i.env),
+        );
+        const m = matchWorkloadAcrossInstances(
+          wk,
+          target.workloads,
+          identityEnvs,
+        );
         if (m) {
-          params.set('workload', workloadKey(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');
+        // instance's default scope and say so. Single-workload instances default
+        // to their workload; composed apps default to app overview.
+        params.delete("workload");
+        params.delete("tab");
+        const soleTargetWorkload =
+          target?.workloads?.length === 1 ? target.workloads[0] : null;
+        if (soleTargetWorkload) {
+          params.delete("view");
+          params.set("workload", workloadKey(soleTargetWorkload));
+        } else {
+          params.delete("view");
+        }
         if (target) {
-          showToast(`No matching workload in ${target.identity?.env ?? target.name}`, { detail: 'Showing the instance overview instead.', type: 'info' });
+          showToast(
+            `No matching workload in ${target.identity?.env ?? target.name}`,
+            {
+              detail: soleTargetWorkload
+                ? "Showing the instance workload instead."
+                : "Showing the instance overview instead.",
+              type: "info",
+            },
+          );
         }
       }
       setSearchParams(params);
@@ -203,39 +618,319 @@ function AppDetailRoute({ app, apps, onBack, onOpenResource }: { app: AppRow; ap
   );
 
   const discoveredEnvs = useMemo(
-    () => new Set(apps.map((a) => a.identity?.env).filter((e): e is string => !!e)),
+    () =>
+      new Set(apps.map((a) => a.identity?.env).filter((e): e is string => !!e)),
     [apps],
   );
 
   return (
-    <div className="flex-1 overflow-auto">
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
       <ApplicationDetail
         app={app}
         onBack={onBack}
         topology={topology}
         topologyLoading={topologyLoading}
+        deploymentInventory={deploymentInventory}
         identityInstances={identityInstances}
         onSwitchInstance={switchInstance}
         discoveredEnvs={discoveredEnvs}
         onNavigateToResource={onOpenResource}
+        onSelectWorkloadRun={selectWorkloadRun}
+        history={historyQuery.data}
+        historyLoading={historyQuery.isLoading}
+        historyItems={historyItems}
+        historyRuntimeLoading={historyTimelineQuery.isFetching}
+        historyRuntimeError={historyTimelineQuery.isError}
+        historyMode={timelineSource.capabilities.mode}
+        historyRange={historyRange}
+        historyRangeOptions={historyRangeOptions}
+        historyCoverageRecordCount={historyTimelineQuery.coverage?.length ?? 0}
+        historyRuntimeLimited={historyRuntimeLimited}
+        onHistoryRangeChange={setRetainedHistoryRange}
+        onOpenTimeline={openApplicationTimeline}
+        onOpenSource={openSource}
         selectedWorkloadKey={selectedWorkloadKey}
         onSelectWorkload={selectWorkload}
+        selectedView={selectedView}
+        onSelectView={selectView}
+        costViewSelected={applicationCostSelected}
+        onSelectCostView={() => selectView("cost")}
+        renderCostView={
+          applicationCostAvailable
+            ? ({ app, workloads, onSelectWorkload }) => (
+                <ApplicationCostTab
+                  app={app}
+                  workloads={workloads}
+                  onSelectWorkloadCost={(workload) =>
+                    onSelectWorkload(workload, { tab: "cost" })
+                  }
+                />
+              )
+            : undefined
+        }
+        renderOverviewIssues={() => (
+          <AppOverviewIssues
+            issues={appIssues}
+            error={issuesQuery.error}
+            hasData={Boolean(issuesQuery.data)}
+            visibility={issuesQuery.data?.visibility}
+            onOpenResource={onOpenResource}
+          />
+        )}
+        hasOverviewIssues={appIssues.length > 0}
         renderWorkload={(workload: SelectedAppWorkload) => (
           <div className="h-full overflow-hidden">
             <WorkloadView
               kind={kindToPlural(workload.kind)}
+              group={workload.group}
               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}
+              hideBackButton
               compactHeader
-              onNavigateToResource={onOpenResource}
+              pushTabHistory
+              onNavigateToResource={openWorkloadResource}
             />
           </div>
         )}
       />
     </div>
-  )
+  );
+}
+
+function applicationHistoryRangeOptions(
+  mode: "local" | "retained",
+  maxRangeDays?: number,
+): Array<{ value: ApplicationHistoryRange; label: string }> {
+  if (mode === "local") return [{ value: "all", label: "All observed" }];
+  const maxDays = maxRangeDays ?? DEFAULT_RETAINED_HISTORY_DAYS;
+  const options: Array<{ value: ApplicationHistoryRange; label: string }> = [];
+  if (maxDays >= 1) options.push({ value: "24h", label: "24 hours" });
+  if (maxDays >= 7) options.push({ value: "7d", label: "7 days" });
+  if (maxDays >= 30) options.push({ value: "30d", label: "30 days" });
+  options.push({ value: "all", label: "All available" });
+  return options;
+}
+
+function AppOverviewIssues({
+  issues,
+  error,
+  hasData,
+  visibility,
+  onOpenResource,
+}: {
+  issues: Issue[];
+  error: unknown;
+  hasData: boolean;
+  visibility?: IssuesResponse["visibility"];
+  onOpenResource: (resource: SelectedResource) => void;
+}) {
+  const [openId, setOpenId] = useState<string | null>(null);
+  const sorted = useMemo(
+    () => [...issues].sort(compareAppOverviewIssues),
+    [issues],
+  );
+
+  if (error && !hasData) {
+    return (
+      <AppOverviewIssuesState
+        headline="Operational issues unavailable"
+        body={
+          error instanceof Error
+            ? error.message
+            : "Radar could not load issues for this application."
+        }
+      />
+    );
+  }
+
+  if (error) {
+    return (
+      <section className="space-y-2">
+        <AppOverviewIssuesState
+          headline="Operational issue refresh failed"
+          body="Showing the last successful result for this application."
+        />
+        {sorted.length > 0 && (
+          <AppOverviewIssueRows
+            issues={sorted}
+            openId={openId}
+            setOpenId={setOpenId}
+            onOpenResource={onOpenResource}
+          />
+        )}
+      </section>
+    );
+  }
+
+  if (visibility?.impact) {
+    return (
+      <section className="space-y-2">
+        <AppOverviewIssuesState
+          headline={
+            sorted.length === 0
+              ? "No visible operational issues"
+              : "Operational issue visibility is limited"
+          }
+          body={`${visibility.impact} Results may be incomplete.`}
+        />
+        {sorted.length > 0 && (
+          <AppOverviewIssueRows
+            issues={sorted}
+            openId={openId}
+            setOpenId={setOpenId}
+            onOpenResource={onOpenResource}
+          />
+        )}
+      </section>
+    );
+  }
+
+  if (sorted.length === 0) return null;
+
+  return (
+    <AppOverviewIssueRows
+      issues={sorted}
+      openId={openId}
+      setOpenId={setOpenId}
+      onOpenResource={onOpenResource}
+    />
+  );
+}
+
+function AppOverviewIssuesState({
+  headline,
+  body,
+}: {
+  headline: string;
+  body: string;
+}) {
+  return (
+    <section className="rounded-lg border border-theme-border bg-theme-surface px-4 py-3 shadow-theme-sm">
+      <div className="flex items-start gap-3">
+        <AlertTriangle
+          className={`mt-0.5 h-4 w-4 shrink-0 ${SEVERITY_TEXT.warning}`}
+          aria-hidden
+        />
+        <div className="min-w-0">
+          <h2 className="text-sm font-semibold text-theme-text-primary">
+            {headline}
+          </h2>
+          <p className="mt-0.5 text-sm text-theme-text-secondary">{body}</p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function AppOverviewIssueRows({
+  issues: sorted,
+  openId,
+  setOpenId,
+  onOpenResource,
+}: {
+  issues: Issue[];
+  openId: string | null;
+  setOpenId: (value: string | null) => void;
+  onOpenResource: (resource: SelectedResource) => void;
+}) {
+  const navigate = (ref: IssueResourceRef) => {
+    onOpenResource({
+      kind: kindToPlural(ref.kind),
+      namespace: ref.namespace ?? "",
+      name: ref.name,
+      group: ref.group ?? "",
+    });
+  };
+
+  return (
+    <section className="space-y-2">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2 text-sm font-semibold text-theme-text-primary">
+          <AlertTriangle
+            className="h-4 w-4 shrink-0 text-theme-text-secondary"
+            aria-hidden
+          />
+          <span>Operational Issues</span>
+          <span className="badge-sm text-[10px] text-theme-text-secondary">
+            {sorted.length}
+          </span>
+        </div>
+        <span className="text-xs text-theme-text-tertiary">
+          Scoped to this application
+        </span>
+      </div>
+      <ol className="flex flex-col gap-1.5">
+        {sorted.slice(0, 4).map((issue) => {
+          const rowKey = `${issue.cluster_id ?? ""}:${issue.id}`;
+          return (
+            <IssueRow
+              key={rowKey}
+              issue={issue}
+              open={openId === rowKey}
+              onToggle={() => setOpenId(openId === rowKey ? null : rowKey)}
+              onResourceClick={navigate}
+            />
+          );
+        })}
+      </ol>
+      {sorted.length > 4 ? (
+        <div className="text-xs text-theme-text-tertiary">
+          Showing 4 of {sorted.length} issues. Open Issues for the full queue.
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+function compareAppOverviewIssues(a: Issue, b: Issue): number {
+  const severity =
+    ISSUE_SEVERITY_RANK[b.severity] - ISSUE_SEVERITY_RANK[a.severity];
+  if (severity !== 0) return severity;
+  const fa = a.first_seen ?? "";
+  const fb = b.first_seen ?? "";
+  if (fa !== fb) return fb.localeCompare(fa);
+  const ns = (a.namespace ?? "").localeCompare(b.namespace ?? "");
+  if (ns !== 0) return ns;
+  const name = a.name.localeCompare(b.name);
+  if (name !== 0) return name;
+  return a.id.localeCompare(b.id);
+}
+
+function appIssuesForWorkloads(
+  issues: Issue[],
+  workloads: AppWorkload[],
+): Issue[] {
+  if (issues.length === 0 || workloads.length === 0) return [];
+  const workloadKeys = new Set(workloads.map(workloadIssueKey));
+  const out: Issue[] = [];
+  const seen = new Set<string>();
+  for (const issue of issues) {
+    if (!issueRefs(issue).some((ref) => workloadKeys.has(issueRefKey(ref))))
+      continue;
+    if (seen.has(issue.id)) continue;
+    seen.add(issue.id);
+    out.push(issue);
+  }
+  return out;
+}
+
+function workloadIssueKey(workload: AppWorkload): string {
+  return `${workload.kind.toLowerCase()}|${workload.namespace}|${workload.name}`;
+}
+
+function issueRefKey(ref: IssueResourceRef): string {
+  return `${ref.kind.toLowerCase()}|${ref.namespace ?? ""}|${ref.name}`;
+}
+
+function issueRefs(issue: Issue): IssueResourceRef[] {
+  const refs: IssueResourceRef[] = [subjectRef(issue)];
+  if (issue.owner) refs.push(issue.owner);
+  if (issue.incident_parent?.ref) refs.push(issue.incident_parent.ref);
+  for (const member of issue.members ?? []) refs.push(memberRef(issue, member));
+  for (const fact of issue.diagnostic_context?.facts ?? []) {
+    refs.push(...(fact.refs ?? []));
+    for (const related of fact.related_issues ?? []) refs.push(related.ref);
+  }
+  return refs;
 }