@datum-cloud/activity-ui 0.5.1 → 0.6.0-dev.917556e

package/dist/index.esm.js

@@ -14,10 +14,13 @@ export { Separator } from '@datum-cloud/datum-ui/separator';
 import { Textarea } from '@datum-cloud/datum-ui/textarea';
 export { Textarea } from '@datum-cloud/datum-ui/textarea';
 import { badgeVariants as badgeVariants$1, Badge as Badge$1 } from '@datum-cloud/datum-ui/badge';
-import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from 'cmdk';
-import * as Popover from '@radix-ui/react-popover';
+import { Autocomplete } from '@datum-cloud/datum-ui/autocomplete';
 import { Checkbox } from '@datum-cloud/datum-ui/checkbox';
 export { Checkbox } from '@datum-cloud/datum-ui/checkbox';
+import { DateTimeRangePicker as DateTimeRangePicker$1 } from '@datum-cloud/datum-ui/picker';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '@datum-cloud/datum-ui/command';
+import { Popover, PopoverTrigger, PopoverContent } from '@datum-cloud/datum-ui/popover';
+import { ButtonGroup } from '@datum-cloud/datum-ui/button-group';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { TableRow, TableCell, Table, TableHeader, TableHead, TableBody } from '@datum-cloud/datum-ui/table';
 import { Skeleton } from '@datum-cloud/datum-ui/skeleton';
@@ -30,6 +33,7 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFo
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@datum-cloud/datum-ui/tabs';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from '@datum-cloud/datum-ui/tabs';
 import { Dialog as Dialog$1 } from '@datum-cloud/datum-ui/dialog';
+import { MultiSelect } from '@datum-cloud/datum-ui/multi-select';
 
 /**
  * TypeScript types for the Activity API (activity.miloapis.com/v1alpha1)
@@ -202,7 +206,7 @@ function FilterBuilder({ onFilterChange, initialFilter = '', initialLimit = 100,
         const newFilter = filter ? `${filter} && ${example}` : example;
         handleFilterChange(newFilter);
     };
-    return (jsxs(Card, { className: `mb-6 ${className}`, children: [jsx(CardHeader, { className: "pb-4", children: jsxs("div", { className: "flex justify-between items-center", children: [jsx("h3", { className: "m-0 text-2xl font-semibold text-foreground", children: "Build Your Query" }), jsxs(Button, { onClick: () => setShowHelp(!showHelp), type: "tertiary", theme: "outline", htmlType: "button", children: [showHelp ? 'Hide' : 'Show', " Help"] })] }) }), jsx(Separator, {}), jsxs(CardContent, { className: "pt-6", children: [showHelp && (jsxs("div", { className: "bg-muted p-6 rounded-lg mb-6 max-h-[400px] overflow-y-auto border border-border", children: [jsx("h4", { className: "text-base font-semibold text-foreground", children: "Available Filter Fields" }), jsx("div", { className: "mt-4", children: FILTER_FIELDS.map((field) => (jsxs("div", { className: "mb-6 pb-4 border-b border-border last:border-b-0", children: [jsxs("div", { className: "flex justify-between items-center mb-2", children: [jsx("strong", { className: "text-foreground", children: field.name }), jsx("span", { className: "text-sm text-muted-foreground italic", children: field.type })] }), jsx("p", { className: "my-2 text-muted-foreground", children: field.description }), field.examples && field.examples.length > 0 && (jsxs("div", { className: "mt-2", children: [jsx("strong", { className: "text-foreground", children: "Examples:" }), field.examples.map((example, idx) => (jsxs("div", { className: "flex items-center gap-2 my-2", children: [jsx("code", { className: "flex-1 px-2 py-1 bg-background rounded text-sm font-mono", children: example }), jsx(Button, { onClick: () => insertExample(example), type: "primary", theme: "solid", size: "small", className: "bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600", htmlType: "button", children: "Insert" })] }, idx)))] }))] }, field.name))) }), jsxs("div", { className: "mt-4", children: [jsx("h4", { className: "mb-2 text-base font-semibold text-foreground", children: "Common Operators" }), jsxs("ul", { className: "m-0 pl-6 text-muted-foreground", children: [jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "==" }), " - Equals"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "!=" }), " - Not equals"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "&&" }), " - And"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "||" }), " - Or"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "in" }), " - In list (e.g., ", jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "verb in [\"create\", \"delete\"]" }), ")"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: ".startsWith()" }), " - String starts with"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: ".contains()" }), " - String contains"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "timestamp()" }), " - Parse timestamp (e.g., ", jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "timestamp(\"2024-01-01T00:00:00Z\")" }), ")"] })] })] })] })), jsxs("div", { className: "mb-4", children: [jsx(Label, { htmlFor: "filter-input", className: "block mb-2", children: "CEL Filter Expression" }), jsx(Textarea, { id: "filter-input", value: filter, onChange: (e) => handleFilterChange(e.target.value), placeholder: 'e.g., verb == "delete" && ns == "production"', rows: 4, className: "font-mono text-sm resize-y" })] }), jsxs("div", { className: "mb-4", children: [jsx(Label, { htmlFor: "limit-input", className: "block mb-2", children: "Result Limit (max 1,000)" }), jsx(Input, { id: "limit-input", type: "number", value: limit, onChange: (e) => handleLimitChange(parseInt(e.target.value) || 100), min: 1, max: 1000, className: "w-44" })] }), jsx(Separator, { className: "my-6" }), jsxs("div", { children: [jsx("h4", { className: "mb-3 text-base font-semibold text-foreground", children: "Quick Filters" }), jsxs("div", { className: "flex flex-wrap gap-2", children: [jsx(Button, { onClick: () => insertExample('verb == "delete"'), htmlType: "button", type: "tertiary", theme: "outline", children: "Delete Operations" }), jsx(Button, { onClick: () => insertExample('resource == "secrets"'), htmlType: "button", type: "tertiary", theme: "outline", children: "Secret Access" }), jsx(Button, { onClick: () => insertExample('user.startsWith("system:")'), htmlType: "button", type: "tertiary", theme: "outline", children: "System Users" }), jsx(Button, { onClick: () => insertExample('stage == "ResponseComplete"'), htmlType: "button", type: "tertiary", theme: "outline", children: "Completed Requests" })] })] })] })] }));
+    return (jsxs(Card, { className: `mb-6 ${className}`, children: [jsx(CardHeader, { className: "pb-4", children: jsxs("div", { className: "flex justify-between items-center", children: [jsx("h3", { className: "m-0 text-2xl font-semibold text-foreground", children: "Build Your Query" }), jsxs(Button, { onClick: () => setShowHelp(!showHelp), type: "tertiary", theme: "outline", htmlType: "button", children: [showHelp ? 'Hide' : 'Show', " Help"] })] }) }), jsx(Separator, {}), jsxs(CardContent, { className: "pt-6", children: [showHelp && (jsxs("div", { className: "bg-muted p-6 rounded-lg mb-6 max-h-[400px] overflow-y-auto border border-border", children: [jsx("h4", { className: "text-base font-semibold text-foreground", children: "Available Filter Fields" }), jsx("div", { className: "mt-4", children: FILTER_FIELDS.map((field) => (jsxs("div", { className: "mb-6 pb-4 border-b border-border last:border-b-0", children: [jsxs("div", { className: "flex justify-between items-center mb-2", children: [jsx("strong", { className: "text-foreground", children: field.name }), jsx("span", { className: "text-sm text-muted-foreground italic", children: field.type })] }), jsx("p", { className: "my-2 text-muted-foreground", children: field.description }), field.examples && field.examples.length > 0 && (jsxs("div", { className: "mt-2", children: [jsx("strong", { className: "text-foreground", children: "Examples:" }), field.examples.map((example, idx) => (jsxs("div", { className: "flex items-center gap-2 my-2", children: [jsx("code", { className: "flex-1 px-2 py-1 bg-background rounded text-sm font-mono", children: example }), jsx(Button, { onClick: () => insertExample(example), type: "success", theme: "solid", size: "small", htmlType: "button", children: "Insert" })] }, idx)))] }))] }, field.name))) }), jsxs("div", { className: "mt-4", children: [jsx("h4", { className: "mb-2 text-base font-semibold text-foreground", children: "Common Operators" }), jsxs("ul", { className: "m-0 pl-6 text-muted-foreground", children: [jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "==" }), " - Equals"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "!=" }), " - Not equals"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "&&" }), " - And"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "||" }), " - Or"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "in" }), " - In list (e.g., ", jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "verb in [\"create\", \"delete\"]" }), ")"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: ".startsWith()" }), " - String starts with"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: ".contains()" }), " - String contains"] }), jsxs("li", { className: "my-1", children: [jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "timestamp()" }), " - Parse timestamp (e.g., ", jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "timestamp(\"2024-01-01T00:00:00Z\")" }), ")"] })] })] })] })), jsxs("div", { className: "mb-4", children: [jsx(Label, { htmlFor: "filter-input", className: "block mb-2", children: "CEL Filter Expression" }), jsx(Textarea, { id: "filter-input", value: filter, onChange: (e) => handleFilterChange(e.target.value), placeholder: 'e.g., verb == "delete" && ns == "production"', rows: 4, className: "font-mono text-sm resize-y" })] }), jsxs("div", { className: "mb-4", children: [jsx(Label, { htmlFor: "limit-input", className: "block mb-2", children: "Result Limit (max 1,000)" }), jsx(Input, { id: "limit-input", type: "number", value: limit, onChange: (e) => handleLimitChange(parseInt(e.target.value) || 100), min: 1, max: 1000, className: "w-44" })] }), jsx(Separator, { className: "my-6" }), jsxs("div", { children: [jsx("h4", { className: "mb-3 text-base font-semibold text-foreground", children: "Quick Filters" }), jsxs("div", { className: "flex flex-wrap gap-2", children: [jsx(Button, { onClick: () => insertExample('verb == "delete"'), htmlType: "button", type: "tertiary", theme: "outline", children: "Delete Operations" }), jsx(Button, { onClick: () => insertExample('resource == "secrets"'), htmlType: "button", type: "tertiary", theme: "outline", children: "Secret Access" }), jsx(Button, { onClick: () => insertExample('user.startsWith("system:")'), htmlType: "button", type: "tertiary", theme: "outline", children: "System Users" }), jsx(Button, { onClick: () => insertExample('stage == "ResponseComplete"'), htmlType: "button", type: "tertiary", theme: "outline", children: "Completed Requests" })] })] })] })] }));
 }
 
 function mapVariant(variant) {
@@ -311,7 +315,7 @@ function FilterBuilderWithAutocomplete({ onFilterChange, initialFilter = '', ini
         // Suggest logical operators to continue
         const completedValuePattern = /["'][^"']*["']\s*$/;
         const completedNumberPattern = /\d+\s*$/;
-        const afterLogicalOp = /(\&\&|\|\|)\s*$/;
+        const afterLogicalOp = /(&&|\|\|)\s*$/;
         if ((completedValuePattern.test(textBeforeCursor) || completedNumberPattern.test(textBeforeCursor)) && !afterLogicalOp.test(textBeforeCursor)) {
             // After a complete value, suggest logical operators
             newSuggestions.push({ text: ' && ', description: 'Logical AND - add another condition', type: 'operator' }, { text: ' || ', description: 'Logical OR - add alternative condition', type: 'operator' });
@@ -436,7 +440,7 @@ function FilterBuilderWithAutocomplete({ onFilterChange, initialFilter = '', ini
                 return 'outline';
         }
     };
-    return (jsxs(Card, { className: `p-8 rounded-xl mb-6 ${className}`, children: [jsxs(CardHeader, { className: "flex flex-row justify-between items-center p-0 mb-6 pb-4 border-b border-border", children: [jsx("h3", { className: "m-0 text-2xl font-semibold text-foreground", children: "Search Audit Logs" }), jsxs("div", { className: "flex gap-2", children: [jsx(Button, { onClick: () => setShowShortcuts(!showShortcuts), type: "tertiary", theme: "outline", size: "small", htmlType: "button", title: "View keyboard shortcuts", children: "Shortcuts" }), jsx(Button, { onClick: () => setShowHelp(!showHelp), type: "tertiary", theme: "outline", size: "small", htmlType: "button", title: "View available filter fields and examples", children: "Field Guide" })] })] }), jsxs(CardContent, { className: "p-0", children: [showShortcuts && (jsxs("div", { className: "bg-blue-50 border border-blue-500 dark:bg-blue-950/50 dark:border-blue-700 p-6 rounded-lg mb-6 max-h-96 overflow-y-auto", children: [jsx("h4", { className: "mt-0 mb-4 text-lg font-semibold text-foreground", children: "Keyboard Shortcuts" }), jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-x-6 gap-y-3 items-start", children: [jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Ctrl+Space" }), jsx("span", { children: "Trigger autocomplete suggestions at cursor position" }), jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "\u2191 / \u2193" }), jsx("span", { children: "Navigate through autocomplete suggestions" }), jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Tab" }), jsx("span", { children: "Accept the selected suggestion" }), jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Enter" }), jsx("span", { children: "Accept the selected suggestion" }), jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Esc" }), jsx("span", { children: "Close autocomplete suggestions" })] }), jsxs("div", { className: "mt-4 p-3 bg-background rounded text-sm", children: [jsx("strong", { children: "Pro Tips:" }), jsxs("ul", { className: "mt-2 mb-0 pl-6", children: [jsx("li", { children: "Autocomplete appears automatically as you type" }), jsxs("li", { children: ["After completing a value (e.g., ", jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "\"get\"" }), "), suggestions show logical operators (", jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "&&" }), ", ", jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "||" }), ")"] }), jsxs("li", { children: ["After typing ", jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "&&" }), " or ", jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "||" }), ", all field names are suggested"] }), jsxs("li", { children: ["Type ", jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "." }), " after a field name to see available string functions"] })] })] })] })), showHelp && (jsxs("div", { className: "bg-muted p-6 rounded-lg mb-6 max-h-96 overflow-y-auto", children: [jsx("h4", { className: "mt-0 mb-4 text-lg font-semibold text-foreground", children: "Available Fields & Examples" }), jsx("p", { className: "mb-4 text-muted-foreground text-sm", children: "Click \"Insert\" to add an example to your query" }), jsx("div", { className: "mt-4", children: FILTER_FIELDS.map((field) => (jsxs("div", { className: "mb-6 pb-4 border-b border-border last:border-b-0", children: [jsxs("div", { className: "flex justify-between items-center mb-2", children: [jsx("strong", { className: "text-foreground", children: field.name }), jsx("span", { className: "text-sm text-muted-foreground italic", children: field.type })] }), jsx("p", { className: "my-2 text-muted-foreground", children: field.description }), field.examples && field.examples.length > 0 && (jsxs("div", { className: "mt-2", children: [jsx("strong", { className: "text-sm text-foreground", children: "Examples:" }), field.examples.map((example, idx) => (jsxs("div", { className: "flex items-center gap-2 my-2", children: [jsx("code", { className: "flex-1 px-2 py-1 bg-background rounded text-sm font-mono", children: example }), jsx(Button, { onClick: () => insertExample(example), type: "primary", theme: "solid", size: "small", htmlType: "button", className: "bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600", children: "Insert" })] }, idx)))] }))] }, field.name))) })] })), jsxs("div", { className: "relative mb-4", children: [jsxs(Label, { htmlFor: "filter-input", className: "block mb-2", children: [jsx("strong", { className: "text-foreground", children: "Filter Expression" }), jsx("span", { className: "ml-2 text-sm text-muted-foreground font-normal", children: "Press Ctrl+Space for suggestions" })] }), jsx("p", { className: "m-0 mb-3 text-sm text-muted-foreground", children: "Use autocomplete to build your query, or type field names directly (e.g., verb, objectRef.resource)" }), jsx(Textarea, { ref: textareaRef, id: "filter-input", value: filter, onChange: (e) => handleFilterChange(e.target.value), onKeyDown: handleKeyDown, onFocus: () => updateSuggestions(filter), placeholder: 'Example: verb == "delete" && objectRef.namespace == "production"', rows: 4, className: "font-mono text-sm bg-muted resize-y focus:bg-background" }), showSuggestions && suggestions.length > 0 && (jsx("div", { className: "absolute top-full left-0 right-0 max-h-72 overflow-y-auto bg-background border border-input border-t-0 rounded-b shadow-md z-50 -mt-1", children: suggestions.map((suggestion, idx) => (jsxs("div", { className: `px-4 py-3 cursor-pointer flex items-center gap-3 border-b border-border transition-colors ${idx === selectedSuggestion ? 'bg-pink-100' : 'hover:bg-muted'}`, onClick: () => insertSuggestion(suggestion), onMouseEnter: () => setSelectedSuggestion(idx), children: [jsx("span", { className: "font-mono font-semibold text-foreground min-w-[120px]", children: suggestion.text }), jsx("span", { className: "flex-1 text-muted-foreground text-sm", children: suggestion.description }), jsx(Badge, { variant: getBadgeVariant(suggestion.type), className: "uppercase", children: suggestion.type })] }, idx))) }))] }), jsxs("div", { className: "mb-4", children: [jsxs(Label, { htmlFor: "limit-input", className: "block mb-2", children: [jsx("strong", { className: "text-foreground", children: "Number of results" }), jsx("span", { className: "ml-2 text-sm text-muted-foreground font-normal", children: "(1 to 1,000 events)" })] }), jsx(Input, { id: "limit-input", type: "number", value: limit, onChange: (e) => handleLimitChange(parseInt(e.target.value) || 100), min: 1, max: 1000, className: "w-44 bg-muted focus:bg-background" })] })] })] }));
+    return (jsxs(Card, { className: `p-8 rounded-xl mb-6 ${className}`, children: [jsxs(CardHeader, { className: "flex flex-row justify-between items-center p-0 mb-6 pb-4 border-b border-border", children: [jsx("h3", { className: "m-0 text-2xl font-semibold text-foreground", children: "Search Audit Logs" }), jsxs("div", { className: "flex gap-2", children: [jsx(Button, { onClick: () => setShowShortcuts(!showShortcuts), type: "tertiary", theme: "outline", size: "small", htmlType: "button", title: "View keyboard shortcuts", children: "Shortcuts" }), jsx(Button, { onClick: () => setShowHelp(!showHelp), type: "tertiary", theme: "outline", size: "small", htmlType: "button", title: "View available filter fields and examples", children: "Field Guide" })] })] }), jsxs(CardContent, { className: "p-0", children: [showShortcuts && (jsxs("div", { className: "bg-[var(--info-100)] border border-[var(--info-300)] p-6 rounded-lg mb-6 max-h-96 overflow-y-auto", children: [jsx("h4", { className: "mt-0 mb-4 text-lg font-semibold text-foreground", children: "Keyboard Shortcuts" }), jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-x-6 gap-y-3 items-start", children: [jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Ctrl+Space" }), jsx("span", { children: "Trigger autocomplete suggestions at cursor position" }), jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "\u2191 / \u2193" }), jsx("span", { children: "Navigate through autocomplete suggestions" }), jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Tab" }), jsx("span", { children: "Accept the selected suggestion" }), jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Enter" }), jsx("span", { children: "Accept the selected suggestion" }), jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Esc" }), jsx("span", { children: "Close autocomplete suggestions" })] }), jsxs("div", { className: "mt-4 p-3 bg-background rounded text-sm", children: [jsx("strong", { children: "Pro Tips:" }), jsxs("ul", { className: "mt-2 mb-0 pl-6", children: [jsx("li", { children: "Autocomplete appears automatically as you type" }), jsxs("li", { children: ["After completing a value (e.g., ", jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "\"get\"" }), "), suggestions show logical operators (", jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "&&" }), ", ", jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "||" }), ")"] }), jsxs("li", { children: ["After typing ", jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "&&" }), " or ", jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "||" }), ", all field names are suggested"] }), jsxs("li", { children: ["Type ", jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "." }), " after a field name to see available string functions"] })] })] })] })), showHelp && (jsxs("div", { className: "bg-muted p-6 rounded-lg mb-6 max-h-96 overflow-y-auto", children: [jsx("h4", { className: "mt-0 mb-4 text-lg font-semibold text-foreground", children: "Available Fields & Examples" }), jsx("p", { className: "mb-4 text-muted-foreground text-sm", children: "Click \"Insert\" to add an example to your query" }), jsx("div", { className: "mt-4", children: FILTER_FIELDS.map((field) => (jsxs("div", { className: "mb-6 pb-4 border-b border-border last:border-b-0", children: [jsxs("div", { className: "flex justify-between items-center mb-2", children: [jsx("strong", { className: "text-foreground", children: field.name }), jsx("span", { className: "text-sm text-muted-foreground italic", children: field.type })] }), jsx("p", { className: "my-2 text-muted-foreground", children: field.description }), field.examples && field.examples.length > 0 && (jsxs("div", { className: "mt-2", children: [jsx("strong", { className: "text-sm text-foreground", children: "Examples:" }), field.examples.map((example, idx) => (jsxs("div", { className: "flex items-center gap-2 my-2", children: [jsx("code", { className: "flex-1 px-2 py-1 bg-background rounded text-sm font-mono", children: example }), jsx(Button, { onClick: () => insertExample(example), type: "success", theme: "solid", size: "small", htmlType: "button", children: "Insert" })] }, idx)))] }))] }, field.name))) })] })), jsxs("div", { className: "relative mb-4", children: [jsxs(Label, { htmlFor: "filter-input", className: "block mb-2", children: [jsx("strong", { className: "text-foreground", children: "Filter Expression" }), jsx("span", { className: "ml-2 text-sm text-muted-foreground font-normal", children: "Press Ctrl+Space for suggestions" })] }), jsx("p", { className: "m-0 mb-3 text-sm text-muted-foreground", children: "Use autocomplete to build your query, or type field names directly (e.g., verb, objectRef.resource)" }), jsx(Textarea, { ref: textareaRef, id: "filter-input", value: filter, onChange: (e) => handleFilterChange(e.target.value), onKeyDown: handleKeyDown, onFocus: () => updateSuggestions(filter), placeholder: 'Example: verb == "delete" && objectRef.namespace == "production"', rows: 4, className: "font-mono text-sm bg-muted resize-y focus:bg-background" }), showSuggestions && suggestions.length > 0 && (jsx("div", { className: "absolute top-full left-0 right-0 max-h-72 overflow-y-auto bg-background border border-input border-t-0 rounded-b shadow-md z-50 -mt-1", children: suggestions.map((suggestion, idx) => (jsxs("div", { className: `px-4 py-3 cursor-pointer flex items-center gap-3 border-b border-border transition-colors ${idx === selectedSuggestion ? 'bg-accent' : 'hover:bg-muted'}`, onClick: () => insertSuggestion(suggestion), onMouseEnter: () => setSelectedSuggestion(idx), children: [jsx("span", { className: "font-mono font-semibold text-foreground min-w-[120px]", children: suggestion.text }), jsx("span", { className: "flex-1 text-muted-foreground text-sm", children: suggestion.description }), jsx(Badge, { variant: getBadgeVariant(suggestion.type), className: "uppercase", children: suggestion.type })] }, idx))) }))] }), jsxs("div", { className: "mb-4", children: [jsxs(Label, { htmlFor: "limit-input", className: "block mb-2", children: [jsx("strong", { className: "text-foreground", children: "Number of results" }), jsx("span", { className: "ml-2 text-sm text-muted-foreground font-normal", children: "(1 to 1,000 events)" })] }), jsx(Input, { id: "limit-input", type: "number", value: limit, onChange: (e) => handleLimitChange(parseInt(e.target.value) || 100), min: 1, max: 1000, className: "w-44 bg-muted focus:bg-background" })] })] })] }));
 }
 
 /**
@@ -1184,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
@@ -3920,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.
  */
@@ -3947,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.
  */
@@ -4007,649 +4113,413 @@ function subMinutes(date, amount, options) {
   return addMinutes(date, -15, options);
 }
 
-/**
- * @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 mergeClasses = (...classes) => classes.filter((className, index, array) => {
-  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
-}).join(" ").trim();
-
-/**
- * @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 toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-
-/**
- * @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 toCamelCase = (string) => string.replace(
-  /^([A-Z])|[\s-_]+(\w)/g,
-  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
-);
-
-/**
- * @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 toPascalCase = (string) => {
-  const camelCase = toCamelCase(string);
-  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
-};
-
-/**
- * @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.
- */
-
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-
-/**
- * @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 hasA11yProp = (props) => {
-  for (const prop in props) {
-    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
-      return true;
-    }
-  }
-  return false;
-};
+/** Sentinel for the "All" item; the public value stays '' for "no filter". */
+const ALL_VALUE = '__all__';
+function Combobox({ options, value, onValueChange, placeholder = 'Select…', searchPlaceholder = 'Search…', emptyMessage = 'No results', disabled, loading, className, clearable = false, showAllOption = true, allOptionLabel = 'All', }) {
+    const items = React.useMemo(() => {
+        const base = options.map((o) => ({ value: o.value, label: o.label, count: o.count }));
+        return showAllOption ? [{ value: ALL_VALUE, label: allOptionLabel }, ...base] : base;
+    }, [options, showAllOption, allOptionLabel]);
+    // An empty value selects the "All" item so the trigger reads its label.
+    const selectedValue = value === '' && showAllOption ? ALL_VALUE : value;
+    return (jsx(Autocomplete, { className: className, options: items, value: selectedValue, onValueChange: (next) => onValueChange(next === ALL_VALUE ? '' : next), placeholder: placeholder, searchPlaceholder: searchPlaceholder, emptyContent: emptyMessage, disabled: disabled, loading: loading, footer: clearable && value ? (jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground w-full px-2 py-1.5 text-left text-xs", onClick: () => onValueChange(''), children: "Clear selection" })) : undefined, renderValue: (option) => (jsx("span", { className: "truncate", children: option.count !== undefined ? `${option.label} (${option.count})` : option.label })), renderOption: (option) => (jsxs("span", { className: "flex w-full items-center justify-between gap-2", children: [jsx("span", { className: "truncate", children: option.label }), 'count' in option && option.count !== undefined && (jsx("span", { className: "text-muted-foreground text-xs", children: option.count }))] })) }));
+}
 
+const RELATIVE_KEY = /^now-(\d+)([mhd])$/;
+/** Resolve a relative key such as `now-7d` to a `{ from, to }` window ending now. */
+function relativeKeyToRange(key, now = new Date()) {
+    const match = RELATIVE_KEY.exec(key);
+    if (!match)
+        return null;
+    const amount = Number(match[1]);
+    const unitMs = { m: 60000, h: 3600000, d: 86400000 }[match[2]];
+    return { from: new Date(now.getTime() - amount * unitMs), to: now };
+}
+/** `YYYY-MM-DDTHH:mm` in local time, the format the filter components store. */
+function toDatetimeLocal(iso) {
+    const d = new Date(iso);
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+function toPickerPresets(presets) {
+    return presets
+        .filter((p) => RELATIVE_KEY.test(p.key))
+        .map((p) => ({
+        key: p.key,
+        label: p.label,
+        getRange: () => relativeKeyToRange(p.key),
+    }));
+}
 /**
- * @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.
+ * TimeRangeDropdown - relative presets plus an absolute range, on datum-ui's
+ * DateTimeRangePicker. The emitted value carries `preset` when a preset was
+ * clicked, which keeps `start=now-7d` style URL state intact.
  */
+function TimeRangeDropdown({ presets, selectedPreset, onPresetSelect, onCustomRangeApply, customStart, customEnd, disabled = false, className, displayLabel, }) {
+    const pickerPresets = React.useMemo(() => toPickerPresets(presets), [presets]);
+    const value = React.useMemo(() => {
+        if (selectedPreset !== 'custom') {
+            const range = relativeKeyToRange(selectedPreset);
+            return range
+                ? { from: range.from.toISOString(), to: range.to.toISOString(), preset: selectedPreset }
+                : null;
+        }
+        if (customStart && customEnd) {
+            return { from: new Date(customStart).toISOString(), to: new Date(customEnd).toISOString() };
+        }
+        return null;
+    }, [selectedPreset, customStart, customEnd]);
+    const handleChange = (next) => {
+        if (!next)
+            return;
+        const preset = next.preset;
+        if (preset) {
+            onPresetSelect(preset);
+            return;
+        }
+        onCustomRangeApply(toDatetimeLocal(next.from), toDatetimeLocal(next.to));
+    };
+    return (jsx(DateTimeRangePicker$1, { className: className, triggerClassName: "h-9 rounded-lg px-3 text-xs", value: value, onChange: handleChange, presets: pickerPresets, disableFuture: true, clearable: false, disabled: disabled, placeholder: displayLabel ?? 'Select time range', triggerLabel: displayLabel ? () => displayLabel : undefined }));
+}
 
-
-const Icon = forwardRef(
-  ({
-    color = "currentColor",
-    size = 24,
-    strokeWidth = 2,
-    absoluteStrokeWidth,
-    className = "",
-    children,
-    iconNode,
-    ...rest
-  }, ref) => createElement(
-    "svg",
+const TIME_PRESETS$3 = [
     {
-      ref,
-      ...defaultAttributes,
-      width: size,
-      height: size,
-      stroke: color,
-      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-      className: mergeClasses("lucide", className),
-      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
-      ...rest
+        key: 'last15min',
+        label: 'Last 15 min',
+        getValue: () => ({
+            start: formatISO(subMinutes(new Date())),
+            end: formatISO(new Date()),
+        }),
     },
-    [
-      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
-      ...Array.isArray(children) ? children : [children]
-    ]
-  )
-);
-
+    {
+        key: 'last1hour',
+        label: 'Last hour',
+        getValue: () => ({
+            start: formatISO(subHours(new Date(), 1)),
+            end: formatISO(new Date()),
+        }),
+    },
+    {
+        key: 'last6hours',
+        label: 'Last 6 hours',
+        getValue: () => ({
+            start: formatISO(subHours(new Date(), 6)),
+            end: formatISO(new Date()),
+        }),
+    },
+    {
+        key: 'last24hours',
+        label: 'Last 24 hours',
+        getValue: () => ({
+            start: formatISO(subHours(new Date(), 24)),
+            end: formatISO(new Date()),
+        }),
+    },
+    {
+        key: 'last7days',
+        label: 'Last 7 days',
+        getValue: () => ({
+            start: formatISO(subDays(new Date(), 7)),
+            end: formatISO(new Date()),
+        }),
+    },
+    {
+        key: 'last30days',
+        label: 'Last 30 days',
+        getValue: () => ({
+            start: formatISO(subDays(new Date(), 30)),
+            end: formatISO(new Date()),
+        }),
+    },
+];
+/** Debounce delay for text inputs (ms) */
+const DEBOUNCE_DELAY = 300;
 /**
- * @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.
+ * Helper function to convert ISO string to datetime-local format
  */
-
-
-const createLucideIcon = (iconName, iconNode) => {
-  const Component = forwardRef(
-    ({ className, ...props }, ref) => createElement(Icon, {
-      ref,
-      iconNode,
-      className: mergeClasses(
-        `lucide-${toKebabCase(toPascalCase(iconName))}`,
-        `lucide-${iconName}`,
-        className
-      ),
-      ...props
-    })
-  );
-  Component.displayName = toPascalCase(iconName);
-  return Component;
+const formatDatetimeLocal$4 = (isoString) => {
+    const date = new Date(isoString);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${year}-${month}-${day}T${hours}:${minutes}`;
 };
-
-/**
- * @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$p = [
-  [
-    "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$p);
-
-/**
- * @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$o = [
-  ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
-  [
-    "path",
-    {
-      d: "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326",
-      key: "11g9vi"
+function SimpleQueryBuilder({ client, onFilterChange, initialLimit = 100, className = '', disabled = false, }) {
+    const [isAdvancedExpanded, setIsAdvancedExpanded] = useState(false);
+    const [filters, setFilters] = useState({
+        verb: '',
+        resourceType: '',
+        namespace: '',
+        resourceName: '',
+        username: '',
+    });
+    const [limit, setLimit] = useState(initialLimit);
+    const [advancedFilter, setAdvancedFilter] = useState('');
+    const [useAdvancedFilter, setUseAdvancedFilter] = useState(false);
+    // Time range state
+    const [selectedPreset, setSelectedPreset] = useState('last24hours');
+    const [timeRange, setTimeRange] = useState(null);
+    const [customStart, setCustomStart] = useState(() => formatDatetimeLocal$4(formatISO(subDays(new Date(), 1))));
+    const [customEnd, setCustomEnd] = useState(() => formatDatetimeLocal$4(formatISO(new Date())));
+    // Fetch facets for dynamic filter options
+    const { verbs, resources, namespaces, usernames, isLoading: facetsLoading, error: facetsError } = useAuditLogFacets(client, timeRange);
+    // Log facets error for debugging
+    if (facetsError) {
+        console.error('Failed to load audit log facets:', facetsError);
     }
-  ]
-];
-const Bell = createLucideIcon("bell", __iconNode$o);
-
-/**
- * @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$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$n);
-
-/**
- * @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.
- */
-
+    // Refs for debouncing
+    const debounceTimerRef = useRef(null);
+    const isInitialMount = useRef(true);
+    // Initialize with default time range and trigger initial query
+    useEffect(() => {
+        const defaultRange = TIME_PRESETS$3.find(p => p.key === 'last24hours')?.getValue();
+        if (defaultRange) {
+            setTimeRange(defaultRange);
+        }
+    }, []);
+    const generateCEL = useCallback(() => {
+        const parts = [];
+        if (filters.verb) {
+            parts.push(`verb == "${filters.verb}"`);
+        }
+        if (filters.resourceType) {
+            parts.push(`objectRef.resource == "${filters.resourceType}"`);
+        }
+        if (filters.namespace) {
+            parts.push(`objectRef.namespace == "${filters.namespace}"`);
+        }
+        if (filters.resourceName) {
+            parts.push(`objectRef.name.contains("${filters.resourceName}")`);
+        }
+        if (filters.username) {
+            parts.push(`user.username.contains("${filters.username}")`);
+        }
+        return parts.join(' && ');
+    }, [filters]);
+    // Execute query when filters change (with debouncing for text inputs)
+    const executeQuery = useCallback(() => {
+        if (!timeRange || disabled)
+            return;
+        const filter = useAdvancedFilter ? advancedFilter : generateCEL();
+        onFilterChange({
+            filter,
+            limit,
+            startTime: timeRange.start,
+            endTime: timeRange.end
+        });
+    }, [useAdvancedFilter, advancedFilter, generateCEL, onFilterChange, limit, timeRange, disabled]);
+    // Auto-execute query when dropdown filters or time range change (immediate)
+    useEffect(() => {
+        // Skip the initial mount - we want to wait for timeRange to be set
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            return;
+        }
+        // Clear any pending debounced query
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        executeQuery();
+    }, [filters.verb, filters.resourceType, timeRange, limit, useAdvancedFilter]);
+    // Auto-execute query when text filters change (debounced)
+    useEffect(() => {
+        if (isInitialMount.current || !timeRange)
+            return;
+        // Clear previous timer
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        // Set new debounced timer
+        debounceTimerRef.current = setTimeout(() => {
+            executeQuery();
+        }, DEBOUNCE_DELAY);
+        return () => {
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, [filters.namespace, filters.resourceName, filters.username, advancedFilter]);
+    const handleFilterChange = useCallback((field, value) => {
+        setFilters(prev => ({ ...prev, [field]: value }));
+    }, []);
+    const handleTimePresetSelect = useCallback((presetKey) => {
+        const preset = TIME_PRESETS$3.find(p => p.key === presetKey);
+        if (preset) {
+            setSelectedPreset(presetKey);
+            setTimeRange(preset.getValue());
+        }
+    }, []);
+    const handleCustomRangeApply = useCallback((start, end) => {
+        setSelectedPreset('custom');
+        setCustomStart(start);
+        setCustomEnd(end);
+        setTimeRange({
+            start: new Date(start).toISOString(),
+            end: new Date(end).toISOString(),
+        });
+    }, []);
+    const handleLimitChange = useCallback((newLimit) => {
+        const validLimit = Math.min(Math.max(1, newLimit), 1000);
+        setLimit(validLimit);
+    }, []);
+    const handleAdvancedToggle = useCallback(() => {
+        if (!isAdvancedExpanded) {
+            // When expanding, populate advanced filter with generated CEL
+            setAdvancedFilter(generateCEL());
+        }
+        setIsAdvancedExpanded(!isAdvancedExpanded);
+    }, [isAdvancedExpanded, generateCEL]);
+    const handleUseAdvancedChange = useCallback((checked) => {
+        setUseAdvancedFilter(checked === true);
+    }, []);
+    // Get display label for time range
+    const getTimeRangeLabel = () => {
+        if (selectedPreset === 'custom') {
+            if (timeRange?.start && timeRange?.end) {
+                const start = new Date(timeRange.start);
+                const end = new Date(timeRange.end);
+                return `${start.toLocaleDateString()} - ${end.toLocaleDateString()}`;
+            }
+            return 'Custom';
+        }
+        const preset = TIME_PRESETS$3.find(p => p.key === selectedPreset);
+        return preset?.label || 'Select time range';
+    };
+    return (jsxs("div", { className: `mb-6 pb-6 border-b border-border ${className}`, children: [jsxs("div", { className: "flex flex-wrap gap-4 items-end", children: [jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Action" }), jsx(Combobox, { options: verbs
+                                    .filter(facet => facet.value)
+                                    .map(facet => ({
+                                    value: facet.value,
+                                    label: facet.value,
+                                    count: facet.count,
+                                })), value: filters.verb, onValueChange: (value) => handleFilterChange('verb', value), placeholder: "All", searchPlaceholder: "Search actions...", allOptionLabel: "All", disabled: disabled || useAdvancedFilter, loading: facetsLoading, className: "min-w-[130px]" })] }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Resource" }), jsx(Combobox, { options: resources
+                                    .filter(facet => facet.value)
+                                    .map(facet => ({
+                                    value: facet.value,
+                                    label: facet.value,
+                                    count: facet.count,
+                                })), value: filters.resourceType, onValueChange: (value) => handleFilterChange('resourceType', value), placeholder: "All", searchPlaceholder: "Search resources...", allOptionLabel: "All", disabled: disabled || useAdvancedFilter, loading: facetsLoading, className: "min-w-[130px]" })] }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Namespace" }), jsx(Combobox, { options: namespaces
+                                    .filter(facet => facet.value)
+                                    .map(facet => ({
+                                    value: facet.value,
+                                    label: facet.value,
+                                    count: facet.count,
+                                })), value: filters.namespace, onValueChange: (value) => handleFilterChange('namespace', value), placeholder: "All", searchPlaceholder: "Search namespaces...", allOptionLabel: "All", disabled: disabled || useAdvancedFilter, loading: facetsLoading, className: "min-w-[130px]" })] }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "User" }), jsx(Combobox, { options: usernames
+                                    .filter(facet => facet.value)
+                                    .map(facet => ({
+                                    value: facet.value,
+                                    label: facet.value,
+                                    count: facet.count,
+                                })), value: filters.username, onValueChange: (value) => handleFilterChange('username', value), placeholder: "All", searchPlaceholder: "Search users...", allOptionLabel: "All", disabled: disabled || useAdvancedFilter, loading: facetsLoading, className: "min-w-[130px]" })] }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Name" }), jsx(Input, { type: "text", value: filters.resourceName, onChange: (e) => handleFilterChange('resourceName', e.target.value), placeholder: "Filter by name...", className: "min-w-[140px]", disabled: disabled || useAdvancedFilter })] }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Limit" }), jsx(Input, { type: "number", value: limit, onChange: (e) => handleLimitChange(parseInt(e.target.value) || 100), min: 1, max: 1000, className: "w-[80px]", disabled: disabled })] }), jsx(Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "small", className: "whitespace-nowrap text-muted-foreground hover:text-foreground", onClick: handleAdvancedToggle, "aria-expanded": isAdvancedExpanded, children: isAdvancedExpanded ? '- CEL' : '+ CEL' }), jsxs("div", { className: "flex flex-col gap-2 ml-auto", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Time Range" }), jsx(TimeRangeDropdown, { presets: TIME_PRESETS$3.map(p => ({ key: p.key, label: p.label })), selectedPreset: selectedPreset, onPresetSelect: handleTimePresetSelect, onCustomRangeApply: handleCustomRangeApply, customStart: customStart, customEnd: customEnd, disabled: disabled, displayLabel: getTimeRangeLabel() })] })] }), isAdvancedExpanded && (jsxs("div", { className: "mt-4 pt-4", children: [jsx(Separator, { className: "mb-4" }), jsx("div", { className: "mb-3", children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(Checkbox, { id: "use-cel-expression", checked: useAdvancedFilter, onCheckedChange: handleUseAdvancedChange, disabled: disabled }), jsx(Label, { htmlFor: "use-cel-expression", className: "text-sm font-medium text-foreground cursor-pointer", children: "Use CEL Expression" })] }) }), useAdvancedFilter && (jsxs("div", { className: "mt-3", children: [jsx("p", { className: "m-0 mb-2 text-sm text-muted-foreground", children: "Write your query using CEL syntax for complex filters" }), jsx(Textarea, { value: advancedFilter, onChange: (e) => setAdvancedFilter(e.target.value), placeholder: 'Example: verb == "delete" && objectRef.namespace == "production"', rows: 3, className: "w-full font-mono resize-y", disabled: disabled })] }))] }))] }));
+}
 
-const __iconNode$m = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$m);
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 /**
- * @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.
+ * Concatenates two arrays faster than the array spread operator.
  */
+const concatArrays = (array1, array2) => {
+  // Pre-allocate for better V8 optimization
+  const combinedArray = new Array(array1.length + array2.length);
+  for (let i = 0; i < array1.length; i++) {
+    combinedArray[i] = array1[i];
+  }
+  for (let i = 0; i < array2.length; i++) {
+    combinedArray[array1.length + i] = array2[i];
+  }
+  return combinedArray;
+};
 
-
-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
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-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
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-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
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-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$i);
-
-/**
- * @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$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$h);
-
-/**
- * @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$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$g);
-
-/**
- * @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$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$f);
-
-/**
- * @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$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$e);
-
-/**
- * @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$d = [
-  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
-  ["path", { d: "M12 6v6l4 2", key: "mmk7yg" }]
-];
-const Clock = createLucideIcon("clock", __iconNode$d);
-
-/**
- * @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$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$c);
-
-/**
- * @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$b = [
-  [
-    "path",
-    {
-      d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
-      key: "1nclc0"
+// Factory function ensures consistent object shapes
+const createClassValidatorObject = (classGroupId, validator) => ({
+  classGroupId,
+  validator
+});
+// Factory ensures consistent ClassPartObject shape
+const createClassPartObject = (nextPart = new Map(), validators = null, classGroupId) => ({
+  nextPart,
+  validators,
+  classGroupId
+});
+const CLASS_PART_SEPARATOR = '-';
+const EMPTY_CONFLICTS = [];
+// I use two dots here because one dot is used as prefix for class groups in plugins
+const ARBITRARY_PROPERTY_PREFIX = 'arbitrary..';
+const createClassGroupUtils = config => {
+  const classMap = createClassMap(config);
+  const {
+    conflictingClassGroups,
+    conflictingClassGroupModifiers
+  } = config;
+  const getClassGroupId = className => {
+    if (className.startsWith('[') && className.endsWith(']')) {
+      return getGroupIdForArbitraryProperty(className);
     }
-  ],
-  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-];
-const Eye = createLucideIcon("eye", __iconNode$b);
-
-/**
- * @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$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.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$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"
+    const classParts = className.split(CLASS_PART_SEPARATOR);
+    // Classes like `-inset-1` produce an empty string as first classPart. We assume that classes for negative values are used correctly and skip it.
+    const startIndex = classParts[0] === '' && classParts.length > 1 ? 1 : 0;
+    return getGroupRecursive(classParts, startIndex, classMap);
+  };
+  const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
+    if (hasPostfixModifier) {
+      const modifierConflicts = conflictingClassGroupModifiers[classGroupId];
+      const baseConflicts = conflictingClassGroups[classGroupId];
+      if (modifierConflicts) {
+        if (baseConflicts) {
+          // Merge base conflicts with modifier conflicts
+          return concatArrays(baseConflicts, modifierConflicts);
+        }
+        // Only modifier conflicts
+        return modifierConflicts;
+      }
+      // Fall back to without postfix if no modifier conflicts
+      return baseConflicts || EMPTY_CONFLICTS;
     }
-  ],
-  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
-];
-const Pencil = createLucideIcon("pencil", __iconNode$9);
-
+    return conflictingClassGroups[classGroupId] || EMPTY_CONFLICTS;
+  };
+  return {
+    getClassGroupId,
+    getConflictingClassGroupIds
+  };
+};
+const getGroupRecursive = (classParts, startIndex, classPartObject) => {
+  const classPathsLength = classParts.length - startIndex;
+  if (classPathsLength === 0) {
+    return classPartObject.classGroupId;
+  }
+  const currentClassPart = classParts[startIndex];
+  const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
+  if (nextClassPartObject) {
+    const result = getGroupRecursive(classParts, startIndex + 1, nextClassPartObject);
+    if (result) return result;
+  }
+  const validators = classPartObject.validators;
+  if (validators === null) {
+    return undefined;
+  }
+  // Build classRest string efficiently by joining from startIndex onwards
+  const classRest = startIndex === 0 ? classParts.join(CLASS_PART_SEPARATOR) : classParts.slice(startIndex).join(CLASS_PART_SEPARATOR);
+  const validatorsLength = validators.length;
+  for (let i = 0; i < validatorsLength; i++) {
+    const validatorObj = validators[i];
+    if (validatorObj.validator(classRest)) {
+      return validatorObj.classGroupId;
+    }
+  }
+  return undefined;
+};
 /**
- * @license lucide-react v0.577.0 - ISC
+ * Get the class group ID for an arbitrary property.
  *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
+ * @param className - The class name to get the group ID for. Is expected to be string starting with `[` and ending with `]`.
  */
-
-
-const __iconNode$8 = [
-  ["path", { d: "M5 12h14", key: "1ays0h" }],
-  ["path", { d: "M12 5v14", key: "s699le" }]
-];
-const Plus = createLucideIcon("plus", __iconNode$8);
-
-/**
- * @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$7 = [
-  ["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);
-
-/**
- * @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$6 = [
-  ["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);
-
-/**
- * @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: "m21 21-4.34-4.34", key: "14j7rj" }],
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-];
-const Search = createLucideIcon("search", __iconNode$5);
-
-/**
- * @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$4 = [
-  ["path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7", key: "1m0v6g" }],
-  [
-    "path",
-    {
-      d: "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z",
-      key: "ohrbg2"
-    }
-  ]
-];
-const SquarePen = createLucideIcon("square-pen", __iconNode$4);
-
-/**
- * @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$3 = [
-  ["path", { d: "M10 11v6", key: "nco0om" }],
-  ["path", { d: "M14 11v6", key: "outv1u" }],
-  ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
-  ["path", { d: "M3 6h18", key: "d0wm0j" }],
-  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
-];
-const Trash2 = createLucideIcon("trash-2", __iconNode$3);
-
-/**
- * @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$2 = [
-  [
-    "path",
-    {
-      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
-      key: "wmoenq"
-    }
-  ],
-  ["path", { d: "M12 9v4", key: "juzpu7" }],
-  ["path", { d: "M12 17h.01", key: "p32p05" }]
-];
-const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$2);
-
-/**
- * @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$1 = [
-  ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
-  ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
-];
-const User = createLucideIcon("user", __iconNode$1);
-
-/**
- * @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 = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-];
-const X = createLucideIcon("x", __iconNode);
-
-function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
-
-/**
- * Concatenates two arrays faster than the array spread operator.
- */
-const concatArrays = (array1, array2) => {
-  // Pre-allocate for better V8 optimization
-  const combinedArray = new Array(array1.length + array2.length);
-  for (let i = 0; i < array1.length; i++) {
-    combinedArray[i] = array1[i];
-  }
-  for (let i = 0; i < array2.length; i++) {
-    combinedArray[array1.length + i] = array2[i];
-  }
-  return combinedArray;
-};
-
-// Factory function ensures consistent object shapes
-const createClassValidatorObject = (classGroupId, validator) => ({
-  classGroupId,
-  validator
-});
-// Factory ensures consistent ClassPartObject shape
-const createClassPartObject = (nextPart = new Map(), validators = null, classGroupId) => ({
-  nextPart,
-  validators,
-  classGroupId
-});
-const CLASS_PART_SEPARATOR = '-';
-const EMPTY_CONFLICTS = [];
-// I use two dots here because one dot is used as prefix for class groups in plugins
-const ARBITRARY_PROPERTY_PREFIX = 'arbitrary..';
-const createClassGroupUtils = config => {
-  const classMap = createClassMap(config);
-  const {
-    conflictingClassGroups,
-    conflictingClassGroupModifiers
-  } = config;
-  const getClassGroupId = className => {
-    if (className.startsWith('[') && className.endsWith(']')) {
-      return getGroupIdForArbitraryProperty(className);
-    }
-    const classParts = className.split(CLASS_PART_SEPARATOR);
-    // Classes like `-inset-1` produce an empty string as first classPart. We assume that classes for negative values are used correctly and skip it.
-    const startIndex = classParts[0] === '' && classParts.length > 1 ? 1 : 0;
-    return getGroupRecursive(classParts, startIndex, classMap);
-  };
-  const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
-    if (hasPostfixModifier) {
-      const modifierConflicts = conflictingClassGroupModifiers[classGroupId];
-      const baseConflicts = conflictingClassGroups[classGroupId];
-      if (modifierConflicts) {
-        if (baseConflicts) {
-          // Merge base conflicts with modifier conflicts
-          return concatArrays(baseConflicts, modifierConflicts);
-        }
-        // Only modifier conflicts
-        return modifierConflicts;
-      }
-      // Fall back to without postfix if no modifier conflicts
-      return baseConflicts || EMPTY_CONFLICTS;
-    }
-    return conflictingClassGroups[classGroupId] || EMPTY_CONFLICTS;
-  };
-  return {
-    getClassGroupId,
-    getConflictingClassGroupIds
-  };
-};
-const getGroupRecursive = (classParts, startIndex, classPartObject) => {
-  const classPathsLength = classParts.length - startIndex;
-  if (classPathsLength === 0) {
-    return classPartObject.classGroupId;
-  }
-  const currentClassPart = classParts[startIndex];
-  const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
-  if (nextClassPartObject) {
-    const result = getGroupRecursive(classParts, startIndex + 1, nextClassPartObject);
-    if (result) return result;
-  }
-  const validators = classPartObject.validators;
-  if (validators === null) {
-    return undefined;
-  }
-  // Build classRest string efficiently by joining from startIndex onwards
-  const classRest = startIndex === 0 ? classParts.join(CLASS_PART_SEPARATOR) : classParts.slice(startIndex).join(CLASS_PART_SEPARATOR);
-  const validatorsLength = validators.length;
-  for (let i = 0; i < validatorsLength; i++) {
-    const validatorObj = validators[i];
-    if (validatorObj.validator(classRest)) {
-      return validatorObj.classGroupId;
-    }
-  }
-  return undefined;
-};
-/**
- * Get the class group ID for an arbitrary property.
- *
- * @param className - The class name to get the group ID for. Is expected to be string starting with `[` and ending with `]`.
- */
-const getGroupIdForArbitraryProperty = className => className.slice(1, -1).indexOf(':') === -1 ? undefined : (() => {
-  const content = className.slice(1, -1);
-  const colonIndex = content.indexOf(':');
-  const property = content.slice(0, colonIndex);
-  return property ? ARBITRARY_PROPERTY_PREFIX + property : undefined;
-})();
+const getGroupIdForArbitraryProperty = className => className.slice(1, -1).indexOf(':') === -1 ? undefined : (() => {
+  const content = className.slice(1, -1);
+  const colonIndex = content.indexOf(':');
+  const property = content.slice(0, colonIndex);
+  return property ? ARBITRARY_PROPERTY_PREFIX + property : undefined;
+})();
 /**
  * Exported for testing only
  */
@@ -4893,15 +4763,27 @@ const createConfigUtils = config => ({
   cache: createLruCache(config.cacheSize),
   parseClassName: createParseClassName(config),
   sortModifiers: createSortModifiers(config),
+  postfixLookupClassGroupIds: createPostfixLookupClassGroupIds(config),
   ...createClassGroupUtils(config)
 });
+const createPostfixLookupClassGroupIds = config => {
+  const lookup = Object.create(null);
+  const classGroupIds = config.postfixLookupClassGroups;
+  if (classGroupIds) {
+    for (let i = 0; i < classGroupIds.length; i++) {
+      lookup[classGroupIds[i]] = true;
+    }
+  }
+  return lookup;
+};
 const SPLIT_CLASSES_REGEX = /\s+/;
 const mergeClassList = (classList, configUtils) => {
   const {
     parseClassName,
     getClassGroupId,
     getConflictingClassGroupIds,
-    sortModifiers
+    sortModifiers,
+    postfixLookupClassGroupIds
   } = configUtils;
   /**
    * Set of classGroupIds in following format:
@@ -4927,7 +4809,18 @@ const mergeClassList = (classList, configUtils) => {
       continue;
     }
     let hasPostfixModifier = !!maybePostfixModifierPosition;
-    let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
+    let classGroupId;
+    if (hasPostfixModifier) {
+      const baseClassNameWithoutPostfix = baseClassName.substring(0, maybePostfixModifierPosition);
+      classGroupId = getClassGroupId(baseClassNameWithoutPostfix);
+      const classGroupIdWithPostfix = classGroupId && postfixLookupClassGroupIds[classGroupId] ? getClassGroupId(baseClassName) : undefined;
+      if (classGroupIdWithPostfix && classGroupIdWithPostfix !== classGroupId) {
+        classGroupId = classGroupIdWithPostfix;
+        hasPostfixModifier = false;
+      }
+    } else {
+      classGroupId = getClassGroupId(baseClassName);
+    }
     if (!classGroupId) {
       if (!hasPostfixModifier) {
         // Not a Tailwind class
@@ -5032,6 +4925,7 @@ const fallbackThemeArr = [];
 const fromTheme = key => {
   const themeGetter = theme => theme[key] || fallbackThemeArr;
   themeGetter.isThemeGetter = true;
+  themeGetter.themeKey = key;
   return themeGetter;
 };
 const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
@@ -5039,7 +4933,7 @@ const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
 const fractionRegex = /^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/;
 const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
 const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
-const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
+const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix|color|light-dark)\(.+\)$/;
 // Shadow always begins with x and y offset separated by underscore optionally prepended by inset
 const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
 const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
@@ -5058,6 +4952,7 @@ const isNever = () => false;
 const isShadow = value => shadowRegex.test(value);
 const isImage = value => imageRegex.test(value);
 const isAnyNonArbitrary = value => !isArbitraryValue(value) && !isArbitraryVariable(value);
+const isNamedContainerQuery = value => value.startsWith('@container') && (value[10] === '/' && value[11] !== undefined || value[11] === 's' && value[16] !== undefined && value.startsWith('-size/', 10) || value[11] === 'n' && value[18] !== undefined && value.startsWith('-normal/', 10));
 const isArbitrarySize = value => getIsArbitraryValue(value, isLabelSize, isNever);
 const isArbitraryValue = value => arbitraryValueRegex.test(value);
 const isArbitraryLength = value => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
@@ -5162,7 +5057,7 @@ const getDefaultConfig = () => {
   const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch', 'center-safe', 'end-safe'];
   const scaleMargin = () => ['auto', ...scaleUnambiguousSpacing()];
   const scaleSizing = () => [isFraction, 'auto', 'full', 'dvw', 'dvh', 'lvw', 'lvh', 'svw', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
-  const scaleSizingInline = () => [isFraction, 'screen', 'full', 'dvw', 'lvw', 'svw', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
+  const scaleSizingInline = () => [themeContainer, isFraction, 'screen', 'full', 'dvw', 'lvw', 'svw', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
   const scaleSizingBlock = () => [isFraction, 'screen', 'full', 'lh', 'dvh', 'lvh', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
   const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
   const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
@@ -5229,12 +5124,24 @@ const getDefaultConfig = () => {
        * @deprecated since Tailwind CSS v4.0.0
        */
       container: ['container'],
+      /**
+       * Container Type
+       * @see https://tailwindcss.com/docs/responsive-design#container-queries
+       */
+      'container-type': [{
+        '@container': ['', 'normal', 'size', isArbitraryVariable, isArbitraryValue]
+      }],
+      /**
+       * Container Name
+       * @see https://tailwindcss.com/docs/responsive-design#named-containers
+       */
+      'container-named': [isNamedContainerQuery],
       /**
        * Columns
        * @see https://tailwindcss.com/docs/columns
        */
       columns: [{
-        columns: [isNumber, isArbitraryValue, isArbitraryVariable, themeContainer]
+        columns: [isNumber, 'auto', isArbitraryValue, isArbitraryVariable, themeContainer]
       }],
       /**
        * Break After
@@ -5870,42 +5777,42 @@ const getDefaultConfig = () => {
       }],
       /**
        * Inline Size
-       * @see https://tailwindcss.com/docs/width
+       * @see https://tailwindcss.com/docs/inline-size
        */
       'inline-size': [{
         inline: ['auto', ...scaleSizingInline()]
       }],
       /**
        * Min-Inline Size
-       * @see https://tailwindcss.com/docs/min-width
+       * @see https://tailwindcss.com/docs/min-inline-size
        */
       'min-inline-size': [{
         'min-inline': ['auto', ...scaleSizingInline()]
       }],
       /**
        * Max-Inline Size
-       * @see https://tailwindcss.com/docs/max-width
+       * @see https://tailwindcss.com/docs/max-inline-size
        */
       'max-inline-size': [{
         'max-inline': ['none', ...scaleSizingInline()]
       }],
       /**
        * Block Size
-       * @see https://tailwindcss.com/docs/height
+       * @see https://tailwindcss.com/docs/block-size
        */
       'block-size': [{
         block: ['auto', ...scaleSizingBlock()]
       }],
       /**
        * Min-Block Size
-       * @see https://tailwindcss.com/docs/min-height
+       * @see https://tailwindcss.com/docs/min-block-size
        */
       'min-block-size': [{
         'min-block': ['auto', ...scaleSizingBlock()]
       }],
       /**
        * Max-Block Size
-       * @see https://tailwindcss.com/docs/max-height
+       * @see https://tailwindcss.com/docs/max-block-size
        */
       'max-block-size': [{
         'max-block': ['none', ...scaleSizingBlock()]
@@ -5955,7 +5862,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/max-height
        */
       'max-h': [{
-        'max-h': ['screen', 'lh', ...scaleSizing()]
+        'max-h': ['screen', 'lh', 'none', ...scaleSizing()]
       }],
       // ------------------
       // --- Typography ---
@@ -6054,7 +5961,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/line-height
        */
       leading: [{
-        leading: [/** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
+        leading: ['none', /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
         themeLeading, ...scaleUnambiguousSpacing()]
       }],
       /**
@@ -6157,6 +6064,13 @@ const getDefaultConfig = () => {
       indent: [{
         indent: scaleUnambiguousSpacing()
       }],
+      /**
+       * Tab Size
+       * @see https://tailwindcss.com/docs/tab-size
+       */
+      'tab-size': [{
+        tab: [isInteger, isArbitraryVariable, isArbitraryValue]
+      }],
       /**
        * Vertical Alignment
        * @see https://tailwindcss.com/docs/vertical-align
@@ -6254,7 +6168,7 @@ const getDefaultConfig = () => {
             to: ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']
           }, isInteger, isArbitraryVariable, isArbitraryValue],
           radial: ['', isArbitraryVariable, isArbitraryValue],
-          conic: [isInteger, isArbitraryVariable, isArbitraryValue]
+          conic: ['', isInteger, isArbitraryVariable, isArbitraryValue]
         }, isArbitraryVariableImage, isArbitraryImage]
       }],
       /**
@@ -6651,7 +6565,9 @@ const getDefaultConfig = () => {
       shadow: [{
         shadow: [
         // Deprecated since Tailwind CSS v4.0.0
-        '', 'none', themeShadow, isArbitraryVariableShadow, isArbitraryShadow]
+        '',
+        // Deprecated since Tailwind CSS v4.0.0
+        'inner', 'none', themeShadow, isArbitraryVariableShadow, isArbitraryShadow]
       }],
       /**
        * Box Shadow Color
@@ -7364,7 +7280,14 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/translate
        */
       'translate-none': ['translate-none'],
-      // ---------------------
+      /**
+       * Zoom
+       * @see https://tailwindcss.com/docs/zoom
+       */
+      zoom: [{
+        zoom: [isInteger, isArbitraryVariable, isArbitraryValue]
+      }],
+      // ---------------------
       // --- Interactivity ---
       // ---------------------
       /**
@@ -7430,6 +7353,34 @@ const getDefaultConfig = () => {
       'scroll-behavior': [{
         scroll: ['auto', 'smooth']
       }],
+      /**
+       * Scrollbar Thumb Color
+       * @see https://tailwindcss.com/docs/scrollbar-color
+       */
+      'scrollbar-thumb-color': [{
+        'scrollbar-thumb': scaleColor()
+      }],
+      /**
+       * Scrollbar Track Color
+       * @see https://tailwindcss.com/docs/scrollbar-color
+       */
+      'scrollbar-track-color': [{
+        'scrollbar-track': scaleColor()
+      }],
+      /**
+       * Scrollbar Gutter
+       * @see https://tailwindcss.com/docs/scrollbar-gutter
+       */
+      'scrollbar-gutter': [{
+        'scrollbar-gutter': ['auto', 'stable', 'both']
+      }],
+      /**
+       * Scrollbar Width
+       * @see https://tailwindcss.com/docs/scrollbar-width
+       */
+      'scrollbar-w': [{
+        scrollbar: ['auto', 'thin', 'none']
+      }],
       /**
        * Scroll Margin
        * @see https://tailwindcss.com/docs/scroll-margin
@@ -7688,19 +7639,20 @@ const getDefaultConfig = () => {
       }]
     },
     conflictingClassGroups: {
+      'container-named': ['container-type'],
       overflow: ['overflow-x', 'overflow-y'],
       overscroll: ['overscroll-x', 'overscroll-y'],
       inset: ['inset-x', 'inset-y', 'inset-bs', 'inset-be', 'start', 'end', 'top', 'right', 'bottom', 'left'],
-      'inset-x': ['right', 'left'],
-      'inset-y': ['top', 'bottom'],
+      'inset-x': ['start', 'end', 'right', 'left'],
+      'inset-y': ['inset-bs', 'inset-be', 'top', 'bottom'],
       flex: ['basis', 'grow', 'shrink'],
       gap: ['gap-x', 'gap-y'],
       p: ['px', 'py', 'ps', 'pe', 'pbs', 'pbe', 'pt', 'pr', 'pb', 'pl'],
-      px: ['pr', 'pl'],
-      py: ['pt', 'pb'],
+      px: ['ps', 'pe', 'pr', 'pl'],
+      py: ['pbs', 'pbe', 'pt', 'pb'],
       m: ['mx', 'my', 'ms', 'me', 'mbs', 'mbe', 'mt', 'mr', 'mb', 'ml'],
-      mx: ['mr', 'ml'],
-      my: ['mt', 'mb'],
+      mx: ['ms', 'me', 'mr', 'ml'],
+      my: ['mbs', 'mbe', 'mt', 'mb'],
       size: ['w', 'h'],
       'font-size': ['leading'],
       'fvn-normal': ['fvn-ordinal', 'fvn-slashed-zero', 'fvn-figure', 'fvn-spacing', 'fvn-fraction'],
@@ -7719,19 +7671,19 @@ const getDefaultConfig = () => {
       'rounded-l': ['rounded-tl', 'rounded-bl'],
       'border-spacing': ['border-spacing-x', 'border-spacing-y'],
       'border-w': ['border-w-x', 'border-w-y', 'border-w-s', 'border-w-e', 'border-w-bs', 'border-w-be', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
-      'border-w-x': ['border-w-r', 'border-w-l'],
-      'border-w-y': ['border-w-t', 'border-w-b'],
+      'border-w-x': ['border-w-s', 'border-w-e', 'border-w-r', 'border-w-l'],
+      'border-w-y': ['border-w-bs', 'border-w-be', 'border-w-t', 'border-w-b'],
       'border-color': ['border-color-x', 'border-color-y', 'border-color-s', 'border-color-e', 'border-color-bs', 'border-color-be', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'],
-      'border-color-x': ['border-color-r', 'border-color-l'],
-      'border-color-y': ['border-color-t', 'border-color-b'],
+      'border-color-x': ['border-color-s', 'border-color-e', 'border-color-r', 'border-color-l'],
+      'border-color-y': ['border-color-bs', 'border-color-be', 'border-color-t', 'border-color-b'],
       translate: ['translate-x', 'translate-y', 'translate-none'],
       'translate-none': ['translate', 'translate-x', 'translate-y', 'translate-z'],
       'scroll-m': ['scroll-mx', 'scroll-my', 'scroll-ms', 'scroll-me', 'scroll-mbs', 'scroll-mbe', 'scroll-mt', 'scroll-mr', 'scroll-mb', 'scroll-ml'],
-      'scroll-mx': ['scroll-mr', 'scroll-ml'],
-      'scroll-my': ['scroll-mt', 'scroll-mb'],
+      'scroll-mx': ['scroll-ms', 'scroll-me', 'scroll-mr', 'scroll-ml'],
+      'scroll-my': ['scroll-mbs', 'scroll-mbe', 'scroll-mt', 'scroll-mb'],
       'scroll-p': ['scroll-px', 'scroll-py', 'scroll-ps', 'scroll-pe', 'scroll-pbs', 'scroll-pbe', 'scroll-pt', 'scroll-pr', 'scroll-pb', 'scroll-pl'],
-      'scroll-px': ['scroll-pr', 'scroll-pl'],
-      'scroll-py': ['scroll-pt', 'scroll-pb'],
+      'scroll-px': ['scroll-ps', 'scroll-pe', 'scroll-pr', 'scroll-pl'],
+      'scroll-py': ['scroll-pbs', 'scroll-pbe', 'scroll-pt', 'scroll-pb'],
       touch: ['touch-x', 'touch-y', 'touch-pz'],
       'touch-x': ['touch'],
       'touch-y': ['touch'],
@@ -7740,6 +7692,7 @@ const getDefaultConfig = () => {
     conflictingClassGroupModifiers: {
       'font-size': ['leading']
     },
+    postfixLookupClassGroups: ['container-type'],
     orderSensitiveModifiers: ['*', '**', 'after', 'backdrop', 'before', 'details-content', 'file', 'first-letter', 'first-line', 'marker', 'placeholder', 'selection']
   };
 };
@@ -7750,475 +7703,673 @@ function cn(...inputs) {
 }
 
 /**
- * Combobox component with type-ahead search and fuzzy matching.
- * Built on cmdk for search functionality and Radix Popover for positioning.
+ * Get icon for tenant type
  */
-function Combobox({ options, value, onValueChange, placeholder = 'Select...', searchPlaceholder = 'Search...', emptyMessage = 'No results found.', disabled = false, loading = false, className, clearable = false, showAllOption = true, allOptionLabel = 'All', }) {
-    const [open, setOpen] = React.useState(false);
-    const [search, setSearch] = React.useState('');
-    // Find current selected option for display
-    const selectedOption = options.find((opt) => opt.value === value);
-    const displayValue = selectedOption
-        ? selectedOption.count !== undefined
-            ? `${selectedOption.label} (${selectedOption.count})`
-            : selectedOption.label
-        : value === '' && showAllOption
-            ? allOptionLabel
-            : placeholder;
-    const handleSelect = React.useCallback((selectedValue) => {
-        onValueChange(selectedValue === value ? '' : selectedValue);
-        setOpen(false);
-        setSearch('');
-    }, [onValueChange, value]);
-    const handleClear = React.useCallback((e) => {
-        e.stopPropagation();
-        onValueChange('');
-    }, [onValueChange]);
-    // Custom fuzzy filter function
-    const filterOptions = React.useCallback((optionValue, searchQuery) => {
-        if (!searchQuery)
-            return 1;
-        const option = options.find((o) => o.value === optionValue);
-        const label = option?.label || optionValue;
-        const lowerLabel = label.toLowerCase();
-        const lowerSearch = searchQuery.toLowerCase();
-        // Exact match
-        if (lowerLabel === lowerSearch)
-            return 1;
-        // Starts with
-        if (lowerLabel.startsWith(lowerSearch))
-            return 0.9;
-        // Contains
-        if (lowerLabel.includes(lowerSearch))
-            return 0.8;
-        // Fuzzy match - check if all search chars appear in order
-        let searchIdx = 0;
-        for (let i = 0; i < lowerLabel.length && searchIdx < lowerSearch.length; i++) {
-            if (lowerLabel[i] === lowerSearch[searchIdx]) {
-                searchIdx++;
-            }
-        }
-        if (searchIdx === lowerSearch.length)
-            return 0.6;
-        return 0;
-    }, [options]);
-    return (jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [jsx(Popover.Trigger, { asChild: true, children: jsxs("button", { type: "button", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", disabled: disabled || loading, className: cn('flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background', 'placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', className), children: [jsx("span", { className: "truncate text-left flex-1", children: loading ? 'Loading...' : displayValue }), jsxs("div", { className: "flex items-center gap-1 ml-2", children: [clearable && value && !disabled && (jsx("span", { role: "button", tabIndex: 0, onClick: handleClear, onKeyDown: (e) => {
-                                        if (e.key === 'Enter' || e.key === ' ') {
-                                            handleClear(e);
-                                        }
-                                    }, className: "rounded-sm opacity-50 hover:opacity-100 cursor-pointer", children: jsx(X, { className: "h-3 w-3" }) })), jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })] })] }) }), jsx(Popover.Portal, { children: jsx(Popover.Content, { className: cn('z-50 min-w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-md border shadow-md', 'bg-white dark:bg-slate-900 text-foreground', '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: jsxs(Command, { filter: filterOptions, className: "w-full", children: [jsx("div", { className: "flex items-center border-b px-3", children: jsx(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" }) }), jsxs(CommandList, { className: "max-h-[300px] overflow-y-auto p-1", children: [jsx(CommandEmpty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }), jsxs(CommandGroup, { children: [showAllOption && (jsxs(CommandItem, { value: "_all", onSelect: () => handleSelect(''), 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: [jsx(Check, { className: cn('mr-2 h-4 w-4', value === '' ? 'opacity-100' : 'opacity-0') }), allOptionLabel] })), options.map((option) => (jsxs(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: [jsx(Check, { className: cn('mr-2 h-4 w-4', value === option.value ? 'opacity-100' : 'opacity-0') }), jsx("span", { className: "flex-1 truncate", children: option.label }), option.count !== undefined && (jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value)))] })] })] }) }) })] }));
+function getTenantIcon(type) {
+    switch (type) {
+        case "organization":
+            return (jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" }) }));
+        case "project":
+            return (jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" }) }));
+        case "user":
+            return (jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }));
+        case "platform":
+            return (jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
+        default:
+            return null;
+    }
+}
+/**
+ * Get badge variant based on tenant type
+ */
+function getTenantBadgeVariant(type) {
+    switch (type) {
+        case "organization":
+            return "default";
+        case "project":
+            return "secondary";
+        case "user":
+            return "default";
+        case "platform":
+            return "default";
+        default:
+            return "secondary";
+    }
 }
-
 /**
- * TimeRangeDropdown - A compact dropdown for selecting time ranges
+ * TenantBadge displays tenant information in a compact badge format
+ * Renders as a clickable link if tenantLinkResolver is provided and returns a URL
  */
-function TimeRangeDropdown({ presets, selectedPreset, onPresetSelect, onCustomRangeApply, customStart: initialCustomStart, customEnd: initialCustomEnd, disabled = false, className, displayLabel, }) {
-    const [open, setOpen] = React.useState(false);
-    const [showCustomInputs, setShowCustomInputs] = React.useState(false);
-    const [customStart, setCustomStart] = React.useState(initialCustomStart || '');
-    const [customEnd, setCustomEnd] = React.useState(initialCustomEnd || '');
-    // Update custom values when props change
-    React.useEffect(() => {
-        if (initialCustomStart)
-            setCustomStart(initialCustomStart);
-        if (initialCustomEnd)
-            setCustomEnd(initialCustomEnd);
-    }, [initialCustomStart, initialCustomEnd]);
-    const selectedPresetObj = presets.find((p) => p.key === selectedPreset);
-    const label = displayLabel || selectedPresetObj?.label || 'Select time range';
-    const handlePresetClick = (presetKey) => {
-        onPresetSelect(presetKey);
-        setShowCustomInputs(false);
-        setOpen(false);
-    };
-    const handleCustomClick = () => {
-        setShowCustomInputs(true);
-    };
-    const handleCustomApply = () => {
-        if (customStart && customEnd) {
-            onCustomRangeApply(customStart, customEnd);
-            setShowCustomInputs(false);
-            setOpen(false);
-        }
-    };
-    const handleCustomCancel = () => {
-        setShowCustomInputs(false);
-    };
-    return (jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [jsx(Popover.Trigger, { asChild: true, children: jsxs("button", { type: "button", disabled: disabled, className: cn('flex h-7 items-center gap-2 rounded-md border border-input bg-background px-2 text-xs ring-offset-background', 'hover:bg-accent hover:text-accent-foreground', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', className), children: [jsx(Calendar, { className: "h-4 w-4 text-muted-foreground" }), jsx("span", { className: "whitespace-nowrap", children: label }), jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })] }) }), jsx(Popover.Portal, { children: jsx(Popover.Content, { className: cn('z-50 min-w-[200px] 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: "end", children: !showCustomInputs ? (jsxs("div", { className: "p-1", children: [presets.map((preset) => (jsx("button", { type: "button", onClick: () => handlePresetClick(preset.key), className: cn('relative flex w-full cursor-pointer select-none items-center rounded-sm px-3 py-2 text-sm outline-none', 'hover:bg-accent hover:text-accent-foreground', selectedPreset === preset.key && 'bg-accent text-accent-foreground font-medium'), children: preset.label }, preset.key))), jsx("div", { className: "my-1 h-px bg-border" }), jsx("button", { type: "button", onClick: handleCustomClick, className: cn('relative flex w-full cursor-pointer select-none items-center rounded-sm px-3 py-2 text-sm outline-none', 'hover:bg-accent hover:text-accent-foreground', selectedPreset === 'custom' && 'bg-accent text-accent-foreground font-medium'), children: "Custom range..." })] })) : (jsxs("div", { className: "p-4 min-w-[280px]", children: [jsxs("div", { className: "flex flex-col gap-3", children: [jsxs("div", { className: "flex flex-col gap-1.5", children: [jsx(Label, { htmlFor: "time-range-start", className: "text-xs text-muted-foreground font-semibold uppercase tracking-tight", children: "Start" }), jsx(Input, { id: "time-range-start", type: "datetime-local", value: customStart, onChange: (e) => setCustomStart(e.target.value), className: "w-full", disabled: disabled })] }), jsxs("div", { className: "flex flex-col gap-1.5", children: [jsx(Label, { htmlFor: "time-range-end", className: "text-xs text-muted-foreground font-semibold uppercase tracking-tight", children: "End" }), jsx(Input, { id: "time-range-end", type: "datetime-local", value: customEnd, onChange: (e) => setCustomEnd(e.target.value), className: "w-full", disabled: disabled })] })] }), jsxs("div", { className: "flex justify-end gap-2 mt-4 pt-3 border-t border-border", children: [jsx(Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "small", onClick: handleCustomCancel, children: "Back" }), jsx(Button, { htmlType: "button", size: "small", onClick: handleCustomApply, disabled: !customStart || !customEnd, children: "Apply" })] })] })) }) })] }));
+function TenantBadge({ tenant, tenantLinkResolver, className = "", size = "default", }) {
+    const icon = getTenantIcon(tenant.type);
+    const variant = getTenantBadgeVariant(tenant.type);
+    const url = tenantLinkResolver?.(tenant);
+    const badgeContent = (jsxs(Badge, { variant: variant, className: cn("inline-flex items-center gap-1 whitespace-nowrap", size === "compact" ? "text-xs h-4 py-0 px-1.5" : "text-xs h-5 px-2", url && "cursor-pointer hover:opacity-80 transition-opacity", className), children: [icon, jsx("span", { className: "font-medium capitalize", children: tenant.type }), tenant.type !== "platform" && (jsxs(Fragment, { children: [jsx("span", { className: "text-muted-foreground", children: "/" }), jsx("span", { children: tenant.name })] }))] }));
+    if (url) {
+        return (jsx("a", { href: url, className: "no-underline", onClick: (e) => e.stopPropagation(), title: `View ${tenant.type}: ${tenant.name}`, children: badgeContent }));
+    }
+    return badgeContent;
 }
 
-const TIME_PRESETS$3 = [
-    {
-        key: 'last15min',
-        label: 'Last 15 min',
-        getValue: () => ({
-            start: formatISO(subMinutes(new Date())),
-            end: formatISO(new Date()),
-        }),
-    },
-    {
-        key: 'last1hour',
-        label: 'Last hour',
-        getValue: () => ({
-            start: formatISO(subHours(new Date(), 1)),
-            end: formatISO(new Date()),
-        }),
-    },
-    {
-        key: 'last6hours',
-        label: 'Last 6 hours',
-        getValue: () => ({
-            start: formatISO(subHours(new Date(), 6)),
-            end: formatISO(new Date()),
-        }),
-    },
-    {
-        key: 'last24hours',
-        label: 'Last 24 hours',
-        getValue: () => ({
-            start: formatISO(subHours(new Date(), 24)),
-            end: formatISO(new Date()),
-        }),
-    },
-    {
-        key: 'last7days',
-        label: 'Last 7 days',
-        getValue: () => ({
-            start: formatISO(subDays(new Date(), 7)),
-            end: formatISO(new Date()),
-        }),
-    },
-    {
-        key: 'last30days',
-        label: 'Last 30 days',
-        getValue: () => ({
-            start: formatISO(subDays(new Date(), 30)),
-            end: formatISO(new Date()),
-        }),
-    },
-];
-/** Debounce delay for text inputs (ms) */
-const DEBOUNCE_DELAY = 300;
 /**
- * Helper function to convert ISO string to datetime-local format
+ * Extract tenant information from audit event annotations if present
+ * Expected annotations: tenant.type and tenant.name
  */
-const formatDatetimeLocal$4 = (isoString) => {
-    const date = new Date(isoString);
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    const hours = String(date.getHours()).padStart(2, '0');
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    return `${year}-${month}-${day}T${hours}:${minutes}`;
-};
-function SimpleQueryBuilder({ client, onFilterChange, initialLimit = 100, className = '', disabled = false, }) {
-    const [isAdvancedExpanded, setIsAdvancedExpanded] = useState(false);
-    const [filters, setFilters] = useState({
-        verb: '',
-        resourceType: '',
-        namespace: '',
-        resourceName: '',
-        username: '',
-    });
-    const [limit, setLimit] = useState(initialLimit);
-    const [advancedFilter, setAdvancedFilter] = useState('');
-    const [useAdvancedFilter, setUseAdvancedFilter] = useState(false);
-    // Time range state
-    const [selectedPreset, setSelectedPreset] = useState('last24hours');
-    const [timeRange, setTimeRange] = useState(null);
-    const [customStart, setCustomStart] = useState(() => formatDatetimeLocal$4(formatISO(subDays(new Date(), 1))));
-    const [customEnd, setCustomEnd] = useState(() => formatDatetimeLocal$4(formatISO(new Date())));
-    // Fetch facets for dynamic filter options
-    const { verbs, resources, namespaces, usernames, isLoading: facetsLoading, error: facetsError } = useAuditLogFacets(client, timeRange);
-    // Log facets error for debugging
-    if (facetsError) {
-        console.error('Failed to load audit log facets:', facetsError);
+function extractTenantFromAnnotations(event) {
+    const annotations = event.annotations;
+    if (!annotations)
+        return undefined;
+    const tenantType = annotations["tenant.type"];
+    const tenantName = annotations["tenant.name"];
+    if (tenantType && tenantName) {
+        const validTypes = [
+            "platform",
+            "organization",
+            "project",
+            "user",
+        ];
+        if (validTypes.includes(tenantType)) {
+            return {
+                type: tenantType,
+                name: tenantName,
+            };
+        }
     }
-    // Refs for debouncing
-    const debounceTimerRef = useRef(null);
-    const isInitialMount = useRef(true);
-    // Initialize with default time range and trigger initial query
-    useEffect(() => {
-        const defaultRange = TIME_PRESETS$3.find(p => p.key === 'last24hours')?.getValue();
-        if (defaultRange) {
-            setTimeRange(defaultRange);
+    return undefined;
+}
+/**
+ * AuditEventViewer displays a list of audit events with details
+ */
+function AuditEventViewer({ events, className = "", onEventSelect, tenantLinkResolver, }) {
+    const [selectedEvent, setSelectedEvent] = useState(null);
+    const [expandedEvents, setExpandedEvents] = useState(new Set());
+    const toggleEventExpansion = (auditId) => {
+        const newExpanded = new Set(expandedEvents);
+        if (expandedEvents.has(auditId)) {
+            newExpanded.delete(auditId);
         }
-    }, []);
-    const generateCEL = useCallback(() => {
-        const parts = [];
-        if (filters.verb) {
-            parts.push(`verb == "${filters.verb}"`);
+        else {
+            newExpanded.add(auditId);
         }
-        if (filters.resourceType) {
-            parts.push(`objectRef.resource == "${filters.resourceType}"`);
+        setExpandedEvents(newExpanded);
+    };
+    const handleEventClick = (event) => {
+        setSelectedEvent(event);
+        if (onEventSelect) {
+            onEventSelect(event);
         }
-        if (filters.namespace) {
-            parts.push(`objectRef.namespace == "${filters.namespace}"`);
+    };
+    const formatTimestamp = (timestamp) => {
+        if (!timestamp)
+            return "N/A";
+        try {
+            return format(new Date(timestamp), "yyyy-MM-dd HH:mm:ss");
         }
-        if (filters.resourceName) {
-            parts.push(`objectRef.name.contains("${filters.resourceName}")`);
+        catch {
+            return timestamp;
         }
-        if (filters.username) {
-            parts.push(`user.username.contains("${filters.username}")`);
-        }
-        return parts.join(' && ');
-    }, [filters]);
-    // Execute query when filters change (with debouncing for text inputs)
-    const executeQuery = useCallback(() => {
-        if (!timeRange || disabled)
-            return;
-        const filter = useAdvancedFilter ? advancedFilter : generateCEL();
-        onFilterChange({
-            filter,
-            limit,
-            startTime: timeRange.start,
-            endTime: timeRange.end
-        });
-    }, [useAdvancedFilter, advancedFilter, generateCEL, onFilterChange, limit, timeRange, disabled]);
-    // Auto-execute query when dropdown filters or time range change (immediate)
-    useEffect(() => {
-        // Skip the initial mount - we want to wait for timeRange to be set
-        if (isInitialMount.current) {
-            isInitialMount.current = false;
-            return;
-        }
-        // Clear any pending debounced query
-        if (debounceTimerRef.current) {
-            clearTimeout(debounceTimerRef.current);
-        }
-        executeQuery();
-    }, [filters.verb, filters.resourceType, timeRange, limit, useAdvancedFilter]);
-    // Auto-execute query when text filters change (debounced)
-    useEffect(() => {
-        if (isInitialMount.current || !timeRange)
-            return;
-        // Clear previous timer
-        if (debounceTimerRef.current) {
-            clearTimeout(debounceTimerRef.current);
-        }
-        // Set new debounced timer
-        debounceTimerRef.current = setTimeout(() => {
-            executeQuery();
-        }, DEBOUNCE_DELAY);
-        return () => {
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-        };
-    }, [filters.namespace, filters.resourceName, filters.username, advancedFilter]);
-    const handleFilterChange = useCallback((field, value) => {
-        setFilters(prev => ({ ...prev, [field]: value }));
-    }, []);
-    const handleTimePresetSelect = useCallback((presetKey) => {
-        const preset = TIME_PRESETS$3.find(p => p.key === presetKey);
-        if (preset) {
-            setSelectedPreset(presetKey);
-            setTimeRange(preset.getValue());
-        }
-    }, []);
-    const handleCustomRangeApply = useCallback((start, end) => {
-        setSelectedPreset('custom');
-        setCustomStart(start);
-        setCustomEnd(end);
-        setTimeRange({
-            start: new Date(start).toISOString(),
-            end: new Date(end).toISOString(),
-        });
-    }, []);
-    const handleLimitChange = useCallback((newLimit) => {
-        const validLimit = Math.min(Math.max(1, newLimit), 1000);
-        setLimit(validLimit);
-    }, []);
-    const handleAdvancedToggle = useCallback(() => {
-        if (!isAdvancedExpanded) {
-            // When expanding, populate advanced filter with generated CEL
-            setAdvancedFilter(generateCEL());
-        }
-        setIsAdvancedExpanded(!isAdvancedExpanded);
-    }, [isAdvancedExpanded, generateCEL]);
-    const handleUseAdvancedChange = useCallback((checked) => {
-        setUseAdvancedFilter(checked === true);
-    }, []);
-    // Get display label for time range
-    const getTimeRangeLabel = () => {
-        if (selectedPreset === 'custom') {
-            if (timeRange?.start && timeRange?.end) {
-                const start = new Date(timeRange.start);
-                const end = new Date(timeRange.end);
-                return `${start.toLocaleDateString()} - ${end.toLocaleDateString()}`;
-            }
-            return 'Custom';
+    };
+    const getVerbBadgeVariant = (verb) => {
+        switch (verb?.toLowerCase()) {
+            case "create":
+                return "success";
+            case "update":
+            case "patch":
+                return "warning";
+            case "delete":
+                return "destructive";
+            case "get":
+            case "list":
+            case "watch":
+                return "default";
+            default:
+                return "secondary";
         }
-        const preset = TIME_PRESETS$3.find(p => p.key === selectedPreset);
-        return preset?.label || 'Select time range';
     };
-    return (jsxs("div", { className: `mb-6 pb-6 border-b border-border ${className}`, children: [jsxs("div", { className: "flex flex-wrap gap-4 items-end", children: [jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Action" }), jsx(Combobox, { options: verbs
-                                    .filter(facet => facet.value)
-                                    .map(facet => ({
-                                    value: facet.value,
-                                    label: facet.value,
-                                    count: facet.count,
-                                })), value: filters.verb, onValueChange: (value) => handleFilterChange('verb', value), placeholder: "All", searchPlaceholder: "Search actions...", allOptionLabel: "All", disabled: disabled || useAdvancedFilter, loading: facetsLoading, className: "min-w-[130px]" })] }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Resource" }), jsx(Combobox, { options: resources
-                                    .filter(facet => facet.value)
-                                    .map(facet => ({
-                                    value: facet.value,
-                                    label: facet.value,
-                                    count: facet.count,
-                                })), value: filters.resourceType, onValueChange: (value) => handleFilterChange('resourceType', value), placeholder: "All", searchPlaceholder: "Search resources...", allOptionLabel: "All", disabled: disabled || useAdvancedFilter, loading: facetsLoading, className: "min-w-[130px]" })] }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Namespace" }), jsx(Combobox, { options: namespaces
-                                    .filter(facet => facet.value)
-                                    .map(facet => ({
-                                    value: facet.value,
-                                    label: facet.value,
-                                    count: facet.count,
-                                })), value: filters.namespace, onValueChange: (value) => handleFilterChange('namespace', value), placeholder: "All", searchPlaceholder: "Search namespaces...", allOptionLabel: "All", disabled: disabled || useAdvancedFilter, loading: facetsLoading, className: "min-w-[130px]" })] }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "User" }), jsx(Combobox, { options: usernames
-                                    .filter(facet => facet.value)
-                                    .map(facet => ({
-                                    value: facet.value,
-                                    label: facet.value,
-                                    count: facet.count,
-                                })), value: filters.username, onValueChange: (value) => handleFilterChange('username', value), placeholder: "All", searchPlaceholder: "Search users...", allOptionLabel: "All", disabled: disabled || useAdvancedFilter, loading: facetsLoading, className: "min-w-[130px]" })] }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Name" }), jsx(Input, { type: "text", value: filters.resourceName, onChange: (e) => handleFilterChange('resourceName', e.target.value), placeholder: "Filter by name...", className: "min-w-[140px]", disabled: disabled || useAdvancedFilter })] }), jsxs("div", { className: "flex flex-col gap-2", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Limit" }), jsx(Input, { type: "number", value: limit, onChange: (e) => handleLimitChange(parseInt(e.target.value) || 100), min: 1, max: 1000, className: "w-[80px]", disabled: disabled })] }), jsx(Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "small", className: "whitespace-nowrap text-muted-foreground hover:text-foreground", onClick: handleAdvancedToggle, "aria-expanded": isAdvancedExpanded, children: isAdvancedExpanded ? '- CEL' : '+ CEL' }), jsxs("div", { className: "flex flex-col gap-2 ml-auto", children: [jsx(Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Time Range" }), jsx(TimeRangeDropdown, { presets: TIME_PRESETS$3.map(p => ({ key: p.key, label: p.label })), selectedPreset: selectedPreset, onPresetSelect: handleTimePresetSelect, onCustomRangeApply: handleCustomRangeApply, customStart: customStart, customEnd: customEnd, disabled: disabled, displayLabel: getTimeRangeLabel() })] })] }), isAdvancedExpanded && (jsxs("div", { className: "mt-4 pt-4", children: [jsx(Separator, { className: "mb-4" }), jsx("div", { className: "mb-3", children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(Checkbox, { id: "use-cel-expression", checked: useAdvancedFilter, onCheckedChange: handleUseAdvancedChange, disabled: disabled }), jsx(Label, { htmlFor: "use-cel-expression", className: "text-sm font-medium text-foreground cursor-pointer", children: "Use CEL Expression" })] }) }), useAdvancedFilter && (jsxs("div", { className: "mt-3", children: [jsx("p", { className: "m-0 mb-2 text-sm text-muted-foreground", children: "Write your query using CEL syntax for complex filters" }), jsx(Textarea, { value: advancedFilter, onChange: (e) => setAdvancedFilter(e.target.value), placeholder: 'Example: verb == "delete" && objectRef.namespace == "production"', rows: 3, className: "w-full font-mono resize-y", disabled: disabled })] }))] }))] }));
+    if (events.length === 0) {
+        return (jsx("div", { className: `bg-muted rounded-lg border border-border ${className}`, children: jsx("div", { className: "p-12 text-center text-muted-foreground text-sm", children: "No events found" }) }));
+    }
+    return (jsx("div", { className: `bg-muted rounded-lg border border-border ${className}`, children: jsx("div", { className: "p-4", children: events.map((event) => {
+                const auditId = event.auditID || "";
+                const isExpanded = expandedEvents.has(auditId);
+                const tenant = extractTenantFromAnnotations(event);
+                return (jsxs(Card, { className: `p-5 mb-3 cursor-pointer transition-all hover:border-primary/50 hover:shadow-sm hover:-translate-y-px ${selectedEvent?.auditID === auditId
+                        ? "border-primary bg-primary/5 shadow-md"
+                        : ""}`, onClick: () => handleEventClick(event), children: [jsxs("div", { className: "flex justify-between items-center", children: [jsxs("div", { className: "flex gap-3 items-center flex-1", children: [jsx(Badge, { variant: getVerbBadgeVariant(event.verb), className: "px-3 py-1", children: event.verb?.toUpperCase() || "UNKNOWN" }), jsx("span", { className: "font-semibold", children: event.objectRef?.resource || "N/A" }), event.objectRef?.namespace && (jsxs("span", { className: "text-muted-foreground text-sm", children: ["ns: ", event.objectRef.namespace] })), event.objectRef?.name && (jsx("span", { className: "text-foreground/80 text-sm", children: event.objectRef.name })), tenant && (jsx(TenantBadge, { tenant: tenant, tenantLinkResolver: tenantLinkResolver, size: "compact" }))] }), jsxs("div", { className: "flex gap-4 items-center", children: [jsx("span", { className: "text-foreground/80 text-sm", children: event.user?.username || "N/A" }), jsx("span", { className: "text-muted-foreground text-sm font-mono", children: formatTimestamp(event.stageTimestamp) }), jsx(Button, { type: "quaternary", theme: "borderless", size: "small", onClick: (e) => {
+                                                e.stopPropagation();
+                                                toggleEventExpansion(auditId);
+                                            }, className: "text-primary", children: isExpanded ? "▼" : "▶" })] })] }), isExpanded && (jsxs("div", { className: "mt-4 pt-4 border-t border-border", children: [jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Event Information" }), jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "Audit ID:" }), jsx("dd", { className: "m-0 text-foreground", children: event.auditID || "N/A" }), jsx("dt", { className: "font-semibold text-foreground/80", children: "Stage:" }), jsx("dd", { className: "m-0 text-foreground", children: event.stage || "N/A" }), jsx("dt", { className: "font-semibold text-foreground/80", children: "Level:" }), jsx("dd", { className: "m-0 text-foreground", children: event.level || "N/A" }), jsx("dt", { className: "font-semibold text-foreground/80", children: "Request URI:" }), jsx("dd", { className: "m-0 text-foreground font-mono text-sm break-all", children: event.requestURI || "N/A" }), event.userAgent && (jsxs(Fragment, { children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "User Agent:" }), jsx("dd", { className: "m-0 text-foreground font-mono text-sm break-all", children: event.userAgent })] })), event.sourceIPs && event.sourceIPs.length > 0 && (jsxs(Fragment, { children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "Source IPs:" }), jsx("dd", { className: "m-0 text-foreground", children: event.sourceIPs.join(", ") })] }))] })] }), tenant && (jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Tenant" }), jsx(TenantBadge, { tenant: tenant, tenantLinkResolver: tenantLinkResolver })] })), event.user && (jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "User Information" }), jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "Username:" }), jsx("dd", { className: "m-0 text-foreground", children: event.user.username || "N/A" }), jsx("dt", { className: "font-semibold text-foreground/80", children: "UID:" }), jsx("dd", { className: "m-0 text-foreground", children: event.user.uid || "N/A" }), event.user.groups && event.user.groups.length > 0 && (jsxs(Fragment, { children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "Groups:" }), jsx("dd", { className: "m-0 text-foreground", children: event.user.groups.join(", ") })] }))] })] })), event.responseStatus && (jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Response Status" }), jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "Code:" }), jsx("dd", { className: "m-0 text-foreground", children: event.responseStatus.code || "N/A" }), jsx("dt", { className: "font-semibold text-foreground/80", children: "Status:" }), jsx("dd", { className: "m-0 text-foreground", children: event.responseStatus.status || "N/A" }), event.responseStatus.message && (jsxs(Fragment, { children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "Message:" }), jsx("dd", { className: "m-0 text-foreground", children: event.responseStatus.message })] }))] })] })), event.annotations &&
+                                    Object.keys(event.annotations).length > 0 && (jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Annotations" }), jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: Object.entries(event.annotations).map(([key, value]) => (jsxs("div", { className: "contents", children: [jsxs("dt", { className: "font-semibold text-foreground/80", children: [key, ":"] }), jsx("dd", { className: "m-0 text-foreground", children: value })] }, key))) })] })), event.requestObject || event.responseObject ? (jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Request/Response Data" }), event.requestObject ? (jsxs("details", { className: "mt-2", children: [jsx("summary", { className: "cursor-pointer font-semibold p-2 bg-muted rounded", children: "Request Object" }), jsx("pre", { className: "mt-2 p-4 bg-muted rounded overflow-x-auto text-sm", children: JSON.stringify(event.requestObject, null, 2) })] })) : null, event.responseObject ? (jsxs("details", { className: "mt-2", children: [jsx("summary", { className: "cursor-pointer font-semibold p-2 bg-muted rounded", children: "Response Object" }), jsx("pre", { className: "mt-2 p-4 bg-muted rounded overflow-x-auto text-sm", children: JSON.stringify(event.responseObject, null, 2) })] })) : null] })) : null] }))] }, auditId));
+            }) }) }));
 }
 
 /**
- * Get icon for tenant type
+ * @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 mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+
+/**
+ * @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 toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+
+/**
+ * @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 toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+
+/**
+ * @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 toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+
+/**
+ * @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.
+ */
+
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+/**
+ * @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 hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+  return false;
+};
+
+/**
+ * @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 Icon = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+
+/**
+ * @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 createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+/**
+ * @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$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.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$n = [
+  ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
+  [
+    "path",
+    {
+      d: "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326",
+      key: "11g9vi"
+    }
+  ]
+];
+const Bell = createLucideIcon("bell", __iconNode$n);
+
+/**
+ * @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$m = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$m);
+
+/**
+ * @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$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
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+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
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+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
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+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$i);
+
+/**
+ * @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$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$h);
+
+/**
+ * @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$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$g);
+
+/**
+ * @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$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$f);
+
+/**
+ * @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$e = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 6v6l4 2", key: "mmk7yg" }]
+];
+const Clock = createLucideIcon("clock", __iconNode$e);
+
+/**
+ * @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.
  */
-function getTenantIcon(type) {
-    switch (type) {
-        case "organization":
-            return (jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" }) }));
-        case "project":
-            return (jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" }) }));
-        case "user":
-            return (jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }));
-        case "platform":
-            return (jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
-        default:
-            return null;
-    }
-}
+
+
+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$d);
+
 /**
- * Get badge variant based on tenant type
+ * @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.
  */
-function getTenantBadgeVariant(type) {
-    switch (type) {
-        case "organization":
-            return "default";
-        case "project":
-            return "secondary";
-        case "user":
-            return "default";
-        case "platform":
-            return "default";
-        default:
-            return "secondary";
+
+
+const __iconNode$c = [
+  [
+    "path",
+    {
+      d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
+      key: "1nclc0"
     }
-}
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+];
+const Eye = createLucideIcon("eye", __iconNode$c);
+
 /**
- * TenantBadge displays tenant information in a compact badge format
- * Renders as a clickable link if tenantLinkResolver is provided and returns a URL
+ * @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.
  */
-function TenantBadge({ tenant, tenantLinkResolver, className = "", size = "default", }) {
-    const icon = getTenantIcon(tenant.type);
-    const variant = getTenantBadgeVariant(tenant.type);
-    const url = tenantLinkResolver?.(tenant);
-    const badgeContent = (jsxs(Badge, { variant: variant, className: cn("inline-flex items-center gap-1 whitespace-nowrap", size === "compact" ? "text-xs h-4 py-0 px-1.5" : "text-xs h-5 px-2", url && "cursor-pointer hover:opacity-80 transition-opacity", className), children: [icon, jsx("span", { className: "font-medium capitalize", children: tenant.type }), tenant.type !== "platform" && (jsxs(Fragment, { children: [jsx("span", { className: "text-muted-foreground", children: "/" }), jsx("span", { children: tenant.name })] }))] }));
-    if (url) {
-        return (jsx("a", { href: url, className: "no-underline", onClick: (e) => e.stopPropagation(), title: `View ${tenant.type}: ${tenant.name}`, children: badgeContent }));
+
+
+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
+ *
+ * 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.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"
     }
-    return badgeContent;
-}
+  ],
+  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
+];
+const Pencil = createLucideIcon("pencil", __iconNode$a);
 
 /**
- * Extract tenant information from audit event annotations if present
- * Expected annotations: tenant.type and tenant.name
+ * @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.
  */
-function extractTenantFromAnnotations(event) {
-    const annotations = event.annotations;
-    if (!annotations)
-        return undefined;
-    const tenantType = annotations["tenant.type"];
-    const tenantName = annotations["tenant.name"];
-    if (tenantType && tenantName) {
-        const validTypes = [
-            "platform",
-            "organization",
-            "project",
-            "user",
-        ];
-        if (validTypes.includes(tenantType)) {
-            return {
-                type: tenantType,
-                name: tenantName,
-            };
-        }
+
+
+const __iconNode$9 = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+];
+const Plus = createLucideIcon("plus", __iconNode$9);
+
+/**
+ * @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$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$8);
+
+/**
+ * @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$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$7);
+
+/**
+ * @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$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$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
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$4 = [
+  ["path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7", key: "1m0v6g" }],
+  [
+    "path",
+    {
+      d: "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z",
+      key: "ohrbg2"
     }
-    return undefined;
-}
+  ]
+];
+const SquarePen = createLucideIcon("square-pen", __iconNode$4);
+
 /**
- * AuditEventViewer displays a list of audit events with details
+ * @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.
  */
-function AuditEventViewer({ events, className = "", onEventSelect, tenantLinkResolver, }) {
-    const [selectedEvent, setSelectedEvent] = useState(null);
-    const [expandedEvents, setExpandedEvents] = useState(new Set());
-    const toggleEventExpansion = (auditId) => {
-        const newExpanded = new Set(expandedEvents);
-        if (expandedEvents.has(auditId)) {
-            newExpanded.delete(auditId);
-        }
-        else {
-            newExpanded.add(auditId);
-        }
-        setExpandedEvents(newExpanded);
-    };
-    const handleEventClick = (event) => {
-        setSelectedEvent(event);
-        if (onEventSelect) {
-            onEventSelect(event);
-        }
-    };
-    const formatTimestamp = (timestamp) => {
-        if (!timestamp)
-            return "N/A";
-        try {
-            return format(new Date(timestamp), "yyyy-MM-dd HH:mm:ss");
-        }
-        catch {
-            return timestamp;
-        }
-    };
-    const getVerbBadgeVariant = (verb) => {
-        switch (verb?.toLowerCase()) {
-            case "create":
-                return "success";
-            case "update":
-            case "patch":
-                return "warning";
-            case "delete":
-                return "destructive";
-            case "get":
-            case "list":
-            case "watch":
-                return "default";
-            default:
-                return "secondary";
-        }
-    };
-    if (events.length === 0) {
-        return (jsx("div", { className: `bg-muted rounded-lg border border-border ${className}`, children: jsx("div", { className: "p-12 text-center text-muted-foreground text-sm", children: "No events found" }) }));
+
+
+const __iconNode$3 = [
+  ["path", { d: "M10 11v6", key: "nco0om" }],
+  ["path", { d: "M14 11v6", key: "outv1u" }],
+  ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
+];
+const Trash2 = createLucideIcon("trash-2", __iconNode$3);
+
+/**
+ * @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$2 = [
+  [
+    "path",
+    {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+      key: "wmoenq"
     }
-    return (jsx("div", { className: `bg-muted rounded-lg border border-border ${className}`, children: jsx("div", { className: "p-4", children: events.map((event) => {
-                const auditId = event.auditID || "";
-                const isExpanded = expandedEvents.has(auditId);
-                const tenant = extractTenantFromAnnotations(event);
-                return (jsxs(Card, { className: `p-5 mb-3 cursor-pointer transition-all hover:border-primary/50 hover:shadow-sm hover:-translate-y-px ${selectedEvent?.auditID === auditId
-                        ? "border-primary bg-primary/5 shadow-md"
-                        : ""}`, onClick: () => handleEventClick(event), children: [jsxs("div", { className: "flex justify-between items-center", children: [jsxs("div", { className: "flex gap-3 items-center flex-1", children: [jsx(Badge, { variant: getVerbBadgeVariant(event.verb), className: "px-3 py-1", children: event.verb?.toUpperCase() || "UNKNOWN" }), jsx("span", { className: "font-semibold", children: event.objectRef?.resource || "N/A" }), event.objectRef?.namespace && (jsxs("span", { className: "text-muted-foreground text-sm", children: ["ns: ", event.objectRef.namespace] })), event.objectRef?.name && (jsx("span", { className: "text-foreground/80 text-sm", children: event.objectRef.name })), tenant && (jsx(TenantBadge, { tenant: tenant, tenantLinkResolver: tenantLinkResolver, size: "compact" }))] }), jsxs("div", { className: "flex gap-4 items-center", children: [jsx("span", { className: "text-foreground/80 text-sm", children: event.user?.username || "N/A" }), jsx("span", { className: "text-muted-foreground text-sm font-mono", children: formatTimestamp(event.stageTimestamp) }), jsx(Button, { type: "quaternary", theme: "borderless", size: "small", onClick: (e) => {
-                                                e.stopPropagation();
-                                                toggleEventExpansion(auditId);
-                                            }, className: "text-primary", children: isExpanded ? "▼" : "▶" })] })] }), isExpanded && (jsxs("div", { className: "mt-4 pt-4 border-t border-border", children: [jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Event Information" }), jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "Audit ID:" }), jsx("dd", { className: "m-0 text-foreground", children: event.auditID || "N/A" }), jsx("dt", { className: "font-semibold text-foreground/80", children: "Stage:" }), jsx("dd", { className: "m-0 text-foreground", children: event.stage || "N/A" }), jsx("dt", { className: "font-semibold text-foreground/80", children: "Level:" }), jsx("dd", { className: "m-0 text-foreground", children: event.level || "N/A" }), jsx("dt", { className: "font-semibold text-foreground/80", children: "Request URI:" }), jsx("dd", { className: "m-0 text-foreground font-mono text-sm break-all", children: event.requestURI || "N/A" }), event.userAgent && (jsxs(Fragment, { children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "User Agent:" }), jsx("dd", { className: "m-0 text-foreground font-mono text-sm break-all", children: event.userAgent })] })), event.sourceIPs && event.sourceIPs.length > 0 && (jsxs(Fragment, { children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "Source IPs:" }), jsx("dd", { className: "m-0 text-foreground", children: event.sourceIPs.join(", ") })] }))] })] }), tenant && (jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Tenant" }), jsx(TenantBadge, { tenant: tenant, tenantLinkResolver: tenantLinkResolver })] })), event.user && (jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "User Information" }), jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "Username:" }), jsx("dd", { className: "m-0 text-foreground", children: event.user.username || "N/A" }), jsx("dt", { className: "font-semibold text-foreground/80", children: "UID:" }), jsx("dd", { className: "m-0 text-foreground", children: event.user.uid || "N/A" }), event.user.groups && event.user.groups.length > 0 && (jsxs(Fragment, { children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "Groups:" }), jsx("dd", { className: "m-0 text-foreground", children: event.user.groups.join(", ") })] }))] })] })), event.responseStatus && (jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Response Status" }), jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "Code:" }), jsx("dd", { className: "m-0 text-foreground", children: event.responseStatus.code || "N/A" }), jsx("dt", { className: "font-semibold text-foreground/80", children: "Status:" }), jsx("dd", { className: "m-0 text-foreground", children: event.responseStatus.status || "N/A" }), event.responseStatus.message && (jsxs(Fragment, { children: [jsx("dt", { className: "font-semibold text-foreground/80", children: "Message:" }), jsx("dd", { className: "m-0 text-foreground", children: event.responseStatus.message })] }))] })] })), event.annotations &&
-                                    Object.keys(event.annotations).length > 0 && (jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Annotations" }), jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: Object.entries(event.annotations).map(([key, value]) => (jsxs("div", { className: "contents", children: [jsxs("dt", { className: "font-semibold text-foreground/80", children: [key, ":"] }), jsx("dd", { className: "m-0 text-foreground", children: value })] }, key))) })] })), event.requestObject || event.responseObject ? (jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Request/Response Data" }), event.requestObject ? (jsxs("details", { className: "mt-2", children: [jsx("summary", { className: "cursor-pointer font-semibold p-2 bg-muted rounded", children: "Request Object" }), jsx("pre", { className: "mt-2 p-4 bg-muted rounded overflow-x-auto text-sm", children: JSON.stringify(event.requestObject, null, 2) })] })) : null, event.responseObject ? (jsxs("details", { className: "mt-2", children: [jsx("summary", { className: "cursor-pointer font-semibold p-2 bg-muted rounded", children: "Response Object" }), jsx("pre", { className: "mt-2 p-4 bg-muted rounded overflow-x-auto text-sm", children: JSON.stringify(event.responseObject, null, 2) })] })) : null] })) : null] }))] }, auditId));
-            }) }) }));
-}
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+];
+const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$2);
+
+/**
+ * @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$1 = [
+  ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", key: "975kel" }],
+  ["circle", { cx: "12", cy: "7", r: "4", key: "17ys0d" }]
+];
+const User = createLucideIcon("user", __iconNode$1);
+
+/**
+ * @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 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
 
 /**
  * FilterChip - A compact pill/chip showing "Label: Values" with clear button
@@ -8343,7 +8494,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 (jsxs("div", { className: cn('inline-flex items-center', className), children: [jsxs(Popover.Root, { open: open, onOpenChange: handleOpenChange, children: [jsx(Popover.Trigger, { asChild: true, children: 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: [jsxs("span", { className: "font-medium text-foreground", children: [label, ":"] }), jsx("span", { className: "text-foreground truncate max-w-[120px]", children: displayValue }), jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground ml-1" })] }) }), jsx(Popover.Portal, { children: jsx(Popover.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' ? (jsxs(Command, { filter: filterOptions, className: "w-full", children: [jsx("div", { className: "flex items-center border-b px-3", children: jsx(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 && (jsx("div", { className: "flex flex-wrap gap-1 p-2 border-b", children: selectedOptions.map((option) => (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, jsx("button", { type: "button", onClick: (e) => handleRemoveValue(e, option.value), className: "rounded-sm hover:bg-accent-foreground/20", children: jsx(X, { className: "h-3 w-3" }) })] }, option.value))) })), jsxs(CommandList, { className: "max-h-[300px] overflow-y-auto p-1", children: [jsx(CommandEmpty, { className: "py-6 text-center text-sm text-muted-foreground", children: "No results found." }), jsx(CommandGroup, { children: options.map((option) => (jsxs(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: [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) && (jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: "h-full w-full p-0.5 text-primary-foreground", children: jsx("path", { d: "M2 6l3 3 5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), jsx("span", { className: "flex-1 truncate", children: option.label }), option.count !== undefined && (jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value))) })] })] })) : (jsx("div", { className: "p-3", children: jsx(Input, { type: "text", value: textValue, onChange: handleTextChange, placeholder: placeholder, className: "w-full", autoFocus: true }) })) }) })] }), 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: jsx(X, { className: "h-3 w-3 text-muted-foreground" }) })] }));
+    return (jsxs(ButtonGroup, { "aria-label": `${label} filter`, className: className, children: [jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { htmlType: "button", type: "quaternary", theme: "outline", size: "small", disabled: disabled, className: "gap-2 font-normal data-[state=open]:bg-btn-neutral-bg", children: [jsxs("span", { className: "font-medium", children: [label, ":"] }), jsx("span", { className: "truncate max-w-[120px]", children: displayValue }), jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground" })] }) }), jsx(PopoverContent, { className: "w-auto min-w-[var(--radix-popover-trigger-width)] max-w-[320px] p-0", sideOffset: 4, align: "start", children: inputMode === 'typeahead' ? (jsxs(Command, { filter: filterOptions, children: [jsx(CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: setSearch }), values.length > 0 && (jsx("div", { className: "flex flex-wrap gap-1 p-2 border-b", children: selectedOptions.map((option) => (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, jsx("button", { type: "button", onClick: (e) => handleRemoveValue(e, option.value), className: "rounded-sm hover:bg-accent-foreground/20", children: jsx(X, { className: "h-3 w-3" }) })] }, option.value))) })), jsxs(CommandList, { children: [jsx(CommandEmpty, { children: "No results found." }), jsx(CommandGroup, { children: options.map((option) => (jsxs(CommandItem, { value: option.value, onSelect: () => handleSelect(option.value), children: [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) && (jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: "h-full w-full p-0.5 text-primary-foreground", children: jsx("path", { d: "M2 6l3 3 5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), jsx("span", { className: "flex-1 truncate", children: option.label }), option.count !== undefined && (jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value))) })] })] })) : (jsx("div", { className: "p-3", children: jsx(Input, { type: "text", value: textValue, onChange: handleTextChange, placeholder: placeholder, className: "w-full", autoFocus: true }) })) })] }), jsx(Button, { htmlType: "button", type: "quaternary", theme: "outline", size: "small", onClick: handleClearAll, disabled: disabled, "aria-label": `Clear ${label} filter`, children: jsx(X, { className: "h-3 w-3 text-muted-foreground" }) })] }));
 }
 
 /**
@@ -8360,12 +8511,12 @@ function AddFilterDropdown({ availableFilters, activeFilterIds, onAddFilter, has
     const isFilterActive = (filterId) => activeFilterIds.includes(filterId);
     // Get button label
     const buttonLabel = hasActiveFilters ? 'Filters' : 'Add Filters';
-    return (jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [jsx(Popover.Trigger, { asChild: true, children: jsxs("button", { type: "button", disabled: disabled, className: cn('flex h-7 items-center gap-2 rounded-md border border-dashed 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', className), children: [jsx(Plus, { className: "h-4 w-4" }), jsx("span", { className: "font-medium", children: buttonLabel })] }) }), jsx(Popover.Portal, { children: jsx(Popover.Content, { className: cn('z-50 min-w-[180px] overflow-hidden rounded-md border shadow-md', 'bg-white dark:bg-slate-900 text-foreground', '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: jsx("div", { className: "p-1", children: availableFilters.map((filter) => {
-                            const active = isFilterActive(filter.id);
-                            return (jsxs("button", { type: "button", onClick: () => !active && handleFilterClick(filter.id), disabled: active, className: cn('relative flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm outline-none transition-colors', active
-                                    ? 'cursor-not-allowed opacity-40'
-                                    : 'cursor-pointer hover:bg-accent hover:text-accent-foreground'), children: [filter.icon && jsx("span", { className: "text-muted-foreground", children: filter.icon }), jsx("span", { children: filter.label }), active && (jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "(active)" }))] }, filter.id));
-                        }) }) }) })] }));
+    return (jsxs(Popover, { open: open, onOpenChange: setOpen, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { htmlType: "button", type: "quaternary", theme: "outline", size: "small", disabled: disabled, className: cn('gap-1.5 border-dashed text-muted-foreground hover:text-foreground', className), children: [jsx(Plus, { className: "h-4 w-4" }), jsx("span", { className: "font-medium", children: buttonLabel })] }) }), jsx(PopoverContent, { className: "w-auto min-w-[180px] p-0", sideOffset: 4, align: "start", children: jsx("div", { className: "p-1", children: availableFilters.map((filter) => {
+                        const active = isFilterActive(filter.id);
+                        return (jsxs("button", { type: "button", onClick: () => !active && handleFilterClick(filter.id), disabled: active, className: cn('relative flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm outline-none transition-colors', active
+                                ? 'cursor-not-allowed opacity-40'
+                                : 'cursor-pointer hover:bg-accent hover:text-accent-foreground'), children: [filter.icon && jsx("span", { className: "text-muted-foreground", children: filter.icon }), jsx("span", { children: filter.label }), active && (jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "(active)" }))] }, filter.id));
+                    }) }) })] }));
 }
 
 /**
@@ -8389,10 +8540,10 @@ function ActionMultiSelect({ value, onChange, className = '', disabled = false,
             return '1 action';
         return `${value.length} actions`;
     }, [value.length]);
-    return (jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [jsx(Popover.Trigger, { asChild: true, children: jsxs("button", { type: "button", disabled: disabled || isLoading, className: cn('flex h-7 items-center justify-between gap-2 rounded-md border border-input bg-background px-2 text-xs min-w-[100px]', 'hover:bg-accent hover:text-accent-foreground transition-colors', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', className), children: [jsx("span", { className: "font-medium", children: displayText }), jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground shrink-0" })] }) }), jsx(Popover.Portal, { children: jsx(Popover.Content, { className: cn('z-50 min-w-[160px] 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: jsx("div", { className: "p-1", children: isLoading ? (jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Loading..." })) : options.length === 0 ? (jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "No actions found" })) : (options.map((option) => {
-                            const checked = value.includes(option.value);
-                            return (jsxs("label", { className: cn('flex items-center gap-2 rounded-sm px-3 py-2 text-sm cursor-pointer', 'hover:bg-accent hover:text-accent-foreground transition-colors'), children: [jsx(Checkbox, { checked: checked, onCheckedChange: () => handleToggle(option.value), className: "h-4 w-4" }), jsx("span", { className: "flex-1", children: option.label }), option.count !== undefined && (jsxs("span", { className: "text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value));
-                        })) }) }) })] }));
+    return (jsxs(Popover, { open: open, onOpenChange: setOpen, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { htmlType: "button", type: "quaternary", theme: "outline", size: "small", disabled: disabled || isLoading, className: cn('min-w-[100px] justify-between gap-2', className), children: [jsx("span", { className: "font-medium", children: displayText }), jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground shrink-0" })] }) }), jsx(PopoverContent, { className: "w-auto min-w-[160px] p-0", sideOffset: 4, align: "start", children: jsx("div", { className: "p-1", children: isLoading ? (jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Loading..." })) : options.length === 0 ? (jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "No actions found" })) : (options.map((option) => {
+                        const checked = value.includes(option.value);
+                        return (jsxs("label", { className: cn('flex items-center gap-2 rounded-sm px-3 py-2 text-sm cursor-pointer', 'hover:bg-accent hover:text-accent-foreground transition-colors'), children: [jsx(Checkbox, { checked: checked, onCheckedChange: () => handleToggle(option.value), className: "h-4 w-4" }), jsx("span", { className: "flex-1", children: option.label }), option.count !== undefined && (jsxs("span", { className: "text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value));
+                    })) }) })] }));
 }
 
 /**
@@ -8424,7 +8575,7 @@ function UserSelect({ value, options, onChange, className = '', disabled = false
         e.stopPropagation();
         onChange(undefined);
     }, [onChange]);
-    return (jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [jsx(Popover.Trigger, { asChild: true, children: jsxs(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", disabled: disabled, className: cn('h-7 text-xs font-medium gap-1.5 px-2', value && 'pr-1', className), children: [jsx(User, { className: "h-3.5 w-3.5" }), jsx("span", { children: displayLabel }), value && (jsx("button", { onClick: handleClear, className: "ml-1 rounded-sm opacity-70 hover:opacity-100 hover:bg-muted p-0.5", "aria-label": "Clear user filter", children: jsx(X, { className: "h-3 w-3" }) }))] }) }), jsx(Popover.Portal, { children: jsxs(Popover.Content, { className: "z-50 w-64 rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none 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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", align: "start", sideOffset: 4, children: [jsx("div", { className: "border-b p-2", children: jsx("input", { type: "text", placeholder: "Search users...", value: search, onChange: (e) => setSearch(e.target.value), className: "w-full rounded-md border border-input bg-background px-2 py-1.5 text-xs placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0", autoFocus: true }) }), jsxs("div", { className: "max-h-64 overflow-y-auto p-1", children: [jsxs("button", { onClick: () => handleSelect(undefined), className: cn('w-full flex items-center justify-between rounded-sm px-2 py-1.5 text-xs cursor-pointer hover:bg-accent hover:text-accent-foreground', !value && 'bg-accent text-accent-foreground'), children: [jsx("span", { className: "font-medium", children: "All Users" }), options.length > 0 && (jsx("span", { className: "text-muted-foreground", children: options.reduce((sum, opt) => sum + (opt.count || 0), 0) }))] }), isLoading && (jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "Loading users..." })), !isLoading && filteredOptions.length > 0 && (jsx("div", { className: "mt-1 border-t pt-1", children: filteredOptions.map((option) => (jsxs("button", { onClick: () => handleSelect(option.value), className: cn('w-full flex items-center justify-between rounded-sm px-2 py-1.5 text-xs cursor-pointer hover:bg-accent hover:text-accent-foreground', value === option.value && 'bg-accent text-accent-foreground'), children: [jsx("span", { className: "truncate font-medium", children: option.label }), option.count !== undefined && (jsx("span", { className: "text-muted-foreground ml-2 flex-shrink-0", children: option.count }))] }, option.value))) })), !isLoading && filteredOptions.length === 0 && search && (jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "No users found" })), !isLoading && options.length === 0 && !search && (jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "No users available" }))] })] }) })] }));
+    return (jsxs(Popover, { open: open, onOpenChange: setOpen, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", disabled: disabled, className: cn('gap-1.5', value && 'pr-1.5', className), children: [jsx(User, { className: "h-3.5 w-3.5" }), jsx("span", { children: displayLabel }), value && (jsx("button", { onClick: handleClear, className: "ml-1 rounded-sm opacity-70 hover:opacity-100 hover:bg-muted p-0.5", "aria-label": "Clear user filter", children: jsx(X, { className: "h-3 w-3" }) }))] }) }), jsxs(PopoverContent, { className: "w-64 p-0", align: "start", sideOffset: 4, children: [jsx("div", { className: "border-b p-2", children: jsx("input", { type: "text", placeholder: "Search users...", value: search, onChange: (e) => setSearch(e.target.value), className: "w-full rounded-md border border-input bg-background px-2 py-1.5 text-xs placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0", autoFocus: true }) }), jsxs("div", { className: "max-h-64 overflow-y-auto p-1", children: [jsxs("button", { onClick: () => handleSelect(undefined), className: cn('w-full flex items-center justify-between rounded-sm px-2 py-1.5 text-xs cursor-pointer hover:bg-accent hover:text-accent-foreground', !value && 'bg-accent text-accent-foreground'), children: [jsx("span", { className: "font-medium", children: "All Users" }), options.length > 0 && (jsx("span", { className: "text-muted-foreground", children: options.reduce((sum, opt) => sum + (opt.count || 0), 0) }))] }), isLoading && (jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "Loading users..." })), !isLoading && filteredOptions.length > 0 && (jsx("div", { className: "mt-1 border-t pt-1", children: filteredOptions.map((option) => (jsxs("button", { onClick: () => handleSelect(option.value), className: cn('w-full flex items-center justify-between rounded-sm px-2 py-1.5 text-xs cursor-pointer hover:bg-accent hover:text-accent-foreground', value === option.value && 'bg-accent text-accent-foreground'), children: [jsx("span", { className: "truncate font-medium", children: option.label }), option.count !== undefined && (jsx("span", { className: "text-muted-foreground ml-2 flex-shrink-0", children: option.count }))] }, option.value))) })), !isLoading && filteredOptions.length === 0 && search && (jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "No users found" })), !isLoading && options.length === 0 && !search && (jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "No users available" }))] })] })] }));
 }
 
 /**
@@ -8771,7 +8922,7 @@ function AuditLogFilters({ client, filters, timeRange, onFiltersChange, onTimeRa
         label: facet.value,
         count: facet.count,
     }));
-    return (jsx("div", { className: `border-b border-border py-4 pt-0 ${className}`, children: jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [jsx(ActionMultiSelect, { value: getActionValues(), onChange: handleActionChange, options: actionOptions, disabled: disabled, isLoading: !verbs.length && !facetsError, className: "h-7 text-xs min-w-[180px]" }), jsx(UserSelect, { value: getCurrentUser(), options: userOptions, onChange: handleUserChange, disabled: disabled, isLoading: !usernames.length && !facetsError }), activeFilterIds.map((filterId) => {
+    return (jsx("div", { className: `border-b border-border py-4 pt-0 ${className}`, children: jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [jsx(ActionMultiSelect, { value: getActionValues(), onChange: handleActionChange, options: actionOptions, disabled: disabled, isLoading: !verbs.length && !facetsError, className: "min-w-[180px]" }), jsx(UserSelect, { value: getCurrentUser(), options: userOptions, onChange: handleUserChange, disabled: disabled, isLoading: !usernames.length && !facetsError }), activeFilterIds.map((filterId) => {
                     const config = FILTER_CONFIGS$2[filterId];
                     return (jsx(FilterChip, { label: config.label, values: getFilterValues(filterId), options: config.inputMode === "typeahead"
                             ? getFilterOptions(filterId)
@@ -8907,7 +9058,7 @@ function CopyButton({ value, label }) {
             console.error('Failed to copy:', err);
         }
     };
-    return (jsxs(Tooltip, { delayDuration: 400, children: [jsx(TooltipTrigger, { asChild: true, children: jsx("button", { type: "button", onClick: handleCopy, className: "inline-flex items-center justify-center p-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-opacity cursor-pointer ml-1 opacity-0 group-hover:opacity-100", "aria-label": `Copy ${label}`, children: isCopied ? (jsx(Check, { className: "h-3 w-3 text-green-600 dark:text-green-400" })) : (jsx(Copy, { className: "h-3 w-3 text-gray-500 dark:text-gray-400" })) }) }), jsx(TooltipContent, { side: "top", children: jsx("p", { className: "text-xs", children: isCopied ? 'Copied!' : `Copy ${label}` }) })] }));
+    return (jsxs(Tooltip, { delayDuration: 400, children: [jsx(TooltipTrigger, { asChild: true, children: jsx("button", { type: "button", onClick: handleCopy, className: "inline-flex items-center justify-center p-0.5 rounded hover:bg-muted transition-opacity cursor-pointer ml-1 opacity-0 group-hover:opacity-100", "aria-label": `Copy ${label}`, children: isCopied ? (jsx(Check, { className: "h-3 w-3 text-[var(--success-500)]" })) : (jsx(Copy, { className: "h-3 w-3 text-muted-foreground" })) }) }), jsx(TooltipContent, { side: "top", children: jsx("p", { className: "text-xs", children: isCopied ? 'Copied!' : `Copy ${label}` }) })] }));
 }
 /**
  * A label / value row inside a Section. The value is truncated to one
@@ -8985,8 +9136,8 @@ function AuditLogExpandedDetails({ event, compact = true }) {
     const status = event.responseStatus;
     const isOk = status?.code != null && status.code >= 200 && status.code < 300;
     const body = (jsxs(Fragment, { children: [jsxs(DetailGrid, { children: [jsxs(Section, { title: "Request", children: [jsx(Field, { label: "Verb", value: event.verb || 'Unknown', copyValue: event.verb || undefined, copyLabel: "verb" }), event.requestURI ? (jsx(Field, { label: "URI", value: event.requestURI, copyValue: event.requestURI, mono: true })) : null] }), status ? (jsxs(Section, { title: "Response", children: [status.code != null ? (jsx(Field, { label: "Status code", value: jsxs("span", { className: isOk
-                                        ? 'text-green-600 dark:text-green-400'
-                                        : 'text-red-600 dark:text-red-400', children: [isOk ? '✓ ' : '✗ ', status.code] }), copyValue: String(status.code), copyLabel: "status code" })) : null, status.status ? jsx(Field, { label: "Status", value: status.status }) : null, status.reason ? jsx(Field, { label: "Reason", value: status.reason }) : null, status.message ? (jsx(Field, { label: "Message", value: status.message, copyValue: status.message })) : null] })) : null, jsx(Section, { title: "When", children: jsx(Field, { label: "Timestamp", value: jsx(Timestamp, { value: timestamp, variant: "iso-utc" }), copyValue: timestamp || '', copyLabel: "timestamp", disableTooltip: true }) }), event.user ? (jsxs(Section, { title: "User", children: [event.user.username ? (jsx(Field, { label: "Username", value: event.user.username, copyValue: event.user.username })) : null, event.user.uid ? (jsx(Field, { label: "UID", value: event.user.uid, copyValue: event.user.uid, mono: true })) : null, event.user.groups && event.user.groups.length > 0 ? (jsx(Field, { label: "Groups", value: event.user.groups.join(', ') })) : null] })) : null, event.objectRef ? (jsxs(Section, { title: "Resource", children: [jsx(Field, { label: "Kind", value: jsxs("span", { children: [event.objectRef.resource || 'Unknown', event.objectRef.apiGroup ? (jsxs("span", { className: "ml-1 text-muted-foreground", children: ["\u00B7 ", event.objectRef.apiGroup] })) : null] }), copyValue: event.objectRef.resource, copyLabel: "resource kind" }), event.objectRef.name ? (jsx(Field, { label: "Name", value: event.objectRef.name, copyValue: event.objectRef.name, copyLabel: "resource name" })) : null, event.objectRef.namespace ? (jsx(Field, { label: "Namespace", value: event.objectRef.namespace, copyValue: event.objectRef.namespace })) : null, event.objectRef.apiVersion ? (jsx(Field, { label: "API version", value: event.objectRef.apiVersion })) : null, event.objectRef.subresource ? (jsx(Field, { label: "Subresource", value: event.objectRef.subresource })) : null, event.objectRef.uid ? (jsx(Field, { label: "UID", value: event.objectRef.uid, copyValue: event.objectRef.uid, mono: true })) : null] })) : null, event.userAgent || (event.sourceIPs && event.sourceIPs.length > 0) ? (jsxs(Section, { title: "Source", children: [event.sourceIPs && event.sourceIPs.length > 0 ? (jsx(Field, { label: "Source IPs", value: event.sourceIPs.join(', ') })) : null, event.userAgent ? (jsx(Field, { label: "User agent", value: event.userAgent, copyValue: event.userAgent, mono: true })) : null] })) : null] }), event.auditID || event.stage || event.level ||
+                                        ? 'text-[var(--success-500)]'
+                                        : 'text-destructive', children: [isOk ? '✓ ' : '✗ ', status.code] }), copyValue: String(status.code), copyLabel: "status code" })) : null, status.status ? jsx(Field, { label: "Status", value: status.status }) : null, status.reason ? jsx(Field, { label: "Reason", value: status.reason }) : null, status.message ? (jsx(Field, { label: "Message", value: status.message, copyValue: status.message })) : null] })) : null, jsx(Section, { title: "When", children: jsx(Field, { label: "Timestamp", value: jsx(Timestamp, { value: timestamp, variant: "iso-utc" }), copyValue: timestamp || '', copyLabel: "timestamp", disableTooltip: true }) }), event.user ? (jsxs(Section, { title: "User", children: [event.user.username ? (jsx(Field, { label: "Username", value: event.user.username, copyValue: event.user.username })) : null, event.user.uid ? (jsx(Field, { label: "UID", value: event.user.uid, copyValue: event.user.uid, mono: true })) : null, event.user.groups && event.user.groups.length > 0 ? (jsx(Field, { label: "Groups", value: event.user.groups.join(', ') })) : null] })) : null, event.objectRef ? (jsxs(Section, { title: "Resource", children: [jsx(Field, { label: "Kind", value: jsxs("span", { children: [event.objectRef.resource || 'Unknown', event.objectRef.apiGroup ? (jsxs("span", { className: "ml-1 text-muted-foreground", children: ["\u00B7 ", event.objectRef.apiGroup] })) : null] }), copyValue: event.objectRef.resource, copyLabel: "resource kind" }), event.objectRef.name ? (jsx(Field, { label: "Name", value: event.objectRef.name, copyValue: event.objectRef.name, copyLabel: "resource name" })) : null, event.objectRef.namespace ? (jsx(Field, { label: "Namespace", value: event.objectRef.namespace, copyValue: event.objectRef.namespace })) : null, event.objectRef.apiVersion ? (jsx(Field, { label: "API version", value: event.objectRef.apiVersion })) : null, event.objectRef.subresource ? (jsx(Field, { label: "Subresource", value: event.objectRef.subresource })) : null, event.objectRef.uid ? (jsx(Field, { label: "UID", value: event.objectRef.uid, copyValue: event.objectRef.uid, mono: true })) : null] })) : null, event.userAgent || (event.sourceIPs && event.sourceIPs.length > 0) ? (jsxs(Section, { title: "Source", children: [event.sourceIPs && event.sourceIPs.length > 0 ? (jsx(Field, { label: "Source IPs", value: event.sourceIPs.join(', ') })) : null, event.userAgent ? (jsx(Field, { label: "User agent", value: event.userAgent, copyValue: event.userAgent, mono: true })) : null] })) : null] }), event.auditID || event.stage || event.level ||
                 (event.annotations && Object.keys(event.annotations).length > 0) ? (jsxs("details", { className: "group mt-5", children: [jsx("summary", { className: "cursor-pointer list-none", children: jsxs("h4", { className: "inline-flex items-center m-0 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/80 hover:text-foreground", children: [jsx("span", { className: "mr-1 group-open:rotate-90 transition-transform", children: "\u25B8" }), "Advanced"] }) }), jsx("div", { className: "mt-3 pl-3", children: jsxs(DetailGrid, { children: [jsxs(Section, { title: "Audit", children: [event.auditID ? (jsx(Field, { label: "Audit ID", value: event.auditID, copyValue: event.auditID, mono: true })) : null, event.stage ? jsx(Field, { label: "Stage", value: event.stage }) : null, event.level ? jsx(Field, { label: "Level", value: event.level }) : null] }), event.annotations && Object.keys(event.annotations).length > 0 ? (jsx(Section, { title: "Annotations", children: Object.entries(event.annotations).map(([key, value]) => (jsx(Field, { label: key, value: value, mono: true }, key))) })) : null] }) })] })) : null, event.requestObject || event.responseObject ? (jsxs("details", { className: "group mt-3", children: [jsx("summary", { className: "cursor-pointer list-none", children: jsxs("h4", { className: "inline-flex items-center m-0 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/80 hover:text-foreground", children: [jsx("span", { className: "mr-1 group-open:rotate-90 transition-transform", children: "\u25B8" }), "Raw objects"] }) }), jsxs("div", { className: "mt-3 space-y-3", children: [event.requestObject ? (jsxs("div", { children: [jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Request" }), jsx("pre", { className: "m-0 p-3 bg-muted rounded overflow-x-auto text-xs font-mono", children: JSON.stringify(event.requestObject, null, 2) })] })) : null, event.responseObject ? (jsxs("div", { children: [jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Response" }), jsx("pre", { className: "m-0 p-3 bg-muted rounded overflow-x-auto text-xs font-mono", children: JSON.stringify(event.responseObject, null, 2) })] })) : null] })] })) : null] }));
     return (jsx(TooltipProvider, { children: compact ? (jsx(DetailPanelShell, { children: body })) : (jsx("div", { className: "mt-4 pt-4 border-t border-border", children: body })) }));
 }
@@ -8994,22 +9145,21 @@ function AuditLogExpandedDetails({ event, compact = true }) {
 // Number of columns rendered for the audit log table. Used by the colSpan
 // on the expanded-detail row so it spans the full width.
 const AUDIT_LOG_COLUMN_COUNT = 5;
+const VERB_BADGE_CLASSES = 'text-[0.55rem] h-5 px-2 py-1 leading-3';
 /**
- * Get Tailwind classes for verb badge
+ * Get the badge variant for a verb
  */
-function getVerbBadgeClasses(verb) {
-    const baseClasses = 'text-[0.55rem] h-5 px-2 py-1 leading-3';
-    const normalized = verb?.toLowerCase();
-    switch (normalized) {
+function getVerbBadgeVariant(verb) {
+    switch (verb?.toLowerCase()) {
         case 'create':
-            return cn(baseClasses, 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300');
+            return 'success';
         case 'update':
         case 'patch':
-            return cn(baseClasses, 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300');
+            return 'warning';
         case 'delete':
-            return cn(baseClasses, 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300');
+            return 'destructive';
         default:
-            return cn(baseClasses, 'bg-muted text-muted-foreground');
+            return 'outline';
     }
 }
 /**
@@ -9020,9 +9170,9 @@ function getResponseStatusIndicator(code) {
         return { icon: '?', className: 'text-muted-foreground' };
     }
     if (code >= 200 && code < 300) {
-        return { icon: '✓', className: 'text-green-600 dark:text-green-400' };
+        return { icon: '✓', className: 'text-[var(--success-500)]' };
     }
-    return { icon: '✗', className: 'text-red-600 dark:text-red-400' };
+    return { icon: '✗', className: 'text-destructive' };
 }
 /**
  * Build human-readable summary
@@ -9063,14 +9213,14 @@ function AuditLogFeedItem({ event, onEventClick, isSelected = false, className =
             verb === 'delete' ? Trash2 :
                 verb === 'update' || verb === 'patch' ? Pencil :
                     Activity;
-        const iconBg = verb === 'create' ? 'bg-green-50 dark:bg-green-950' :
-            verb === 'delete' ? 'bg-red-50 dark:bg-red-950' :
-                verb === 'update' || verb === 'patch' ? 'bg-amber-50 dark:bg-amber-950' :
-                    'bg-slate-100 dark:bg-slate-800';
-        const iconColor = verb === 'create' ? 'text-green-600 dark:text-green-400' :
-            verb === 'delete' ? 'text-red-500 dark:text-red-400' :
-                verb === 'update' || verb === 'patch' ? 'text-amber-600 dark:text-amber-400' :
-                    'text-slate-500 dark:text-slate-400';
+        const iconBg = verb === 'create' ? 'bg-[var(--success-100)]' :
+            verb === 'delete' ? 'bg-destructive/10' :
+                verb === 'update' || verb === 'patch' ? 'bg-[color-mix(in_oklab,var(--badge-warning)_15%,transparent)]' :
+                    'bg-muted';
+        const iconColor = verb === 'create' ? 'text-[var(--success-500)]' :
+            verb === 'delete' ? 'text-destructive' :
+                verb === 'update' || verb === 'patch' ? 'text-[var(--badge-warning)]' :
+                    'text-muted-foreground';
         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', compact ? 'py-2' : 'py-3', 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), title: event.verb, children: jsx(Icon, { size: 16, strokeWidth: 2 }) }), jsx("div", { className: "flex-1 min-w-0 text-sm leading-snug", style: { minWidth: 0 }, children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("div", { className: "text-foreground", style: {
                                                 display: 'block',
                                                 overflow: 'hidden',
@@ -9079,10 +9229,10 @@ function AuditLogFeedItem({ event, onEventClick, isSelected = false, className =
                                                 cursor: 'help',
                                             }, children: summary }) }), jsx(TooltipContent, { className: "max-w-[480px] whitespace-normal break-words", children: summary })] }) }), jsxs("span", { className: cn('inline-flex items-center gap-1 text-xs font-semibold shrink-0', statusIndicator.className), children: [jsx("span", { children: statusIndicator.icon }), event.responseStatus?.code ? jsx("span", { children: event.responseStatus.code }) : null] }), 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", htmlType: "button", className: "h-5 py-0 px-1 text-base text-muted-foreground hover:text-foreground shrink-0", onClick: toggleExpand, "aria-expanded": isExpanded, "aria-label": isExpanded ? 'Collapse details' : 'Expand details', children: isExpanded ? '−' : '+' })] }), isExpanded ? jsx(AuditLogExpandedDetails, { event: event }) : null] }));
     }
-    return (jsxs(Fragment, { children: [jsxs(TableRow, { "data-state": isSelected ? 'selected' : undefined, className: cn('cursor-pointer', isNew && 'bg-green-50/40 dark:bg-green-950/20', className), onClick: (e) => {
+    return (jsxs(Fragment, { children: [jsxs(TableRow, { "data-state": isSelected ? 'selected' : undefined, className: cn('cursor-pointer', isNew && 'bg-[var(--success-100)]/60', className), onClick: (e) => {
                     toggleExpand(e);
                     handleClick();
-                }, "aria-expanded": isExpanded, children: [jsx(TableCell, { className: "py-2 align-middle whitespace-nowrap", children: jsx(Badge, { className: getVerbBadgeClasses(event.verb), children: event.verb?.toUpperCase() || 'UNKNOWN' }) }), jsx(TableCell, { className: "py-2 align-middle", style: { width: '100%', maxWidth: 0, overflow: 'hidden' }, children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("div", { className: "text-sm leading-snug", style: {
+                }, "aria-expanded": isExpanded, children: [jsx(TableCell, { className: "py-2 align-middle whitespace-nowrap", children: jsx(Badge, { variant: getVerbBadgeVariant(event.verb), className: VERB_BADGE_CLASSES, children: event.verb?.toUpperCase() || 'UNKNOWN' }) }), jsx(TableCell, { className: "py-2 align-middle", style: { width: '100%', maxWidth: 0, overflow: 'hidden' }, children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("div", { className: "text-sm leading-snug", style: {
                                             overflow: 'hidden',
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
@@ -9092,7 +9242,7 @@ function AuditLogFeedItem({ event, onEventClick, isSelected = false, className =
 /**
  * React hook for executing audit log queries
  */
-function useAuditLogQuery({ client, autoExecute = false, }) {
+function useAuditLogQuery({ client, }) {
     const [query, setQuery] = useState(null);
     const [events, setEvents] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -9634,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.
@@ -9728,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
@@ -9802,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) {
@@ -9867,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();
@@ -9889,6 +10054,7 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
                 setWatchError(streamError);
                 setIsStreaming(false);
                 watchStopRef.current = null;
+                reconnectAttemptsRef.current += 1;
             },
             onClose: () => {
                 setIsStreaming(false);
@@ -9899,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;
@@ -10066,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 &&
@@ -10076,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.
@@ -10090,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);
             }
@@ -10259,40 +10468,10 @@ function ActivityExpandedDetails({ activity, compact = false, }) {
     const timestamp = metadata?.creationTimestamp;
     const actorDisplay = actor.displayName || actor.name;
     const actorIsUser = actor.type === 'user';
-    const body = (jsxs(Fragment, { children: [changes && changes.length > 0 ? (jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "m-0 mb-2 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/80", children: "Changes" }), jsx("div", { className: "flex flex-col gap-1.5", children: changes.map((change, index) => (jsxs("div", { className: "rounded bg-muted px-2.5 py-1.5 text-xs", children: [jsx("span", { className: "block font-mono text-[11px] font-semibold text-foreground", children: change.field }), change.old ? (jsxs("span", { className: "block ml-2 text-red-600 dark:text-red-400", children: [jsx("span", { className: "mr-1 font-medium", children: "\u2212" }), jsx("span", { className: "line-through", children: change.old })] })) : null, change.new ? (jsxs("span", { className: "block ml-2 text-green-600 dark:text-green-400", children: [jsx("span", { className: "mr-1 font-medium", children: "+" }), change.new] })) : null] }, index))) })] })) : null, jsxs(DetailGrid, { children: [jsx(Section, { title: "When", children: jsx(Field, { label: "Timestamp", value: jsx(Timestamp, { value: timestamp, variant: "iso-utc" }), copyValue: timestamp ?? '', copyLabel: "timestamp", disableTooltip: true }) }), jsxs(Section, { title: "Actor", children: [jsx(Field, { label: "Name", value: jsxs("span", { children: [actorDisplay, actor.type ? (jsxs("span", { className: "ml-1 text-muted-foreground", children: ["(", actor.type, ")"] })) : null] }), copyValue: actorDisplay, copyLabel: "actor name" }), actorIsUser && actor.email ? (jsx(Field, { label: "Email", value: actor.email, copyValue: actor.email, mono: true })) : null, actor.uid ? (jsx(Field, { label: "UID", value: actor.uid, copyValue: actor.uid, mono: true })) : null] }), jsxs(Section, { title: "Resource", children: [jsx(Field, { label: "Kind", value: jsxs("span", { children: [resource.kind, resource.apiGroup ? (jsxs("span", { className: "ml-1 text-muted-foreground", children: ["\u00B7 ", resource.apiGroup] })) : null] }), copyValue: resource.kind, copyLabel: "resource kind" }), resource.name ? (jsx(Field, { label: "Name", value: resource.name, copyValue: resource.name, copyLabel: "resource name" })) : null, resource.namespace ? (jsx(Field, { label: "Namespace", value: resource.namespace, copyValue: resource.namespace })) : null, resource.uid ? (jsx(Field, { label: "UID", value: resource.uid, copyValue: resource.uid, mono: true })) : null] }), jsxs(Section, { title: "Origin", children: [jsx(Field, { label: "Source", value: origin.type, copyValue: origin.type, copyLabel: "origin type" }), origin.id ? (jsx(Field, { label: "ID", value: origin.id, copyValue: origin.id, mono: true })) : null] })] })] }));
+    const body = (jsxs(Fragment, { children: [changes && changes.length > 0 ? (jsxs("div", { className: "mb-4", children: [jsx("h4", { className: "m-0 mb-2 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/80", children: "Changes" }), jsx("div", { className: "flex flex-col gap-1.5", children: changes.map((change, index) => (jsxs("div", { className: "rounded bg-muted px-2.5 py-1.5 text-xs", children: [jsx("span", { className: "block font-mono text-[11px] font-semibold text-foreground", children: change.field }), change.old ? (jsxs("span", { className: "block ml-2 text-destructive", children: [jsx("span", { className: "mr-1 font-medium", children: "\u2212" }), jsx("span", { className: "line-through", children: change.old })] })) : null, change.new ? (jsxs("span", { className: "block ml-2 text-[var(--success-500)]", children: [jsx("span", { className: "mr-1 font-medium", children: "+" }), change.new] })) : null] }, index))) })] })) : null, jsxs(DetailGrid, { children: [jsx(Section, { title: "When", children: jsx(Field, { label: "Timestamp", value: jsx(Timestamp, { value: timestamp, variant: "iso-utc" }), copyValue: timestamp ?? '', copyLabel: "timestamp", disableTooltip: true }) }), jsxs(Section, { title: "Actor", children: [jsx(Field, { label: "Name", value: jsxs("span", { children: [actorDisplay, actor.type ? (jsxs("span", { className: "ml-1 text-muted-foreground", children: ["(", actor.type, ")"] })) : null] }), copyValue: actorDisplay, copyLabel: "actor name" }), actorIsUser && actor.email ? (jsx(Field, { label: "Email", value: actor.email, copyValue: actor.email, mono: true })) : null, actor.uid ? (jsx(Field, { label: "UID", value: actor.uid, copyValue: actor.uid, mono: true })) : null] }), jsxs(Section, { title: "Resource", children: [jsx(Field, { label: "Kind", value: jsxs("span", { children: [resource.kind, resource.apiGroup ? (jsxs("span", { className: "ml-1 text-muted-foreground", children: ["\u00B7 ", resource.apiGroup] })) : null] }), copyValue: resource.kind, copyLabel: "resource kind" }), resource.name ? (jsx(Field, { label: "Name", value: resource.name, copyValue: resource.name, copyLabel: "resource name" })) : null, resource.namespace ? (jsx(Field, { label: "Namespace", value: resource.namespace, copyValue: resource.namespace })) : null, resource.uid ? (jsx(Field, { label: "UID", value: resource.uid, copyValue: resource.uid, mono: true })) : null] }), jsxs(Section, { title: "Origin", children: [jsx(Field, { label: "Source", value: origin.type, copyValue: origin.type, copyLabel: "origin type" }), origin.id ? (jsx(Field, { label: "ID", value: origin.id, copyValue: origin.id, mono: true })) : null] })] })] }));
     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")
  */
@@ -10301,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
@@ -10326,25 +10505,25 @@ function normalizeVerb(verb) {
 function getActionIconClasses(verb) {
     const normalizedVerb = normalizeVerb(verb);
     switch (normalizedVerb) {
-        case "create":
+        case 'create':
             return {
-                container: "bg-blue-50 dark:bg-blue-950",
-                icon: "text-blue-500 dark:text-blue-400",
+                container: 'bg-blue-50 dark:bg-blue-950',
+                icon: 'text-blue-500 dark:text-blue-400',
             };
-        case "update":
+        case 'update':
             return {
-                container: "bg-green-50 dark:bg-green-950",
-                icon: "text-green-600 dark:text-green-400",
+                container: 'bg-green-50 dark:bg-green-950',
+                icon: 'text-green-600 dark:text-green-400',
             };
-        case "delete":
+        case 'delete':
             return {
-                container: "bg-red-50 dark:bg-red-950",
-                icon: "text-red-500 dark:text-red-400",
+                container: 'bg-red-50 dark:bg-red-950',
+                icon: 'text-red-500 dark:text-red-400',
             };
         default:
             return {
-                container: "bg-slate-100 dark:bg-slate-800",
-                icon: "text-slate-500 dark:text-slate-400",
+                container: 'bg-slate-100 dark:bg-slate-800',
+                icon: 'text-slate-500 dark:text-slate-400',
             };
     }
 }
@@ -10354,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;
@@ -10388,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
@@ -10402,7 +10612,7 @@ function ActivityFeedItem({ activity, onResourceClick, resourceLinkResolver, ten
     // surfaced via a hover tooltip on the avatar so the column stays narrow.
     const actorTooltipBody = (jsxs("div", { className: "flex flex-col gap-0.5 text-xs", children: [jsx("span", { className: "font-medium", children: actorVisible }), actor.email && actor.email !== actorVisible ? (jsx("span", { className: "font-mono", children: actor.email })) : null, actor.uid ? (jsx("span", { className: "font-mono opacity-70", children: actor.uid })) : null] }));
     const actorCell = (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: avatar }), jsx(TooltipContent, { children: actorTooltipBody })] }));
-    return (jsxs(Fragment, { children: [jsxs(TableRow, { "data-state": isSelected ? "selected" : undefined, className: cn("cursor-pointer", isNew && "bg-green-50/40 dark:bg-green-950/20", className), onClick: (e) => {
+    return (jsxs(Fragment, { children: [jsxs(TableRow, { "data-state": isSelected ? "selected" : undefined, className: cn("cursor-pointer", isNew && "bg-[var(--success-100)]/60", className), onClick: (e) => {
                     // Row-level click toggles expansion. Inner interactive elements
                     // (links, avatar, expand button) call e.stopPropagation() so
                     // they don't double-fire. If a parent passed onActivityClick,
@@ -10573,6 +10783,18 @@ function useFacets(client, timeRange, filters = {}) {
     };
 }
 
+/**
+ * SegmentedToggle - a single-select control built on datum-ui's ButtonGroup.
+ * The active segment is a solid primary Button; inactive segments sit on the
+ * neutral (muted) button surface so the control reads in both themes.
+ */
+function SegmentedToggle({ options, value, onChange, ariaLabel, className, disabled = false, }) {
+    return (jsx(ButtonGroup, { "aria-label": ariaLabel, className: className, children: options.map((option) => {
+            const active = value === option.value;
+            return (jsx(Button, { htmlType: "button", size: "small", type: active ? 'primary' : 'quaternary', theme: active ? 'solid' : 'light', className: cn('font-medium', !active && 'border border-border'), onClick: () => onChange(option.value), disabled: disabled, "aria-pressed": active, title: option.description, children: option.label }, option.value));
+        }) }));
+}
+
 /**
  * Options for the change source toggle
  */
@@ -10596,17 +10818,8 @@ const OPTIONS$1 = [
 /**
  * ChangeSourceToggle provides a segmented control for filtering by change source
  */
-function ChangeSourceToggle({ value, onChange, className = "", disabled = false, }) {
-    return (jsx("div", { className: cn("inline-flex border border-input rounded-md overflow-hidden", className), role: "group", "aria-label": "Filter by change source", children: OPTIONS$1.map((option, index) => {
-            const active = value === option.value;
-            return (jsx(Button, { htmlType: "button", type: active ? 'primary' : 'quaternary', theme: active ? 'solid' : 'borderless', className: cn('px-2 h-7 text-xs font-medium transition-all duration-200', index < OPTIONS$1.length - 1 && 'border-r border-input', !active && 'bg-muted text-foreground hover:bg-muted/80'), 
-                // Inline styles win over datum-ui's baked-in `rounded-lg` and
-                // (for the primary/solid active button) its own `border`. The
-                // outer wrapper's rounded-md + overflow-hidden draws the
-                // segmented control's outer corners; per-button border-right
-                // (className) draws the separators between inactive buttons.
-                style: active ? { borderRadius: 0, border: 0 } : { borderRadius: 0 }, onClick: () => onChange(option.value), disabled: disabled, "aria-pressed": active, title: option.description, children: option.label }, option.value));
-        }) }));
+function ChangeSourceToggle({ value, onChange, className, disabled = false, }) {
+    return (jsx(SegmentedToggle, { options: OPTIONS$1, value: value, onChange: onChange, ariaLabel: "Filter by change source", className: className, disabled: disabled }));
 }
 
 /**
@@ -10678,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) {
@@ -10898,12 +11111,186 @@ function ActivityFeedFilters({ client, filters, timeRange, onFiltersChange, onTi
             clearTimeout(searchDebounceRef.current);
         onFiltersChangeRef.current({ ...filtersRef.current, search: undefined });
     }, []);
-    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: "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" }) }))] }), activeFilterIds.map((filterId) => {
+    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;
 }
 
 /**
@@ -10973,26 +11360,28 @@ function ActivityFeed({ client, initialFilters = { changeSource: "human" }, init
     useEffect(() => {
         isLoadingRef.current = isLoading;
     }, [isLoading]);
-    // Infinite scroll using Intersection Observer
+    // Infinite scroll using Intersection Observer.
+    // The list container is the root only when it actually scrolls. Host apps
+    // such as cloud-portal scroll at the page level, so the container never
+    // overflows; in that case observe against the viewport instead.
     useEffect(() => {
         if (!infiniteScroll || !hasMore || !loadMoreTriggerRef.current)
             return;
+        const container = scrollContainerRef.current;
+        const containerScrolls = !!container && container.scrollHeight > container.clientHeight + 1;
         const observer = new IntersectionObserver((entries) => {
             const entry = entries[0];
             if (entry.isIntersecting && !isLoadingRef.current) {
-                // Call through the ref to always use the latest function
                 loadMoreRef.current();
             }
         }, {
-            root: scrollContainerRef.current,
+            root: containerScrolls ? container : null,
             rootMargin: `${loadMoreThreshold}px`,
             threshold: 0,
         });
         observer.observe(loadMoreTriggerRef.current);
-        return () => {
-            observer.disconnect();
-        };
-    }, [infiniteScroll, loadMoreThreshold, hasMore]);
+        return () => observer.disconnect();
+    }, [infiniteScroll, loadMoreThreshold, hasMore, activities.length]);
     // Handle filter changes - refresh is automatic via the hook
     const handleFiltersChange = useCallback((newFilters) => {
         setFilters(newFilters);
@@ -11032,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-green-400 dark:bg-green-500 opacity-75" }), jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500 dark:bg-green-400" })] }), 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-red-500 dark:bg-red-400" }) }), 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] })] }) }));
 }
@@ -11686,7 +12075,7 @@ function useEventsFeed({ client, initialFilters = {}, initialTimeRange = { start
 function getRegarding$1(event) {
     return event.regarding || event.involvedObject || {};
 }
-function getReportingController$1(event) {
+function getReportingController(event) {
     return event.reportingController || event.reportingComponent || event.source?.component;
 }
 function getReportingInstance(event) {
@@ -11699,7 +12088,7 @@ function getReportingInstance(event) {
  */
 function EventExpandedDetails({ event, compact = true }) {
     const regarding = getRegarding$1(event);
-    const reportingController = getReportingController$1(event);
+    const reportingController = getReportingController(event);
     const reportingInstance = getReportingInstance(event);
     const { eventTime, action, metadata, related } = event;
     const firstTimestamp = event.firstTimestamp || event.deprecatedFirstTimestamp;
@@ -11726,12 +12115,6 @@ function getRegarding(event) {
 function getNote(event) {
     return event.note || event.message;
 }
-/**
- * Get the reporting controller (handling both new and deprecated field names)
- */
-function getReportingController(event) {
-    return event.reportingController || event.source?.component;
-}
 /**
  * Get the event count (handling both new and deprecated field names)
  */
@@ -11767,7 +12150,6 @@ function EventFeedItem({ event, onEventClick, onResourceClick, isSelected = fals
     const note = getNote(event);
     const count = getCount(event);
     const timestamp = getTimestamp(event);
-    getReportingController(event);
     const { type, reason } = event;
     const handleClick = () => {
         onEventClick?.(event);
@@ -11810,11 +12192,11 @@ function EventFeedItem({ event, onEventClick, onResourceClick, isSelected = fals
     if (variant === 'timeline') {
         const TypeIcon = isWarning ? TriangleAlert : Bell;
         const iconBg = isWarning
-            ? 'bg-red-50 dark:bg-red-950'
-            : 'bg-blue-50 dark:bg-blue-950';
+            ? 'bg-destructive/10'
+            : 'bg-[var(--info-100)]';
         const iconColor = isWarning
-            ? 'text-red-500 dark:text-red-400'
-            : 'text-blue-500 dark:text-blue-400';
+            ? 'text-destructive'
+            : 'text-[var(--info-500)]';
         const objectLabel = regarding.namespace
             ? `${regarding.kind || 'Unknown'} · ${regarding.namespace}/${regarding.name || ''}`
             : `${regarding.kind || 'Unknown'} · ${regarding.name || ''}`;
@@ -11827,18 +12209,16 @@ function EventFeedItem({ event, onEventClick, onResourceClick, isSelected = fals
                                                     cursor: 'help',
                                                 }, children: summary }) }), jsx(TooltipContent, { className: "max-w-[480px] whitespace-normal break-words", children: summary })] })] }), jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap shrink-0 max-w-[200px] truncate", title: objectLabel, children: regarding.name }), 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", htmlType: "button", className: "h-5 py-0 px-1 text-muted-foreground hover:text-foreground shrink-0", onClick: toggleExpand, "aria-expanded": isExpanded, children: isExpanded ? jsx(ChevronDown, { className: "h-4 w-4" }) : jsx(ChevronRight, { className: "h-4 w-4" }) })] }), isExpanded ? jsx(EventExpandedDetails, { event: event }) : null] }));
     }
-    return (jsxs(Fragment, { children: [jsxs(TableRow, { "data-state": isSelected ? 'selected' : undefined, className: cn('cursor-pointer', isNew && 'bg-green-50/40 dark:bg-green-950/20', isWarning && !isSelected && 'border-l-2 border-l-red-400', className), onClick: (e) => {
+    return (jsxs(Fragment, { children: [jsxs(TableRow, { "data-state": isSelected ? 'selected' : undefined, className: cn('cursor-pointer', isNew && 'bg-[var(--success-100)]/60', isWarning && !isSelected && 'border-l-2 border-l-destructive', className), onClick: (e) => {
                     toggleExpand(e);
                     handleClick();
-                }, "aria-expanded": isExpanded, children: [jsx(TableCell, { className: "py-2 align-middle whitespace-nowrap", children: jsx("span", { className: cn('inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium', isWarning
-                                ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
-                                : 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'), children: type || 'Unknown' }) }), jsx(TableCell, { className: "py-2 align-middle whitespace-nowrap text-sm font-medium", children: reason || '' }), jsx(TableCell, { className: "py-2 align-middle", style: { width: '100%', maxWidth: 0, overflow: 'hidden' }, children: note ? (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("div", { className: "text-sm text-muted-foreground leading-snug", style: {
+                }, "aria-expanded": isExpanded, children: [jsx(TableCell, { className: "py-2 align-middle whitespace-nowrap", children: jsx(Badge$1, { type: isWarning ? 'danger' : 'info', theme: "light", className: "px-1.5 py-0.5 text-xs font-medium", children: type || 'Unknown' }) }), jsx(TableCell, { className: "py-2 align-middle whitespace-nowrap text-sm font-medium", children: reason || '' }), jsx(TableCell, { className: "py-2 align-middle", style: { width: '100%', maxWidth: 0, overflow: 'hidden' }, children: note ? (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("div", { className: "text-sm text-muted-foreground leading-snug", style: {
                                             overflow: 'hidden',
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                         }, children: noteWithCount }) }), jsx(TooltipContent, { className: "max-w-[480px] whitespace-normal break-words", children: noteWithCount })] })) : null }), jsx(TableCell, { className: "py-2 align-middle", children: jsxs("div", { className: "flex items-center gap-1 min-w-0", children: [jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { className: cn('text-sm font-medium text-foreground truncate', onResourceClick && 'cursor-pointer hover:underline hover:text-primary'), onClick: onResourceClick ? handleResourceClick : undefined, style: { maxWidth: 200 }, children: regarding.name || 'Unknown' }) }), jsx(TooltipContent, { children: regarding.namespace
                                                 ? `${regarding.kind || 'Unknown'} · ${regarding.namespace}/${regarding.name}`
-                                                : `${regarding.kind || 'Unknown'} · ${regarding.name}` })] }), jsx("button", { onClick: handleCopyResourceName, className: "inline-flex items-center justify-center p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer", "aria-label": "Copy resource name", type: "button", children: isCopied ? (jsx(Check, { className: "h-3 w-3 text-green-600 dark:text-green-400" })) : (jsx(Copy, { className: "h-3 w-3 text-gray-500 dark:text-gray-400" })) })] }) }), jsx(TableCell, { className: "py-2 align-middle whitespace-nowrap text-sm text-muted-foreground", children: jsx(Timestamp, { value: timestamp }) }), jsx(TableCell, { className: "py-2 align-middle w-10", children: jsx(Button, { type: "quaternary", theme: "borderless", size: "small", htmlType: "button", className: "h-6 w-6 p-0 text-muted-foreground hover:text-foreground", onClick: toggleExpand, "aria-expanded": isExpanded, "aria-label": isExpanded ? 'Collapse details' : 'Expand details', children: isExpanded ? (jsx(ChevronDown, { className: "h-4 w-4" })) : (jsx(ChevronRight, { className: "h-4 w-4" })) }) })] }), isExpanded ? (jsx(TableRow, { className: "bg-muted/30 hover:bg-muted/30", children: jsx(TableCell, { colSpan: EVENT_COLUMN_COUNT, className: "p-0", children: jsx(EventExpandedDetails, { event: event }) }) })) : null] }));
+                                                : `${regarding.kind || 'Unknown'} · ${regarding.name}` })] }), jsx("button", { onClick: handleCopyResourceName, className: "inline-flex items-center justify-center p-0.5 rounded opacity-0 group-hover:opacity-100 hover:bg-muted cursor-pointer", "aria-label": "Copy resource name", type: "button", children: isCopied ? (jsx(Check, { className: "h-3 w-3 text-[var(--success-500)]" })) : (jsx(Copy, { className: "h-3 w-3 text-muted-foreground" })) })] }) }), jsx(TableCell, { className: "py-2 align-middle whitespace-nowrap text-sm text-muted-foreground", children: jsx(Timestamp, { value: timestamp }) }), jsx(TableCell, { className: "py-2 align-middle w-10", children: jsx(Button, { type: "quaternary", theme: "borderless", size: "small", htmlType: "button", className: "h-6 w-6 p-0 text-muted-foreground hover:text-foreground", onClick: toggleExpand, "aria-expanded": isExpanded, "aria-label": isExpanded ? 'Collapse details' : 'Expand details', children: isExpanded ? (jsx(ChevronDown, { className: "h-4 w-4" })) : (jsx(ChevronRight, { className: "h-4 w-4" })) }) })] }), isExpanded ? (jsx(TableRow, { className: "bg-muted/30 hover:bg-muted/30", children: jsx(TableCell, { colSpan: EVENT_COLUMN_COUNT, className: "p-0", children: jsx(EventExpandedDetails, { event: event }) }) })) : null] }));
 }
 
 /**
@@ -11951,11 +12331,8 @@ const OPTIONS = [
 /**
  * EventTypeToggle provides a segmented control for filtering by event type
  */
-function EventTypeToggle({ value, onChange, className = '', disabled = false, }) {
-    return (jsx("div", { className: cn('inline-flex border border-input rounded-md overflow-hidden', className), role: "group", "aria-label": "Filter by event type", children: OPTIONS.map((option, index) => {
-            const active = value === option.value;
-            return (jsx(Button, { htmlType: "button", type: active ? 'primary' : 'quaternary', theme: active ? 'solid' : 'borderless', className: cn('px-2 h-7 text-xs font-medium transition-all duration-200', index < OPTIONS.length - 1 && 'border-r border-input', !active && 'bg-muted text-foreground hover:bg-muted/80'), style: active ? { borderRadius: 0, border: 0 } : { borderRadius: 0 }, onClick: () => onChange(option.value), disabled: disabled, "aria-pressed": active, title: option.description, children: option.label }, option.value));
-        }) }));
+function EventTypeToggle({ value, onChange, className, disabled = false, }) {
+    return (jsx(SegmentedToggle, { options: OPTIONS, value: value, onChange: onChange, ariaLabel: "Filter by event type", className: className, disabled: disabled }));
 }
 
 /**
@@ -12199,7 +12576,7 @@ function EventsFeedFilters({ client, filters, timeRange, onFiltersChange, onTime
             search: value || undefined,
         });
     }, [filters, onFiltersChange]);
-    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('eventType') && (jsx(EventTypeToggle, { value: eventTypeValue, onChange: handleEventTypeChange, disabled: disabled })), 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 events...", value: filters.search || '', onChange: handleSearchChange, disabled: disabled, className: "pl-8 h-7 text-xs pr-6" }), filters.search ? (jsx("button", { type: "button", onClick: () => onFiltersChange({ ...filters, search: undefined }), 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" }) })) : null] }), activeFilterIds.map((filterId) => {
+    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('eventType') && (jsx(EventTypeToggle, { value: eventTypeValue, onChange: handleEventTypeChange, 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 events...", value: filters.search || '', onChange: handleSearchChange, disabled: disabled, className: "h-9 pl-9 pr-9 text-xs md:text-xs" }), filters.search ? (jsx("button", { type: "button", onClick: () => onFiltersChange({ ...filters, search: undefined }), 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" }) })) : null] }), activeFilterIds.map((filterId) => {
                     const config = FILTER_CONFIGS[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 }), jsx("div", { className: "flex-1 min-w-[20px]" }), jsx(TimeRangeDropdown, { presets: TIME_PRESETS, selectedPreset: selectedPreset, onPresetSelect: handleTimePresetSelect, onCustomRangeApply: handleCustomRangeApply, customStart: customStart, customEnd: customEnd, disabled: disabled, displayLabel: getTimeRangeLabel() })] }) }));
@@ -12267,7 +12644,7 @@ function EventsFeed({ client, initialFilters = {}, initialTimeRange = { start: "
         : `flex-1 min-h-0 flex flex-col p-3 gap-0 ${className}`;
     // Build list classes - use flex-1 min-h-0 for flex-based scrolling
     const listClasses = "flex-1 min-h-0 overflow-y-auto pr-2";
-    return (jsxs(Card, { className: containerClasses, children: [enableStreaming && (jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center", children: [isStreaming ? (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-green-400 dark:bg-green-500 opacity-75" }), jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500 dark:bg-green-400" })] }), jsx("span", { className: "text-xs text-muted-foreground", children: "Streaming events..." })] }) }), jsx(TooltipContent, { className: "text-xs", children: jsx("p", { children: "New events will appear automatically" }) })] }) })) : null, newEventsCount > 0 ? (jsxs(Badge, { variant: "secondary", className: "text-xs ml-2", children: ["+", newEventsCount, " new"] })) : null] }), jsx(Button, { type: "tertiary", theme: "outline", size: "small", onClick: handleStreamingToggle, children: 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(EventsFeedFilters, { client: client, filters: filters, timeRange: timeRange, onFiltersChange: handleFiltersChange, onTimeRangeChange: handleTimeRangeChange, disabled: isLoading, namespace: namespace, hiddenFilters: hiddenFilters })), jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-4", errorFormatter: errorFormatter }), jsxs("div", { className: listClasses, ref: scrollContainerRef, children: [jsx(TooltipProvider, { delayDuration: 200, children: variant === 'timeline' ? (jsxs("div", { children: [(isLoading || isRefreshing) && events.length === 0
+    return (jsxs(Card, { className: containerClasses, children: [enableStreaming && (jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center", children: [isStreaming ? (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 events..." })] }) }), jsx(TooltipContent, { className: "text-xs", children: jsx("p", { children: "New events will appear automatically" }) })] }) })) : null, newEventsCount > 0 ? (jsxs(Badge, { variant: "secondary", className: "text-xs ml-2", children: ["+", newEventsCount, " new"] })) : null] }), jsx(Button, { type: "tertiary", theme: "outline", size: "small", onClick: handleStreamingToggle, children: 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(EventsFeedFilters, { client: client, filters: filters, timeRange: timeRange, onFiltersChange: handleFiltersChange, onTimeRangeChange: handleTimeRangeChange, disabled: isLoading, namespace: namespace, hiddenFilters: hiddenFilters })), jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-4", errorFormatter: errorFormatter }), jsxs("div", { className: listClasses, ref: scrollContainerRef, children: [jsx(TooltipProvider, { delayDuration: 200, children: variant === 'timeline' ? (jsxs("div", { children: [(isLoading || isRefreshing) && events.length === 0
                                     ? Array.from({ length: 8 }).map((_, index) => (jsx("div", { className: cn(index < 7 && 'border-b border-border', compact ? 'py-2' : 'py-3'), children: jsxs("div", { className: "flex items-center gap-3", children: [jsx(Skeleton, { className: "w-8 h-8 rounded-md shrink-0" }), jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [jsx(Skeleton, { className: "h-4 w-24" }), jsx(Skeleton, { className: "h-3 w-3/4" })] }), jsx(Skeleton, { className: "h-4 w-32 shrink-0" }), jsx(Skeleton, { className: "h-4 w-24 shrink-0" }), jsx(Skeleton, { className: "h-5 w-5 shrink-0" })] }) }, `sk-${index}`)))
                                     : null, !isLoading && !isRefreshing && events.length === 0 ? (jsxs("div", { className: "py-12 text-center text-muted-foreground", children: [jsx("div", { children: "No events found" }), jsx("div", { className: "text-sm mt-2", children: "Try adjusting your filters or time range" })] })) : null, events.map((event, index) => (jsx(EventFeedItem, { event: event, onEventClick: onEventClick, onResourceClick: onResourceClick, compact: compact, isNew: enableStreaming && index < newEventsCount, variant: "timeline", isLast: index === events.length - 1 }, event.metadata?.uid || event.metadata?.name)))] })) : (jsxs(Table, { className: "w-full", children: [jsx(TableHeader, { children: jsxs(TableRow, { children: [jsx(TableHead, { className: "w-[90px]", children: "Type" }), jsx(TableHead, { className: "w-[160px]", children: "Reason" }), jsx(TableHead, { children: "Note" }), jsx(TableHead, { className: "w-[220px]", children: "Object" }), jsx(TableHead, { className: "w-[170px]", children: "When" }), jsx(TableHead, { className: "w-10", "aria-label": "Expand" })] }) }), jsxs(TableBody, { children: [(isLoading || isRefreshing) && events.length === 0
                                             ? Array.from({ length: 8 }).map((_, index) => (jsxs(TableRow, { children: [jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-5 w-14 rounded" }) }), jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-4 w-24" }) }), jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-4 w-3/4" }) }), jsx(TableCell, { className: "py-2", children: jsx(Skeleton, { className: "h-4 w-32" }) }), 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}`)))
@@ -12447,14 +12824,14 @@ function PolicyList({ client, onViewPolicy, onEditPolicy, onCreatePolicy, groupB
                         policyList.policies.length === 0 && (jsxs("div", { className: "text-center py-8 px-6 text-muted-foreground", children: [jsx("div", { className: "text-4xl mb-3", children: "\uD83D\uDCCB" }), jsx("h3", { className: "m-0 mb-1.5 text-foreground", children: "No policies found" }), jsx("p", { className: "m-0 mb-4 max-w-[400px] mx-auto", children: "Activity policies define how audit events and Kubernetes events are translated into human-readable activity summaries." }), onCreatePolicy && (jsx(Button, { size: "small", onClick: onCreatePolicy, className: "bg-primary text-primary-foreground hover:bg-primary/90 h-7 text-xs", children: "Create your first policy" }))] })), policyList.groups.length > 0 && (jsx("div", { className: "flex flex-col gap-2.5", children: policyList.groups.map((group) => (jsxs("div", { className: "border border-input rounded-lg overflow-hidden", children: [jsxs("button", { type: "button", className: "w-full flex items-center gap-2.5 px-3 py-2 bg-muted border-none cursor-pointer text-left text-xs font-medium text-foreground transition-colors duration-200 hover:bg-accent", onClick: () => toggleGroup(group.apiGroup), children: [jsx("span", { className: `text-xs text-muted-foreground transition-transform duration-200 ${expandedGroups.has(group.apiGroup) ? "rotate-90" : ""}`, children: "\u25B6" }), jsx("span", { className: "flex-1 font-mono", children: group.apiGroup }), jsx(Badge, { variant: "secondary", className: "rounded-full", children: group.policies.length })] }), expandedGroups.has(group.apiGroup) && (jsx("div", { className: "p-1.5", children: jsxs("table", { className: "w-full border-collapse text-sm", children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: "text-left px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap", children: "Kind" }), jsx("th", { className: "text-left px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input w-24 text-xs whitespace-nowrap", children: "Audit Rules" }), jsx("th", { className: "text-left px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input w-24 text-xs whitespace-nowrap", children: "Event Rules" })] }) }), jsx("tbody", { children: group.policies.map((policy) => {
                                                     const rules = countRules(policy);
                                                     const policyStatus = getPolicyStatus(policy);
-                                                    return (jsxs("tr", { className: `hover:bg-muted transition-colors ${handlePolicyClick ? "cursor-pointer" : ""}`, onClick: () => handlePolicyClick?.(policy.metadata?.name || ""), children: [jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0", children: jsxs("div", { className: "flex items-center gap-2", children: [policyStatus.status === "ready" ? (jsx("div", { className: "w-2 h-2 rounded-full bg-green-500", title: policyStatus.message })) : (jsx("div", { title: policyStatus.message, children: jsx(TriangleAlert, { className: `w-4 h-4 ${policyStatus.status === "error"
-                                                                                    ? "text-red-500 dark:text-red-400"
+                                                    return (jsxs("tr", { className: `hover:bg-muted transition-colors ${handlePolicyClick ? "cursor-pointer" : ""}`, onClick: () => handlePolicyClick?.(policy.metadata?.name || ""), children: [jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0", children: jsxs("div", { className: "flex items-center gap-2", children: [policyStatus.status === "ready" ? (jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--success-500)]", title: policyStatus.message })) : (jsx("div", { title: policyStatus.message, children: jsx(TriangleAlert, { className: `w-4 h-4 ${policyStatus.status === "error"
+                                                                                    ? "text-destructive"
                                                                                     : policyStatus.status === "pending"
-                                                                                        ? "text-amber-600 dark:text-amber-400"
-                                                                                        : "text-gray-400"}` }) })), jsx("span", { className: "text-xs font-medium", children: policy.spec.resource.kind })] }) }), jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0 text-center w-24", children: jsx(Badge, { variant: rules.audit > 0 ? "success" : "secondary", className: rules.audit === 0
-                                                                        ? "bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500"
+                                                                                        ? "text-[var(--badge-warning)]"
+                                                                                        : "text-muted-foreground"}` }) })), jsx("span", { className: "text-xs font-medium", children: policy.spec.resource.kind })] }) }), jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0 text-center w-24", children: jsx(Badge, { variant: rules.audit > 0 ? "success" : "secondary", className: rules.audit === 0
+                                                                        ? "bg-muted text-muted-foreground"
                                                                         : "", children: rules.audit }) }), jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0 text-center w-24", children: jsx(Badge, { variant: rules.event > 0 ? "success" : "secondary", className: rules.event === 0
-                                                                        ? "bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500"
+                                                                        ? "bg-muted text-muted-foreground"
                                                                         : "", children: rules.event }) })] }, policy.metadata?.name));
                                                 }) })] }) }))] }, group.apiGroup))) }))] })] }));
 }
@@ -12902,7 +13279,7 @@ function PolicyRuleListItem({ rule, ruleType, index, onEdit, onDelete, onMoveUp,
         flex items-center gap-2 p-2 rounded-md border transition-all duration-200
         border-border bg-background hover:bg-muted/50
         ${className}
-      `, children: [jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "flex items-center gap-2 mb-0.5", children: jsx("span", { className: "font-medium text-xs text-foreground truncate", children: rule.name || `${ruleType === 'audit' ? 'Audit' : 'Event'} Rule #${index + 1}` }) }), rule.description && (jsx("div", { className: "text-[11px] text-muted-foreground mb-0.5 truncate", children: rule.description })), jsx("div", { className: "text-[11px] font-mono text-muted-foreground truncate", title: rule.match, children: truncatedMatch })] }), jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [jsxs("div", { className: "flex flex-col gap-0.5", children: [jsx(Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "icon", className: "h-5 w-5 p-0", onClick: onMoveUp, disabled: !canMoveUp, title: "Move up", "aria-label": "Move rule up", children: jsx(ChevronUp, { className: "h-3.5 w-3.5" }) }), jsx(Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "icon", className: "h-5 w-5 p-0", onClick: onMoveDown, disabled: !canMoveDown, title: "Move down", "aria-label": "Move rule down", children: jsx(ChevronDown, { className: "h-3.5 w-3.5" }) })] }), jsx(Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "icon", className: "h-6 w-6 text-muted-foreground hover:text-foreground hover:bg-muted", onClick: onEdit, title: "Edit rule", "aria-label": "Edit rule", children: jsx(SquarePen, { className: "h-3.5 w-3.5" }) }), jsx(Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "icon", className: "h-6 w-6 text-muted-foreground hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/50", onClick: onDelete, title: "Delete rule", "aria-label": "Delete rule", children: jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })] }));
+      `, children: [jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "flex items-center gap-2 mb-0.5", children: jsx("span", { className: "font-medium text-xs text-foreground truncate", children: rule.name || `${ruleType === 'audit' ? 'Audit' : 'Event'} Rule #${index + 1}` }) }), rule.description && (jsx("div", { className: "text-[11px] text-muted-foreground mb-0.5 truncate", children: rule.description })), jsx("div", { className: "text-[11px] font-mono text-muted-foreground truncate", title: rule.match, children: truncatedMatch })] }), jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [jsxs("div", { className: "flex flex-col gap-0.5", children: [jsx(Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "icon", className: "h-5 w-5 p-0", onClick: onMoveUp, disabled: !canMoveUp, title: "Move up", "aria-label": "Move rule up", children: jsx(ChevronUp, { className: "h-3.5 w-3.5" }) }), jsx(Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "icon", className: "h-5 w-5 p-0", onClick: onMoveDown, disabled: !canMoveDown, title: "Move down", "aria-label": "Move rule down", children: jsx(ChevronDown, { className: "h-3.5 w-3.5" }) })] }), jsx(Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "icon", className: "h-6 w-6 text-muted-foreground hover:text-foreground hover:bg-muted", onClick: onEdit, title: "Edit rule", "aria-label": "Edit rule", children: jsx(SquarePen, { className: "h-3.5 w-3.5" }) }), jsx(Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "icon", className: "h-6 w-6 text-muted-foreground hover:text-destructive hover:bg-destructive/10", onClick: onDelete, title: "Delete rule", "aria-label": "Delete rule", children: jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })] }));
 }
 
 /**
@@ -13023,7 +13400,7 @@ const registeredLanguages = new Set();
  * Lazy-loaded Monaco editor for CEL expressions and templates
  * Provides autocomplete based on available field paths
  */
-function CelEditor({ value, onChange, language = 'cel', availableFields = [], placeholder = '', height = '100px', className, error = false, readOnly = false, 'data-testid': testId, }) {
+function CelEditor({ value, onChange, language = 'cel', availableFields = [], height = '100px', className, error = false, readOnly = false, 'data-testid': testId, }) {
     const [Editor, setEditor] = useState(null);
     const [loadError, setLoadError] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
@@ -13182,7 +13559,7 @@ function CelEditor({ value, onChange, language = 'cel', availableFields = [], pl
  */
 function requiresBracketNotation(key) {
     // Keys with dots, slashes, or other special characters need bracket notation
-    return /[.\/\-:]/.test(key) || /^\d/.test(key);
+    return /[./\-:]/.test(key) || /^\d/.test(key);
 }
 /**
  * Build the CEL path for a key, using bracket notation when needed
@@ -13389,7 +13766,7 @@ function PolicyRuleEditorDialog({ open, onOpenChange, rule, ruleType, existingNa
     const [previewError, setPreviewError] = useState(null);
     // Sample data for autocomplete (fetched once when dialog opens)
     const [sampleData, setSampleData] = useState([]);
-    const [sampleDataLoading, setSampleDataLoading] = useState(false);
+    const [, setSampleDataLoading] = useState(false);
     // Extract field paths from sample data OR preview data for autocomplete
     const availableFields = useMemo(() => {
         // First try to use preview data if available
@@ -13838,10 +14215,10 @@ function PolicyEditor({ client, policyName, onSaveSuccess, onCancel, onResourceC
     };
     const policyStatus = getPolicyStatus();
     return (jsx(TooltipProvider, { delayDuration: 0, children: jsxs(Card, { className: `rounded-xl ${className}`, children: [jsxs(CardHeader, { className: "flex flex-row justify-between items-center p-4 border-b border-border space-y-0", children: [jsx("div", { className: "flex items-center gap-3", children: editor.isNew ? (jsxs("div", { className: "flex flex-col gap-0.5", children: [jsx(Label, { htmlFor: "policy-name", className: "text-xs text-muted-foreground", children: "Policy Name" }), jsx(Input, { id: "policy-name", type: "text", className: "w-[300px] text-base font-medium", value: editor.name, onChange: (e) => editor.setName(e.target.value), placeholder: "e.g., httpproxy-policy" })] })) : (jsxs("div", { className: "flex flex-col gap-0.5", children: [jsxs("div", { className: "flex items-center gap-1.5", children: [policyStatus && (jsxs(Tooltip, { delayDuration: 300, children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { className: `w-2 h-2 rounded-full ${policyStatus.status === 'ready'
-                                                                ? 'bg-green-500'
+                                                                ? 'bg-[var(--success-500)]'
                                                                 : policyStatus.status === 'error'
-                                                                    ? 'bg-red-500'
-                                                                    : 'bg-yellow-500'}`, "aria-label": `Policy status: ${policyStatus.status}` }) }), jsx(TooltipContent, { children: jsx("p", { className: "text-xs", children: policyStatus.message }) })] })), jsx("h2", { className: "m-0 text-xl font-semibold text-foreground leading-tight", children: editor.spec.resource.kind || 'Untitled Policy' })] }), jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [editor.spec.resource.apiGroup && (jsxs(Fragment, { children: [jsxs("span", { children: ["API Group: ", editor.spec.resource.apiGroup] }), jsx("span", { className: "text-muted-foreground/50", children: "\u2022" })] })), jsxs("span", { children: ["Resource: ", editor.name] }), jsxs(Tooltip, { delayDuration: 500, children: [jsx(TooltipTrigger, { asChild: true, children: jsx("button", { onClick: handleCopyResourceName, className: "inline-flex items-center justify-center p-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-opacity cursor-pointer", "aria-label": "Copy resource name", children: isCopied ? (jsx(Check, { className: "h-3 w-3 text-green-600 dark:text-green-400" })) : (jsx(Copy, { className: "h-3 w-3 text-gray-500 dark:text-gray-400" })) }) }), jsx(TooltipContent, { children: jsx("p", { className: "text-xs", children: "Click to copy" }) })] })] })] })) }), jsxs("div", { className: "flex gap-2", children: [onCancel && (jsx(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", onClick: onCancel, disabled: editor.isSaving, className: "h-7 text-xs", children: "Cancel" })), jsx(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", onClick: () => handleSave(true), disabled: !canSave || editor.isSaving, title: "Validate without saving", className: "h-7 text-xs", children: "Validate" }), jsx(Button, { htmlType: "button", size: "small", onClick: () => handleSave(false), disabled: !canSave || editor.isSaving || !editor.isDirty, className: "bg-primary text-primary-foreground border-primary hover:bg-primary/90 hover:border-primary/90 h-7 text-xs", children: editor.isSaving ? (jsxs(Fragment, { children: [jsx("span", { className: "w-3.5 h-3.5 border-2 border-border border-t-[#BF9595] rounded-full animate-spin" }), "Saving..."] })) : ('Save Policy') })] })] }), jsx(ApiErrorAlert, { error: editor.error, className: "mx-4 mt-3", errorFormatter: errorFormatter }), editor.isLoading && (jsxs("div", { className: "flex items-center justify-center gap-2 py-8 text-muted-foreground", children: [jsx("span", { className: "w-5 h-5 border-[3px] border-border border-t-[#BF9595] rounded-full animate-spin" }), "Loading policy..."] })), !editor.isLoading && (jsx(CardContent, { className: "p-4", children: jsxs(Tabs, { defaultValue: "activity", value: activeTab, onValueChange: setActiveTab, className: "w-full", children: [jsxs(TabsList, { className: "grid w-full grid-cols-2 mb-4", children: [jsx(TabsTrigger, { value: "activity", children: "Activity" }), jsx(TabsTrigger, { value: "editor", children: "Editor" })] }), jsx(TabsContent, { value: "activity", className: "mt-0", children: jsx(PolicyActivityView, { client: client, policyResource: editor.spec.resource, policyName: editor.name, onResourceClick: onResourceClick, errorFormatter: errorFormatter }) }), jsx(TabsContent, { value: "editor", className: "mt-0", children: jsxs("div", { className: "flex flex-col gap-4", children: [jsx(PolicyResourceForm, { resource: editor.spec.resource, onChange: editor.setResource, client: client, isEditMode: !editor.isNew }), jsx(PolicyRuleList, { auditRules: editor.spec.auditRules || [], eventRules: editor.spec.eventRules || [], policyResource: editor.spec.resource, apiClient: client, onAuditRulesChange: editor.setAuditRules, onEventRulesChange: editor.setEventRules }), !editor.isNew && (jsx("div", { className: "mt-6 pt-4 border-t border-border", children: jsx("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4", children: jsx("div", { className: "flex items-start gap-3", children: jsxs("div", { className: "flex-1", children: [jsxs("h3", { className: "text-base font-semibold text-foreground mb-1.5 flex items-center gap-2", children: [jsx(TriangleAlert, { className: "h-5 w-5 text-destructive" }), "Danger Zone"] }), jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: ["Deleting this policy will stop translating audit logs and events for", ' ', jsx("strong", { className: "text-foreground", children: editor.spec.resource.kind }), ' ', "resources. Existing activities will be preserved, but no new activities will be generated."] }), jsxs(Button, { type: "danger", theme: "solid", size: "small", onClick: () => setShowDeleteDialog(true), className: "h-8 text-xs", children: [jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })] }) }) }) }))] }) })] }) })), jsx(Dialog, { open: showDeleteDialog, onOpenChange: setShowDeleteDialog, children: jsxs(DialogContent, { className: "max-w-[500px]", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Delete Policy" }), jsxs(DialogDescription, { children: ["Are you sure you want to delete", ' ', jsx("strong", { className: "text-foreground", children: editor.name }), "?"] })] }), jsxs(Alert, { variant: "destructive", className: "mt-2", children: [jsx(CircleAlert, { className: "h-4 w-4" }), jsxs(AlertDescription, { children: [jsx("strong", { children: "This action cannot be undone." }), jsx("br", {}), "Activities already generated by this policy will remain in the system, but no new activities will be created for ", editor.spec.resource.kind, " resources."] })] }), jsxs(DialogFooter, { children: [jsx(Button, { type: "tertiary", theme: "outline", size: "small", onClick: () => setShowDeleteDialog(false), disabled: isDeleting, className: "h-8 text-xs", children: "Cancel" }), jsx(Button, { type: "danger", theme: "solid", size: "small", onClick: handleDelete, disabled: isDeleting, className: "h-8 text-xs", children: isDeleting ? (jsxs(Fragment, { children: [jsx("span", { className: "w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" }), "Deleting..."] })) : (jsxs(Fragment, { children: [jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })) })] })] }) })] }) }));
+                                                                    ? 'bg-destructive'
+                                                                    : 'bg-[var(--badge-warning)]'}`, "aria-label": `Policy status: ${policyStatus.status}` }) }), jsx(TooltipContent, { children: jsx("p", { className: "text-xs", children: policyStatus.message }) })] })), jsx("h2", { className: "m-0 text-xl font-semibold text-foreground leading-tight", children: editor.spec.resource.kind || 'Untitled Policy' })] }), jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [editor.spec.resource.apiGroup && (jsxs(Fragment, { children: [jsxs("span", { children: ["API Group: ", editor.spec.resource.apiGroup] }), jsx("span", { className: "text-muted-foreground/50", children: "\u2022" })] })), jsxs("span", { children: ["Resource: ", editor.name] }), jsxs(Tooltip, { delayDuration: 500, children: [jsx(TooltipTrigger, { asChild: true, children: jsx("button", { onClick: handleCopyResourceName, className: "inline-flex items-center justify-center p-0.5 rounded hover:bg-muted transition-opacity cursor-pointer", "aria-label": "Copy resource name", children: isCopied ? (jsx(Check, { className: "h-3 w-3 text-[var(--success-500)]" })) : (jsx(Copy, { className: "h-3 w-3 text-muted-foreground" })) }) }), jsx(TooltipContent, { children: jsx("p", { className: "text-xs", children: "Click to copy" }) })] })] })] })) }), jsxs("div", { className: "flex gap-2", children: [onCancel && (jsx(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", onClick: onCancel, disabled: editor.isSaving, className: "h-7 text-xs", children: "Cancel" })), jsx(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", onClick: () => handleSave(true), disabled: !canSave || editor.isSaving, title: "Validate without saving", className: "h-7 text-xs", children: "Validate" }), jsx(Button, { htmlType: "button", size: "small", onClick: () => handleSave(false), disabled: !canSave || editor.isSaving || !editor.isDirty, className: "bg-primary text-primary-foreground border-primary hover:bg-primary/90 hover:border-primary/90 h-7 text-xs", children: editor.isSaving ? (jsxs(Fragment, { children: [jsx("span", { className: "w-3.5 h-3.5 border-2 border-border border-t-[#BF9595] rounded-full animate-spin" }), "Saving..."] })) : ('Save Policy') })] })] }), jsx(ApiErrorAlert, { error: editor.error, className: "mx-4 mt-3", errorFormatter: errorFormatter }), editor.isLoading && (jsxs("div", { className: "flex items-center justify-center gap-2 py-8 text-muted-foreground", children: [jsx("span", { className: "w-5 h-5 border-[3px] border-border border-t-[#BF9595] rounded-full animate-spin" }), "Loading policy..."] })), !editor.isLoading && (jsx(CardContent, { className: "p-4", children: jsxs(Tabs, { defaultValue: "activity", value: activeTab, onValueChange: setActiveTab, className: "w-full", children: [jsxs(TabsList, { className: "grid w-full grid-cols-2 mb-4", children: [jsx(TabsTrigger, { value: "activity", children: "Activity" }), jsx(TabsTrigger, { value: "editor", children: "Editor" })] }), jsx(TabsContent, { value: "activity", className: "mt-0", children: jsx(PolicyActivityView, { client: client, policyResource: editor.spec.resource, policyName: editor.name, onResourceClick: onResourceClick, errorFormatter: errorFormatter }) }), jsx(TabsContent, { value: "editor", className: "mt-0", children: jsxs("div", { className: "flex flex-col gap-4", children: [jsx(PolicyResourceForm, { resource: editor.spec.resource, onChange: editor.setResource, client: client, isEditMode: !editor.isNew }), jsx(PolicyRuleList, { auditRules: editor.spec.auditRules || [], eventRules: editor.spec.eventRules || [], policyResource: editor.spec.resource, apiClient: client, onAuditRulesChange: editor.setAuditRules, onEventRulesChange: editor.setEventRules }), !editor.isNew && (jsx("div", { className: "mt-6 pt-4 border-t border-border", children: jsx("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4", children: jsx("div", { className: "flex items-start gap-3", children: jsxs("div", { className: "flex-1", children: [jsxs("h3", { className: "text-base font-semibold text-foreground mb-1.5 flex items-center gap-2", children: [jsx(TriangleAlert, { className: "h-5 w-5 text-destructive" }), "Danger Zone"] }), jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: ["Deleting this policy will stop translating audit logs and events for", ' ', jsx("strong", { className: "text-foreground", children: editor.spec.resource.kind }), ' ', "resources. Existing activities will be preserved, but no new activities will be generated."] }), jsxs(Button, { type: "danger", theme: "solid", size: "small", onClick: () => setShowDeleteDialog(true), className: "h-8 text-xs", children: [jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })] }) }) }) }))] }) })] }) })), jsx(Dialog, { open: showDeleteDialog, onOpenChange: setShowDeleteDialog, children: jsxs(DialogContent, { className: "max-w-[500px]", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Delete Policy" }), jsxs(DialogDescription, { children: ["Are you sure you want to delete", ' ', jsx("strong", { className: "text-foreground", children: editor.name }), "?"] })] }), jsxs(Alert, { variant: "destructive", className: "mt-2", children: [jsx(CircleAlert, { className: "h-4 w-4" }), jsxs(AlertDescription, { children: [jsx("strong", { children: "This action cannot be undone." }), jsx("br", {}), "Activities already generated by this policy will remain in the system, but no new activities will be created for ", editor.spec.resource.kind, " resources."] })] }), jsxs(DialogFooter, { children: [jsx(Button, { type: "tertiary", theme: "outline", size: "small", onClick: () => setShowDeleteDialog(false), disabled: isDeleting, className: "h-8 text-xs", children: "Cancel" }), jsx(Button, { type: "danger", theme: "solid", size: "small", onClick: handleDelete, disabled: isDeleting, className: "h-8 text-xs", children: isDeleting ? (jsxs(Fragment, { children: [jsx("span", { className: "w-3.5 h-3.5 border-2 border-current border-t-transparent rounded-full animate-spin mr-2" }), "Deleting..."] })) : (jsxs(Fragment, { children: [jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })) })] })] }) })] }) }));
 }
 
 /**
@@ -13925,12 +14302,12 @@ function PolicyDetailView({ client, policyName, onEdit, onResourceClick, classNa
     const policyStatus = getPolicyStatus();
     const isUnhealthy = policyStatus && policyStatus.status !== 'ready';
     return (jsx(TooltipProvider, { delayDuration: 0, children: jsxs(Card, { className: `rounded-xl ${className}`, children: [jsxs(CardHeader, { className: "flex flex-row justify-between items-center p-6 border-b border-border space-y-0", children: [jsxs("div", { className: "flex items-center gap-4", children: [isLoading && (jsxs("div", { className: "flex flex-col gap-2", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(Skeleton, { className: "w-2 h-2 rounded-full" }), jsx(Skeleton, { className: "h-6 w-32" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Skeleton, { className: "h-3 w-24" }), jsx(Skeleton, { className: "h-3 w-32" })] })] })), !isLoading && policy && (jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("h2", { className: "m-0 text-xl font-semibold text-foreground leading-tight flex items-center gap-2", children: [jsxs(Tooltip, { delayDuration: 500, children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { className: `w-2 h-2 rounded-full ${policyStatus?.status === 'ready'
-                                                                    ? 'bg-green-500'
+                                                                    ? 'bg-[var(--success-500)]'
                                                                     : policyStatus?.status === 'error'
-                                                                        ? 'bg-red-500'
+                                                                        ? 'bg-destructive'
                                                                         : policyStatus?.status === 'pending'
-                                                                            ? 'bg-yellow-500'
-                                                                            : 'bg-green-500'}` }) }), jsx(TooltipContent, { children: jsx("p", { className: "text-xs", children: policyStatus?.message || 'Policy is active' }) })] }), policy.spec.resource.kind || 'Untitled Policy'] }), jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [policy.spec.resource.apiGroup && (jsxs(Fragment, { children: [jsxs("span", { children: ["API Group: ", policy.spec.resource.apiGroup] }), jsx("span", { className: "text-muted-foreground/50", children: "\u2022" })] })), jsxs("span", { children: ["Resource: ", policyName] }), jsxs(Tooltip, { delayDuration: 500, children: [jsx(TooltipTrigger, { asChild: true, children: jsx("button", { onClick: handleCopyResourceName, className: "inline-flex items-center justify-center p-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-opacity cursor-pointer", "aria-label": "Copy resource name", children: isCopied ? (jsx(Check, { className: "h-3 w-3 text-green-600 dark:text-green-400" })) : (jsx(Copy, { className: "h-3 w-3 text-gray-500 dark:text-gray-400" })) }) }), jsx(TooltipContent, { children: jsx("p", { className: "text-xs", children: "Click to copy" }) })] })] })] }))] }), jsx("div", { className: "flex gap-3", children: onEdit && (jsxs(Button, { htmlType: "button", size: "small", onClick: onEdit, className: "bg-primary text-primary-foreground border-primary hover:bg-primary/90 hover:border-primary/90 h-7 text-xs", children: [jsx(SquarePen, { className: "h-3.5 w-3.5 mr-1.5" }), "Edit Policy"] })) })] }), jsx(ApiErrorAlert, { error: error, className: "mx-6 mt-4", errorFormatter: errorFormatter }), isUnhealthy && policyStatus && (jsxs(Alert, { variant: policyStatus.status === 'error' ? 'destructive' : 'warning', className: "mx-6 mt-4", children: [policyStatus.status === 'error' ? (jsx(CircleAlert, { className: "h-4 w-4" })) : (jsx(TriangleAlert, { className: "h-4 w-4" })), jsxs(AlertDescription, { children: [jsx("strong", { children: policyStatus.status === 'error' ? 'Policy Error: ' : 'Policy Pending: ' }), policyStatus.message] })] })), isLoading && (jsx(CardContent, { className: "p-6", children: jsx(PolicyActivityViewSkeleton, {}) })), !isLoading && policy && (jsx(CardContent, { className: "p-6", children: jsx(PolicyActivityView, { client: client, policyResource: policy.spec.resource, policyName: policyName, onResourceClick: onResourceClick, errorFormatter: errorFormatter }) }))] }) }));
+                                                                            ? 'bg-[var(--badge-warning)]'
+                                                                            : 'bg-[var(--success-500)]'}` }) }), jsx(TooltipContent, { children: jsx("p", { className: "text-xs", children: policyStatus?.message || 'Policy is active' }) })] }), policy.spec.resource.kind || 'Untitled Policy'] }), jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [policy.spec.resource.apiGroup && (jsxs(Fragment, { children: [jsxs("span", { children: ["API Group: ", policy.spec.resource.apiGroup] }), jsx("span", { className: "text-muted-foreground/50", children: "\u2022" })] })), jsxs("span", { children: ["Resource: ", policyName] }), jsxs(Tooltip, { delayDuration: 500, children: [jsx(TooltipTrigger, { asChild: true, children: jsx("button", { onClick: handleCopyResourceName, className: "inline-flex items-center justify-center p-0.5 rounded hover:bg-muted transition-opacity cursor-pointer", "aria-label": "Copy resource name", children: isCopied ? (jsx(Check, { className: "h-3 w-3 text-[var(--success-500)]" })) : (jsx(Copy, { className: "h-3 w-3 text-muted-foreground" })) }) }), jsx(TooltipContent, { children: jsx("p", { className: "text-xs", children: "Click to copy" }) })] })] })] }))] }), jsx("div", { className: "flex gap-3", children: onEdit && (jsxs(Button, { htmlType: "button", size: "small", onClick: onEdit, className: "bg-primary text-primary-foreground border-primary hover:bg-primary/90 hover:border-primary/90 h-7 text-xs", children: [jsx(SquarePen, { className: "h-3.5 w-3.5 mr-1.5" }), "Edit Policy"] })) })] }), jsx(ApiErrorAlert, { error: error, className: "mx-6 mt-4", errorFormatter: errorFormatter }), isUnhealthy && policyStatus && (jsxs(Alert, { variant: policyStatus.status === 'error' ? 'destructive' : 'warning', className: "mx-6 mt-4", children: [policyStatus.status === 'error' ? (jsx(CircleAlert, { className: "h-4 w-4" })) : (jsx(TriangleAlert, { className: "h-4 w-4" })), jsxs(AlertDescription, { children: [jsx("strong", { children: policyStatus.status === 'error' ? 'Policy Error: ' : 'Policy Pending: ' }), policyStatus.message] })] })), isLoading && (jsx(CardContent, { className: "p-6", children: jsx(PolicyActivityViewSkeleton, {}) })), !isLoading && policy && (jsx(CardContent, { className: "p-6", children: jsx(PolicyActivityView, { client: client, policyResource: policy.spec.resource, policyName: policyName, onResourceClick: onResourceClick, errorFormatter: errorFormatter }) }))] }) }));
 }
 
 /**
@@ -14030,7 +14407,7 @@ function PolicyEditView({ client, policyName, onSaveSuccess, onCancel, className
     };
     const policyStatus = getPolicyStatus();
     const isUnhealthy = policyStatus && policyStatus.status !== 'ready';
-    return (jsx(TooltipProvider, { delayDuration: 0, children: jsxs(Card, { className: `rounded-xl ${className}`, children: [jsxs(CardHeader, { className: "flex flex-row justify-between items-center p-4 border-b border-border space-y-0", children: [jsx("div", { className: "flex items-center gap-3", children: editor.isNew ? (jsxs("div", { className: "flex flex-col gap-0.5", children: [jsx(Label, { htmlFor: "policy-name", className: "text-xs text-muted-foreground", children: "Policy Name" }), jsx(Input, { id: "policy-name", type: "text", className: "w-[300px] text-base font-medium", value: editor.name, onChange: (e) => editor.setName(e.target.value), placeholder: "e.g., httpproxy-policy" })] })) : (jsxs("div", { className: "flex flex-col gap-0.5", children: [jsx("h2", { className: "m-0 text-xl font-semibold text-foreground leading-tight", children: editor.spec.resource.kind || 'Untitled Policy' }), jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [editor.spec.resource.apiGroup && (jsxs(Fragment, { children: [jsxs("span", { children: ["API Group: ", editor.spec.resource.apiGroup] }), jsx("span", { className: "text-muted-foreground/50", children: "\u2022" })] })), jsxs("span", { children: ["Resource: ", editor.name] }), jsxs(Tooltip, { delayDuration: 500, children: [jsx(TooltipTrigger, { asChild: true, children: jsx("button", { onClick: handleCopyResourceName, className: "inline-flex items-center justify-center p-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-opacity cursor-pointer", "aria-label": "Copy resource name", children: isCopied ? (jsx(Check, { className: "h-3 w-3 text-green-600 dark:text-green-400" })) : (jsx(Copy, { className: "h-3 w-3 text-gray-500 dark:text-gray-400" })) }) }), jsx(TooltipContent, { children: jsx("p", { className: "text-xs", children: "Click to copy" }) })] })] })] })) }), jsxs("div", { className: "flex gap-2", children: [onCancel && (jsx(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", onClick: onCancel, disabled: editor.isSaving, className: "h-7 text-xs", children: "Cancel" })), jsx(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", onClick: () => handleSave(true), disabled: !canSave || editor.isSaving, title: "Validate without saving", className: "h-7 text-xs", children: "Validate" }), jsx(Button, { htmlType: "button", size: "small", onClick: () => handleSave(false), disabled: !canSave || editor.isSaving || !editor.isDirty, className: "bg-primary text-primary-foreground border-primary hover:bg-primary/90 hover:border-primary/90 h-7 text-xs", children: editor.isSaving ? (jsxs(Fragment, { children: [jsx("span", { className: "w-3.5 h-3.5 border-2 border-border border-t-[#BF9595] rounded-full animate-spin" }), "Saving..."] })) : ('Save Policy') })] })] }), jsx(ApiErrorAlert, { error: editor.error, className: "mx-4 mt-3", errorFormatter: errorFormatter }), isUnhealthy && policyStatus && (jsxs(Alert, { variant: policyStatus.status === 'error' ? 'destructive' : 'warning', className: "mx-4 mt-3", children: [policyStatus.status === 'error' ? (jsx(CircleAlert, { className: "h-4 w-4" })) : (jsx(TriangleAlert, { className: "h-4 w-4" })), jsxs(AlertDescription, { children: [jsx("strong", { children: policyStatus.status === 'error' ? 'Policy Error: ' : 'Policy Pending: ' }), policyStatus.message] })] })), editor.isLoading && (jsxs("div", { className: "flex items-center justify-center gap-2 py-8 text-muted-foreground", children: [jsx("span", { className: "w-5 h-5 border-[3px] border-border border-t-[#BF9595] rounded-full animate-spin" }), "Loading policy..."] })), !editor.isLoading && (jsx(CardContent, { className: "p-4", children: jsxs("div", { className: "flex flex-col gap-4", children: [jsx(PolicyResourceForm, { resource: editor.spec.resource, onChange: editor.setResource, client: client, isEditMode: !editor.isNew }), jsx(PolicyRuleList, { auditRules: editor.spec.auditRules || [], eventRules: editor.spec.eventRules || [], policyResource: editor.spec.resource, apiClient: client, onAuditRulesChange: editor.setAuditRules, onEventRulesChange: editor.setEventRules }), !editor.isNew && (jsx("div", { className: "mt-6 pt-4 border-t border-border", children: jsx("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4", children: jsx("div", { className: "flex items-start gap-3", children: jsxs("div", { className: "flex-1", children: [jsxs("h3", { className: "text-base font-semibold text-foreground mb-1.5 flex items-center gap-2", children: [jsx(TriangleAlert, { className: "h-5 w-5 text-destructive" }), "Danger Zone"] }), jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: ["Deleting this policy will stop translating audit logs and events for", ' ', jsx("strong", { className: "text-foreground", children: editor.spec.resource.kind }), ' ', "resources. Existing activities will be preserved, but no new activities will be generated."] }), jsxs(Button, { type: "danger", theme: "solid", size: "small", onClick: () => setShowDeleteDialog(true), className: "h-8 text-xs", children: [jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })] }) }) }) }))] }) })), jsx(Dialog, { open: showDeleteDialog, onOpenChange: setShowDeleteDialog, children: jsxs(DialogContent, { className: "max-w-[500px]", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Delete Policy" }), jsxs(DialogDescription, { children: ["Are you sure you want to delete", ' ', jsx("strong", { className: "text-foreground", children: editor.name }), "?"] })] }), jsxs(Alert, { variant: "destructive", className: "mt-2", children: [jsx(CircleAlert, { className: "h-4 w-4" }), jsxs(AlertDescription, { children: [jsx("strong", { children: "This action cannot be undone." }), jsx("br", {}), "Activities already generated by this policy will remain in the system, but no new activities will be created for ", editor.spec.resource.kind, " resources."] })] }), jsxs(DialogFooter, { children: [jsx(Button, { type: "tertiary", theme: "outline", size: "small", onClick: () => setShowDeleteDialog(false), disabled: isDeleting, className: "h-8 text-xs", children: "Cancel" }), jsx(Button, { type: "danger", theme: "solid", size: "small", onClick: handleDelete, disabled: isDeleting, className: "h-8 text-xs", children: isDeleting ? (jsxs(Fragment, { children: [jsx("span", { className: "w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" }), "Deleting..."] })) : (jsxs(Fragment, { children: [jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })) })] })] }) })] }) }));
+    return (jsx(TooltipProvider, { delayDuration: 0, children: jsxs(Card, { className: `rounded-xl ${className}`, children: [jsxs(CardHeader, { className: "flex flex-row justify-between items-center p-4 border-b border-border space-y-0", children: [jsx("div", { className: "flex items-center gap-3", children: editor.isNew ? (jsxs("div", { className: "flex flex-col gap-0.5", children: [jsx(Label, { htmlFor: "policy-name", className: "text-xs text-muted-foreground", children: "Policy Name" }), jsx(Input, { id: "policy-name", type: "text", className: "w-[300px] text-base font-medium", value: editor.name, onChange: (e) => editor.setName(e.target.value), placeholder: "e.g., httpproxy-policy" })] })) : (jsxs("div", { className: "flex flex-col gap-0.5", children: [jsx("h2", { className: "m-0 text-xl font-semibold text-foreground leading-tight", children: editor.spec.resource.kind || 'Untitled Policy' }), jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [editor.spec.resource.apiGroup && (jsxs(Fragment, { children: [jsxs("span", { children: ["API Group: ", editor.spec.resource.apiGroup] }), jsx("span", { className: "text-muted-foreground/50", children: "\u2022" })] })), jsxs("span", { children: ["Resource: ", editor.name] }), jsxs(Tooltip, { delayDuration: 500, children: [jsx(TooltipTrigger, { asChild: true, children: jsx("button", { onClick: handleCopyResourceName, className: "inline-flex items-center justify-center p-0.5 rounded hover:bg-muted transition-opacity cursor-pointer", "aria-label": "Copy resource name", children: isCopied ? (jsx(Check, { className: "h-3 w-3 text-[var(--success-500)]" })) : (jsx(Copy, { className: "h-3 w-3 text-muted-foreground" })) }) }), jsx(TooltipContent, { children: jsx("p", { className: "text-xs", children: "Click to copy" }) })] })] })] })) }), jsxs("div", { className: "flex gap-2", children: [onCancel && (jsx(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", onClick: onCancel, disabled: editor.isSaving, className: "h-7 text-xs", children: "Cancel" })), jsx(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", onClick: () => handleSave(true), disabled: !canSave || editor.isSaving, title: "Validate without saving", className: "h-7 text-xs", children: "Validate" }), jsx(Button, { htmlType: "button", size: "small", onClick: () => handleSave(false), disabled: !canSave || editor.isSaving || !editor.isDirty, className: "bg-primary text-primary-foreground border-primary hover:bg-primary/90 hover:border-primary/90 h-7 text-xs", children: editor.isSaving ? (jsxs(Fragment, { children: [jsx("span", { className: "w-3.5 h-3.5 border-2 border-border border-t-[#BF9595] rounded-full animate-spin" }), "Saving..."] })) : ('Save Policy') })] })] }), jsx(ApiErrorAlert, { error: editor.error, className: "mx-4 mt-3", errorFormatter: errorFormatter }), isUnhealthy && policyStatus && (jsxs(Alert, { variant: policyStatus.status === 'error' ? 'destructive' : 'warning', className: "mx-4 mt-3", children: [policyStatus.status === 'error' ? (jsx(CircleAlert, { className: "h-4 w-4" })) : (jsx(TriangleAlert, { className: "h-4 w-4" })), jsxs(AlertDescription, { children: [jsx("strong", { children: policyStatus.status === 'error' ? 'Policy Error: ' : 'Policy Pending: ' }), policyStatus.message] })] })), editor.isLoading && (jsxs("div", { className: "flex items-center justify-center gap-2 py-8 text-muted-foreground", children: [jsx("span", { className: "w-5 h-5 border-[3px] border-border border-t-[#BF9595] rounded-full animate-spin" }), "Loading policy..."] })), !editor.isLoading && (jsx(CardContent, { className: "p-4", children: jsxs("div", { className: "flex flex-col gap-4", children: [jsx(PolicyResourceForm, { resource: editor.spec.resource, onChange: editor.setResource, client: client, isEditMode: !editor.isNew }), jsx(PolicyRuleList, { auditRules: editor.spec.auditRules || [], eventRules: editor.spec.eventRules || [], policyResource: editor.spec.resource, apiClient: client, onAuditRulesChange: editor.setAuditRules, onEventRulesChange: editor.setEventRules }), !editor.isNew && (jsx("div", { className: "mt-6 pt-4 border-t border-border", children: jsx("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4", children: jsx("div", { className: "flex items-start gap-3", children: jsxs("div", { className: "flex-1", children: [jsxs("h3", { className: "text-base font-semibold text-foreground mb-1.5 flex items-center gap-2", children: [jsx(TriangleAlert, { className: "h-5 w-5 text-destructive" }), "Danger Zone"] }), jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: ["Deleting this policy will stop translating audit logs and events for", ' ', jsx("strong", { className: "text-foreground", children: editor.spec.resource.kind }), ' ', "resources. Existing activities will be preserved, but no new activities will be generated."] }), jsxs(Button, { type: "danger", theme: "solid", size: "small", onClick: () => setShowDeleteDialog(true), className: "h-8 text-xs", children: [jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })] }) }) }) }))] }) })), jsx(Dialog, { open: showDeleteDialog, onOpenChange: setShowDeleteDialog, children: jsxs(DialogContent, { className: "max-w-[500px]", children: [jsxs(DialogHeader, { children: [jsx(DialogTitle, { children: "Delete Policy" }), jsxs(DialogDescription, { children: ["Are you sure you want to delete", ' ', jsx("strong", { className: "text-foreground", children: editor.name }), "?"] })] }), jsxs(Alert, { variant: "destructive", className: "mt-2", children: [jsx(CircleAlert, { className: "h-4 w-4" }), jsxs(AlertDescription, { children: [jsx("strong", { children: "This action cannot be undone." }), jsx("br", {}), "Activities already generated by this policy will remain in the system, but no new activities will be created for ", editor.spec.resource.kind, " resources."] })] }), jsxs(DialogFooter, { children: [jsx(Button, { type: "tertiary", theme: "outline", size: "small", onClick: () => setShowDeleteDialog(false), disabled: isDeleting, className: "h-8 text-xs", children: "Cancel" }), jsx(Button, { type: "danger", theme: "solid", size: "small", onClick: handleDelete, disabled: isDeleting, className: "h-8 text-xs", children: isDeleting ? (jsxs(Fragment, { children: [jsx("span", { className: "w-3.5 h-3.5 border-2 border-current border-t-transparent rounded-full animate-spin mr-2" }), "Deleting..."] })) : (jsxs(Fragment, { children: [jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })) })] })] }) })] }) }));
 }
 
 /**
@@ -14111,8 +14488,8 @@ function PolicyRuleEditor({ rule, index, ruleType, isHighlighted = false, onChan
         onChange({ ...rule, summary: example });
     };
     return (jsxs(Card, { className: `mb-3 transition-all duration-200 ${isHighlighted
-            ? 'border-emerald-600 bg-emerald-50'
-            : 'bg-muted'} ${className}`, children: [jsxs(CardHeader, { className: "flex flex-row justify-between items-center p-3 pb-0", children: [jsxs("span", { className: `text-xs font-semibold uppercase tracking-wide ${isHighlighted ? 'text-emerald-600' : 'text-muted-foreground'}`, children: [ruleType === 'audit' ? 'Audit' : 'Event', " Rule #", index + 1] }), jsx(Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "icon", className: "w-6 h-6 text-xl leading-none text-muted-foreground hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950/50 dark:hover:text-red-400", onClick: onDelete, title: "Delete rule", children: "\u00D7" })] }), jsxs(CardContent, { className: "p-3", children: [jsxs("div", { className: "mb-3", children: [jsxs("div", { className: "flex justify-between items-center mb-1", children: [jsx(Label, { htmlFor: `rule-${index}-match`, children: "Match Expression (CEL)" }), jsx(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", className: "px-2 py-0.5 h-auto text-xs", onClick: () => setShowMatchHelp(!showMatchHelp), children: showMatchHelp ? 'Hide Help' : 'Show Help' })] }), jsx(Textarea, { id: `rule-${index}-match`, className: "font-mono text-sm resize-y min-h-[60px]", value: rule.match, onChange: handleMatchChange, placeholder: `e.g., ${celHelp.examples[0]}`, rows: 2, spellCheck: false }), showMatchHelp && (jsxs("div", { className: "mt-2 p-3 bg-background border border-border rounded-md text-xs", children: [jsxs("div", { className: "mb-3 last:mb-0", children: [jsx("strong", { className: "block mb-1.5 text-foreground", children: "Available Variables:" }), jsx("ul", { className: "m-0 pl-5 list-disc", children: celHelp.variables.map((v) => (jsxs("li", { className: "mb-0.5", children: [jsx("code", { className: "bg-muted px-1.5 py-0.5 rounded text-xs", children: v.name }), " - ", v.description] }, v.name))) })] }), jsxs("div", { className: "mb-3 last:mb-0", children: [jsx("strong", { className: "block mb-1.5 text-foreground", children: "Examples:" }), jsx("ul", { className: "m-0 p-0 list-none", children: celHelp.examples.map((ex, i) => (jsxs("li", { className: "flex items-center gap-2 mb-1 px-2 py-1 bg-muted rounded", children: [jsx("code", { className: "flex-1 text-xs break-all", children: ex }), jsx(Button, { htmlType: "button", size: "small", className: "px-2 py-0.5 h-auto bg-primary text-primary-foreground border-none text-xs font-medium uppercase hover:bg-primary/90", onClick: () => insertMatchExample(ex), children: "Use" })] }, i))) })] })] }))] }), jsxs("div", { className: "mb-3 last:mb-0", children: [jsxs("div", { className: "flex justify-between items-center mb-1", children: [jsx(Label, { htmlFor: `rule-${index}-summary`, children: "Summary Template (CEL)" }), jsx(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", className: "px-2 py-0.5 h-auto text-xs", onClick: () => setShowSummaryHelp(!showSummaryHelp), children: showSummaryHelp ? 'Hide Help' : 'Show Help' })] }), jsx(Textarea, { id: `rule-${index}-summary`, className: "font-mono text-sm resize-y min-h-[60px]", value: rule.summary, onChange: handleSummaryChange, placeholder: `e.g., ${SUMMARY_HELP.examples[0]}`, rows: 2, spellCheck: false }), showSummaryHelp && (jsxs("div", { className: "mt-2 p-3 bg-background border border-border rounded-md text-xs", children: [jsxs("div", { className: "mb-3 last:mb-0", children: [jsx("strong", { className: "block mb-1.5 text-foreground", children: "Available Variables:" }), jsx("ul", { className: "m-0 pl-5 list-disc", children: SUMMARY_HELP.variables.map((v) => (jsxs("li", { className: "mb-0.5", children: [jsx("code", { className: "bg-muted px-1.5 py-0.5 rounded text-xs", children: '{{ ' + v.name + ' }}' }), " - ", v.description] }, v.name))) })] }), jsxs("div", { className: "mb-3 last:mb-0", children: [jsx("strong", { className: "block mb-1.5 text-foreground", children: "Examples:" }), jsx("ul", { className: "m-0 p-0 list-none", children: SUMMARY_HELP.examples.map((ex, i) => (jsxs("li", { className: "flex items-center gap-2 mb-1 px-2 py-1 bg-muted rounded", children: [jsx("code", { className: "flex-1 text-xs break-all", children: ex }), jsx(Button, { htmlType: "button", size: "small", className: "px-2 py-0.5 h-auto bg-primary text-primary-foreground border-none text-xs font-medium uppercase hover:bg-primary/90", onClick: () => insertSummaryExample(ex), children: "Use" })] }, i))) })] })] }))] })] })] }));
+            ? 'border-[var(--success-500)] bg-[var(--success-100)]'
+            : 'bg-muted'} ${className}`, children: [jsxs(CardHeader, { className: "flex flex-row justify-between items-center p-3 pb-0", children: [jsxs("span", { className: `text-xs font-semibold uppercase tracking-wide ${isHighlighted ? 'text-[var(--success-500)]' : 'text-muted-foreground'}`, children: [ruleType === 'audit' ? 'Audit' : 'Event', " Rule #", index + 1] }), jsx(Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "icon", className: "w-6 h-6 text-xl leading-none text-muted-foreground hover:bg-destructive/10 hover:text-destructive", onClick: onDelete, title: "Delete rule", children: "\u00D7" })] }), jsxs(CardContent, { className: "p-3", children: [jsxs("div", { className: "mb-3", children: [jsxs("div", { className: "flex justify-between items-center mb-1", children: [jsx(Label, { htmlFor: `rule-${index}-match`, children: "Match Expression (CEL)" }), jsx(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", className: "px-2 py-0.5 h-auto text-xs", onClick: () => setShowMatchHelp(!showMatchHelp), children: showMatchHelp ? 'Hide Help' : 'Show Help' })] }), jsx(Textarea, { id: `rule-${index}-match`, className: "font-mono text-sm resize-y min-h-[60px]", value: rule.match, onChange: handleMatchChange, placeholder: `e.g., ${celHelp.examples[0]}`, rows: 2, spellCheck: false }), showMatchHelp && (jsxs("div", { className: "mt-2 p-3 bg-background border border-border rounded-md text-xs", children: [jsxs("div", { className: "mb-3 last:mb-0", children: [jsx("strong", { className: "block mb-1.5 text-foreground", children: "Available Variables:" }), jsx("ul", { className: "m-0 pl-5 list-disc", children: celHelp.variables.map((v) => (jsxs("li", { className: "mb-0.5", children: [jsx("code", { className: "bg-muted px-1.5 py-0.5 rounded text-xs", children: v.name }), " - ", v.description] }, v.name))) })] }), jsxs("div", { className: "mb-3 last:mb-0", children: [jsx("strong", { className: "block mb-1.5 text-foreground", children: "Examples:" }), jsx("ul", { className: "m-0 p-0 list-none", children: celHelp.examples.map((ex, i) => (jsxs("li", { className: "flex items-center gap-2 mb-1 px-2 py-1 bg-muted rounded", children: [jsx("code", { className: "flex-1 text-xs break-all", children: ex }), jsx(Button, { htmlType: "button", size: "small", className: "px-2 py-0.5 h-auto bg-primary text-primary-foreground border-none text-xs font-medium uppercase hover:bg-primary/90", onClick: () => insertMatchExample(ex), children: "Use" })] }, i))) })] })] }))] }), jsxs("div", { className: "mb-3 last:mb-0", children: [jsxs("div", { className: "flex justify-between items-center mb-1", children: [jsx(Label, { htmlFor: `rule-${index}-summary`, children: "Summary Template (CEL)" }), jsx(Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", className: "px-2 py-0.5 h-auto text-xs", onClick: () => setShowSummaryHelp(!showSummaryHelp), children: showSummaryHelp ? 'Hide Help' : 'Show Help' })] }), jsx(Textarea, { id: `rule-${index}-summary`, className: "font-mono text-sm resize-y min-h-[60px]", value: rule.summary, onChange: handleSummaryChange, placeholder: `e.g., ${SUMMARY_HELP.examples[0]}`, rows: 2, spellCheck: false }), showSummaryHelp && (jsxs("div", { className: "mt-2 p-3 bg-background border border-border rounded-md text-xs", children: [jsxs("div", { className: "mb-3 last:mb-0", children: [jsx("strong", { className: "block mb-1.5 text-foreground", children: "Available Variables:" }), jsx("ul", { className: "m-0 pl-5 list-disc", children: SUMMARY_HELP.variables.map((v) => (jsxs("li", { className: "mb-0.5", children: [jsx("code", { className: "bg-muted px-1.5 py-0.5 rounded text-xs", children: '{{ ' + v.name + ' }}' }), " - ", v.description] }, v.name))) })] }), jsxs("div", { className: "mb-3 last:mb-0", children: [jsx("strong", { className: "block mb-1.5 text-foreground", children: "Examples:" }), jsx("ul", { className: "m-0 p-0 list-none", children: SUMMARY_HELP.examples.map((ex, i) => (jsxs("li", { className: "flex items-center gap-2 mb-1 px-2 py-1 bg-muted rounded", children: [jsx("code", { className: "flex-1 text-xs break-all", children: ex }), jsx(Button, { htmlType: "button", size: "small", className: "px-2 py-0.5 h-auto bg-primary text-primary-foreground border-none text-xs font-medium uppercase hover:bg-primary/90", onClick: () => insertSummaryExample(ex), children: "Use" })] }, i))) })] })] }))] })] })] }));
 }
 
 /**
@@ -14770,7 +15147,7 @@ function ReindexJobList({ client, onViewJob, onCreateJob, watch = true, classNam
         const bTime = b.metadata?.creationTimestamp || '';
         return bTime.localeCompare(aTime);
     });
-    return (jsxs(Card, { className: `rounded-xl ${className}`, children: [jsxs(CardHeader, { className: "pb-1.5", children: [jsxs("div", { className: "flex justify-between items-center", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("p", { className: "text-sm text-muted-foreground m-0", children: "Re-process historical events through updated policies" }), isWatching && (jsxs(Badge, { variant: "success", className: "text-xs", children: [jsx("span", { className: "w-1.5 h-1.5 bg-green-500 rounded-full mr-1.5 animate-pulse" }), "Live"] }))] }), jsxs("div", { className: "flex gap-1.5", children: [jsx(Button, { type: "tertiary", theme: "outline", size: "small", onClick: refresh, disabled: isLoading, title: "Refresh job list", className: "h-7 px-2", children: isLoading ? (jsx("span", { className: "w-3.5 h-3.5 border-2 border-border border-t-primary rounded-full animate-spin" })) : ('↻') }), onCreateJob && (jsx(Button, { size: "small", onClick: onCreateJob, className: "bg-primary text-primary-foreground hover:bg-primary/90 h-7 text-xs", children: "+ Create Job" }))] })] }), jsx(Separator, { className: "mt-1.5" })] }), jsxs(CardContent, { className: "pt-3", children: [jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-3", errorFormatter: errorFormatter }), isLoading && jobs.length === 0 && (jsx("div", { className: "border border-input rounded-lg overflow-hidden", children: jsxs("table", { className: "w-full border-collapse text-sm", children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: "text-left px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap", children: "Job Name" }), jsx("th", { className: "text-center px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap w-24", children: "Status" }), jsx("th", { className: "text-left px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap", children: "Message" }), jsx("th", { className: "text-center px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap w-24", children: "Duration" }), jsx("th", { className: "text-center px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap w-24", children: "Actions" })] }) }), jsxs("tbody", { children: [jsx(ReindexJobSkeletonRow, {}), jsx(ReindexJobSkeletonRow, {}), jsx(ReindexJobSkeletonRow, {})] })] }) })), !isLoading && !error && jobs.length === 0 && (jsxs("div", { className: "text-center py-8 px-6 text-muted-foreground", children: [jsx("div", { className: "text-4xl mb-3", children: "\uD83D\uDD04" }), jsx("h3", { className: "m-0 mb-1.5 text-foreground", children: "No reindex jobs found" }), jsx("p", { className: "m-0 mb-4 max-w-[400px] mx-auto", children: "Create a reindex job to re-process historical audit logs and events through current ActivityPolicy rules." }), onCreateJob && (jsx(Button, { size: "small", onClick: onCreateJob, className: "bg-primary text-primary-foreground hover:bg-primary/90 h-7 text-xs", children: "Create your first reindex job" }))] })), sortedJobs.length > 0 && (jsx("div", { className: "border border-input rounded-lg overflow-hidden", children: jsxs("table", { className: "w-full border-collapse text-sm", children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: "text-left px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap", children: "Job Name" }), jsx("th", { className: "text-center px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap w-24", children: "Status" }), jsx("th", { className: "text-left px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap", children: "Message" }), jsx("th", { className: "text-center px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap w-24", children: "Duration" }), jsx("th", { className: "text-center px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap w-24", children: "Actions" })] }) }), jsx("tbody", { children: sortedJobs.map((job) => {
+    return (jsxs(Card, { className: `rounded-xl ${className}`, children: [jsxs(CardHeader, { className: "pb-1.5", children: [jsxs("div", { className: "flex justify-between items-center", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("p", { className: "text-sm text-muted-foreground m-0", children: "Re-process historical events through updated policies" }), isWatching && (jsxs(Badge, { variant: "success", className: "text-xs", children: [jsx("span", { className: "w-1.5 h-1.5 bg-[var(--success-500)] rounded-full mr-1.5 animate-pulse" }), "Live"] }))] }), jsxs("div", { className: "flex gap-1.5", children: [jsx(Button, { type: "tertiary", theme: "outline", size: "small", onClick: refresh, disabled: isLoading, title: "Refresh job list", className: "h-7 px-2", children: isLoading ? (jsx("span", { className: "w-3.5 h-3.5 border-2 border-border border-t-primary rounded-full animate-spin" })) : ('↻') }), onCreateJob && (jsx(Button, { size: "small", onClick: onCreateJob, className: "bg-primary text-primary-foreground hover:bg-primary/90 h-7 text-xs", children: "+ Create Job" }))] })] }), jsx(Separator, { className: "mt-1.5" })] }), jsxs(CardContent, { className: "pt-3", children: [jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-3", errorFormatter: errorFormatter }), isLoading && jobs.length === 0 && (jsx("div", { className: "border border-input rounded-lg overflow-hidden", children: jsxs("table", { className: "w-full border-collapse text-sm", children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: "text-left px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap", children: "Job Name" }), jsx("th", { className: "text-center px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap w-24", children: "Status" }), jsx("th", { className: "text-left px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap", children: "Message" }), jsx("th", { className: "text-center px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap w-24", children: "Duration" }), jsx("th", { className: "text-center px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap w-24", children: "Actions" })] }) }), jsxs("tbody", { children: [jsx(ReindexJobSkeletonRow, {}), jsx(ReindexJobSkeletonRow, {}), jsx(ReindexJobSkeletonRow, {})] })] }) })), !isLoading && !error && jobs.length === 0 && (jsxs("div", { className: "text-center py-8 px-6 text-muted-foreground", children: [jsx("div", { className: "text-4xl mb-3", children: "\uD83D\uDD04" }), jsx("h3", { className: "m-0 mb-1.5 text-foreground", children: "No reindex jobs found" }), jsx("p", { className: "m-0 mb-4 max-w-[400px] mx-auto", children: "Create a reindex job to re-process historical audit logs and events through current ActivityPolicy rules." }), onCreateJob && (jsx(Button, { size: "small", onClick: onCreateJob, className: "bg-primary text-primary-foreground hover:bg-primary/90 h-7 text-xs", children: "Create your first reindex job" }))] })), sortedJobs.length > 0 && (jsx("div", { className: "border border-input rounded-lg overflow-hidden", children: jsxs("table", { className: "w-full border-collapse text-sm", children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: "text-left px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap", children: "Job Name" }), jsx("th", { className: "text-center px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap w-24", children: "Status" }), jsx("th", { className: "text-left px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap", children: "Message" }), jsx("th", { className: "text-center px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap w-24", children: "Duration" }), jsx("th", { className: "text-center px-3 py-2 bg-muted text-muted-foreground font-medium border-b border-input text-xs whitespace-nowrap w-24", children: "Actions" })] }) }), jsx("tbody", { children: sortedJobs.map((job) => {
                                         const duration = getReindexJobDuration(job);
                                         return (jsxs("tr", { className: "hover:bg-muted transition-colors", children: [jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0", children: jsx("span", { className: "text-xs font-medium font-mono", children: job.metadata?.name }) }), jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0 text-center", children: jsxs(Badge, { variant: getPhaseBadgeVariant(job.status?.phase), className: "inline-flex items-center gap-1", children: [getPhaseIcon$1(job.status?.phase), job.status?.phase || 'Unknown'] }) }), jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0", children: job.status?.phase === 'Failed' ? (jsx("span", { className: "text-xs text-destructive", children: job.status?.message || 'Job failed' })) : (jsx("span", { className: "text-xs text-muted-foreground", children: job.status?.message || 'Waiting to start' })) }), jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0 text-center", children: jsx("span", { className: "text-xs text-muted-foreground", children: duration || '-' }) }), jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0 text-center", children: onViewJob && (jsx(Button, { type: "quaternary", theme: "borderless", size: "small", onClick: () => onViewJob(job.metadata?.name || ''), className: "h-7 px-2", title: "View job details", children: jsx(Eye, { className: "h-3.5 w-3.5" }) })) })] }, job.metadata?.name));
                                     }) })] }) }))] })] }));
@@ -14782,11 +15159,11 @@ function ReindexJobList({ client, onViewJob, onCreateJob, watch = true, classNam
 function getPhaseIcon(phase) {
     switch (phase) {
         case 'Succeeded':
-            return jsx(CircleCheck, { className: "h-8 w-8 text-green-500" });
+            return jsx(CircleCheck, { className: "h-8 w-8 text-[var(--success-500)]" });
         case 'Failed':
-            return jsx(CircleX, { className: "h-8 w-8 text-red-500" });
+            return jsx(CircleX, { className: "h-8 w-8 text-destructive" });
         case 'Running':
-            return jsx(LoaderCircle, { className: "h-8 w-8 text-blue-500 animate-spin" });
+            return jsx(LoaderCircle, { className: "h-8 w-8 text-[var(--info-500)] animate-spin" });
         case 'Pending':
         default:
             return jsx(Clock, { className: "h-8 w-8 text-muted-foreground" });
@@ -14867,7 +15244,7 @@ function ReindexJobDetailView({ client, jobName, onDelete, watch = true, classNa
     const duration = job ? getReindexJobDuration(job) : null;
     const statusMessage = job ? getReindexJobStatusMessage(job) : '';
     const isTerminal = job ? isReindexJobTerminal(job) : false;
-    return (jsxs(Card, { className: `rounded-xl max-w-md ${className}`, children: [jsxs(CardHeader, { className: "flex flex-row justify-between items-start p-6 border-b border-border space-y-0", children: [jsxs("div", { className: "flex items-center gap-4", children: [isLoading ? (jsx(Skeleton, { className: "h-8 w-8 rounded-full" })) : (getPhaseIcon(job?.status?.phase)), jsx("div", { children: isLoading ? (jsxs(Fragment, { children: [jsx(Skeleton, { className: "h-5 w-32 mb-2" }), jsx(Skeleton, { className: "h-3 w-24" })] })) : (jsxs(Fragment, { children: [jsx("h2", { className: "text-lg font-semibold text-foreground m-0", children: statusMessage }), jsxs("p", { className: "text-xs text-muted-foreground m-0", children: [duration && jsx(Fragment, { children: duration }), isWatching && !isTerminal && (jsx(Badge, { variant: "outline", className: "ml-2 text-xs text-green-600 border-green-300", children: "Live" }))] })] })) })] }), isTerminal && onDelete && (jsx(Button, { type: "quaternary", theme: "borderless", size: "small", onClick: handleDelete, disabled: isDeleting, className: "h-8 w-8 p-0", children: isDeleting ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" })) : (jsx(Trash2, { className: "h-4 w-4" })) }))] }), jsx(ApiErrorAlert, { error: error, onRetry: loadJob, className: "mx-6 mt-4", errorFormatter: errorFormatter }), !isLoading && job && (jsxs(CardContent, { className: "p-6 space-y-4", children: [job.status?.phase === 'Failed' && job.status?.message && (jsx("div", { className: "p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700", children: job.status.message })), jsxs("div", { children: [jsx("div", { className: "text-xs text-muted-foreground mb-1", children: "Time Range" }), jsxs("div", { className: "text-sm font-mono", children: [job.spec.timeRange.startTime, job.spec.timeRange.endTime && jsxs(Fragment, { children: [" \u2192 ", job.spec.timeRange.endTime] })] })] }), job.spec.policySelector?.names && (jsxs("div", { children: [jsx("div", { className: "text-xs text-muted-foreground mb-1", children: "Policy" }), jsx("div", { className: "flex flex-wrap gap-1", children: job.spec.policySelector.names.map((name) => (jsx(Badge, { variant: "secondary", className: "text-xs font-mono", children: name }, name))) })] }))] }))] }));
+    return (jsxs(Card, { className: `rounded-xl max-w-md ${className}`, children: [jsxs(CardHeader, { className: "flex flex-row justify-between items-start p-6 border-b border-border space-y-0", children: [jsxs("div", { className: "flex items-center gap-4", children: [isLoading ? (jsx(Skeleton, { className: "h-8 w-8 rounded-full" })) : (getPhaseIcon(job?.status?.phase)), jsx("div", { children: isLoading ? (jsxs(Fragment, { children: [jsx(Skeleton, { className: "h-5 w-32 mb-2" }), jsx(Skeleton, { className: "h-3 w-24" })] })) : (jsxs(Fragment, { children: [jsx("h2", { className: "text-lg font-semibold text-foreground m-0", children: statusMessage }), jsxs("p", { className: "text-xs text-muted-foreground m-0", children: [duration && jsx(Fragment, { children: duration }), isWatching && !isTerminal && (jsx(Badge, { variant: "outline", className: "ml-2 text-xs text-[var(--success-500)] border-[var(--success-300)]", children: "Live" }))] })] })) })] }), isTerminal && onDelete && (jsx(Button, { type: "quaternary", theme: "borderless", size: "small", onClick: handleDelete, disabled: isDeleting, className: "h-8 w-8 p-0", children: isDeleting ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" })) : (jsx(Trash2, { className: "h-4 w-4" })) }))] }), jsx(ApiErrorAlert, { error: error, onRetry: loadJob, className: "mx-6 mt-4", errorFormatter: errorFormatter }), !isLoading && job && (jsxs(CardContent, { className: "p-6 space-y-4", children: [job.status?.phase === 'Failed' && job.status?.message && (jsx("div", { className: "p-3 bg-destructive/10 border border-destructive/30 rounded-lg text-sm text-destructive", children: job.status.message })), jsxs("div", { children: [jsx("div", { className: "text-xs text-muted-foreground mb-1", children: "Time Range" }), jsxs("div", { className: "text-sm font-mono", children: [job.spec.timeRange.startTime, job.spec.timeRange.endTime && jsxs(Fragment, { children: [" \u2192 ", job.spec.timeRange.endTime] })] })] }), job.spec.policySelector?.names && (jsxs("div", { children: [jsx("div", { className: "text-xs text-muted-foreground mb-1", children: "Policy" }), jsx("div", { className: "flex flex-wrap gap-1", children: job.spec.policySelector.names.map((name) => (jsx(Badge, { variant: "secondary", className: "text-xs font-mono", children: name }, name))) })] }))] }))] }));
 }
 
 const TIME_RANGE_OPTIONS$1 = [
@@ -14970,76 +15347,11 @@ function ReindexJobDialog({ client, policyName, open, onOpenChange, onSuccess, e
     return (jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxs(DialogContent, { className: "sm:max-w-sm", children: [jsx(DialogHeader, { children: jsxs("div", { className: "flex items-center gap-3", children: [jsx("div", { className: "p-2 bg-primary/10 rounded-lg", children: jsx(RefreshCw, { className: "h-5 w-5 text-primary" }) }), jsxs("div", { children: [jsx(DialogTitle, { children: "Reindex Policy" }), jsxs(DialogDescription, { className: "text-xs", children: ["Re-process events for \"", policyName, "\""] })] })] }) }), jsxs("div", { className: "space-y-4 py-2", children: [jsx(ApiErrorAlert, { error: error, errorFormatter: errorFormatter }), jsxs("div", { children: [jsx("label", { className: "block text-sm font-medium text-foreground mb-2", children: "Time range" }), jsxs(Select, { value: selectedRange, onValueChange: setSelectedRange, children: [jsx(SelectTrigger, { className: "w-full", children: jsx(SelectValue, { placeholder: "Select time range" }) }), jsx(SelectContent, { children: TIME_RANGE_OPTIONS.map((option) => (jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] }), jsxs("p", { className: "text-sm text-muted-foreground", children: ["Events from ", selectedOption?.label.toLowerCase(), " will be re-processed."] })] }), jsxs("div", { className: "flex justify-end gap-2", children: [jsx(Button, { htmlType: "button", type: "tertiary", theme: "outline", onClick: () => onOpenChange(false), disabled: isSubmitting, children: "Cancel" }), jsx(Button, { htmlType: "button", onClick: handleSubmit, disabled: isSubmitting, children: isSubmitting ? (jsxs(Fragment, { children: [jsx(LoaderCircle, { className: "h-4 w-4 mr-2 animate-spin" }), "Starting..."] })) : ('Start Reindex') })] })] }) }));
 }
 
-/**
- * Multi-select combobox component with type-ahead search and fuzzy matching.
- * Built on cmdk for search functionality and Radix Popover for positioning.
- */
-function MultiCombobox({ options, values, onValuesChange, placeholder = 'Select...', searchPlaceholder = 'Search...', emptyMessage = 'No results found.', disabled = false, loading = false, className, maxDisplayed = 2, }) {
-    const [open, setOpen] = React.useState(false);
-    const [search, setSearch] = React.useState('');
-    // Find selected options for display
-    const selectedOptions = options.filter((opt) => values.includes(opt.value));
-    const displayValue = React.useMemo(() => {
-        if (loading)
-            return 'Loading...';
-        if (selectedOptions.length === 0)
-            return placeholder;
-        if (selectedOptions.length <= maxDisplayed) {
-            return selectedOptions.map((opt) => opt.label).join(', ');
-        }
-        return `${selectedOptions.slice(0, maxDisplayed).map((opt) => opt.label).join(', ')} +${selectedOptions.length - maxDisplayed} more`;
-    }, [loading, selectedOptions, placeholder, maxDisplayed]);
-    const handleSelect = React.useCallback((selectedValue) => {
-        if (values.includes(selectedValue)) {
-            // Remove from selection
-            onValuesChange(values.filter((v) => v !== selectedValue));
-        }
-        else {
-            // Add to selection
-            onValuesChange([...values, selectedValue]);
-        }
-    }, [onValuesChange, values]);
-    const handleClear = React.useCallback((e) => {
-        e.stopPropagation();
-        onValuesChange([]);
-    }, [onValuesChange]);
-    const handleRemove = React.useCallback((e, valueToRemove) => {
-        e.stopPropagation();
-        onValuesChange(values.filter((v) => v !== valueToRemove));
-    }, [onValuesChange, values]);
-    // Custom fuzzy filter function
-    const filterOptions = React.useCallback((optionValue, searchQuery) => {
-        if (!searchQuery)
-            return 1;
-        const option = options.find((o) => o.value === optionValue);
-        const label = option?.label || optionValue;
-        const lowerLabel = label.toLowerCase();
-        const lowerSearch = searchQuery.toLowerCase();
-        // Exact match
-        if (lowerLabel === lowerSearch)
-            return 1;
-        // Starts with
-        if (lowerLabel.startsWith(lowerSearch))
-            return 0.9;
-        // Contains
-        if (lowerLabel.includes(lowerSearch))
-            return 0.8;
-        // Fuzzy match - check if all search chars appear in order
-        let searchIdx = 0;
-        for (let i = 0; i < lowerLabel.length && searchIdx < lowerSearch.length; i++) {
-            if (lowerLabel[i] === lowerSearch[searchIdx]) {
-                searchIdx++;
-            }
-        }
-        if (searchIdx === lowerSearch.length)
-            return 0.6;
-        return 0;
-    }, [options]);
-    return (jsxs(Popover.Root, { open: open, onOpenChange: setOpen, children: [jsx(Popover.Trigger, { asChild: true, children: jsxs("button", { type: "button", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", disabled: disabled || loading, className: cn('flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background', 'placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', 'whitespace-nowrap', className), children: [jsx("span", { className: "truncate text-left flex-1", children: displayValue }), jsxs("div", { className: "flex items-center gap-1 ml-2", children: [values.length > 0 && !disabled && (jsx("span", { role: "button", tabIndex: 0, onClick: handleClear, onKeyDown: (e) => {
-                                        if (e.key === 'Enter' || e.key === ' ') {
-                                            handleClear(e);
-                                        }
-                                    }, className: "rounded-sm opacity-50 hover:opacity-100 cursor-pointer", children: jsx(X, { className: "h-3 w-3" }) })), jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })] })] }) }), jsx(Popover.Portal, { children: jsx(Popover.Content, { className: cn('z-50 min-w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-md border shadow-md', 'bg-white dark:bg-slate-900 text-foreground', '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: jsxs(Command, { filter: filterOptions, className: "w-full", children: [jsx("div", { className: "flex items-center border-b px-3", children: jsx(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 && (jsx("div", { className: "flex flex-wrap gap-1 p-2 border-b", children: selectedOptions.map((option) => (jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-secondary text-secondary-foreground text-xs", children: [option.label, jsx("button", { type: "button", onClick: (e) => handleRemove(e, option.value), className: "rounded-sm hover:bg-secondary-foreground/20", children: jsx(X, { className: "h-3 w-3" }) })] }, option.value))) })), jsxs(CommandList, { className: "max-h-[300px] overflow-y-auto p-1", children: [jsx(CommandEmpty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }), jsx(CommandGroup, { children: options.map((option) => (jsxs(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: [jsx(Check, { className: cn('mr-2 h-4 w-4', values.includes(option.value) ? 'opacity-100' : 'opacity-0') }), jsx("span", { className: "flex-1 truncate", children: option.label }), option.count !== undefined && (jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value))) })] })] }) }) })] }));
+function MultiCombobox({ options, values, onValuesChange, placeholder = 'Select…', 
+// searchPlaceholder is accepted for API compatibility but MultiSelect has no counterpart.
+emptyMessage = 'No results', disabled, loading, className, maxDisplayed = 3, }) {
+    const items = React.useMemo(() => options.map((o) => ({ value: o.value, label: o.label })), [options]);
+    return (jsx(MultiSelect, { className: className, options: items, value: values, onValueChange: onValuesChange, placeholder: placeholder, emptyContent: emptyMessage, isLoading: loading, disabled: disabled, maxCount: maxDisplayed }));
 }
 
 /**
@@ -15749,7 +16061,7 @@ class ActivityApiClient {
                 const reader = response.body.getReader();
                 const decoder = new TextDecoder();
                 let buffer = '';
-                while (true) {
+                for (;;) {
                     const { done, value } = await reader.read();
                     if (done) {
                         options?.onClose?.();
@@ -16149,7 +16461,7 @@ class ActivityApiClient {
                 const reader = response.body.getReader();
                 const decoder = new TextDecoder();
                 let buffer = '';
-                while (true) {
+                for (;;) {
                     const { done, value } = await reader.read();
                     if (done) {
                         options?.onClose?.();
@@ -16265,7 +16577,7 @@ class ActivityApiClient {
                 const reader = response.body.getReader();
                 const decoder = new TextDecoder();
                 let buffer = '';
-                while (true) {
+                for (;;) {
                     const { done, value } = await reader.read();
                     if (done) {
                         options?.onClose?.();
@@ -16501,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