@datum-cloud/activity-ui 0.1.2 → 0.3.0-dev.eaadbbb

package/dist/index.js

@@ -7624,13 +7624,32 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$m = [
+const __iconNode$o = [
+  [
+    "path",
+    {
+      d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2",
+      key: "169zse"
+    }
+  ]
+];
+const Activity = createLucideIcon("activity", __iconNode$o);
+
+/**
+ * @license lucide-react v0.563.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$n = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
   ["path", { d: "M3 10h18", key: "8toen8" }]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$m);
+const Calendar = createLucideIcon("calendar", __iconNode$n);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -7640,8 +7659,8 @@ const Calendar = createLucideIcon("calendar", __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.563.0 - ISC
@@ -7651,8 +7670,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.563.0 - ISC
@@ -7662,8 +7681,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.563.0 - ISC
@@ -7673,8 +7692,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.563.0 - ISC
@@ -7684,11 +7703,11 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$i);
  */
 
 
-const __iconNode$h = [
+const __iconNode$i = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$h);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$i);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -7698,12 +7717,12 @@ const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$h);
  */
 
 
-const __iconNode$g = [
+const __iconNode$h = [
   ["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$g);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$h);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -7713,11 +7732,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$g);
  */
 
 
-const __iconNode$f = [
+const __iconNode$g = [
   ["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$f);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$g);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -7727,11 +7746,11 @@ const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$f);
  */
 
 
-const __iconNode$e = [
+const __iconNode$f = [
   ["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$e);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$f);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -7741,12 +7760,12 @@ const CircleCheck = createLucideIcon("circle-check", __iconNode$e);
  */
 
 
-const __iconNode$d = [
+const __iconNode$e = [
   ["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$d);
+const CircleX = createLucideIcon("circle-x", __iconNode$e);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -7756,11 +7775,11 @@ const CircleX = createLucideIcon("circle-x", __iconNode$d);
  */
 
 
-const __iconNode$c = [
+const __iconNode$d = [
   ["path", { d: "M12 6v6l4 2", key: "mmk7yg" }],
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
 ];
-const Clock = createLucideIcon("clock", __iconNode$c);
+const Clock = createLucideIcon("clock", __iconNode$d);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -7770,11 +7789,11 @@ const Clock = createLucideIcon("clock", __iconNode$c);
  */
 
 
-const __iconNode$b = [
+const __iconNode$c = [
   ["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$b);
+const Copy = createLucideIcon("copy", __iconNode$c);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -7784,7 +7803,7 @@ const Copy = createLucideIcon("copy", __iconNode$b);
  */
 
 
-const __iconNode$a = [
+const __iconNode$b = [
   [
     "path",
     {
@@ -7794,7 +7813,18 @@ const __iconNode$a = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Eye = createLucideIcon("eye", __iconNode$a);
+const Eye = createLucideIcon("eye", __iconNode$b);
+
+/**
+ * @license lucide-react v0.563.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$a = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$a);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -7804,8 +7834,17 @@ const Eye = createLucideIcon("eye", __iconNode$a);
  */
 
 
-const __iconNode$9 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$9);
+const __iconNode$9 = [
+  [
+    "path",
+    {
+      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+      key: "1a8usu"
+    }
+  ],
+  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
+];
+const Pencil = createLucideIcon("pencil", __iconNode$9);
 
 /**
  * @license lucide-react v0.563.0 - ISC
@@ -8544,7 +8583,7 @@ function FilterChip({ label, values, options = [], onValuesChange, onClear, inpu
     }, [options]);
     // Find selected options for chips display
     const selectedOptions = options.filter((opt) => values.includes(opt.value));
-    return (jsxRuntime.jsxs("div", { className: cn('inline-flex items-center', className), children: [jsxRuntime.jsxs(Popover__namespace.Root, { open: open, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", disabled: disabled, className: cn('flex h-7 items-center gap-2 rounded-l-md border border-r-0 border-border bg-secondary px-2 text-xs', 'hover:bg-secondary/80 transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50'), children: [jsxRuntime.jsxs("span", { className: "font-medium text-foreground", children: [label, ":"] }), jsxRuntime.jsx("span", { className: "text-foreground truncate max-w-[120px]", children: displayValue }), jsxRuntime.jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground ml-1" })] }) }), jsxRuntime.jsx(Popover__namespace.Portal, { children: jsxRuntime.jsx(Popover__namespace.Content, { className: cn('z-50 min-w-[var(--radix-popover-trigger-width)] max-w-[320px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2'), sideOffset: 4, align: "start", children: inputMode === 'typeahead' ? (jsxRuntime.jsxs(cmdk.Command, { filter: filterOptions, className: "w-full", children: [jsxRuntime.jsx("div", { className: "flex items-center border-b px-3", children: jsxRuntime.jsx(cmdk.CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: setSearch, className: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" }) }), values.length > 0 && (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 p-2 border-b", children: selectedOptions.map((option) => (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-accent text-accent-foreground text-xs", children: [option.label, jsxRuntime.jsx("button", { type: "button", onClick: (e) => handleRemoveValue(e, option.value), className: "rounded-sm hover:bg-accent-foreground/20", children: jsxRuntime.jsx(X, { className: "h-3 w-3" }) })] }, option.value))) })), jsxRuntime.jsxs(cmdk.CommandList, { className: "max-h-[300px] overflow-y-auto p-1", children: [jsxRuntime.jsx(cmdk.CommandEmpty, { className: "py-6 text-center text-sm text-muted-foreground", children: "No results found." }), jsxRuntime.jsx(cmdk.CommandGroup, { children: options.map((option) => (jsxRuntime.jsxs(cmdk.CommandItem, { value: option.value, onSelect: () => handleSelect(option.value), className: cn('relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', 'hover:bg-accent hover:text-accent-foreground'), children: [jsxRuntime.jsx("input", { type: "checkbox", checked: values.includes(option.value), onChange: () => { }, className: "mr-2 h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1 truncate", children: option.label }), option.count !== undefined && (jsxRuntime.jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value))) })] })] })) : (jsxRuntime.jsx("div", { className: "p-3", children: jsxRuntime.jsx(Input, { type: "text", value: textValue, onChange: handleTextChange, placeholder: placeholder, className: "w-full", autoFocus: true }) })) }) })] }), jsxRuntime.jsx("button", { type: "button", onClick: handleClearAll, disabled: disabled, className: cn('flex h-7 items-center rounded-r-md border border-border bg-secondary px-2', 'hover:bg-secondary/80 transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50'), "aria-label": `Clear ${label} filter`, children: jsxRuntime.jsx(X, { className: "h-3 w-3 text-muted-foreground" }) })] }));
+    return (jsxRuntime.jsxs("div", { className: cn('inline-flex items-center', className), children: [jsxRuntime.jsxs(Popover__namespace.Root, { open: open, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", disabled: disabled, className: cn('flex h-7 items-center gap-2 rounded-l-md border border-r-0 border-border bg-card px-2 text-xs outline-none', 'hover:bg-accent/40 data-[state=open]:bg-accent/40 transition-colors', 'disabled:cursor-not-allowed disabled:opacity-50'), children: [jsxRuntime.jsxs("span", { className: "font-medium text-foreground", children: [label, ":"] }), jsxRuntime.jsx("span", { className: "text-foreground truncate max-w-[120px]", children: displayValue }), jsxRuntime.jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground ml-1" })] }) }), jsxRuntime.jsx(Popover__namespace.Portal, { children: jsxRuntime.jsx(Popover__namespace.Content, { className: cn('z-50 min-w-[var(--radix-popover-trigger-width)] max-w-[320px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2'), sideOffset: 4, align: "start", children: inputMode === 'typeahead' ? (jsxRuntime.jsxs(cmdk.Command, { filter: filterOptions, className: "w-full", children: [jsxRuntime.jsx("div", { className: "flex items-center border-b px-3", children: jsxRuntime.jsx(cmdk.CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: setSearch, className: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" }) }), values.length > 0 && (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 p-2 border-b", children: selectedOptions.map((option) => (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-accent text-accent-foreground text-xs", children: [option.label, jsxRuntime.jsx("button", { type: "button", onClick: (e) => handleRemoveValue(e, option.value), className: "rounded-sm hover:bg-accent-foreground/20", children: jsxRuntime.jsx(X, { className: "h-3 w-3" }) })] }, option.value))) })), jsxRuntime.jsxs(cmdk.CommandList, { className: "max-h-[300px] overflow-y-auto p-1", children: [jsxRuntime.jsx(cmdk.CommandEmpty, { className: "py-6 text-center text-sm text-muted-foreground", children: "No results found." }), jsxRuntime.jsx(cmdk.CommandGroup, { children: options.map((option) => (jsxRuntime.jsxs(cmdk.CommandItem, { value: option.value, onSelect: () => handleSelect(option.value), className: cn('relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', 'hover:bg-accent hover:text-accent-foreground'), children: [jsxRuntime.jsx("div", { className: cn('mr-2 h-4 w-4 shrink-0 rounded-sm border border-border', values.includes(option.value) && 'bg-primary border-primary'), children: values.includes(option.value) && (jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: "h-full w-full p-0.5 text-primary-foreground", children: jsxRuntime.jsx("path", { d: "M2 6l3 3 5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), jsxRuntime.jsx("span", { className: "flex-1 truncate", children: option.label }), option.count !== undefined && (jsxRuntime.jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value))) })] })] })) : (jsxRuntime.jsx("div", { className: "p-3", children: jsxRuntime.jsx(Input, { type: "text", value: textValue, onChange: handleTextChange, placeholder: placeholder, className: "w-full", autoFocus: true }) })) }) })] }), jsxRuntime.jsx("button", { type: "button", onClick: handleClearAll, disabled: disabled, className: cn('flex h-7 items-center rounded-r-md border border-border bg-card px-2 outline-none', 'hover:bg-accent/40 transition-colors', 'disabled:cursor-not-allowed disabled:opacity-50'), "aria-label": `Clear ${label} filter`, children: jsxRuntime.jsx(X, { className: "h-3 w-3 text-muted-foreground" }) })] }));
 }
 
 /**
@@ -10236,13 +10275,14 @@ const TooltipContent = React__namespace.forwardRef(({ className, sideOffset = 4,
 TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
 
 /**
- * Format timestamp for display (with timezone)
+ * Format timestamp for display (in UTC)
  */
 function formatTimestampFull$3(timestamp) {
     if (!timestamp)
         return 'Unknown time';
     try {
-        return format(new Date(timestamp), 'yyyy-MM-dd HH:mm:ss \'UTC\'');
+        const date = new Date(timestamp);
+        return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}-${String(date.getUTCDate()).padStart(2, '0')} ${String(date.getUTCHours()).padStart(2, '0')}:${String(date.getUTCMinutes()).padStart(2, '0')}:${String(date.getUTCSeconds()).padStart(2, '0')} UTC`;
     }
     catch {
         return timestamp;
@@ -10278,11 +10318,11 @@ function CopyButton({ value, label }) {
  * 5. Resource - what resource was affected
  * 6. Origin - correlation to audit logs
  */
-function ActivityExpandedDetails({ activity, tenantLinkResolver }) {
+function ActivityExpandedDetails({ activity, tenantLinkResolver, compact = false }) {
     const { spec, metadata } = activity;
     const { actor, resource, origin, changes, tenant } = spec;
     const timestamp = metadata?.creationTimestamp;
-    return (jsxRuntime.jsx(TooltipProvider, { children: jsxRuntime.jsxs("div", { className: "mt-4 pt-4 border-t border-border", children: [changes && changes.length > 0 && (jsxRuntime.jsxs("div", { className: "mb-3", children: [jsxRuntime.jsx("h4", { className: "m-0 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Changes" }), jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: changes.map((change, index) => (jsxRuntime.jsxs("div", { className: "p-2 bg-muted rounded text-sm", children: [jsxRuntime.jsx("span", { className: "block font-semibold text-foreground mb-1 font-mono text-xs", children: change.field }), change.old && (jsxRuntime.jsxs("span", { className: "block ml-2 text-red-600 dark:text-red-400 text-xs", children: [jsxRuntime.jsx("span", { className: "font-medium mr-1", children: "\u2212" }), jsxRuntime.jsx("span", { className: "line-through", children: change.old })] })), change.new && (jsxRuntime.jsxs("span", { className: "block ml-2 text-green-600 dark:text-green-400 text-xs", children: [jsxRuntime.jsx("span", { className: "font-medium mr-1", children: "+" }), change.new] }))] }, index))) })] })), jsxRuntime.jsxs("dl", { className: "grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-x-6 gap-y-2 m-0 text-xs", children: [jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Timestamp:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: formatTimestampFull$3(timestamp) }), jsxRuntime.jsx(CopyButton, { value: formatTimestampFull$3(timestamp), label: "timestamp" })] })] }), jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Actor Type:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: actor.type }), jsxRuntime.jsx(CopyButton, { value: actor.type, label: "actor type" })] })] }), jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Actor:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: actor.name }), jsxRuntime.jsx(CopyButton, { value: actor.name, label: "actor name" })] })] }), resource.apiGroup && (jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "API Group:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: resource.apiGroup }), jsxRuntime.jsx(CopyButton, { value: resource.apiGroup, label: "API group" })] })] })), jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Resource:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: resource.kind }), jsxRuntime.jsx(CopyButton, { value: resource.kind, label: "resource kind" })] })] }), jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Resource Name:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: resource.name }), jsxRuntime.jsx(CopyButton, { value: resource.name, label: "resource name" })] })] }), resource.namespace && (jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Namespace:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: resource.namespace }), jsxRuntime.jsx(CopyButton, { value: resource.namespace, label: "namespace" })] })] })), resource.uid && (jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Resource UID:" }), jsxRuntime.jsxs("dd", { className: "m-0 font-mono text-muted-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: resource.uid }), jsxRuntime.jsx(CopyButton, { value: resource.uid, label: "resource UID" })] })] })), jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Origin:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: origin.type }), jsxRuntime.jsx(CopyButton, { value: origin.type, label: "origin type" })] })] }), jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Origin ID:" }), jsxRuntime.jsxs("dd", { className: "m-0 font-mono text-muted-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: origin.id }), jsxRuntime.jsx(CopyButton, { value: origin.id, label: "origin ID" })] })] })] })] }) }));
+    return (jsxRuntime.jsx(TooltipProvider, { children: jsxRuntime.jsxs("div", { className: compact ? 'p-4 bg-muted/30' : 'mt-4 pt-4 border-t border-border', children: [changes && changes.length > 0 && (jsxRuntime.jsxs("div", { className: "mb-3", children: [jsxRuntime.jsx("h4", { className: "m-0 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Changes" }), jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: changes.map((change, index) => (jsxRuntime.jsxs("div", { className: "p-2 bg-muted rounded text-sm", children: [jsxRuntime.jsx("span", { className: "block font-semibold text-foreground mb-1 font-mono text-xs", children: change.field }), change.old && (jsxRuntime.jsxs("span", { className: "block ml-2 text-red-600 dark:text-red-400 text-xs", children: [jsxRuntime.jsx("span", { className: "font-medium mr-1", children: "\u2212" }), jsxRuntime.jsx("span", { className: "line-through", children: change.old })] })), change.new && (jsxRuntime.jsxs("span", { className: "block ml-2 text-green-600 dark:text-green-400 text-xs", children: [jsxRuntime.jsx("span", { className: "font-medium mr-1", children: "+" }), change.new] }))] }, index))) })] })), jsxRuntime.jsxs("dl", { className: "grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-x-6 gap-y-2 m-0 text-xs", children: [jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Timestamp:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: formatTimestampFull$3(timestamp) }), jsxRuntime.jsx(CopyButton, { value: formatTimestampFull$3(timestamp), label: "timestamp" })] })] }), jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Actor Type:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: actor.type }), jsxRuntime.jsx(CopyButton, { value: actor.type, label: "actor type" })] })] }), jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Actor:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: actor.name }), jsxRuntime.jsx(CopyButton, { value: actor.name, label: "actor name" })] })] }), resource.apiGroup && (jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "API Group:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: resource.apiGroup }), jsxRuntime.jsx(CopyButton, { value: resource.apiGroup, label: "API group" })] })] })), jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Resource:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: resource.kind }), jsxRuntime.jsx(CopyButton, { value: resource.kind, label: "resource kind" })] })] }), jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Resource Name:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: resource.name }), jsxRuntime.jsx(CopyButton, { value: resource.name, label: "resource name" })] })] }), resource.namespace && (jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Namespace:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: resource.namespace }), jsxRuntime.jsx(CopyButton, { value: resource.namespace, label: "namespace" })] })] })), resource.uid && (jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Resource UID:" }), jsxRuntime.jsxs("dd", { className: "m-0 font-mono text-muted-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: resource.uid }), jsxRuntime.jsx(CopyButton, { value: resource.uid, label: "resource UID" })] })] })), jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Origin:" }), jsxRuntime.jsxs("dd", { className: "m-0 text-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: origin.type }), jsxRuntime.jsx(CopyButton, { value: origin.type, label: "origin type" })] })] }), jsxRuntime.jsxs("div", { className: "flex gap-1 items-baseline", children: [jsxRuntime.jsx("dt", { className: "text-muted-foreground shrink-0", children: "Origin ID:" }), jsxRuntime.jsxs("dd", { className: "m-0 font-mono text-muted-foreground flex items-center min-w-0", children: [jsxRuntime.jsx("span", { className: "truncate", children: origin.id }), jsxRuntime.jsx(CopyButton, { value: origin.id, label: "origin ID" })] })] })] })] }) }));
 }
 
 /**
@@ -10300,13 +10340,14 @@ function formatTimestamp$1(timestamp) {
     }
 }
 /**
- * Format timestamp for tooltip (with timezone)
+ * Format timestamp for tooltip (in UTC)
  */
 function formatTimestampFull$2(timestamp) {
     if (!timestamp)
         return 'Unknown time';
     try {
-        return format(new Date(timestamp), 'yyyy-MM-dd HH:mm:ss \'UTC\'');
+        const date = new Date(timestamp);
+        return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}-${String(date.getUTCDate()).padStart(2, '0')} ${String(date.getUTCHours()).padStart(2, '0')}:${String(date.getUTCMinutes()).padStart(2, '0')}:${String(date.getUTCSeconds()).padStart(2, '0')} UTC`;
     }
     catch {
         return timestamp;
@@ -10363,25 +10404,41 @@ function normalizeVerb(verb) {
     return 'other';
 }
 /**
- * Get timeline node classes based on verb
+ * Get icon container + icon color classes based on verb
  */
-function getTimelineNodeClasses(verb) {
+function getActionIconClasses(verb) {
     const normalizedVerb = normalizeVerb(verb);
     switch (normalizedVerb) {
         case 'create':
-            return 'bg-green-500';
+            return { container: 'bg-blue-50 dark:bg-blue-950', icon: 'text-blue-500 dark:text-blue-400' };
         case 'update':
-            return 'bg-amber-500';
+            return { container: 'bg-green-50 dark:bg-green-950', icon: 'text-green-600 dark:text-green-400' };
         case 'delete':
-            return 'bg-red-500';
+            return { container: 'bg-red-50 dark:bg-red-950', icon: 'text-red-500 dark:text-red-400' };
         default:
-            return 'bg-muted-foreground';
+            return { container: 'bg-slate-100 dark:bg-slate-800', icon: 'text-slate-500 dark:text-slate-400' };
+    }
+}
+/**
+ * Get the Lucide icon component for the timeline node based on verb
+ */
+function getTimelineIcon(verb) {
+    const normalizedVerb = normalizeVerb(verb);
+    switch (normalizedVerb) {
+        case 'create':
+            return Plus;
+        case 'update':
+            return Pencil;
+        case 'delete':
+            return Trash2;
+        default:
+            return Activity;
     }
 }
 /**
  * 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', isFirst = false, 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, }) {
     const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);
     const { spec, metadata } = activity;
     const { actor, summary, links, tenant } = spec;
@@ -10401,9 +10458,11 @@ function ActivityFeedItem({ activity, onResourceClick, resourceLinkResolver, ten
     const timestamp = metadata?.creationTimestamp;
     const verb = extractVerb(summary);
     const isTimeline = variant === 'timeline';
-    // Timeline variant wrapper
+    // Timeline variant — flat list row with bottom border
     if (isTimeline) {
-        return (jsxRuntime.jsxs("div", { className: cn('relative cursor-pointer group flex', compact ? 'pl-7' : 'pl-9', className), onClick: handleClick, children: [jsxRuntime.jsxs("div", { className: cn('absolute left-0 top-0 bottom-0 flex flex-col items-center', compact ? 'w-7' : 'w-9'), children: [jsxRuntime.jsx("div", { className: cn('w-0.5 flex-1', isFirst ? 'bg-transparent' : 'bg-border'), style: { minHeight: compact ? 12 : 16 } }), jsxRuntime.jsx("div", { className: cn('rounded-full shrink-0 z-10', compact ? 'w-2.5 h-2.5' : 'w-3 h-3', getTimelineNodeClasses(verb)) }), jsxRuntime.jsx("div", { className: cn('w-0.5 flex-1', isLast ? 'bg-transparent' : 'bg-border') })] }), jsxRuntime.jsxs("div", { className: cn('flex-1 border border-border rounded-lg transition-all duration-200 bg-card', 'shadow-sm hover:shadow-md hover:-translate-y-0.5', 'hover:border-primary/30 dark:hover:border-primary/40', compact ? 'p-2 mb-2' : 'p-2.5 mb-2', isSelected && 'border-primary bg-primary/5 ring-1 ring-primary/20 dark:bg-primary/10'), children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0 text-xs leading-snug", children: jsxRuntime.jsx(ActivityFeedSummary, { summary: summary, links: links, onResourceClick: onResourceClick, resourceLinkResolver: resourceLinkResolver, resourceLinkContext: { tenant } }) }), tenant && (jsxRuntime.jsx("div", { className: "shrink-0", children: tenantRenderer ? tenantRenderer(tenant) : jsxRuntime.jsx(TenantBadge, { tenant: tenant, tenantLinkResolver: tenantLinkResolver, size: "compact" }) })), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap shrink-0", title: formatTimestampFull$2(timestamp), children: formatTimestamp$1(timestamp) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", className: "h-5 py-0 px-1 text-base text-muted-foreground hover:text-foreground shrink-0", onClick: toggleExpand, "aria-expanded": isExpanded, children: isExpanded ? '−' : '+' })] }), isExpanded && jsxRuntime.jsx(ActivityExpandedDetails, { activity: activity, tenantLinkResolver: tenantLinkResolver })] })] }));
+        const { container: iconBg, icon: iconColor } = getActionIconClasses(verb);
+        const Icon = getTimelineIcon(verb);
+        return (jsxRuntime.jsxs("div", { className: cn(!isLast && !isExpanded && 'border-b border-border', className), children: [jsxRuntime.jsxs("div", { className: cn('flex items-center gap-3 py-3 pl-4 cursor-pointer group', isSelected && 'bg-muted/40'), onClick: toggleExpand, children: [jsxRuntime.jsx("div", { className: cn('w-8 h-8 rounded-md shrink-0 flex items-center justify-center', iconBg, iconColor), children: jsxRuntime.jsx(Icon, { size: 16, strokeWidth: 2 }) }), jsxRuntime.jsx("div", { className: "flex-1 min-w-0 text-sm text-foreground leading-snug", children: jsxRuntime.jsx(ActivityFeedSummary, { summary: summary, links: links, onResourceClick: onResourceClick, resourceLinkResolver: resourceLinkResolver, resourceLinkContext: { tenant } }) }), tenant && (jsxRuntime.jsx("div", { className: "shrink-0", children: tenantRenderer ? tenantRenderer(tenant) : jsxRuntime.jsx(TenantBadge, { tenant: tenant, tenantLinkResolver: tenantLinkResolver, size: "compact" }) })), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap shrink-0", title: formatTimestampFull$2(timestamp), children: formatTimestamp$1(timestamp) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", 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 && (jsxRuntime.jsx(ActivityExpandedDetails, { activity: activity, tenantLinkResolver: tenantLinkResolver, compact: true }))] }));
     }
     // Feed variant (single-row layout)
     return (jsxRuntime.jsxs(Card, { className: cn('cursor-pointer transition-all duration-200', 'shadow-sm hover:shadow-md hover:-translate-y-0.5', 'hover:border-primary/30 dark:hover:border-primary/40', compact ? 'p-1.5 mb-1' : 'p-4 mb-3', isSelected && 'border-primary bg-primary/5 shadow-md ring-1 ring-primary/20 dark:bg-primary/10', isNew && 'border-l-4 border-l-green-500 bg-green-50/50 dark:border-l-green-400 dark:bg-green-950/30', className), onClick: handleClick, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: cn(getActorAvatarClasses(actor.type, compact), onActorClick && 'cursor-pointer hover:opacity-80 transition-opacity'), title: actor.name, onClick: onActorClick ? handleActorClick : undefined, children: actor.type === 'controller' ? (jsxRuntime.jsx("span", { className: "text-xs", children: "\u2699" })) : actor.type === 'machine account' ? (jsxRuntime.jsx("span", { className: "text-xs", children: "\uD83E\uDD16" })) : (jsxRuntime.jsx("span", { className: "uppercase", children: getActorInitials(actor.name) })) }), jsxRuntime.jsx("div", { className: "flex-1 min-w-0 text-xs leading-snug", children: jsxRuntime.jsx(ActivityFeedSummary, { summary: summary, links: links, onResourceClick: onResourceClick, resourceLinkResolver: resourceLinkResolver, resourceLinkContext: { tenant } }) }), tenant && (jsxRuntime.jsx("div", { className: "shrink-0", children: tenantRenderer ? tenantRenderer(tenant) : jsxRuntime.jsx(TenantBadge, { tenant: tenant, tenantLinkResolver: tenantLinkResolver, size: "compact" }) })), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap shrink-0", title: formatTimestampFull$2(timestamp), children: formatTimestamp$1(timestamp) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", className: "h-5 py-0 px-1 text-base text-muted-foreground hover:text-foreground shrink-0", onClick: toggleExpand, "aria-expanded": isExpanded, children: isExpanded ? '−' : '+' })] }), isExpanded && jsxRuntime.jsx(ActivityExpandedDetails, { activity: activity, tenantLinkResolver: tenantLinkResolver })] }));
@@ -10723,19 +10782,22 @@ function ActivityFeedFilters({ client, filters, timeRange, onFiltersChange, onTi
         return 'Select time range';
     };
     // Determine which filters are currently active (have values) and not hidden
-    const filtersWithValues = [];
-    if (filters.resourceKinds && filters.resourceKinds.length > 0 && !hiddenFilters.includes('resourceKinds'))
-        filtersWithValues.push('resourceKinds');
-    if (filters.actorNames && filters.actorNames.length > 0 && !hiddenFilters.includes('actorNames'))
-        filtersWithValues.push('actorNames');
-    if (filters.apiGroups && filters.apiGroups.length > 0 && !hiddenFilters.includes('apiGroups'))
-        filtersWithValues.push('apiGroups');
-    if (filters.resourceNamespaces && filters.resourceNamespaces.length > 0 && !hiddenFilters.includes('resourceNamespaces'))
-        filtersWithValues.push('resourceNamespaces');
-    if (filters.resourceName && !hiddenFilters.includes('resourceName'))
-        filtersWithValues.push('resourceName');
-    if (filters.actions && filters.actions.length > 0)
-        filtersWithValues.push('actions');
+    const filtersWithValues = React.useMemo(() => {
+        const result = [];
+        if (filters.resourceKinds && filters.resourceKinds.length > 0 && !hiddenFilters.includes('resourceKinds'))
+            result.push('resourceKinds');
+        if (filters.actorNames && filters.actorNames.length > 0 && !hiddenFilters.includes('actorNames'))
+            result.push('actorNames');
+        if (filters.apiGroups && filters.apiGroups.length > 0 && !hiddenFilters.includes('apiGroups'))
+            result.push('apiGroups');
+        if (filters.resourceNamespaces && filters.resourceNamespaces.length > 0 && !hiddenFilters.includes('resourceNamespaces'))
+            result.push('resourceNamespaces');
+        if (filters.resourceName && !hiddenFilters.includes('resourceName'))
+            result.push('resourceName');
+        if (filters.actions && filters.actions.length > 0)
+            result.push('actions');
+        return result;
+    }, [filters, hiddenFilters]);
     // Include pendingFilter (newly added filter awaiting value selection) in the displayed filters
     const activeFilterIds = pendingFilter && !filtersWithValues.includes(pendingFilter)
         ? [...filtersWithValues, pendingFilter]
@@ -10754,7 +10816,7 @@ function ActivityFeedFilters({ client, filters, timeRange, onFiltersChange, onTi
         { id: 'apiGroups', label: 'API Group' },
         { id: 'resourceNamespaces', label: 'Namespace' },
         { id: 'resourceName', label: 'Resource Name' },
-        { id: 'actions', label: 'Action' },
+        // 'actions' hidden until backend facet support is available
     ].filter((filter) => !hiddenFilters.includes(filter.id));
     // Handle adding a filter
     const handleAddFilter = React.useCallback((filterId) => {
@@ -10841,15 +10903,37 @@ function ActivityFeedFilters({ client, filters, timeRange, onFiltersChange, onTi
         }
         return value || [];
     };
-    // Handle search input change with debouncing
+    // Local search value for debouncing — keeps input responsive while query runs
+    const [searchInputValue, setSearchInputValue] = React.useState(filters.search || '');
+    const searchDebounceRef = React.useRef(null);
+    // Use refs so the debounced callback never closes over stale values
+    const filtersRef = React.useRef(filters);
+    filtersRef.current = filters;
+    const onFiltersChangeRef = React.useRef(onFiltersChange);
+    onFiltersChangeRef.current = onFiltersChange;
+    // Cancel any pending debounce on unmount
+    React.useEffect(() => {
+        return () => {
+            if (searchDebounceRef.current)
+                clearTimeout(searchDebounceRef.current);
+        };
+    }, []);
     const handleSearchChange = React.useCallback((event) => {
         const value = event.target.value;
-        onFiltersChange({
-            ...filters,
-            search: value || undefined,
-        });
-    }, [filters, onFiltersChange]);
-    return (jsxRuntime.jsx("div", { className: `mb-3 pb-3 border-b border-border pr-2 ${className}`, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [!hiddenFilters.includes('changeSource') && (jsxRuntime.jsx(ChangeSourceToggle, { value: filters.changeSource || 'all', onChange: handleChangeSourceChange, disabled: disabled })), jsxRuntime.jsxs("div", { className: "relative min-w-[200px] flex-1 max-w-xs", children: [jsxRuntime.jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), jsxRuntime.jsx(Input, { type: "text", placeholder: "Search activities...", value: filters.search || '', onChange: handleSearchChange, disabled: disabled, className: "pl-8 h-7 text-xs" })] }), activeFilterIds.map((filterId) => {
+        setSearchInputValue(value);
+        if (searchDebounceRef.current)
+            clearTimeout(searchDebounceRef.current);
+        searchDebounceRef.current = setTimeout(() => {
+            onFiltersChangeRef.current({ ...filtersRef.current, search: value || undefined });
+        }, 400);
+    }, []);
+    const handleSearchClear = React.useCallback(() => {
+        setSearchInputValue('');
+        if (searchDebounceRef.current)
+            clearTimeout(searchDebounceRef.current);
+        onFiltersChangeRef.current({ ...filtersRef.current, search: undefined });
+    }, []);
+    return (jsxRuntime.jsx("div", { className: `mb-3 pb-3 border-b border-border p-4 ${className}`, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [!hiddenFilters.includes('changeSource') && (jsxRuntime.jsx(ChangeSourceToggle, { value: filters.changeSource || 'all', onChange: handleChangeSourceChange, disabled: disabled })), jsxRuntime.jsxs("div", { className: "relative min-w-[200px] flex-1 max-w-xs", children: [jsxRuntime.jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), jsxRuntime.jsx(Input, { type: "text", placeholder: "Search activities...", value: searchInputValue, onChange: handleSearchChange, className: "pl-8 h-7 text-xs pr-6" }), searchInputValue && (jsxRuntime.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: jsxRuntime.jsx(X, { className: "h-3.5 w-3.5" }) }))] }), activeFilterIds.map((filterId) => {
                     const config = FILTER_CONFIGS$1[filterId];
                     return (jsxRuntime.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));
                 }), jsxRuntime.jsx(AddFilterDropdown, { availableFilters: availableFilters, activeFilterIds: activeFilterIds, onAddFilter: handleAddFilter, hasActiveFilters: activeFilterIds.length > 0, disabled: disabled }), jsxRuntime.jsx("div", { className: "flex-1 min-w-[20px]" }), jsxRuntime.jsx(TimeRangeDropdown, { presets: TIME_PRESETS$1, selectedPreset: selectedPreset, onPresetSelect: handleTimePresetSelect, onCustomRangeApply: handleCustomRangeApply, customStart: customStart, customEnd: customEnd, disabled: disabled, displayLabel: getTimeRangeLabel() })] }) }));
@@ -10859,7 +10943,7 @@ function ActivityFeedFilters({ client, filters, timeRange, onFiltersChange, onTi
  * ActivityFeed displays a chronological list of activities with filtering and pagination.
  * Supports optional real-time streaming of new activities.
  */
-function ActivityFeed({ client, initialFilters = { changeSource: 'human' }, initialTimeRange = { start: 'now-7d' }, pageSize = 30, onResourceClick, resourceLinkResolver, tenantLinkResolver, tenantRenderer, onActivityClick, compact = false, resourceUid, showFilters = true, hiddenFilters = [], className = '', infiniteScroll = true, loadMoreThreshold = 200, onCreatePolicy, enableStreaming = false, onEffectiveTimeRangeChange, errorFormatter, maxHeight, onFiltersChange: onFiltersChangeProp, }) {
+function ActivityFeed({ client, initialFilters = { changeSource: 'human' }, initialTimeRange = { start: 'now-7d' }, pageSize = 30, onResourceClick, resourceLinkResolver, tenantLinkResolver, tenantRenderer, onActivityClick, compact = false, variant = 'feed', resourceUid, showFilters = true, hiddenFilters = [], className = '', infiniteScroll = true, loadMoreThreshold = 200, onCreatePolicy, enableStreaming = false, onEffectiveTimeRangeChange, errorFormatter, maxHeight, onFiltersChange: onFiltersChangeProp, }) {
     // Merge resourceUid into initial filters if provided
     const mergedInitialFilters = {
         ...initialFilters,
@@ -10959,13 +11043,13 @@ function ActivityFeed({ client, initialFilters = { changeSource: 'human' }, init
     // Build container classes - use flex layout to properly fill available space
     // flex-1 min-h-0 allows the Card to fill parent flex container and enable child scrolling
     const containerClasses = compact
-        ? `flex-1 min-h-0 flex flex-col p-1 shadow-none border-border ${className}`
+        ? `flex-1 min-h-0 flex flex-col p-0 shadow-none border-none ${className}`
         : `flex-1 min-h-0 flex flex-col p-3 ${className}`;
     // Build list classes - use flex-1 min-h-0 for flex-based scrolling
     // 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 pr-2 flex flex-col';
-    return (jsxRuntime.jsxs(Card, { className: containerClasses, children: [enableStreaming && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1 pb-0.5 border-b border-border", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [isStreaming && !watchError && (jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2", children: [jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 dark:bg-green-500 opacity-75" }), jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500 dark:bg-green-400" })] }), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Streaming activity..." })] }) }), jsxRuntime.jsx(TooltipContent, { className: "text-xs", children: jsxRuntime.jsx("p", { children: "New activities will appear automatically" }) })] }) })), watchError && (jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "relative flex h-2 w-2", children: jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-red-500 dark:bg-red-400" }) }), jsxRuntime.jsx("span", { className: "text-xs text-destructive", children: "Connection error" })] }) }), jsxRuntime.jsx(TooltipContent, { className: "text-xs", children: jsxRuntime.jsx("p", { children: "Stream connection lost" }) })] }) })), newActivitiesCount > 0 && !watchError && (jsxRuntime.jsxs(Badge, { variant: "secondary", className: "text-xs", children: ["+", newActivitiesCount, " new"] }))] }), jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: handleStreamingToggle, className: "text-xs", children: watchError ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", strokeWidth: "2", children: [jsxRuntime.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" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" })] }), "Retry"] })) : isStreaming ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("rect", { x: "6", y: "4", width: "4", height: "16" }), jsxRuntime.jsx("rect", { x: "14", y: "4", width: "4", height: "16" })] }), "Pause"] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("polygon", { points: "5,3 19,12 5,21", fill: "currentColor" }) }), "Resume"] })) })] })), showFilters && (jsxRuntime.jsx(ActivityFeedFilters, { client: client, filters: filters, timeRange: timeRange, onFiltersChange: handleFiltersChange, onTimeRangeChange: handleTimeRangeChange, disabled: isLoading, hiddenFilters: hiddenFilters })), jsxRuntime.jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-4", errorFormatter: errorFormatter }), jsxRuntime.jsx(ApiErrorAlert, { error: watchError, onRetry: startStreaming, className: "mb-4", errorFormatter: errorFormatter }), !policiesLoading && hasPolicies === false && (jsxRuntime.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: [jsxRuntime.jsx("div", { className: "flex justify-center mb-4 text-muted-foreground", children: jsxRuntime.jsxs("svg", { width: "56", height: "56", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" }), jsxRuntime.jsx("rect", { x: "9", y: "3", width: "6", height: "4", rx: "1" }), jsxRuntime.jsx("path", { d: "M9 12h6" }), jsxRuntime.jsx("path", { d: "M9 16h6" })] }) }), jsxRuntime.jsx("h3", { className: "m-0 mb-2 text-lg font-semibold text-foreground leading-snug", children: "Get started with activity logging" }), jsxRuntime.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 && (jsxRuntime.jsx(Button, { onClick: onCreatePolicy, children: "Create Policy" }))] })), jsxRuntime.jsxs("div", { className: listClasses, ref: scrollContainerRef, style: { gap: compact ? '0.25rem' : '0.5rem', ...(effectiveMaxHeight ? { maxHeight: effectiveMaxHeight } : {}) }, children: [isLoading && activities.length === 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 8 }).map((_, index) => (jsxRuntime.jsx(ActivityFeedItemSkeleton, { compact: compact }, index))) })), !isLoading && activities.length === 0 && hasPolicies !== false && (jsxRuntime.jsxs("div", { className: "py-12 text-center text-muted-foreground", children: [jsxRuntime.jsx("p", { className: "m-0", children: "No activities found" }), jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-2 m-0", children: "Try adjusting your filters or time range" })] })), activities.map((activity, index) => (jsxRuntime.jsx(ActivityFeedItem, { activity: activity, onResourceClick: onResourceClick, resourceLinkResolver: resourceLinkResolver, tenantLinkResolver: tenantLinkResolver, tenantRenderer: tenantRenderer, onActorClick: handleActorClick, onActivityClick: onActivityClick, compact: compact, isNew: enableStreaming && index < newActivitiesCount }, activity.metadata?.uid || activity.metadata?.name))), infiniteScroll && hasMore && (jsxRuntime.jsx("div", { ref: loadMoreTriggerRef, className: "h-px mt-4" })), !infiniteScroll && hasMore && !isLoading && (jsxRuntime.jsx("div", { className: "flex justify-center p-4 mt-4", children: jsxRuntime.jsx(Button, { onClick: handleLoadMoreClick, children: "Load more" }) })), !hasMore && activities.length > 0 && !isLoading && (jsxRuntime.jsx("div", { className: "text-center py-6 text-muted-foreground text-sm border-t border-border mt-4", children: "No more activities to load" }))] })] }));
+    const listClasses = 'flex-1 min-h-0 overflow-y-auto flex flex-col';
+    return (jsxRuntime.jsxs(Card, { className: containerClasses, children: [enableStreaming && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1 pb-0.5 border-b border-border", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [isStreaming && !watchError && (jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2", children: [jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 dark:bg-green-500 opacity-75" }), jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500 dark:bg-green-400" })] }), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Streaming activity..." })] }) }), jsxRuntime.jsx(TooltipContent, { className: "text-xs", children: jsxRuntime.jsx("p", { children: "New activities will appear automatically" }) })] }) })), watchError && (jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "relative flex h-2 w-2", children: jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-red-500 dark:bg-red-400" }) }), jsxRuntime.jsx("span", { className: "text-xs text-destructive", children: "Connection error" })] }) }), jsxRuntime.jsx(TooltipContent, { className: "text-xs", children: jsxRuntime.jsx("p", { children: "Stream connection lost" }) })] }) })), newActivitiesCount > 0 && !watchError && (jsxRuntime.jsxs(Badge, { variant: "secondary", className: "text-xs", children: ["+", newActivitiesCount, " new"] }))] }), jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: handleStreamingToggle, className: "text-xs", children: watchError ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", strokeWidth: "2", children: [jsxRuntime.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" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" })] }), "Retry"] })) : isStreaming ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("rect", { x: "6", y: "4", width: "4", height: "16" }), jsxRuntime.jsx("rect", { x: "14", y: "4", width: "4", height: "16" })] }), "Pause"] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("polygon", { points: "5,3 19,12 5,21", fill: "currentColor" }) }), "Resume"] })) })] })), showFilters && (jsxRuntime.jsx(ActivityFeedFilters, { client: client, filters: filters, timeRange: timeRange, onFiltersChange: handleFiltersChange, onTimeRangeChange: handleTimeRangeChange, disabled: isLoading, hiddenFilters: hiddenFilters })), jsxRuntime.jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-4", errorFormatter: errorFormatter }), jsxRuntime.jsx(ApiErrorAlert, { error: watchError, onRetry: startStreaming, className: "mb-4", errorFormatter: errorFormatter }), !policiesLoading && hasPolicies === false && (jsxRuntime.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: [jsxRuntime.jsx("div", { className: "flex justify-center mb-4 text-muted-foreground", children: jsxRuntime.jsxs("svg", { width: "56", height: "56", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" }), jsxRuntime.jsx("rect", { x: "9", y: "3", width: "6", height: "4", rx: "1" }), jsxRuntime.jsx("path", { d: "M9 12h6" }), jsxRuntime.jsx("path", { d: "M9 16h6" })] }) }), jsxRuntime.jsx("h3", { className: "m-0 mb-2 text-lg font-semibold text-foreground leading-snug", children: "Get started with activity logging" }), jsxRuntime.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 && (jsxRuntime.jsx(Button, { onClick: onCreatePolicy, children: "Create Policy" }))] })), jsxRuntime.jsxs("div", { className: listClasses, ref: scrollContainerRef, style: { gap: compact ? '0.25rem' : '0.5rem', ...(effectiveMaxHeight ? { maxHeight: effectiveMaxHeight } : {}) }, children: [isLoading && activities.length === 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 8 }).map((_, index) => (jsxRuntime.jsx(ActivityFeedItemSkeleton, { compact: compact }, index))) })), !isLoading && activities.length === 0 && hasPolicies !== false && (jsxRuntime.jsxs("div", { className: "py-12 text-center text-muted-foreground", children: [jsxRuntime.jsx("p", { className: "m-0", children: "No activities found" }), jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-2 m-0", children: "Try adjusting your filters or time range" })] })), activities.map((activity, index) => (jsxRuntime.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 && (jsxRuntime.jsx("div", { ref: loadMoreTriggerRef, className: "h-px mt-4" })), !infiniteScroll && hasMore && !isLoading && (jsxRuntime.jsx("div", { className: "flex justify-center p-4 mt-4", children: jsxRuntime.jsx(Button, { onClick: handleLoadMoreClick, children: "Load more" }) })), !hasMore && activities.length > 0 && !isLoading && (jsxRuntime.jsx("div", { className: "text-center py-6 text-muted-foreground text-sm border-t border-border mt-4", children: "No more activities to load" }))] })] }));
 }
 
 /**
@@ -11052,7 +11136,7 @@ function ResourceHistoryView({ client, resourceFilter, startTime = 'now-30d', li
         resourceFilter.name;
     return (jsxRuntime.jsxs(Card, { className: cn(compact ? 'p-0 shadow-none border-0' : '', className), children: [showHeader && (jsxRuntime.jsx(CardHeader, { className: cn(compact ? 'px-0 pt-0 pb-3' : 'pb-4'), children: jsxRuntime.jsxs(CardTitle, { className: "text-base font-semibold text-foreground flex items-center gap-2", children: [jsxRuntime.jsx("svg", { className: "w-4 h-4 text-muted-foreground", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) }), headerTitle] }) })), jsxRuntime.jsxs(CardContent, { className: cn(compact ? 'p-0' : ''), children: [!hasValidFilter && (jsxRuntime.jsxs("div", { className: "py-12 text-center text-muted-foreground", children: [jsxRuntime.jsx("svg", { className: "w-12 h-12 mx-auto mb-3 text-muted-foreground/50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), jsxRuntime.jsx("p", { className: "m-0 text-sm", children: "No resource filter specified" }), jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1 m-0", children: "Provide at least one filter criterion to view resource history" })] })), hasValidFilter && jsxRuntime.jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-4", errorFormatter: errorFormatter }), hasValidFilter && isLoading && activities.length === 0 && (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3 py-12 text-muted-foreground text-sm", children: [jsxRuntime.jsx("div", { className: "w-5 h-5 border-[3px] border-muted border-t-primary rounded-full animate-spin" }), jsxRuntime.jsx("span", { children: "Loading history..." })] })), hasValidFilter && !isLoading && activities.length === 0 && !error && (jsxRuntime.jsxs("div", { className: "py-12 text-center text-muted-foreground", children: [jsxRuntime.jsx("svg", { className: "w-12 h-12 mx-auto mb-3 text-muted-foreground/50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) }), jsxRuntime.jsx("p", { className: "m-0 text-sm", children: "No history found for this resource" }), jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1 m-0", children: "Changes will appear here once activity policies are configured" })] })), hasValidFilter && activities.length > 0 && (jsxRuntime.jsxs("div", { className: "relative", children: [activities.map((activity, index) => {
                                 const activityId = activity.metadata?.uid || activity.metadata?.name || String(index);
-                                return (jsxRuntime.jsx(ActivityFeedItem, { activity: activity, variant: "timeline", compact: compact, isFirst: index === 0, isLast: index === activities.length - 1 && !hasMore, onActivityClick: onActivityClick, onResourceClick: onResourceClick, resourceLinkResolver: resourceLinkResolver, onActorClick: onActorClick }, activityId));
+                                return (jsxRuntime.jsx(ActivityFeedItem, { activity: activity, variant: "timeline", compact: compact, isLast: index === activities.length - 1 && !hasMore, onActivityClick: onActivityClick, onResourceClick: onResourceClick, resourceLinkResolver: resourceLinkResolver, onActorClick: onActorClick }, activityId));
                             }), isLoading && activities.length > 0 && (jsxRuntime.jsx("div", { className: cn('relative', compact ? 'pl-8' : 'pl-10'), children: jsxRuntime.jsxs("div", { className: "flex items-center gap-3 py-4 text-muted-foreground text-sm", children: [jsxRuntime.jsx("div", { className: "w-4 h-4 border-2 border-muted border-t-primary rounded-full animate-spin" }), jsxRuntime.jsx("span", { children: "Loading more..." })] }) })), hasMore && !isLoading && (jsxRuntime.jsxs("div", { className: cn('relative', compact ? 'pl-8' : 'pl-10'), children: [jsxRuntime.jsx("div", { className: cn('absolute w-0.5 bg-border', compact ? 'left-[11px] top-0 h-4' : 'left-[15px] top-0 h-5') }), jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: handleLoadMore, className: "text-muted-foreground hover:text-foreground mt-2", children: "Load more history" })] }))] })), hasValidFilter && activities.length > 0 && (jsxRuntime.jsxs("div", { className: cn('text-xs text-muted-foreground mt-4 pt-3 border-t border-border', compact ? '' : ''), children: ["Showing ", activities.length, " event", activities.length !== 1 ? 's' : '', hasMore && ' (more available)'] }))] })] }));
 }