@datum-cloud/activity-ui 0.6.0 → 0.7.0

package/dist/index.esm.js

@@ -1188,6 +1188,48 @@ function constructNow(date) {
   return constructFrom(date, Date.now());
 }
 
+/**
+ * The {@link isSameDay} function options.
+ */
+
+/**
+ * @name isSameDay
+ * @category Day Helpers
+ * @summary Are the given dates in the same day (and year and month)?
+ *
+ * @description
+ * Are the given dates in the same day (and year and month)?
+ *
+ * @param laterDate - The first date to check
+ * @param earlierDate - The second date to check
+ * @param options - An object with options
+ *
+ * @returns The dates are in the same day (and year and month)
+ *
+ * @example
+ * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))
+ * //=> true
+ *
+ * @example
+ * // Are 4 September and 4 October in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))
+ * //=> false
+ *
+ * @example
+ * // Are 4 September, 2014 and 4 September, 2015 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))
+ * //=> false
+ */
+function isSameDay(laterDate, earlierDate, options) {
+  const [dateLeft_, dateRight_] = normalizeDates(
+    options?.in,
+    laterDate,
+    earlierDate,
+  );
+  return +startOfDay(dateLeft_) === +startOfDay(dateRight_);
+}
+
 /**
  * @name isDate
  * @category Common Helpers
@@ -3924,6 +3966,36 @@ function formatISO(date, options) {
   return result;
 }
 
+/**
+ * The {@link isToday} function options.
+ */
+
+/**
+ * @name isToday
+ * @category Day Helpers
+ * @summary Is the given date today?
+ * @pure false
+ *
+ * @description
+ * Is the given date today?
+ *
+ * @param date - The date to check
+ * @param options - An object with options
+ *
+ * @returns The date is today
+ *
+ * @example
+ * // If today is 6 October 2014, is 6 October 14:00:00 today?
+ * const result = isToday(new Date(2014, 9, 6, 14, 0))
+ * //=> true
+ */
+function isToday(date, options) {
+  return isSameDay(
+    constructFrom(date, date),
+    constructNow(date),
+  );
+}
+
 /**
  * The {@link subDays} function options.
  */
@@ -3951,6 +4023,36 @@ function subDays(date, amount, options) {
   return addDays(date, -amount, options);
 }
 
+/**
+ * The {@link isYesterday} function options.
+ */
+
+/**
+ * @name isYesterday
+ * @category Day Helpers
+ * @summary Is the given date yesterday?
+ * @pure false
+ *
+ * @description
+ * Is the given date yesterday?
+ *
+ * @param date - The date to check
+ * @param options - An object with options
+ *
+ * @returns The date is yesterday
+ *
+ * @example
+ * // If today is 6 October 2014, is 5 October 14:00:00 yesterday?
+ * const result = isYesterday(new Date(2014, 9, 5, 14, 0))
+ * //=> true
+ */
+function isYesterday(date, options) {
+  return isSameDay(
+    constructFrom(date, date),
+    subDays(constructNow(date), 1),
+  );
+}
+
 /**
  * The {@link subHours} function options.
  */
@@ -7892,7 +7994,7 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$n = [
+const __iconNode$o = [
   [
     "path",
     {
@@ -7901,7 +8003,7 @@ const __iconNode$n = [
     }
   ]
 ];
-const Activity = createLucideIcon("activity", __iconNode$n);
+const Activity = createLucideIcon("activity", __iconNode$o);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -7911,7 +8013,7 @@ const Activity = createLucideIcon("activity", __iconNode$n);
  */
 
 
-const __iconNode$m = [
+const __iconNode$n = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -7921,7 +8023,7 @@ const __iconNode$m = [
     }
   ]
 ];
-const Bell = createLucideIcon("bell", __iconNode$m);
+const Bell = createLucideIcon("bell", __iconNode$n);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -7931,8 +8033,8 @@ const Bell = createLucideIcon("bell", __iconNode$m);
  */
 
 
-const __iconNode$l = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$l);
+const __iconNode$m = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$m);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -7942,8 +8044,8 @@ const Check = createLucideIcon("check", __iconNode$l);
  */
 
 
-const __iconNode$k = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$k);
+const __iconNode$l = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$l);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -7953,8 +8055,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$k);
  */
 
 
-const __iconNode$j = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$j);
+const __iconNode$k = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$k);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -7964,8 +8066,8 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$j);
  */
 
 
-const __iconNode$i = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$i);
+const __iconNode$j = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$j);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -7975,12 +8077,12 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$i);
  */
 
 
-const __iconNode$h = [
+const __iconNode$i = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$h);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$i);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -7990,11 +8092,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$h);
  */
 
 
-const __iconNode$g = [
+const __iconNode$h = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$g);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$h);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -8004,11 +8106,11 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$g);
  */
 
 
-const __iconNode$f = [
+const __iconNode$g = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$f);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$g);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -8018,12 +8120,12 @@ const CircleCheck = createLucideIcon("circle-check", __iconNode$f);
  */
 
 
-const __iconNode$e = [
+const __iconNode$f = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
   ["path", { d: "m9 9 6 6", key: "z0biqf" }]
 ];
-const CircleX = createLucideIcon("circle-x", __iconNode$e);
+const CircleX = createLucideIcon("circle-x", __iconNode$f);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -8033,11 +8135,11 @@ const CircleX = createLucideIcon("circle-x", __iconNode$e);
  */
 
 
-const __iconNode$d = [
+const __iconNode$e = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 6v6l4 2", key: "mmk7yg" }]
 ];
-const Clock = createLucideIcon("clock", __iconNode$d);
+const Clock = createLucideIcon("clock", __iconNode$e);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -8047,11 +8149,11 @@ const Clock = createLucideIcon("clock", __iconNode$d);
  */
 
 
-const __iconNode$c = [
+const __iconNode$d = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$c);
+const Copy = createLucideIcon("copy", __iconNode$d);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -8061,7 +8163,7 @@ const Copy = createLucideIcon("copy", __iconNode$c);
  */
 
 
-const __iconNode$b = [
+const __iconNode$c = [
   [
     "path",
     {
@@ -8071,7 +8173,7 @@ const __iconNode$b = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Eye = createLucideIcon("eye", __iconNode$b);
+const Eye = createLucideIcon("eye", __iconNode$c);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -8081,8 +8183,8 @@ const Eye = createLucideIcon("eye", __iconNode$b);
  */
 
 
-const __iconNode$a = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$a);
+const __iconNode$b = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$b);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -8092,7 +8194,7 @@ const LoaderCircle = createLucideIcon("loader-circle", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
+const __iconNode$a = [
   [
     "path",
     {
@@ -8102,7 +8204,7 @@ const __iconNode$9 = [
   ],
   ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
 ];
-const Pencil = createLucideIcon("pencil", __iconNode$9);
+const Pencil = createLucideIcon("pencil", __iconNode$a);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -8112,11 +8214,11 @@ const Pencil = createLucideIcon("pencil", __iconNode$9);
  */
 
 
-const __iconNode$8 = [
+const __iconNode$9 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$8);
+const Plus = createLucideIcon("plus", __iconNode$9);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -8126,13 +8228,13 @@ const Plus = createLucideIcon("plus", __iconNode$8);
  */
 
 
-const __iconNode$7 = [
+const __iconNode$8 = [
   ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
   ["path", { d: "M8 16H3v5", key: "1cv678" }]
 ];
-const RefreshCw = createLucideIcon("refresh-cw", __iconNode$7);
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode$8);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -8142,11 +8244,11 @@ const RefreshCw = createLucideIcon("refresh-cw", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
+const __iconNode$7 = [
   ["path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8", key: "1p45f6" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }]
 ];
-const RotateCw = createLucideIcon("rotate-cw", __iconNode$6);
+const RotateCw = createLucideIcon("rotate-cw", __iconNode$7);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -8156,11 +8258,32 @@ const RotateCw = createLucideIcon("rotate-cw", __iconNode$6);
  */
 
 
-const __iconNode$5 = [
+const __iconNode$6 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$5);
+const Search = createLucideIcon("search", __iconNode$6);
+
+/**
+ * @license lucide-react v0.577.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$5 = [
+  ["path", { d: "M10 5H3", key: "1qgfaw" }],
+  ["path", { d: "M12 19H3", key: "yhmn1j" }],
+  ["path", { d: "M14 3v4", key: "1sua03" }],
+  ["path", { d: "M16 17v4", key: "1q0r14" }],
+  ["path", { d: "M21 12h-9", key: "1o4lsq" }],
+  ["path", { d: "M21 19h-5", key: "1rlt1p" }],
+  ["path", { d: "M21 5h-7", key: "1oszz2" }],
+  ["path", { d: "M8 10v4", key: "tgpxqk" }],
+  ["path", { d: "M8 12H3", key: "a7s4jb" }]
+];
+const SlidersHorizontal = createLucideIcon("sliders-horizontal", __iconNode$5);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -9661,6 +9784,14 @@ function ActionToggle({ value, onChange, className = '', disabled = false, }) {
 
 // Debounce delay for filter changes (ms)
 const FILTER_DEBOUNCE_MS$1 = 300;
+// Backoff for watch stream reconnects. Without this, a persistently failing
+// upstream gets re-opened on every render with no delay — see
+// https://github.com/datum-cloud/infra/issues/5060, where a single browser
+// tab reconnected roughly 2.5 times a minute against a stream that kept
+// aborting, driving the proxy's memory up until the process was OOMKilled.
+const RECONNECT_BASE_DELAY_MS = 1000;
+const RECONNECT_MAX_DELAY_MS = 30000;
+const MAX_RECONNECT_ATTEMPTS = 8;
 /**
  * Escape a value for safe interpolation into a CEL string literal.
  * Prevents injection via values containing backslashes or double quotes.
@@ -9755,6 +9886,12 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
     const resourceVersionRef = useRef();
     // Track the watch stop function
     const watchStopRef = useRef(null);
+    // Consecutive watch failures since the last successful event, used to back
+    // off reconnect attempts. Reset on any real event (including BOOKMARK) and
+    // on a manual startStreaming() call.
+    const reconnectAttemptsRef = useRef(0);
+    // Pending scheduled reconnect, if any.
+    const reconnectTimerRef = useRef(null);
     // Track whether streaming should restart after filter change
     const shouldRestartStreamingRef = useRef(false);
     // Track if we've done the initial load
@@ -9829,6 +9966,9 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
             console.error('Watch error:', event.object);
             return;
         }
+        // A real event (including a BOOKMARK keep-alive) means the connection is
+        // healthy — reset backoff so a later failure starts from the base delay.
+        reconnectAttemptsRef.current = 0;
         if (event.type === 'BOOKMARK') {
             // Update resource version for resume capability
             if (event.object.metadata?.resourceVersion) {
@@ -9894,15 +10034,13 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
             setActivities((prev) => prev.filter((a) => a.metadata?.name !== event.object.metadata?.name));
         }
     }, [filters]);
-    // Start watching for real-time updates
-    const startStreaming = useCallback(() => {
+    // Open the watch connection. Does not touch userPaused/backoff state —
+    // callers (startStreaming, scheduleReconnect) own that.
+    const connectWatch = useCallback(() => {
         if (watchStopRef.current) {
             // Already watching
             return;
         }
-        // Explicit start clears the user-paused flag so the auto-restart
-        // effects can keep the stream alive after subsequent filter changes.
-        setUserPaused(false);
         // Clear any previous watch error when starting a new stream
         setWatchError(null);
         const params = buildWatchParams();
@@ -9916,6 +10054,7 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
                 setWatchError(streamError);
                 setIsStreaming(false);
                 watchStopRef.current = null;
+                reconnectAttemptsRef.current += 1;
             },
             onClose: () => {
                 setIsStreaming(false);
@@ -9926,11 +10065,50 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
         setIsStreaming(true);
         setNewActivitiesCount(0);
     }, [client, buildWatchParams, handleWatchEvent]);
+    // Reconnect with exponential backoff. The first attempt (no prior
+    // failures) connects immediately; each subsequent failure doubles the
+    // delay up to RECONNECT_MAX_DELAY_MS. After MAX_RECONNECT_ATTEMPTS
+    // consecutive failures, this stops retrying automatically — the watch
+    // stays stopped (with watchError set) until the user calls
+    // startStreaming() again, which resets the attempt count.
+    const scheduleReconnect = useCallback(() => {
+        if (reconnectTimerRef.current) {
+            // A reconnect is already scheduled.
+            return;
+        }
+        if (reconnectAttemptsRef.current >= MAX_RECONNECT_ATTEMPTS) {
+            return;
+        }
+        const attempt = reconnectAttemptsRef.current;
+        const delay = attempt === 0 ? 0 : Math.min(RECONNECT_MAX_DELAY_MS, RECONNECT_BASE_DELAY_MS * 2 ** (attempt - 1));
+        reconnectTimerRef.current = setTimeout(() => {
+            reconnectTimerRef.current = null;
+            connectWatch();
+        }, delay);
+    }, [connectWatch]);
+    // Start watching for real-time updates. This is the user/effect-facing
+    // entry point: it resets backoff and any pending scheduled reconnect
+    // before connecting, so a manual retry always starts from a clean slate.
+    const startStreaming = useCallback(() => {
+        // Explicit start clears the user-paused flag so the auto-restart
+        // effects can keep the stream alive after subsequent filter changes.
+        setUserPaused(false);
+        reconnectAttemptsRef.current = 0;
+        if (reconnectTimerRef.current) {
+            clearTimeout(reconnectTimerRef.current);
+            reconnectTimerRef.current = null;
+        }
+        connectWatch();
+    }, [connectWatch]);
     // Stop watching. Marks the user as paused so the auto-start effects
     // below don't immediately re-open the stream this call just closed.
     const stopStreaming = useCallback(() => {
         setUserPaused(true);
         setIsStreaming(false);
+        if (reconnectTimerRef.current) {
+            clearTimeout(reconnectTimerRef.current);
+            reconnectTimerRef.current = null;
+        }
         if (watchStopRef.current) {
             watchStopRef.current();
             watchStopRef.current = null;
@@ -10093,9 +10271,10 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
             }
         };
     }, [filters, timeRange]); // eslint-disable-line react-hooks/exhaustive-deps
-    // Auto-start streaming after initial load when enabled. Skipped when
-    // the user has explicitly paused — otherwise clicking Pause would be
-    // immediately undone by this effect on the next render.
+    // Auto-start streaming after initial load when enabled, and reconnect
+    // (with backoff — see scheduleReconnect) whenever a connection drops.
+    // Skipped when the user has explicitly paused — otherwise clicking Pause
+    // would be immediately undone by this effect on the next render.
     useEffect(() => {
         if (enableStreaming &&
             autoStartStreaming &&
@@ -10103,9 +10282,9 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
             activities.length > 0 &&
             !isStreaming &&
             !isLoading) {
-            startStreaming();
+            scheduleReconnect();
         }
-    }, [enableStreaming, autoStartStreaming, userPaused, activities.length, isStreaming, isLoading, startStreaming]);
+    }, [enableStreaming, autoStartStreaming, userPaused, activities.length, isStreaming, isLoading, scheduleReconnect]);
     // Restart streaming after filter change refresh completes. Also skipped
     // when the user has paused — a filter change shouldn't silently resume
     // a stream the user intentionally stopped.
@@ -10117,15 +10296,18 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
             !isStreaming &&
             !isLoading) {
             shouldRestartStreamingRef.current = false;
-            startStreaming();
+            scheduleReconnect();
         }
-    }, [enableStreaming, userPaused, activities.length, isStreaming, isLoading, startStreaming]);
+    }, [enableStreaming, userPaused, activities.length, isStreaming, isLoading, scheduleReconnect]);
     // Cleanup on unmount
     useEffect(() => {
         return () => {
             if (watchStopRef.current) {
                 watchStopRef.current();
             }
+            if (reconnectTimerRef.current) {
+                clearTimeout(reconnectTimerRef.current);
+            }
             if (filterDebounceRef.current) {
                 clearTimeout(filterDebounceRef.current);
             }
@@ -10290,36 +10472,6 @@ function ActivityExpandedDetails({ activity, compact = false, }) {
     return (jsx(TooltipProvider, { children: compact ? (jsx(DetailPanelShell, { children: body })) : (jsx("div", { className: "mt-4 pt-4 border-t border-border", children: body })) }));
 }
 
-// Number of columns rendered for the feed variant. Used as the colSpan on
-// the expanded-detail row so it stretches across the full width.
-const ACTIVITY_FEED_COLUMN_COUNT = 5;
-/**
- * Get avatar initials from actor name
- */
-function getActorInitials(name) {
-    const parts = name.split(/[@\s.]+/).filter(Boolean);
-    if (parts.length === 0)
-        return "?";
-    if (parts.length === 1)
-        return parts[0].charAt(0).toUpperCase();
-    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
-}
-/**
- * Get Tailwind classes for actor avatar based on actor type
- */
-function getActorAvatarClasses(actorType, compact) {
-    const baseClasses = cn("rounded-full flex items-center justify-center shrink-0 font-semibold", compact ? "w-5 h-5 text-1xs" : "w-6 h-6 text-1xs");
-    switch (actorType) {
-        case "user":
-            return cn(baseClasses, "bg-primary text-primary-foreground");
-        case "controller":
-            return cn(baseClasses, "bg-secondary text-secondary-foreground");
-        case "machine account":
-            return cn(baseClasses, "bg-muted text-muted-foreground");
-        default:
-            return cn(baseClasses, "bg-muted text-muted-foreground");
-    }
-}
 /**
  * Extract verb from activity summary (e.g., "alice created HTTPProxy" -> "created")
  */
@@ -10328,24 +10480,24 @@ function extractVerb(summary) {
     if (words.length >= 2) {
         return words[1].toLowerCase();
     }
-    return "unknown";
+    return 'unknown';
 }
 /**
- * Normalize verb to a canonical form for coloring
+ * Normalize a verb to a canonical form used for coloring/icons/grouping.
  */
 function normalizeVerb(verb) {
     const normalized = verb.toLowerCase();
-    if (normalized.includes("create") || normalized.includes("add"))
-        return "create";
-    if (normalized.includes("delete") || normalized.includes("remove"))
-        return "delete";
-    if (normalized.includes("update") ||
-        normalized.includes("patch") ||
-        normalized.includes("modify") ||
-        normalized.includes("change") ||
-        normalized.includes("edit"))
-        return "update";
-    return "other";
+    if (normalized.includes('create') || normalized.includes('add'))
+        return 'create';
+    if (normalized.includes('delete') || normalized.includes('remove'))
+        return 'delete';
+    if (normalized.includes('update') ||
+        normalized.includes('patch') ||
+        normalized.includes('modify') ||
+        normalized.includes('change') ||
+        normalized.includes('edit'))
+        return 'update';
+    return 'other';
 }
 /**
  * Get icon container + icon color classes based on verb
@@ -10353,25 +10505,25 @@ function normalizeVerb(verb) {
 function getActionIconClasses(verb) {
     const normalizedVerb = normalizeVerb(verb);
     switch (normalizedVerb) {
-        case "create":
+        case 'create':
             return {
-                container: "bg-[var(--success-100)]",
-                icon: "text-[var(--success-500)]",
+                container: 'bg-blue-50 dark:bg-blue-950',
+                icon: 'text-blue-500 dark:text-blue-400',
             };
-        case "update":
+        case 'update':
             return {
-                container: "bg-[var(--info-100)]",
-                icon: "text-[var(--info-500)]",
+                container: 'bg-green-50 dark:bg-green-950',
+                icon: 'text-green-600 dark:text-green-400',
             };
-        case "delete":
+        case 'delete':
             return {
-                container: "bg-destructive/10",
-                icon: "text-destructive",
+                container: 'bg-red-50 dark:bg-red-950',
+                icon: 'text-red-500 dark:text-red-400',
             };
         default:
             return {
-                container: "bg-muted",
-                icon: "text-muted-foreground",
+                container: 'bg-slate-100 dark:bg-slate-800',
+                icon: 'text-slate-500 dark:text-slate-400',
             };
     }
 }
@@ -10381,20 +10533,51 @@ function getActionIconClasses(verb) {
 function getTimelineIcon(verb) {
     const normalizedVerb = normalizeVerb(verb);
     switch (normalizedVerb) {
-        case "create":
+        case 'create':
             return Plus;
-        case "update":
+        case 'update':
             return Pencil;
-        case "delete":
+        case 'delete':
             return Trash2;
         default:
             return Activity;
     }
 }
+
+// Number of columns rendered for the feed variant. Used as the colSpan on
+// the expanded-detail row so it stretches across the full width.
+const ACTIVITY_FEED_COLUMN_COUNT = 5;
+/**
+ * Get avatar initials from actor name
+ */
+function getActorInitials(name) {
+    const parts = name.split(/[@\s.]+/).filter(Boolean);
+    if (parts.length === 0)
+        return "?";
+    if (parts.length === 1)
+        return parts[0].charAt(0).toUpperCase();
+    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+/**
+ * Get Tailwind classes for actor avatar based on actor type
+ */
+function getActorAvatarClasses(actorType, compact) {
+    const baseClasses = cn("rounded-full flex items-center justify-center shrink-0 font-semibold", compact ? "w-5 h-5 text-1xs" : "w-6 h-6 text-1xs");
+    switch (actorType) {
+        case "user":
+            return cn(baseClasses, "bg-primary text-primary-foreground");
+        case "controller":
+            return cn(baseClasses, "bg-secondary text-secondary-foreground");
+        case "machine account":
+            return cn(baseClasses, "bg-muted text-muted-foreground");
+        default:
+            return cn(baseClasses, "bg-muted text-muted-foreground");
+    }
+}
 /**
  * ActivityFeedItem renders a single activity in the feed or timeline
  */
-function ActivityFeedItem({ activity, onResourceClick, resourceLinkResolver, tenantLinkResolver, tenantRenderer, onActorClick, onActivityClick, isSelected = false, className = "", compact = false, isNew = false, variant = "feed", isLast = false, defaultExpanded = false, }) {
+function ActivityFeedItem({ activity, onResourceClick, resourceLinkResolver, tenantLinkResolver, tenantRenderer, onActorClick, onActivityClick, isSelected = false, className = "", compact = false, isNew = false, variant = "feed", isLast = false, defaultExpanded = false, density = "default", }) {
     const [isExpanded, setIsExpanded] = useState(defaultExpanded);
     const { spec, metadata } = activity;
     const { actor, summary, links, tenant } = spec;
@@ -10415,7 +10598,7 @@ function ActivityFeedItem({ activity, onResourceClick, resourceLinkResolver, ten
     if (isTimeline) {
         const { container: iconBg, icon: iconColor } = getActionIconClasses(verb);
         const Icon = getTimelineIcon(verb);
-        return (jsxs("div", { className: cn(!isLast && !isExpanded && "border-b border-border", className), children: [jsxs("div", { className: cn("flex items-center gap-3 py-3 cursor-pointer group", isSelected && "bg-muted/40"), onClick: toggleExpand, children: [jsx("div", { className: cn("w-8 h-8 rounded-md shrink-0 flex items-center justify-center", iconBg, iconColor), children: jsx(Icon, { size: 16, strokeWidth: 2 }) }), jsx("div", { className: "flex-1 min-w-0 text-sm text-foreground leading-snug", children: jsx(ActivityFeedSummary, { summary: summary, links: links, onResourceClick: onResourceClick, resourceLinkResolver: resourceLinkResolver, resourceLinkContext: { tenant } }) }), tenant && (jsx("div", { className: "shrink-0", children: tenantRenderer ? (tenantRenderer(tenant)) : (jsx(TenantBadge, { tenant: tenant, tenantLinkResolver: tenantLinkResolver, size: "compact" })) })), jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap shrink-0", children: jsx(Timestamp, { value: timestamp }) }), jsx(Button, { type: "quaternary", theme: "borderless", size: "small", className: "h-5 py-0 px-1 text-base text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0", onClick: toggleExpand, "aria-expanded": isExpanded, children: isExpanded ? "−" : "+" })] }), isExpanded && (jsx(ActivityExpandedDetails, { activity: activity, tenantLinkResolver: tenantLinkResolver, compact: true }))] }));
+        return (jsxs("div", { className: cn(!isLast && !isExpanded && "border-b border-border", className), children: [jsxs("div", { className: cn("flex items-center gap-3 cursor-pointer group", density === "compact" ? "py-1.5" : "py-3", isSelected && "bg-muted/40"), onClick: toggleExpand, children: [jsx("div", { className: cn("rounded-md shrink-0 flex items-center justify-center", density === "compact" ? "w-6 h-6" : "w-8 h-8", iconBg, iconColor), children: jsx(Icon, { size: 16, strokeWidth: 2 }) }), jsx("div", { className: "flex-1 min-w-0 text-sm text-foreground leading-snug", children: jsx(ActivityFeedSummary, { summary: summary, links: links, onResourceClick: onResourceClick, resourceLinkResolver: resourceLinkResolver, resourceLinkContext: { tenant } }) }), tenant && (jsx("div", { className: "shrink-0", children: tenantRenderer ? (tenantRenderer(tenant)) : (jsx(TenantBadge, { tenant: tenant, tenantLinkResolver: tenantLinkResolver, size: "compact" })) })), jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap shrink-0", children: jsx(Timestamp, { value: timestamp }) }), jsx(Button, { type: "quaternary", theme: "borderless", size: "small", className: "h-5 py-0 px-1 text-base text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0", onClick: toggleExpand, "aria-expanded": isExpanded, children: isExpanded ? "−" : "+" })] }), isExpanded && (jsx(ActivityExpandedDetails, { activity: activity, tenantLinkResolver: tenantLinkResolver, compact: true }))] }));
     }
     // Feed variant — flat-column table row. Columns: Actor | Summary |
     // Tenant | When | expand toggle. Renders an additional TableRow with a
@@ -10708,7 +10891,7 @@ const getSelectedPreset$1 = (timeRange) => {
 /**
  * ActivityFeedFilters provides filter controls for the activity feed
  */
-function ActivityFeedFilters({ client, filters, timeRange, onFiltersChange, onTimeRangeChange, disabled = false, hiddenFilters = [], className = "", extraFilters, }) {
+function ActivityFeedFilters({ client, filters, timeRange, onFiltersChange, onTimeRangeChange, disabled = false, hiddenFilters = [], className = "", extraFilters, layout = "inline", }) {
     const { resourceKinds, actorNames, apiGroups, resourceNamespaces, error: facetsError, } = useFacets(client, timeRange, filters);
     // Log facets error for debugging
     if (facetsError) {
@@ -10928,12 +11111,186 @@ function ActivityFeedFilters({ client, filters, timeRange, onFiltersChange, onTi
             clearTimeout(searchDebounceRef.current);
         onFiltersChangeRef.current({ ...filtersRef.current, search: undefined });
     }, []);
+    const searchInput = (jsxs("div", { className: "relative min-w-[200px] flex-1 max-w-xs", children: [jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), jsx(Input, { type: "text", placeholder: "Search activities...", value: searchInputValue, onChange: handleSearchChange, className: "pl-8 h-7 text-xs pr-6" }), searchInputValue && (jsx("button", { onClick: handleSearchClear, className: "absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors", "aria-label": "Clear search", children: jsx(X, { className: "h-3.5 w-3.5" }) }))] }));
+    const changeSourceControl = !hiddenFilters.includes("changeSource") && (jsx(ChangeSourceToggle, { value: filters.changeSource || "all", onChange: handleChangeSourceChange, disabled: disabled }));
+    const filterChips = activeFilterIds.map((filterId) => {
+        const config = FILTER_CONFIGS$1[filterId];
+        return (jsx(FilterChip, { label: config.label, values: getFilterValues(filterId), options: config.inputMode === "typeahead"
+                ? getFilterOptions(filterId)
+                : undefined, onValuesChange: (values) => handleFilterChange(filterId, values), onClear: () => handleFilterClear(filterId), onPopoverClose: () => handlePopoverClose(filterId), inputMode: config.inputMode, placeholder: config.placeholder, searchPlaceholder: config.searchPlaceholder, autoOpen: pendingFilter === filterId, disabled: disabled }, filterId));
+    });
+    const addFilterControl = (jsx(AddFilterDropdown, { availableFilters: availableFilters, activeFilterIds: activeFilterIds, onAddFilter: handleAddFilter, hasActiveFilters: activeFilterIds.length > 0, disabled: disabled }));
+    const timeRangeControl = (jsx(TimeRangeDropdown, { presets: TIME_PRESETS$1, selectedPreset: selectedPreset, onPresetSelect: handleTimePresetSelect, onCustomRangeApply: handleCustomRangeApply, customStart: customStart, customEnd: customEnd, disabled: disabled, displayLabel: getTimeRangeLabel() }));
+    if (layout === "compact") {
+        const activeFilterCount = activeFilterIds.length +
+            (!hiddenFilters.includes("changeSource") &&
+                filters.changeSource &&
+                filters.changeSource !== "all"
+                ? 1
+                : 0);
+        return (jsx("div", { className: `border-b border-border py-4 ${className}`, children: jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [searchInput, jsxs(Popover, { children: [jsx(PopoverTrigger, { asChild: true, children: jsxs("button", { type: "button", disabled: disabled, className: cn("flex h-7 items-center gap-1.5 rounded-md border border-border bg-background px-2 text-xs", "text-muted-foreground hover:text-foreground hover:border-foreground/50 transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50"), children: [jsx(SlidersHorizontal, { className: "h-3.5 w-3.5" }), jsx("span", { className: "font-medium", children: "Filters" }), activeFilterCount > 0 && (jsx("span", { className: "ml-0.5 rounded-full bg-primary text-primary-foreground text-[10px] font-semibold leading-none px-1.5 py-0.5", children: activeFilterCount }))] }) }), jsx(PopoverContent, { className: "w-[320px] p-3", sideOffset: 4, align: "start", children: jsxs("div", { className: "flex flex-col gap-3", children: [changeSourceControl, jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [filterChips, addFilterControl] }), extraFilters, timeRangeControl] }) })] })] }) }));
+    }
     return (jsx("div", { className: `border-b border-border py-4 ${className}`, children: jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [!hiddenFilters.includes("changeSource") && (jsx(ChangeSourceToggle, { value: filters.changeSource || "all", onChange: handleChangeSourceChange, disabled: disabled })), jsxs("div", { className: "relative min-w-[200px] flex-1 max-w-xs", children: [jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), jsx(Input, { type: "text", placeholder: "Search activities...", value: searchInputValue, onChange: handleSearchChange, className: "h-9 pl-9 pr-9 text-xs md:text-xs" }), searchInputValue && (jsx("button", { onClick: handleSearchClear, className: "absolute right-0 top-0 flex h-9 w-9 items-center justify-center rounded-r-lg text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "aria-label": "Clear search", children: jsx(X, { className: "h-3.5 w-3.5" }) }))] }), activeFilterIds.map((filterId) => {
                     const config = FILTER_CONFIGS$1[filterId];
                     return (jsx(FilterChip, { label: config.label, values: getFilterValues(filterId), options: config.inputMode === "typeahead"
                             ? getFilterOptions(filterId)
                             : undefined, onValuesChange: (values) => handleFilterChange(filterId, values), onClear: () => handleFilterClear(filterId), onPopoverClose: () => handlePopoverClose(filterId), inputMode: config.inputMode, placeholder: config.placeholder, searchPlaceholder: config.searchPlaceholder, autoOpen: pendingFilter === filterId, disabled: disabled }, filterId));
-                }), jsx(AddFilterDropdown, { availableFilters: availableFilters, activeFilterIds: activeFilterIds, onAddFilter: handleAddFilter, hasActiveFilters: activeFilterIds.length > 0, disabled: disabled }), extraFilters, jsx("div", { className: "flex-1 min-w-[20px]" }), jsx(TimeRangeDropdown, { presets: TIME_PRESETS$1, selectedPreset: selectedPreset, onPresetSelect: handleTimePresetSelect, onCustomRangeApply: handleCustomRangeApply, customStart: customStart, customEnd: customEnd, disabled: disabled, displayLabel: getTimeRangeLabel() })] }) }));
+                }), jsx(AddFilterDropdown, { availableFilters: availableFilters, activeFilterIds: activeFilterIds, onAddFilter: handleAddFilter, hasActiveFilters: activeFilterIds.length > 0, disabled: disabled }), extraFilters, jsx("div", { className: "flex-1 min-w-[20px]" }), timeRangeControl] }) }));
+}
+
+const KIND_PLURALS = {
+    DNSRecordSet: "DNS records",
+};
+function pluralizeKind(kind, count) {
+    if (count === 1)
+        return kind;
+    return KIND_PLURALS[kind] ?? `${kind}s`;
+}
+const VERB_LABEL = {
+    create: "created",
+    update: "updated",
+    delete: "deleted",
+    other: "changed",
+};
+/**
+ * ActivityFeedGroupItem renders a run of consecutive same verb/kind/actor
+ * activities (see `groupActivities`) as a single collapsed row in the
+ * "digest" timeline. A group of size 1 renders exactly like a normal
+ * `ActivityFeedItem` — no visual change for ungrouped activities. Larger
+ * groups render a synthesized summary ("{actor} created 12 DNS records")
+ * that expands to reveal the individual activities underneath.
+ */
+function ActivityFeedGroupItem({ group, resourceLinkResolver, tenantLinkResolver, tenantRenderer, onActorClick, onActivityClick, isLast = false, }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    if (group.count === 1) {
+        return (jsx(ActivityFeedItem, { activity: group.activities[0], resourceLinkResolver: resourceLinkResolver, tenantLinkResolver: tenantLinkResolver, tenantRenderer: tenantRenderer, onActorClick: onActorClick, onActivityClick: onActivityClick, variant: "timeline", density: "compact", isLast: isLast }));
+    }
+    const { container: iconBg, icon: iconColor } = getActionIconClasses(group.verb);
+    const Icon = getTimelineIcon(group.verb);
+    const actorVisible = group.actorDisplayName || group.actorName;
+    const summary = `${actorVisible} ${VERB_LABEL[group.verb]} ${group.count} ${pluralizeKind(group.kind, group.count)}`;
+    const toggleExpand = (e) => {
+        e.stopPropagation();
+        setIsExpanded((prev) => !prev);
+    };
+    return (jsxs("div", { className: cn(!isLast && !isExpanded && "border-b border-border"), children: [jsxs("div", { className: "flex items-center gap-3 py-1.5 cursor-pointer group", onClick: toggleExpand, children: [jsxs("div", { className: cn("w-6 h-6 rounded-md shrink-0 flex items-center justify-center relative", iconBg, iconColor), children: [jsx(Icon, { size: 14, strokeWidth: 2 }), jsx("span", { className: "absolute -bottom-1 -right-1 rounded-full bg-background border border-border px-1 text-[10px] font-semibold leading-tight text-foreground", children: group.count })] }), jsx("div", { className: "flex-1 min-w-0 text-xs text-foreground leading-normal", children: summary }), group.tenant && (jsx("div", { className: "shrink-0", children: tenantRenderer ? (tenantRenderer(group.tenant)) : (jsx(TenantBadge, { tenant: group.tenant, tenantLinkResolver: tenantLinkResolver, size: "compact" })) })), jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap shrink-0", children: jsx(Timestamp, { value: group.latestTimestamp }) }), jsx(Button, { type: "quaternary", theme: "borderless", size: "small", className: "h-5 py-0 px-1 text-base text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0", onClick: toggleExpand, "aria-expanded": isExpanded, children: isExpanded ? "−" : "+" })] }), isExpanded && (jsx("div", { className: "pl-11 flex flex-col", children: group.activities.map((activity, index) => (jsx(ActivityFeedItem, { activity: activity, resourceLinkResolver: resourceLinkResolver, tenantLinkResolver: tenantLinkResolver, tenantRenderer: tenantRenderer, onActorClick: onActorClick, onActivityClick: onActivityClick, compact: true, density: "compact", variant: "timeline", isLast: index === group.activities.length - 1 }, activity.metadata?.uid || activity.metadata?.name))) }))] }));
+}
+
+/**
+ * Thin stat strip summarizing the activities currently loaded in the feed —
+ * e.g. "18 changes · 3 people · 1 system". Computed client-side over the
+ * loaded/paginated activities; it is a quick-glance headline, not a
+ * full-range aggregate (that would require a backend facet query).
+ */
+function ActivityDigestSummary({ activities, className = "" }) {
+    const stats = useMemo(() => {
+        const humanActors = new Set();
+        const systemActors = new Set();
+        for (const activity of activities) {
+            const { actor, changeSource } = activity.spec;
+            if (changeSource === "human") {
+                humanActors.add(actor.name);
+            }
+            else {
+                systemActors.add(actor.name);
+            }
+        }
+        return {
+            total: activities.length,
+            people: humanActors.size,
+            systems: systemActors.size,
+        };
+    }, [activities]);
+    if (stats.total === 0)
+        return null;
+    const parts = [`${stats.total} ${stats.total === 1 ? "change" : "changes"}`];
+    if (stats.people > 0)
+        parts.push(`${stats.people} ${stats.people === 1 ? "person" : "people"}`);
+    if (stats.systems > 0)
+        parts.push(`${stats.systems} ${stats.systems === 1 ? "system" : "systems"}`);
+    return (jsx("div", { className: `px-1 pt-4 pb-2 text-xs text-muted-foreground ${className}`, children: parts.join(" · ") }));
+}
+
+function tenantKey(tenant) {
+    if (!tenant)
+        return '';
+    return `${tenant.type}:${tenant.name}`;
+}
+function groupSignature(activity) {
+    const { spec } = activity;
+    const verb = normalizeVerb(extractVerb(spec.summary));
+    return [verb, spec.resource.kind, spec.actor.name, tenantKey(spec.tenant)].join('|');
+}
+/**
+ * Group consecutive activities that share verb + resource kind + actor +
+ * tenant. Activities are assumed to already be sorted newest-first (as
+ * returned by `useActivityFeed`); only adjacent items are merged, so a
+ * burst of matching activities collapses into one group without needing
+ * any time-window heuristics.
+ */
+function groupActivities(activities) {
+    const groups = [];
+    for (const activity of activities) {
+        const signature = groupSignature(activity);
+        const last = groups[groups.length - 1];
+        if (last && last.key === signature) {
+            last.activities.push(activity);
+            last.count += 1;
+            continue;
+        }
+        const { spec } = activity;
+        groups.push({
+            key: signature,
+            verb: normalizeVerb(extractVerb(spec.summary)),
+            kind: spec.resource.kind,
+            actorName: spec.actor.name,
+            actorDisplayName: spec.actor.displayName,
+            tenant: spec.tenant,
+            activities: [activity],
+            count: 1,
+            latestTimestamp: activity.metadata?.creationTimestamp,
+        });
+    }
+    return groups;
+}
+function dayLabel(timestamp) {
+    if (!timestamp)
+        return 'Unknown date';
+    const date = new Date(timestamp);
+    if (Number.isNaN(date.getTime()))
+        return 'Unknown date';
+    if (isToday(date))
+        return 'Today';
+    if (isYesterday(date))
+        return 'Yesterday';
+    return format(date, 'MMMM d, yyyy');
+}
+/**
+ * Bucket activities into calendar-day sections (Today / Yesterday / a
+ * formatted date), then group consecutive matching activities within each
+ * day. Bucketing by day first (rather than grouping across the whole list)
+ * keeps a group from silently spanning a day boundary.
+ */
+function groupActivitiesByDay(activities) {
+    const sections = [];
+    let currentLabel = null;
+    let currentBucket = [];
+    const flush = () => {
+        if (currentLabel !== null && currentBucket.length > 0) {
+            sections.push({ label: currentLabel, groups: groupActivities(currentBucket) });
+        }
+    };
+    for (const activity of activities) {
+        const label = dayLabel(activity.metadata?.creationTimestamp);
+        if (label !== currentLabel) {
+            flush();
+            currentLabel = label;
+            currentBucket = [];
+        }
+        currentBucket.push(activity);
+    }
+    flush();
+    return sections;
 }
 
 /**
@@ -11064,10 +11421,10 @@ function ActivityFeed({ client, initialFilters = { changeSource: "human" }, init
     // Parent containers must have proper height constraints (h-screen/h-full + overflow-hidden)
     const effectiveMaxHeight = maxHeight === "none" ? undefined : maxHeight;
     const listClasses = "flex-1 min-h-0 overflow-y-auto flex flex-col";
-    return (jsx(TooltipProvider, { delayDuration: 200, children: jsxs(Card, { className: containerClasses, children: [enableStreaming && (jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center", children: [isStreaming && !watchError && (jsx(TooltipProvider, { delayDuration: 300, children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsxs("div", { className: "flex items-center gap-2", children: [jsxs("span", { className: "relative flex h-2 w-2", children: [jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--success-500)] opacity-75" }), jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-[var(--success-500)]" })] }), jsx("span", { className: "text-xs text-muted-foreground", children: "Streaming activity..." })] }) }), jsx(TooltipContent, { className: "text-xs", children: jsx("p", { children: "New activities will appear automatically" }) })] }) })), watchError && (jsx(TooltipProvider, { delayDuration: 300, children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "relative flex h-2 w-2", children: jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-destructive" }) }), jsx("span", { className: "text-xs text-destructive", children: "Connection error" })] }) }), jsx(TooltipContent, { className: "text-xs", children: jsx("p", { children: "Stream connection lost" }) })] }) })), newActivitiesCount > 0 && !watchError && (jsxs(Badge, { variant: "secondary", className: "text-xs", children: ["+", newActivitiesCount, " new"] }))] }), jsx(Button, { type: "tertiary", theme: "outline", size: "small", onClick: handleStreamingToggle, children: watchError ? (jsxs(Fragment, { children: [jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", strokeWidth: "2", children: [jsx("path", { d: "M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" }), jsx("circle", { cx: "12", cy: "12", r: "3" })] }), "Retry"] })) : isStreaming ? (jsxs(Fragment, { children: [jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsx("rect", { x: "6", y: "4", width: "4", height: "16" }), jsx("rect", { x: "14", y: "4", width: "4", height: "16" })] }), "Pause"] })) : (jsxs(Fragment, { children: [jsx("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("polygon", { points: "5,3 19,12 5,21", fill: "currentColor" }) }), "Resume"] })) })] })), showFilters && (jsx(ActivityFeedFilters, { client: client, filters: filters, timeRange: timeRange, onFiltersChange: handleFiltersChange, onTimeRangeChange: handleTimeRangeChange, disabled: isLoading, hiddenFilters: hiddenFilters })), jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-4", errorFormatter: errorFormatter }), jsx(ApiErrorAlert, { error: watchError, onRetry: startStreaming, className: "mb-4", errorFormatter: errorFormatter }), !policiesLoading && hasPolicies === false && (jsxs("div", { className: "flex flex-col items-center py-12 px-8 text-center bg-muted border border-dashed border-border rounded-xl mb-4", children: [jsx("div", { className: "flex justify-center mb-4 text-muted-foreground", children: jsxs("svg", { width: "56", height: "56", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" }), jsx("rect", { x: "9", y: "3", width: "6", height: "4", rx: "1" }), jsx("path", { d: "M9 12h6" }), jsx("path", { d: "M9 16h6" })] }) }), jsx("h3", { className: "m-0 mb-2 text-lg font-semibold text-foreground leading-snug", children: "Get started with activity logging" }), jsx("p", { className: "m-0 mb-6 text-sm leading-relaxed text-muted-foreground max-w-[400px]", children: "Activity policies define which resources to track and how to summarize changes. Create your first policy to start seeing activity logs here." }), onCreatePolicy && (jsx(Button, { onClick: onCreatePolicy, children: "Create Policy" }))] })), jsxs("div", { className: listClasses, ref: scrollContainerRef, style: effectiveMaxHeight ? { maxHeight: effectiveMaxHeight } : undefined, children: [!isLoading &&
+    return (jsx(TooltipProvider, { delayDuration: 200, children: jsxs(Card, { className: containerClasses, children: [enableStreaming && (jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center", children: [isStreaming && !watchError && (jsx(TooltipProvider, { delayDuration: 300, children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsxs("div", { className: "flex items-center gap-2", children: [jsxs("span", { className: "relative flex h-2 w-2", children: [jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--success-500)] opacity-75" }), jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-[var(--success-500)]" })] }), jsx("span", { className: "text-xs text-muted-foreground", children: "Streaming activity..." })] }) }), jsx(TooltipContent, { className: "text-xs", children: jsx("p", { children: "New activities will appear automatically" }) })] }) })), watchError && (jsx(TooltipProvider, { delayDuration: 300, children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "relative flex h-2 w-2", children: jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-destructive" }) }), jsx("span", { className: "text-xs text-destructive", children: "Connection error" })] }) }), jsx(TooltipContent, { className: "text-xs", children: jsx("p", { children: "Stream connection lost" }) })] }) })), newActivitiesCount > 0 && !watchError && (jsxs(Badge, { variant: "secondary", className: "text-xs", children: ["+", newActivitiesCount, " new"] }))] }), jsx(Button, { type: "tertiary", theme: "outline", size: "small", onClick: handleStreamingToggle, children: watchError ? (jsxs(Fragment, { children: [jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", strokeWidth: "2", children: [jsx("path", { d: "M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" }), jsx("circle", { cx: "12", cy: "12", r: "3" })] }), "Retry"] })) : isStreaming ? (jsxs(Fragment, { children: [jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsx("rect", { x: "6", y: "4", width: "4", height: "16" }), jsx("rect", { x: "14", y: "4", width: "4", height: "16" })] }), "Pause"] })) : (jsxs(Fragment, { children: [jsx("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("polygon", { points: "5,3 19,12 5,21", fill: "currentColor" }) }), "Resume"] })) })] })), showFilters && (jsx(ActivityFeedFilters, { client: client, filters: filters, timeRange: timeRange, onFiltersChange: handleFiltersChange, onTimeRangeChange: handleTimeRangeChange, disabled: isLoading, hiddenFilters: hiddenFilters, layout: variant === "digest" ? "compact" : "inline" })), variant === "digest" && !isLoading && activities.length > 0 && (jsx(ActivityDigestSummary, { activities: activities })), jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-4", errorFormatter: errorFormatter }), jsx(ApiErrorAlert, { error: watchError, onRetry: startStreaming, className: "mb-4", errorFormatter: errorFormatter }), !policiesLoading && hasPolicies === false && (jsxs("div", { className: "flex flex-col items-center py-12 px-8 text-center bg-muted border border-dashed border-border rounded-xl mb-4", children: [jsx("div", { className: "flex justify-center mb-4 text-muted-foreground", children: jsxs("svg", { width: "56", height: "56", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" }), jsx("rect", { x: "9", y: "3", width: "6", height: "4", rx: "1" }), jsx("path", { d: "M9 12h6" }), jsx("path", { d: "M9 16h6" })] }) }), jsx("h3", { className: "m-0 mb-2 text-lg font-semibold text-foreground leading-snug", children: "Get started with activity logging" }), jsx("p", { className: "m-0 mb-6 text-sm leading-relaxed text-muted-foreground max-w-[400px]", children: "Activity policies define which resources to track and how to summarize changes. Create your first policy to start seeing activity logs here." }), onCreatePolicy && (jsx(Button, { onClick: onCreatePolicy, children: "Create Policy" }))] })), jsxs("div", { className: listClasses, ref: scrollContainerRef, style: effectiveMaxHeight ? { maxHeight: effectiveMaxHeight } : undefined, children: [!isLoading &&
                             activities.length === 0 &&
                             hasPolicies !== false &&
-                            variant === "timeline" && (jsxs("div", { className: "py-12 text-center text-muted-foreground", children: [jsx("p", { className: "m-0", children: "No activities found" }), jsx("p", { className: "text-sm text-muted-foreground mt-2 m-0", children: "Try adjusting your filters or time range" })] })), variant === "timeline" ? (jsxs(Fragment, { children: [isLoading && activities.length === 0 && (jsx(Fragment, { children: Array.from({ length: 8 }).map((_, index) => (jsx(ActivityFeedItemSkeleton, { compact: compact }, index))) })), activities.map((activity, index) => (jsx(ActivityFeedItem, { activity: activity, onResourceClick: onResourceClick, resourceLinkResolver: resourceLinkResolver, tenantLinkResolver: tenantLinkResolver, tenantRenderer: tenantRenderer, onActorClick: handleActorClick, onActivityClick: onActivityClick, compact: compact, isNew: enableStreaming && index < newActivitiesCount, variant: variant, isLast: index === activities.length - 1 }, activity.metadata?.uid || activity.metadata?.name)))] })) : (jsxs(Table, { className: "w-full", children: [jsx(TableHeader, { children: jsxs(TableRow, { children: [jsx(TableHead, { className: "w-12", "aria-label": "Actor" }), jsx(TableHead, { children: "Summary" }), jsx(TableHead, { children: "Tenant" }), jsx(TableHead, { className: "w-[170px]", children: "When" }), jsx(TableHead, { className: "w-10", "aria-label": "Expand" })] }) }), jsxs(TableBody, { children: [isLoading && activities.length === 0 && (jsx(Fragment, { children: Array.from({ length: 8 }).map((_, index) => (jsxs(TableRow, { children: [jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-6 w-6 rounded-full" }) }), jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-4 w-3/4" }) }), jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-5 w-32 rounded-full" }) }), jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-4 w-24" }) }), jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-6 w-6" }) })] }, `sk-${index}`))) })), !isLoading &&
+                            (variant === "timeline" || variant === "digest") && (jsxs("div", { className: "py-12 text-center text-muted-foreground", children: [jsx("p", { className: "m-0", children: "No activities found" }), jsx("p", { className: "text-sm text-muted-foreground mt-2 m-0", children: "Try adjusting your filters or time range" })] })), variant === "digest" ? (jsxs(Fragment, { children: [isLoading && activities.length === 0 && (jsx(Fragment, { children: Array.from({ length: 8 }).map((_, index) => (jsx(ActivityFeedItemSkeleton, { compact: compact }, index))) })), groupActivitiesByDay(activities).map((section) => (jsxs("div", { className: "flex flex-col", children: [jsx("div", { className: "sticky top-0 z-10 bg-card pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: section.label }), section.groups.map((group, index) => (jsx(ActivityFeedGroupItem, { group: group, resourceLinkResolver: resourceLinkResolver, tenantLinkResolver: tenantLinkResolver, tenantRenderer: tenantRenderer, onActorClick: handleActorClick, onActivityClick: onActivityClick, isLast: index === section.groups.length - 1 }, `${section.label}-${group.key}-${index}`)))] }, section.label)))] })) : variant === "timeline" ? (jsxs(Fragment, { children: [isLoading && activities.length === 0 && (jsx(Fragment, { children: Array.from({ length: 8 }).map((_, index) => (jsx(ActivityFeedItemSkeleton, { compact: compact }, index))) })), activities.map((activity, index) => (jsx(ActivityFeedItem, { activity: activity, onResourceClick: onResourceClick, resourceLinkResolver: resourceLinkResolver, tenantLinkResolver: tenantLinkResolver, tenantRenderer: tenantRenderer, onActorClick: handleActorClick, onActivityClick: onActivityClick, compact: compact, isNew: enableStreaming && index < newActivitiesCount, variant: variant, isLast: index === activities.length - 1 }, activity.metadata?.uid || activity.metadata?.name)))] })) : (jsxs(Table, { className: "w-full", children: [jsx(TableHeader, { children: jsxs(TableRow, { children: [jsx(TableHead, { className: "w-12", "aria-label": "Actor" }), jsx(TableHead, { children: "Summary" }), jsx(TableHead, { children: "Tenant" }), jsx(TableHead, { className: "w-[170px]", children: "When" }), jsx(TableHead, { className: "w-10", "aria-label": "Expand" })] }) }), jsxs(TableBody, { children: [isLoading && activities.length === 0 && (jsx(Fragment, { children: Array.from({ length: 8 }).map((_, index) => (jsxs(TableRow, { children: [jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-6 w-6 rounded-full" }) }), jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-4 w-3/4" }) }), jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-5 w-32 rounded-full" }) }), jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-4 w-24" }) }), jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-6 w-6" }) })] }, `sk-${index}`))) })), !isLoading &&
                                             activities.length === 0 &&
                                             hasPolicies !== false && (jsx(TableRow, { children: jsxs(TableCell, { colSpan: ACTIVITY_FEED_COLUMN_COUNT, className: "text-center py-12 text-muted-foreground", children: [jsx("div", { children: "No activities found" }), jsx("div", { className: "text-sm mt-2", children: "Try adjusting your filters or time range" })] }) })), activities.map((activity, index) => (jsx(ActivityFeedItem, { activity: activity, onResourceClick: onResourceClick, resourceLinkResolver: resourceLinkResolver, tenantLinkResolver: tenantLinkResolver, tenantRenderer: tenantRenderer, onActorClick: handleActorClick, onActivityClick: onActivityClick, compact: compact, isNew: enableStreaming && index < newActivitiesCount, variant: variant, isLast: index === activities.length - 1 }, activity.metadata?.uid || activity.metadata?.name)))] })] })), infiniteScroll && hasMore && (jsx("div", { ref: loadMoreTriggerRef, className: "h-px mt-4" })), !infiniteScroll && activities.length > 0 ? (jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3 border-t border-border text-sm text-muted-foreground", children: [jsxs("span", { children: [activities.length, " ", activities.length === 1 ? "activity" : "activities", hasMore ? " so far" : ""] }), hasMore ? (jsx(Button, { type: "tertiary", theme: "outline", size: "small", htmlType: "button", onClick: handleLoadMoreClick, disabled: isLoading, children: isLoading ? "Loading…" : "Load more" })) : (jsx("span", { children: "End of results" }))] })) : null] })] }) }));
 }
@@ -16456,5 +16813,5 @@ const POLICY_FILTER_FIELDS = [
     },
 ];
 
-export { ACTIVITY_FILTER_FIELDS, AUDIT_TEMPLATES, ActionMultiSelect, ActionToggle, ActivityApiClient, ActivityExpandedDetails, ActivityFeed, ActivityFeedFilters, ActivityFeedItem, ActivityFeedItemSkeleton, ActivityFeedSummary, ActivityLayout, ApiError, ApiErrorAlert, AuditEventViewer, AuditLogExpandedDetails, AuditLogFeedItem, AuditLogFilters, AuditLogQueryComponent, Badge, CelEditor, ChangeSourceToggle, Combobox, DateTimeRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EVENT_FACET_FIELDS, EVENT_FILTER_FIELDS, EVENT_TEMPLATES, EventExpandedDetails, EventFeedItem, EventTypeToggle, EventsFeed, FILTER_FIELDS, FilterBuilder, FilterBuilderWithAutocomplete, MultiCombobox, NetworkError, POLICY_FILTER_FIELDS, PolicyActivityView, PolicyActivityViewSkeleton, PolicyDetailView, PolicyEditView, PolicyEditor, PolicyList, PolicyPreviewPanel, PolicyPreviewResult, PolicyResourceForm, PolicyRuleEditor, PolicyRuleEditorDialog, PolicyRuleList, PolicyRuleListItem, ReindexJobCreate, ReindexJobDetailView, ReindexJobDialog, ReindexJobList, ResourceHistoryView, RulePreviewPanel, SampleInputTemplates, SimpleQueryBuilder, TenantBadge, TimeRangeDropdown, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserSelect, badgeVariants, buildAuditLogCEL, cn, copyToClipboard, defaultErrorFormatter, defaultResourceLinkResolver, extractEvent, extractFieldPaths, extractFieldPathsFromMany, generateShareableUrl, getReindexJobDuration, getReindexJobStatusMessage, isEventRecord, isReindexJobRunning, isReindexJobTerminal, parseActivityFilters, parseApiError, parseEventFilters, parseTimeRange, serializeActivityFilters, serializeEventFilters, useActivityFeed, useAuditLogFacets, useAuditLogQuery, useEventFacets, useEventsFeed, useFacets, usePolicyEditor, usePolicyList, usePolicyPreview, useReindexJobs };
+export { ACTIVITY_FILTER_FIELDS, AUDIT_TEMPLATES, ActionMultiSelect, ActionToggle, ActivityApiClient, ActivityDigestSummary, ActivityExpandedDetails, ActivityFeed, ActivityFeedFilters, ActivityFeedGroupItem, ActivityFeedItem, ActivityFeedItemSkeleton, ActivityFeedSummary, ActivityLayout, ApiError, ApiErrorAlert, AuditEventViewer, AuditLogExpandedDetails, AuditLogFeedItem, AuditLogFilters, AuditLogQueryComponent, Badge, CelEditor, ChangeSourceToggle, Combobox, DateTimeRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EVENT_FACET_FIELDS, EVENT_FILTER_FIELDS, EVENT_TEMPLATES, EventExpandedDetails, EventFeedItem, EventTypeToggle, EventsFeed, FILTER_FIELDS, FilterBuilder, FilterBuilderWithAutocomplete, MultiCombobox, NetworkError, POLICY_FILTER_FIELDS, PolicyActivityView, PolicyActivityViewSkeleton, PolicyDetailView, PolicyEditView, PolicyEditor, PolicyList, PolicyPreviewPanel, PolicyPreviewResult, PolicyResourceForm, PolicyRuleEditor, PolicyRuleEditorDialog, PolicyRuleList, PolicyRuleListItem, ReindexJobCreate, ReindexJobDetailView, ReindexJobDialog, ReindexJobList, ResourceHistoryView, RulePreviewPanel, SampleInputTemplates, SimpleQueryBuilder, TenantBadge, TimeRangeDropdown, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserSelect, badgeVariants, buildAuditLogCEL, cn, copyToClipboard, defaultErrorFormatter, defaultResourceLinkResolver, extractEvent, extractFieldPaths, extractFieldPathsFromMany, generateShareableUrl, getReindexJobDuration, getReindexJobStatusMessage, groupActivities, groupActivitiesByDay, isEventRecord, isReindexJobRunning, isReindexJobTerminal, parseActivityFilters, parseApiError, parseEventFilters, parseTimeRange, serializeActivityFilters, serializeEventFilters, useActivityFeed, useAuditLogFacets, useAuditLogQuery, useEventFacets, useEventsFeed, useFacets, usePolicyEditor, usePolicyList, usePolicyPreview, useReindexJobs };
 //# sourceMappingURL=index.esm.js.map