@skyhook-io/radar-app 1.16.3 → 1.17.0

package/src/components/diagnose/DiagnoseContext.tsx

@@ -60,15 +60,31 @@ export type DiagnoseView = "home" | "investigation";
 // Setup readiness of local AI investigations, derived from the agents API:
 //  - "ready":         an agent is installed and the engine is running (available)
 //  - "needs-install": the feature is supported here but no agent CLI is installed
-//  - "needs-restart": a supported agent is now on PATH but Radar booted before it
-//                     existed (the engine is decided once, at startup)
+//  - "needs-restart": a supported agent is installed but investigations are
+//                     still off. The server picks up new installs whenever the
+//                     agent list is fetched, so locally this means RADAR_AI_CLI_BIN
+//                     pins the engine to a file Radar can't run (cliOverride); an
+//                     embedding host may report it when its own runner is down
 //  - "off":           not available in this deployment (proxy/OIDC auth, --no-mcp,
 //                     or an embed host) — no install nudge would help
-export type DiagnoseSetup = "ready" | "needs-install" | "needs-restart" | "off";
+//  - "unknown":       the agents probe hasn't answered (in flight, or it failed
+//                     and was swallowed). Nothing about the machine or the
+//                     deployment is established yet, so say nothing about either
+export type DiagnoseSetup =
+  "ready" | "needs-install" | "needs-restart" | "off" | "unknown";
 
 interface DiagnoseCtx {
   available: boolean; // an agent CLI is present (button/entry gate)
   setupState: DiagnoseSetup; // readiness for the setup nudge (see DiagnoseSetup)
+  // Re-reads the agent list; the server turns investigations on if a CLI was
+  // installed since the last check. Resolves once the new state is applied.
+  recheckAgents: () => Promise<void>;
+  checkingAgents: boolean;
+  // The latest agent check failed to reach the server, so nothing about the
+  // machine is known from it.
+  agentsCheckFailed: boolean;
+  // RADAR_AI_CLI_BIN is set; with "needs-restart" it is what's broken.
+  cliOverride: boolean;
   agentLabel: string; // label of the selected agent, e.g. "Claude Code"
   hosted: boolean; // selected agent runs on the host's backend, not this machine
   agents: AgentInfo[]; // supported agents detected on PATH (for the picker)
@@ -172,6 +188,31 @@ const MIN_APP_LEFT_OF_PANEL = 900;
 // area instead. Radar's own minimum width is about 856px, so this is the
 // drawer's floor: below it the investigation is the screen.
 const MIN_APP_PEEK_BESIDE_OVERLAY = 320;
+// resolveSetupState is the ONE mapping from the agents probe to what every
+// surface renders. Exported so it can be pinned by test, since each state drives
+// a different user-facing claim.
+//
+// "unknown" is not the same as "off". `eligible` starts false and the probe's
+// catch leaves it that way, so without a separate state a pending or failed
+// request reads as a confirmed deployment restriction. A non-empty agent list
+// while the engine is off means a drivable CLI appeared after Radar booted.
+export function resolveSetupState({
+  available,
+  eligibilityResolved,
+  eligible,
+  supportedAgentCount,
+}: {
+  available: boolean;
+  eligibilityResolved: boolean;
+  eligible: boolean;
+  supportedAgentCount: number;
+}): DiagnoseSetup {
+  if (available) return "ready";
+  if (!eligibilityResolved) return "unknown";
+  if (!eligible) return "off";
+  return supportedAgentCount > 0 ? "needs-restart" : "needs-install";
+}
+
 export function investigationPanelFillsViewport(
   viewportWidth: number,
   panelWidth: number,
@@ -452,52 +493,79 @@ function RoutedDiagnoseProvider({
   const narrow = viewportW - width < MIN_APP_LEFT_OF_PANEL;
   const fullWidthForced = investigationPanelFillsViewport(viewportW, width);
 
+  const mountedRef = useRef(true);
   useEffect(() => {
-    let live = true;
-    fetchAgents()
-      .then((r) => {
-        if (!live) return;
-        setConsented(r.consented ?? {});
-        setEligible(!!r.eligible);
-        const supported = r.agents.filter(
-          (a) =>
-            a.supported &&
-            (a.hosted ||
-              (!!a.profiles?.length &&
-                a.profiles.every((p) => !!a.consentSurfaces?.[p]))),
-        );
-        setAvailable(r.enabled && supported.length > 0);
-        setAgents(supported);
-        // Keep the stored pick only if it's still installed; else default to the
-        // first supported agent (matches the server's default selection).
-        const stored = readStored(AGENT_KEY) || "";
-        const next =
-          stored && supported.some((a) => a.name === stored)
-            ? stored
-            : (supported[0]?.name ?? "");
-        setSelectedAgentState(next);
-        const profiles = supported.find((a) => a.name === next)?.profiles ?? [];
-        const storedProfile =
-          (readStored(PROFILE_KEY) as ExecutionProfile) || "safeguarded";
-        if (!profiles.includes(storedProfile) && profiles[0]) {
-          setProfileState(profiles[0]);
-          writeStored(PROFILE_KEY, profiles[0]);
-        }
-        // Model/effort are agent-specific; if the stored agent is gone, its values
-        // don't apply to the fallback agent (e.g. a Codex slug under Claude) — drop them.
-        if (next !== stored) {
-          setModelState("");
-          writeStored(MODEL_KEY, "");
-          setEffortState("");
-          writeStored(EFFORT_KEY, "");
-        }
-        setAgentEligibilityResolved(true);
-      })
-      .catch(() => {});
+    mountedRef.current = true;
     return () => {
-      live = false;
+      mountedRef.current = false;
     };
   }, []);
+  const [checkingAgents, setCheckingAgents] = useState(false);
+  const [agentsCheckFailed, setAgentsCheckFailed] = useState(false);
+  const [cliOverride, setCliOverride] = useState(false);
+  // A click and a window-focus re-check can overlap; only the newest one may
+  // apply its answer, or a stale "nothing installed" could land last.
+  const agentCheckSeq = useRef(0);
+  // The agent in use now, picked by hand or by default. A check compares
+  // against it, not just the stored pick, so seeing the same agent again
+  // keeps the model and effort set for it.
+  const agentInUseRef = useRef(selectedAgent);
+  const recheckAgents = useCallback(async () => {
+    const seq = ++agentCheckSeq.current;
+    const latest = () => mountedRef.current && seq === agentCheckSeq.current;
+    setCheckingAgents(true);
+    try {
+      const r = await fetchAgents();
+      if (!latest()) return;
+      setAgentsCheckFailed(false);
+      setCliOverride(!!r.cliOverride);
+      setConsented(r.consented ?? {});
+      setEligible(!!r.eligible);
+      const supported = r.agents.filter(
+        (a) =>
+          a.supported &&
+          (a.hosted ||
+            (!!a.profiles?.length &&
+              a.profiles.every((p) => !!a.consentSurfaces?.[p]))),
+      );
+      setAvailable(r.enabled && supported.length > 0);
+      setAgents(supported);
+      // Keep the stored pick only if it's still installed; else default to the
+      // first supported agent. Runs always name it, so the server's own default
+      // doesn't apply.
+      const stored = readStored(AGENT_KEY) || "";
+      const next =
+        stored && supported.some((a) => a.name === stored)
+          ? stored
+          : (supported[0]?.name ?? "");
+      setSelectedAgentState(next);
+      const profiles = supported.find((a) => a.name === next)?.profiles ?? [];
+      const storedProfile =
+        (readStored(PROFILE_KEY) as ExecutionProfile) || "safeguarded";
+      if (!profiles.includes(storedProfile) && profiles[0]) {
+        setProfileState(profiles[0]);
+        writeStored(PROFILE_KEY, profiles[0]);
+      }
+      // Model/effort are agent-specific; if the agent changed, its values
+      // don't apply to the new one (e.g. a Codex slug under Claude), so drop them.
+      if (next !== agentInUseRef.current) {
+        setModelState("");
+        writeStored(MODEL_KEY, "");
+        setEffortState("");
+        writeStored(EFFORT_KEY, "");
+      }
+      agentInUseRef.current = next;
+      setAgentEligibilityResolved(true);
+    } catch {
+      // Leaves the previous state in place; "unknown" until a probe answers.
+      if (latest()) setAgentsCheckFailed(true);
+    } finally {
+      if (latest()) setCheckingAgents(false);
+    }
+  }, []);
+  useEffect(() => {
+    void recheckAgents();
+  }, [recheckAgents]);
 
   const setModel = useCallback((v: string) => {
     setModelState(v);
@@ -511,6 +579,7 @@ function RoutedDiagnoseProvider({
     (name: string) => {
       setSelectedAgentState(name);
       writeStored(AGENT_KEY, name);
+      agentInUseRef.current = name;
       const nextProfile = agents.find((agent) => agent.name === name)
         ?.profiles?.[0];
       if (nextProfile) {
@@ -541,15 +610,21 @@ function RoutedDiagnoseProvider({
     ? "standard"
     : (selectedAgentInfo?.consentSurfaces?.[effectiveProfile] ?? "");
 
-  // `agents` holds only supported CLIs (filtered on fetch), so a non-empty list
-  // while the engine is off means a drivable agent appeared on PATH after boot.
-  const setupState: DiagnoseSetup = available
-    ? "ready"
-    : !eligible
-      ? "off"
-      : agents.length > 0
-        ? "needs-restart"
-        : "needs-install";
+  const setupState = resolveSetupState({
+    available,
+    eligibilityResolved: agentEligibilityResolved,
+    eligible,
+    supportedAgentCount: agents.length,
+  });
+
+  // Coming back from a terminal after installing a CLI is when to look again,
+  // so the setup notice clears without the user hunting for a button.
+  useEffect(() => {
+    if (setupState === "ready" || setupState === "off") return;
+    const onFocus = () => void recheckAgents();
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [setupState, recheckAgents]);
 
   useEffect(() => {
     const onResize = () => setViewportW(window.innerWidth);
@@ -701,6 +776,9 @@ function RoutedDiagnoseProvider({
         writeFocusedRunID(run.id, true);
       })
       .catch((e) => {
+        // The picked agent may have been uninstalled since the list was
+        // fetched; refresh it so the picker shows what's installed now.
+        void recheckAgents();
         if (seq !== startSeqRef.current) return;
         setStartFailure({
           message:
@@ -1021,6 +1099,10 @@ function RoutedDiagnoseProvider({
   const value: DiagnoseCtx = {
     available,
     setupState,
+    recheckAgents,
+    checkingAgents,
+    agentsCheckFailed,
+    cliOverride,
     agentLabel,
     hosted,
     agents,

package/src/components/diagnose/DiagnoseSurface.tsx

@@ -502,7 +502,8 @@ export function DiagnoseSurface({
   };
 
   // Feature is eligible here but not runnable yet (no agent installed, or one
-  // appeared after boot) — Home leads with the setup notice instead of an empty list.
+  // found that investigations couldn't start with): Home leads with the setup
+  // notice instead of an empty list.
   const setupPending =
     d.setupState === "needs-install" || d.setupState === "needs-restart";
 
@@ -617,7 +618,13 @@ export function DiagnoseSurface({
     </div>
   ) : setupPending ? (
     <div className="flex-1 overflow-y-auto">
-      <AgentSetupNotice setupState={d.setupState} />
+      <AgentSetupNotice
+        setupState={d.setupState}
+        cliOverride={d.cliOverride}
+        checkingAgents={d.checkingAgents}
+        agentsCheckFailed={d.agentsCheckFailed}
+        recheckAgents={d.recheckAgents}
+      />
     </div>
   ) : (
     <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-theme-text-tertiary">
@@ -639,7 +646,13 @@ export function DiagnoseSurface({
     </div>
   ) : setupPending ? (
     <div className="mx-auto w-full max-w-3xl px-4 py-8 sm:px-6">
-      <AgentSetupNotice setupState={d.setupState} />
+      <AgentSetupNotice
+        setupState={d.setupState}
+        cliOverride={d.cliOverride}
+        checkingAgents={d.checkingAgents}
+        agentsCheckFailed={d.agentsCheckFailed}
+        recheckAgents={d.recheckAgents}
+      />
     </div>
   ) : (
     <InvestigationHome

package/src/components/diagnose/InvestigationView.tsx

@@ -58,7 +58,9 @@ import {
   type KeyboardEvent,
 } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { Badge } from "@skyhook-io/k8s-ui";
+import { useNavigate } from "react-router-dom";
+import { Badge, gitOpsRouteForOwner, type GitOpsWrite } from "@skyhook-io/k8s-ui";
+import { useGitOpsWriteGuard } from "../../hooks/useGitOpsWriteGuard";
 import {
   Send,
   AlertTriangle,
@@ -264,6 +266,8 @@ function captureEvidenceCardLayout(container: HTMLElement) {
   );
 }
 
+const APPLY_WRITES: GitOpsWrite[] = [{ scope: "spec", description: "The proposed change" }];
+
 export function InvestigationView({
   run,
   agentLabel,
@@ -949,6 +953,38 @@ export function InvestigationView({
   // Apply: a user-confirmed remediation turn. Any step is applyable; the chosen
   // step's text is sent so the server binds the apply to it.
   const [confirmApply, setConfirmApply] = useState(false);
+  // The agent's change can touch any field of the target, so the guard
+  // classifies an unknown spec write.
+  const { guard: applyGitOpsGuard, ownership: applyOwnership } =
+    useGitOpsWriteGuard({
+      target: { kind, group: run.group, namespace, name },
+      writes: APPLY_WRITES,
+      declaredManager: run.managedBy,
+      enabled: confirmApply,
+    });
+  const navigateRouter = useNavigate();
+  const {
+    owner: applyOwner,
+    ownerVerified: applyOwnerVerified,
+    helmOwner: applyHelmOwner,
+  } = applyOwnership;
+  const openApplyOwner = useMemo(() => {
+    // A host without resource navigation (Radar Hub's fleet Diagnose panel)
+    // has no route for the owner either.
+    if (!onOpenResource) return undefined;
+    const owner = applyOwner;
+    const helmOwner = applyHelmOwner;
+    if (owner && applyOwnerVerified) {
+      return () => navigateRouter(gitOpsRouteForOwner(owner));
+    }
+    if (helmOwner) {
+      return () =>
+        navigateRouter(
+          `/helm?release=${encodeURIComponent(`${helmOwner.namespace}/${helmOwner.name}`)}`,
+        );
+    }
+    return undefined;
+  }, [applyOwner, applyOwnerVerified, applyHelmOwner, navigateRouter, onOpenResource]);
   const [pendingFix, setPendingFix] = useState("");
   const requestApply = (fix: string) => {
     if (interactionsBlocked) return;
@@ -2546,7 +2582,8 @@ export function InvestigationView({
               ]?.precondition
             : undefined
         }
-        managedBy={run.managedBy}
+        gitOpsGuard={applyGitOpsGuard}
+        onOpenGitOpsOwner={openApplyOwner}
         confidence={turns[lastRemediationIdx]?.diagnosis?.confidence}
       />
     </div>

package/src/components/diagnose/LocalDiagnoseAction.tsx

@@ -1,13 +1,18 @@
 import { Loader2, Sparkles } from "lucide-react";
-import { useDiagnose, useDiagnoseLayout } from "./DiagnoseContext";
+import {
+  type DiagnoseSetup,
+  useDiagnose,
+  useDiagnoseLayout,
+} from "./DiagnoseContext";
 import { runTargetKey } from "./target";
 import { Tooltip } from "../ui/Tooltip";
 import type { RenderDiagnoseAction } from "../../context/DiagnoseCustomization";
 
 // The per-resource AI entry point. It no longer owns a panel — it just dispatches
 // to the single app-level AI surface (DiagnoseContext), opening a new investigation
-// for this resource. Self-hides when no agent CLI is present. Hosts can override
-// this slot with their own action.
+// for this resource. Hidden only where investigations can't run here; with no
+// agent CLI it stays, and opens the setup notice. Hosts can override this slot
+// with their own action.
 //
 // Adaptive by health: on a resource with a live problem it reads as a prominent
 // "Investigate" action; when the resource is fine or health is unknown it shrinks
@@ -33,13 +38,13 @@ function DiagnoseResourceButton({
   // Hidden only when the feature can't work here (auth/cloud/--no-mcp). When it's
   // supported but no agent is installed we KEEP the button — clicking opens the
   // setup notice so the feature is discoverable rather than silently absent.
-  if (d.setupState === "off") return null;
+  if (d.setupState === "off" || d.setupState === "unknown") return null;
   const ready = d.available;
   const problem = health === "problem";
   const running =
     ready && runningKeys.has(runTargetKey(kind, namespace, name, group ?? ""));
   const tooltip = !ready
-    ? "Set up AI investigations — runs your own agent locally."
+    ? notReadyTooltip(d)
     : running
       ? `${d.agentLabel} is investigating this resource — click to watch it live.`
       : d.hosted
@@ -67,7 +72,7 @@ function DiagnoseResourceButton({
         }
         aria-label={
           !ready
-            ? "Set up AI investigations"
+            ? notReadyTooltip(d)
             : running
               ? "Investigation running — click to view"
               : problem
@@ -122,18 +127,16 @@ export function IssueDiagnoseButton({
   name: string;
 }) {
   const d = useDiagnose();
-  if (d.setupState === "off") return null;
+  if (d.setupState === "off" || d.setupState === "unknown") return null;
   const ready = d.available;
   return (
     <Tooltip
       content={
-        d.setupState === "needs-restart"
-          ? "Restart Radar to enable AI investigations — a supported agent is installed"
-          : !ready
-            ? "Set up AI investigations — install a local agent"
-            : d.hosted
-              ? `Sends this resource's context to ${d.agentLabel} for investigation`
-              : `Runs ${d.agentLabel} on your machine to investigate this resource`
+        !ready
+          ? notReadyTooltip(d)
+          : d.hosted
+            ? `Sends this resource's context to ${d.agentLabel} for investigation`
+            : `Runs ${d.agentLabel} on your machine to investigate this resource`
       }
       position="left"
     >
@@ -158,12 +161,27 @@ export function IssueDiagnoseButton({
   );
 }
 
+// The tooltip every AI entry point shows while investigations aren't runnable.
+// It gives the same reason as the setup notice the button opens.
+function notReadyTooltip(d: {
+  cliOverride: boolean;
+  setupState: DiagnoseSetup;
+}): string {
+  if (d.cliOverride) {
+    return "AI investigations are off: can't run RADAR_AI_CLI_BIN";
+  }
+  if (d.setupState === "needs-restart") {
+    return "AI investigations aren't available right now";
+  }
+  return "Set up AI investigations";
+}
+
 // Global top-bar entry into the AI surface (opens its Home / recent
-// investigations). Self-hides when no agent CLI is present.
+// investigations). Hidden only where investigations can't run here.
 export function GlobalDiagnoseButton() {
   const d = useDiagnose();
   const { runningCount } = useDiagnoseLayout();
-  if (d.setupState === "off") return null;
+  if (d.setupState === "off" || d.setupState === "unknown") return null;
   const ready = d.available;
   const agentSuffix = d.hosted
     ? `powered by ${d.agentLabel}`
@@ -172,7 +190,7 @@ export function GlobalDiagnoseButton() {
     <Tooltip
       content={
         !ready
-          ? "Set up AI investigations — runs your own agent locally"
+          ? notReadyTooltip(d)
           : runningCount > 0
             ? `${runningCount} investigation${runningCount > 1 ? "s" : ""} running — ${agentSuffix}`
             : `AI investigations — ${agentSuffix}`
@@ -183,9 +201,11 @@ export function GlobalDiagnoseButton() {
         onClick={() => d.openWorkspace()}
         className="relative rounded-md bg-theme-elevated p-1.5 text-theme-text-secondary transition-colors hover:bg-theme-hover hover:text-theme-text-primary"
         aria-label={
-          runningCount > 0
-            ? `AI investigations (${runningCount} running)`
-            : "AI investigations"
+          !ready
+            ? notReadyTooltip(d)
+            : runningCount > 0
+              ? `AI investigations (${runningCount} running)`
+              : "AI investigations"
         }
       >
         <Sparkles className="h-4 w-4 text-accent" />

package/src/components/diagnose/agentCatalog.ts

@@ -13,7 +13,7 @@ export const SUPPORTED_AGENTS: AgentInstall[] = [
     name: "claude",
     label: "Claude Code",
     install: "npm install -g @anthropic-ai/claude-code",
-    docs: "https://docs.claude.com/en/docs/claude-code/setup",
+    docs: "https://code.claude.com/docs/en/setup",
   },
   {
     name: "codex",
@@ -25,7 +25,7 @@ export const SUPPORTED_AGENTS: AgentInstall[] = [
     name: "cursor-agent",
     label: "Cursor CLI",
     install: "curl https://cursor.com/install -fsS | bash",
-    docs: "https://docs.cursor.com/en/cli/overview",
+    docs: "https://cursor.com/docs/cli/overview",
   },
   {
     name: "opencode",

package/src/components/diagnose/diagnoseEvidenceTypes.ts

@@ -93,6 +93,8 @@ export interface DiagnosisResourceContext {
   };
   runsOn?: DiagnosisResourceRef;
   scaledBy?: DiagnosisScalerRef[];
+  dependencies?: DiagnosisResourceRef[];
+  dependents?: DiagnosisResourceRef[];
   statusSummary?: {
     phase?: string;
     conditions?: Array<{

package/src/components/dock/TrafficFlowListTab.tsx

@@ -1,18 +1,39 @@
 import { useTrafficFlowList } from '../traffic/TrafficFlowListContext'
 import { TrafficFlowList } from '../traffic/TrafficFlowList'
-import { List } from 'lucide-react'
+import { List, Loader2 } from 'lucide-react'
 
 export function TrafficFlowListTab() {
-  const { flows, responsesCallerOriented } = useTrafficFlowList()
+  const { flows, responsesCallerOriented, graphSelection, loading, note } = useTrafficFlowList()
 
-  if (flows.length === 0) {
+  if (loading) {
     return (
       <div className="flex items-center justify-center h-full text-sm text-theme-text-tertiary gap-2">
-        <List className="w-4 h-4" />
-        Navigate to Traffic view to see flows
+        <Loader2 className="w-4 h-4 animate-spin" />
+        Loading flows for the selection…
+      </div>
+    )
+  }
+
+  if (flows.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-1 px-4 text-center">
+        <div className="flex items-center gap-2 text-sm text-theme-text-tertiary">
+          <List className="w-4 h-4" />
+          {graphSelection ? 'No flow records for this selection' : 'Navigate to Traffic view to see flows'}
+        </div>
+        {note && <div className="text-[11px] text-theme-text-tertiary">{note}</div>}
       </div>
     )
   }
 
-  return <TrafficFlowList flows={flows} responsesCallerOriented={responsesCallerOriented} />
+  return (
+    <div className="flex flex-col h-full">
+      {note && (
+        <div className="px-3 py-1 border-b border-theme-border text-[11px] text-theme-text-tertiary">{note}</div>
+      )}
+      <div className="relative flex-1 min-h-0">
+        <TrafficFlowList flows={flows} responsesCallerOriented={responsesCallerOriented} />
+      </div>
+    </div>
+  )
 }

package/src/components/execution/BatchExecutionView.tsx

@@ -389,10 +389,10 @@ export function BatchExecutionFullscreen({ kind, apiKind, namespace, name, resou
                       </div>
                       <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-theme-text-tertiary">
                         <span>{RUN_KIND_LABEL[selectedRun.kind] ?? selectedRun.kind}</span>
-                        {selectedRun.startedAt && <span>started {formatAge(selectedRun.startedAt)}</span>}
+                        {selectedRun.startedAt && <span>started {formatTimeAgo(selectedRun.startedAt)}</span>}
                         {selectedRun.trigger === 'manual' && <span>manual trigger</span>}
                         {selectedRun.trigger === 'event' && <span>event triggered</span>}
-                        {selectedRun.scheduledAt && <span>scheduled {formatAge(selectedRun.scheduledAt)}</span>}
+                        {selectedRun.scheduledAt && <span>scheduled {formatTimeAgo(selectedRun.scheduledAt)}</span>}
                         {selectedResourceQuery.isFetching && <span>refreshing</span>}
                       </div>
                     </div>
@@ -568,8 +568,8 @@ function sourceFacts(kind: string, resource: any, runs: WorkloadRun[]) {
       duration: latest ? formatRunDuration(latest) : '',
       work: `${status.active?.length ?? 0} active`,
       facts: [
-        ['Last schedule', status.lastScheduleTime ? formatAge(status.lastScheduleTime) : 'Never'],
-        ['Last success', status.lastSuccessfulTime ? formatAge(status.lastSuccessfulTime) : 'Never'],
+        ['Last schedule', status.lastScheduleTime ? formatTimeAgo(status.lastScheduleTime) : 'Never'],
+        ['Last success', status.lastSuccessfulTime ? formatTimeAgo(status.lastSuccessfulTime) : 'Never'],
         ['Starting deadline', spec.startingDeadlineSeconds ? `${spec.startingDeadlineSeconds}s` : 'None'],
       ],
       definition,
@@ -818,15 +818,15 @@ function RunDetailList({ run, resource, workflowExecution, scheduledParent, memb
     ...(run.jobset?.replicatedJob ? [['Role', run.jobset?.replicatedJob]] as Array<[string, string]> : []),
     ...(run.jobset?.restartAttempt ? [['JobSet restart attempt', `#${run.jobset?.restartAttempt}`]] as Array<[string, string]> : []),
     ...(run.jobset?.jobRestartAttempt ? [['Job restart attempt', `#${run.jobset?.jobRestartAttempt}`]] as Array<[string, string]> : []),
-    ['Started', run.startedAt ? formatAge(run.startedAt) : '-'],
-    ['Finished', run.finishedAt ? formatAge(run.finishedAt) : run.active ? 'Running' : '-'],
+    ['Started', run.startedAt ? formatTimeAgo(run.startedAt) : '-'],
+    ['Finished', run.finishedAt ? formatTimeAgo(run.finishedAt) : run.active ? 'Running' : '-'],
     ['Duration', formatRunDuration(run) || '-'],
     ...(run.progress ? [['Progress', run.progress]] as Array<[string, string]> : []),
     ...(!memberCollection && (scheduledParent || run.trigger || run.scheduledAt) ? [
       ['Trigger', run.trigger === 'manual' ? 'Manual' : run.trigger === 'event' ? 'Event' : run.scheduledAt ? 'Cron schedule' : '-'],
     ] as Array<[string, string]> : []),
     ...(run.scheduledAt ? [
-      ['Cron scheduled', formatAge(run.scheduledAt)],
+      ['Cron scheduled', formatTimeAgo(run.scheduledAt)],
       ['Start delay', formatScheduleDelay(run) || '-'],
     ] as Array<[string, string]> : []),
     ['Parallelism', run.parallelism ? String(run.parallelism) : '-'],
@@ -1008,7 +1008,7 @@ function RunActivityRow({ item, runMessage }: { item: WorkflowExecutionActivity;
       <div className="min-w-0 flex-1">
         <div className="flex items-start justify-between gap-3">
           <div className="truncate text-sm font-medium text-theme-text-primary">{item.label}</div>
-          <div className="shrink-0 text-xs text-theme-text-tertiary">{formatAge(item.at)}</div>
+          <div className="shrink-0 text-xs text-theme-text-tertiary">{formatTimeAgo(item.at)}</div>
         </div>
         {item.detail && item.detail !== runMessage && item.tone !== 'danger' && <div className="mt-0.5 break-words text-xs text-theme-text-secondary">{item.detail}</div>}
       </div>
@@ -1539,10 +1539,10 @@ function formatRunDuration(run: WorkloadRun): string {
 
 function formatRunTime(run: WorkloadRun): string {
   const raw = run.startedAt || run.scheduledAt || run.finishedAt
-  return raw ? formatAge(raw) : ''
+  return raw ? formatTimeAgo(raw) : ''
 }
 
-function formatAge(value: string): string {
+function formatTimeAgo(value: string): string {
   const t = Date.parse(value)
   if (Number.isNaN(t)) return value
   const diff = Date.now() - t
@@ -1577,7 +1577,7 @@ function emptyRunsCopy(kind: string, resource: any): { headline: string; body: s
   }
   const lastScheduled = resource?.status?.lastScheduleTime || resource?.status?.lastScheduledTime
   if (lastScheduled) {
-    return { headline: 'No retained runs', body: `This resource last scheduled work ${formatAge(lastScheduled)}, but its ${runKindPluralForSchedule(kind)} are no longer retained in Kubernetes.` }
+    return { headline: 'No retained runs', body: `This resource last scheduled work ${formatTimeAgo(lastScheduled)}, but its ${runKindPluralForSchedule(kind)} are no longer retained in Kubernetes.` }
   }
   return { headline: 'No runs yet', body: `Kubernetes does not currently have retained ${runKindPluralForSchedule(kind)} for this resource.` }
 }

package/src/components/helm/ChartBrowser.tsx

@@ -5,10 +5,10 @@ import { clsx } from 'clsx'
 import { useHelmRepositories, useSearchCharts, useUpdateRepository, useUpdateRepositorySilent, useArtifactHubSearch, type ArtifactHubSortOption } from '../../api/client'
 import { useCanHelmWrite, useIsAuthEnabled } from '../../contexts/CapabilitiesContext'
 import type { ChartInfo, HelmRepository, ArtifactHubChart, ChartSource } from '../../types'
-import { formatAge } from './helm-utils'
 import { SEVERITY_BADGE } from '../../utils/badge-colors'
 import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
+import { formatRelativeAgeTime } from '@skyhook-io/k8s-ui/utils/format'
 
 interface ChartBrowserProps {
   onChartSelect: (repo: string, chart: string, version: string, source: ChartSource) => void
@@ -431,7 +431,7 @@ function RepoDropdownItem({ repo, isSelected, onSelect, onUpdate, isUpdating, ca
         {repo.name}
         {repo.lastUpdated && (
           <span className="text-xs text-theme-text-tertiary ml-2">
-            {formatAge(repo.lastUpdated)}
+            {formatRelativeAgeTime(repo.lastUpdated)}
           </span>
         )}
       </button>
@@ -514,7 +514,7 @@ interface ArtifactHubChartCardProps {
 function ArtifactHubChartCard({ chart, onSelect }: ArtifactHubChartCardProps) {
   // Format Unix timestamp to relative age
   const lastUpdated = chart.updatedAt
-    ? formatAge(new Date(chart.updatedAt * 1000).toISOString())
+    ? formatRelativeAgeTime(new Date(chart.updatedAt * 1000).toISOString())
     : null
 
   return (