@datum-cloud/activity-ui 0.5.0 → 0.5.1-dev.7e7e319

package/dist/index.js

@@ -9,9 +9,12 @@ var label = require('@datum-cloud/datum-ui/label');
 var separator = require('@datum-cloud/datum-ui/separator');
 var textarea = require('@datum-cloud/datum-ui/textarea');
 var badge = require('@datum-cloud/datum-ui/badge');
-var cmdk = require('cmdk');
-var Popover = require('@radix-ui/react-popover');
+var autocomplete = require('@datum-cloud/datum-ui/autocomplete');
 var checkbox = require('@datum-cloud/datum-ui/checkbox');
+var picker = require('@datum-cloud/datum-ui/picker');
+var command = require('@datum-cloud/datum-ui/command');
+var popover = require('@datum-cloud/datum-ui/popover');
+var buttonGroup = require('@datum-cloud/datum-ui/button-group');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var table = require('@datum-cloud/datum-ui/table');
 var skeleton = require('@datum-cloud/datum-ui/skeleton');
@@ -20,6 +23,7 @@ var select = require('@datum-cloud/datum-ui/select');
 var sheet = require('@datum-cloud/datum-ui/sheet');
 var tabs = require('@datum-cloud/datum-ui/tabs');
 var dialog = require('@datum-cloud/datum-ui/dialog');
+var multiSelect = require('@datum-cloud/datum-ui/multi-select');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -39,7 +43,6 @@ function _interopNamespaceDefault(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-var Popover__namespace = /*#__PURE__*/_interopNamespaceDefault(Popover);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);
 
 /**
@@ -213,7 +216,7 @@ function FilterBuilder({ onFilterChange, initialFilter = '', initialLimit = 100,
         const newFilter = filter ? `${filter} && ${example}` : example;
         handleFilterChange(newFilter);
     };
-    return (jsxRuntime.jsxs(card.Card, { className: `mb-6 ${className}`, children: [jsxRuntime.jsx(card.CardHeader, { className: "pb-4", children: jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsx("h3", { className: "m-0 text-2xl font-semibold text-foreground", children: "Build Your Query" }), jsxRuntime.jsxs(button.Button, { onClick: () => setShowHelp(!showHelp), type: "tertiary", theme: "outline", htmlType: "button", children: [showHelp ? 'Hide' : 'Show', " Help"] })] }) }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsxs(card.CardContent, { className: "pt-6", children: [showHelp && (jsxRuntime.jsxs("div", { className: "bg-muted p-6 rounded-lg mb-6 max-h-[400px] overflow-y-auto border border-border", children: [jsxRuntime.jsx("h4", { className: "text-base font-semibold text-foreground", children: "Available Filter Fields" }), jsxRuntime.jsx("div", { className: "mt-4", children: FILTER_FIELDS.map((field) => (jsxRuntime.jsxs("div", { className: "mb-6 pb-4 border-b border-border last:border-b-0", children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-2", children: [jsxRuntime.jsx("strong", { className: "text-foreground", children: field.name }), jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground italic", children: field.type })] }), jsxRuntime.jsx("p", { className: "my-2 text-muted-foreground", children: field.description }), field.examples && field.examples.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2", children: [jsxRuntime.jsx("strong", { className: "text-foreground", children: "Examples:" }), field.examples.map((example, idx) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 my-2", children: [jsxRuntime.jsx("code", { className: "flex-1 px-2 py-1 bg-background rounded text-sm font-mono", children: example }), jsxRuntime.jsx(button.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))) }), jsxRuntime.jsxs("div", { className: "mt-4", children: [jsxRuntime.jsx("h4", { className: "mb-2 text-base font-semibold text-foreground", children: "Common Operators" }), jsxRuntime.jsxs("ul", { className: "m-0 pl-6 text-muted-foreground", children: [jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "==" }), " - Equals"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "!=" }), " - Not equals"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "&&" }), " - And"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "||" }), " - Or"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "in" }), " - In list (e.g., ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "verb in [\"create\", \"delete\"]" }), ")"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: ".startsWith()" }), " - String starts with"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: ".contains()" }), " - String contains"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "timestamp()" }), " - Parse timestamp (e.g., ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "timestamp(\"2024-01-01T00:00:00Z\")" }), ")"] })] })] })] })), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx(label.Label, { htmlFor: "filter-input", className: "block mb-2", children: "CEL Filter Expression" }), jsxRuntime.jsx(textarea.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" })] }), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx(label.Label, { htmlFor: "limit-input", className: "block mb-2", children: "Result Limit (max 1,000)" }), jsxRuntime.jsx(input.Input, { id: "limit-input", type: "number", value: limit, onChange: (e) => handleLimitChange(parseInt(e.target.value) || 100), min: 1, max: 1000, className: "w-44" })] }), jsxRuntime.jsx(separator.Separator, { className: "my-6" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h4", { className: "mb-3 text-base font-semibold text-foreground", children: "Quick Filters" }), jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [jsxRuntime.jsx(button.Button, { onClick: () => insertExample('verb == "delete"'), htmlType: "button", type: "tertiary", theme: "outline", children: "Delete Operations" }), jsxRuntime.jsx(button.Button, { onClick: () => insertExample('resource == "secrets"'), htmlType: "button", type: "tertiary", theme: "outline", children: "Secret Access" }), jsxRuntime.jsx(button.Button, { onClick: () => insertExample('user.startsWith("system:")'), htmlType: "button", type: "tertiary", theme: "outline", children: "System Users" }), jsxRuntime.jsx(button.Button, { onClick: () => insertExample('stage == "ResponseComplete"'), htmlType: "button", type: "tertiary", theme: "outline", children: "Completed Requests" })] })] })] })] }));
+    return (jsxRuntime.jsxs(card.Card, { className: `mb-6 ${className}`, children: [jsxRuntime.jsx(card.CardHeader, { className: "pb-4", children: jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsx("h3", { className: "m-0 text-2xl font-semibold text-foreground", children: "Build Your Query" }), jsxRuntime.jsxs(button.Button, { onClick: () => setShowHelp(!showHelp), type: "tertiary", theme: "outline", htmlType: "button", children: [showHelp ? 'Hide' : 'Show', " Help"] })] }) }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsxs(card.CardContent, { className: "pt-6", children: [showHelp && (jsxRuntime.jsxs("div", { className: "bg-muted p-6 rounded-lg mb-6 max-h-[400px] overflow-y-auto border border-border", children: [jsxRuntime.jsx("h4", { className: "text-base font-semibold text-foreground", children: "Available Filter Fields" }), jsxRuntime.jsx("div", { className: "mt-4", children: FILTER_FIELDS.map((field) => (jsxRuntime.jsxs("div", { className: "mb-6 pb-4 border-b border-border last:border-b-0", children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-2", children: [jsxRuntime.jsx("strong", { className: "text-foreground", children: field.name }), jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground italic", children: field.type })] }), jsxRuntime.jsx("p", { className: "my-2 text-muted-foreground", children: field.description }), field.examples && field.examples.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2", children: [jsxRuntime.jsx("strong", { className: "text-foreground", children: "Examples:" }), field.examples.map((example, idx) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 my-2", children: [jsxRuntime.jsx("code", { className: "flex-1 px-2 py-1 bg-background rounded text-sm font-mono", children: example }), jsxRuntime.jsx(button.Button, { onClick: () => insertExample(example), type: "success", theme: "solid", size: "small", htmlType: "button", children: "Insert" })] }, idx)))] }))] }, field.name))) }), jsxRuntime.jsxs("div", { className: "mt-4", children: [jsxRuntime.jsx("h4", { className: "mb-2 text-base font-semibold text-foreground", children: "Common Operators" }), jsxRuntime.jsxs("ul", { className: "m-0 pl-6 text-muted-foreground", children: [jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "==" }), " - Equals"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "!=" }), " - Not equals"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "&&" }), " - And"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "||" }), " - Or"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "in" }), " - In list (e.g., ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "verb in [\"create\", \"delete\"]" }), ")"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: ".startsWith()" }), " - String starts with"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: ".contains()" }), " - String contains"] }), jsxRuntime.jsxs("li", { className: "my-1", children: [jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "timestamp()" }), " - Parse timestamp (e.g., ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-background rounded text-sm font-mono", children: "timestamp(\"2024-01-01T00:00:00Z\")" }), ")"] })] })] })] })), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx(label.Label, { htmlFor: "filter-input", className: "block mb-2", children: "CEL Filter Expression" }), jsxRuntime.jsx(textarea.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" })] }), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx(label.Label, { htmlFor: "limit-input", className: "block mb-2", children: "Result Limit (max 1,000)" }), jsxRuntime.jsx(input.Input, { id: "limit-input", type: "number", value: limit, onChange: (e) => handleLimitChange(parseInt(e.target.value) || 100), min: 1, max: 1000, className: "w-44" })] }), jsxRuntime.jsx(separator.Separator, { className: "my-6" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h4", { className: "mb-3 text-base font-semibold text-foreground", children: "Quick Filters" }), jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [jsxRuntime.jsx(button.Button, { onClick: () => insertExample('verb == "delete"'), htmlType: "button", type: "tertiary", theme: "outline", children: "Delete Operations" }), jsxRuntime.jsx(button.Button, { onClick: () => insertExample('resource == "secrets"'), htmlType: "button", type: "tertiary", theme: "outline", children: "Secret Access" }), jsxRuntime.jsx(button.Button, { onClick: () => insertExample('user.startsWith("system:")'), htmlType: "button", type: "tertiary", theme: "outline", children: "System Users" }), jsxRuntime.jsx(button.Button, { onClick: () => insertExample('stage == "ResponseComplete"'), htmlType: "button", type: "tertiary", theme: "outline", children: "Completed Requests" })] })] })] })] }));
 }
 
 function mapVariant(variant) {
@@ -322,7 +325,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' });
@@ -447,7 +450,7 @@ function FilterBuilderWithAutocomplete({ onFilterChange, initialFilter = '', ini
                 return 'outline';
         }
     };
-    return (jsxRuntime.jsxs(card.Card, { className: `p-8 rounded-xl mb-6 ${className}`, children: [jsxRuntime.jsxs(card.CardHeader, { className: "flex flex-row justify-between items-center p-0 mb-6 pb-4 border-b border-border", children: [jsxRuntime.jsx("h3", { className: "m-0 text-2xl font-semibold text-foreground", children: "Search Audit Logs" }), jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(button.Button, { onClick: () => setShowShortcuts(!showShortcuts), type: "tertiary", theme: "outline", size: "small", htmlType: "button", title: "View keyboard shortcuts", children: "Shortcuts" }), jsxRuntime.jsx(button.Button, { onClick: () => setShowHelp(!showHelp), type: "tertiary", theme: "outline", size: "small", htmlType: "button", title: "View available filter fields and examples", children: "Field Guide" })] })] }), jsxRuntime.jsxs(card.CardContent, { className: "p-0", children: [showShortcuts && (jsxRuntime.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: [jsxRuntime.jsx("h4", { className: "mt-0 mb-4 text-lg font-semibold text-foreground", children: "Keyboard Shortcuts" }), jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-x-6 gap-y-3 items-start", children: [jsxRuntime.jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Ctrl+Space" }), jsxRuntime.jsx("span", { children: "Trigger autocomplete suggestions at cursor position" }), jsxRuntime.jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "\u2191 / \u2193" }), jsxRuntime.jsx("span", { children: "Navigate through autocomplete suggestions" }), jsxRuntime.jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Tab" }), jsxRuntime.jsx("span", { children: "Accept the selected suggestion" }), jsxRuntime.jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Enter" }), jsxRuntime.jsx("span", { children: "Accept the selected suggestion" }), jsxRuntime.jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Esc" }), jsxRuntime.jsx("span", { children: "Close autocomplete suggestions" })] }), jsxRuntime.jsxs("div", { className: "mt-4 p-3 bg-background rounded text-sm", children: [jsxRuntime.jsx("strong", { children: "Pro Tips:" }), jsxRuntime.jsxs("ul", { className: "mt-2 mb-0 pl-6", children: [jsxRuntime.jsx("li", { children: "Autocomplete appears automatically as you type" }), jsxRuntime.jsxs("li", { children: ["After completing a value (e.g., ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "\"get\"" }), "), suggestions show logical operators (", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "&&" }), ", ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "||" }), ")"] }), jsxRuntime.jsxs("li", { children: ["After typing ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "&&" }), " or ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "||" }), ", all field names are suggested"] }), jsxRuntime.jsxs("li", { children: ["Type ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "." }), " after a field name to see available string functions"] })] })] })] })), showHelp && (jsxRuntime.jsxs("div", { className: "bg-muted p-6 rounded-lg mb-6 max-h-96 overflow-y-auto", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-4 text-lg font-semibold text-foreground", children: "Available Fields & Examples" }), jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground text-sm", children: "Click \"Insert\" to add an example to your query" }), jsxRuntime.jsx("div", { className: "mt-4", children: FILTER_FIELDS.map((field) => (jsxRuntime.jsxs("div", { className: "mb-6 pb-4 border-b border-border last:border-b-0", children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-2", children: [jsxRuntime.jsx("strong", { className: "text-foreground", children: field.name }), jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground italic", children: field.type })] }), jsxRuntime.jsx("p", { className: "my-2 text-muted-foreground", children: field.description }), field.examples && field.examples.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2", children: [jsxRuntime.jsx("strong", { className: "text-sm text-foreground", children: "Examples:" }), field.examples.map((example, idx) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 my-2", children: [jsxRuntime.jsx("code", { className: "flex-1 px-2 py-1 bg-background rounded text-sm font-mono", children: example }), jsxRuntime.jsx(button.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))) })] })), jsxRuntime.jsxs("div", { className: "relative mb-4", children: [jsxRuntime.jsxs(label.Label, { htmlFor: "filter-input", className: "block mb-2", children: [jsxRuntime.jsx("strong", { className: "text-foreground", children: "Filter Expression" }), jsxRuntime.jsx("span", { className: "ml-2 text-sm text-muted-foreground font-normal", children: "Press Ctrl+Space for suggestions" })] }), jsxRuntime.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)" }), jsxRuntime.jsx(textarea.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 && (jsxRuntime.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) => (jsxRuntime.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: [jsxRuntime.jsx("span", { className: "font-mono font-semibold text-foreground min-w-[120px]", children: suggestion.text }), jsxRuntime.jsx("span", { className: "flex-1 text-muted-foreground text-sm", children: suggestion.description }), jsxRuntime.jsx(Badge, { variant: getBadgeVariant(suggestion.type), className: "uppercase", children: suggestion.type })] }, idx))) }))] }), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsxs(label.Label, { htmlFor: "limit-input", className: "block mb-2", children: [jsxRuntime.jsx("strong", { className: "text-foreground", children: "Number of results" }), jsxRuntime.jsx("span", { className: "ml-2 text-sm text-muted-foreground font-normal", children: "(1 to 1,000 events)" })] }), jsxRuntime.jsx(input.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 (jsxRuntime.jsxs(card.Card, { className: `p-8 rounded-xl mb-6 ${className}`, children: [jsxRuntime.jsxs(card.CardHeader, { className: "flex flex-row justify-between items-center p-0 mb-6 pb-4 border-b border-border", children: [jsxRuntime.jsx("h3", { className: "m-0 text-2xl font-semibold text-foreground", children: "Search Audit Logs" }), jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(button.Button, { onClick: () => setShowShortcuts(!showShortcuts), type: "tertiary", theme: "outline", size: "small", htmlType: "button", title: "View keyboard shortcuts", children: "Shortcuts" }), jsxRuntime.jsx(button.Button, { onClick: () => setShowHelp(!showHelp), type: "tertiary", theme: "outline", size: "small", htmlType: "button", title: "View available filter fields and examples", children: "Field Guide" })] })] }), jsxRuntime.jsxs(card.CardContent, { className: "p-0", children: [showShortcuts && (jsxRuntime.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: [jsxRuntime.jsx("h4", { className: "mt-0 mb-4 text-lg font-semibold text-foreground", children: "Keyboard Shortcuts" }), jsxRuntime.jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-x-6 gap-y-3 items-start", children: [jsxRuntime.jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Ctrl+Space" }), jsxRuntime.jsx("span", { children: "Trigger autocomplete suggestions at cursor position" }), jsxRuntime.jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "\u2191 / \u2193" }), jsxRuntime.jsx("span", { children: "Navigate through autocomplete suggestions" }), jsxRuntime.jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Tab" }), jsxRuntime.jsx("span", { children: "Accept the selected suggestion" }), jsxRuntime.jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Enter" }), jsxRuntime.jsx("span", { children: "Accept the selected suggestion" }), jsxRuntime.jsx("kbd", { className: "px-2 py-1 bg-background border border-input rounded font-mono text-sm", children: "Esc" }), jsxRuntime.jsx("span", { children: "Close autocomplete suggestions" })] }), jsxRuntime.jsxs("div", { className: "mt-4 p-3 bg-background rounded text-sm", children: [jsxRuntime.jsx("strong", { children: "Pro Tips:" }), jsxRuntime.jsxs("ul", { className: "mt-2 mb-0 pl-6", children: [jsxRuntime.jsx("li", { children: "Autocomplete appears automatically as you type" }), jsxRuntime.jsxs("li", { children: ["After completing a value (e.g., ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "\"get\"" }), "), suggestions show logical operators (", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "&&" }), ", ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "||" }), ")"] }), jsxRuntime.jsxs("li", { children: ["After typing ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "&&" }), " or ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "||" }), ", all field names are suggested"] }), jsxRuntime.jsxs("li", { children: ["Type ", jsxRuntime.jsx("code", { className: "px-1 py-0.5 bg-muted rounded text-sm", children: "." }), " after a field name to see available string functions"] })] })] })] })), showHelp && (jsxRuntime.jsxs("div", { className: "bg-muted p-6 rounded-lg mb-6 max-h-96 overflow-y-auto", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-4 text-lg font-semibold text-foreground", children: "Available Fields & Examples" }), jsxRuntime.jsx("p", { className: "mb-4 text-muted-foreground text-sm", children: "Click \"Insert\" to add an example to your query" }), jsxRuntime.jsx("div", { className: "mt-4", children: FILTER_FIELDS.map((field) => (jsxRuntime.jsxs("div", { className: "mb-6 pb-4 border-b border-border last:border-b-0", children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-2", children: [jsxRuntime.jsx("strong", { className: "text-foreground", children: field.name }), jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground italic", children: field.type })] }), jsxRuntime.jsx("p", { className: "my-2 text-muted-foreground", children: field.description }), field.examples && field.examples.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2", children: [jsxRuntime.jsx("strong", { className: "text-sm text-foreground", children: "Examples:" }), field.examples.map((example, idx) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 my-2", children: [jsxRuntime.jsx("code", { className: "flex-1 px-2 py-1 bg-background rounded text-sm font-mono", children: example }), jsxRuntime.jsx(button.Button, { onClick: () => insertExample(example), type: "success", theme: "solid", size: "small", htmlType: "button", children: "Insert" })] }, idx)))] }))] }, field.name))) })] })), jsxRuntime.jsxs("div", { className: "relative mb-4", children: [jsxRuntime.jsxs(label.Label, { htmlFor: "filter-input", className: "block mb-2", children: [jsxRuntime.jsx("strong", { className: "text-foreground", children: "Filter Expression" }), jsxRuntime.jsx("span", { className: "ml-2 text-sm text-muted-foreground font-normal", children: "Press Ctrl+Space for suggestions" })] }), jsxRuntime.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)" }), jsxRuntime.jsx(textarea.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 && (jsxRuntime.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) => (jsxRuntime.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: [jsxRuntime.jsx("span", { className: "font-mono font-semibold text-foreground min-w-[120px]", children: suggestion.text }), jsxRuntime.jsx("span", { className: "flex-1 text-muted-foreground text-sm", children: suggestion.description }), jsxRuntime.jsx(Badge, { variant: getBadgeVariant(suggestion.type), className: "uppercase", children: suggestion.type })] }, idx))) }))] }), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsxs(label.Label, { htmlFor: "limit-input", className: "block mb-2", children: [jsxRuntime.jsx("strong", { className: "text-foreground", children: "Number of results" }), jsxRuntime.jsx("span", { className: "ml-2 text-sm text-muted-foreground font-normal", children: "(1 to 1,000 events)" })] }), jsxRuntime.jsx(input.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" })] })] })] }));
 }
 
 /**
@@ -4018,763 +4021,527 @@ 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__namespace.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 (jsxRuntime.jsx(autocomplete.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 ? (jsxRuntime.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) => (jsxRuntime.jsx("span", { className: "truncate", children: option.count !== undefined ? `${option.label} (${option.count})` : option.label })), renderOption: (option) => (jsxRuntime.jsxs("span", { className: "flex w-full items-center justify-between gap-2", children: [jsxRuntime.jsx("span", { className: "truncate", children: option.label }), 'count' in option && option.count !== undefined && (jsxRuntime.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__namespace.useMemo(() => toPickerPresets(presets), [presets]);
+    const value = React__namespace.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 (jsxRuntime.jsx(picker.DateTimeRangePicker, { 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 = React.forwardRef(
-  ({
-    color = "currentColor",
-    size = 24,
-    strokeWidth = 2,
-    absoluteStrokeWidth,
-    className = "",
-    children,
-    iconNode,
-    ...rest
-  }, ref) => React.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]) => React.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 = React.forwardRef(
-    ({ className, ...props }, ref) => React.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$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",
+        key: 'last1hour',
+        label: 'Last hour',
+        getValue: () => ({
+            start: formatISO(subHours(new Date(), 1)),
+            end: formatISO(new Date()),
+        }),
+    },
     {
-      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$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" }]
+        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()),
+        }),
+    },
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$n);
-
+/** 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 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] = React.useState(false);
+    const [filters, setFilters] = React.useState({
+        verb: '',
+        resourceType: '',
+        namespace: '',
+        resourceName: '',
+        username: '',
+    });
+    const [limit, setLimit] = React.useState(initialLimit);
+    const [advancedFilter, setAdvancedFilter] = React.useState('');
+    const [useAdvancedFilter, setUseAdvancedFilter] = React.useState(false);
+    // Time range state
+    const [selectedPreset, setSelectedPreset] = React.useState('last24hours');
+    const [timeRange, setTimeRange] = React.useState(null);
+    const [customStart, setCustomStart] = React.useState(() => formatDatetimeLocal$4(formatISO(subDays(new Date(), 1))));
+    const [customEnd, setCustomEnd] = React.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);
+    }
+    // Refs for debouncing
+    const debounceTimerRef = React.useRef(null);
+    const isInitialMount = React.useRef(true);
+    // Initialize with default time range and trigger initial query
+    React.useEffect(() => {
+        const defaultRange = TIME_PRESETS$3.find(p => p.key === 'last24hours')?.getValue();
+        if (defaultRange) {
+            setTimeRange(defaultRange);
+        }
+    }, []);
+    const generateCEL = React.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 = React.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)
+    React.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)
+    React.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 = React.useCallback((field, value) => {
+        setFilters(prev => ({ ...prev, [field]: value }));
+    }, []);
+    const handleTimePresetSelect = React.useCallback((presetKey) => {
+        const preset = TIME_PRESETS$3.find(p => p.key === presetKey);
+        if (preset) {
+            setSelectedPreset(presetKey);
+            setTimeRange(preset.getValue());
+        }
+    }, []);
+    const handleCustomRangeApply = React.useCallback((start, end) => {
+        setSelectedPreset('custom');
+        setCustomStart(start);
+        setCustomEnd(end);
+        setTimeRange({
+            start: new Date(start).toISOString(),
+            end: new Date(end).toISOString(),
+        });
+    }, []);
+    const handleLimitChange = React.useCallback((newLimit) => {
+        const validLimit = Math.min(Math.max(1, newLimit), 1000);
+        setLimit(validLimit);
+    }, []);
+    const handleAdvancedToggle = React.useCallback(() => {
+        if (!isAdvancedExpanded) {
+            // When expanding, populate advanced filter with generated CEL
+            setAdvancedFilter(generateCEL());
+        }
+        setIsAdvancedExpanded(!isAdvancedExpanded);
+    }, [isAdvancedExpanded, generateCEL]);
+    const handleUseAdvancedChange = React.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 (jsxRuntime.jsxs("div", { className: `mb-6 pb-6 border-b border-border ${className}`, children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-4 items-end", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Action" }), jsxRuntime.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]" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Resource" }), jsxRuntime.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]" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Namespace" }), jsxRuntime.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]" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "User" }), jsxRuntime.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]" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Name" }), jsxRuntime.jsx(input.Input, { type: "text", value: filters.resourceName, onChange: (e) => handleFilterChange('resourceName', e.target.value), placeholder: "Filter by name...", className: "min-w-[140px]", disabled: disabled || useAdvancedFilter })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Limit" }), jsxRuntime.jsx(input.Input, { type: "number", value: limit, onChange: (e) => handleLimitChange(parseInt(e.target.value) || 100), min: 1, max: 1000, className: "w-[80px]", disabled: disabled })] }), jsxRuntime.jsx(button.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' }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 ml-auto", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Time Range" }), jsxRuntime.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 && (jsxRuntime.jsxs("div", { className: "mt-4 pt-4", children: [jsxRuntime.jsx(separator.Separator, { className: "mb-4" }), jsxRuntime.jsx("div", { className: "mb-3", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(checkbox.Checkbox, { id: "use-cel-expression", checked: useAdvancedFilter, onCheckedChange: handleUseAdvancedChange, disabled: disabled }), jsxRuntime.jsx(label.Label, { htmlFor: "use-cel-expression", className: "text-sm font-medium text-foreground cursor-pointer", children: "Use CEL Expression" })] }) }), useAdvancedFilter && (jsxRuntime.jsxs("div", { className: "mt-3", children: [jsxRuntime.jsx("p", { className: "m-0 mb-2 text-sm text-muted-foreground", children: "Write your query using CEL syntax for complex filters" }), jsxRuntime.jsx(textarea.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);
-
-/**
- * @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 = [
-  ["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);
+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$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);
-
+    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;
+};
 /**
- * @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$a = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$a);
-
+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;
+})();
 /**
- * @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.
+ * Exported for testing only
  */
-
-
-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 createClassMap = config => {
+  const {
+    theme,
+    classGroups
+  } = config;
+  return processClassGroups(classGroups, theme);
+};
+// Split into separate functions to maintain monomorphic call sites
+const processClassGroups = (classGroups, theme) => {
+  const classMap = createClassPartObject();
+  for (const classGroupId in classGroups) {
+    const group = classGroups[classGroupId];
+    processClassesRecursively(group, classMap, classGroupId, theme);
+  }
+  return classMap;
+};
+const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
+  const len = classGroup.length;
+  for (let i = 0; i < len; i++) {
+    const classDefinition = classGroup[i];
+    processClassDefinition(classDefinition, classPartObject, classGroupId, theme);
+  }
+};
+// Split into separate functions for each type to maintain monomorphic call sites
+const processClassDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
+  if (typeof classDefinition === 'string') {
+    processStringDefinition(classDefinition, classPartObject, classGroupId);
+    return;
+  }
+  if (typeof classDefinition === 'function') {
+    processFunctionDefinition(classDefinition, classPartObject, classGroupId, theme);
+    return;
+  }
+  processObjectDefinition(classDefinition, classPartObject, classGroupId, theme);
+};
+const processStringDefinition = (classDefinition, classPartObject, classGroupId) => {
+  const classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
+  classPartObjectToEdit.classGroupId = classGroupId;
+};
+const processFunctionDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
+  if (isThemeGetter(classDefinition)) {
+    processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
+    return;
+  }
+  if (classPartObject.validators === null) {
+    classPartObject.validators = [];
+  }
+  classPartObject.validators.push(createClassValidatorObject(classGroupId, classDefinition));
+};
+const processObjectDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
+  const entries = Object.entries(classDefinition);
+  const len = entries.length;
+  for (let i = 0; i < len; i++) {
+    const [key, value] = entries[i];
+    processClassesRecursively(value, getPart(classPartObject, key), classGroupId, theme);
+  }
+};
+const getPart = (classPartObject, path) => {
+  let current = classPartObject;
+  const parts = path.split(CLASS_PART_SEPARATOR);
+  const len = parts.length;
+  for (let i = 0; i < len; i++) {
+    const part = parts[i];
+    let next = current.nextPart.get(part);
+    if (!next) {
+      next = createClassPartObject();
+      current.nextPart.set(part, next);
     }
-  ],
-  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
-];
-const Pencil = createLucideIcon("pencil", __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.
- */
+    current = next;
+  }
+  return current;
+};
+// Type guard maintains monomorphic check
+const isThemeGetter = func => 'isThemeGetter' in func && func.isThemeGetter === true;
 
-
-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];
+// LRU cache implementation using plain objects for simplicity
+const createLruCache = maxCacheSize => {
+  if (maxCacheSize < 1) {
+    return {
+      get: () => undefined,
+      set: () => {}
+    };
   }
-  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);
+  let cacheSize = 0;
+  let cache = Object.create(null);
+  let previousCache = Object.create(null);
+  const update = (key, value) => {
+    cache[key] = value;
+    cacheSize++;
+    if (cacheSize > maxCacheSize) {
+      cacheSize = 0;
+      previousCache = cache;
+      cache = Object.create(null);
     }
-    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;
-})();
-/**
- * Exported for testing only
- */
-const createClassMap = config => {
-  const {
-    theme,
-    classGroups
-  } = config;
-  return processClassGroups(classGroups, theme);
-};
-// Split into separate functions to maintain monomorphic call sites
-const processClassGroups = (classGroups, theme) => {
-  const classMap = createClassPartObject();
-  for (const classGroupId in classGroups) {
-    const group = classGroups[classGroupId];
-    processClassesRecursively(group, classMap, classGroupId, theme);
-  }
-  return classMap;
-};
-const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
-  const len = classGroup.length;
-  for (let i = 0; i < len; i++) {
-    const classDefinition = classGroup[i];
-    processClassDefinition(classDefinition, classPartObject, classGroupId, theme);
-  }
-};
-// Split into separate functions for each type to maintain monomorphic call sites
-const processClassDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
-  if (typeof classDefinition === 'string') {
-    processStringDefinition(classDefinition, classPartObject, classGroupId);
-    return;
-  }
-  if (typeof classDefinition === 'function') {
-    processFunctionDefinition(classDefinition, classPartObject, classGroupId, theme);
-    return;
-  }
-  processObjectDefinition(classDefinition, classPartObject, classGroupId, theme);
-};
-const processStringDefinition = (classDefinition, classPartObject, classGroupId) => {
-  const classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
-  classPartObjectToEdit.classGroupId = classGroupId;
-};
-const processFunctionDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
-  if (isThemeGetter(classDefinition)) {
-    processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
-    return;
-  }
-  if (classPartObject.validators === null) {
-    classPartObject.validators = [];
-  }
-  classPartObject.validators.push(createClassValidatorObject(classGroupId, classDefinition));
-};
-const processObjectDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
-  const entries = Object.entries(classDefinition);
-  const len = entries.length;
-  for (let i = 0; i < len; i++) {
-    const [key, value] = entries[i];
-    processClassesRecursively(value, getPart(classPartObject, key), classGroupId, theme);
-  }
-};
-const getPart = (classPartObject, path) => {
-  let current = classPartObject;
-  const parts = path.split(CLASS_PART_SEPARATOR);
-  const len = parts.length;
-  for (let i = 0; i < len; i++) {
-    const part = parts[i];
-    let next = current.nextPart.get(part);
-    if (!next) {
-      next = createClassPartObject();
-      current.nextPart.set(part, next);
-    }
-    current = next;
-  }
-  return current;
-};
-// Type guard maintains monomorphic check
-const isThemeGetter = func => 'isThemeGetter' in func && func.isThemeGetter === true;
-
-// LRU cache implementation using plain objects for simplicity
-const createLruCache = maxCacheSize => {
-  if (maxCacheSize < 1) {
-    return {
-      get: () => undefined,
-      set: () => {}
-    };
-  }
-  let cacheSize = 0;
-  let cache = Object.create(null);
-  let previousCache = Object.create(null);
-  const update = (key, value) => {
-    cache[key] = value;
-    cacheSize++;
-    if (cacheSize > maxCacheSize) {
-      cacheSize = 0;
-      previousCache = cache;
-      cache = Object.create(null);
-    }
-  };
-  return {
-    get(key) {
-      let value = cache[key];
-      if (value !== undefined) {
-        return value;
-      }
-      if ((value = previousCache[key]) !== undefined) {
-        update(key, value);
-        return value;
-      }
-    },
-    set(key, value) {
-      if (key in cache) {
-        cache[key] = value;
-      } else {
-        update(key, value);
+  return {
+    get(key) {
+      let value = cache[key];
+      if (value !== undefined) {
+        return value;
+      }
+      if ((value = previousCache[key]) !== undefined) {
+        update(key, value);
+        return value;
+      }
+    },
+    set(key, value) {
+      if (key in cache) {
+        cache[key] = value;
+      } else {
+        update(key, value);
       }
     }
   };
@@ -4904,15 +4671,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:
@@ -4938,7 +4717,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
@@ -5043,6 +4833,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;
@@ -5050,7 +4841,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)\(.+\)$/;
@@ -5069,6 +4860,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);
@@ -5173,7 +4965,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, {
@@ -5240,12 +5032,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
@@ -5881,42 +5685,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()]
@@ -5966,7 +5770,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/max-height
        */
       'max-h': [{
-        'max-h': ['screen', 'lh', ...scaleSizing()]
+        'max-h': ['screen', 'lh', 'none', ...scaleSizing()]
       }],
       // ------------------
       // --- Typography ---
@@ -6065,7 +5869,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()]
       }],
       /**
@@ -6168,6 +5972,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
@@ -6265,7 +6076,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]
       }],
       /**
@@ -6662,7 +6473,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
@@ -7375,6 +7188,13 @@ 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 ---
       // ---------------------
@@ -7441,6 +7261,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
@@ -7699,19 +7547,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'],
@@ -7730,19 +7579,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'],
@@ -7751,485 +7600,663 @@ const getDefaultConfig = () => {
     conflictingClassGroupModifiers: {
       'font-size': ['leading']
     },
+    postfixLookupClassGroups: ['container-type'],
     orderSensitiveModifiers: ['*', '**', 'after', 'backdrop', 'before', 'details-content', 'file', 'first-letter', 'first-line', 'marker', 'placeholder', 'selection']
   };
 };
 const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 
-function cn(...inputs) {
-    return twMerge(clsx(inputs));
-}
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+/**
+ * Get icon for tenant type
+ */
+function getTenantIcon(type) {
+    switch (type) {
+        case "organization":
+            return (jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsxRuntime.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 (jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsxRuntime.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 (jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsxRuntime.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 (jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsxRuntime.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";
+    }
+}
+/**
+ * TenantBadge displays tenant information in a compact badge format
+ * Renders as a clickable link if tenantLinkResolver is provided and returns a URL
+ */
+function TenantBadge({ tenant, tenantLinkResolver, className = "", size = "default", }) {
+    const icon = getTenantIcon(tenant.type);
+    const variant = getTenantBadgeVariant(tenant.type);
+    const url = tenantLinkResolver?.(tenant);
+    const badgeContent = (jsxRuntime.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, jsxRuntime.jsx("span", { className: "font-medium capitalize", children: tenant.type }), tenant.type !== "platform" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "/" }), jsxRuntime.jsx("span", { children: tenant.name })] }))] }));
+    if (url) {
+        return (jsxRuntime.jsx("a", { href: url, className: "no-underline", onClick: (e) => e.stopPropagation(), title: `View ${tenant.type}: ${tenant.name}`, children: badgeContent }));
+    }
+    return badgeContent;
+}
+
+/**
+ * Extract tenant information from audit event annotations if present
+ * Expected annotations: tenant.type and tenant.name
+ */
+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,
+            };
+        }
+    }
+    return undefined;
+}
+/**
+ * AuditEventViewer displays a list of audit events with details
+ */
+function AuditEventViewer({ events, className = "", onEventSelect, tenantLinkResolver, }) {
+    const [selectedEvent, setSelectedEvent] = React.useState(null);
+    const [expandedEvents, setExpandedEvents] = React.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 (jsxRuntime.jsx("div", { className: `bg-muted rounded-lg border border-border ${className}`, children: jsxRuntime.jsx("div", { className: "p-12 text-center text-muted-foreground text-sm", children: "No events found" }) }));
+    }
+    return (jsxRuntime.jsx("div", { className: `bg-muted rounded-lg border border-border ${className}`, children: jsxRuntime.jsx("div", { className: "p-4", children: events.map((event) => {
+                const auditId = event.auditID || "";
+                const isExpanded = expandedEvents.has(auditId);
+                const tenant = extractTenantFromAnnotations(event);
+                return (jsxRuntime.jsxs(card.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: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsxs("div", { className: "flex gap-3 items-center flex-1", children: [jsxRuntime.jsx(Badge, { variant: getVerbBadgeVariant(event.verb), className: "px-3 py-1", children: event.verb?.toUpperCase() || "UNKNOWN" }), jsxRuntime.jsx("span", { className: "font-semibold", children: event.objectRef?.resource || "N/A" }), event.objectRef?.namespace && (jsxRuntime.jsxs("span", { className: "text-muted-foreground text-sm", children: ["ns: ", event.objectRef.namespace] })), event.objectRef?.name && (jsxRuntime.jsx("span", { className: "text-foreground/80 text-sm", children: event.objectRef.name })), tenant && (jsxRuntime.jsx(TenantBadge, { tenant: tenant, tenantLinkResolver: tenantLinkResolver, size: "compact" }))] }), jsxRuntime.jsxs("div", { className: "flex gap-4 items-center", children: [jsxRuntime.jsx("span", { className: "text-foreground/80 text-sm", children: event.user?.username || "N/A" }), jsxRuntime.jsx("span", { className: "text-muted-foreground text-sm font-mono", children: formatTimestamp(event.stageTimestamp) }), jsxRuntime.jsx(button.Button, { type: "quaternary", theme: "borderless", size: "small", onClick: (e) => {
+                                                e.stopPropagation();
+                                                toggleEventExpansion(auditId);
+                                            }, className: "text-primary", children: isExpanded ? "▼" : "▶" })] })] }), isExpanded && (jsxRuntime.jsxs("div", { className: "mt-4 pt-4 border-t border-border", children: [jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Event Information" }), jsxRuntime.jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Audit ID:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.auditID || "N/A" }), jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Stage:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.stage || "N/A" }), jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Level:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.level || "N/A" }), jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Request URI:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground font-mono text-sm break-all", children: event.requestURI || "N/A" }), event.userAgent && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "User Agent:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground font-mono text-sm break-all", children: event.userAgent })] })), event.sourceIPs && event.sourceIPs.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Source IPs:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.sourceIPs.join(", ") })] }))] })] }), tenant && (jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Tenant" }), jsxRuntime.jsx(TenantBadge, { tenant: tenant, tenantLinkResolver: tenantLinkResolver })] })), event.user && (jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "User Information" }), jsxRuntime.jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Username:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.user.username || "N/A" }), jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "UID:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.user.uid || "N/A" }), event.user.groups && event.user.groups.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Groups:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.user.groups.join(", ") })] }))] })] })), event.responseStatus && (jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Response Status" }), jsxRuntime.jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Code:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.responseStatus.code || "N/A" }), jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Status:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.responseStatus.status || "N/A" }), event.responseStatus.message && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Message:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.responseStatus.message })] }))] })] })), event.annotations &&
+                                    Object.keys(event.annotations).length > 0 && (jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Annotations" }), jsxRuntime.jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: Object.entries(event.annotations).map(([key, value]) => (jsxRuntime.jsxs("div", { className: "contents", children: [jsxRuntime.jsxs("dt", { className: "font-semibold text-foreground/80", children: [key, ":"] }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: value })] }, key))) })] })), event.requestObject || event.responseObject ? (jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Request/Response Data" }), event.requestObject ? (jsxRuntime.jsxs("details", { className: "mt-2", children: [jsxRuntime.jsx("summary", { className: "cursor-pointer font-semibold p-2 bg-muted rounded", children: "Request Object" }), jsxRuntime.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 ? (jsxRuntime.jsxs("details", { className: "mt-2", children: [jsxRuntime.jsx("summary", { className: "cursor-pointer font-semibold p-2 bg-muted rounded", children: "Response Object" }), jsxRuntime.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));
+            }) }) }));
+}
+
+/**
+ * @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 = React.forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => React.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]) => React.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 = React.forwardRef(
+    ({ className, ...props }, ref) => React.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$n = [
+  [
+    "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$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: "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$m);
 
 /**
- * Combobox component with type-ahead search and fuzzy matching.
- * Built on cmdk for search functionality and Radix Popover for positioning.
+ * @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 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__namespace.useState(false);
-    const [search, setSearch] = React__namespace.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__namespace.useCallback((selectedValue) => {
-        onValueChange(selectedValue === value ? '' : selectedValue);
-        setOpen(false);
-        setSearch('');
-    }, [onValueChange, value]);
-    const handleClear = React__namespace.useCallback((e) => {
-        e.stopPropagation();
-        onValueChange('');
-    }, [onValueChange]);
-    // Custom fuzzy filter function
-    const filterOptions = React__namespace.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 (jsxRuntime.jsxs(Popover__namespace.Root, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: jsxRuntime.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: [jsxRuntime.jsx("span", { className: "truncate text-left flex-1", children: loading ? 'Loading...' : displayValue }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-2", children: [clearable && value && !disabled && (jsxRuntime.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: jsxRuntime.jsx(X, { className: "h-3 w-3" }) })), jsxRuntime.jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })] })] }) }), jsxRuntime.jsx(Popover__namespace.Portal, { children: jsxRuntime.jsx(Popover__namespace.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: jsxRuntime.jsxs(cmdk.Command, { filter: filterOptions, className: "w-full", children: [jsxRuntime.jsx("div", { className: "flex items-center border-b px-3", children: jsxRuntime.jsx(cmdk.CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: setSearch, className: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" }) }), jsxRuntime.jsxs(cmdk.CommandList, { className: "max-h-[300px] overflow-y-auto p-1", children: [jsxRuntime.jsx(cmdk.CommandEmpty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }), jsxRuntime.jsxs(cmdk.CommandGroup, { children: [showAllOption && (jsxRuntime.jsxs(cmdk.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: [jsxRuntime.jsx(Check, { className: cn('mr-2 h-4 w-4', value === '' ? 'opacity-100' : 'opacity-0') }), allOptionLabel] })), options.map((option) => (jsxRuntime.jsxs(cmdk.CommandItem, { value: option.value, onSelect: () => handleSelect(option.value), className: cn('relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', 'hover:bg-accent hover:text-accent-foreground'), children: [jsxRuntime.jsx(Check, { className: cn('mr-2 h-4 w-4', value === option.value ? 'opacity-100' : 'opacity-0') }), jsxRuntime.jsx("span", { className: "flex-1 truncate", children: option.label }), option.count !== undefined && (jsxRuntime.jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value)))] })] })] }) }) })] }));
-}
+
+
+const __iconNode$l = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$l);
 
 /**
- * TimeRangeDropdown - A compact dropdown for selecting time ranges
+ * @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 TimeRangeDropdown({ presets, selectedPreset, onPresetSelect, onCustomRangeApply, customStart: initialCustomStart, customEnd: initialCustomEnd, disabled = false, className, displayLabel, }) {
-    const [open, setOpen] = React__namespace.useState(false);
-    const [showCustomInputs, setShowCustomInputs] = React__namespace.useState(false);
-    const [customStart, setCustomStart] = React__namespace.useState(initialCustomStart || '');
-    const [customEnd, setCustomEnd] = React__namespace.useState(initialCustomEnd || '');
-    // Update custom values when props change
-    React__namespace.useEffect(() => {
-        if (initialCustomStart)
-            setCustomStart(initialCustomStart);
-        if (initialCustomEnd)
-            setCustomEnd(initialCustomEnd);
-    }, [initialCustomStart, initialCustomEnd]);
-    const selectedPresetObj = presets.find((p) => p.key === selectedPreset);
-    const label$1 = 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 (jsxRuntime.jsxs(Popover__namespace.Root, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", disabled: disabled, className: cn('flex h-7 items-center gap-2 rounded-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: [jsxRuntime.jsx(Calendar, { className: "h-4 w-4 text-muted-foreground" }), jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: label$1 }), jsxRuntime.jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" })] }) }), jsxRuntime.jsx(Popover__namespace.Portal, { children: jsxRuntime.jsx(Popover__namespace.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 ? (jsxRuntime.jsxs("div", { className: "p-1", children: [presets.map((preset) => (jsxRuntime.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))), jsxRuntime.jsx("div", { className: "my-1 h-px bg-border" }), jsxRuntime.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..." })] })) : (jsxRuntime.jsxs("div", { className: "p-4 min-w-[280px]", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [jsxRuntime.jsx(label.Label, { htmlFor: "time-range-start", className: "text-xs text-muted-foreground font-semibold uppercase tracking-tight", children: "Start" }), jsxRuntime.jsx(input.Input, { id: "time-range-start", type: "datetime-local", value: customStart, onChange: (e) => setCustomStart(e.target.value), className: "w-full", disabled: disabled })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [jsxRuntime.jsx(label.Label, { htmlFor: "time-range-end", className: "text-xs text-muted-foreground font-semibold uppercase tracking-tight", children: "End" }), jsxRuntime.jsx(input.Input, { id: "time-range-end", type: "datetime-local", value: customEnd, onChange: (e) => setCustomEnd(e.target.value), className: "w-full", disabled: disabled })] })] }), jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 mt-4 pt-3 border-t border-border", children: [jsxRuntime.jsx(button.Button, { htmlType: "button", type: "quaternary", theme: "borderless", size: "small", onClick: handleCustomCancel, children: "Back" }), jsxRuntime.jsx(button.Button, { htmlType: "button", size: "small", onClick: handleCustomApply, disabled: !customStart || !customEnd, children: "Apply" })] })] })) }) })] }));
-}
 
-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()),
-        }),
-    },
+
+const __iconNode$k = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __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: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __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: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __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",
     {
-        key: 'last7days',
-        label: 'Last 7 days',
-        getValue: () => ({
-            start: formatISO(subDays(new Date(), 7)),
-            end: formatISO(new Date()),
-        }),
-    },
+      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$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",
     {
-        key: 'last30days',
-        label: 'Last 30 days',
-        getValue: () => ({
-            start: formatISO(subDays(new Date(), 30)),
-            end: formatISO(new Date()),
-        }),
-    },
+      d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+      key: "1a8usu"
+    }
+  ],
+  ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
 ];
-/** Debounce delay for text inputs (ms) */
-const DEBOUNCE_DELAY = 300;
+const Pencil = createLucideIcon("pencil", __iconNode$9);
+
 /**
- * Helper function to convert ISO string to datetime-local format
+ * @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 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] = React.useState(false);
-    const [filters, setFilters] = React.useState({
-        verb: '',
-        resourceType: '',
-        namespace: '',
-        resourceName: '',
-        username: '',
-    });
-    const [limit, setLimit] = React.useState(initialLimit);
-    const [advancedFilter, setAdvancedFilter] = React.useState('');
-    const [useAdvancedFilter, setUseAdvancedFilter] = React.useState(false);
-    // Time range state
-    const [selectedPreset, setSelectedPreset] = React.useState('last24hours');
-    const [timeRange, setTimeRange] = React.useState(null);
-    const [customStart, setCustomStart] = React.useState(() => formatDatetimeLocal$4(formatISO(subDays(new Date(), 1))));
-    const [customEnd, setCustomEnd] = React.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);
-    }
-    // Refs for debouncing
-    const debounceTimerRef = React.useRef(null);
-    const isInitialMount = React.useRef(true);
-    // Initialize with default time range and trigger initial query
-    React.useEffect(() => {
-        const defaultRange = TIME_PRESETS$3.find(p => p.key === 'last24hours')?.getValue();
-        if (defaultRange) {
-            setTimeRange(defaultRange);
-        }
-    }, []);
-    const generateCEL = React.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 = React.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)
-    React.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)
-    React.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 = React.useCallback((field, value) => {
-        setFilters(prev => ({ ...prev, [field]: value }));
-    }, []);
-    const handleTimePresetSelect = React.useCallback((presetKey) => {
-        const preset = TIME_PRESETS$3.find(p => p.key === presetKey);
-        if (preset) {
-            setSelectedPreset(presetKey);
-            setTimeRange(preset.getValue());
-        }
-    }, []);
-    const handleCustomRangeApply = React.useCallback((start, end) => {
-        setSelectedPreset('custom');
-        setCustomStart(start);
-        setCustomEnd(end);
-        setTimeRange({
-            start: new Date(start).toISOString(),
-            end: new Date(end).toISOString(),
-        });
-    }, []);
-    const handleLimitChange = React.useCallback((newLimit) => {
-        const validLimit = Math.min(Math.max(1, newLimit), 1000);
-        setLimit(validLimit);
-    }, []);
-    const handleAdvancedToggle = React.useCallback(() => {
-        if (!isAdvancedExpanded) {
-            // When expanding, populate advanced filter with generated CEL
-            setAdvancedFilter(generateCEL());
-        }
-        setIsAdvancedExpanded(!isAdvancedExpanded);
-    }, [isAdvancedExpanded, generateCEL]);
-    const handleUseAdvancedChange = React.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 (jsxRuntime.jsxs("div", { className: `mb-6 pb-6 border-b border-border ${className}`, children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-4 items-end", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Action" }), jsxRuntime.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]" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Resource" }), jsxRuntime.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]" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Namespace" }), jsxRuntime.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]" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "User" }), jsxRuntime.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]" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Name" }), jsxRuntime.jsx(input.Input, { type: "text", value: filters.resourceName, onChange: (e) => handleFilterChange('resourceName', e.target.value), placeholder: "Filter by name...", className: "min-w-[140px]", disabled: disabled || useAdvancedFilter })] }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Limit" }), jsxRuntime.jsx(input.Input, { type: "number", value: limit, onChange: (e) => handleLimitChange(parseInt(e.target.value) || 100), min: 1, max: 1000, className: "w-[80px]", disabled: disabled })] }), jsxRuntime.jsx(button.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' }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 ml-auto", children: [jsxRuntime.jsx(label.Label, { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Time Range" }), jsxRuntime.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 && (jsxRuntime.jsxs("div", { className: "mt-4 pt-4", children: [jsxRuntime.jsx(separator.Separator, { className: "mb-4" }), jsxRuntime.jsx("div", { className: "mb-3", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(checkbox.Checkbox, { id: "use-cel-expression", checked: useAdvancedFilter, onCheckedChange: handleUseAdvancedChange, disabled: disabled }), jsxRuntime.jsx(label.Label, { htmlFor: "use-cel-expression", className: "text-sm font-medium text-foreground cursor-pointer", children: "Use CEL Expression" })] }) }), useAdvancedFilter && (jsxRuntime.jsxs("div", { className: "mt-3", children: [jsxRuntime.jsx("p", { className: "m-0 mb-2 text-sm text-muted-foreground", children: "Write your query using CEL syntax for complex filters" }), jsxRuntime.jsx(textarea.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$8 = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+];
+const Plus = createLucideIcon("plus", __iconNode$8);
 
 /**
- * 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.
  */
-function getTenantIcon(type) {
-    switch (type) {
-        case "organization":
-            return (jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsxRuntime.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 (jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsxRuntime.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 (jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsxRuntime.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 (jsxRuntime.jsx("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsxRuntime.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$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);
+
 /**
- * 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$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);
+
 /**
- * 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 = (jsxRuntime.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, jsxRuntime.jsx("span", { className: "font-medium capitalize", children: tenant.type }), tenant.type !== "platform" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "/" }), jsxRuntime.jsx("span", { children: tenant.name })] }))] }));
-    if (url) {
-        return (jsxRuntime.jsx("a", { href: url, className: "no-underline", onClick: (e) => e.stopPropagation(), title: `View ${tenant.type}: ${tenant.name}`, children: badgeContent }));
-    }
-    return badgeContent;
-}
+
+
+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);
 
 /**
- * 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$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 undefined;
-}
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+];
+const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$2);
+
 /**
- * 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.
+ */
+
+
+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.
  */
-function AuditEventViewer({ events, className = "", onEventSelect, tenantLinkResolver, }) {
-    const [selectedEvent, setSelectedEvent] = React.useState(null);
-    const [expandedEvents, setExpandedEvents] = React.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 (jsxRuntime.jsx("div", { className: `bg-muted rounded-lg border border-border ${className}`, children: jsxRuntime.jsx("div", { className: "p-12 text-center text-muted-foreground text-sm", children: "No events found" }) }));
-    }
-    return (jsxRuntime.jsx("div", { className: `bg-muted rounded-lg border border-border ${className}`, children: jsxRuntime.jsx("div", { className: "p-4", children: events.map((event) => {
-                const auditId = event.auditID || "";
-                const isExpanded = expandedEvents.has(auditId);
-                const tenant = extractTenantFromAnnotations(event);
-                return (jsxRuntime.jsxs(card.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: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsxs("div", { className: "flex gap-3 items-center flex-1", children: [jsxRuntime.jsx(Badge, { variant: getVerbBadgeVariant(event.verb), className: "px-3 py-1", children: event.verb?.toUpperCase() || "UNKNOWN" }), jsxRuntime.jsx("span", { className: "font-semibold", children: event.objectRef?.resource || "N/A" }), event.objectRef?.namespace && (jsxRuntime.jsxs("span", { className: "text-muted-foreground text-sm", children: ["ns: ", event.objectRef.namespace] })), event.objectRef?.name && (jsxRuntime.jsx("span", { className: "text-foreground/80 text-sm", children: event.objectRef.name })), tenant && (jsxRuntime.jsx(TenantBadge, { tenant: tenant, tenantLinkResolver: tenantLinkResolver, size: "compact" }))] }), jsxRuntime.jsxs("div", { className: "flex gap-4 items-center", children: [jsxRuntime.jsx("span", { className: "text-foreground/80 text-sm", children: event.user?.username || "N/A" }), jsxRuntime.jsx("span", { className: "text-muted-foreground text-sm font-mono", children: formatTimestamp(event.stageTimestamp) }), jsxRuntime.jsx(button.Button, { type: "quaternary", theme: "borderless", size: "small", onClick: (e) => {
-                                                e.stopPropagation();
-                                                toggleEventExpansion(auditId);
-                                            }, className: "text-primary", children: isExpanded ? "▼" : "▶" })] })] }), isExpanded && (jsxRuntime.jsxs("div", { className: "mt-4 pt-4 border-t border-border", children: [jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Event Information" }), jsxRuntime.jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Audit ID:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.auditID || "N/A" }), jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Stage:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.stage || "N/A" }), jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Level:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.level || "N/A" }), jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Request URI:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground font-mono text-sm break-all", children: event.requestURI || "N/A" }), event.userAgent && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "User Agent:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground font-mono text-sm break-all", children: event.userAgent })] })), event.sourceIPs && event.sourceIPs.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Source IPs:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.sourceIPs.join(", ") })] }))] })] }), tenant && (jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Tenant" }), jsxRuntime.jsx(TenantBadge, { tenant: tenant, tenantLinkResolver: tenantLinkResolver })] })), event.user && (jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "User Information" }), jsxRuntime.jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Username:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.user.username || "N/A" }), jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "UID:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.user.uid || "N/A" }), event.user.groups && event.user.groups.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Groups:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.user.groups.join(", ") })] }))] })] })), event.responseStatus && (jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Response Status" }), jsxRuntime.jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Code:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.responseStatus.code || "N/A" }), jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Status:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.responseStatus.status || "N/A" }), event.responseStatus.message && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("dt", { className: "font-semibold text-foreground/80", children: "Message:" }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: event.responseStatus.message })] }))] })] })), event.annotations &&
-                                    Object.keys(event.annotations).length > 0 && (jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Annotations" }), jsxRuntime.jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-2 m-0", children: Object.entries(event.annotations).map(([key, value]) => (jsxRuntime.jsxs("div", { className: "contents", children: [jsxRuntime.jsxs("dt", { className: "font-semibold text-foreground/80", children: [key, ":"] }), jsxRuntime.jsx("dd", { className: "m-0 text-foreground", children: value })] }, key))) })] })), event.requestObject || event.responseObject ? (jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "mt-0 mb-2 text-base text-foreground/80", children: "Request/Response Data" }), event.requestObject ? (jsxRuntime.jsxs("details", { className: "mt-2", children: [jsxRuntime.jsx("summary", { className: "cursor-pointer font-semibold p-2 bg-muted rounded", children: "Request Object" }), jsxRuntime.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 ? (jsxRuntime.jsxs("details", { className: "mt-2", children: [jsxRuntime.jsx("summary", { className: "cursor-pointer font-semibold p-2 bg-muted rounded", children: "Response Object" }), jsxRuntime.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));
-            }) }) }));
-}
+
+
+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
@@ -8354,7 +8381,7 @@ function FilterChip({ label, values, options = [], onValuesChange, onClear, inpu
     }, [options]);
     // Find selected options for chips display
     const selectedOptions = options.filter((opt) => values.includes(opt.value));
-    return (jsxRuntime.jsxs("div", { className: cn('inline-flex items-center', className), children: [jsxRuntime.jsxs(Popover__namespace.Root, { open: open, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", disabled: disabled, className: cn('flex h-7 items-center gap-2 rounded-l-md border border-r-0 border-border bg-card px-2 text-xs outline-none', 'hover:bg-accent/40 data-[state=open]:bg-accent/40 transition-colors', 'disabled:cursor-not-allowed disabled:opacity-50'), children: [jsxRuntime.jsxs("span", { className: "font-medium text-foreground", children: [label, ":"] }), jsxRuntime.jsx("span", { className: "text-foreground truncate max-w-[120px]", children: displayValue }), jsxRuntime.jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground ml-1" })] }) }), jsxRuntime.jsx(Popover__namespace.Portal, { children: jsxRuntime.jsx(Popover__namespace.Content, { className: cn('z-50 min-w-[var(--radix-popover-trigger-width)] max-w-[320px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2'), sideOffset: 4, align: "start", children: inputMode === 'typeahead' ? (jsxRuntime.jsxs(cmdk.Command, { filter: filterOptions, className: "w-full", children: [jsxRuntime.jsx("div", { className: "flex items-center border-b px-3", children: jsxRuntime.jsx(cmdk.CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: setSearch, className: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" }) }), values.length > 0 && (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 p-2 border-b", children: selectedOptions.map((option) => (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-accent text-accent-foreground text-xs", children: [option.label, jsxRuntime.jsx("button", { type: "button", onClick: (e) => handleRemoveValue(e, option.value), className: "rounded-sm hover:bg-accent-foreground/20", children: jsxRuntime.jsx(X, { className: "h-3 w-3" }) })] }, option.value))) })), jsxRuntime.jsxs(cmdk.CommandList, { className: "max-h-[300px] overflow-y-auto p-1", children: [jsxRuntime.jsx(cmdk.CommandEmpty, { className: "py-6 text-center text-sm text-muted-foreground", children: "No results found." }), jsxRuntime.jsx(cmdk.CommandGroup, { children: options.map((option) => (jsxRuntime.jsxs(cmdk.CommandItem, { value: option.value, onSelect: () => handleSelect(option.value), className: cn('relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', 'hover:bg-accent hover:text-accent-foreground'), children: [jsxRuntime.jsx("div", { className: cn('mr-2 h-4 w-4 shrink-0 rounded-sm border border-border', values.includes(option.value) && 'bg-primary border-primary'), children: values.includes(option.value) && (jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: "h-full w-full p-0.5 text-primary-foreground", children: jsxRuntime.jsx("path", { d: "M2 6l3 3 5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), jsxRuntime.jsx("span", { className: "flex-1 truncate", children: option.label }), option.count !== undefined && (jsxRuntime.jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value))) })] })] })) : (jsxRuntime.jsx("div", { className: "p-3", children: jsxRuntime.jsx(input.Input, { type: "text", value: textValue, onChange: handleTextChange, placeholder: placeholder, className: "w-full", autoFocus: true }) })) }) })] }), jsxRuntime.jsx("button", { type: "button", onClick: handleClearAll, disabled: disabled, className: cn('flex h-7 items-center rounded-r-md border border-border bg-card px-2 outline-none', 'hover:bg-accent/40 transition-colors', 'disabled:cursor-not-allowed disabled:opacity-50'), "aria-label": `Clear ${label} filter`, children: jsxRuntime.jsx(X, { className: "h-3 w-3 text-muted-foreground" }) })] }));
+    return (jsxRuntime.jsxs(buttonGroup.ButtonGroup, { "aria-label": `${label} filter`, className: className, children: [jsxRuntime.jsxs(popover.Popover, { open: open, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { htmlType: "button", type: "quaternary", theme: "outline", size: "small", disabled: disabled, className: "gap-2 font-normal data-[state=open]:bg-btn-neutral-bg", children: [jsxRuntime.jsxs("span", { className: "font-medium", children: [label, ":"] }), jsxRuntime.jsx("span", { className: "truncate max-w-[120px]", children: displayValue }), jsxRuntime.jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground" })] }) }), jsxRuntime.jsx(popover.PopoverContent, { className: "w-auto min-w-[var(--radix-popover-trigger-width)] max-w-[320px] p-0", sideOffset: 4, align: "start", children: inputMode === 'typeahead' ? (jsxRuntime.jsxs(command.Command, { filter: filterOptions, children: [jsxRuntime.jsx(command.CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: setSearch }), values.length > 0 && (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 p-2 border-b", children: selectedOptions.map((option) => (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-accent text-accent-foreground text-xs", children: [option.label, jsxRuntime.jsx("button", { type: "button", onClick: (e) => handleRemoveValue(e, option.value), className: "rounded-sm hover:bg-accent-foreground/20", children: jsxRuntime.jsx(X, { className: "h-3 w-3" }) })] }, option.value))) })), jsxRuntime.jsxs(command.CommandList, { children: [jsxRuntime.jsx(command.CommandEmpty, { children: "No results found." }), jsxRuntime.jsx(command.CommandGroup, { children: options.map((option) => (jsxRuntime.jsxs(command.CommandItem, { value: option.value, onSelect: () => handleSelect(option.value), children: [jsxRuntime.jsx("div", { className: cn('mr-2 h-4 w-4 shrink-0 rounded-sm border border-border', values.includes(option.value) && 'bg-primary border-primary'), children: values.includes(option.value) && (jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: "h-full w-full p-0.5 text-primary-foreground", children: jsxRuntime.jsx("path", { d: "M2 6l3 3 5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), jsxRuntime.jsx("span", { className: "flex-1 truncate", children: option.label }), option.count !== undefined && (jsxRuntime.jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value))) })] })] })) : (jsxRuntime.jsx("div", { className: "p-3", children: jsxRuntime.jsx(input.Input, { type: "text", value: textValue, onChange: handleTextChange, placeholder: placeholder, className: "w-full", autoFocus: true }) })) })] }), jsxRuntime.jsx(button.Button, { htmlType: "button", type: "quaternary", theme: "outline", size: "small", onClick: handleClearAll, disabled: disabled, "aria-label": `Clear ${label} filter`, children: jsxRuntime.jsx(X, { className: "h-3 w-3 text-muted-foreground" }) })] }));
 }
 
 /**
@@ -8371,12 +8398,12 @@ function AddFilterDropdown({ availableFilters, activeFilterIds, onAddFilter, has
     const isFilterActive = (filterId) => activeFilterIds.includes(filterId);
     // Get button label
     const buttonLabel = hasActiveFilters ? 'Filters' : 'Add Filters';
-    return (jsxRuntime.jsxs(Popover__namespace.Root, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: jsxRuntime.jsxs("button", { type: "button", disabled: disabled, className: cn('flex h-7 items-center gap-2 rounded-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: [jsxRuntime.jsx(Plus, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "font-medium", children: buttonLabel })] }) }), jsxRuntime.jsx(Popover__namespace.Portal, { children: jsxRuntime.jsx(Popover__namespace.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: jsxRuntime.jsx("div", { className: "p-1", children: availableFilters.map((filter) => {
-                            const active = isFilterActive(filter.id);
-                            return (jsxRuntime.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 && jsxRuntime.jsx("span", { className: "text-muted-foreground", children: filter.icon }), jsxRuntime.jsx("span", { children: filter.label }), active && (jsxRuntime.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "(active)" }))] }, filter.id));
-                        }) }) }) })] }));
+    return (jsxRuntime.jsxs(popover.Popover, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(button.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: [jsxRuntime.jsx(Plus, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "font-medium", children: buttonLabel })] }) }), jsxRuntime.jsx(popover.PopoverContent, { className: "w-auto min-w-[180px] p-0", sideOffset: 4, align: "start", children: jsxRuntime.jsx("div", { className: "p-1", children: availableFilters.map((filter) => {
+                        const active = isFilterActive(filter.id);
+                        return (jsxRuntime.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 && jsxRuntime.jsx("span", { className: "text-muted-foreground", children: filter.icon }), jsxRuntime.jsx("span", { children: filter.label }), active && (jsxRuntime.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "(active)" }))] }, filter.id));
+                    }) }) })] }));
 }
 
 /**
@@ -8400,10 +8427,10 @@ function ActionMultiSelect({ value, onChange, className = '', disabled = false,
             return '1 action';
         return `${value.length} actions`;
     }, [value.length]);
-    return (jsxRuntime.jsxs(Popover__namespace.Root, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: jsxRuntime.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: [jsxRuntime.jsx("span", { className: "font-medium", children: displayText }), jsxRuntime.jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground shrink-0" })] }) }), jsxRuntime.jsx(Popover__namespace.Portal, { children: jsxRuntime.jsx(Popover__namespace.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: jsxRuntime.jsx("div", { className: "p-1", children: isLoading ? (jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Loading..." })) : options.length === 0 ? (jsxRuntime.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 (jsxRuntime.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: [jsxRuntime.jsx(checkbox.Checkbox, { checked: checked, onCheckedChange: () => handleToggle(option.value), className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1", children: option.label }), option.count !== undefined && (jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value));
-                        })) }) }) })] }));
+    return (jsxRuntime.jsxs(popover.Popover, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { htmlType: "button", type: "quaternary", theme: "outline", size: "small", disabled: disabled || isLoading, className: cn('min-w-[100px] justify-between gap-2', className), children: [jsxRuntime.jsx("span", { className: "font-medium", children: displayText }), jsxRuntime.jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground shrink-0" })] }) }), jsxRuntime.jsx(popover.PopoverContent, { className: "w-auto min-w-[160px] p-0", sideOffset: 4, align: "start", children: jsxRuntime.jsx("div", { className: "p-1", children: isLoading ? (jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "Loading..." })) : options.length === 0 ? (jsxRuntime.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 (jsxRuntime.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: [jsxRuntime.jsx(checkbox.Checkbox, { checked: checked, onCheckedChange: () => handleToggle(option.value), className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "flex-1", children: option.label }), option.count !== undefined && (jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value));
+                    })) }) })] }));
 }
 
 /**
@@ -8435,7 +8462,7 @@ function UserSelect({ value, options, onChange, className = '', disabled = false
         e.stopPropagation();
         onChange(undefined);
     }, [onChange]);
-    return (jsxRuntime.jsxs(Popover__namespace.Root, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: jsxRuntime.jsxs(button.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: [jsxRuntime.jsx(User, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: displayLabel }), value && (jsxRuntime.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: jsxRuntime.jsx(X, { className: "h-3 w-3" }) }))] }) }), jsxRuntime.jsx(Popover__namespace.Portal, { children: jsxRuntime.jsxs(Popover__namespace.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: [jsxRuntime.jsx("div", { className: "border-b p-2", children: jsxRuntime.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 }) }), jsxRuntime.jsxs("div", { className: "max-h-64 overflow-y-auto p-1", children: [jsxRuntime.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: [jsxRuntime.jsx("span", { className: "font-medium", children: "All Users" }), options.length > 0 && (jsxRuntime.jsx("span", { className: "text-muted-foreground", children: options.reduce((sum, opt) => sum + (opt.count || 0), 0) }))] }), isLoading && (jsxRuntime.jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "Loading users..." })), !isLoading && filteredOptions.length > 0 && (jsxRuntime.jsx("div", { className: "mt-1 border-t pt-1", children: filteredOptions.map((option) => (jsxRuntime.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: [jsxRuntime.jsx("span", { className: "truncate font-medium", children: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: "text-muted-foreground ml-2 flex-shrink-0", children: option.count }))] }, option.value))) })), !isLoading && filteredOptions.length === 0 && search && (jsxRuntime.jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "No users found" })), !isLoading && options.length === 0 && !search && (jsxRuntime.jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "No users available" }))] })] }) })] }));
+    return (jsxRuntime.jsxs(popover.Popover, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", disabled: disabled, className: cn('gap-1.5', value && 'pr-1.5', className), children: [jsxRuntime.jsx(User, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: displayLabel }), value && (jsxRuntime.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: jsxRuntime.jsx(X, { className: "h-3 w-3" }) }))] }) }), jsxRuntime.jsxs(popover.PopoverContent, { className: "w-64 p-0", align: "start", sideOffset: 4, children: [jsxRuntime.jsx("div", { className: "border-b p-2", children: jsxRuntime.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 }) }), jsxRuntime.jsxs("div", { className: "max-h-64 overflow-y-auto p-1", children: [jsxRuntime.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: [jsxRuntime.jsx("span", { className: "font-medium", children: "All Users" }), options.length > 0 && (jsxRuntime.jsx("span", { className: "text-muted-foreground", children: options.reduce((sum, opt) => sum + (opt.count || 0), 0) }))] }), isLoading && (jsxRuntime.jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "Loading users..." })), !isLoading && filteredOptions.length > 0 && (jsxRuntime.jsx("div", { className: "mt-1 border-t pt-1", children: filteredOptions.map((option) => (jsxRuntime.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: [jsxRuntime.jsx("span", { className: "truncate font-medium", children: option.label }), option.count !== undefined && (jsxRuntime.jsx("span", { className: "text-muted-foreground ml-2 flex-shrink-0", children: option.count }))] }, option.value))) })), !isLoading && filteredOptions.length === 0 && search && (jsxRuntime.jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "No users found" })), !isLoading && options.length === 0 && !search && (jsxRuntime.jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "No users available" }))] })] })] }));
 }
 
 /**
@@ -8782,7 +8809,7 @@ function AuditLogFilters({ client, filters, timeRange, onFiltersChange, onTimeRa
         label: facet.value,
         count: facet.count,
     }));
-    return (jsxRuntime.jsx("div", { className: `border-b border-border py-4 pt-0 ${className}`, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [jsxRuntime.jsx(ActionMultiSelect, { value: getActionValues(), onChange: handleActionChange, options: actionOptions, disabled: disabled, isLoading: !verbs.length && !facetsError, className: "h-7 text-xs min-w-[180px]" }), jsxRuntime.jsx(UserSelect, { value: getCurrentUser(), options: userOptions, onChange: handleUserChange, disabled: disabled, isLoading: !usernames.length && !facetsError }), activeFilterIds.map((filterId) => {
+    return (jsxRuntime.jsx("div", { className: `border-b border-border py-4 pt-0 ${className}`, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [jsxRuntime.jsx(ActionMultiSelect, { value: getActionValues(), onChange: handleActionChange, options: actionOptions, disabled: disabled, isLoading: !verbs.length && !facetsError, className: "min-w-[180px]" }), jsxRuntime.jsx(UserSelect, { value: getCurrentUser(), options: userOptions, onChange: handleUserChange, disabled: disabled, isLoading: !usernames.length && !facetsError }), activeFilterIds.map((filterId) => {
                     const config = FILTER_CONFIGS$2[filterId];
                     return (jsxRuntime.jsx(FilterChip, { label: config.label, values: getFilterValues(filterId), options: config.inputMode === "typeahead"
                             ? getFilterOptions(filterId)
@@ -8918,7 +8945,7 @@ function CopyButton({ value, label }) {
             console.error('Failed to copy:', err);
         }
     };
-    return (jsxRuntime.jsxs(Tooltip, { delayDuration: 400, children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.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 ? (jsxRuntime.jsx(Check, { className: "h-3 w-3 text-green-600 dark:text-green-400" })) : (jsxRuntime.jsx(Copy, { className: "h-3 w-3 text-gray-500 dark:text-gray-400" })) }) }), jsxRuntime.jsx(TooltipContent, { side: "top", children: jsxRuntime.jsx("p", { className: "text-xs", children: isCopied ? 'Copied!' : `Copy ${label}` }) })] }));
+    return (jsxRuntime.jsxs(Tooltip, { delayDuration: 400, children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.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 ? (jsxRuntime.jsx(Check, { className: "h-3 w-3 text-[var(--success-500)]" })) : (jsxRuntime.jsx(Copy, { className: "h-3 w-3 text-muted-foreground" })) }) }), jsxRuntime.jsx(TooltipContent, { side: "top", children: jsxRuntime.jsx("p", { className: "text-xs", children: isCopied ? 'Copied!' : `Copy ${label}` }) })] }));
 }
 /**
  * A label / value row inside a Section. The value is truncated to one
@@ -8996,8 +9023,8 @@ function AuditLogExpandedDetails({ event, compact = true }) {
     const status = event.responseStatus;
     const isOk = status?.code != null && status.code >= 200 && status.code < 300;
     const body = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(DetailGrid, { children: [jsxRuntime.jsxs(Section, { title: "Request", children: [jsxRuntime.jsx(Field, { label: "Verb", value: event.verb || 'Unknown', copyValue: event.verb || undefined, copyLabel: "verb" }), event.requestURI ? (jsxRuntime.jsx(Field, { label: "URI", value: event.requestURI, copyValue: event.requestURI, mono: true })) : null] }), status ? (jsxRuntime.jsxs(Section, { title: "Response", children: [status.code != null ? (jsxRuntime.jsx(Field, { label: "Status code", value: jsxRuntime.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 ? jsxRuntime.jsx(Field, { label: "Status", value: status.status }) : null, status.reason ? jsxRuntime.jsx(Field, { label: "Reason", value: status.reason }) : null, status.message ? (jsxRuntime.jsx(Field, { label: "Message", value: status.message, copyValue: status.message })) : null] })) : null, jsxRuntime.jsx(Section, { title: "When", children: jsxRuntime.jsx(Field, { label: "Timestamp", value: jsxRuntime.jsx(Timestamp, { value: timestamp, variant: "iso-utc" }), copyValue: timestamp || '', copyLabel: "timestamp", disableTooltip: true }) }), event.user ? (jsxRuntime.jsxs(Section, { title: "User", children: [event.user.username ? (jsxRuntime.jsx(Field, { label: "Username", value: event.user.username, copyValue: event.user.username })) : null, event.user.uid ? (jsxRuntime.jsx(Field, { label: "UID", value: event.user.uid, copyValue: event.user.uid, mono: true })) : null, event.user.groups && event.user.groups.length > 0 ? (jsxRuntime.jsx(Field, { label: "Groups", value: event.user.groups.join(', ') })) : null] })) : null, event.objectRef ? (jsxRuntime.jsxs(Section, { title: "Resource", children: [jsxRuntime.jsx(Field, { label: "Kind", value: jsxRuntime.jsxs("span", { children: [event.objectRef.resource || 'Unknown', event.objectRef.apiGroup ? (jsxRuntime.jsxs("span", { className: "ml-1 text-muted-foreground", children: ["\u00B7 ", event.objectRef.apiGroup] })) : null] }), copyValue: event.objectRef.resource, copyLabel: "resource kind" }), event.objectRef.name ? (jsxRuntime.jsx(Field, { label: "Name", value: event.objectRef.name, copyValue: event.objectRef.name, copyLabel: "resource name" })) : null, event.objectRef.namespace ? (jsxRuntime.jsx(Field, { label: "Namespace", value: event.objectRef.namespace, copyValue: event.objectRef.namespace })) : null, event.objectRef.apiVersion ? (jsxRuntime.jsx(Field, { label: "API version", value: event.objectRef.apiVersion })) : null, event.objectRef.subresource ? (jsxRuntime.jsx(Field, { label: "Subresource", value: event.objectRef.subresource })) : null, event.objectRef.uid ? (jsxRuntime.jsx(Field, { label: "UID", value: event.objectRef.uid, copyValue: event.objectRef.uid, mono: true })) : null] })) : null, event.userAgent || (event.sourceIPs && event.sourceIPs.length > 0) ? (jsxRuntime.jsxs(Section, { title: "Source", children: [event.sourceIPs && event.sourceIPs.length > 0 ? (jsxRuntime.jsx(Field, { label: "Source IPs", value: event.sourceIPs.join(', ') })) : null, event.userAgent ? (jsxRuntime.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 ? jsxRuntime.jsx(Field, { label: "Status", value: status.status }) : null, status.reason ? jsxRuntime.jsx(Field, { label: "Reason", value: status.reason }) : null, status.message ? (jsxRuntime.jsx(Field, { label: "Message", value: status.message, copyValue: status.message })) : null] })) : null, jsxRuntime.jsx(Section, { title: "When", children: jsxRuntime.jsx(Field, { label: "Timestamp", value: jsxRuntime.jsx(Timestamp, { value: timestamp, variant: "iso-utc" }), copyValue: timestamp || '', copyLabel: "timestamp", disableTooltip: true }) }), event.user ? (jsxRuntime.jsxs(Section, { title: "User", children: [event.user.username ? (jsxRuntime.jsx(Field, { label: "Username", value: event.user.username, copyValue: event.user.username })) : null, event.user.uid ? (jsxRuntime.jsx(Field, { label: "UID", value: event.user.uid, copyValue: event.user.uid, mono: true })) : null, event.user.groups && event.user.groups.length > 0 ? (jsxRuntime.jsx(Field, { label: "Groups", value: event.user.groups.join(', ') })) : null] })) : null, event.objectRef ? (jsxRuntime.jsxs(Section, { title: "Resource", children: [jsxRuntime.jsx(Field, { label: "Kind", value: jsxRuntime.jsxs("span", { children: [event.objectRef.resource || 'Unknown', event.objectRef.apiGroup ? (jsxRuntime.jsxs("span", { className: "ml-1 text-muted-foreground", children: ["\u00B7 ", event.objectRef.apiGroup] })) : null] }), copyValue: event.objectRef.resource, copyLabel: "resource kind" }), event.objectRef.name ? (jsxRuntime.jsx(Field, { label: "Name", value: event.objectRef.name, copyValue: event.objectRef.name, copyLabel: "resource name" })) : null, event.objectRef.namespace ? (jsxRuntime.jsx(Field, { label: "Namespace", value: event.objectRef.namespace, copyValue: event.objectRef.namespace })) : null, event.objectRef.apiVersion ? (jsxRuntime.jsx(Field, { label: "API version", value: event.objectRef.apiVersion })) : null, event.objectRef.subresource ? (jsxRuntime.jsx(Field, { label: "Subresource", value: event.objectRef.subresource })) : null, event.objectRef.uid ? (jsxRuntime.jsx(Field, { label: "UID", value: event.objectRef.uid, copyValue: event.objectRef.uid, mono: true })) : null] })) : null, event.userAgent || (event.sourceIPs && event.sourceIPs.length > 0) ? (jsxRuntime.jsxs(Section, { title: "Source", children: [event.sourceIPs && event.sourceIPs.length > 0 ? (jsxRuntime.jsx(Field, { label: "Source IPs", value: event.sourceIPs.join(', ') })) : null, event.userAgent ? (jsxRuntime.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) ? (jsxRuntime.jsxs("details", { className: "group mt-5", children: [jsxRuntime.jsx("summary", { className: "cursor-pointer list-none", children: jsxRuntime.jsxs("h4", { className: "inline-flex items-center m-0 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/80 hover:text-foreground", children: [jsxRuntime.jsx("span", { className: "mr-1 group-open:rotate-90 transition-transform", children: "\u25B8" }), "Advanced"] }) }), jsxRuntime.jsx("div", { className: "mt-3 pl-3", children: jsxRuntime.jsxs(DetailGrid, { children: [jsxRuntime.jsxs(Section, { title: "Audit", children: [event.auditID ? (jsxRuntime.jsx(Field, { label: "Audit ID", value: event.auditID, copyValue: event.auditID, mono: true })) : null, event.stage ? jsxRuntime.jsx(Field, { label: "Stage", value: event.stage }) : null, event.level ? jsxRuntime.jsx(Field, { label: "Level", value: event.level }) : null] }), event.annotations && Object.keys(event.annotations).length > 0 ? (jsxRuntime.jsx(Section, { title: "Annotations", children: Object.entries(event.annotations).map(([key, value]) => (jsxRuntime.jsx(Field, { label: key, value: value, mono: true }, key))) })) : null] }) })] })) : null, event.requestObject || event.responseObject ? (jsxRuntime.jsxs("details", { className: "group mt-3", children: [jsxRuntime.jsx("summary", { className: "cursor-pointer list-none", children: jsxRuntime.jsxs("h4", { className: "inline-flex items-center m-0 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/80 hover:text-foreground", children: [jsxRuntime.jsx("span", { className: "mr-1 group-open:rotate-90 transition-transform", children: "\u25B8" }), "Raw objects"] }) }), jsxRuntime.jsxs("div", { className: "mt-3 space-y-3", children: [event.requestObject ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Request" }), jsxRuntime.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 ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Response" }), jsxRuntime.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 (jsxRuntime.jsx(TooltipProvider, { children: compact ? (jsxRuntime.jsx(DetailPanelShell, { children: body })) : (jsxRuntime.jsx("div", { className: "mt-4 pt-4 border-t border-border", children: body })) }));
 }
@@ -9005,22 +9032,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';
     }
 }
 /**
@@ -9031,9 +9057,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
@@ -9074,14 +9100,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 (jsxRuntime.jsxs("div", { className: cn(!isLast && !isExpanded && 'border-b border-border', className), children: [jsxRuntime.jsxs("div", { className: cn('flex items-center gap-3 cursor-pointer group', compact ? 'py-2' : 'py-3', isSelected && 'bg-muted/40'), onClick: toggleExpand, children: [jsxRuntime.jsx("div", { className: cn('w-8 h-8 rounded-md shrink-0 flex items-center justify-center', iconBg, iconColor), title: event.verb, children: jsxRuntime.jsx(Icon, { size: 16, strokeWidth: 2 }) }), jsxRuntime.jsx("div", { className: "flex-1 min-w-0 text-sm leading-snug", style: { minWidth: 0 }, children: jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsx("div", { className: "text-foreground", style: {
                                                 display: 'block',
                                                 overflow: 'hidden',
@@ -9090,10 +9116,10 @@ function AuditLogFeedItem({ event, onEventClick, isSelected = false, className =
                                                 cursor: 'help',
                                             }, children: summary }) }), jsxRuntime.jsx(TooltipContent, { className: "max-w-[480px] whitespace-normal break-words", children: summary })] }) }), jsxRuntime.jsxs("span", { className: cn('inline-flex items-center gap-1 text-xs font-semibold shrink-0', statusIndicator.className), children: [jsxRuntime.jsx("span", { children: statusIndicator.icon }), event.responseStatus?.code ? jsxRuntime.jsx("span", { children: event.responseStatus.code }) : null] }), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap shrink-0", children: jsxRuntime.jsx(Timestamp, { value: timestamp }) }), jsxRuntime.jsx(button.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 ? jsxRuntime.jsx(AuditLogExpandedDetails, { event: event }) : null] }));
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(table.TableRow, { "data-state": isSelected ? 'selected' : undefined, className: cn('cursor-pointer', isNew && 'bg-green-50/40 dark:bg-green-950/20', className), onClick: (e) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(table.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: [jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle whitespace-nowrap", children: jsxRuntime.jsx(Badge, { className: getVerbBadgeClasses(event.verb), children: event.verb?.toUpperCase() || 'UNKNOWN' }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle", style: { width: '100%', maxWidth: 0, overflow: 'hidden' }, children: jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsx("div", { className: "text-sm leading-snug", style: {
+                }, "aria-expanded": isExpanded, children: [jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle whitespace-nowrap", children: jsxRuntime.jsx(Badge, { variant: getVerbBadgeVariant(event.verb), className: VERB_BADGE_CLASSES, children: event.verb?.toUpperCase() || 'UNKNOWN' }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle", style: { width: '100%', maxWidth: 0, overflow: 'hidden' }, children: jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsx("div", { className: "text-sm leading-snug", style: {
                                             overflow: 'hidden',
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
@@ -9103,7 +9129,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] = React.useState(null);
     const [events, setEvents] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -10270,7 +10296,7 @@ function ActivityExpandedDetails({ activity, compact = false, }) {
     const timestamp = metadata?.creationTimestamp;
     const actorDisplay = actor.displayName || actor.name;
     const actorIsUser = actor.type === 'user';
-    const body = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [changes && changes.length > 0 ? (jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "m-0 mb-2 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/80", children: "Changes" }), jsxRuntime.jsx("div", { className: "flex flex-col gap-1.5", children: changes.map((change, index) => (jsxRuntime.jsxs("div", { className: "rounded bg-muted px-2.5 py-1.5 text-xs", children: [jsxRuntime.jsx("span", { className: "block font-mono text-[11px] font-semibold text-foreground", children: change.field }), change.old ? (jsxRuntime.jsxs("span", { className: "block ml-2 text-red-600 dark:text-red-400", children: [jsxRuntime.jsx("span", { className: "mr-1 font-medium", children: "\u2212" }), jsxRuntime.jsx("span", { className: "line-through", children: change.old })] })) : null, change.new ? (jsxRuntime.jsxs("span", { className: "block ml-2 text-green-600 dark:text-green-400", children: [jsxRuntime.jsx("span", { className: "mr-1 font-medium", children: "+" }), change.new] })) : null] }, index))) })] })) : null, jsxRuntime.jsxs(DetailGrid, { children: [jsxRuntime.jsx(Section, { title: "When", children: jsxRuntime.jsx(Field, { label: "Timestamp", value: jsxRuntime.jsx(Timestamp, { value: timestamp, variant: "iso-utc" }), copyValue: timestamp ?? '', copyLabel: "timestamp", disableTooltip: true }) }), jsxRuntime.jsxs(Section, { title: "Actor", children: [jsxRuntime.jsx(Field, { label: "Name", value: jsxRuntime.jsxs("span", { children: [actorDisplay, actor.type ? (jsxRuntime.jsxs("span", { className: "ml-1 text-muted-foreground", children: ["(", actor.type, ")"] })) : null] }), copyValue: actorDisplay, copyLabel: "actor name" }), actorIsUser && actor.email ? (jsxRuntime.jsx(Field, { label: "Email", value: actor.email, copyValue: actor.email, mono: true })) : null, actor.uid ? (jsxRuntime.jsx(Field, { label: "UID", value: actor.uid, copyValue: actor.uid, mono: true })) : null] }), jsxRuntime.jsxs(Section, { title: "Resource", children: [jsxRuntime.jsx(Field, { label: "Kind", value: jsxRuntime.jsxs("span", { children: [resource.kind, resource.apiGroup ? (jsxRuntime.jsxs("span", { className: "ml-1 text-muted-foreground", children: ["\u00B7 ", resource.apiGroup] })) : null] }), copyValue: resource.kind, copyLabel: "resource kind" }), resource.name ? (jsxRuntime.jsx(Field, { label: "Name", value: resource.name, copyValue: resource.name, copyLabel: "resource name" })) : null, resource.namespace ? (jsxRuntime.jsx(Field, { label: "Namespace", value: resource.namespace, copyValue: resource.namespace })) : null, resource.uid ? (jsxRuntime.jsx(Field, { label: "UID", value: resource.uid, copyValue: resource.uid, mono: true })) : null] }), jsxRuntime.jsxs(Section, { title: "Origin", children: [jsxRuntime.jsx(Field, { label: "Source", value: origin.type, copyValue: origin.type, copyLabel: "origin type" }), origin.id ? (jsxRuntime.jsx(Field, { label: "ID", value: origin.id, copyValue: origin.id, mono: true })) : null] })] })] }));
+    const body = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [changes && changes.length > 0 ? (jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("h4", { className: "m-0 mb-2 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/80", children: "Changes" }), jsxRuntime.jsx("div", { className: "flex flex-col gap-1.5", children: changes.map((change, index) => (jsxRuntime.jsxs("div", { className: "rounded bg-muted px-2.5 py-1.5 text-xs", children: [jsxRuntime.jsx("span", { className: "block font-mono text-[11px] font-semibold text-foreground", children: change.field }), change.old ? (jsxRuntime.jsxs("span", { className: "block ml-2 text-destructive", children: [jsxRuntime.jsx("span", { className: "mr-1 font-medium", children: "\u2212" }), jsxRuntime.jsx("span", { className: "line-through", children: change.old })] })) : null, change.new ? (jsxRuntime.jsxs("span", { className: "block ml-2 text-[var(--success-500)]", children: [jsxRuntime.jsx("span", { className: "mr-1 font-medium", children: "+" }), change.new] })) : null] }, index))) })] })) : null, jsxRuntime.jsxs(DetailGrid, { children: [jsxRuntime.jsx(Section, { title: "When", children: jsxRuntime.jsx(Field, { label: "Timestamp", value: jsxRuntime.jsx(Timestamp, { value: timestamp, variant: "iso-utc" }), copyValue: timestamp ?? '', copyLabel: "timestamp", disableTooltip: true }) }), jsxRuntime.jsxs(Section, { title: "Actor", children: [jsxRuntime.jsx(Field, { label: "Name", value: jsxRuntime.jsxs("span", { children: [actorDisplay, actor.type ? (jsxRuntime.jsxs("span", { className: "ml-1 text-muted-foreground", children: ["(", actor.type, ")"] })) : null] }), copyValue: actorDisplay, copyLabel: "actor name" }), actorIsUser && actor.email ? (jsxRuntime.jsx(Field, { label: "Email", value: actor.email, copyValue: actor.email, mono: true })) : null, actor.uid ? (jsxRuntime.jsx(Field, { label: "UID", value: actor.uid, copyValue: actor.uid, mono: true })) : null] }), jsxRuntime.jsxs(Section, { title: "Resource", children: [jsxRuntime.jsx(Field, { label: "Kind", value: jsxRuntime.jsxs("span", { children: [resource.kind, resource.apiGroup ? (jsxRuntime.jsxs("span", { className: "ml-1 text-muted-foreground", children: ["\u00B7 ", resource.apiGroup] })) : null] }), copyValue: resource.kind, copyLabel: "resource kind" }), resource.name ? (jsxRuntime.jsx(Field, { label: "Name", value: resource.name, copyValue: resource.name, copyLabel: "resource name" })) : null, resource.namespace ? (jsxRuntime.jsx(Field, { label: "Namespace", value: resource.namespace, copyValue: resource.namespace })) : null, resource.uid ? (jsxRuntime.jsx(Field, { label: "UID", value: resource.uid, copyValue: resource.uid, mono: true })) : null] }), jsxRuntime.jsxs(Section, { title: "Origin", children: [jsxRuntime.jsx(Field, { label: "Source", value: origin.type, copyValue: origin.type, copyLabel: "origin type" }), origin.id ? (jsxRuntime.jsx(Field, { label: "ID", value: origin.id, copyValue: origin.id, mono: true })) : null] })] })] }));
     return (jsxRuntime.jsx(TooltipProvider, { children: compact ? (jsxRuntime.jsx(DetailPanelShell, { children: body })) : (jsxRuntime.jsx("div", { className: "mt-4 pt-4 border-t border-border", children: body })) }));
 }
 
@@ -10339,23 +10365,23 @@ function getActionIconClasses(verb) {
     switch (normalizedVerb) {
         case "create":
             return {
-                container: "bg-blue-50 dark:bg-blue-950",
-                icon: "text-blue-500 dark:text-blue-400",
+                container: "bg-[var(--success-100)]",
+                icon: "text-[var(--success-500)]",
             };
         case "update":
             return {
-                container: "bg-green-50 dark:bg-green-950",
-                icon: "text-green-600 dark:text-green-400",
+                container: "bg-[var(--info-100)]",
+                icon: "text-[var(--info-500)]",
             };
         case "delete":
             return {
-                container: "bg-red-50 dark:bg-red-950",
-                icon: "text-red-500 dark:text-red-400",
+                container: "bg-destructive/10",
+                icon: "text-destructive",
             };
         default:
             return {
-                container: "bg-slate-100 dark:bg-slate-800",
-                icon: "text-slate-500 dark:text-slate-400",
+                container: "bg-muted",
+                icon: "text-muted-foreground",
             };
     }
 }
@@ -10413,7 +10439,7 @@ function ActivityFeedItem({ activity, onResourceClick, resourceLinkResolver, ten
     // surfaced via a hover tooltip on the avatar so the column stays narrow.
     const actorTooltipBody = (jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 text-xs", children: [jsxRuntime.jsx("span", { className: "font-medium", children: actorVisible }), actor.email && actor.email !== actorVisible ? (jsxRuntime.jsx("span", { className: "font-mono", children: actor.email })) : null, actor.uid ? (jsxRuntime.jsx("span", { className: "font-mono opacity-70", children: actor.uid })) : null] }));
     const actorCell = (jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: avatar }), jsxRuntime.jsx(TooltipContent, { children: actorTooltipBody })] }));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(table.TableRow, { "data-state": isSelected ? "selected" : undefined, className: cn("cursor-pointer", isNew && "bg-green-50/40 dark:bg-green-950/20", className), onClick: (e) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(table.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,
@@ -10584,6 +10610,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 (jsxRuntime.jsx(buttonGroup.ButtonGroup, { "aria-label": ariaLabel, className: className, children: options.map((option) => {
+            const active = value === option.value;
+            return (jsxRuntime.jsx(button.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
  */
@@ -10607,17 +10645,8 @@ const OPTIONS$1 = [
 /**
  * ChangeSourceToggle provides a segmented control for filtering by change source
  */
-function ChangeSourceToggle({ value, onChange, className = "", disabled = false, }) {
-    return (jsxRuntime.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 (jsxRuntime.jsx(button.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 (jsxRuntime.jsx(SegmentedToggle, { options: OPTIONS$1, value: value, onChange: onChange, ariaLabel: "Filter by change source", className: className, disabled: disabled }));
 }
 
 /**
@@ -10689,7 +10718,7 @@ const getSelectedPreset$1 = (timeRange) => {
 /**
  * ActivityFeedFilters provides filter controls for the activity feed
  */
-function ActivityFeedFilters({ client, filters, timeRange, onFiltersChange, onTimeRangeChange, disabled = false, hiddenFilters = [], className = "", }) {
+function ActivityFeedFilters({ client, filters, timeRange, onFiltersChange, onTimeRangeChange, disabled = false, hiddenFilters = [], className = "", extraFilters, }) {
     const { resourceKinds, actorNames, apiGroups, resourceNamespaces, error: facetsError, } = useFacets(client, timeRange, filters);
     // Log facets error for debugging
     if (facetsError) {
@@ -10909,12 +10938,12 @@ function ActivityFeedFilters({ client, filters, timeRange, onFiltersChange, onTi
             clearTimeout(searchDebounceRef.current);
         onFiltersChangeRef.current({ ...filtersRef.current, search: undefined });
     }, []);
-    return (jsxRuntime.jsx("div", { className: `border-b border-border py-4 ${className}`, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [!hiddenFilters.includes("changeSource") && (jsxRuntime.jsx(ChangeSourceToggle, { value: filters.changeSource || "all", onChange: handleChangeSourceChange, disabled: disabled })), jsxRuntime.jsxs("div", { className: "relative min-w-[200px] flex-1 max-w-xs", children: [jsxRuntime.jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), jsxRuntime.jsx(input.Input, { type: "text", placeholder: "Search activities...", value: searchInputValue, onChange: handleSearchChange, className: "pl-8 h-7 text-xs pr-6" }), searchInputValue && (jsxRuntime.jsx("button", { onClick: handleSearchClear, className: "absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors", "aria-label": "Clear search", children: jsxRuntime.jsx(X, { className: "h-3.5 w-3.5" }) }))] }), activeFilterIds.map((filterId) => {
+    return (jsxRuntime.jsx("div", { className: `border-b border-border py-4 ${className}`, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [!hiddenFilters.includes("changeSource") && (jsxRuntime.jsx(ChangeSourceToggle, { value: filters.changeSource || "all", onChange: handleChangeSourceChange, disabled: disabled })), jsxRuntime.jsxs("div", { className: "relative min-w-[200px] flex-1 max-w-xs", children: [jsxRuntime.jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), jsxRuntime.jsx(input.Input, { type: "text", placeholder: "Search activities...", value: searchInputValue, onChange: handleSearchChange, className: "h-9 pl-9 pr-9 text-xs md:text-xs" }), searchInputValue && (jsxRuntime.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: jsxRuntime.jsx(X, { className: "h-3.5 w-3.5" }) }))] }), activeFilterIds.map((filterId) => {
                     const config = FILTER_CONFIGS$1[filterId];
                     return (jsxRuntime.jsx(FilterChip, { label: config.label, values: getFilterValues(filterId), options: config.inputMode === "typeahead"
                             ? getFilterOptions(filterId)
                             : undefined, onValuesChange: (values) => handleFilterChange(filterId, values), onClear: () => handleFilterClear(filterId), onPopoverClose: () => handlePopoverClose(filterId), inputMode: config.inputMode, placeholder: config.placeholder, searchPlaceholder: config.searchPlaceholder, autoOpen: pendingFilter === filterId, disabled: disabled }, filterId));
-                }), jsxRuntime.jsx(AddFilterDropdown, { availableFilters: availableFilters, activeFilterIds: activeFilterIds, onAddFilter: handleAddFilter, hasActiveFilters: activeFilterIds.length > 0, disabled: disabled }), jsxRuntime.jsx("div", { className: "flex-1 min-w-[20px]" }), jsxRuntime.jsx(TimeRangeDropdown, { presets: TIME_PRESETS$1, selectedPreset: selectedPreset, onPresetSelect: handleTimePresetSelect, onCustomRangeApply: handleCustomRangeApply, customStart: customStart, customEnd: customEnd, disabled: disabled, displayLabel: getTimeRangeLabel() })] }) }));
+                }), jsxRuntime.jsx(AddFilterDropdown, { availableFilters: availableFilters, activeFilterIds: activeFilterIds, onAddFilter: handleAddFilter, hasActiveFilters: activeFilterIds.length > 0, disabled: disabled }), extraFilters, jsxRuntime.jsx("div", { className: "flex-1 min-w-[20px]" }), jsxRuntime.jsx(TimeRangeDropdown, { presets: TIME_PRESETS$1, selectedPreset: selectedPreset, onPresetSelect: handleTimePresetSelect, onCustomRangeApply: handleCustomRangeApply, customStart: customStart, customEnd: customEnd, disabled: disabled, displayLabel: getTimeRangeLabel() })] }) }));
 }
 
 /**
@@ -10984,26 +11013,28 @@ function ActivityFeed({ client, initialFilters = { changeSource: "human" }, init
     React.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.
     React.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 = React.useCallback((newFilters) => {
         setFilters(newFilters);
@@ -11043,7 +11074,7 @@ 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 (jsxRuntime.jsx(TooltipProvider, { delayDuration: 200, children: jsxRuntime.jsxs(card.Card, { className: containerClasses, children: [enableStreaming && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center", children: [isStreaming && !watchError && (jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2", children: [jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 dark:bg-green-500 opacity-75" }), jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500 dark:bg-green-400" })] }), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Streaming activity..." })] }) }), jsxRuntime.jsx(TooltipContent, { className: "text-xs", children: jsxRuntime.jsx("p", { children: "New activities will appear automatically" }) })] }) })), watchError && (jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "relative flex h-2 w-2", children: jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-red-500 dark:bg-red-400" }) }), jsxRuntime.jsx("span", { className: "text-xs text-destructive", children: "Connection error" })] }) }), jsxRuntime.jsx(TooltipContent, { className: "text-xs", children: jsxRuntime.jsx("p", { children: "Stream connection lost" }) })] }) })), newActivitiesCount > 0 && !watchError && (jsxRuntime.jsxs(Badge, { variant: "secondary", className: "text-xs", children: ["+", newActivitiesCount, " new"] }))] }), jsxRuntime.jsx(button.Button, { type: "tertiary", theme: "outline", size: "small", onClick: handleStreamingToggle, children: watchError ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", strokeWidth: "2", children: [jsxRuntime.jsx("path", { d: "M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" })] }), "Retry"] })) : isStreaming ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("rect", { x: "6", y: "4", width: "4", height: "16" }), jsxRuntime.jsx("rect", { x: "14", y: "4", width: "4", height: "16" })] }), "Pause"] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("polygon", { points: "5,3 19,12 5,21", fill: "currentColor" }) }), "Resume"] })) })] })), showFilters && (jsxRuntime.jsx(ActivityFeedFilters, { client: client, filters: filters, timeRange: timeRange, onFiltersChange: handleFiltersChange, onTimeRangeChange: handleTimeRangeChange, disabled: isLoading, hiddenFilters: hiddenFilters })), jsxRuntime.jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-4", errorFormatter: errorFormatter }), jsxRuntime.jsx(ApiErrorAlert, { error: watchError, onRetry: startStreaming, className: "mb-4", errorFormatter: errorFormatter }), !policiesLoading && hasPolicies === false && (jsxRuntime.jsxs("div", { className: "flex flex-col items-center py-12 px-8 text-center bg-muted border border-dashed border-border rounded-xl mb-4", children: [jsxRuntime.jsx("div", { className: "flex justify-center mb-4 text-muted-foreground", children: jsxRuntime.jsxs("svg", { width: "56", height: "56", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" }), jsxRuntime.jsx("rect", { x: "9", y: "3", width: "6", height: "4", rx: "1" }), jsxRuntime.jsx("path", { d: "M9 12h6" }), jsxRuntime.jsx("path", { d: "M9 16h6" })] }) }), jsxRuntime.jsx("h3", { className: "m-0 mb-2 text-lg font-semibold text-foreground leading-snug", children: "Get started with activity logging" }), jsxRuntime.jsx("p", { className: "m-0 mb-6 text-sm leading-relaxed text-muted-foreground max-w-[400px]", children: "Activity policies define which resources to track and how to summarize changes. Create your first policy to start seeing activity logs here." }), onCreatePolicy && (jsxRuntime.jsx(button.Button, { onClick: onCreatePolicy, children: "Create Policy" }))] })), jsxRuntime.jsxs("div", { className: listClasses, ref: scrollContainerRef, style: effectiveMaxHeight ? { maxHeight: effectiveMaxHeight } : undefined, children: [!isLoading &&
+    return (jsxRuntime.jsx(TooltipProvider, { delayDuration: 200, children: jsxRuntime.jsxs(card.Card, { className: containerClasses, children: [enableStreaming && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center", children: [isStreaming && !watchError && (jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2", children: [jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--success-500)] opacity-75" }), jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-[var(--success-500)]" })] }), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Streaming activity..." })] }) }), jsxRuntime.jsx(TooltipContent, { className: "text-xs", children: jsxRuntime.jsx("p", { children: "New activities will appear automatically" }) })] }) })), watchError && (jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "relative flex h-2 w-2", children: jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-destructive" }) }), jsxRuntime.jsx("span", { className: "text-xs text-destructive", children: "Connection error" })] }) }), jsxRuntime.jsx(TooltipContent, { className: "text-xs", children: jsxRuntime.jsx("p", { children: "Stream connection lost" }) })] }) })), newActivitiesCount > 0 && !watchError && (jsxRuntime.jsxs(Badge, { variant: "secondary", className: "text-xs", children: ["+", newActivitiesCount, " new"] }))] }), jsxRuntime.jsx(button.Button, { type: "tertiary", theme: "outline", size: "small", onClick: handleStreamingToggle, children: watchError ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", strokeWidth: "2", children: [jsxRuntime.jsx("path", { d: "M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" }), jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" })] }), "Retry"] })) : isStreaming ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("rect", { x: "6", y: "4", width: "4", height: "16" }), jsxRuntime.jsx("rect", { x: "14", y: "4", width: "4", height: "16" })] }), "Pause"] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("polygon", { points: "5,3 19,12 5,21", fill: "currentColor" }) }), "Resume"] })) })] })), showFilters && (jsxRuntime.jsx(ActivityFeedFilters, { client: client, filters: filters, timeRange: timeRange, onFiltersChange: handleFiltersChange, onTimeRangeChange: handleTimeRangeChange, disabled: isLoading, hiddenFilters: hiddenFilters })), jsxRuntime.jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-4", errorFormatter: errorFormatter }), jsxRuntime.jsx(ApiErrorAlert, { error: watchError, onRetry: startStreaming, className: "mb-4", errorFormatter: errorFormatter }), !policiesLoading && hasPolicies === false && (jsxRuntime.jsxs("div", { className: "flex flex-col items-center py-12 px-8 text-center bg-muted border border-dashed border-border rounded-xl mb-4", children: [jsxRuntime.jsx("div", { className: "flex justify-center mb-4 text-muted-foreground", children: jsxRuntime.jsxs("svg", { width: "56", height: "56", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("path", { d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" }), jsxRuntime.jsx("rect", { x: "9", y: "3", width: "6", height: "4", rx: "1" }), jsxRuntime.jsx("path", { d: "M9 12h6" }), jsxRuntime.jsx("path", { d: "M9 16h6" })] }) }), jsxRuntime.jsx("h3", { className: "m-0 mb-2 text-lg font-semibold text-foreground leading-snug", children: "Get started with activity logging" }), jsxRuntime.jsx("p", { className: "m-0 mb-6 text-sm leading-relaxed text-muted-foreground max-w-[400px]", children: "Activity policies define which resources to track and how to summarize changes. Create your first policy to start seeing activity logs here." }), onCreatePolicy && (jsxRuntime.jsx(button.Button, { onClick: onCreatePolicy, children: "Create Policy" }))] })), jsxRuntime.jsxs("div", { className: listClasses, ref: scrollContainerRef, style: effectiveMaxHeight ? { maxHeight: effectiveMaxHeight } : undefined, children: [!isLoading &&
                             activities.length === 0 &&
                             hasPolicies !== false &&
                             variant === "timeline" && (jsxRuntime.jsxs("div", { className: "py-12 text-center text-muted-foreground", children: [jsxRuntime.jsx("p", { className: "m-0", children: "No activities found" }), jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-2 m-0", children: "Try adjusting your filters or time range" })] })), variant === "timeline" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLoading && activities.length === 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 8 }).map((_, index) => (jsxRuntime.jsx(ActivityFeedItemSkeleton, { compact: compact }, index))) })), activities.map((activity, index) => (jsxRuntime.jsx(ActivityFeedItem, { activity: activity, onResourceClick: onResourceClick, resourceLinkResolver: resourceLinkResolver, tenantLinkResolver: tenantLinkResolver, tenantRenderer: tenantRenderer, onActorClick: handleActorClick, onActivityClick: onActivityClick, compact: compact, isNew: enableStreaming && index < newActivitiesCount, variant: variant, isLast: index === activities.length - 1 }, activity.metadata?.uid || activity.metadata?.name)))] })) : (jsxRuntime.jsxs(table.Table, { className: "w-full", children: [jsxRuntime.jsx(table.TableHeader, { children: jsxRuntime.jsxs(table.TableRow, { children: [jsxRuntime.jsx(table.TableHead, { className: "w-12", "aria-label": "Actor" }), jsxRuntime.jsx(table.TableHead, { children: "Summary" }), jsxRuntime.jsx(table.TableHead, { children: "Tenant" }), jsxRuntime.jsx(table.TableHead, { className: "w-[170px]", children: "When" }), jsxRuntime.jsx(table.TableHead, { className: "w-10", "aria-label": "Expand" })] }) }), jsxRuntime.jsxs(table.TableBody, { children: [isLoading && activities.length === 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 8 }).map((_, index) => (jsxRuntime.jsxs(table.TableRow, { children: [jsxRuntime.jsx(table.TableCell, { className: "py-2", children: jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-6 rounded-full" }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2", children: jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-3/4" }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2", children: jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-32 rounded-full" }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2", children: jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24" }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2", children: jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-6" }) })] }, `sk-${index}`))) })), !isLoading &&
@@ -11697,7 +11728,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) {
@@ -11710,7 +11741,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;
@@ -11737,12 +11768,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)
  */
@@ -11778,7 +11803,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);
@@ -11821,11 +11845,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 || ''}`;
@@ -11838,18 +11862,16 @@ function EventFeedItem({ event, onEventClick, onResourceClick, isSelected = fals
                                                     cursor: 'help',
                                                 }, children: summary }) }), jsxRuntime.jsx(TooltipContent, { className: "max-w-[480px] whitespace-normal break-words", children: summary })] })] }), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap shrink-0 max-w-[200px] truncate", title: objectLabel, children: regarding.name }), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground whitespace-nowrap shrink-0", children: jsxRuntime.jsx(Timestamp, { value: timestamp }) }), jsxRuntime.jsx(button.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 ? jsxRuntime.jsx(ChevronDown, { className: "h-4 w-4" }) : jsxRuntime.jsx(ChevronRight, { className: "h-4 w-4" }) })] }), isExpanded ? jsxRuntime.jsx(EventExpandedDetails, { event: event }) : null] }));
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(table.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(table.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: [jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle whitespace-nowrap", children: jsxRuntime.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' }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle whitespace-nowrap text-sm font-medium", children: reason || '' }), jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle", style: { width: '100%', maxWidth: 0, overflow: 'hidden' }, children: note ? (jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground leading-snug", style: {
+                }, "aria-expanded": isExpanded, children: [jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle whitespace-nowrap", children: jsxRuntime.jsx(badge.Badge, { type: isWarning ? 'danger' : 'info', theme: "light", className: "px-1.5 py-0.5 text-xs font-medium", children: type || 'Unknown' }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle whitespace-nowrap text-sm font-medium", children: reason || '' }), jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle", style: { width: '100%', maxWidth: 0, overflow: 'hidden' }, children: note ? (jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground leading-snug", style: {
                                             overflow: 'hidden',
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                         }, children: noteWithCount }) }), jsxRuntime.jsx(TooltipContent, { className: "max-w-[480px] whitespace-normal break-words", children: noteWithCount })] })) : null }), jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1 min-w-0", children: [jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.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' }) }), jsxRuntime.jsx(TooltipContent, { children: regarding.namespace
                                                 ? `${regarding.kind || 'Unknown'} · ${regarding.namespace}/${regarding.name}`
-                                                : `${regarding.kind || 'Unknown'} · ${regarding.name}` })] }), jsxRuntime.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 ? (jsxRuntime.jsx(Check, { className: "h-3 w-3 text-green-600 dark:text-green-400" })) : (jsxRuntime.jsx(Copy, { className: "h-3 w-3 text-gray-500 dark:text-gray-400" })) })] }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle whitespace-nowrap text-sm text-muted-foreground", children: jsxRuntime.jsx(Timestamp, { value: timestamp }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle w-10", children: jsxRuntime.jsx(button.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 ? (jsxRuntime.jsx(ChevronDown, { className: "h-4 w-4" })) : (jsxRuntime.jsx(ChevronRight, { className: "h-4 w-4" })) }) })] }), isExpanded ? (jsxRuntime.jsx(table.TableRow, { className: "bg-muted/30 hover:bg-muted/30", children: jsxRuntime.jsx(table.TableCell, { colSpan: EVENT_COLUMN_COUNT, className: "p-0", children: jsxRuntime.jsx(EventExpandedDetails, { event: event }) }) })) : null] }));
+                                                : `${regarding.kind || 'Unknown'} · ${regarding.name}` })] }), jsxRuntime.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 ? (jsxRuntime.jsx(Check, { className: "h-3 w-3 text-[var(--success-500)]" })) : (jsxRuntime.jsx(Copy, { className: "h-3 w-3 text-muted-foreground" })) })] }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle whitespace-nowrap text-sm text-muted-foreground", children: jsxRuntime.jsx(Timestamp, { value: timestamp }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2 align-middle w-10", children: jsxRuntime.jsx(button.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 ? (jsxRuntime.jsx(ChevronDown, { className: "h-4 w-4" })) : (jsxRuntime.jsx(ChevronRight, { className: "h-4 w-4" })) }) })] }), isExpanded ? (jsxRuntime.jsx(table.TableRow, { className: "bg-muted/30 hover:bg-muted/30", children: jsxRuntime.jsx(table.TableCell, { colSpan: EVENT_COLUMN_COUNT, className: "p-0", children: jsxRuntime.jsx(EventExpandedDetails, { event: event }) }) })) : null] }));
 }
 
 /**
@@ -11962,11 +11984,8 @@ const OPTIONS = [
 /**
  * EventTypeToggle provides a segmented control for filtering by event type
  */
-function EventTypeToggle({ value, onChange, className = '', disabled = false, }) {
-    return (jsxRuntime.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 (jsxRuntime.jsx(button.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 (jsxRuntime.jsx(SegmentedToggle, { options: OPTIONS, value: value, onChange: onChange, ariaLabel: "Filter by event type", className: className, disabled: disabled }));
 }
 
 /**
@@ -12210,7 +12229,7 @@ function EventsFeedFilters({ client, filters, timeRange, onFiltersChange, onTime
             search: value || undefined,
         });
     }, [filters, onFiltersChange]);
-    return (jsxRuntime.jsx("div", { className: `border-b border-border py-4 ${className}`, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [!hiddenFilters.includes('eventType') && (jsxRuntime.jsx(EventTypeToggle, { value: eventTypeValue, onChange: handleEventTypeChange, disabled: disabled })), jsxRuntime.jsxs("div", { className: "relative min-w-[200px] flex-1 max-w-xs", children: [jsxRuntime.jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), jsxRuntime.jsx(input.Input, { type: "text", placeholder: "Search events...", value: filters.search || '', onChange: handleSearchChange, disabled: disabled, className: "pl-8 h-7 text-xs pr-6" }), filters.search ? (jsxRuntime.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: jsxRuntime.jsx(X, { className: "h-3.5 w-3.5" }) })) : null] }), activeFilterIds.map((filterId) => {
+    return (jsxRuntime.jsx("div", { className: `border-b border-border py-4 ${className}`, children: jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [!hiddenFilters.includes('eventType') && (jsxRuntime.jsx(EventTypeToggle, { value: eventTypeValue, onChange: handleEventTypeChange, disabled: disabled })), jsxRuntime.jsxs("div", { className: "relative min-w-[200px] flex-1 max-w-xs", children: [jsxRuntime.jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), jsxRuntime.jsx(input.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 ? (jsxRuntime.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: jsxRuntime.jsx(X, { className: "h-3.5 w-3.5" }) })) : null] }), activeFilterIds.map((filterId) => {
                     const config = FILTER_CONFIGS[filterId];
                     return (jsxRuntime.jsx(FilterChip, { label: config.label, values: getFilterValues(filterId), options: config.inputMode === 'typeahead' ? getFilterOptions(filterId) : undefined, onValuesChange: (values) => handleFilterChange(filterId, values), onClear: () => handleFilterClear(filterId), onPopoverClose: () => handlePopoverClose(filterId), inputMode: config.inputMode, placeholder: config.placeholder, searchPlaceholder: config.searchPlaceholder, autoOpen: pendingFilter === filterId, disabled: disabled }, filterId));
                 }), jsxRuntime.jsx(AddFilterDropdown, { availableFilters: availableFilters, activeFilterIds: activeFilterIds, onAddFilter: handleAddFilter, hasActiveFilters: activeFilterIds.length > 0, disabled: disabled }), jsxRuntime.jsx("div", { className: "flex-1 min-w-[20px]" }), jsxRuntime.jsx(TimeRangeDropdown, { presets: TIME_PRESETS, selectedPreset: selectedPreset, onPresetSelect: handleTimePresetSelect, onCustomRangeApply: handleCustomRangeApply, customStart: customStart, customEnd: customEnd, disabled: disabled, displayLabel: getTimeRangeLabel() })] }) }));
@@ -12278,7 +12297,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 (jsxRuntime.jsxs(card.Card, { className: containerClasses, children: [enableStreaming && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center", children: [isStreaming ? (jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2", children: [jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 dark:bg-green-500 opacity-75" }), jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500 dark:bg-green-400" })] }), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Streaming events..." })] }) }), jsxRuntime.jsx(TooltipContent, { className: "text-xs", children: jsxRuntime.jsx("p", { children: "New events will appear automatically" }) })] }) })) : null, newEventsCount > 0 ? (jsxRuntime.jsxs(Badge, { variant: "secondary", className: "text-xs ml-2", children: ["+", newEventsCount, " new"] })) : null] }), jsxRuntime.jsx(button.Button, { type: "tertiary", theme: "outline", size: "small", onClick: handleStreamingToggle, children: isStreaming ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("rect", { x: "6", y: "4", width: "4", height: "16" }), jsxRuntime.jsx("rect", { x: "14", y: "4", width: "4", height: "16" })] }), "Pause"] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("polygon", { points: "5,3 19,12 5,21", fill: "currentColor" }) }), "Resume"] })) })] })), showFilters && (jsxRuntime.jsx(EventsFeedFilters, { client: client, filters: filters, timeRange: timeRange, onFiltersChange: handleFiltersChange, onTimeRangeChange: handleTimeRangeChange, disabled: isLoading, namespace: namespace, hiddenFilters: hiddenFilters })), jsxRuntime.jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-4", errorFormatter: errorFormatter }), jsxRuntime.jsxs("div", { className: listClasses, ref: scrollContainerRef, children: [jsxRuntime.jsx(TooltipProvider, { delayDuration: 200, children: variant === 'timeline' ? (jsxRuntime.jsxs("div", { children: [(isLoading || isRefreshing) && events.length === 0
+    return (jsxRuntime.jsxs(card.Card, { className: containerClasses, children: [enableStreaming && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center", children: [isStreaming ? (jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2", children: [jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--success-500)] opacity-75" }), jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-[var(--success-500)]" })] }), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Streaming events..." })] }) }), jsxRuntime.jsx(TooltipContent, { className: "text-xs", children: jsxRuntime.jsx("p", { children: "New events will appear automatically" }) })] }) })) : null, newEventsCount > 0 ? (jsxRuntime.jsxs(Badge, { variant: "secondary", className: "text-xs ml-2", children: ["+", newEventsCount, " new"] })) : null] }), jsxRuntime.jsx(button.Button, { type: "tertiary", theme: "outline", size: "small", onClick: handleStreamingToggle, children: isStreaming ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("rect", { x: "6", y: "4", width: "4", height: "16" }), jsxRuntime.jsx("rect", { x: "14", y: "4", width: "4", height: "16" })] }), "Pause"] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("svg", { className: "w-4 h-4 mr-1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("polygon", { points: "5,3 19,12 5,21", fill: "currentColor" }) }), "Resume"] })) })] })), showFilters && (jsxRuntime.jsx(EventsFeedFilters, { client: client, filters: filters, timeRange: timeRange, onFiltersChange: handleFiltersChange, onTimeRangeChange: handleTimeRangeChange, disabled: isLoading, namespace: namespace, hiddenFilters: hiddenFilters })), jsxRuntime.jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-4", errorFormatter: errorFormatter }), jsxRuntime.jsxs("div", { className: listClasses, ref: scrollContainerRef, children: [jsxRuntime.jsx(TooltipProvider, { delayDuration: 200, children: variant === 'timeline' ? (jsxRuntime.jsxs("div", { children: [(isLoading || isRefreshing) && events.length === 0
                                     ? Array.from({ length: 8 }).map((_, index) => (jsxRuntime.jsx("div", { className: cn(index < 7 && 'border-b border-border', compact ? 'py-2' : 'py-3'), children: jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(skeleton.Skeleton, { className: "w-8 h-8 rounded-md shrink-0" }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-3/4" })] }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-32 shrink-0" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24 shrink-0" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-5 shrink-0" })] }) }, `sk-${index}`)))
                                     : null, !isLoading && !isRefreshing && events.length === 0 ? (jsxRuntime.jsxs("div", { className: "py-12 text-center text-muted-foreground", children: [jsxRuntime.jsx("div", { children: "No events found" }), jsxRuntime.jsx("div", { className: "text-sm mt-2", children: "Try adjusting your filters or time range" })] })) : null, events.map((event, index) => (jsxRuntime.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)))] })) : (jsxRuntime.jsxs(table.Table, { className: "w-full", children: [jsxRuntime.jsx(table.TableHeader, { children: jsxRuntime.jsxs(table.TableRow, { children: [jsxRuntime.jsx(table.TableHead, { className: "w-[90px]", children: "Type" }), jsxRuntime.jsx(table.TableHead, { className: "w-[160px]", children: "Reason" }), jsxRuntime.jsx(table.TableHead, { children: "Note" }), jsxRuntime.jsx(table.TableHead, { className: "w-[220px]", children: "Object" }), jsxRuntime.jsx(table.TableHead, { className: "w-[170px]", children: "When" }), jsxRuntime.jsx(table.TableHead, { className: "w-10", "aria-label": "Expand" })] }) }), jsxRuntime.jsxs(table.TableBody, { children: [(isLoading || isRefreshing) && events.length === 0
                                             ? Array.from({ length: 8 }).map((_, index) => (jsxRuntime.jsxs(table.TableRow, { children: [jsxRuntime.jsx(table.TableCell, { className: "py-2", children: jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-14 rounded" }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2", children: jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24" }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2", children: jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-3/4" }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2", children: jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-32" }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2", children: jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24" }) }), jsxRuntime.jsx(table.TableCell, { className: "py-2", children: jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-6" }) })] }, `sk-${index}`)))
@@ -12458,14 +12477,14 @@ function PolicyList({ client, onViewPolicy, onEditPolicy, onCreatePolicy, groupB
                         policyList.policies.length === 0 && (jsxRuntime.jsxs("div", { className: "text-center py-8 px-6 text-muted-foreground", children: [jsxRuntime.jsx("div", { className: "text-4xl mb-3", children: "\uD83D\uDCCB" }), jsxRuntime.jsx("h3", { className: "m-0 mb-1.5 text-foreground", children: "No policies found" }), jsxRuntime.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 && (jsxRuntime.jsx(button.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 && (jsxRuntime.jsx("div", { className: "flex flex-col gap-2.5", children: policyList.groups.map((group) => (jsxRuntime.jsxs("div", { className: "border border-input rounded-lg overflow-hidden", children: [jsxRuntime.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: [jsxRuntime.jsx("span", { className: `text-xs text-muted-foreground transition-transform duration-200 ${expandedGroups.has(group.apiGroup) ? "rotate-90" : ""}`, children: "\u25B6" }), jsxRuntime.jsx("span", { className: "flex-1 font-mono", children: group.apiGroup }), jsxRuntime.jsx(Badge, { variant: "secondary", className: "rounded-full", children: group.policies.length })] }), expandedGroups.has(group.apiGroup) && (jsxRuntime.jsx("div", { className: "p-1.5", children: jsxRuntime.jsxs("table", { className: "w-full border-collapse text-sm", children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" })] }) }), jsxRuntime.jsx("tbody", { children: group.policies.map((policy) => {
                                                     const rules = countRules(policy);
                                                     const policyStatus = getPolicyStatus(policy);
-                                                    return (jsxRuntime.jsxs("tr", { className: `hover:bg-muted transition-colors ${handlePolicyClick ? "cursor-pointer" : ""}`, onClick: () => handlePolicyClick?.(policy.metadata?.name || ""), children: [jsxRuntime.jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [policyStatus.status === "ready" ? (jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-green-500", title: policyStatus.message })) : (jsxRuntime.jsx("div", { title: policyStatus.message, children: jsxRuntime.jsx(TriangleAlert, { className: `w-4 h-4 ${policyStatus.status === "error"
-                                                                                    ? "text-red-500 dark:text-red-400"
+                                                    return (jsxRuntime.jsxs("tr", { className: `hover:bg-muted transition-colors ${handlePolicyClick ? "cursor-pointer" : ""}`, onClick: () => handlePolicyClick?.(policy.metadata?.name || ""), children: [jsxRuntime.jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [policyStatus.status === "ready" ? (jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-[var(--success-500)]", title: policyStatus.message })) : (jsxRuntime.jsx("div", { title: policyStatus.message, children: jsxRuntime.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"}` }) })), jsxRuntime.jsx("span", { className: "text-xs font-medium", children: policy.spec.resource.kind })] }) }), jsxRuntime.jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0 text-center w-24", children: jsxRuntime.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"}` }) })), jsxRuntime.jsx("span", { className: "text-xs font-medium", children: policy.spec.resource.kind })] }) }), jsxRuntime.jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0 text-center w-24", children: jsxRuntime.jsx(Badge, { variant: rules.audit > 0 ? "success" : "secondary", className: rules.audit === 0
+                                                                        ? "bg-muted text-muted-foreground"
                                                                         : "", children: rules.audit }) }), jsxRuntime.jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0 text-center w-24", children: jsxRuntime.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))) }))] })] }));
 }
@@ -12913,7 +12932,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: [jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2 mb-0.5", children: jsxRuntime.jsx("span", { className: "font-medium text-xs text-foreground truncate", children: rule.name || `${ruleType === 'audit' ? 'Audit' : 'Event'} Rule #${index + 1}` }) }), rule.description && (jsxRuntime.jsx("div", { className: "text-[11px] text-muted-foreground mb-0.5 truncate", children: rule.description })), jsxRuntime.jsx("div", { className: "text-[11px] font-mono text-muted-foreground truncate", title: rule.match, children: truncatedMatch })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [jsxRuntime.jsx(button.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: jsxRuntime.jsx(ChevronUp, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsx(button.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: jsxRuntime.jsx(ChevronDown, { className: "h-3.5 w-3.5" }) })] }), jsxRuntime.jsx(button.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: jsxRuntime.jsx(SquarePen, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsx(button.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: jsxRuntime.jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })] }));
+      `, children: [jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2 mb-0.5", children: jsxRuntime.jsx("span", { className: "font-medium text-xs text-foreground truncate", children: rule.name || `${ruleType === 'audit' ? 'Audit' : 'Event'} Rule #${index + 1}` }) }), rule.description && (jsxRuntime.jsx("div", { className: "text-[11px] text-muted-foreground mb-0.5 truncate", children: rule.description })), jsxRuntime.jsx("div", { className: "text-[11px] font-mono text-muted-foreground truncate", title: rule.match, children: truncatedMatch })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [jsxRuntime.jsx(button.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: jsxRuntime.jsx(ChevronUp, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsx(button.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: jsxRuntime.jsx(ChevronDown, { className: "h-3.5 w-3.5" }) })] }), jsxRuntime.jsx(button.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: jsxRuntime.jsx(SquarePen, { className: "h-3.5 w-3.5" }) }), jsxRuntime.jsx(button.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: jsxRuntime.jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })] }));
 }
 
 /**
@@ -13034,7 +13053,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] = React.useState(null);
     const [loadError, setLoadError] = React.useState(null);
     const [isLoading, setIsLoading] = React.useState(true);
@@ -13193,7 +13212,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
@@ -13400,7 +13419,7 @@ function PolicyRuleEditorDialog({ open, onOpenChange, rule, ruleType, existingNa
     const [previewError, setPreviewError] = React.useState(null);
     // Sample data for autocomplete (fetched once when dialog opens)
     const [sampleData, setSampleData] = React.useState([]);
-    const [sampleDataLoading, setSampleDataLoading] = React.useState(false);
+    const [, setSampleDataLoading] = React.useState(false);
     // Extract field paths from sample data OR preview data for autocomplete
     const availableFields = React.useMemo(() => {
         // First try to use preview data if available
@@ -13849,10 +13868,10 @@ function PolicyEditor({ client, policyName, onSaveSuccess, onCancel, onResourceC
     };
     const policyStatus = getPolicyStatus();
     return (jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: jsxRuntime.jsxs(card.Card, { className: `rounded-xl ${className}`, children: [jsxRuntime.jsxs(card.CardHeader, { className: "flex flex-row justify-between items-center p-4 border-b border-border space-y-0", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: editor.isNew ? (jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [jsxRuntime.jsx(label.Label, { htmlFor: "policy-name", className: "text-xs text-muted-foreground", children: "Policy Name" }), jsxRuntime.jsx(input.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" })] })) : (jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [policyStatus && (jsxRuntime.jsxs(Tooltip, { delayDuration: 300, children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.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}` }) }), jsxRuntime.jsx(TooltipContent, { children: jsxRuntime.jsx("p", { className: "text-xs", children: policyStatus.message }) })] })), jsxRuntime.jsx("h2", { className: "m-0 text-xl font-semibold text-foreground leading-tight", children: editor.spec.resource.kind || 'Untitled Policy' })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [editor.spec.resource.apiGroup && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { children: ["API Group: ", editor.spec.resource.apiGroup] }), jsxRuntime.jsx("span", { className: "text-muted-foreground/50", children: "\u2022" })] })), jsxRuntime.jsxs("span", { children: ["Resource: ", editor.name] }), jsxRuntime.jsxs(Tooltip, { delayDuration: 500, children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.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 ? (jsxRuntime.jsx(Check, { className: "h-3 w-3 text-green-600 dark:text-green-400" })) : (jsxRuntime.jsx(Copy, { className: "h-3 w-3 text-gray-500 dark:text-gray-400" })) }) }), jsxRuntime.jsx(TooltipContent, { children: jsxRuntime.jsx("p", { className: "text-xs", children: "Click to copy" }) })] })] })] })) }), jsxRuntime.jsxs("div", { className: "flex gap-2", children: [onCancel && (jsxRuntime.jsx(button.Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", onClick: onCancel, disabled: editor.isSaving, className: "h-7 text-xs", children: "Cancel" })), jsxRuntime.jsx(button.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" }), jsxRuntime.jsx(button.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "w-3.5 h-3.5 border-2 border-border border-t-[#BF9595] rounded-full animate-spin" }), "Saving..."] })) : ('Save Policy') })] })] }), jsxRuntime.jsx(ApiErrorAlert, { error: editor.error, className: "mx-4 mt-3", errorFormatter: errorFormatter }), editor.isLoading && (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 py-8 text-muted-foreground", children: [jsxRuntime.jsx("span", { className: "w-5 h-5 border-[3px] border-border border-t-[#BF9595] rounded-full animate-spin" }), "Loading policy..."] })), !editor.isLoading && (jsxRuntime.jsx(card.CardContent, { className: "p-4", children: jsxRuntime.jsxs(tabs.Tabs, { defaultValue: "activity", value: activeTab, onValueChange: setActiveTab, className: "w-full", children: [jsxRuntime.jsxs(tabs.TabsList, { className: "grid w-full grid-cols-2 mb-4", children: [jsxRuntime.jsx(tabs.TabsTrigger, { value: "activity", children: "Activity" }), jsxRuntime.jsx(tabs.TabsTrigger, { value: "editor", children: "Editor" })] }), jsxRuntime.jsx(tabs.TabsContent, { value: "activity", className: "mt-0", children: jsxRuntime.jsx(PolicyActivityView, { client: client, policyResource: editor.spec.resource, policyName: editor.name, onResourceClick: onResourceClick, errorFormatter: errorFormatter }) }), jsxRuntime.jsx(tabs.TabsContent, { value: "editor", className: "mt-0", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntime.jsx(PolicyResourceForm, { resource: editor.spec.resource, onChange: editor.setResource, client: client, isEditMode: !editor.isNew }), jsxRuntime.jsx(PolicyRuleList, { auditRules: editor.spec.auditRules || [], eventRules: editor.spec.eventRules || [], policyResource: editor.spec.resource, apiClient: client, onAuditRulesChange: editor.setAuditRules, onEventRulesChange: editor.setEventRules }), !editor.isNew && (jsxRuntime.jsx("div", { className: "mt-6 pt-4 border-t border-border", children: jsxRuntime.jsx("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4", children: jsxRuntime.jsx("div", { className: "flex items-start gap-3", children: jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsxs("h3", { className: "text-base font-semibold text-foreground mb-1.5 flex items-center gap-2", children: [jsxRuntime.jsx(TriangleAlert, { className: "h-5 w-5 text-destructive" }), "Danger Zone"] }), jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: ["Deleting this policy will stop translating audit logs and events for", ' ', jsxRuntime.jsx("strong", { className: "text-foreground", children: editor.spec.resource.kind }), ' ', "resources. Existing activities will be preserved, but no new activities will be generated."] }), jsxRuntime.jsxs(button.Button, { type: "danger", theme: "solid", size: "small", onClick: () => setShowDeleteDialog(true), className: "h-8 text-xs", children: [jsxRuntime.jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })] }) }) }) }))] }) })] }) })), jsxRuntime.jsx(Dialog, { open: showDeleteDialog, onOpenChange: setShowDeleteDialog, children: jsxRuntime.jsxs(DialogContent, { className: "max-w-[500px]", children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, { children: "Delete Policy" }), jsxRuntime.jsxs(DialogDescription, { children: ["Are you sure you want to delete", ' ', jsxRuntime.jsx("strong", { className: "text-foreground", children: editor.name }), "?"] })] }), jsxRuntime.jsxs(alert.Alert, { variant: "destructive", className: "mt-2", children: [jsxRuntime.jsx(CircleAlert, { className: "h-4 w-4" }), jsxRuntime.jsxs(alert.AlertDescription, { children: [jsxRuntime.jsx("strong", { children: "This action cannot be undone." }), jsxRuntime.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."] })] }), jsxRuntime.jsxs(DialogFooter, { children: [jsxRuntime.jsx(button.Button, { type: "tertiary", theme: "outline", size: "small", onClick: () => setShowDeleteDialog(false), disabled: isDeleting, className: "h-8 text-xs", children: "Cancel" }), jsxRuntime.jsx(button.Button, { type: "danger", theme: "solid", size: "small", onClick: handleDelete, disabled: isDeleting, className: "h-8 text-xs", children: isDeleting ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" }), "Deleting..."] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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}` }) }), jsxRuntime.jsx(TooltipContent, { children: jsxRuntime.jsx("p", { className: "text-xs", children: policyStatus.message }) })] })), jsxRuntime.jsx("h2", { className: "m-0 text-xl font-semibold text-foreground leading-tight", children: editor.spec.resource.kind || 'Untitled Policy' })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [editor.spec.resource.apiGroup && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { children: ["API Group: ", editor.spec.resource.apiGroup] }), jsxRuntime.jsx("span", { className: "text-muted-foreground/50", children: "\u2022" })] })), jsxRuntime.jsxs("span", { children: ["Resource: ", editor.name] }), jsxRuntime.jsxs(Tooltip, { delayDuration: 500, children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.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 ? (jsxRuntime.jsx(Check, { className: "h-3 w-3 text-[var(--success-500)]" })) : (jsxRuntime.jsx(Copy, { className: "h-3 w-3 text-muted-foreground" })) }) }), jsxRuntime.jsx(TooltipContent, { children: jsxRuntime.jsx("p", { className: "text-xs", children: "Click to copy" }) })] })] })] })) }), jsxRuntime.jsxs("div", { className: "flex gap-2", children: [onCancel && (jsxRuntime.jsx(button.Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", onClick: onCancel, disabled: editor.isSaving, className: "h-7 text-xs", children: "Cancel" })), jsxRuntime.jsx(button.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" }), jsxRuntime.jsx(button.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "w-3.5 h-3.5 border-2 border-border border-t-[#BF9595] rounded-full animate-spin" }), "Saving..."] })) : ('Save Policy') })] })] }), jsxRuntime.jsx(ApiErrorAlert, { error: editor.error, className: "mx-4 mt-3", errorFormatter: errorFormatter }), editor.isLoading && (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 py-8 text-muted-foreground", children: [jsxRuntime.jsx("span", { className: "w-5 h-5 border-[3px] border-border border-t-[#BF9595] rounded-full animate-spin" }), "Loading policy..."] })), !editor.isLoading && (jsxRuntime.jsx(card.CardContent, { className: "p-4", children: jsxRuntime.jsxs(tabs.Tabs, { defaultValue: "activity", value: activeTab, onValueChange: setActiveTab, className: "w-full", children: [jsxRuntime.jsxs(tabs.TabsList, { className: "grid w-full grid-cols-2 mb-4", children: [jsxRuntime.jsx(tabs.TabsTrigger, { value: "activity", children: "Activity" }), jsxRuntime.jsx(tabs.TabsTrigger, { value: "editor", children: "Editor" })] }), jsxRuntime.jsx(tabs.TabsContent, { value: "activity", className: "mt-0", children: jsxRuntime.jsx(PolicyActivityView, { client: client, policyResource: editor.spec.resource, policyName: editor.name, onResourceClick: onResourceClick, errorFormatter: errorFormatter }) }), jsxRuntime.jsx(tabs.TabsContent, { value: "editor", className: "mt-0", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntime.jsx(PolicyResourceForm, { resource: editor.spec.resource, onChange: editor.setResource, client: client, isEditMode: !editor.isNew }), jsxRuntime.jsx(PolicyRuleList, { auditRules: editor.spec.auditRules || [], eventRules: editor.spec.eventRules || [], policyResource: editor.spec.resource, apiClient: client, onAuditRulesChange: editor.setAuditRules, onEventRulesChange: editor.setEventRules }), !editor.isNew && (jsxRuntime.jsx("div", { className: "mt-6 pt-4 border-t border-border", children: jsxRuntime.jsx("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4", children: jsxRuntime.jsx("div", { className: "flex items-start gap-3", children: jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsxs("h3", { className: "text-base font-semibold text-foreground mb-1.5 flex items-center gap-2", children: [jsxRuntime.jsx(TriangleAlert, { className: "h-5 w-5 text-destructive" }), "Danger Zone"] }), jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: ["Deleting this policy will stop translating audit logs and events for", ' ', jsxRuntime.jsx("strong", { className: "text-foreground", children: editor.spec.resource.kind }), ' ', "resources. Existing activities will be preserved, but no new activities will be generated."] }), jsxRuntime.jsxs(button.Button, { type: "danger", theme: "solid", size: "small", onClick: () => setShowDeleteDialog(true), className: "h-8 text-xs", children: [jsxRuntime.jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })] }) }) }) }))] }) })] }) })), jsxRuntime.jsx(Dialog, { open: showDeleteDialog, onOpenChange: setShowDeleteDialog, children: jsxRuntime.jsxs(DialogContent, { className: "max-w-[500px]", children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, { children: "Delete Policy" }), jsxRuntime.jsxs(DialogDescription, { children: ["Are you sure you want to delete", ' ', jsxRuntime.jsx("strong", { className: "text-foreground", children: editor.name }), "?"] })] }), jsxRuntime.jsxs(alert.Alert, { variant: "destructive", className: "mt-2", children: [jsxRuntime.jsx(CircleAlert, { className: "h-4 w-4" }), jsxRuntime.jsxs(alert.AlertDescription, { children: [jsxRuntime.jsx("strong", { children: "This action cannot be undone." }), jsxRuntime.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."] })] }), jsxRuntime.jsxs(DialogFooter, { children: [jsxRuntime.jsx(button.Button, { type: "tertiary", theme: "outline", size: "small", onClick: () => setShowDeleteDialog(false), disabled: isDeleting, className: "h-8 text-xs", children: "Cancel" }), jsxRuntime.jsx(button.Button, { type: "danger", theme: "solid", size: "small", onClick: handleDelete, disabled: isDeleting, className: "h-8 text-xs", children: isDeleting ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "w-3.5 h-3.5 border-2 border-current border-t-transparent rounded-full animate-spin mr-2" }), "Deleting..."] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })) })] })] }) })] }) }));
 }
 
 /**
@@ -13936,12 +13955,12 @@ function PolicyDetailView({ client, policyName, onEdit, onResourceClick, classNa
     const policyStatus = getPolicyStatus();
     const isUnhealthy = policyStatus && policyStatus.status !== 'ready';
     return (jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: jsxRuntime.jsxs(card.Card, { className: `rounded-xl ${className}`, children: [jsxRuntime.jsxs(card.CardHeader, { className: "flex flex-row justify-between items-center p-6 border-b border-border space-y-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [isLoading && (jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(skeleton.Skeleton, { className: "w-2 h-2 rounded-full" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-32" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-24" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-32" })] })] })), !isLoading && policy && (jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("h2", { className: "m-0 text-xl font-semibold text-foreground leading-tight flex items-center gap-2", children: [jsxRuntime.jsxs(Tooltip, { delayDuration: 500, children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.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'}` }) }), jsxRuntime.jsx(TooltipContent, { children: jsxRuntime.jsx("p", { className: "text-xs", children: policyStatus?.message || 'Policy is active' }) })] }), policy.spec.resource.kind || 'Untitled Policy'] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [policy.spec.resource.apiGroup && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { children: ["API Group: ", policy.spec.resource.apiGroup] }), jsxRuntime.jsx("span", { className: "text-muted-foreground/50", children: "\u2022" })] })), jsxRuntime.jsxs("span", { children: ["Resource: ", policyName] }), jsxRuntime.jsxs(Tooltip, { delayDuration: 500, children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.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 ? (jsxRuntime.jsx(Check, { className: "h-3 w-3 text-green-600 dark:text-green-400" })) : (jsxRuntime.jsx(Copy, { className: "h-3 w-3 text-gray-500 dark:text-gray-400" })) }) }), jsxRuntime.jsx(TooltipContent, { children: jsxRuntime.jsx("p", { className: "text-xs", children: "Click to copy" }) })] })] })] }))] }), jsxRuntime.jsx("div", { className: "flex gap-3", children: onEdit && (jsxRuntime.jsxs(button.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: [jsxRuntime.jsx(SquarePen, { className: "h-3.5 w-3.5 mr-1.5" }), "Edit Policy"] })) })] }), jsxRuntime.jsx(ApiErrorAlert, { error: error, className: "mx-6 mt-4", errorFormatter: errorFormatter }), isUnhealthy && policyStatus && (jsxRuntime.jsxs(alert.Alert, { variant: policyStatus.status === 'error' ? 'destructive' : 'warning', className: "mx-6 mt-4", children: [policyStatus.status === 'error' ? (jsxRuntime.jsx(CircleAlert, { className: "h-4 w-4" })) : (jsxRuntime.jsx(TriangleAlert, { className: "h-4 w-4" })), jsxRuntime.jsxs(alert.AlertDescription, { children: [jsxRuntime.jsx("strong", { children: policyStatus.status === 'error' ? 'Policy Error: ' : 'Policy Pending: ' }), policyStatus.message] })] })), isLoading && (jsxRuntime.jsx(card.CardContent, { className: "p-6", children: jsxRuntime.jsx(PolicyActivityViewSkeleton, {}) })), !isLoading && policy && (jsxRuntime.jsx(card.CardContent, { className: "p-6", children: jsxRuntime.jsx(PolicyActivityView, { client: client, policyResource: policy.spec.resource, policyName: policyName, onResourceClick: onResourceClick, errorFormatter: errorFormatter }) }))] }) }));
+                                                                            ? 'bg-[var(--badge-warning)]'
+                                                                            : 'bg-[var(--success-500)]'}` }) }), jsxRuntime.jsx(TooltipContent, { children: jsxRuntime.jsx("p", { className: "text-xs", children: policyStatus?.message || 'Policy is active' }) })] }), policy.spec.resource.kind || 'Untitled Policy'] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [policy.spec.resource.apiGroup && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { children: ["API Group: ", policy.spec.resource.apiGroup] }), jsxRuntime.jsx("span", { className: "text-muted-foreground/50", children: "\u2022" })] })), jsxRuntime.jsxs("span", { children: ["Resource: ", policyName] }), jsxRuntime.jsxs(Tooltip, { delayDuration: 500, children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.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 ? (jsxRuntime.jsx(Check, { className: "h-3 w-3 text-[var(--success-500)]" })) : (jsxRuntime.jsx(Copy, { className: "h-3 w-3 text-muted-foreground" })) }) }), jsxRuntime.jsx(TooltipContent, { children: jsxRuntime.jsx("p", { className: "text-xs", children: "Click to copy" }) })] })] })] }))] }), jsxRuntime.jsx("div", { className: "flex gap-3", children: onEdit && (jsxRuntime.jsxs(button.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: [jsxRuntime.jsx(SquarePen, { className: "h-3.5 w-3.5 mr-1.5" }), "Edit Policy"] })) })] }), jsxRuntime.jsx(ApiErrorAlert, { error: error, className: "mx-6 mt-4", errorFormatter: errorFormatter }), isUnhealthy && policyStatus && (jsxRuntime.jsxs(alert.Alert, { variant: policyStatus.status === 'error' ? 'destructive' : 'warning', className: "mx-6 mt-4", children: [policyStatus.status === 'error' ? (jsxRuntime.jsx(CircleAlert, { className: "h-4 w-4" })) : (jsxRuntime.jsx(TriangleAlert, { className: "h-4 w-4" })), jsxRuntime.jsxs(alert.AlertDescription, { children: [jsxRuntime.jsx("strong", { children: policyStatus.status === 'error' ? 'Policy Error: ' : 'Policy Pending: ' }), policyStatus.message] })] })), isLoading && (jsxRuntime.jsx(card.CardContent, { className: "p-6", children: jsxRuntime.jsx(PolicyActivityViewSkeleton, {}) })), !isLoading && policy && (jsxRuntime.jsx(card.CardContent, { className: "p-6", children: jsxRuntime.jsx(PolicyActivityView, { client: client, policyResource: policy.spec.resource, policyName: policyName, onResourceClick: onResourceClick, errorFormatter: errorFormatter }) }))] }) }));
 }
 
 /**
@@ -14041,7 +14060,7 @@ function PolicyEditView({ client, policyName, onSaveSuccess, onCancel, className
     };
     const policyStatus = getPolicyStatus();
     const isUnhealthy = policyStatus && policyStatus.status !== 'ready';
-    return (jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: jsxRuntime.jsxs(card.Card, { className: `rounded-xl ${className}`, children: [jsxRuntime.jsxs(card.CardHeader, { className: "flex flex-row justify-between items-center p-4 border-b border-border space-y-0", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: editor.isNew ? (jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [jsxRuntime.jsx(label.Label, { htmlFor: "policy-name", className: "text-xs text-muted-foreground", children: "Policy Name" }), jsxRuntime.jsx(input.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" })] })) : (jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [jsxRuntime.jsx("h2", { className: "m-0 text-xl font-semibold text-foreground leading-tight", children: editor.spec.resource.kind || 'Untitled Policy' }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [editor.spec.resource.apiGroup && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { children: ["API Group: ", editor.spec.resource.apiGroup] }), jsxRuntime.jsx("span", { className: "text-muted-foreground/50", children: "\u2022" })] })), jsxRuntime.jsxs("span", { children: ["Resource: ", editor.name] }), jsxRuntime.jsxs(Tooltip, { delayDuration: 500, children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.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 ? (jsxRuntime.jsx(Check, { className: "h-3 w-3 text-green-600 dark:text-green-400" })) : (jsxRuntime.jsx(Copy, { className: "h-3 w-3 text-gray-500 dark:text-gray-400" })) }) }), jsxRuntime.jsx(TooltipContent, { children: jsxRuntime.jsx("p", { className: "text-xs", children: "Click to copy" }) })] })] })] })) }), jsxRuntime.jsxs("div", { className: "flex gap-2", children: [onCancel && (jsxRuntime.jsx(button.Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", onClick: onCancel, disabled: editor.isSaving, className: "h-7 text-xs", children: "Cancel" })), jsxRuntime.jsx(button.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" }), jsxRuntime.jsx(button.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "w-3.5 h-3.5 border-2 border-border border-t-[#BF9595] rounded-full animate-spin" }), "Saving..."] })) : ('Save Policy') })] })] }), jsxRuntime.jsx(ApiErrorAlert, { error: editor.error, className: "mx-4 mt-3", errorFormatter: errorFormatter }), isUnhealthy && policyStatus && (jsxRuntime.jsxs(alert.Alert, { variant: policyStatus.status === 'error' ? 'destructive' : 'warning', className: "mx-4 mt-3", children: [policyStatus.status === 'error' ? (jsxRuntime.jsx(CircleAlert, { className: "h-4 w-4" })) : (jsxRuntime.jsx(TriangleAlert, { className: "h-4 w-4" })), jsxRuntime.jsxs(alert.AlertDescription, { children: [jsxRuntime.jsx("strong", { children: policyStatus.status === 'error' ? 'Policy Error: ' : 'Policy Pending: ' }), policyStatus.message] })] })), editor.isLoading && (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 py-8 text-muted-foreground", children: [jsxRuntime.jsx("span", { className: "w-5 h-5 border-[3px] border-border border-t-[#BF9595] rounded-full animate-spin" }), "Loading policy..."] })), !editor.isLoading && (jsxRuntime.jsx(card.CardContent, { className: "p-4", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntime.jsx(PolicyResourceForm, { resource: editor.spec.resource, onChange: editor.setResource, client: client, isEditMode: !editor.isNew }), jsxRuntime.jsx(PolicyRuleList, { auditRules: editor.spec.auditRules || [], eventRules: editor.spec.eventRules || [], policyResource: editor.spec.resource, apiClient: client, onAuditRulesChange: editor.setAuditRules, onEventRulesChange: editor.setEventRules }), !editor.isNew && (jsxRuntime.jsx("div", { className: "mt-6 pt-4 border-t border-border", children: jsxRuntime.jsx("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4", children: jsxRuntime.jsx("div", { className: "flex items-start gap-3", children: jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsxs("h3", { className: "text-base font-semibold text-foreground mb-1.5 flex items-center gap-2", children: [jsxRuntime.jsx(TriangleAlert, { className: "h-5 w-5 text-destructive" }), "Danger Zone"] }), jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: ["Deleting this policy will stop translating audit logs and events for", ' ', jsxRuntime.jsx("strong", { className: "text-foreground", children: editor.spec.resource.kind }), ' ', "resources. Existing activities will be preserved, but no new activities will be generated."] }), jsxRuntime.jsxs(button.Button, { type: "danger", theme: "solid", size: "small", onClick: () => setShowDeleteDialog(true), className: "h-8 text-xs", children: [jsxRuntime.jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })] }) }) }) }))] }) })), jsxRuntime.jsx(Dialog, { open: showDeleteDialog, onOpenChange: setShowDeleteDialog, children: jsxRuntime.jsxs(DialogContent, { className: "max-w-[500px]", children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, { children: "Delete Policy" }), jsxRuntime.jsxs(DialogDescription, { children: ["Are you sure you want to delete", ' ', jsxRuntime.jsx("strong", { className: "text-foreground", children: editor.name }), "?"] })] }), jsxRuntime.jsxs(alert.Alert, { variant: "destructive", className: "mt-2", children: [jsxRuntime.jsx(CircleAlert, { className: "h-4 w-4" }), jsxRuntime.jsxs(alert.AlertDescription, { children: [jsxRuntime.jsx("strong", { children: "This action cannot be undone." }), jsxRuntime.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."] })] }), jsxRuntime.jsxs(DialogFooter, { children: [jsxRuntime.jsx(button.Button, { type: "tertiary", theme: "outline", size: "small", onClick: () => setShowDeleteDialog(false), disabled: isDeleting, className: "h-8 text-xs", children: "Cancel" }), jsxRuntime.jsx(button.Button, { type: "danger", theme: "solid", size: "small", onClick: handleDelete, disabled: isDeleting, className: "h-8 text-xs", children: isDeleting ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" }), "Deleting..."] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })) })] })] }) })] }) }));
+    return (jsxRuntime.jsx(TooltipProvider, { delayDuration: 0, children: jsxRuntime.jsxs(card.Card, { className: `rounded-xl ${className}`, children: [jsxRuntime.jsxs(card.CardHeader, { className: "flex flex-row justify-between items-center p-4 border-b border-border space-y-0", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: editor.isNew ? (jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [jsxRuntime.jsx(label.Label, { htmlFor: "policy-name", className: "text-xs text-muted-foreground", children: "Policy Name" }), jsxRuntime.jsx(input.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" })] })) : (jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [jsxRuntime.jsx("h2", { className: "m-0 text-xl font-semibold text-foreground leading-tight", children: editor.spec.resource.kind || 'Untitled Policy' }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [editor.spec.resource.apiGroup && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { children: ["API Group: ", editor.spec.resource.apiGroup] }), jsxRuntime.jsx("span", { className: "text-muted-foreground/50", children: "\u2022" })] })), jsxRuntime.jsxs("span", { children: ["Resource: ", editor.name] }), jsxRuntime.jsxs(Tooltip, { delayDuration: 500, children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.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 ? (jsxRuntime.jsx(Check, { className: "h-3 w-3 text-[var(--success-500)]" })) : (jsxRuntime.jsx(Copy, { className: "h-3 w-3 text-muted-foreground" })) }) }), jsxRuntime.jsx(TooltipContent, { children: jsxRuntime.jsx("p", { className: "text-xs", children: "Click to copy" }) })] })] })] })) }), jsxRuntime.jsxs("div", { className: "flex gap-2", children: [onCancel && (jsxRuntime.jsx(button.Button, { htmlType: "button", type: "tertiary", theme: "outline", size: "small", onClick: onCancel, disabled: editor.isSaving, className: "h-7 text-xs", children: "Cancel" })), jsxRuntime.jsx(button.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" }), jsxRuntime.jsx(button.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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "w-3.5 h-3.5 border-2 border-border border-t-[#BF9595] rounded-full animate-spin" }), "Saving..."] })) : ('Save Policy') })] })] }), jsxRuntime.jsx(ApiErrorAlert, { error: editor.error, className: "mx-4 mt-3", errorFormatter: errorFormatter }), isUnhealthy && policyStatus && (jsxRuntime.jsxs(alert.Alert, { variant: policyStatus.status === 'error' ? 'destructive' : 'warning', className: "mx-4 mt-3", children: [policyStatus.status === 'error' ? (jsxRuntime.jsx(CircleAlert, { className: "h-4 w-4" })) : (jsxRuntime.jsx(TriangleAlert, { className: "h-4 w-4" })), jsxRuntime.jsxs(alert.AlertDescription, { children: [jsxRuntime.jsx("strong", { children: policyStatus.status === 'error' ? 'Policy Error: ' : 'Policy Pending: ' }), policyStatus.message] })] })), editor.isLoading && (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 py-8 text-muted-foreground", children: [jsxRuntime.jsx("span", { className: "w-5 h-5 border-[3px] border-border border-t-[#BF9595] rounded-full animate-spin" }), "Loading policy..."] })), !editor.isLoading && (jsxRuntime.jsx(card.CardContent, { className: "p-4", children: jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [jsxRuntime.jsx(PolicyResourceForm, { resource: editor.spec.resource, onChange: editor.setResource, client: client, isEditMode: !editor.isNew }), jsxRuntime.jsx(PolicyRuleList, { auditRules: editor.spec.auditRules || [], eventRules: editor.spec.eventRules || [], policyResource: editor.spec.resource, apiClient: client, onAuditRulesChange: editor.setAuditRules, onEventRulesChange: editor.setEventRules }), !editor.isNew && (jsxRuntime.jsx("div", { className: "mt-6 pt-4 border-t border-border", children: jsxRuntime.jsx("div", { className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4", children: jsxRuntime.jsx("div", { className: "flex items-start gap-3", children: jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsxs("h3", { className: "text-base font-semibold text-foreground mb-1.5 flex items-center gap-2", children: [jsxRuntime.jsx(TriangleAlert, { className: "h-5 w-5 text-destructive" }), "Danger Zone"] }), jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: ["Deleting this policy will stop translating audit logs and events for", ' ', jsxRuntime.jsx("strong", { className: "text-foreground", children: editor.spec.resource.kind }), ' ', "resources. Existing activities will be preserved, but no new activities will be generated."] }), jsxRuntime.jsxs(button.Button, { type: "danger", theme: "solid", size: "small", onClick: () => setShowDeleteDialog(true), className: "h-8 text-xs", children: [jsxRuntime.jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })] }) }) }) }))] }) })), jsxRuntime.jsx(Dialog, { open: showDeleteDialog, onOpenChange: setShowDeleteDialog, children: jsxRuntime.jsxs(DialogContent, { className: "max-w-[500px]", children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, { children: "Delete Policy" }), jsxRuntime.jsxs(DialogDescription, { children: ["Are you sure you want to delete", ' ', jsxRuntime.jsx("strong", { className: "text-foreground", children: editor.name }), "?"] })] }), jsxRuntime.jsxs(alert.Alert, { variant: "destructive", className: "mt-2", children: [jsxRuntime.jsx(CircleAlert, { className: "h-4 w-4" }), jsxRuntime.jsxs(alert.AlertDescription, { children: [jsxRuntime.jsx("strong", { children: "This action cannot be undone." }), jsxRuntime.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."] })] }), jsxRuntime.jsxs(DialogFooter, { children: [jsxRuntime.jsx(button.Button, { type: "tertiary", theme: "outline", size: "small", onClick: () => setShowDeleteDialog(false), disabled: isDeleting, className: "h-8 text-xs", children: "Cancel" }), jsxRuntime.jsx(button.Button, { type: "danger", theme: "solid", size: "small", onClick: handleDelete, disabled: isDeleting, className: "h-8 text-xs", children: isDeleting ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "w-3.5 h-3.5 border-2 border-current border-t-transparent rounded-full animate-spin mr-2" }), "Deleting..."] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Trash2, { className: "h-3.5 w-3.5 mr-1.5" }), "Delete Policy"] })) })] })] }) })] }) }));
 }
 
 /**
@@ -14122,8 +14141,8 @@ function PolicyRuleEditor({ rule, index, ruleType, isHighlighted = false, onChan
         onChange({ ...rule, summary: example });
     };
     return (jsxRuntime.jsxs(card.Card, { className: `mb-3 transition-all duration-200 ${isHighlighted
-            ? 'border-emerald-600 bg-emerald-50'
-            : 'bg-muted'} ${className}`, children: [jsxRuntime.jsxs(card.CardHeader, { className: "flex flex-row justify-between items-center p-3 pb-0", children: [jsxRuntime.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] }), jsxRuntime.jsx(button.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" })] }), jsxRuntime.jsxs(card.CardContent, { className: "p-3", children: [jsxRuntime.jsxs("div", { className: "mb-3", children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-1", children: [jsxRuntime.jsx(label.Label, { htmlFor: `rule-${index}-match`, children: "Match Expression (CEL)" }), jsxRuntime.jsx(button.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' })] }), jsxRuntime.jsx(textarea.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 && (jsxRuntime.jsxs("div", { className: "mt-2 p-3 bg-background border border-border rounded-md text-xs", children: [jsxRuntime.jsxs("div", { className: "mb-3 last:mb-0", children: [jsxRuntime.jsx("strong", { className: "block mb-1.5 text-foreground", children: "Available Variables:" }), jsxRuntime.jsx("ul", { className: "m-0 pl-5 list-disc", children: celHelp.variables.map((v) => (jsxRuntime.jsxs("li", { className: "mb-0.5", children: [jsxRuntime.jsx("code", { className: "bg-muted px-1.5 py-0.5 rounded text-xs", children: v.name }), " - ", v.description] }, v.name))) })] }), jsxRuntime.jsxs("div", { className: "mb-3 last:mb-0", children: [jsxRuntime.jsx("strong", { className: "block mb-1.5 text-foreground", children: "Examples:" }), jsxRuntime.jsx("ul", { className: "m-0 p-0 list-none", children: celHelp.examples.map((ex, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-2 mb-1 px-2 py-1 bg-muted rounded", children: [jsxRuntime.jsx("code", { className: "flex-1 text-xs break-all", children: ex }), jsxRuntime.jsx(button.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))) })] })] }))] }), jsxRuntime.jsxs("div", { className: "mb-3 last:mb-0", children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-1", children: [jsxRuntime.jsx(label.Label, { htmlFor: `rule-${index}-summary`, children: "Summary Template (CEL)" }), jsxRuntime.jsx(button.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' })] }), jsxRuntime.jsx(textarea.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 && (jsxRuntime.jsxs("div", { className: "mt-2 p-3 bg-background border border-border rounded-md text-xs", children: [jsxRuntime.jsxs("div", { className: "mb-3 last:mb-0", children: [jsxRuntime.jsx("strong", { className: "block mb-1.5 text-foreground", children: "Available Variables:" }), jsxRuntime.jsx("ul", { className: "m-0 pl-5 list-disc", children: SUMMARY_HELP.variables.map((v) => (jsxRuntime.jsxs("li", { className: "mb-0.5", children: [jsxRuntime.jsx("code", { className: "bg-muted px-1.5 py-0.5 rounded text-xs", children: '{{ ' + v.name + ' }}' }), " - ", v.description] }, v.name))) })] }), jsxRuntime.jsxs("div", { className: "mb-3 last:mb-0", children: [jsxRuntime.jsx("strong", { className: "block mb-1.5 text-foreground", children: "Examples:" }), jsxRuntime.jsx("ul", { className: "m-0 p-0 list-none", children: SUMMARY_HELP.examples.map((ex, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-2 mb-1 px-2 py-1 bg-muted rounded", children: [jsxRuntime.jsx("code", { className: "flex-1 text-xs break-all", children: ex }), jsxRuntime.jsx(button.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: [jsxRuntime.jsxs(card.CardHeader, { className: "flex flex-row justify-between items-center p-3 pb-0", children: [jsxRuntime.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] }), jsxRuntime.jsx(button.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" })] }), jsxRuntime.jsxs(card.CardContent, { className: "p-3", children: [jsxRuntime.jsxs("div", { className: "mb-3", children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-1", children: [jsxRuntime.jsx(label.Label, { htmlFor: `rule-${index}-match`, children: "Match Expression (CEL)" }), jsxRuntime.jsx(button.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' })] }), jsxRuntime.jsx(textarea.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 && (jsxRuntime.jsxs("div", { className: "mt-2 p-3 bg-background border border-border rounded-md text-xs", children: [jsxRuntime.jsxs("div", { className: "mb-3 last:mb-0", children: [jsxRuntime.jsx("strong", { className: "block mb-1.5 text-foreground", children: "Available Variables:" }), jsxRuntime.jsx("ul", { className: "m-0 pl-5 list-disc", children: celHelp.variables.map((v) => (jsxRuntime.jsxs("li", { className: "mb-0.5", children: [jsxRuntime.jsx("code", { className: "bg-muted px-1.5 py-0.5 rounded text-xs", children: v.name }), " - ", v.description] }, v.name))) })] }), jsxRuntime.jsxs("div", { className: "mb-3 last:mb-0", children: [jsxRuntime.jsx("strong", { className: "block mb-1.5 text-foreground", children: "Examples:" }), jsxRuntime.jsx("ul", { className: "m-0 p-0 list-none", children: celHelp.examples.map((ex, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-2 mb-1 px-2 py-1 bg-muted rounded", children: [jsxRuntime.jsx("code", { className: "flex-1 text-xs break-all", children: ex }), jsxRuntime.jsx(button.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))) })] })] }))] }), jsxRuntime.jsxs("div", { className: "mb-3 last:mb-0", children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-1", children: [jsxRuntime.jsx(label.Label, { htmlFor: `rule-${index}-summary`, children: "Summary Template (CEL)" }), jsxRuntime.jsx(button.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' })] }), jsxRuntime.jsx(textarea.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 && (jsxRuntime.jsxs("div", { className: "mt-2 p-3 bg-background border border-border rounded-md text-xs", children: [jsxRuntime.jsxs("div", { className: "mb-3 last:mb-0", children: [jsxRuntime.jsx("strong", { className: "block mb-1.5 text-foreground", children: "Available Variables:" }), jsxRuntime.jsx("ul", { className: "m-0 pl-5 list-disc", children: SUMMARY_HELP.variables.map((v) => (jsxRuntime.jsxs("li", { className: "mb-0.5", children: [jsxRuntime.jsx("code", { className: "bg-muted px-1.5 py-0.5 rounded text-xs", children: '{{ ' + v.name + ' }}' }), " - ", v.description] }, v.name))) })] }), jsxRuntime.jsxs("div", { className: "mb-3 last:mb-0", children: [jsxRuntime.jsx("strong", { className: "block mb-1.5 text-foreground", children: "Examples:" }), jsxRuntime.jsx("ul", { className: "m-0 p-0 list-none", children: SUMMARY_HELP.examples.map((ex, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-2 mb-1 px-2 py-1 bg-muted rounded", children: [jsxRuntime.jsx("code", { className: "flex-1 text-xs break-all", children: ex }), jsxRuntime.jsx(button.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))) })] })] }))] })] })] }));
 }
 
 /**
@@ -14781,7 +14800,7 @@ function ReindexJobList({ client, onViewJob, onCreateJob, watch = true, classNam
         const bTime = b.metadata?.creationTimestamp || '';
         return bTime.localeCompare(aTime);
     });
-    return (jsxRuntime.jsxs(card.Card, { className: `rounded-xl ${className}`, children: [jsxRuntime.jsxs(card.CardHeader, { className: "pb-1.5", children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground m-0", children: "Re-process historical events through updated policies" }), isWatching && (jsxRuntime.jsxs(Badge, { variant: "success", className: "text-xs", children: [jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 bg-green-500 rounded-full mr-1.5 animate-pulse" }), "Live"] }))] }), jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [jsxRuntime.jsx(button.Button, { type: "tertiary", theme: "outline", size: "small", onClick: refresh, disabled: isLoading, title: "Refresh job list", className: "h-7 px-2", children: isLoading ? (jsxRuntime.jsx("span", { className: "w-3.5 h-3.5 border-2 border-border border-t-primary rounded-full animate-spin" })) : ('↻') }), onCreateJob && (jsxRuntime.jsx(button.Button, { size: "small", onClick: onCreateJob, className: "bg-primary text-primary-foreground hover:bg-primary/90 h-7 text-xs", children: "+ Create Job" }))] })] }), jsxRuntime.jsx(separator.Separator, { className: "mt-1.5" })] }), jsxRuntime.jsxs(card.CardContent, { className: "pt-3", children: [jsxRuntime.jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-3", errorFormatter: errorFormatter }), isLoading && jobs.length === 0 && (jsxRuntime.jsx("div", { className: "border border-input rounded-lg overflow-hidden", children: jsxRuntime.jsxs("table", { className: "w-full border-collapse text-sm", children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" })] }) }), jsxRuntime.jsxs("tbody", { children: [jsxRuntime.jsx(ReindexJobSkeletonRow, {}), jsxRuntime.jsx(ReindexJobSkeletonRow, {}), jsxRuntime.jsx(ReindexJobSkeletonRow, {})] })] }) })), !isLoading && !error && jobs.length === 0 && (jsxRuntime.jsxs("div", { className: "text-center py-8 px-6 text-muted-foreground", children: [jsxRuntime.jsx("div", { className: "text-4xl mb-3", children: "\uD83D\uDD04" }), jsxRuntime.jsx("h3", { className: "m-0 mb-1.5 text-foreground", children: "No reindex jobs found" }), jsxRuntime.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 && (jsxRuntime.jsx(button.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 && (jsxRuntime.jsx("div", { className: "border border-input rounded-lg overflow-hidden", children: jsxRuntime.jsxs("table", { className: "w-full border-collapse text-sm", children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" })] }) }), jsxRuntime.jsx("tbody", { children: sortedJobs.map((job) => {
+    return (jsxRuntime.jsxs(card.Card, { className: `rounded-xl ${className}`, children: [jsxRuntime.jsxs(card.CardHeader, { className: "pb-1.5", children: [jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground m-0", children: "Re-process historical events through updated policies" }), isWatching && (jsxRuntime.jsxs(Badge, { variant: "success", className: "text-xs", children: [jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 bg-[var(--success-500)] rounded-full mr-1.5 animate-pulse" }), "Live"] }))] }), jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [jsxRuntime.jsx(button.Button, { type: "tertiary", theme: "outline", size: "small", onClick: refresh, disabled: isLoading, title: "Refresh job list", className: "h-7 px-2", children: isLoading ? (jsxRuntime.jsx("span", { className: "w-3.5 h-3.5 border-2 border-border border-t-primary rounded-full animate-spin" })) : ('↻') }), onCreateJob && (jsxRuntime.jsx(button.Button, { size: "small", onClick: onCreateJob, className: "bg-primary text-primary-foreground hover:bg-primary/90 h-7 text-xs", children: "+ Create Job" }))] })] }), jsxRuntime.jsx(separator.Separator, { className: "mt-1.5" })] }), jsxRuntime.jsxs(card.CardContent, { className: "pt-3", children: [jsxRuntime.jsx(ApiErrorAlert, { error: error, onRetry: refresh, className: "mb-3", errorFormatter: errorFormatter }), isLoading && jobs.length === 0 && (jsxRuntime.jsx("div", { className: "border border-input rounded-lg overflow-hidden", children: jsxRuntime.jsxs("table", { className: "w-full border-collapse text-sm", children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" })] }) }), jsxRuntime.jsxs("tbody", { children: [jsxRuntime.jsx(ReindexJobSkeletonRow, {}), jsxRuntime.jsx(ReindexJobSkeletonRow, {}), jsxRuntime.jsx(ReindexJobSkeletonRow, {})] })] }) })), !isLoading && !error && jobs.length === 0 && (jsxRuntime.jsxs("div", { className: "text-center py-8 px-6 text-muted-foreground", children: [jsxRuntime.jsx("div", { className: "text-4xl mb-3", children: "\uD83D\uDD04" }), jsxRuntime.jsx("h3", { className: "m-0 mb-1.5 text-foreground", children: "No reindex jobs found" }), jsxRuntime.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 && (jsxRuntime.jsx(button.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 && (jsxRuntime.jsx("div", { className: "border border-input rounded-lg overflow-hidden", children: jsxRuntime.jsxs("table", { className: "w-full border-collapse text-sm", children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" })] }) }), jsxRuntime.jsx("tbody", { children: sortedJobs.map((job) => {
                                         const duration = getReindexJobDuration(job);
                                         return (jsxRuntime.jsxs("tr", { className: "hover:bg-muted transition-colors", children: [jsxRuntime.jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0", children: jsxRuntime.jsx("span", { className: "text-xs font-medium font-mono", children: job.metadata?.name }) }), jsxRuntime.jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0 text-center", children: jsxRuntime.jsxs(Badge, { variant: getPhaseBadgeVariant(job.status?.phase), className: "inline-flex items-center gap-1", children: [getPhaseIcon$1(job.status?.phase), job.status?.phase || 'Unknown'] }) }), jsxRuntime.jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0", children: job.status?.phase === 'Failed' ? (jsxRuntime.jsx("span", { className: "text-xs text-destructive", children: job.status?.message || 'Job failed' })) : (jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: job.status?.message || 'Waiting to start' })) }), jsxRuntime.jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0 text-center", children: jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: duration || '-' }) }), jsxRuntime.jsx("td", { className: "px-3 py-2 border-b border-border last:border-b-0 text-center", children: onViewJob && (jsxRuntime.jsx(button.Button, { type: "quaternary", theme: "borderless", size: "small", onClick: () => onViewJob(job.metadata?.name || ''), className: "h-7 px-2", title: "View job details", children: jsxRuntime.jsx(Eye, { className: "h-3.5 w-3.5" }) })) })] }, job.metadata?.name));
                                     }) })] }) }))] })] }));
@@ -14793,11 +14812,11 @@ function ReindexJobList({ client, onViewJob, onCreateJob, watch = true, classNam
 function getPhaseIcon(phase) {
     switch (phase) {
         case 'Succeeded':
-            return jsxRuntime.jsx(CircleCheck, { className: "h-8 w-8 text-green-500" });
+            return jsxRuntime.jsx(CircleCheck, { className: "h-8 w-8 text-[var(--success-500)]" });
         case 'Failed':
-            return jsxRuntime.jsx(CircleX, { className: "h-8 w-8 text-red-500" });
+            return jsxRuntime.jsx(CircleX, { className: "h-8 w-8 text-destructive" });
         case 'Running':
-            return jsxRuntime.jsx(LoaderCircle, { className: "h-8 w-8 text-blue-500 animate-spin" });
+            return jsxRuntime.jsx(LoaderCircle, { className: "h-8 w-8 text-[var(--info-500)] animate-spin" });
         case 'Pending':
         default:
             return jsxRuntime.jsx(Clock, { className: "h-8 w-8 text-muted-foreground" });
@@ -14878,7 +14897,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 (jsxRuntime.jsxs(card.Card, { className: `rounded-xl max-w-md ${className}`, children: [jsxRuntime.jsxs(card.CardHeader, { className: "flex flex-row justify-between items-start p-6 border-b border-border space-y-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [isLoading ? (jsxRuntime.jsx(skeleton.Skeleton, { className: "h-8 w-8 rounded-full" })) : (getPhaseIcon(job?.status?.phase)), jsxRuntime.jsx("div", { children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-32 mb-2" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-24" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground m-0", children: statusMessage }), jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground m-0", children: [duration && jsxRuntime.jsx(jsxRuntime.Fragment, { children: duration }), isWatching && !isTerminal && (jsxRuntime.jsx(Badge, { variant: "outline", className: "ml-2 text-xs text-green-600 border-green-300", children: "Live" }))] })] })) })] }), isTerminal && onDelete && (jsxRuntime.jsx(button.Button, { type: "quaternary", theme: "borderless", size: "small", onClick: handleDelete, disabled: isDeleting, className: "h-8 w-8 p-0", children: isDeleting ? (jsxRuntime.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" })) : (jsxRuntime.jsx(Trash2, { className: "h-4 w-4" })) }))] }), jsxRuntime.jsx(ApiErrorAlert, { error: error, onRetry: loadJob, className: "mx-6 mt-4", errorFormatter: errorFormatter }), !isLoading && job && (jsxRuntime.jsxs(card.CardContent, { className: "p-6 space-y-4", children: [job.status?.phase === 'Failed' && job.status?.message && (jsxRuntime.jsx("div", { className: "p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700", children: job.status.message })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mb-1", children: "Time Range" }), jsxRuntime.jsxs("div", { className: "text-sm font-mono", children: [job.spec.timeRange.startTime, job.spec.timeRange.endTime && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" \u2192 ", job.spec.timeRange.endTime] })] })] }), job.spec.policySelector?.names && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mb-1", children: "Policy" }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: job.spec.policySelector.names.map((name) => (jsxRuntime.jsx(Badge, { variant: "secondary", className: "text-xs font-mono", children: name }, name))) })] }))] }))] }));
+    return (jsxRuntime.jsxs(card.Card, { className: `rounded-xl max-w-md ${className}`, children: [jsxRuntime.jsxs(card.CardHeader, { className: "flex flex-row justify-between items-start p-6 border-b border-border space-y-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [isLoading ? (jsxRuntime.jsx(skeleton.Skeleton, { className: "h-8 w-8 rounded-full" })) : (getPhaseIcon(job?.status?.phase)), jsxRuntime.jsx("div", { children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-32 mb-2" }), jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-24" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground m-0", children: statusMessage }), jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground m-0", children: [duration && jsxRuntime.jsx(jsxRuntime.Fragment, { children: duration }), isWatching && !isTerminal && (jsxRuntime.jsx(Badge, { variant: "outline", className: "ml-2 text-xs text-[var(--success-500)] border-[var(--success-300)]", children: "Live" }))] })] })) })] }), isTerminal && onDelete && (jsxRuntime.jsx(button.Button, { type: "quaternary", theme: "borderless", size: "small", onClick: handleDelete, disabled: isDeleting, className: "h-8 w-8 p-0", children: isDeleting ? (jsxRuntime.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" })) : (jsxRuntime.jsx(Trash2, { className: "h-4 w-4" })) }))] }), jsxRuntime.jsx(ApiErrorAlert, { error: error, onRetry: loadJob, className: "mx-6 mt-4", errorFormatter: errorFormatter }), !isLoading && job && (jsxRuntime.jsxs(card.CardContent, { className: "p-6 space-y-4", children: [job.status?.phase === 'Failed' && job.status?.message && (jsxRuntime.jsx("div", { className: "p-3 bg-destructive/10 border border-destructive/30 rounded-lg text-sm text-destructive", children: job.status.message })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mb-1", children: "Time Range" }), jsxRuntime.jsxs("div", { className: "text-sm font-mono", children: [job.spec.timeRange.startTime, job.spec.timeRange.endTime && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" \u2192 ", job.spec.timeRange.endTime] })] })] }), job.spec.policySelector?.names && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mb-1", children: "Policy" }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: job.spec.policySelector.names.map((name) => (jsxRuntime.jsx(Badge, { variant: "secondary", className: "text-xs font-mono", children: name }, name))) })] }))] }))] }));
 }
 
 const TIME_RANGE_OPTIONS$1 = [
@@ -14981,76 +15000,11 @@ function ReindexJobDialog({ client, policyName, open, onOpenChange, onSuccess, e
     return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-sm", children: [jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("div", { className: "p-2 bg-primary/10 rounded-lg", children: jsxRuntime.jsx(RefreshCw, { className: "h-5 w-5 text-primary" }) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(DialogTitle, { children: "Reindex Policy" }), jsxRuntime.jsxs(DialogDescription, { className: "text-xs", children: ["Re-process events for \"", policyName, "\""] })] })] }) }), jsxRuntime.jsxs("div", { className: "space-y-4 py-2", children: [jsxRuntime.jsx(ApiErrorAlert, { error: error, errorFormatter: errorFormatter }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { className: "block text-sm font-medium text-foreground mb-2", children: "Time range" }), jsxRuntime.jsxs(select.Select, { value: selectedRange, onValueChange: setSelectedRange, children: [jsxRuntime.jsx(select.SelectTrigger, { className: "w-full", children: jsxRuntime.jsx(select.SelectValue, { placeholder: "Select time range" }) }), jsxRuntime.jsx(select.SelectContent, { children: TIME_RANGE_OPTIONS.map((option) => (jsxRuntime.jsx(select.SelectItem, { value: option.value, children: option.label }, option.value))) })] })] }), jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: ["Events from ", selectedOption?.label.toLowerCase(), " will be re-processed."] })] }), jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [jsxRuntime.jsx(button.Button, { htmlType: "button", type: "tertiary", theme: "outline", onClick: () => onOpenChange(false), disabled: isSubmitting, children: "Cancel" }), jsxRuntime.jsx(button.Button, { htmlType: "button", onClick: handleSubmit, disabled: isSubmitting, children: isSubmitting ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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__namespace.useState(false);
-    const [search, setSearch] = React__namespace.useState('');
-    // Find selected options for display
-    const selectedOptions = options.filter((opt) => values.includes(opt.value));
-    const displayValue = React__namespace.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__namespace.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__namespace.useCallback((e) => {
-        e.stopPropagation();
-        onValuesChange([]);
-    }, [onValuesChange]);
-    const handleRemove = React__namespace.useCallback((e, valueToRemove) => {
-        e.stopPropagation();
-        onValuesChange(values.filter((v) => v !== valueToRemove));
-    }, [onValuesChange, values]);
-    // Custom fuzzy filter function
-    const filterOptions = React__namespace.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 (jsxRuntime.jsxs(Popover__namespace.Root, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: jsxRuntime.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: [jsxRuntime.jsx("span", { className: "truncate text-left flex-1", children: displayValue }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-2", children: [values.length > 0 && !disabled && (jsxRuntime.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: jsxRuntime.jsx(X, { className: "h-3 w-3" }) })), jsxRuntime.jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })] })] }) }), jsxRuntime.jsx(Popover__namespace.Portal, { children: jsxRuntime.jsx(Popover__namespace.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: jsxRuntime.jsxs(cmdk.Command, { filter: filterOptions, className: "w-full", children: [jsxRuntime.jsx("div", { className: "flex items-center border-b px-3", children: jsxRuntime.jsx(cmdk.CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: setSearch, className: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50" }) }), values.length > 0 && (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 p-2 border-b", children: selectedOptions.map((option) => (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-secondary text-secondary-foreground text-xs", children: [option.label, jsxRuntime.jsx("button", { type: "button", onClick: (e) => handleRemove(e, option.value), className: "rounded-sm hover:bg-secondary-foreground/20", children: jsxRuntime.jsx(X, { className: "h-3 w-3" }) })] }, option.value))) })), jsxRuntime.jsxs(cmdk.CommandList, { className: "max-h-[300px] overflow-y-auto p-1", children: [jsxRuntime.jsx(cmdk.CommandEmpty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }), jsxRuntime.jsx(cmdk.CommandGroup, { children: options.map((option) => (jsxRuntime.jsxs(cmdk.CommandItem, { value: option.value, onSelect: () => handleSelect(option.value), className: cn('relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', 'hover:bg-accent hover:text-accent-foreground'), children: [jsxRuntime.jsx(Check, { className: cn('mr-2 h-4 w-4', values.includes(option.value) ? 'opacity-100' : 'opacity-0') }), jsxRuntime.jsx("span", { className: "flex-1 truncate", children: option.label }), option.count !== undefined && (jsxRuntime.jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: ["(", option.count, ")"] }))] }, option.value))) })] })] }) }) })] }));
+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__namespace.useMemo(() => options.map((o) => ({ value: o.value, label: o.label })), [options]);
+    return (jsxRuntime.jsx(multiSelect.MultiSelect, { className: className, options: items, value: values, onValueChange: onValuesChange, placeholder: placeholder, emptyContent: emptyMessage, isLoading: loading, disabled: disabled, maxCount: maxDisplayed }));
 }
 
 /**
@@ -15760,7 +15714,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?.();
@@ -16160,7 +16114,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?.();
@@ -16276,7 +16230,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?.();
@@ -16635,6 +16589,7 @@ exports.ActionToggle = ActionToggle;
 exports.ActivityApiClient = ActivityApiClient;
 exports.ActivityExpandedDetails = ActivityExpandedDetails;
 exports.ActivityFeed = ActivityFeed;
+exports.ActivityFeedFilters = ActivityFeedFilters;
 exports.ActivityFeedItem = ActivityFeedItem;
 exports.ActivityFeedItemSkeleton = ActivityFeedItemSkeleton;
 exports.ActivityFeedSummary = ActivityFeedSummary;