fix: Create a self-updating TimeAgo React component that avoids unnecessary re-renders (#3564)

<!-- CURSOR_AGENT_PR_BODY_BEGIN -->
## Summary

Closes #3563

All `timeAgo` strings across the UI were static — they only refreshed
when the user interacted with the UI. This PR creates a self-updating
`TimeAgo` React component and replaces all static `formatTimeAgo()`
usages with it, so timestamps stay accurate without user interaction.

## Changes

### New `TimeAgo` component (`web_src/src/components/TimeAgo/`)
- Self-updating React component that renders a human-readable relative
time string (e.g., `3s ago`, `2m ago`)
- Uses a **single shared global timer** (`setInterval` at 1s) for all
instances — efficient even with many events visible
- Only re-renders when the displayed text actually changes (e.g., `"2m
ago"` stays stable for a minute), minimizing render work for older
timestamps
- Wrapped in `React.memo` to prevent unnecessary parent re-renders
- Properly cleans up the global timer when all instances unmount (no
memory leaks)
- Split into separate files for ESLint `react-refresh` compliance:
  - `TimeAgo.tsx` — the component itself
- `helpers.ts` — `renderTimeAgo(date)` and `renderWithTimeAgo(prefix,
date, separator?)`
  - `index.ts` — barrel re-exports

### Replaced all static `timeAgo` usages
- **Direct UI components**: `componentBase`, `ChainItem`,
`ExecutionChainPage` now use `<TimeAgo>` directly
- **All mapper subtitle functions** (~160+ files): Replaced
`formatTimeAgo()` with `renderTimeAgo()` for standalone usage or
`renderWithTimeAgo()` for "prefix · timeAgo" patterns
- **All trigger renderers** (~40+ files): Updated to use
`renderTimeAgo()` / `renderWithTimeAgo()` for trigger event subtitles
- **Utility functions** (`utils.ts`): Updated sidebar event and queue
item subtitle generation
- **Type definitions**: Updated `TriggerLastEventData.subtitle`,
`TriggerRenderer.getTitleAndSubtitle`, and various mapper types to
support `React.ReactNode`

### Bug fixes
- Fixed tooltip showing `[object Object]` in `componentBase/index.tsx`
by using a `typeof` check instead of `String()` coercion for ReactNode
subtitles
- Fixed template literal interpolation of `renderTimeAgo()` results
(which return `React.ReactNode`) that would produce `[object Object]` —
replaced with `renderWithTimeAgo()` helper

### What's preserved
- `formatTimeAgo()` utility function is kept in `@/utils/date` for
non-React contexts (e.g., `.replace(" ago", "")` duration text
extraction in `utils.ts`)
<!-- CURSOR_AGENT_PR_BODY_END -->

<div><a
href="https://cursor.com/agents/bc-b9343003-3036-498a-8fae-d541bf47c5a9"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-web-light.png"><img
alt="Open in Web" width="114" height="28"
src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a
href="https://cursor.com/background-agent?bcId=bc-b9343003-3036-498a-8fae-d541bf47c5a9"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img
alt="Open in Cursor" width="131" height="28"
src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>

---------

Signed-off-by: Pedro F. Leao <pedroforestileao@gmail.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Pedro F. Leao <pedroforestileao@gmail.com>

Author: 3 people

web_src/src/components/TimeAgo/TimeAgo.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { formatTimeAgo } from "@/utils/date";
+
+const globalListeners = new Set<() => void>();
+let globalIntervalId: ReturnType<typeof setInterval> | null = null;
+
+function startGlobalTimer() {
+  if (globalIntervalId) return;
+  globalIntervalId = setInterval(() => {
+    globalListeners.forEach((cb) => cb());
+  }, 1000);
+}
+
+function stopGlobalTimer() {
+  if (globalIntervalId && globalListeners.size === 0) {
+    clearInterval(globalIntervalId);
+    globalIntervalId = null;
+  }
+}
+
+interface TimeAgoProps {
+  date: Date | string;
+  className?: string;
+}
+
+export const TimeAgo = React.memo(function TimeAgo({ date, className }: TimeAgoProps) {
+  const d = typeof date === "string" ? new Date(date) : date;
+  const dateMs = d.getTime();
+  const [text, setText] = useState(() => formatTimeAgo(new Date(dateMs)));
+  const lastTextRef = useRef(text);
+
+  const update = useCallback(() => {
+    const newText = formatTimeAgo(new Date(dateMs));
+    if (newText !== lastTextRef.current) {
+      lastTextRef.current = newText;
+      setText(newText);
+    }
+  }, [dateMs]);
+
+  useEffect(() => {
+    update();
+    globalListeners.add(update);
+    startGlobalTimer();
+    return () => {
+      globalListeners.delete(update);
+      stopGlobalTimer();
+    };
+  }, [update]);
+
+  return <span className={className}>{text}</span>;
+});

web_src/src/components/TimeAgo/helpers.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { TimeAgo } from "./TimeAgo";
+
+/**
+ * Creates a TimeAgo React element from a Date or string.
+ * Use in .ts files where JSX is not available.
+ */
+export function renderTimeAgo(date: Date | string): React.ReactNode {
+  return React.createElement(TimeAgo, { date });
+}
+
+/**
+ * Creates a React element with a text prefix followed by a separator and a self-updating TimeAgo.
+ * Use in .ts files where JSX is not available.
+ */
+export function renderWithTimeAgo(prefix: string, date: Date | string, separator = " · "): React.ReactNode {
+  return React.createElement(React.Fragment, null, prefix, separator, React.createElement(TimeAgo, { date }));
+}

web_src/src/components/TimeAgo/index.ts

@@ -0,0 +1,2 @@
+export { TimeAgo } from "./TimeAgo";
+export { renderTimeAgo, renderWithTimeAgo } from "./helpers";

web_src/src/pages/workflowv2/mappers/addMemory.ts

@@ -1,14 +1,15 @@
-import {
+import type {
   ComponentBaseContext,
   ComponentBaseMapper,
   ExecutionDetailsContext,
   ExecutionInfo,
   NodeInfo,
   SubtitleContext,
 } from "./types";
-import { ComponentBaseProps, EventSection } from "@/ui/componentBase";
+import type { ComponentBaseProps, EventSection } from "@/ui/componentBase";
+import type React from "react";
 import { getStateMap, getTriggerRenderer } from ".";
-import { formatTimeAgo } from "@/utils/date";
+import { renderTimeAgo } from "@/components/TimeAgo";
 import { defaultStateFunction } from "./stateRegistry";
 
 type AddMemoryMetadata = {
@@ -41,9 +42,9 @@ export const addMemoryMapper: ComponentBaseMapper = {
       eventStateMap: getStateMap(componentName),
     };
   },
-  subtitle(context: SubtitleContext): string {
+  subtitle(context: SubtitleContext): string | React.ReactNode {
     const timestamp = context.execution.updatedAt || context.execution.createdAt;
-    return timestamp ? formatTimeAgo(new Date(timestamp)) : "";
+    return timestamp ? renderTimeAgo(new Date(timestamp)) : "";
   },
   getExecutionDetails(context: ExecutionDetailsContext): Record<string, string> {
     const details: Record<string, string> = {};
@@ -67,7 +68,7 @@ function getEventSections(nodes: NodeInfo[], execution: ExecutionInfo): EventSec
   const rootTriggerRenderer = getTriggerRenderer(rootTriggerNode?.componentName || "");
   const { title: fallbackTitle } = rootTriggerRenderer.getTitleAndSubtitle({ event: execution.rootEvent });
   const subtitleTimestamp = execution.updatedAt || execution.createdAt;
-  const eventSubtitle = subtitleTimestamp ? formatTimeAgo(new Date(subtitleTimestamp)) : "";
+  const eventSubtitle = subtitleTimestamp ? renderTimeAgo(new Date(subtitleTimestamp)) : "";
 
   return [
     {

web_src/src/pages/workflowv2/mappers/approval.ts

@@ -1,13 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  GroupsGroup,
-  RolesRole,
-  SuperplaneUsersUser,
-  groupsListGroupUsers,
-  canvasesInvokeNodeExecutionAction,
-  CanvasesCanvasNodeExecution,
-} from "@/api-client";
-import {
+import type { GroupsGroup, RolesRole, SuperplaneUsersUser, CanvasesCanvasNodeExecution } from "@/api-client";
+import { groupsListGroupUsers, canvasesInvokeNodeExecutionAction } from "@/api-client";
+import type {
   AdditionalDataBuilderContext,
   ComponentAdditionalDataBuilder,
   ComponentBaseContext,
@@ -19,24 +13,24 @@ import {
   StateFunction,
   SubtitleContext,
 } from "./types";
-import {
+import type {
   ComponentBaseProps,
   ComponentBaseSpec,
   EventSection,
   EventState,
   EventStateMap,
-  DEFAULT_EVENT_STATE_MAP,
 } from "@/ui/componentBase";
+import { DEFAULT_EVENT_STATE_MAP } from "@/ui/componentBase";
 import { getTriggerRenderer } from ".";
 import { getBackgroundColorClass, getColorClass } from "@/utils/colors";
 import { ApprovalGroup } from "@/ui/approvalGroup";
 import React from "react";
-import { ApprovalItemProps } from "@/ui/approvalItem";
-import { QueryClient } from "@tanstack/react-query";
+import type { ApprovalItemProps } from "@/ui/approvalItem";
+import type { QueryClient } from "@tanstack/react-query";
 import { organizationKeys } from "@/hooks/useOrganizationData";
 import { withOrganizationHeader } from "@/utils/withOrganizationHeader";
 import { canvasKeys } from "@/hooks/useCanvasData";
-import { formatTimeAgo } from "@/utils/date";
+import { renderTimeAgo, renderWithTimeAgo } from "@/components/TimeAgo";
 import { showErrorToast } from "@/utils/toast";
 
 type ApprovalConfiguration = {
@@ -92,6 +86,7 @@ export const APPROVAL_STATE_MAP: EventStateMap = {
 /**
  * Approval-specific state logic function
  */
+// eslint-disable-next-line complexity
 export const approvalStateFunction: StateFunction = (execution: CanvasesCanvasNodeExecution): EventState => {
   if (
     execution.resultMessage &&
@@ -210,40 +205,43 @@ function getApprovalSpecs(items: ApprovalItem[], additionalData?: unknown): Comp
     {
       title: "approvals required",
       tooltipTitle: "approvals required",
-      values: items.map((item) => {
-        const type = (item.type || "").toString();
-        let value =
-          type === "anyone"
-            ? "Anyone"
-            : type === "user"
-              ? item.user || ""
-              : type === "role"
-                ? item.role || ""
-                : type === "group"
-                  ? item.group || ""
-                  : "";
-        const label = type ? `${type[0].toUpperCase()}${type.slice(1)}` : "Item";
-
-        // Pretty-print values
-        if (type === "user" && value && usersById[value]) {
-          value = usersById[value].email || usersById[value].name || value;
-        }
-        if (type === "role" && value) {
-          value = rolesByName[value] || value.replace(/^(org_|canvas_)/i, "");
-          // Fallback to simple suffix mapping when not found
-          const suffix = (item.role || "").split("_").pop();
-          if (!rolesByName[item.role || ""] && suffix) {
-            const map: any = { viewer: "Viewer", admin: "Admin", owner: "Owner" };
-            value = map[suffix] || value;
+      values: items.map(
+        // eslint-disable-next-line complexity
+        (item) => {
+          const type = (item.type || "").toString();
+          let value =
+            type === "anyone"
+              ? "Anyone"
+              : type === "user"
+                ? item.user || ""
+                : type === "role"
+                  ? item.role || ""
+                  : type === "group"
+                    ? item.group || ""
+                    : "";
+          const label = type ? `${type[0].toUpperCase()}${type.slice(1)}` : "Item";
+
+          // Pretty-print values
+          if (type === "user" && value && usersById[value]) {
+            value = usersById[value].email || usersById[value].name || value;
           }
-        }
-        return {
-          badges: [
-            { label: `${label}:`, bgColor: "bg-gray-100", textColor: "text-gray-700" },
-            { label: value || "—", bgColor: "bg-emerald-100", textColor: "text-emerald-800" },
-          ],
-        };
-      }),
+          if (type === "role" && value) {
+            value = rolesByName[value] || value.replace(/^(org_|canvas_)/i, "");
+            // Fallback to simple suffix mapping when not found
+            const suffix = (item.role || "").split("_").pop();
+            if (!rolesByName[item.role || ""] && suffix) {
+              const map: any = { viewer: "Viewer", admin: "Admin", owner: "Owner" };
+              value = map[suffix] || value;
+            }
+          }
+          return {
+            badges: [
+              { label: `${label}:`, bgColor: "bg-gray-100", textColor: "text-gray-700" },
+              { label: value || "—", bgColor: "bg-emerald-100", textColor: "text-emerald-800" },
+            ],
+          };
+        },
+      ),
     },
   ];
 }
@@ -278,7 +276,7 @@ function getComponentSubtitle(execution: ExecutionInfo, additionalData?: unknown
     const approvalsApprovedCount = approvals?.filter((approval) => approval.approved).length || 0;
     const subtitle = `${approvalsApprovedCount}/${approvalsCount} approved`;
     if (execution.createdAt) {
-      return `${subtitle} · ${formatTimeAgo(new Date(execution.createdAt))}`;
+      return renderWithTimeAgo(subtitle, new Date(execution.createdAt));
     }
     return subtitle;
   }
@@ -291,22 +289,22 @@ function getComponentSubtitle(execution: ExecutionInfo, additionalData?: unknown
     const date = new Date(timestamp);
     const metadata = execution.metadata as Record<string, unknown> | undefined;
     const result = metadata?.result;
-    const timeAgo = formatTimeAgo(date);
 
     if (result === "approved") {
-      return `Approved · ${timeAgo}`;
+      return renderWithTimeAgo("Approved", date);
     }
 
     if (result === "rejected") {
-      return `Rejected · ${timeAgo}`;
+      return renderWithTimeAgo("Rejected", date);
     }
 
-    return timeAgo;
+    return renderTimeAgo(date);
   }
 
   return "";
 }
 
+// eslint-disable-next-line complexity
 function getApprovalDecisionLabel(record: ApprovalRecord, labelMaps?: ApprovalLabelMaps): string {
   const rolesByName = labelMaps?.rolesByName;
   const groupsByName = labelMaps?.groupsByName;
@@ -335,7 +333,17 @@ function getApprovalDecisionLabel(record: ApprovalRecord, labelMaps?: ApprovalLa
 }
 
 function buildApprovalTimeline(records: ApprovalRecord[]) {
-  return records
+  return [...records]
+    .sort((a, b) => {
+      const aTimestamp = getApprovalDecisionTimestampValue(a);
+      const bTimestamp = getApprovalDecisionTimestampValue(b);
+
+      if (aTimestamp === null && bTimestamp === null) return 0;
+      if (aTimestamp === null) return 1;
+      if (bTimestamp === null) return -1;
+
+      return aTimestamp - bTimestamp;
+    })
     .map((record) => {
       const meta = getApprovalDecisionMeta(record);
       return {
@@ -344,18 +352,12 @@ function buildApprovalTimeline(records: ApprovalRecord[]) {
         timestamp: meta.timestamp,
         comment: meta.comment,
       };
-    })
-    .sort((a, b) => {
-      if (!a.timestamp && !b.timestamp) return 0;
-      if (!a.timestamp) return 1;
-      if (!b.timestamp) return -1;
-      return new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime();
     });
 }
 
 function getApprovalDecisionMeta(record: ApprovalRecord): {
   status: string;
-  timestamp?: string;
+  timestamp?: string | React.ReactNode;
   comment?: string;
 } {
   const approvalComment = record.approval?.comment?.trim();
@@ -384,13 +386,33 @@ function getApprovalDecisionMeta(record: ApprovalRecord): {
   };
 }
 
-function formatDecisionTimestamp(timestamp?: string): string | undefined {
+function formatDecisionTimestamp(timestamp?: string): string | React.ReactNode | undefined {
   if (!timestamp) return undefined;
 
   const parsed = new Date(timestamp);
   if (Number.isNaN(parsed.getTime())) return undefined;
 
-  return formatTimeAgo(parsed);
+  return renderTimeAgo(parsed);
+}
+
+function getApprovalDecisionTimestampValue(record: ApprovalRecord): number | null {
+  const timestamp =
+    record.state === "approved"
+      ? record.approval?.approvedAt
+      : record.state === "rejected"
+        ? record.rejection?.rejectedAt
+        : undefined;
+
+  if (!timestamp) {
+    return null;
+  }
+
+  const parsed = new Date(timestamp).getTime();
+  if (Number.isNaN(parsed)) {
+    return null;
+  }
+
+  return parsed;
 }
 
 // ----------------------- Data Builder -----------------------

web_src/src/pages/workflowv2/mappers/aws/cloudwatch/on_alarm.ts

@@ -1,11 +1,13 @@
-import { TriggerProps } from "@/ui/trigger";
-import { MetadataItem } from "@/ui/metadataList";
+import type { TriggerProps } from "@/ui/trigger";
+import type React from "react";
+import type { MetadataItem } from "@/ui/metadataList";
 import awsCloudwatchIcon from "@/assets/icons/integrations/aws.cloudwatch.svg";
-import { formatTimeAgo } from "@/utils/date";
+import { renderTimeAgo } from "@/components/TimeAgo";
 import { getBackgroundColorClass } from "@/utils/colors";
-import { TriggerEventContext, TriggerRenderer, TriggerRendererContext } from "../../types";
-import { Predicate, formatPredicate, stringOrDash } from "../../utils";
-import { CloudWatchAlarmEvent } from "./types";
+import type { TriggerEventContext, TriggerRenderer, TriggerRendererContext } from "../../types";
+import type { Predicate } from "../../utils";
+import { formatPredicate, stringOrDash } from "../../utils";
+import type { CloudWatchAlarmEvent } from "./types";
 
 interface Configuration {
   region?: string;
@@ -44,7 +46,7 @@ function buildMetadataItems(configuration?: Configuration): MetadataItem[] {
  * Renderer for the "aws.cloudwatch.onAlarm" trigger
  */
 export const onAlarmTriggerRenderer: TriggerRenderer = {
-  getTitleAndSubtitle: (context: TriggerEventContext): { title: string; subtitle: string } => {
+  getTitleAndSubtitle: (context: TriggerEventContext): { title: string; subtitle: string | React.ReactNode } => {
     const eventData = context.event?.data as CloudWatchAlarmEvent;
     const detail = eventData?.detail;
     const alarmName = detail?.alarmName;
@@ -58,7 +60,7 @@ export const onAlarmTriggerRenderer: TriggerRenderer = {
       title = alarmName;
     }
 
-    const subtitle = context.event?.createdAt ? formatTimeAgo(new Date(context.event?.createdAt || "")) : "";
+    const subtitle = context.event?.createdAt ? renderTimeAgo(new Date(context.event?.createdAt || "")) : "";
     return { title, subtitle };
   },