From 8cc2e1728ce1e940700b45ef2542f0ed394884a7 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sat, 16 Dec 2023 15:45:18 -0600
Subject: [PATCH 01/35] Updated shadcn components, added new shad components

---
 .../ClientApp/package-lock.json               | 91 +++++++++++++++++--
 src/Exceptionless.Web/ClientApp/package.json  |  3 +-
 .../ui/command/command-dialog.svelte          | 23 +++++
 .../ui/command/command-empty.svelte           | 11 +++
 .../ui/command/command-group.svelte           | 17 ++++
 .../ui/command/command-input.svelte           | 21 +++++
 .../components/ui/command/command-item.svelte | 17 ++++
 .../components/ui/command/command-list.svelte | 14 +++
 .../ui/command/command-separator.svelte       |  9 ++
 .../ui/command/command-shortcut.svelte        | 13 +++
 .../lib/components/ui/command/command.svelte  | 22 +++++
 .../src/lib/components/ui/command/index.ts    | 37 ++++++++
 .../context-menu-checkbox-item.svelte         |  2 +-
 .../context-menu-radio-item.svelte            |  2 +-
 .../context-menu-sub-trigger.svelte           |  2 +-
 .../ui/dialog/dialog-content.svelte           | 36 ++++++++
 .../ui/dialog/dialog-description.svelte       | 16 ++++
 .../components/ui/dialog/dialog-footer.svelte | 16 ++++
 .../components/ui/dialog/dialog-header.svelte | 13 +++
 .../ui/dialog/dialog-overlay.svelte           | 21 +++++
 .../components/ui/dialog/dialog-portal.svelte |  7 ++
 .../components/ui/dialog/dialog-title.svelte  | 16 ++++
 .../src/lib/components/ui/dialog/index.ts     | 34 +++++++
 .../dropdown-menu-content.svelte              |  2 +
 .../dropdown-menu-sub-trigger.svelte          |  2 +-
 .../src/lib/components/ui/popover/index.ts    | 14 +++
 .../ui/popover/popover-content.svelte         | 27 ++++++
 .../src/lib/components/ui/select/index.ts     |  2 +-
 .../ui/select/select-content.svelte           |  2 +
 .../lib/components/ui/select/select.svelte    | 12 ---
 .../src/lib/components/ui/separator/index.ts  |  7 ++
 .../components/ui/separator/separator.svelte  | 22 +++++
 32 files changed, 507 insertions(+), 26 deletions(-)
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-dialog.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-empty.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-group.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-input.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-item.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-list.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-separator.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-shortcut.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/index.ts
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-content.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-description.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-footer.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-header.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-overlay.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-portal.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-title.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/index.ts
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/popover/index.ts
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/popover/popover-content.svelte
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/select/select.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/separator/index.ts
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/separator/separator.svelte

diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
index 3aedca9e20..db03ee079a 100644
--- a/src/Exceptionless.Web/ClientApp/package-lock.json
+++ b/src/Exceptionless.Web/ClientApp/package-lock.json
@@ -14,9 +14,10 @@
 				"@tanstack/svelte-query-devtools": "^5.13.5",
 				"@tanstack/svelte-table": "^8.10.7",
 				"@web3-storage/parse-link-header": "^3.1.0",
-				"bits-ui": "^0.11.7",
+				"bits-ui": "^0.11.8",
 				"class-validator": "^0.14.0",
 				"clsx": "^2.0.0",
+				"cmdk-sv": "^0.0.12",
 				"mode-watcher": "^0.1.2",
 				"oidc-client-ts": "^2.4.0",
 				"pretty-ms": "^8.0.0",
@@ -1057,9 +1058,9 @@
 			}
 		},
 		"node_modules/@melt-ui/svelte": {
-			"version": "0.65.1",
-			"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.65.1.tgz",
-			"integrity": "sha512-EFLLcfT7i3ICsGmdK4i83V5+08jl6ZKFKxguvOr2zNV08cIXWwp4lIwoYLOpP6ydORrbJjiRBd9sfNJcrm5YWg==",
+			"version": "0.65.2",
+			"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.65.2.tgz",
+			"integrity": "sha512-BpsSl9Bjp1++8U3+LaDOFUoX/PFQ9N7QWFhlFdUEZduhrbVyU70v9A459SKrQ+esFSjvh1AvqJYkMAUJXJlAmQ==",
 			"dependencies": {
 				"@floating-ui/core": "^1.3.1",
 				"@floating-ui/dom": "^1.4.5",
@@ -2067,12 +2068,12 @@
 			}
 		},
 		"node_modules/bits-ui": {
-			"version": "0.11.7",
-			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.11.7.tgz",
-			"integrity": "sha512-2x1WwFPf4fQGPm0JeEgEylxIzQtnavlbl1l/PawWFbxE41/vbpmYHBokrvnr4di8DBUZ6DJUMDtM3ngdL2DL/g==",
+			"version": "0.11.8",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.11.8.tgz",
+			"integrity": "sha512-T3YaT88OJguBoUU/MSncf41fiIc+5/ka8Au2LUDo0nSECex+LFY40+hKWLJc5tRT56avkyHsI7x9daA2r9eS/g==",
 			"dependencies": {
 				"@internationalized/date": "^3.5.0",
-				"@melt-ui/svelte": "0.65.1",
+				"@melt-ui/svelte": "0.65.2",
 				"nanoid": "^5.0.4"
 			},
 			"peerDependencies": {
@@ -2355,6 +2356,80 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/cmdk-sv": {
+			"version": "0.0.12",
+			"resolved": "https://registry.npmjs.org/cmdk-sv/-/cmdk-sv-0.0.12.tgz",
+			"integrity": "sha512-d+eILSOb2W+/3U/j7xGTgGRrZkFB/z4Xlvj0ADrWhf34y9YLzJon3JCGP2hMil5IrVm0P/+IFIeCF5l3//kcjA==",
+			"dependencies": {
+				"bits-ui": "^0.9.0",
+				"nanoid": "^5.0.2"
+			},
+			"peerDependencies": {
+				"svelte": "^4.0.0"
+			}
+		},
+		"node_modules/cmdk-sv/node_modules/@melt-ui/svelte": {
+			"version": "0.61.2",
+			"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.61.2.tgz",
+			"integrity": "sha512-BHkD9G31zQBToA4euDRBgTQRvWxT9scufOVCXgDO6HKTvyxFspbWT2bgiSFqAK4BbAGDn9Ao36Q8F9O71KN4OQ==",
+			"dependencies": {
+				"@floating-ui/core": "^1.3.1",
+				"@floating-ui/dom": "^1.4.5",
+				"@internationalized/date": "^3.5.0",
+				"dequal": "^2.0.3",
+				"focus-trap": "^7.5.2",
+				"nanoid": "^4.0.2"
+			},
+			"peerDependencies": {
+				"svelte": ">=3 <5"
+			}
+		},
+		"node_modules/cmdk-sv/node_modules/@melt-ui/svelte/node_modules/nanoid": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.2.tgz",
+			"integrity": "sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"bin": {
+				"nanoid": "bin/nanoid.js"
+			},
+			"engines": {
+				"node": "^14 || ^16 || >=18"
+			}
+		},
+		"node_modules/cmdk-sv/node_modules/bits-ui": {
+			"version": "0.9.9",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.9.9.tgz",
+			"integrity": "sha512-LkdkyTtpXdkjBzPZJVJgpcre4fut6DONoprMfadHFo82HNUhph+02CxDjYEcZcThb5z4YjSxMlCYvQPZm+YtfQ==",
+			"dependencies": {
+				"@melt-ui/svelte": "0.61.2",
+				"nanoid": "^5.0.3"
+			},
+			"peerDependencies": {
+				"svelte": "^4.0.0"
+			}
+		},
+		"node_modules/cmdk-sv/node_modules/nanoid": {
+			"version": "5.0.4",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.4.tgz",
+			"integrity": "sha512-vAjmBf13gsmhXSgBrtIclinISzFFy22WwCYoyilZlsrRXNIHSwgFQ1bEdjRwMT3aoadeIF6HMuDRlOxzfXV8ig==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"bin": {
+				"nanoid": "bin/nanoid.js"
+			},
+			"engines": {
+				"node": "^18 || >=20"
+			}
+		},
 		"node_modules/code-red": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index 127041992c..9bbf2a1825 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -52,9 +52,10 @@
 		"@tanstack/svelte-query-devtools": "^5.13.5",
 		"@tanstack/svelte-table": "^8.10.7",
 		"@web3-storage/parse-link-header": "^3.1.0",
-		"bits-ui": "^0.11.7",
+		"bits-ui": "^0.11.8",
 		"class-validator": "^0.14.0",
 		"clsx": "^2.0.0",
+		"cmdk-sv": "^0.0.12",
 		"mode-watcher": "^0.1.2",
 		"oidc-client-ts": "^2.4.0",
 		"pretty-ms": "^8.0.0",
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-dialog.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-dialog.svelte
new file mode 100644
index 0000000000..a1f0289906
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-dialog.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Command from './command.svelte';
+	import * as Dialog from '$comp/ui/dialog';
+	import type { Dialog as DialogPrimitive } from 'bits-ui';
+	import type { Command as CommandPrimitive } from 'cmdk-sv';
+
+	type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps;
+
+	export let open: $$Props['open'] = false;
+	export let value: $$Props['value'] = undefined;
+</script>
+
+<Dialog.Root bind:open {...$$restProps}>
+	<Dialog.Content class="overflow-hidden p-0">
+		<Command
+			class="[&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
+			{...$$restProps}
+			bind:value
+		>
+			<slot />
+		</Command>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-empty.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-empty.svelte
new file mode 100644
index 0000000000..35d5f03243
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-empty.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Empty class={cn('py-6 text-center text-sm', className)} {...$$restProps}>
+	<slot />
+</CommandPrimitive.Empty>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-group.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-group.svelte
new file mode 100644
index 0000000000..eea2da83bc
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-group.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Group
+	class={cn(
+		'overflow-hidden p-1 text-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground',
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.Group>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-input.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-input.svelte
new file mode 100644
index 0000000000..1ae11fa5ce
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-input.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { MagnifyingGlass } from 'radix-icons-svelte';
+	import { cn } from '$lib/utils';
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let value: string = '';
+</script>
+
+<div class="flex items-center px-3 border-b" data-cmdk-input-wrapper="">
+	<MagnifyingGlass class="w-4 h-4 mr-2 opacity-50 shrink-0" />
+	<CommandPrimitive.Input
+		class={cn(
+			'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',
+			className
+		)}
+		{...$$restProps}
+		bind:value
+	/>
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-item.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-item.svelte
new file mode 100644
index 0000000000..54005ef433
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-item.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Item
+	class={cn(
+		'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.Item>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-list.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-list.svelte
new file mode 100644
index 0000000000..e6420b339b
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-list.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.List
+	class={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.List>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-separator.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-separator.svelte
new file mode 100644
index 0000000000..68b96be037
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-separator.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Separator class={cn('-mx-1 h-px bg-border', className)} {...$$restProps} />
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-shortcut.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-shortcut.svelte
new file mode 100644
index 0000000000..bf329ebdd9
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-shortcut.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<span
+	class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+	{...$$restProps}
+>
+	<slot />
+</span>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command.svelte
new file mode 100644
index 0000000000..5961d8c7b1
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'cmdk-sv';
+	import { cn } from '$lib/utils';
+
+	type $$Props = CommandPrimitive.CommandProps;
+
+	export let value: $$Props['value'] = undefined;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<CommandPrimitive.Root
+	class={cn(
+		'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+		className
+	)}
+	bind:value
+	{...$$restProps}
+>
+	<slot />
+</CommandPrimitive.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/index.ts
new file mode 100644
index 0000000000..03922d5dce
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/index.ts
@@ -0,0 +1,37 @@
+import { Command as CommandPrimitive } from 'cmdk-sv';
+
+import Root from './command.svelte';
+import Dialog from './command-dialog.svelte';
+import Empty from './command-empty.svelte';
+import Group from './command-group.svelte';
+import Item from './command-item.svelte';
+import Input from './command-input.svelte';
+import List from './command-list.svelte';
+import Separator from './command-separator.svelte';
+import Shortcut from './command-shortcut.svelte';
+
+const Loading = CommandPrimitive.Loading;
+
+export {
+	Root,
+	Dialog,
+	Empty,
+	Group,
+	Item,
+	Input,
+	List,
+	Separator,
+	Shortcut,
+	Loading,
+	//
+	Root as Command,
+	Dialog as CommandDialog,
+	Empty as CommandEmpty,
+	Group as CommandGroup,
+	Item as CommandItem,
+	Input as CommandInput,
+	List as CommandList,
+	Separator as CommandSeparator,
+	Shortcut as CommandShortcut,
+	Loading as CommandLoading
+};
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
index 5192d496f4..ce8203cc15 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte
@@ -27,7 +27,7 @@
 >
 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 		<ContextMenuPrimitive.CheckboxIndicator>
-			<Check class="w-4 h-4" />
+			<Check class="h-4 w-4" />
 		</ContextMenuPrimitive.CheckboxIndicator>
 	</span>
 	<slot />
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/context-menu/context-menu-radio-item.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
index 0fb0c5e7fa..e0d0d8b407 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/context-menu/context-menu-radio-item.svelte
@@ -27,7 +27,7 @@
 >
 	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 		<ContextMenuPrimitive.RadioIndicator>
-			<DotFilled class="w-4 h-4 fill-current" />
+			<DotFilled class="h-4 w-4 fill-current" />
 		</ContextMenuPrimitive.RadioIndicator>
 	</span>
 	<slot />
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
index 3ae69355c9..0829015bf2 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte
@@ -27,5 +27,5 @@
 	on:pointermove
 >
 	<slot />
-	<ChevronRight class="w-4 h-4 ml-auto" />
+	<ChevronRight class="ml-auto h-4 w-4" />
 </ContextMenuPrimitive.SubTrigger>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-content.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000000..7eff526610
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import * as Dialog from '.';
+	import { cn, flyAndScale } from '$lib/utils';
+	import { Cross2 } from 'radix-icons-svelte';
+
+	type $$Props = DialogPrimitive.ContentProps;
+
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 200
+	};
+	export { className as class };
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+		<DialogPrimitive.Close
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+		>
+			<Cross2 class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-description.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000000..84d4e5f167
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = DialogPrimitive.DescriptionProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Description
+	class={cn('text-sm text-muted-foreground', className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Description>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-footer.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 0000000000..da4f517ec3
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-header.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000000..e4b36085d5
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000000..22c648858e
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+	import { fade } from 'svelte/transition';
+
+	type $$Props = DialogPrimitive.OverlayProps;
+
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = fade;
+	export let transitionConfig: $$Props['transitionConfig'] = {
+		duration: 150
+	};
+	export { className as class };
+</script>
+
+<DialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ', className)}
+	{...$$restProps}
+/>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-portal.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 0000000000..2935181d89
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+</script>
+
+<DialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</DialogPrimitive.Portal>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-title.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000000..c133166b34
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = DialogPrimitive.TitleProps;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Title
+	class={cn('text-lg font-semibold leading-none tracking-tight', className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Title>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 0000000000..2a1a048e2b
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,34 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+
+import Title from './dialog-title.svelte';
+import Portal from './dialog-portal.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription
+};
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index 6c31cd9027..c15360670a 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -5,6 +5,7 @@
 	type $$Props = DropdownMenuPrimitive.ContentProps;
 
 	let className: $$Props['class'] = undefined;
+	export let sideOffset: $$Props['sideOffset'] = 4;
 	export let transition: $$Props['transition'] = flyAndScale;
 	export let transitionConfig: $$Props['transitionConfig'] = undefined;
 	export { className as class };
@@ -13,6 +14,7 @@
 <DropdownMenuPrimitive.Content
 	{transition}
 	{transitionConfig}
+	{sideOffset}
 	class={cn(
 		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
 		className
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index 2138e3d67a..c34feac962 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -13,7 +13,7 @@
 
 <DropdownMenuPrimitive.SubTrigger
 	class={cn(
-		'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent',
+		'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground',
 		inset && 'pl-8',
 		className
 	)}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/popover/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/popover/index.ts
new file mode 100644
index 0000000000..c524e471c0
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,14 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Content from './popover-content.svelte';
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger
+};
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/popover/popover-content.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 0000000000..dd0f937c48
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { cn, flyAndScale } from '$lib/utils';
+
+	type $$Props = PopoverPrimitive.ContentProps;
+
+	let className: $$Props['class'] = undefined;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
+	export let align: $$Props['align'] = 'center';
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export { className as class };
+</script>
+
+<PopoverPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{align}
+	{sideOffset}
+	{...$$restProps}
+	class={cn(
+		'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+		className
+	)}
+>
+	<slot />
+</PopoverPrimitive.Content>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/select/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/select/index.ts
index 50200fb7fc..5a9dd8784b 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/select/index.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/select/index.ts
@@ -1,12 +1,12 @@
 import { Select as SelectPrimitive } from 'bits-ui';
 
-import Root from './select.svelte';
 import Label from './select-label.svelte';
 import Item from './select-item.svelte';
 import Content from './select-content.svelte';
 import Trigger from './select-trigger.svelte';
 import Separator from './select-separator.svelte';
 
+const Root = SelectPrimitive.Root;
 const Group = SelectPrimitive.Group;
 const Input = SelectPrimitive.Input;
 const Value = SelectPrimitive.Value;
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/select/select-content.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/select/select-content.svelte
index df655688cb..8162b00c3b 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/select/select-content.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/select/select-content.svelte
@@ -6,6 +6,7 @@
 	type $$Props = SelectPrimitive.ContentProps;
 
 	let className: $$Props['class'] = undefined;
+	export let sideOffset: $$Props['sideOffset'] = 4;
 	export let inTransition: $$Props['inTransition'] = flyAndScale;
 	export let inTransitionConfig: $$Props['inTransitionConfig'] = undefined;
 	export let outTransition: $$Props['outTransition'] = scale;
@@ -22,6 +23,7 @@
 	{inTransitionConfig}
 	{outTransition}
 	{outTransitionConfig}
+	{sideOffset}
 	class={cn(
 		'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md focus:outline-none',
 		className
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/select/select.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/select/select.svelte
deleted file mode 100644
index dd5252d1da..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/select/select.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-	import { Select as SelectPrimitive } from 'bits-ui';
-
-	type $$Props = SelectPrimitive.Props;
-
-	export let selected: $$Props['selected'] = undefined;
-	export let open: $$Props['open'] = undefined;
-</script>
-
-<SelectPrimitive.Root bind:selected bind:open {...$$restProps}>
-	<slot />
-</SelectPrimitive.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/separator/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/separator/index.ts
new file mode 100644
index 0000000000..768efac960
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from './separator.svelte';
+
+export {
+	Root,
+	//
+	Root as Separator
+};
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/separator/separator.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 0000000000..499bf675a6
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils';
+
+	type $$Props = SeparatorPrimitive.Props;
+
+	let className: $$Props['class'] = undefined;
+	export let orientation: $$Props['orientation'] = 'horizontal';
+	export let decorative: $$Props['decorative'] = undefined;
+	export { className as class };
+</script>
+
+<SeparatorPrimitive.Root
+	class={cn(
+		'shrink-0 bg-border',
+		orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+		className
+	)}
+	{orientation}
+	{decorative}
+	{...$$restProps}
+/>

From 9c2302599b5c8f7a7c8d57d134afa6991988bfb6 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Wed, 20 Dec 2023 06:15:32 -0600
Subject: [PATCH 02/35] Updated deps which resolved vite warnings

---
 .../ClientApp/package-lock.json               | 272 +++++++++---------
 src/Exceptionless.Web/ClientApp/package.json  |  28 +-
 2 files changed, 150 insertions(+), 150 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
index db03ee079a..b2dc47ea85 100644
--- a/src/Exceptionless.Web/ClientApp/package-lock.json
+++ b/src/Exceptionless.Web/ClientApp/package-lock.json
@@ -9,10 +9,10 @@
 			"version": "8.0.0",
 			"dependencies": {
 				"@exceptionless/browser": "^3.0.5",
-				"@iconify-json/mdi": "^1.1.62",
-				"@tanstack/svelte-query": "^5.13.4",
-				"@tanstack/svelte-query-devtools": "^5.13.5",
-				"@tanstack/svelte-table": "^8.10.7",
+				"@iconify-json/mdi": "^1.1.63",
+				"@tanstack/svelte-query": "^5.14.2",
+				"@tanstack/svelte-query-devtools": "^5.14.2",
+				"@tanstack/svelte-table": "^8.11.0",
 				"@web3-storage/parse-link-header": "^3.1.0",
 				"bits-ui": "^0.11.8",
 				"class-validator": "^0.14.0",
@@ -24,23 +24,23 @@
 				"radix-icons-svelte": "^1.2.1",
 				"svelte-legos": "^0.2.2",
 				"svelte-local-storage-store": "^0.6.4",
-				"svelte-time": "^0.8.0",
+				"svelte-time": "^0.8.2",
 				"svoast": "^2.3.0",
 				"tailwind-merge": "^2.1.0",
-				"tailwind-variants": "^0.1.18",
-				"tailwindcss": "^3.3.6",
+				"tailwind-variants": "^0.1.19",
+				"tailwindcss": "^3.4.0",
 				"unplugin-icons": "^0.18.1"
 			},
 			"devDependencies": {
 				"@playwright/test": "^1.40.1",
-				"@sveltejs/adapter-static": "^3.0.0",
-				"@sveltejs/kit": "^2.0.0",
+				"@sveltejs/adapter-static": "^3.0.1",
+				"@sveltejs/kit": "^2.0.4",
 				"@sveltejs/vite-plugin-svelte": "^3.0.1",
-				"@typescript-eslint/eslint-plugin": "^6.14.0",
-				"@typescript-eslint/parser": "^6.14.0",
+				"@typescript-eslint/eslint-plugin": "^6.15.0",
+				"@typescript-eslint/parser": "^6.15.0",
 				"autoprefixer": "^10.4.16",
 				"cross-env": "^7.0.3",
-				"eslint": "^8.55.0",
+				"eslint": "^8.56.0",
 				"eslint-config-prettier": "^9.1.0",
 				"eslint-plugin-svelte": "^2.35.1",
 				"npm-run-all": "^4.1.5",
@@ -53,8 +53,8 @@
 				"swagger-typescript-api": "^13.0.3",
 				"tslib": "^2.6.2",
 				"typescript": "^5.3.3",
-				"vite": "^5.0.9",
-				"vitest": "^1.0.4"
+				"vite": "^5.0.10",
+				"vitest": "^1.1.0"
 			}
 		},
 		"node_modules/@aashutoshrathi/word-wrap": {
@@ -775,9 +775,9 @@
 			}
 		},
 		"node_modules/@eslint/js": {
-			"version": "8.55.0",
-			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.55.0.tgz",
-			"integrity": "sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==",
+			"version": "8.56.0",
+			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.56.0.tgz",
+			"integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
 			"dev": true,
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -859,9 +859,9 @@
 			"dev": true
 		},
 		"node_modules/@iconify-json/mdi": {
-			"version": "1.1.62",
-			"resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.1.62.tgz",
-			"integrity": "sha512-VEfnaIwO++vZ5xUYdbPuB303E1Db29kRfkd+n9dxC0zQQ6fTy4TEI2Q79TYZtEPwiIOWOy8pudTbOv4GLUaziA==",
+			"version": "1.1.63",
+			"resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.1.63.tgz",
+			"integrity": "sha512-b07dRM5LYdwJqd/lm+1+JDNDNSWHvpZ7ujb73oJxx3lmK1J0giDS0BSc4yia0hixNV0Z2q/4GyxAu/A8XqDnbg==",
 			"dependencies": {
 				"@iconify/types": "*"
 			}
@@ -1331,18 +1331,18 @@
 			}
 		},
 		"node_modules/@sveltejs/adapter-static": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.0.tgz",
-			"integrity": "sha512-nNsm8XChhJgQdeVegdXU+EnpznSUlsIjlLJa9SNmvSVN3rcPtB2BAnGuS/EWCtgPLkVcy9V2kW5knronqmF+KQ==",
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.1.tgz",
+			"integrity": "sha512-6lMvf7xYEJ+oGeR5L8DFJJrowkefTK6ZgA4JiMqoClMkKq0s6yvsd3FZfCFvX1fQ0tpCD7fkuRVHsnUVgsHyNg==",
 			"dev": true,
 			"peerDependencies": {
 				"@sveltejs/kit": "^2.0.0"
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.0.0.tgz",
-			"integrity": "sha512-/GFxvit+q7PztRbgGTFXhVB6jvb0fZSeWuz5f4siQ2r/5BVhxYh7++Bw3/ZUjiOuyoZFiNBmOPcRNQbkzEce0g==",
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.0.4.tgz",
+			"integrity": "sha512-pqUOo1Slp2fybNjTouF7qgeN815hO2boRCNO1Z7/XtXu5IPNg9OSwI485qmQ0GUU2v2NmA0XZciFHGrgzOixyw==",
 			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
@@ -1418,9 +1418,9 @@
 			}
 		},
 		"node_modules/@tanstack/query-core": {
-			"version": "5.13.4",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.13.4.tgz",
-			"integrity": "sha512-8+rJucXvC/xlr4OrxHhEIob/cTlbT4fgmz1VsvB0D12FRStKaXeLORNGcOhSAynRd2NL74SV/Qq0IIb4DedLcA==",
+			"version": "5.14.2",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.14.2.tgz",
+			"integrity": "sha512-QmoJvC72sSWs3hgGis8JdmlDvqLfYGWUK4UG6OR9Q6t28JMN9m2FDwKPqoSJ9YVocELCSjMt/FGjEiLfk8000Q==",
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
@@ -1436,11 +1436,11 @@
 			}
 		},
 		"node_modules/@tanstack/svelte-query": {
-			"version": "5.13.4",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query/-/svelte-query-5.13.4.tgz",
-			"integrity": "sha512-wR/jyZQ6/YOa+Tcz3Beb+DSgB518BUnDVP8E9NmGrSKbRmrV9QXrjr/BjW62LrIKWk0PPMTZ6fCvs+LJUm48bw==",
+			"version": "5.14.2",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query/-/svelte-query-5.14.2.tgz",
+			"integrity": "sha512-77G5iFJg7540Rp3gW9EgqYXQh+MNWhLILxLl5SFiPZ+UJ2aDhWiUzMl0qTJx/TueD++M572p4G4bFLHZ60bawg==",
 			"dependencies": {
-				"@tanstack/query-core": "5.13.4"
+				"@tanstack/query-core": "5.14.2"
 			},
 			"funding": {
 				"type": "github",
@@ -1451,9 +1451,9 @@
 			}
 		},
 		"node_modules/@tanstack/svelte-query-devtools": {
-			"version": "5.13.5",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.13.5.tgz",
-			"integrity": "sha512-5hw5h45BY8OG8S/sNDkOBtKKokjWQSdH43Qco5nm427pxMvB8HROSopvdBGggedb36vQi4GDRoTCJzjQ9DaUIw==",
+			"version": "5.14.2",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.14.2.tgz",
+			"integrity": "sha512-ItrsjlHBOoeGq/Zwq8aT8uAjaZzfMNjFY3Tx/1TdgT5wv54d+lJpqz0PmRZXKOEBgiqG5mTweAyzWs03/HgHmQ==",
 			"dependencies": {
 				"@tanstack/query-devtools": "5.13.5",
 				"esm-env": "^1.0.0"
@@ -1463,16 +1463,16 @@
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/svelte-query": "^5.13.4",
+				"@tanstack/svelte-query": "^5.14.2",
 				"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0"
 			}
 		},
 		"node_modules/@tanstack/svelte-table": {
-			"version": "8.10.7",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-table/-/svelte-table-8.10.7.tgz",
-			"integrity": "sha512-nHHBYAzXZKs5GseAEJJFyK8EP5arHplHJc3a1X50oUv/xnE10EY/DhLV0YSNigIbNEbDcj+AsTg/6OtamIARQg==",
+			"version": "8.11.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-table/-/svelte-table-8.11.0.tgz",
+			"integrity": "sha512-pNsqQjmL+zpJUz3Qpw4imeRy0SMw5DJLqE1FBLR4z9ZhoKdzLWSN8qgYPRR96+WvSf5sIKvBj5EUAsTPlgGnhg==",
 			"dependencies": {
-				"@tanstack/table-core": "8.10.7"
+				"@tanstack/table-core": "8.11.0"
 			},
 			"engines": {
 				"node": ">=12"
@@ -1486,9 +1486,9 @@
 			}
 		},
 		"node_modules/@tanstack/table-core": {
-			"version": "8.10.7",
-			"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.10.7.tgz",
-			"integrity": "sha512-KQk5OMg5OH6rmbHZxuNROvdI+hKDIUxANaHlV+dPlNN7ED3qYQ/WkpY2qlXww1SIdeMlkIhpN/2L00rof0fXFw==",
+			"version": "8.11.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.11.0.tgz",
+			"integrity": "sha512-7SC8/v6cXbUriOs2UISN8Jho3ttnA8cRZgusLn15b8meb28prHnWg4t4oNSHIR3rYn0g7iiIg+pax2CtBnyffg==",
 			"engines": {
 				"node": ">=12"
 			},
@@ -1546,16 +1546,16 @@
 			"integrity": "sha512-d/MUkJYdOeKycmm75Arql4M5+UuXmf4cHdHKsyw1GcvnNgL6s77UkgSgJ8TE/rI5PYsnwYq5jkcWBLuN/MpQ1A=="
 		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "6.14.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.14.0.tgz",
-			"integrity": "sha512-1ZJBykBCXaSHG94vMMKmiHoL0MhNHKSVlcHVYZNw+BKxufhqQVTOawNpwwI1P5nIFZ/4jLVop0mcY6mJJDFNaw==",
+			"version": "6.15.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.15.0.tgz",
+			"integrity": "sha512-j5qoikQqPccq9QoBAupOP+CBu8BaJ8BLjaXSioDISeTZkVO3ig7oSIKh3H+rEpee7xCXtWwSB4KIL5l6hWZzpg==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/regexpp": "^4.5.1",
-				"@typescript-eslint/scope-manager": "6.14.0",
-				"@typescript-eslint/type-utils": "6.14.0",
-				"@typescript-eslint/utils": "6.14.0",
-				"@typescript-eslint/visitor-keys": "6.14.0",
+				"@typescript-eslint/scope-manager": "6.15.0",
+				"@typescript-eslint/type-utils": "6.15.0",
+				"@typescript-eslint/utils": "6.15.0",
+				"@typescript-eslint/visitor-keys": "6.15.0",
 				"debug": "^4.3.4",
 				"graphemer": "^1.4.0",
 				"ignore": "^5.2.4",
@@ -1581,15 +1581,15 @@
 			}
 		},
 		"node_modules/@typescript-eslint/parser": {
-			"version": "6.14.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.14.0.tgz",
-			"integrity": "sha512-QjToC14CKacd4Pa7JK4GeB/vHmWFJckec49FR4hmIRf97+KXole0T97xxu9IFiPxVQ1DBWrQ5wreLwAGwWAVQA==",
+			"version": "6.15.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.15.0.tgz",
+			"integrity": "sha512-MkgKNnsjC6QwcMdlNAel24jjkEO/0hQaMDLqP4S9zq5HBAUJNQB6y+3DwLjX7b3l2b37eNAxMPLwb3/kh8VKdA==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/scope-manager": "6.14.0",
-				"@typescript-eslint/types": "6.14.0",
-				"@typescript-eslint/typescript-estree": "6.14.0",
-				"@typescript-eslint/visitor-keys": "6.14.0",
+				"@typescript-eslint/scope-manager": "6.15.0",
+				"@typescript-eslint/types": "6.15.0",
+				"@typescript-eslint/typescript-estree": "6.15.0",
+				"@typescript-eslint/visitor-keys": "6.15.0",
 				"debug": "^4.3.4"
 			},
 			"engines": {
@@ -1609,13 +1609,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "6.14.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.14.0.tgz",
-			"integrity": "sha512-VT7CFWHbZipPncAZtuALr9y3EuzY1b1t1AEkIq2bTXUPKw+pHoXflGNG5L+Gv6nKul1cz1VH8fz16IThIU0tdg==",
+			"version": "6.15.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.15.0.tgz",
+			"integrity": "sha512-+BdvxYBltqrmgCNu4Li+fGDIkW9n//NrruzG9X1vBzaNK+ExVXPoGB71kneaVw/Jp+4rH/vaMAGC6JfMbHstVg==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.14.0",
-				"@typescript-eslint/visitor-keys": "6.14.0"
+				"@typescript-eslint/types": "6.15.0",
+				"@typescript-eslint/visitor-keys": "6.15.0"
 			},
 			"engines": {
 				"node": "^16.0.0 || >=18.0.0"
@@ -1626,13 +1626,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/type-utils": {
-			"version": "6.14.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.14.0.tgz",
-			"integrity": "sha512-x6OC9Q7HfYKqjnuNu5a7kffIYs3No30isapRBJl1iCHLitD8O0lFbRcVGiOcuyN837fqXzPZ1NS10maQzZMKqw==",
+			"version": "6.15.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.15.0.tgz",
+			"integrity": "sha512-CnmHKTfX6450Bo49hPg2OkIm/D/TVYV7jO1MCfPYGwf6x3GO0VU8YMO5AYMn+u3X05lRRxA4fWCz87GFQV6yVQ==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/typescript-estree": "6.14.0",
-				"@typescript-eslint/utils": "6.14.0",
+				"@typescript-eslint/typescript-estree": "6.15.0",
+				"@typescript-eslint/utils": "6.15.0",
 				"debug": "^4.3.4",
 				"ts-api-utils": "^1.0.1"
 			},
@@ -1653,9 +1653,9 @@
 			}
 		},
 		"node_modules/@typescript-eslint/types": {
-			"version": "6.14.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.14.0.tgz",
-			"integrity": "sha512-uty9H2K4Xs8E47z3SnXEPRNDfsis8JO27amp2GNCnzGETEW3yTqEIVg5+AI7U276oGF/tw6ZA+UesxeQ104ceA==",
+			"version": "6.15.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.15.0.tgz",
+			"integrity": "sha512-yXjbt//E4T/ee8Ia1b5mGlbNj9fB9lJP4jqLbZualwpP2BCQ5is6BcWwxpIsY4XKAhmdv3hrW92GdtJbatC6dQ==",
 			"dev": true,
 			"engines": {
 				"node": "^16.0.0 || >=18.0.0"
@@ -1666,13 +1666,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "6.14.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.14.0.tgz",
-			"integrity": "sha512-yPkaLwK0yH2mZKFE/bXkPAkkFgOv15GJAUzgUVonAbv0Hr4PK/N2yaA/4XQbTZQdygiDkpt5DkxPELqHguNvyw==",
+			"version": "6.15.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.15.0.tgz",
+			"integrity": "sha512-7mVZJN7Hd15OmGuWrp2T9UvqR2Ecg+1j/Bp1jXUEY2GZKV6FXlOIoqVDmLpBiEiq3katvj/2n2mR0SDwtloCew==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.14.0",
-				"@typescript-eslint/visitor-keys": "6.14.0",
+				"@typescript-eslint/types": "6.15.0",
+				"@typescript-eslint/visitor-keys": "6.15.0",
 				"debug": "^4.3.4",
 				"globby": "^11.1.0",
 				"is-glob": "^4.0.3",
@@ -1693,17 +1693,17 @@
 			}
 		},
 		"node_modules/@typescript-eslint/utils": {
-			"version": "6.14.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.14.0.tgz",
-			"integrity": "sha512-XwRTnbvRr7Ey9a1NT6jqdKX8y/atWG+8fAIu3z73HSP8h06i3r/ClMhmaF/RGWGW1tHJEwij1uEg2GbEmPYvYg==",
+			"version": "6.15.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.15.0.tgz",
+			"integrity": "sha512-eF82p0Wrrlt8fQSRL0bGXzK5nWPRV2dYQZdajcfzOD9+cQz9O7ugifrJxclB+xVOvWvagXfqS4Es7vpLP4augw==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.4.0",
 				"@types/json-schema": "^7.0.12",
 				"@types/semver": "^7.5.0",
-				"@typescript-eslint/scope-manager": "6.14.0",
-				"@typescript-eslint/types": "6.14.0",
-				"@typescript-eslint/typescript-estree": "6.14.0",
+				"@typescript-eslint/scope-manager": "6.15.0",
+				"@typescript-eslint/types": "6.15.0",
+				"@typescript-eslint/typescript-estree": "6.15.0",
 				"semver": "^7.5.4"
 			},
 			"engines": {
@@ -1718,12 +1718,12 @@
 			}
 		},
 		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "6.14.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.14.0.tgz",
-			"integrity": "sha512-fB5cw6GRhJUz03MrROVuj5Zm/Q+XWlVdIsFj+Zb1Hvqouc8t+XP2H5y53QYU/MGtd2dPg6/vJJlhoX3xc2ehfw==",
+			"version": "6.15.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.15.0.tgz",
+			"integrity": "sha512-1zvtdC1a9h5Tb5jU9x3ADNXO9yjP8rXlaoChu0DQX40vf5ACVpYIVIZhIMZ6d5sDXH7vq4dsZBT1fEGj8D2n2w==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.14.0",
+				"@typescript-eslint/types": "6.15.0",
 				"eslint-visitor-keys": "^3.4.1"
 			},
 			"engines": {
@@ -1741,13 +1741,13 @@
 			"dev": true
 		},
 		"node_modules/@vitest/expect": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.0.4.tgz",
-			"integrity": "sha512-/NRN9N88qjg3dkhmFcCBwhn/Ie4h064pY3iv7WLRsDJW7dXnEgeoa8W9zy7gIPluhz6CkgqiB3HmpIXgmEY5dQ==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.1.0.tgz",
+			"integrity": "sha512-9IE2WWkcJo2BR9eqtY5MIo3TPmS50Pnwpm66A6neb2hvk/QSLfPXBz2qdiwUOQkwyFuuXEUj5380CbwfzW4+/w==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/spy": "1.0.4",
-				"@vitest/utils": "1.0.4",
+				"@vitest/spy": "1.1.0",
+				"@vitest/utils": "1.1.0",
 				"chai": "^4.3.10"
 			},
 			"funding": {
@@ -1755,12 +1755,12 @@
 			}
 		},
 		"node_modules/@vitest/runner": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.0.4.tgz",
-			"integrity": "sha512-rhOQ9FZTEkV41JWXozFM8YgOqaG9zA7QXbhg5gy6mFOVqh4PcupirIJ+wN7QjeJt8S8nJRYuZH1OjJjsbxAXTQ==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.1.0.tgz",
+			"integrity": "sha512-zdNLJ00pm5z/uhbWF6aeIJCGMSyTyWImy3Fcp9piRGvueERFlQFbUwCpzVce79OLm2UHk9iwaMSOaU9jVHgNVw==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/utils": "1.0.4",
+				"@vitest/utils": "1.1.0",
 				"p-limit": "^5.0.0",
 				"pathe": "^1.1.1"
 			},
@@ -1796,9 +1796,9 @@
 			}
 		},
 		"node_modules/@vitest/snapshot": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.0.4.tgz",
-			"integrity": "sha512-vkfXUrNyNRA/Gzsp2lpyJxh94vU2OHT1amoD6WuvUAA12n32xeVZQ0KjjQIf8F6u7bcq2A2k969fMVxEsxeKYA==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.1.0.tgz",
+			"integrity": "sha512-5O/wyZg09V5qmNmAlUgCBqflvn2ylgsWJRRuPrnHEfDNT6tQpQ8O1isNGgo+VxofISHqz961SG3iVvt3SPK/QQ==",
 			"dev": true,
 			"dependencies": {
 				"magic-string": "^0.30.5",
@@ -1810,9 +1810,9 @@
 			}
 		},
 		"node_modules/@vitest/spy": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.0.4.tgz",
-			"integrity": "sha512-9ojTFRL1AJVh0hvfzAQpm0QS6xIS+1HFIw94kl/1ucTfGCaj1LV/iuJU4Y6cdR03EzPDygxTHwE1JOm+5RCcvA==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.1.0.tgz",
+			"integrity": "sha512-sNOVSU/GE+7+P76qYo+VXdXhXffzWZcYIPQfmkiRxaNCSPiLANvQx5Mx6ZURJ/ndtEkUJEpvKLXqAYTKEY+lTg==",
 			"dev": true,
 			"dependencies": {
 				"tinyspy": "^2.2.0"
@@ -1822,9 +1822,9 @@
 			}
 		},
 		"node_modules/@vitest/utils": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.0.4.tgz",
-			"integrity": "sha512-gsswWDXxtt0QvtK/y/LWukN7sGMYmnCcv1qv05CsY6cU/Y1zpGX1QuvLs+GO1inczpE6Owixeel3ShkjhYtGfA==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.1.0.tgz",
+			"integrity": "sha512-z+s510fKmYz4Y41XhNs3vcuFTFhcij2YF7F8VQfMEYAAUfqQh0Zfg7+w9xdgFGhPf3tX3TicAe+8BDITk6ampQ==",
 			"dev": true,
 			"dependencies": {
 				"diff-sequences": "^29.6.3",
@@ -2569,9 +2569,9 @@
 			}
 		},
 		"node_modules/dayjs": {
-			"version": "1.11.9",
-			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
-			"integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
+			"version": "1.11.10",
+			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+			"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
 		},
 		"node_modules/debug": {
 			"version": "4.3.4",
@@ -2897,15 +2897,15 @@
 			}
 		},
 		"node_modules/eslint": {
-			"version": "8.55.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.55.0.tgz",
-			"integrity": "sha512-iyUUAM0PCKj5QpwGfmCAG9XXbZCWsqP/eWAWrG/W0umvjuLRBECwSFdt+rCntju0xEH7teIABPwXpahftIaTdA==",
+			"version": "8.56.0",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz",
+			"integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.2.0",
 				"@eslint-community/regexpp": "^4.6.1",
 				"@eslint/eslintrc": "^2.1.4",
-				"@eslint/js": "8.55.0",
+				"@eslint/js": "8.56.0",
 				"@humanwhocodes/config-array": "^0.11.13",
 				"@humanwhocodes/module-importer": "^1.0.1",
 				"@nodelib/fs.walk": "^1.2.8",
@@ -6432,11 +6432,11 @@
 			}
 		},
 		"node_modules/svelte-time": {
-			"version": "0.8.0",
-			"resolved": "https://registry.npmjs.org/svelte-time/-/svelte-time-0.8.0.tgz",
-			"integrity": "sha512-V0LBpJhYV2Q+jqiJ94ITAo51P6RIhrHQpDt3LCSk8PXfL2UMvSMlDzkqHq8mdKqmBCRZURnXhpynN03GQa/G/A==",
+			"version": "0.8.2",
+			"resolved": "https://registry.npmjs.org/svelte-time/-/svelte-time-0.8.2.tgz",
+			"integrity": "sha512-sBLLrWMMInx5iidGlbtlCBAu8CzSixdqOkbhizdalULXBvYMPACp0GtzmyBLEa77hbaMVySZzApIaNG4B4OVmg==",
 			"dependencies": {
-				"dayjs": "^1.11.9"
+				"dayjs": "^1.11.10"
 			}
 		},
 		"node_modules/svoast": {
@@ -6572,9 +6572,9 @@
 			}
 		},
 		"node_modules/tailwind-variants": {
-			"version": "0.1.18",
-			"resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.1.18.tgz",
-			"integrity": "sha512-yoydMYm3FbZRw7wak+E2sqwYv2Uo3YWRqVZR03DGqDGm0ytzDrEnWO/Q/GMHdhaz8adOvycKw/bwCgQFCfmfhg==",
+			"version": "0.1.19",
+			"resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.1.19.tgz",
+			"integrity": "sha512-D9Yf5WqsxodnCtjZt6KifEoKwW8rTURXQV03KRKlojITQM5gV1vPVWufWNiIvd/ptC3QybYFpwmHK9cs4Ei08Q==",
 			"dependencies": {
 				"tailwind-merge": "^1.14.0"
 			},
@@ -6596,9 +6596,9 @@
 			}
 		},
 		"node_modules/tailwindcss": {
-			"version": "3.3.6",
-			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
-			"integrity": "sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==",
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
+			"integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==",
 			"dependencies": {
 				"@alloc/quick-lru": "^5.2.0",
 				"arg": "^5.0.2",
@@ -7055,9 +7055,9 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "5.0.9",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.9.tgz",
-			"integrity": "sha512-wVqMd5kp28QWGgfYPDfrj771VyHTJ4UDlCteLH7bJDGDEamaz5hV8IX6h1brSGgnnyf9lI2RnzXq/JmD0c2wwg==",
+			"version": "5.0.10",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz",
+			"integrity": "sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==",
 			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.19.3",
@@ -7110,9 +7110,9 @@
 			}
 		},
 		"node_modules/vite-node": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.0.4.tgz",
-			"integrity": "sha512-9xQQtHdsz5Qn8hqbV7UKqkm8YkJhzT/zr41Dmt5N7AlD8hJXw/Z7y0QiD5I8lnTthV9Rvcvi0QW7PI0Fq83ZPg==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.1.0.tgz",
+			"integrity": "sha512-jV48DDUxGLEBdHCQvxL1mEh7+naVy+nhUUUaPAZLd3FJgXuxQiewHcfeZebbJ6onDqNGkP4r3MhQ342PRlG81Q==",
 			"dev": true,
 			"dependencies": {
 				"cac": "^6.7.14",
@@ -7146,16 +7146,16 @@
 			}
 		},
 		"node_modules/vitest": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/vitest/-/vitest-1.0.4.tgz",
-			"integrity": "sha512-s1GQHp/UOeWEo4+aXDOeFBJwFzL6mjycbQwwKWX2QcYfh/7tIerS59hWQ20mxzupTJluA2SdwiBuWwQHH67ckg==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/vitest/-/vitest-1.1.0.tgz",
+			"integrity": "sha512-oDFiCrw7dd3Jf06HoMtSRARivvyjHJaTxikFxuqJjO76U436PqlVw1uLn7a8OSPrhSfMGVaRakKpA2lePdw79A==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/expect": "1.0.4",
-				"@vitest/runner": "1.0.4",
-				"@vitest/snapshot": "1.0.4",
-				"@vitest/spy": "1.0.4",
-				"@vitest/utils": "1.0.4",
+				"@vitest/expect": "1.1.0",
+				"@vitest/runner": "1.1.0",
+				"@vitest/snapshot": "1.1.0",
+				"@vitest/spy": "1.1.0",
+				"@vitest/utils": "1.1.0",
 				"acorn-walk": "^8.3.0",
 				"cac": "^6.7.14",
 				"chai": "^4.3.10",
@@ -7170,7 +7170,7 @@
 				"tinybench": "^2.5.1",
 				"tinypool": "^0.8.1",
 				"vite": "^5.0.0",
-				"vite-node": "1.0.4",
+				"vite-node": "1.1.0",
 				"why-is-node-running": "^2.2.2"
 			},
 			"bin": {
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index 9bbf2a1825..3b6e6ea6fe 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -22,14 +22,14 @@
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.40.1",
-		"@sveltejs/adapter-static": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/kit": "^2.0.4",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"@typescript-eslint/eslint-plugin": "^6.14.0",
-		"@typescript-eslint/parser": "^6.14.0",
+		"@typescript-eslint/eslint-plugin": "^6.15.0",
+		"@typescript-eslint/parser": "^6.15.0",
 		"autoprefixer": "^10.4.16",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.55.0",
+		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.35.1",
 		"npm-run-all": "^4.1.5",
@@ -42,15 +42,15 @@
 		"swagger-typescript-api": "^13.0.3",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
-		"vite": "^5.0.9",
-		"vitest": "^1.0.4"
+		"vite": "^5.0.10",
+		"vitest": "^1.1.0"
 	},
 	"dependencies": {
 		"@exceptionless/browser": "^3.0.5",
-		"@iconify-json/mdi": "^1.1.62",
-		"@tanstack/svelte-query": "^5.13.4",
-		"@tanstack/svelte-query-devtools": "^5.13.5",
-		"@tanstack/svelte-table": "^8.10.7",
+		"@iconify-json/mdi": "^1.1.63",
+		"@tanstack/svelte-query": "^5.14.2",
+		"@tanstack/svelte-query-devtools": "^5.14.2",
+		"@tanstack/svelte-table": "^8.11.0",
 		"@web3-storage/parse-link-header": "^3.1.0",
 		"bits-ui": "^0.11.8",
 		"class-validator": "^0.14.0",
@@ -62,11 +62,11 @@
 		"radix-icons-svelte": "^1.2.1",
 		"svelte-legos": "^0.2.2",
 		"svelte-local-storage-store": "^0.6.4",
-		"svelte-time": "^0.8.0",
+		"svelte-time": "^0.8.2",
 		"svoast": "^2.3.0",
 		"tailwind-merge": "^2.1.0",
-		"tailwind-variants": "^0.1.18",
-		"tailwindcss": "^3.3.6",
+		"tailwind-variants": "^0.1.19",
+		"tailwindcss": "^3.4.0",
 		"unplugin-icons": "^0.18.1"
 	},
 	"type": "module"

From 1159eb8ddfc0b5ed2870baf5bb573c6611116ba7 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Thu, 21 Dec 2023 21:53:38 -0600
Subject: [PATCH 03/35] Early WIP, just getting data table compiling lots more
 todo.

---
 .../data-table/data-table-checkbox.svelte     |   8 +
 .../data-table-column-header.svelte           |  67 ++++++
 .../data-table-faceted-filter.svelte          | 126 +++++++++++
 .../data-table/data-table-pagination.svelte   |  93 ++++++++
 .../data-table-priority-cell.svelte           |  34 +++
 .../data-table/data-table-row-actions.svelte  |  67 ++++++
 .../data-table/data-table-status-cell.svelte  |  50 ++++
 .../data-table/data-table-title-cell.svelte   |  31 +++
 .../data-table/data-table-toolbar.svelte      | 117 ++++++++++
 .../data-table/data-table-view-options.svelte |  34 +++
 .../components/data-table/data-table.svelte   |  73 ++++++
 .../src/lib/components/data-table/index.ts    |  10 +
 .../events/table/EventsDataTable.svelte       | 213 ++++++++++++++++++
 .../src/lib/components/table/Table.svelte     |   4 +-
 .../ClientApp/src/routes/(app)/+page.svelte   |   7 +-
 15 files changed, 931 insertions(+), 3 deletions(-)
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-checkbox.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-column-header.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-priority-cell.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-row-actions.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-status-cell.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-title-cell.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-toolbar.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-view-options.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-checkbox.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-checkbox.svelte
new file mode 100644
index 0000000000..e9e1d4f103
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-checkbox.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Checkbox } from '$comp/ui/checkbox';
+	import type { Writable } from 'svelte/store';
+
+	export let checked: Writable<boolean>;
+</script>
+
+<Checkbox bind:checked={$checked} {...$$restProps} />
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-column-header.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-column-header.svelte
new file mode 100644
index 0000000000..b648bdb523
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-column-header.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { ArrowDown, ArrowUp, CaretSort } from 'radix-icons-svelte';
+	import { Button } from '$comp/ui/button';
+	import * as DropdownMenu from '$comp/ui/dropdown-menu';
+	import { cn } from '$lib/utils';
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let props: {
+		sort: {
+			order: 'desc' | 'asc' | undefined;
+			toggle: (event: Event) => void;
+			clear: () => void;
+			disabled: boolean;
+		};
+	} = {
+		sort: {
+			order: undefined,
+			toggle: () => {},
+			clear: () => {},
+			disabled: false
+		}
+	};
+
+	function handleAscSort(e: Event) {
+		if (props.sort.order === 'asc') {
+			return;
+		}
+		props.sort.toggle(e);
+	}
+
+	function handleDescSort(e: Event) {
+		if (props.sort.order === 'desc') {
+			return;
+		}
+		props.sort.toggle(e);
+	}
+</script>
+
+{#if !props.sort.disabled}
+	<div class={cn('flex items-center', className)}>
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger asChild let:builder>
+				<Button
+					variant="ghost"
+					builders={[builder]}
+					class="-ml-3 h-8 data-[state=open]:bg-accent"
+				>
+					<slot />
+					{#if props.sort.order === 'desc'}
+						<ArrowDown class="w-4 h-4 ml-2" />
+					{:else if props.sort.order === 'asc'}
+						<ArrowUp class="w-4 h-4 ml-2" />
+					{:else}
+						<CaretSort class="w-4 h-4 ml-2" />
+					{/if}
+				</Button>
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content align="start">
+				<DropdownMenu.Item on:click={handleAscSort}>Asc</DropdownMenu.Item>
+				<DropdownMenu.Item on:click={handleDescSort}>Desc</DropdownMenu.Item>
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	</div>
+{:else}
+	<slot />
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte
new file mode 100644
index 0000000000..24a40171aa
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+	import {
+		PlusCircled,
+		Check,
+		CheckCircled,
+		Circle,
+		CrossCircled,
+		QuestionMarkCircled,
+		Stopwatch
+	} from 'radix-icons-svelte';
+	import * as Command from '$comp/ui/command';
+	import * as Popover from '$comp/ui/popover';
+	import { Button } from '$comp/ui/button';
+	import { cn } from '$lib/utils';
+	import Separator from '$comp/ui/separator/separator.svelte';
+	import Badge from '$comp/ui/badge/badge.svelte';
+
+	const statuses = [
+		{
+			value: 'backlog',
+			label: 'Backlog',
+			icon: QuestionMarkCircled
+		},
+		{
+			value: 'todo',
+			label: 'Todo',
+			icon: Circle
+		},
+		{
+			value: 'in progress',
+			label: 'In Progress',
+			icon: Stopwatch
+		},
+		{
+			value: 'done',
+			label: 'Done',
+			icon: CheckCircled
+		},
+		{
+			value: 'canceled',
+			label: 'Canceled',
+			icon: CrossCircled
+		}
+	];
+
+	export let filterValues: string[] = [];
+	export let title: string;
+	export let options = [] as typeof statuses;
+
+	let open = false;
+
+	const handleSelect = (currentValue: string) => {
+		if (Array.isArray(filterValues) && filterValues.includes(currentValue)) {
+			filterValues = filterValues.filter((v) => v !== currentValue);
+		} else {
+			filterValues = [...(Array.isArray(filterValues) ? filterValues : []), currentValue];
+		}
+	};
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger asChild let:builder>
+		<Button builders={[builder]} variant="outline" size="sm" class="h-8 border-dashed">
+			<PlusCircled class="w-4 h-4 mr-2" />
+			{title}
+
+			{#if filterValues.length > 0}
+				<Separator orientation="vertical" class="h-4 mx-2" />
+				<Badge variant="secondary" class="px-1 font-normal rounded-sm lg:hidden">
+					{filterValues.length}
+				</Badge>
+				<div class="hidden space-x-1 lg:flex">
+					{#if filterValues.length > 2}
+						<Badge variant="secondary" class="px-1 font-normal rounded-sm">
+							{filterValues.length} Selected
+						</Badge>
+					{:else}
+						{#each filterValues as option}
+							<Badge variant="secondary" class="px-1 font-normal rounded-sm">
+								{option}
+							</Badge>
+						{/each}
+					{/if}
+				</div>
+			{/if}
+		</Button>
+	</Popover.Trigger>
+	<Popover.Content class="w-[200px] p-0" align="start" side="bottom">
+		<Command.Root>
+			<Command.Input placeholder={title} />
+			<Command.List>
+				<Command.Empty>No results found.</Command.Empty>
+				<Command.Group>
+					{#each options as option}
+						<Command.Item value={option.value} onSelect={handleSelect}>
+							<div
+								class={cn(
+									'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+									filterValues.includes(option.value)
+										? 'bg-primary text-primary-foreground'
+										: 'opacity-50 [&_svg]:invisible'
+								)}
+							>
+								<Check className={cn('h-4 w-4')} />
+							</div>
+							<span>
+								{option.label}
+							</span>
+						</Command.Item>
+					{/each}
+				</Command.Group>
+				{#if filterValues.length > 0}
+					<Command.Separator />
+					<Command.Item
+						class="justify-center text-center"
+						onSelect={() => {
+							filterValues = [];
+						}}
+					>
+						Clear filters
+					</Command.Item>
+				{/if}
+			</Command.List>
+		</Command.Root>
+	</Popover.Content>
+</Popover.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte
new file mode 100644
index 0000000000..f7cde5d383
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { derived, writable, type Readable } from 'svelte/store';
+	import type { Table } from '@tanstack/svelte-table';
+
+	import { Button } from '$comp/ui/button';
+	import {
+		ChevronRight,
+		ChevronLeft,
+		DoubleArrowRight,
+		DoubleArrowLeft
+	} from 'radix-icons-svelte';
+	import * as Select from '$comp/ui/select';
+
+	type TData = $$Generic;
+	export let table: Readable<Table<TData>>;
+
+	const rows = derived(table, ($table) => $table.getRowModel().rows);
+	const selectedDataIds = writable([]); // TODO
+	const pageSize = writable(20); // TODO
+	const pageIndex = writable(1); // TODO
+	const pageCount = writable(10); // TODO
+	const hasPreviousPage = writable(false); // TODO
+	const hasNextPage = writable(false); // TODO
+	const pageRows = writable([]); // TODO
+</script>
+
+<div class="flex items-center justify-between px-2">
+	<div class="flex-1 text-sm text-muted-foreground">
+		{Object.keys($selectedDataIds).length} of{' '}
+		{$rows.length} row(s) selected.
+	</div>
+	<div class="flex items-center space-x-6 lg:space-x-8">
+		<div class="flex items-center space-x-2">
+			<p class="text-sm font-medium">Rows per page</p>
+			<Select.Root
+				onSelectedChange={(selected) => pageSize.set(Number(selected?.value))}
+				selected={{ value: 10, label: '10' }}
+			>
+				<Select.Trigger class="w-[180px]">
+					<Select.Value placeholder="Select page size" />
+				</Select.Trigger>
+				<Select.Content>
+					<Select.Item value="10">10</Select.Item>
+					<Select.Item value="20">20</Select.Item>
+					<Select.Item value="30">30</Select.Item>
+					<Select.Item value="40">40</Select.Item>
+					<Select.Item value="50">50</Select.Item>
+				</Select.Content>
+			</Select.Root>
+		</div>
+		<div class="flex w-[100px] items-center justify-center text-sm font-medium">
+			Page {$pageIndex + 1} of {$pageCount}
+		</div>
+		<div class="flex items-center space-x-2">
+			<Button
+				variant="outline"
+				class="hidden w-8 h-8 p-0 lg:flex"
+				on:click={() => ($pageIndex = 0)}
+				disabled={!$hasPreviousPage}
+			>
+				<span class="sr-only">Go to first page</span>
+				<DoubleArrowLeft size={15} />
+			</Button>
+			<Button
+				variant="outline"
+				class="w-8 h-8 p-0"
+				on:click={() => ($pageIndex = $pageIndex - 1)}
+				disabled={!$hasPreviousPage}
+			>
+				<span class="sr-only">Go to previous page</span>
+				<ChevronLeft size={15} />
+			</Button>
+			<Button
+				variant="outline"
+				class="w-8 h-8 p-0"
+				disabled={!$hasNextPage}
+				on:click={() => ($pageIndex = $pageIndex + 1)}
+			>
+				<span class="sr-only">Go to next page</span>
+				<ChevronRight size={15} />
+			</Button>
+			<Button
+				variant="outline"
+				class="hidden w-8 h-8 p-0 lg:flex"
+				disabled={!$hasNextPage}
+				on:click={() => ($pageIndex = Math.ceil($rows.length / $pageRows.length) - 1)}
+			>
+				<span class="sr-only">Go to last page</span>
+				<DoubleArrowRight size={15} />
+			</Button>
+		</div>
+	</div>
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-priority-cell.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-priority-cell.svelte
new file mode 100644
index 0000000000..6610f43c37
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-priority-cell.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { ArrowDown, ArrowRight, ArrowUp } from 'radix-icons-svelte';
+
+	const priorities = [
+		{
+			label: 'Low',
+			value: 'low',
+			icon: ArrowDown
+		},
+		{
+			label: 'Medium',
+			value: 'medium',
+			icon: ArrowRight
+		},
+		{
+			label: 'High',
+			value: 'high',
+			icon: ArrowUp
+		}
+	];
+
+	export let value: string;
+	const priority = priorities.find((priority) => priority.value === value);
+	const Icon = priority?.icon;
+</script>
+
+{#if priority}
+	<div class="flex items-center">
+		{#if Icon}
+			<Icon class="w-4 h-4 mr-2 text-muted-foreground" />
+		{/if}
+		<span>{priority.label}</span>
+	</div>
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-row-actions.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-row-actions.svelte
new file mode 100644
index 0000000000..0f48578d03
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-row-actions.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { DotsHorizontal } from 'radix-icons-svelte';
+	import { Button } from '$comp/ui/button';
+	import * as DropdownMenu from '$comp/ui/dropdown-menu';
+
+	type Task = {
+		id: string;
+		title: string;
+		status: string;
+		label: string;
+		priority: string;
+	};
+
+	const labels = [
+		{
+			value: 'bug',
+			label: 'Bug'
+		},
+		{
+			value: 'feature',
+			label: 'Feature'
+		},
+		{
+			value: 'documentation',
+			label: 'Documentation'
+		}
+	];
+
+	export let row: Task;
+	const task = row; // taskSchema.parse(row);
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger asChild let:builder>
+		<Button
+			variant="ghost"
+			builders={[builder]}
+			class="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
+		>
+			<DotsHorizontal class="w-4 h-4" />
+			<span class="sr-only">Open menu</span>
+		</Button>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content class="w-[160px]" align="end">
+		<DropdownMenu.Item>Edit</DropdownMenu.Item>
+		<DropdownMenu.Item>Make a copy</DropdownMenu.Item>
+		<DropdownMenu.Item>Favorite</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Sub>
+			<DropdownMenu.SubTrigger>Labels</DropdownMenu.SubTrigger>
+			<DropdownMenu.SubContent>
+				<DropdownMenu.RadioGroup value={task.label}>
+					{#each labels as label}
+						<DropdownMenu.RadioItem value={label.value}>
+							{label.label}
+						</DropdownMenu.RadioItem>
+					{/each}
+				</DropdownMenu.RadioGroup>
+			</DropdownMenu.SubContent>
+		</DropdownMenu.Sub>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item>
+			Delete
+			<DropdownMenu.Shortcut>⌘⌫</DropdownMenu.Shortcut>
+		</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-status-cell.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-status-cell.svelte
new file mode 100644
index 0000000000..6611366fe7
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-status-cell.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import {
+		QuestionMarkCircled,
+		Circle,
+		Stopwatch,
+		CheckCircled,
+		CrossCircled
+	} from 'radix-icons-svelte';
+
+	const statuses = [
+		{
+			value: 'backlog',
+			label: 'Backlog',
+			icon: QuestionMarkCircled
+		},
+		{
+			value: 'todo',
+			label: 'Todo',
+			icon: Circle
+		},
+		{
+			value: 'in progress',
+			label: 'In Progress',
+			icon: Stopwatch
+		},
+		{
+			value: 'done',
+			label: 'Done',
+			icon: CheckCircled
+		},
+		{
+			value: 'canceled',
+			label: 'Canceled',
+			icon: CrossCircled
+		}
+	];
+
+	export let value: string;
+	const status = statuses.find((status) => status.value === value);
+	const Icon = status?.icon;
+</script>
+
+{#if status}
+	<div class="flex w-[100px] items-center">
+		{#if Icon}
+			<Icon class="w-4 h-4 mr-2 text-muted-foreground" />
+		{/if}
+		<span>{status.label}</span>
+	</div>
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-title-cell.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-title-cell.svelte
new file mode 100644
index 0000000000..f0a70a1f40
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-title-cell.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Badge } from '$comp/ui/badge';
+
+	const labels = [
+		{
+			value: 'bug',
+			label: 'Bug'
+		},
+		{
+			value: 'feature',
+			label: 'Feature'
+		},
+		{
+			value: 'documentation',
+			label: 'Documentation'
+		}
+	];
+
+	export let value: string;
+	export let labelValue: string;
+	const label = labels.find((label) => label.value === labelValue);
+</script>
+
+<div class="flex space-x-2">
+	{#if label}
+		<Badge variant="outline">{label.label}</Badge>
+	{/if}
+	<span class="max-w-[500px] truncate font-medium">
+		{value}
+	</span>
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-toolbar.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-toolbar.svelte
new file mode 100644
index 0000000000..2671394c25
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-toolbar.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import type { Table } from '@tanstack/svelte-table';
+
+	import { Input } from '$comp/ui/input';
+	import { DataTableFacetedFilter, DataTableViewOptions } from '.';
+	import Button from '$comp/ui/button/button.svelte';
+	import {
+		ArrowDown,
+		ArrowRight,
+		ArrowUp,
+		CheckCircled,
+		Circle,
+		Cross2,
+		CrossCircled,
+		QuestionMarkCircled,
+		Stopwatch
+	} from 'radix-icons-svelte';
+
+	import { writable, type Readable, type Writable } from 'svelte/store';
+
+	const statuses = [
+		{
+			value: 'backlog',
+			label: 'Backlog',
+			icon: QuestionMarkCircled
+		},
+		{
+			value: 'todo',
+			label: 'Todo',
+			icon: Circle
+		},
+		{
+			value: 'in progress',
+			label: 'In Progress',
+			icon: Stopwatch
+		},
+		{
+			value: 'done',
+			label: 'Done',
+			icon: CheckCircled
+		},
+		{
+			value: 'canceled',
+			label: 'Canceled',
+			icon: CrossCircled
+		}
+	];
+
+	const priorities = [
+		{
+			label: 'Low',
+			value: 'low',
+			icon: ArrowDown
+		},
+		{
+			label: 'Medium',
+			value: 'medium',
+			icon: ArrowRight
+		},
+		{
+			label: 'High',
+			value: 'high',
+			icon: ArrowUp
+		}
+	];
+
+	type TData = $$Generic;
+	export let table: Readable<Table<TData>>;
+
+	const filterValue: Writable<string> = writable('');
+	const filterValues: Writable<{
+		status: string[];
+		priority: string[];
+	}> = writable({
+		status: [],
+		priority: []
+	});
+
+	$: showReset = Object.values($filterValues).some((v) => v.length > 0);
+</script>
+
+<div class="flex items-center justify-between">
+	<div class="flex items-center flex-1 space-x-2">
+		<Input
+			placeholder="Filter tasks..."
+			class="h-8 w-[150px] lg:w-[250px]"
+			type="text"
+			bind:value={$filterValue}
+		/>
+
+		<DataTableFacetedFilter
+			bind:filterValues={$filterValues.status}
+			title="Status"
+			options={statuses}
+		/>
+		<DataTableFacetedFilter
+			bind:filterValues={$filterValues.priority}
+			title="Priority"
+			options={priorities}
+		/>
+		{#if showReset}
+			<Button
+				on:click={() => {
+					$filterValues.status = [];
+					$filterValues.priority = [];
+				}}
+				variant="ghost"
+				class="h-8 px-2 lg:px-3"
+			>
+				Reset
+				<Cross2 class="w-4 h-4 ml-2" />
+			</Button>
+		{/if}
+	</div>
+
+	<DataTableViewOptions {table} />
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-view-options.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-view-options.svelte
new file mode 100644
index 0000000000..b3e5725317
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-view-options.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Readable } from 'svelte/store';
+	import { MixerHorizontal } from 'radix-icons-svelte'; // TODO replace with ViewColumnIcon
+	import { Button } from '$comp/ui/button';
+	import * as DropdownMenu from '$comp/ui/dropdown-menu';
+
+	import type { Table } from '@tanstack/svelte-table';
+
+	type TData = $$Generic;
+	export let table: Readable<Table<TData>>;
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger asChild let:builder>
+		<Button variant="outline" size="sm" class="hidden h-8 ml-auto lg:flex" builders={[builder]}>
+			<MixerHorizontal class="w-4 h-4 mr-2" />
+			View
+		</Button>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content>
+		<DropdownMenu.Label>Toggle columns</DropdownMenu.Label>
+		<DropdownMenu.Separator />
+		{#each $table.getAllLeafColumns() as column}
+			{#if column.getCanHide()}
+				<DropdownMenu.CheckboxItem
+					checked={column.getIsVisible()}
+					on:click={() => column.toggleVisibility()}
+				>
+					{column.columnDef.header}
+				</DropdownMenu.CheckboxItem>
+			{/if}
+		{/each}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table.svelte
new file mode 100644
index 0000000000..e9d5cd63ac
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { type Readable } from 'svelte/store';
+	import * as Table from '$comp/ui/table';
+	import { flexRender, type Table as SvelteTable } from '@tanstack/svelte-table';
+
+	import { DataTableColumnHeader, DataTableToolbar, DataTablePagination } from '.';
+
+	type TData = $$Generic;
+	export let table: Readable<SvelteTable<TData>>;
+</script>
+
+<div class="space-y-4">
+	<DataTableToolbar {table} />
+	<div class="border rounded-md">
+		<Table.Root>
+			<Table.Header>
+				{#each $table.getHeaderGroups() as headerGroup}
+					<Table.Row>
+						{#each headerGroup.headers as header}
+							<Table.Head>
+								{#if header.column.columnDef.id !== 'select' && header.column.columnDef.id !== 'actions'}
+									<DataTableColumnHeader
+										><svelte:component
+											this={flexRender(
+												header.column.columnDef.header,
+												header.getContext()
+											)}
+										/></DataTableColumnHeader
+									>
+								{:else}
+									<svelte:component
+										this={flexRender(
+											header.column.columnDef.header,
+											header.getContext()
+										)}
+									/>
+								{/if}
+							</Table.Head>
+						{/each}
+					</Table.Row>
+				{/each}
+			</Table.Header>
+			<Table.Body>
+				{#each $table.getRowModel().rows as row}
+					<Table.Row>
+						{#each row.getVisibleCells() as cell}
+							<Table.Cell>
+								{#if cell.id === 'task'}
+									<div class="w-[80px]">
+										<svelte:component
+											this={flexRender(
+												cell.column.columnDef.cell,
+												cell.getContext()
+											)}
+										/>
+									</div>
+								{:else}
+									<svelte:component
+										this={flexRender(
+											cell.column.columnDef.cell,
+											cell.getContext()
+										)}
+									/>
+								{/if}
+							</Table.Cell>
+						{/each}
+					</Table.Row>
+				{/each}
+			</Table.Body>
+		</Table.Root>
+	</div>
+	<DataTablePagination {table} />
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
new file mode 100644
index 0000000000..d2a7b5d6a7
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
@@ -0,0 +1,10 @@
+export { default as DataTableCheckbox } from './data-table-checkbox.svelte';
+export { default as DataTableTitleCell } from './data-table-title-cell.svelte';
+export { default as DataTableStatusCell } from './data-table-status-cell.svelte';
+export { default as DataTableRowActions } from './data-table-row-actions.svelte';
+export { default as DataTablePriorityCell } from './data-table-priority-cell.svelte';
+export { default as DataTableColumnHeader } from './data-table-column-header.svelte';
+export { default as DataTableToolbar } from './data-table-toolbar.svelte';
+export { default as DataTablePagination } from './data-table-pagination.svelte';
+export { default as DataTableViewOptions } from './data-table-view-options.svelte';
+export { default as DataTableFacetedFilter } from './data-table-faceted-filter.svelte';
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
new file mode 100644
index 0000000000..71e87e11e8
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -0,0 +1,213 @@
+<script lang="ts">
+	import { writable, type Readable } from 'svelte/store';
+	import {
+		createSvelteTable,
+		flexRender,
+		getCoreRowModel,
+		type ColumnDef,
+		type TableOptions,
+		type Updater,
+		type VisibilityState,
+		type ColumnSort
+	} from '@tanstack/svelte-table';
+	import type {
+		EventSummaryModel,
+		GetEventsMode,
+		IGetEventsParams,
+		StackSummaryModel,
+		SummaryModel,
+		SummaryTemplateKeys
+	} from '$lib/models/api';
+	import Summary from '$comp/events/summary/Summary.svelte';
+	import { nameof } from '$lib/utils';
+	import NumberFormatter from '$comp/formatters/Number.svelte';
+	import EventsUserIdentitySummaryColumn from './EventsUserIdentitySummaryColumn.svelte';
+	import {
+		type FetchClientResponse,
+		globalFetchClient as api,
+		globalLoading as loading
+	} from '$api/FetchClient';
+	import { persisted } from 'svelte-local-storage-store';
+	import TimeAgo from '$comp/formatters/TimeAgo.svelte';
+	import StackUsersSummaryColumn from './StackUsersSummaryColumn.svelte';
+	import CustomEventMessage from '$comp/messaging/CustomEventMessage.svelte';
+	import DataTable from '$comp/data-table/data-table.svelte';
+
+	export let mode: GetEventsMode = 'summary';
+	export let filter: Readable<string>;
+	export let time: Readable<string>;
+
+	const defaultColumns: ColumnDef<SummaryModel<SummaryTemplateKeys>>[] = [
+		{
+			header: 'Summary',
+			enableHiding: false,
+			cell: (prop) => flexRender(Summary, { summary: prop.row.original })
+		}
+	];
+
+	const isEventSummary = mode === 'summary';
+	if (isEventSummary) {
+		defaultColumns.push(
+			{
+				id: 'user',
+				header: 'User',
+				enableSorting: false,
+				meta: {
+					class: 'w-28'
+				},
+				cell: (prop) =>
+					flexRender(EventsUserIdentitySummaryColumn, { summary: prop.row.original })
+			},
+			{
+				id: 'date',
+				header: 'Date',
+				accessorKey: nameof<EventSummaryModel<SummaryTemplateKeys>>('date'),
+				meta: {
+					class: 'w-36'
+				},
+				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
+			}
+		);
+	} else {
+		defaultColumns.push(
+			{
+				id: 'users',
+				header: 'Users',
+				enableSorting: false,
+				meta: {
+					class: 'w-24'
+				},
+				cell: (prop) => flexRender(StackUsersSummaryColumn, { summary: prop.row.original })
+			},
+			{
+				id: 'events',
+				header: 'Events',
+				enableSorting: false,
+				meta: {
+					class: 'w-24'
+				},
+				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('total'),
+				cell: (prop) => flexRender(NumberFormatter, { value: prop.getValue() as number })
+			},
+			{
+				id: 'first',
+				header: 'First',
+				enableSorting: false,
+				meta: {
+					class: 'w-36'
+				},
+				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('first_occurrence'),
+				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
+			},
+			{
+				id: 'last',
+				header: 'Last',
+				enableSorting: false,
+				meta: {
+					class: 'w-36'
+				},
+				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('last_occurrence'),
+				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
+			}
+		);
+	}
+
+	const columnVisibility = persisted('events-column-visibility', <VisibilityState>{});
+	const setColumnVisibility = (updaterOrValue: Updater<VisibilityState>) => {
+		if (updaterOrValue instanceof Function) {
+			columnVisibility.update(() => updaterOrValue($columnVisibility));
+		} else {
+			columnVisibility.update(() => updaterOrValue);
+		}
+
+		options.update((old) => ({
+			...old,
+			state: {
+				...old.state,
+				...{ columnVisibility: $columnVisibility }
+			}
+		}));
+	};
+
+	let sorting: ColumnSort[] = [
+		{
+			id: 'date',
+			desc: true
+		}
+	];
+	const setSorting = (updaterOrValue: Updater<ColumnSort[]>) => {
+		if (updaterOrValue instanceof Function) {
+			sorting = updaterOrValue(sorting);
+		} else {
+			sorting = updaterOrValue;
+		}
+
+		options.update((old) => ({
+			...old,
+			state: {
+				...old.state,
+				sorting
+			}
+		}));
+
+		parameters.update((params) => ({
+			...params,
+			before: undefined,
+			after: undefined,
+			sort:
+				sorting.length > 0
+					? sorting.map((sort) => `${sort.desc ? '-' : ''}${sort.id}`).join(',')
+					: undefined
+		}));
+	};
+
+	const options = writable<TableOptions<SummaryModel<SummaryTemplateKeys>>>({
+		columns: defaultColumns,
+		data: [],
+		enableSortingRemoval: false,
+		manualSorting: true,
+		state: {
+			columnVisibility: $columnVisibility,
+			sorting
+		},
+		onColumnVisibilityChange: setColumnVisibility,
+		onSortingChange: setSorting,
+		getCoreRowModel: getCoreRowModel(),
+		getRowId: (originalRow) => originalRow.id
+	});
+
+	const table = createSvelteTable<SummaryModel<SummaryTemplateKeys>>(options);
+
+	let response: FetchClientResponse<EventSummaryModel<SummaryTemplateKeys>[]>;
+	const parameters = writable<IGetEventsParams>({ mode });
+	parameters.subscribe(async () => await loadData());
+	filter.subscribe(async () => await loadData());
+	time.subscribe(async () => await loadData());
+
+	async function loadData() {
+		if ($loading) {
+			return;
+		}
+
+		response = await api.getJSON<EventSummaryModel<SummaryTemplateKeys>[]>('events', {
+			params: {
+				mode: 'summary',
+				filter: $filter,
+				time: $time,
+				...$parameters
+			}
+		});
+
+		if (response.ok) {
+			options.update((options) => ({
+				...options,
+				data: response.data || []
+			}));
+			if (response.meta?.total) total = response.meta.total as number;
+		}
+	}
+</script>
+
+<CustomEventMessage type="refresh" on:message={loadData}></CustomEventMessage>
+
+<DataTable {table}></DataTable>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/table/Table.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/table/Table.svelte
index c8e4eb3ece..d677f625c9 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/table/Table.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/table/Table.svelte
@@ -66,14 +66,14 @@
 					{/each}
 				</Table.Header>
 				<Table.Body>
-					<Table.Row class="hidden only:table-row text-center">
+					<Table.Row class="hidden text-center only:table-row">
 						<Table.Cell colspan={$table.getVisibleLeafColumns().length}>
 							No data was found with the current filter.
 						</Table.Cell>
 					</Table.Row>
 					{#each $table.getRowModel().rows as row}
 						<Table.Row
-							class="hover cursor-pointer"
+							class="cursor-pointer hover"
 							on:click={() => dispatch('rowclick', row.original)}
 						>
 							{#each row.getVisibleCells() as cell}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
index 65dec0471b..7088f63d81 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
+	import EventsDataTable from '$comp/events/table/EventsDataTable.svelte';
 	import * as Card from '$comp/ui/card';
+	import { writable } from 'svelte/store';
+
+	let filter = writable('');
+	let time = writable('');
 </script>
 
 <svelte:head>
@@ -8,5 +13,5 @@
 
 <Card.Root>
 	<Card.Title class="p-6 pb-4 text-xl font-bold">Tasks</Card.Title>
-	<Card.Content>Tasks TODO</Card.Content></Card.Root
+	<Card.Content><EventsDataTable {filter} {time}></EventsDataTable></Card.Content></Card.Root
 >

From 75881411f99efab78dd35313b469bdd53ff40d76 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Thu, 21 Dec 2023 21:55:52 -0600
Subject: [PATCH 04/35] updated packages

---
 .../ClientApp/package-lock.json               | 68 +++++++++----------
 src/Exceptionless.Web/ClientApp/package.json  |  8 +--
 .../events/table/EventsDataTable.svelte       |  2 +
 3 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
index b2dc47ea85..ab01003836 100644
--- a/src/Exceptionless.Web/ClientApp/package-lock.json
+++ b/src/Exceptionless.Web/ClientApp/package-lock.json
@@ -11,8 +11,8 @@
 				"@exceptionless/browser": "^3.0.5",
 				"@iconify-json/mdi": "^1.1.63",
 				"@tanstack/svelte-query": "^5.14.2",
-				"@tanstack/svelte-query-devtools": "^5.14.2",
-				"@tanstack/svelte-table": "^8.11.0",
+				"@tanstack/svelte-query-devtools": "^5.14.5",
+				"@tanstack/svelte-table": "^8.11.2",
 				"@web3-storage/parse-link-header": "^3.1.0",
 				"bits-ui": "^0.11.8",
 				"class-validator": "^0.14.0",
@@ -26,7 +26,7 @@
 				"svelte-local-storage-store": "^0.6.4",
 				"svelte-time": "^0.8.2",
 				"svoast": "^2.3.0",
-				"tailwind-merge": "^2.1.0",
+				"tailwind-merge": "^2.2.0",
 				"tailwind-variants": "^0.1.19",
 				"tailwindcss": "^3.4.0",
 				"unplugin-icons": "^0.18.1"
@@ -34,7 +34,7 @@
 			"devDependencies": {
 				"@playwright/test": "^1.40.1",
 				"@sveltejs/adapter-static": "^3.0.1",
-				"@sveltejs/kit": "^2.0.4",
+				"@sveltejs/kit": "^2.0.6",
 				"@sveltejs/vite-plugin-svelte": "^3.0.1",
 				"@typescript-eslint/eslint-plugin": "^6.15.0",
 				"@typescript-eslint/parser": "^6.15.0",
@@ -1340,9 +1340,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.0.4.tgz",
-			"integrity": "sha512-pqUOo1Slp2fybNjTouF7qgeN815hO2boRCNO1Z7/XtXu5IPNg9OSwI485qmQ0GUU2v2NmA0XZciFHGrgzOixyw==",
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.0.6.tgz",
+			"integrity": "sha512-dnHtyjBLGXx+hrZQ9GuqLlSfTBixewJaByUVWai7LmB4dgV3FwkK155OltEgONDQW6KW64hLNS/uojdx3uC2/g==",
 			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
@@ -1352,10 +1352,10 @@
 				"esm-env": "^1.0.0",
 				"kleur": "^4.1.5",
 				"magic-string": "^0.30.5",
-				"mrmime": "^1.0.1",
+				"mrmime": "^2.0.0",
 				"sade": "^1.8.1",
 				"set-cookie-parser": "^2.6.0",
-				"sirv": "^2.0.3",
+				"sirv": "^2.0.4",
 				"tiny-glob": "^0.2.9"
 			},
 			"bin": {
@@ -1427,9 +1427,9 @@
 			}
 		},
 		"node_modules/@tanstack/query-devtools": {
-			"version": "5.13.5",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.13.5.tgz",
-			"integrity": "sha512-effSYz9AWcZ6sNd+c8LCBYFIuDZApoCTXEpRlEYChBZpMz9QUUVMLToThwCyUY49+T5pANL3XxgZf3HV7hwJlg==",
+			"version": "5.14.5",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.14.5.tgz",
+			"integrity": "sha512-xM8BQbE4FBAVEPr8t6MFbOJP+canDFz0hcY9Ho+5Z4LQciC60wE+7ZALx5n3InP4R7IELx8AodS5G3KYzBAwCg==",
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
@@ -1451,11 +1451,11 @@
 			}
 		},
 		"node_modules/@tanstack/svelte-query-devtools": {
-			"version": "5.14.2",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.14.2.tgz",
-			"integrity": "sha512-ItrsjlHBOoeGq/Zwq8aT8uAjaZzfMNjFY3Tx/1TdgT5wv54d+lJpqz0PmRZXKOEBgiqG5mTweAyzWs03/HgHmQ==",
+			"version": "5.14.5",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.14.5.tgz",
+			"integrity": "sha512-fA5ruV5+pFfbFk4OvEzKpdfoRdedExesfpamQApmh1CAgCMumixchV3EgCs44mOfj/f5k7ZjNW9Vdu3mNnCg4w==",
 			"dependencies": {
-				"@tanstack/query-devtools": "5.13.5",
+				"@tanstack/query-devtools": "5.14.5",
 				"esm-env": "^1.0.0"
 			},
 			"funding": {
@@ -1468,11 +1468,11 @@
 			}
 		},
 		"node_modules/@tanstack/svelte-table": {
-			"version": "8.11.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-table/-/svelte-table-8.11.0.tgz",
-			"integrity": "sha512-pNsqQjmL+zpJUz3Qpw4imeRy0SMw5DJLqE1FBLR4z9ZhoKdzLWSN8qgYPRR96+WvSf5sIKvBj5EUAsTPlgGnhg==",
+			"version": "8.11.2",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-table/-/svelte-table-8.11.2.tgz",
+			"integrity": "sha512-VCuoEsoMDIHv2cKkHpcDNT706hlBJWuU1zYUezzPr+1izU16CbzgywfbG6gYV3JXtCkOdaVzVlW+tH3orjD1nw==",
 			"dependencies": {
-				"@tanstack/table-core": "8.11.0"
+				"@tanstack/table-core": "8.11.2"
 			},
 			"engines": {
 				"node": ">=12"
@@ -1486,9 +1486,9 @@
 			}
 		},
 		"node_modules/@tanstack/table-core": {
-			"version": "8.11.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.11.0.tgz",
-			"integrity": "sha512-7SC8/v6cXbUriOs2UISN8Jho3ttnA8cRZgusLn15b8meb28prHnWg4t4oNSHIR3rYn0g7iiIg+pax2CtBnyffg==",
+			"version": "8.11.2",
+			"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.11.2.tgz",
+			"integrity": "sha512-rR0VEQOtr0ARLvaNLaSQnt2BVwOp0OavOUA0LcZ3N45tLYXc4sXruNv8kJ7R7+5W1CrzGha217tzjBG83CpoMQ==",
 			"engines": {
 				"node": ">=12"
 			},
@@ -4354,9 +4354,9 @@
 			}
 		},
 		"node_modules/mrmime": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
-			"integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+			"integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
 			"dev": true,
 			"engines": {
 				"node": ">=10"
@@ -5901,13 +5901,13 @@
 			}
 		},
 		"node_modules/sirv": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",
-			"integrity": "sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==",
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+			"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
 			"dev": true,
 			"dependencies": {
-				"@polka/url": "^1.0.0-next.20",
-				"mrmime": "^1.0.0",
+				"@polka/url": "^1.0.0-next.24",
+				"mrmime": "^2.0.0",
 				"totalist": "^3.0.0"
 			},
 			"engines": {
@@ -6560,9 +6560,9 @@
 			"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
 		},
 		"node_modules/tailwind-merge": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.1.0.tgz",
-			"integrity": "sha512-l11VvI4nSwW7MtLSLYT4ldidDEUwQAMWuSHk7l4zcXZDgnCRa0V3OdCwFfM7DCzakVXMNRwAeje9maFFXT71dQ==",
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.0.tgz",
+			"integrity": "sha512-SqqhhaL0T06SW59+JVNfAqKdqLs0497esifRrZ7jOaefP3o64fdFNDMrAQWZFMxTLJPiHVjRLUywT8uFz1xNWQ==",
 			"dependencies": {
 				"@babel/runtime": "^7.23.5"
 			},
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index 3b6e6ea6fe..3e84ce8683 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -23,7 +23,7 @@
 	"devDependencies": {
 		"@playwright/test": "^1.40.1",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.0.4",
+		"@sveltejs/kit": "^2.0.6",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"@typescript-eslint/eslint-plugin": "^6.15.0",
 		"@typescript-eslint/parser": "^6.15.0",
@@ -49,8 +49,8 @@
 		"@exceptionless/browser": "^3.0.5",
 		"@iconify-json/mdi": "^1.1.63",
 		"@tanstack/svelte-query": "^5.14.2",
-		"@tanstack/svelte-query-devtools": "^5.14.2",
-		"@tanstack/svelte-table": "^8.11.0",
+		"@tanstack/svelte-query-devtools": "^5.14.5",
+		"@tanstack/svelte-table": "^8.11.2",
 		"@web3-storage/parse-link-header": "^3.1.0",
 		"bits-ui": "^0.11.8",
 		"class-validator": "^0.14.0",
@@ -64,7 +64,7 @@
 		"svelte-local-storage-store": "^0.6.4",
 		"svelte-time": "^0.8.2",
 		"svoast": "^2.3.0",
-		"tailwind-merge": "^2.1.0",
+		"tailwind-merge": "^2.2.0",
 		"tailwind-variants": "^0.1.19",
 		"tailwindcss": "^3.4.0",
 		"unplugin-icons": "^0.18.1"
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
index 71e87e11e8..ef5bd02f22 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -183,6 +183,8 @@
 	parameters.subscribe(async () => await loadData());
 	filter.subscribe(async () => await loadData());
 	time.subscribe(async () => await loadData());
+	let total = 0;
+	console.log(total);
 
 	async function loadData() {
 		if ($loading) {

From b87a60a3d13e70751ad55ef004e079b1fd0bf1d3 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Fri, 22 Dec 2023 07:58:54 -0600
Subject: [PATCH 05/35] WIP Tasks

---
 .../data-table/data-table-body.svelte         |  63 ++++++
 .../data-table/data-table-checkbox.svelte     |   8 -
 .../data-table-column-header.svelte           |  35 ++-
 .../data-table-faceted-filter.svelte          |  44 +---
 .../data-table/data-table-row-actions.svelte  |  67 ------
 .../data-table/data-table-status-cell.svelte  |  26 ++-
 .../data-table/data-table-toolbar.svelte      | 106 +--------
 .../components/data-table/data-table.svelte   |  72 +-----
 .../src/lib/components/data-table/index.ts    |  39 +++-
 .../events/table/EventsDataTable.svelte       | 208 ++++++++++--------
 .../events/table/EventsTable.svelte           |  88 +-------
 .../events/table/EventsTailLogTable.svelte    |  35 +--
 .../lib/components/events/table/options.ts    |  96 ++++++++
 .../ClientApp/src/routes/(app)/+page.svelte   |   3 +-
 14 files changed, 356 insertions(+), 534 deletions(-)
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-body.svelte
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-checkbox.svelte
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-row-actions.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-body.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-body.svelte
new file mode 100644
index 0000000000..424606a502
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-body.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { type Readable } from 'svelte/store';
+	import { flexRender, type Header, type Table as SvelteTable } from '@tanstack/svelte-table';
+
+	import DataTableColumnHeader from './data-table-column-header.svelte';
+	import * as Table from '$comp/ui/table';
+
+	type TData = $$Generic;
+	export let table: Readable<SvelteTable<TData>>;
+
+	const dispatch = createEventDispatcher();
+
+	function getHeaderColumnClass(header: Header<TData, unknown>) {
+		const classes = [(header.column.columnDef.meta as { class?: string })?.class || ''];
+
+		return classes.filter(Boolean).join(' ');
+	}
+</script>
+
+<div class="border rounded-md">
+	<Table.Root>
+		<Table.Header>
+			{#each $table.getHeaderGroups() as headerGroup}
+				<Table.Row>
+					{#each headerGroup.headers as header}
+						<Table.Head class={getHeaderColumnClass(header)}>
+							<DataTableColumnHeader column={header.column}
+								><svelte:component
+									this={flexRender(
+										header.column.columnDef.header,
+										header.getContext()
+									)}
+								/></DataTableColumnHeader
+							>
+						</Table.Head>
+					{/each}
+				</Table.Row>
+			{/each}
+		</Table.Header>
+		<Table.Body>
+			<Table.Row class="hidden text-center only:table-row">
+				<Table.Cell colspan={$table.getVisibleLeafColumns().length}>
+					No data was found with the current filter.
+				</Table.Cell>
+			</Table.Row>
+			{#each $table.getRowModel().rows as row}
+				<Table.Row
+					class="cursor-pointer hover"
+					on:click={() => dispatch('rowclick', row.original)}
+				>
+					{#each row.getVisibleCells() as cell}
+						<Table.Cell>
+							<svelte:component
+								this={flexRender(cell.column.columnDef.cell, cell.getContext())}
+							/>
+						</Table.Cell>
+					{/each}
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-checkbox.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-checkbox.svelte
deleted file mode 100644
index e9e1d4f103..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-checkbox.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-	import { Checkbox } from '$comp/ui/checkbox';
-	import type { Writable } from 'svelte/store';
-
-	export let checked: Writable<boolean>;
-</script>
-
-<Checkbox bind:checked={$checked} {...$$restProps} />
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-column-header.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-column-header.svelte
index b648bdb523..eee94c2564 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-column-header.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-column-header.svelte
@@ -3,41 +3,32 @@
 	import { Button } from '$comp/ui/button';
 	import * as DropdownMenu from '$comp/ui/dropdown-menu';
 	import { cn } from '$lib/utils';
+	import type { Column } from '@tanstack/svelte-table';
+
+	type TData = $$Generic;
+	export let column: Column<TData, unknown>;
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
-	export let props: {
-		sort: {
-			order: 'desc' | 'asc' | undefined;
-			toggle: (event: Event) => void;
-			clear: () => void;
-			disabled: boolean;
-		};
-	} = {
-		sort: {
-			order: undefined,
-			toggle: () => {},
-			clear: () => {},
-			disabled: false
-		}
-	};
 
 	function handleAscSort(e: Event) {
-		if (props.sort.order === 'asc') {
+		if (column.getIsSorted() === 'asc') {
 			return;
 		}
-		props.sort.toggle(e);
+
+		column.getToggleSortingHandler()?.(e);
 	}
 
 	function handleDescSort(e: Event) {
-		if (props.sort.order === 'desc') {
+		if (column.getIsSorted() === 'desc') {
 			return;
 		}
-		props.sort.toggle(e);
+
+		column.getToggleSortingHandler()?.(e);
 	}
 </script>
 
-{#if !props.sort.disabled}
+{#if column.getCanSort()}
 	<div class={cn('flex items-center', className)}>
 		<DropdownMenu.Root>
 			<DropdownMenu.Trigger asChild let:builder>
@@ -47,9 +38,9 @@
 					class="-ml-3 h-8 data-[state=open]:bg-accent"
 				>
 					<slot />
-					{#if props.sort.order === 'desc'}
+					{#if column.getIsSorted() === 'desc'}
 						<ArrowDown class="w-4 h-4 ml-2" />
-					{:else if props.sort.order === 'asc'}
+					{:else if column.getIsSorted() === 'asc'}
 						<ArrowUp class="w-4 h-4 ml-2" />
 					{:else}
 						<CaretSort class="w-4 h-4 ml-2" />
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte
index 24a40171aa..08ff2a4e21 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte
@@ -1,13 +1,5 @@
 <script lang="ts">
-	import {
-		PlusCircled,
-		Check,
-		CheckCircled,
-		Circle,
-		CrossCircled,
-		QuestionMarkCircled,
-		Stopwatch
-	} from 'radix-icons-svelte';
+	import { PlusCircled, Check } from 'radix-icons-svelte';
 	import * as Command from '$comp/ui/command';
 	import * as Popover from '$comp/ui/popover';
 	import { Button } from '$comp/ui/button';
@@ -15,37 +7,15 @@
 	import Separator from '$comp/ui/separator/separator.svelte';
 	import Badge from '$comp/ui/badge/badge.svelte';
 
-	const statuses = [
-		{
-			value: 'backlog',
-			label: 'Backlog',
-			icon: QuestionMarkCircled
-		},
-		{
-			value: 'todo',
-			label: 'Todo',
-			icon: Circle
-		},
-		{
-			value: 'in progress',
-			label: 'In Progress',
-			icon: Stopwatch
-		},
-		{
-			value: 'done',
-			label: 'Done',
-			icon: CheckCircled
-		},
-		{
-			value: 'canceled',
-			label: 'Canceled',
-			icon: CrossCircled
-		}
-	];
+	type Option = {
+		value: string;
+		label: string;
+		icon: unknown; // SvelteComponent
+	};
 
 	export let filterValues: string[] = [];
 	export let title: string;
-	export let options = [] as typeof statuses;
+	export let options: Option[] = [];
 
 	let open = false;
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-row-actions.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-row-actions.svelte
deleted file mode 100644
index 0f48578d03..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-row-actions.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts">
-	import { DotsHorizontal } from 'radix-icons-svelte';
-	import { Button } from '$comp/ui/button';
-	import * as DropdownMenu from '$comp/ui/dropdown-menu';
-
-	type Task = {
-		id: string;
-		title: string;
-		status: string;
-		label: string;
-		priority: string;
-	};
-
-	const labels = [
-		{
-			value: 'bug',
-			label: 'Bug'
-		},
-		{
-			value: 'feature',
-			label: 'Feature'
-		},
-		{
-			value: 'documentation',
-			label: 'Documentation'
-		}
-	];
-
-	export let row: Task;
-	const task = row; // taskSchema.parse(row);
-</script>
-
-<DropdownMenu.Root>
-	<DropdownMenu.Trigger asChild let:builder>
-		<Button
-			variant="ghost"
-			builders={[builder]}
-			class="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
-		>
-			<DotsHorizontal class="w-4 h-4" />
-			<span class="sr-only">Open menu</span>
-		</Button>
-	</DropdownMenu.Trigger>
-	<DropdownMenu.Content class="w-[160px]" align="end">
-		<DropdownMenu.Item>Edit</DropdownMenu.Item>
-		<DropdownMenu.Item>Make a copy</DropdownMenu.Item>
-		<DropdownMenu.Item>Favorite</DropdownMenu.Item>
-		<DropdownMenu.Separator />
-		<DropdownMenu.Sub>
-			<DropdownMenu.SubTrigger>Labels</DropdownMenu.SubTrigger>
-			<DropdownMenu.SubContent>
-				<DropdownMenu.RadioGroup value={task.label}>
-					{#each labels as label}
-						<DropdownMenu.RadioItem value={label.value}>
-							{label.label}
-						</DropdownMenu.RadioItem>
-					{/each}
-				</DropdownMenu.RadioGroup>
-			</DropdownMenu.SubContent>
-		</DropdownMenu.Sub>
-		<DropdownMenu.Separator />
-		<DropdownMenu.Item>
-			Delete
-			<DropdownMenu.Shortcut>⌘⌫</DropdownMenu.Shortcut>
-		</DropdownMenu.Item>
-	</DropdownMenu.Content>
-</DropdownMenu.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-status-cell.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-status-cell.svelte
index 6611366fe7..f6403a0e74 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-status-cell.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-status-cell.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { StackStatus } from '$lib/models/api.generated';
 	import {
 		QuestionMarkCircled,
 		Circle,
@@ -9,28 +10,33 @@
 
 	const statuses = [
 		{
-			value: 'backlog',
-			label: 'Backlog',
+			value: StackStatus.Open,
+			label: 'Open',
 			icon: QuestionMarkCircled
 		},
 		{
-			value: 'todo',
-			label: 'Todo',
+			value: StackStatus.Fixed,
+			label: 'Fixed',
 			icon: Circle
 		},
 		{
-			value: 'in progress',
-			label: 'In Progress',
+			value: StackStatus.Regressed,
+			label: 'Regressed',
 			icon: Stopwatch
 		},
 		{
-			value: 'done',
-			label: 'Done',
+			value: StackStatus.Snoozed,
+			label: 'Snoozed',
 			icon: CheckCircled
 		},
 		{
-			value: 'canceled',
-			label: 'Canceled',
+			value: StackStatus.Ignored,
+			label: 'Ignored',
+			icon: CrossCircled
+		},
+		{
+			value: StackStatus.Discarded,
+			label: 'Discarded',
 			icon: CrossCircled
 		}
 	];
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-toolbar.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-toolbar.svelte
index 2671394c25..b77c22fad8 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-toolbar.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-toolbar.svelte
@@ -1,116 +1,16 @@
 <script lang="ts">
 	import type { Table } from '@tanstack/svelte-table';
+	import { type Readable } from 'svelte/store';
 
-	import { Input } from '$comp/ui/input';
-	import { DataTableFacetedFilter, DataTableViewOptions } from '.';
-	import Button from '$comp/ui/button/button.svelte';
-	import {
-		ArrowDown,
-		ArrowRight,
-		ArrowUp,
-		CheckCircled,
-		Circle,
-		Cross2,
-		CrossCircled,
-		QuestionMarkCircled,
-		Stopwatch
-	} from 'radix-icons-svelte';
-
-	import { writable, type Readable, type Writable } from 'svelte/store';
-
-	const statuses = [
-		{
-			value: 'backlog',
-			label: 'Backlog',
-			icon: QuestionMarkCircled
-		},
-		{
-			value: 'todo',
-			label: 'Todo',
-			icon: Circle
-		},
-		{
-			value: 'in progress',
-			label: 'In Progress',
-			icon: Stopwatch
-		},
-		{
-			value: 'done',
-			label: 'Done',
-			icon: CheckCircled
-		},
-		{
-			value: 'canceled',
-			label: 'Canceled',
-			icon: CrossCircled
-		}
-	];
-
-	const priorities = [
-		{
-			label: 'Low',
-			value: 'low',
-			icon: ArrowDown
-		},
-		{
-			label: 'Medium',
-			value: 'medium',
-			icon: ArrowRight
-		},
-		{
-			label: 'High',
-			value: 'high',
-			icon: ArrowUp
-		}
-	];
+	import DataTableViewOptions from './data-table-view-options.svelte';
 
 	type TData = $$Generic;
 	export let table: Readable<Table<TData>>;
-
-	const filterValue: Writable<string> = writable('');
-	const filterValues: Writable<{
-		status: string[];
-		priority: string[];
-	}> = writable({
-		status: [],
-		priority: []
-	});
-
-	$: showReset = Object.values($filterValues).some((v) => v.length > 0);
 </script>
 
 <div class="flex items-center justify-between">
 	<div class="flex items-center flex-1 space-x-2">
-		<Input
-			placeholder="Filter tasks..."
-			class="h-8 w-[150px] lg:w-[250px]"
-			type="text"
-			bind:value={$filterValue}
-		/>
-
-		<DataTableFacetedFilter
-			bind:filterValues={$filterValues.status}
-			title="Status"
-			options={statuses}
-		/>
-		<DataTableFacetedFilter
-			bind:filterValues={$filterValues.priority}
-			title="Priority"
-			options={priorities}
-		/>
-		{#if showReset}
-			<Button
-				on:click={() => {
-					$filterValues.status = [];
-					$filterValues.priority = [];
-				}}
-				variant="ghost"
-				class="h-8 px-2 lg:px-3"
-			>
-				Reset
-				<Cross2 class="w-4 h-4 ml-2" />
-			</Button>
-		{/if}
+		<slot />
 	</div>
 
 	<DataTableViewOptions {table} />
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table.svelte
index e9d5cd63ac..ca1510fd4b 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table.svelte
@@ -1,73 +1,3 @@
-<script lang="ts">
-	import { type Readable } from 'svelte/store';
-	import * as Table from '$comp/ui/table';
-	import { flexRender, type Table as SvelteTable } from '@tanstack/svelte-table';
-
-	import { DataTableColumnHeader, DataTableToolbar, DataTablePagination } from '.';
-
-	type TData = $$Generic;
-	export let table: Readable<SvelteTable<TData>>;
-</script>
-
 <div class="space-y-4">
-	<DataTableToolbar {table} />
-	<div class="border rounded-md">
-		<Table.Root>
-			<Table.Header>
-				{#each $table.getHeaderGroups() as headerGroup}
-					<Table.Row>
-						{#each headerGroup.headers as header}
-							<Table.Head>
-								{#if header.column.columnDef.id !== 'select' && header.column.columnDef.id !== 'actions'}
-									<DataTableColumnHeader
-										><svelte:component
-											this={flexRender(
-												header.column.columnDef.header,
-												header.getContext()
-											)}
-										/></DataTableColumnHeader
-									>
-								{:else}
-									<svelte:component
-										this={flexRender(
-											header.column.columnDef.header,
-											header.getContext()
-										)}
-									/>
-								{/if}
-							</Table.Head>
-						{/each}
-					</Table.Row>
-				{/each}
-			</Table.Header>
-			<Table.Body>
-				{#each $table.getRowModel().rows as row}
-					<Table.Row>
-						{#each row.getVisibleCells() as cell}
-							<Table.Cell>
-								{#if cell.id === 'task'}
-									<div class="w-[80px]">
-										<svelte:component
-											this={flexRender(
-												cell.column.columnDef.cell,
-												cell.getContext()
-											)}
-										/>
-									</div>
-								{:else}
-									<svelte:component
-										this={flexRender(
-											cell.column.columnDef.cell,
-											cell.getContext()
-										)}
-									/>
-								{/if}
-							</Table.Cell>
-						{/each}
-					</Table.Row>
-				{/each}
-			</Table.Body>
-		</Table.Root>
-	</div>
-	<DataTablePagination {table} />
+	<slot />
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
index d2a7b5d6a7..6f350fb270 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
@@ -1,10 +1,29 @@
-export { default as DataTableCheckbox } from './data-table-checkbox.svelte';
-export { default as DataTableTitleCell } from './data-table-title-cell.svelte';
-export { default as DataTableStatusCell } from './data-table-status-cell.svelte';
-export { default as DataTableRowActions } from './data-table-row-actions.svelte';
-export { default as DataTablePriorityCell } from './data-table-priority-cell.svelte';
-export { default as DataTableColumnHeader } from './data-table-column-header.svelte';
-export { default as DataTableToolbar } from './data-table-toolbar.svelte';
-export { default as DataTablePagination } from './data-table-pagination.svelte';
-export { default as DataTableViewOptions } from './data-table-view-options.svelte';
-export { default as DataTableFacetedFilter } from './data-table-faceted-filter.svelte';
+import Root from './data-table.svelte';
+import Body from './data-table-body.svelte';
+import Toolbar from './data-table-toolbar.svelte';
+import FacetedFilter from './data-table-faceted-filter.svelte';
+import Pagination from './data-table-pagination.svelte';
+
+import PriorityCell from './data-table-priority-cell.svelte';
+import StatusCell from './data-table-status-cell.svelte';
+import TitleCell from './data-table-title-cell.svelte';
+
+export {
+	Root,
+	Body,
+	Toolbar,
+	FacetedFilter,
+	Pagination,
+	PriorityCell,
+	StatusCell,
+	TitleCell,
+	//
+	Root as DataTable,
+	Body as DataTableBody,
+	Toolbar as DataTableToolbar,
+	FacetedFilter as DataTableFacetedFilter,
+	Pagination as DataTablePagination,
+	PriorityCell as DataTablePriorityCell,
+	StatusCell as DataTableStatusCell,
+	TitleCell as DataTableTitleCell
+};
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
index ef5bd02f22..53b72e91c1 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-	import { writable, type Readable } from 'svelte/store';
+	import { writable, type Readable, type Writable } from 'svelte/store';
 	import {
 		createSvelteTable,
-		flexRender,
 		getCoreRowModel,
-		type ColumnDef,
 		type TableOptions,
 		type Updater,
 		type VisibilityState,
@@ -14,104 +12,39 @@
 		EventSummaryModel,
 		GetEventsMode,
 		IGetEventsParams,
-		StackSummaryModel,
 		SummaryModel,
 		SummaryTemplateKeys
 	} from '$lib/models/api';
-	import Summary from '$comp/events/summary/Summary.svelte';
-	import { nameof } from '$lib/utils';
-	import NumberFormatter from '$comp/formatters/Number.svelte';
-	import EventsUserIdentitySummaryColumn from './EventsUserIdentitySummaryColumn.svelte';
 	import {
 		type FetchClientResponse,
 		globalFetchClient as api,
 		globalLoading as loading
 	} from '$api/FetchClient';
 	import { persisted } from 'svelte-local-storage-store';
-	import TimeAgo from '$comp/formatters/TimeAgo.svelte';
-	import StackUsersSummaryColumn from './StackUsersSummaryColumn.svelte';
 	import CustomEventMessage from '$comp/messaging/CustomEventMessage.svelte';
-	import DataTable from '$comp/data-table/data-table.svelte';
+
+	import * as DataTable from '$comp/data-table';
+	import { Button } from '$comp/ui/button';
+	import {
+		ArrowDown,
+		ArrowRight,
+		ArrowUp,
+		CheckCircled,
+		Circle,
+		Cross2,
+		CrossCircled,
+		QuestionMarkCircled,
+		Stopwatch
+	} from 'radix-icons-svelte';
+	import { Input } from '$comp/ui/input';
+	import { StackStatus } from '$lib/models/api.generated';
+	import { getColumns } from './options';
 
 	export let mode: GetEventsMode = 'summary';
 	export let filter: Readable<string>;
 	export let time: Readable<string>;
 
-	const defaultColumns: ColumnDef<SummaryModel<SummaryTemplateKeys>>[] = [
-		{
-			header: 'Summary',
-			enableHiding: false,
-			cell: (prop) => flexRender(Summary, { summary: prop.row.original })
-		}
-	];
-
-	const isEventSummary = mode === 'summary';
-	if (isEventSummary) {
-		defaultColumns.push(
-			{
-				id: 'user',
-				header: 'User',
-				enableSorting: false,
-				meta: {
-					class: 'w-28'
-				},
-				cell: (prop) =>
-					flexRender(EventsUserIdentitySummaryColumn, { summary: prop.row.original })
-			},
-			{
-				id: 'date',
-				header: 'Date',
-				accessorKey: nameof<EventSummaryModel<SummaryTemplateKeys>>('date'),
-				meta: {
-					class: 'w-36'
-				},
-				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
-			}
-		);
-	} else {
-		defaultColumns.push(
-			{
-				id: 'users',
-				header: 'Users',
-				enableSorting: false,
-				meta: {
-					class: 'w-24'
-				},
-				cell: (prop) => flexRender(StackUsersSummaryColumn, { summary: prop.row.original })
-			},
-			{
-				id: 'events',
-				header: 'Events',
-				enableSorting: false,
-				meta: {
-					class: 'w-24'
-				},
-				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('total'),
-				cell: (prop) => flexRender(NumberFormatter, { value: prop.getValue() as number })
-			},
-			{
-				id: 'first',
-				header: 'First',
-				enableSorting: false,
-				meta: {
-					class: 'w-36'
-				},
-				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('first_occurrence'),
-				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
-			},
-			{
-				id: 'last',
-				header: 'Last',
-				enableSorting: false,
-				meta: {
-					class: 'w-36'
-				},
-				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('last_occurrence'),
-				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
-			}
-		);
-	}
-
+	const columns = getColumns(mode);
 	const columnVisibility = persisted('events-column-visibility', <VisibilityState>{});
 	const setColumnVisibility = (updaterOrValue: Updater<VisibilityState>) => {
 		if (updaterOrValue instanceof Function) {
@@ -162,7 +95,7 @@
 	};
 
 	const options = writable<TableOptions<SummaryModel<SummaryTemplateKeys>>>({
-		columns: defaultColumns,
+		columns,
 		data: [],
 		enableSortingRemoval: false,
 		manualSorting: true,
@@ -176,6 +109,8 @@
 		getRowId: (originalRow) => originalRow.id
 	});
 
+	// TODO: https://tanstack.com/table/v8/docs/api/features/pagination#setpagesize
+
 	const table = createSvelteTable<SummaryModel<SummaryTemplateKeys>>(options);
 
 	let response: FetchClientResponse<EventSummaryModel<SummaryTemplateKeys>[]>;
@@ -208,8 +143,105 @@
 			if (response.meta?.total) total = response.meta.total as number;
 		}
 	}
+
+	const statuses = [
+		{
+			value: StackStatus.Open,
+			label: 'Open',
+			icon: QuestionMarkCircled
+		},
+		{
+			value: StackStatus.Fixed,
+			label: 'Fixed',
+			icon: Circle
+		},
+		{
+			value: StackStatus.Regressed,
+			label: 'Regressed',
+			icon: Stopwatch
+		},
+		{
+			value: StackStatus.Snoozed,
+			label: 'Snoozed',
+			icon: CheckCircled
+		},
+		{
+			value: StackStatus.Ignored,
+			label: 'Ignored',
+			icon: CrossCircled
+		},
+		{
+			value: StackStatus.Discarded,
+			label: 'Discarded',
+			icon: CrossCircled
+		}
+	];
+
+	const priorities = [
+		{
+			label: 'Low',
+			value: 'low',
+			icon: ArrowDown
+		},
+		{
+			label: 'Medium',
+			value: 'medium',
+			icon: ArrowRight
+		},
+		{
+			label: 'High',
+			value: 'high',
+			icon: ArrowUp
+		}
+	];
+
+	const filterValue: Writable<string> = writable('');
+	const filterValues: Writable<{
+		status: string[];
+		priority: string[];
+	}> = writable({
+		status: [],
+		priority: []
+	});
+
+	$: showReset = Object.values($filterValues).some((v) => v.length > 0);
 </script>
 
 <CustomEventMessage type="refresh" on:message={loadData}></CustomEventMessage>
 
-<DataTable {table}></DataTable>
+<DataTable.Root>
+	<DataTable.Toolbar {table}>
+		<Input
+			placeholder="Filter tasks..."
+			class="h-8 w-[150px] lg:w-[250px]"
+			type="text"
+			bind:value={$filterValue}
+		/>
+
+		<DataTable.FacetedFilter
+			bind:filterValues={$filterValues.status}
+			title="Status"
+			options={statuses}
+		/>
+		<DataTable.FacetedFilter
+			bind:filterValues={$filterValues.priority}
+			title="Priority"
+			options={priorities}
+		/>
+		{#if showReset}
+			<Button
+				on:click={() => {
+					$filterValues.status = [];
+					$filterValues.priority = [];
+				}}
+				variant="ghost"
+				class="h-8 px-2 lg:px-3"
+			>
+				Reset
+				<Cross2 class="w-4 h-4 ml-2" />
+			</Button>
+		{/if}
+	</DataTable.Toolbar>
+	<DataTable.Body {table}></DataTable.Body>
+	<DataTable.Pagination {table}></DataTable.Pagination>
+</DataTable.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTable.svelte
index 3a23476518..baac541d7e 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTable.svelte
@@ -2,9 +2,7 @@
 	import { writable, type Readable } from 'svelte/store';
 	import {
 		createSvelteTable,
-		flexRender,
 		getCoreRowModel,
-		type ColumnDef,
 		type TableOptions,
 		type Updater,
 		type VisibilityState,
@@ -14,14 +12,9 @@
 		EventSummaryModel,
 		GetEventsMode,
 		IGetEventsParams,
-		StackSummaryModel,
 		SummaryModel,
 		SummaryTemplateKeys
 	} from '$lib/models/api';
-	import Summary from '$comp/events/summary/Summary.svelte';
-	import { nameof } from '$lib/utils';
-	import NumberFormatter from '$comp/formatters/Number.svelte';
-	import EventsUserIdentitySummaryColumn from './EventsUserIdentitySummaryColumn.svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { DEFAULT_LIMIT } from '$lib/helpers/api';
 	import {
@@ -32,89 +25,14 @@
 	import TableWithPaging from '$comp/table/TableWithPaging.svelte';
 	import TableWithPagingFooter from '$comp/table/TableWithPagingFooter.svelte';
 	import { persisted } from 'svelte-local-storage-store';
-	import TimeAgo from '$comp/formatters/TimeAgo.svelte';
-	import StackUsersSummaryColumn from './StackUsersSummaryColumn.svelte';
 	import CustomEventMessage from '$comp/messaging/CustomEventMessage.svelte';
+	import { getColumns } from './options';
 
 	export let mode: GetEventsMode = 'summary';
 	export let filter: Readable<string>;
 	export let time: Readable<string>;
 
-	const defaultColumns: ColumnDef<SummaryModel<SummaryTemplateKeys>>[] = [
-		{
-			header: 'Summary',
-			enableHiding: false,
-			cell: (prop) => flexRender(Summary, { summary: prop.row.original })
-		}
-	];
-
-	const isEventSummary = mode === 'summary';
-	if (isEventSummary) {
-		defaultColumns.push(
-			{
-				id: 'user',
-				header: 'User',
-				enableSorting: false,
-				meta: {
-					class: 'w-28'
-				},
-				cell: (prop) =>
-					flexRender(EventsUserIdentitySummaryColumn, { summary: prop.row.original })
-			},
-			{
-				id: 'date',
-				header: 'Date',
-				accessorKey: nameof<EventSummaryModel<SummaryTemplateKeys>>('date'),
-				meta: {
-					class: 'w-36'
-				},
-				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
-			}
-		);
-	} else {
-		defaultColumns.push(
-			{
-				id: 'users',
-				header: 'Users',
-				enableSorting: false,
-				meta: {
-					class: 'w-24'
-				},
-				cell: (prop) => flexRender(StackUsersSummaryColumn, { summary: prop.row.original })
-			},
-			{
-				id: 'events',
-				header: 'Events',
-				enableSorting: false,
-				meta: {
-					class: 'w-24'
-				},
-				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('total'),
-				cell: (prop) => flexRender(NumberFormatter, { value: prop.getValue() as number })
-			},
-			{
-				id: 'first',
-				header: 'First',
-				enableSorting: false,
-				meta: {
-					class: 'w-36'
-				},
-				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('first_occurrence'),
-				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
-			},
-			{
-				id: 'last',
-				header: 'Last',
-				enableSorting: false,
-				meta: {
-					class: 'w-36'
-				},
-				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('last_occurrence'),
-				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
-			}
-		);
-	}
-
+	const columns = getColumns(mode);
 	const columnVisibility = persisted('events-column-visibility', <VisibilityState>{});
 	const setColumnVisibility = (updaterOrValue: Updater<VisibilityState>) => {
 		if (updaterOrValue instanceof Function) {
@@ -165,7 +83,7 @@
 	};
 
 	const options = writable<TableOptions<SummaryModel<SummaryTemplateKeys>>>({
-		columns: defaultColumns,
+		columns,
 		data: [],
 		enableSortingRemoval: false,
 		manualSorting: true,
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogTable.svelte
index 4c36b1334c..78912978c1 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogTable.svelte
@@ -2,23 +2,18 @@
 	import { writable, type Readable } from 'svelte/store';
 	import {
 		createSvelteTable,
-		flexRender,
 		getCoreRowModel,
-		type ColumnDef,
 		type TableOptions,
 		type Updater,
 		type VisibilityState
 	} from '@tanstack/svelte-table';
 	import type { EventSummaryModel, IGetEventsParams, SummaryTemplateKeys } from '$lib/models/api';
-	import Summary from '$comp/events/summary/Summary.svelte';
-	import { nameof } from '$lib/utils';
 	import {
 		type FetchClientResponse,
 		globalFetchClient as api,
 		globalLoading as loading
 	} from '$api/FetchClient';
 	import WebSocketMessage from '$comp/messaging/WebSocketMessage.svelte';
-	import EventsUserIdentitySummaryColumn from './EventsUserIdentitySummaryColumn.svelte';
 	import ErrorMessage from '$comp/ErrorMessage.svelte';
 	import Loading from '$comp/Loading.svelte';
 	import Table from '$comp/table/Table.svelte';
@@ -28,35 +23,11 @@
 	import TimeAgo from '$comp/formatters/TimeAgo.svelte';
 	import CustomEventMessage from '$comp/messaging/CustomEventMessage.svelte';
 	import Muted from '$comp/typography/Muted.svelte';
+	import { getColumns } from './options';
 
 	export let filter: Readable<string>;
 
-	const defaultColumns: ColumnDef<EventSummaryModel<SummaryTemplateKeys>>[] = [
-		{
-			header: 'Summary',
-			enableHiding: false,
-			cell: (prop) => flexRender(Summary, { summary: prop.row.original })
-		},
-		{
-			id: 'user',
-			header: 'User',
-			meta: {
-				class: 'w-28'
-			},
-			cell: (prop) =>
-				flexRender(EventsUserIdentitySummaryColumn, { summary: prop.row.original })
-		},
-		{
-			id: 'date',
-			header: 'Date',
-			meta: {
-				class: 'w-36'
-			},
-			accessorKey: nameof<EventSummaryModel<SummaryTemplateKeys>>('date'),
-			cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
-		}
-	];
-
+	const columns = getColumns('summary');
 	const columnVisibility = persisted('events-column-visibility', <VisibilityState>{});
 	const setColumnVisibility = (updaterOrValue: Updater<VisibilityState>) => {
 		if (updaterOrValue instanceof Function) {
@@ -76,7 +47,7 @@
 
 	const options = writable<TableOptions<EventSummaryModel<SummaryTemplateKeys>>>({
 		data: [],
-		columns: defaultColumns,
+		columns,
 		enableSorting: false,
 		state: {
 			columnVisibility: $columnVisibility
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
new file mode 100644
index 0000000000..2b12df1677
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
@@ -0,0 +1,96 @@
+import { flexRender, type ColumnDef } from '@tanstack/svelte-table';
+
+import type {
+	EventSummaryModel,
+	GetEventsMode,
+	StackSummaryModel,
+	SummaryModel,
+	SummaryTemplateKeys
+} from '$lib/models/api';
+import Summary from '$comp/events/summary/Summary.svelte';
+import { nameof } from '$lib/utils';
+import NumberFormatter from '$comp/formatters/Number.svelte';
+import EventsUserIdentitySummaryColumn from './EventsUserIdentitySummaryColumn.svelte';
+import TimeAgo from '$comp/formatters/TimeAgo.svelte';
+import StackUsersSummaryColumn from './StackUsersSummaryColumn.svelte';
+
+export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKeys>>(
+	mode: GetEventsMode = 'summary'
+): ColumnDef<TSummaryModel>[] {
+	const columns: ColumnDef<TSummaryModel>[] = [
+		{
+			header: 'Summary',
+			enableHiding: false,
+			cell: (prop) => flexRender(Summary, { summary: prop.row.original })
+		}
+	];
+
+	const isEventSummary = mode === 'summary';
+	if (isEventSummary) {
+		columns.push(
+			{
+				id: 'user',
+				header: 'User',
+				enableSorting: false,
+				meta: {
+					class: 'w-28'
+				},
+				cell: (prop) =>
+					flexRender(EventsUserIdentitySummaryColumn, { summary: prop.row.original })
+			},
+			{
+				id: 'date',
+				header: 'Date',
+				accessorKey: nameof<EventSummaryModel<SummaryTemplateKeys>>('date'),
+				meta: {
+					class: 'w-36'
+				},
+				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
+			}
+		);
+	} else {
+		columns.push(
+			{
+				id: 'users',
+				header: 'Users',
+				enableSorting: false,
+				meta: {
+					class: 'w-24'
+				},
+				cell: (prop) => flexRender(StackUsersSummaryColumn, { summary: prop.row.original })
+			},
+			{
+				id: 'events',
+				header: 'Events',
+				enableSorting: false,
+				meta: {
+					class: 'w-24'
+				},
+				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('total'),
+				cell: (prop) => flexRender(NumberFormatter, { value: prop.getValue() as number })
+			},
+			{
+				id: 'first',
+				header: 'First',
+				enableSorting: false,
+				meta: {
+					class: 'w-36'
+				},
+				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('first_occurrence'),
+				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
+			},
+			{
+				id: 'last',
+				header: 'Last',
+				enableSorting: false,
+				meta: {
+					class: 'w-36'
+				},
+				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('last_occurrence'),
+				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
+			}
+		);
+	}
+
+	return columns;
+}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
index 7088f63d81..a84f66696c 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
 	import EventsDataTable from '$comp/events/table/EventsDataTable.svelte';
 	import * as Card from '$comp/ui/card';
+	import { persisted } from 'svelte-local-storage-store';
 	import { writable } from 'svelte/store';
 
 	let filter = writable('');
-	let time = writable('');
+	let time = persisted<string>('filter.time', '');
 </script>
 
 <svelte:head>

From fd8e668eb5e985ba7b07a3a0bdf0f521bd01317d Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Fri, 22 Dec 2023 08:00:23 -0600
Subject: [PATCH 06/35] Updated recommendations

---
 src/Exceptionless.Web/ClientApp/.vscode/extensions.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Exceptionless.Web/ClientApp/.vscode/extensions.json b/src/Exceptionless.Web/ClientApp/.vscode/extensions.json
index 09760da152..80f13598a1 100644
--- a/src/Exceptionless.Web/ClientApp/.vscode/extensions.json
+++ b/src/Exceptionless.Web/ClientApp/.vscode/extensions.json
@@ -4,6 +4,7 @@
 		"bradlc.vscode-tailwindcss",
 		"digitalbrainstem.javascript-ejs-support",
 		"dbaeumer.vscode-eslint",
-		"esbenp.prettier-vscode"
+		"esbenp.prettier-vscode",
+		"selemondev.vscode-shadcn-svelte"
 	]
 }

From 6231102c5b5954f6d89d495a1ea22ed83c1e0c4d Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sun, 24 Dec 2023 08:02:07 -0600
Subject: [PATCH 07/35] WIP Data Table Paging

---
 .../data-table/data-table-pagination.svelte   |  62 ++++-----
 .../events/table/EventsDataTable.svelte       |  85 ++----------
 .../lib/components/events/table/options.ts    | 125 +++++++++++++++++-
 3 files changed, 159 insertions(+), 113 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte
index f7cde5d383..c27e43b4e8 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte
@@ -3,37 +3,31 @@
 	import type { Table } from '@tanstack/svelte-table';
 
 	import { Button } from '$comp/ui/button';
-	import {
-		ChevronRight,
-		ChevronLeft,
-		DoubleArrowRight,
-		DoubleArrowLeft
-	} from 'radix-icons-svelte';
+	import { ChevronRight, ChevronLeft, DoubleArrowLeft } from 'radix-icons-svelte';
 	import * as Select from '$comp/ui/select';
+	import Number from '$comp/formatters/Number.svelte';
 
 	type TData = $$Generic;
 	export let table: Readable<Table<TData>>;
 
 	const rows = derived(table, ($table) => $table.getRowModel().rows);
 	const selectedDataIds = writable([]); // TODO
-	const pageSize = writable(20); // TODO
-	const pageIndex = writable(1); // TODO
-	const pageCount = writable(10); // TODO
-	const hasPreviousPage = writable(false); // TODO
-	const hasNextPage = writable(false); // TODO
-	const pageRows = writable([]); // TODO
+	let pageSize = writable(20); // TODO
+	const pageIndex = derived(table, ($table) => $table.getState().pagination.pageIndex);
 </script>
 
 <div class="flex items-center justify-between px-2">
 	<div class="flex-1 text-sm text-muted-foreground">
-		{Object.keys($selectedDataIds).length} of{' '}
-		{$rows.length} row(s) selected.
+		{#if $selectedDataIds.length == 0}
+			{Object.keys($selectedDataIds).length} of{' '}
+			{$rows.length} row(s) selected.
+		{/if}
 	</div>
 	<div class="flex items-center space-x-6 lg:space-x-8">
 		<div class="flex items-center space-x-2">
 			<p class="text-sm font-medium">Rows per page</p>
 			<Select.Root
-				onSelectedChange={(selected) => pageSize.set(Number(selected?.value))}
+				onSelectedChange={(selected) => pageSize.set(selected?.value ?? 0)}
 				selected={{ value: 10, label: '10' }}
 			>
 				<Select.Trigger class="w-[180px]">
@@ -49,23 +43,24 @@
 			</Select.Root>
 		</div>
 		<div class="flex w-[100px] items-center justify-center text-sm font-medium">
-			Page {$pageIndex + 1} of {$pageCount}
+			Page <Number value={$pageIndex + 1} /> of <Number value={$table.getPageCount()} />
 		</div>
 		<div class="flex items-center space-x-2">
-			<Button
-				variant="outline"
-				class="hidden w-8 h-8 p-0 lg:flex"
-				on:click={() => ($pageIndex = 0)}
-				disabled={!$hasPreviousPage}
-			>
-				<span class="sr-only">Go to first page</span>
-				<DoubleArrowLeft size={15} />
-			</Button>
+			{#if $pageIndex > 1}
+				<Button
+					variant="outline"
+					class="hidden w-8 h-8 p-0 lg:flex"
+					on:click={() => $table.resetPageIndex(true)}
+				>
+					<span class="sr-only">Go to first page</span>
+					<DoubleArrowLeft size={15} />
+				</Button>
+			{/if}
 			<Button
 				variant="outline"
 				class="w-8 h-8 p-0"
-				on:click={() => ($pageIndex = $pageIndex - 1)}
-				disabled={!$hasPreviousPage}
+				disabled={!$table.getCanPreviousPage()}
+				on:click={() => $table.previousPage()}
 			>
 				<span class="sr-only">Go to previous page</span>
 				<ChevronLeft size={15} />
@@ -73,21 +68,12 @@
 			<Button
 				variant="outline"
 				class="w-8 h-8 p-0"
-				disabled={!$hasNextPage}
-				on:click={() => ($pageIndex = $pageIndex + 1)}
+				disabled={!$table.getCanNextPage()}
+				on:click={() => $table.nextPage()}
 			>
 				<span class="sr-only">Go to next page</span>
 				<ChevronRight size={15} />
 			</Button>
-			<Button
-				variant="outline"
-				class="hidden w-8 h-8 p-0 lg:flex"
-				disabled={!$hasNextPage}
-				on:click={() => ($pageIndex = Math.ceil($rows.length / $pageRows.length) - 1)}
-			>
-				<span class="sr-only">Go to last page</span>
-				<DoubleArrowRight size={15} />
-			</Button>
 		</div>
 	</div>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
index 53b72e91c1..6d9ffaa9b2 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -6,7 +6,8 @@
 		type TableOptions,
 		type Updater,
 		type VisibilityState,
-		type ColumnSort
+		type ColumnSort,
+		type PaginationState
 	} from '@tanstack/svelte-table';
 	import type {
 		EventSummaryModel,
@@ -38,88 +39,21 @@
 	} from 'radix-icons-svelte';
 	import { Input } from '$comp/ui/input';
 	import { StackStatus } from '$lib/models/api.generated';
-	import { getColumns } from './options';
+	import { getOptions } from './options';
+	import { DEFAULT_LIMIT } from '$lib/helpers/api';
 
 	export let mode: GetEventsMode = 'summary';
 	export let filter: Readable<string>;
 	export let time: Readable<string>;
 
-	const columns = getColumns(mode);
-	const columnVisibility = persisted('events-column-visibility', <VisibilityState>{});
-	const setColumnVisibility = (updaterOrValue: Updater<VisibilityState>) => {
-		if (updaterOrValue instanceof Function) {
-			columnVisibility.update(() => updaterOrValue($columnVisibility));
-		} else {
-			columnVisibility.update(() => updaterOrValue);
-		}
-
-		options.update((old) => ({
-			...old,
-			state: {
-				...old.state,
-				...{ columnVisibility: $columnVisibility }
-			}
-		}));
-	};
-
-	let sorting: ColumnSort[] = [
-		{
-			id: 'date',
-			desc: true
-		}
-	];
-	const setSorting = (updaterOrValue: Updater<ColumnSort[]>) => {
-		if (updaterOrValue instanceof Function) {
-			sorting = updaterOrValue(sorting);
-		} else {
-			sorting = updaterOrValue;
-		}
-
-		options.update((old) => ({
-			...old,
-			state: {
-				...old.state,
-				sorting
-			}
-		}));
-
-		parameters.update((params) => ({
-			...params,
-			before: undefined,
-			after: undefined,
-			sort:
-				sorting.length > 0
-					? sorting.map((sort) => `${sort.desc ? '-' : ''}${sort.id}`).join(',')
-					: undefined
-		}));
-	};
-
-	const options = writable<TableOptions<SummaryModel<SummaryTemplateKeys>>>({
-		columns,
-		data: [],
-		enableSortingRemoval: false,
-		manualSorting: true,
-		state: {
-			columnVisibility: $columnVisibility,
-			sorting
-		},
-		onColumnVisibilityChange: setColumnVisibility,
-		onSortingChange: setSorting,
-		getCoreRowModel: getCoreRowModel(),
-		getRowId: (originalRow) => originalRow.id
-	});
-
-	// TODO: https://tanstack.com/table/v8/docs/api/features/pagination#setpagesize
-
+	const parameters = writable<IGetEventsParams>({ mode });
+	const options = getOptions(parameters);
 	const table = createSvelteTable<SummaryModel<SummaryTemplateKeys>>(options);
 
 	let response: FetchClientResponse<EventSummaryModel<SummaryTemplateKeys>[]>;
-	const parameters = writable<IGetEventsParams>({ mode });
 	parameters.subscribe(async () => await loadData());
 	filter.subscribe(async () => await loadData());
 	time.subscribe(async () => await loadData());
-	let total = 0;
-	console.log(total);
 
 	async function loadData() {
 		if ($loading) {
@@ -136,11 +70,14 @@
 		});
 
 		if (response.ok) {
+			let total = (response.meta?.total as number) ?? 0;
 			options.update((options) => ({
 				...options,
-				data: response.data || []
+				data: response.data || [],
+				page: $parameters.page ?? 0,
+				pageCount: Math.ceil(total / ($parameters.limit ?? DEFAULT_LIMIT)),
+				meta: response.meta
 			}));
-			if (response.meta?.total) total = response.meta.total as number;
 		}
 	}
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
index 2b12df1677..59a939c895 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
@@ -1,8 +1,20 @@
-import { flexRender, type ColumnDef } from '@tanstack/svelte-table';
+import {
+	flexRender,
+	type ColumnDef,
+	getCoreRowModel,
+	type ColumnSort,
+	type PaginationState,
+	type TableOptions,
+	type Updater,
+	type VisibilityState
+} from '@tanstack/svelte-table';
+import { persisted } from 'svelte-local-storage-store';
+import { get, writable, type Writable } from 'svelte/store';
 
 import type {
 	EventSummaryModel,
 	GetEventsMode,
+	IGetEventsParams,
 	StackSummaryModel,
 	SummaryModel,
 	SummaryTemplateKeys
@@ -13,6 +25,8 @@ import NumberFormatter from '$comp/formatters/Number.svelte';
 import EventsUserIdentitySummaryColumn from './EventsUserIdentitySummaryColumn.svelte';
 import TimeAgo from '$comp/formatters/TimeAgo.svelte';
 import StackUsersSummaryColumn from './StackUsersSummaryColumn.svelte';
+import { DEFAULT_LIMIT } from '$lib/helpers/api';
+import type { FetchClientResponse } from '$api/FetchClient';
 
 export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKeys>>(
 	mode: GetEventsMode = 'summary'
@@ -94,3 +108,112 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 
 	return columns;
 }
+
+export function getOptions(parameters: Writable<IGetEventsParams>) {
+	const columns = getColumns(get(parameters).mode);
+	const columnVisibility = persisted('events-column-visibility', <VisibilityState>{});
+
+	const setColumnVisibility = (updaterOrValue: Updater<VisibilityState>) => {
+		if (updaterOrValue instanceof Function) {
+			columnVisibility.update(() => updaterOrValue(get(columnVisibility)));
+		} else {
+			columnVisibility.update(() => updaterOrValue);
+		}
+
+		options.update((old) => ({
+			...old,
+			state: {
+				...old.state,
+				...{ columnVisibility: get(columnVisibility) }
+			}
+		}));
+	};
+
+	let sorting: ColumnSort[] = [
+		{
+			id: 'date',
+			desc: true
+		}
+	];
+
+	let pagination: PaginationState = {
+		pageIndex: 0,
+		pageSize: DEFAULT_LIMIT
+	};
+	const setPagination = (updaterOrValue: Updater<PaginationState>) => {
+		const previousPageIndex = pagination.pageIndex;
+		if (updaterOrValue instanceof Function) {
+			pagination = updaterOrValue(pagination);
+		} else {
+			pagination = updaterOrValue;
+		}
+
+		options.update((old) => ({
+			...old,
+			state: {
+				...old.state,
+				pagination: pagination
+			}
+		}));
+
+		const meta = get(options).meta as FetchClientResponse<unknown>['meta'];
+		console.log({ updatedPageIndex: pagination.pageIndex, previousPageIndex, meta });
+		parameters.update((params) => ({
+			...params,
+			before:
+				pagination.pageIndex < previousPageIndex && pagination.pageIndex > 0
+					? (meta?.links.previous?.before as string)
+					: undefined,
+			after:
+				pagination.pageIndex > previousPageIndex
+					? (meta?.links.next?.after as string)
+					: undefined,
+			limit: pagination.pageSize
+		}));
+	};
+
+	const setSorting = (updaterOrValue: Updater<ColumnSort[]>) => {
+		if (updaterOrValue instanceof Function) {
+			sorting = updaterOrValue(sorting);
+		} else {
+			sorting = updaterOrValue;
+		}
+
+		options.update((old) => ({
+			...old,
+			state: {
+				...old.state,
+				sorting
+			}
+		}));
+
+		parameters.update((params) => ({
+			...params,
+			before: undefined,
+			after: undefined,
+			sort:
+				sorting.length > 0
+					? sorting.map((sort) => `${sort.desc ? '-' : ''}${sort.id}`).join(',')
+					: undefined
+		}));
+	};
+
+	const options = writable<TableOptions<SummaryModel<SummaryTemplateKeys>>>({
+		columns,
+		data: [],
+		enableSortingRemoval: false,
+		manualSorting: true,
+		manualPagination: true,
+		state: {
+			columnVisibility: get(columnVisibility),
+			sorting
+		},
+		onColumnVisibilityChange: setColumnVisibility,
+		onPaginationChange: setPagination,
+		onSortingChange: setSorting,
+		getCoreRowModel: getCoreRowModel(),
+		getRowId: (originalRow) => originalRow.id
+	});
+
+	return options;
+}

From ef5a0335638cd99152bc9ec927452a9d7e4f6301 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sun, 24 Dec 2023 10:28:27 -0600
Subject: [PATCH 08/35] WIP Table paging

---
 .../data-table/data-table-pagination.svelte   | 11 +++--
 .../lib/components/events/table/options.ts    | 41 ++++++++++++-------
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte
index c27e43b4e8..1abd2e070e 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte
@@ -10,16 +10,15 @@
 	type TData = $$Generic;
 	export let table: Readable<Table<TData>>;
 
-	const rows = derived(table, ($table) => $table.getRowModel().rows);
-	const selectedDataIds = writable([]); // TODO
-	let pageSize = writable(20); // TODO
 	const pageIndex = derived(table, ($table) => $table.getState().pagination.pageIndex);
+	const rows = derived(table, ($table) => $table.getRowModel().rows);
+	const selectedRows = derived(table, ($table) => $table.getSelectedRowModel().rows);
 </script>
 
 <div class="flex items-center justify-between px-2">
 	<div class="flex-1 text-sm text-muted-foreground">
-		{#if $selectedDataIds.length == 0}
-			{Object.keys($selectedDataIds).length} of{' '}
+		{#if $selectedRows.length > 0}
+			{Object.keys($selectedRows).length} of{' '}
 			{$rows.length} row(s) selected.
 		{/if}
 	</div>
@@ -27,7 +26,7 @@
 		<div class="flex items-center space-x-2">
 			<p class="text-sm font-medium">Rows per page</p>
 			<Select.Root
-				onSelectedChange={(selected) => pageSize.set(selected?.value ?? 0)}
+				onSelectedChange={(selected) => $table.setPageSize(selected?.value ?? 10)}
 				selected={{ value: 10, label: '10' }}
 			>
 				<Select.Trigger class="w-[180px]">
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
index 59a939c895..a1a21064ce 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
@@ -113,7 +113,7 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 	const columns = getColumns(get(parameters).mode);
 	const columnVisibility = persisted('events-column-visibility', <VisibilityState>{});
 
-	const setColumnVisibility = (updaterOrValue: Updater<VisibilityState>) => {
+	const onColumnVisibilityChange = (updaterOrValue: Updater<VisibilityState>) => {
 		if (updaterOrValue instanceof Function) {
 			columnVisibility.update(() => updaterOrValue(get(columnVisibility)));
 		} else {
@@ -129,18 +129,18 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 		}));
 	};
 
-	let sorting: ColumnSort[] = [
-		{
-			id: 'date',
-			desc: true
-		}
-	];
-
 	let pagination: PaginationState = {
 		pageIndex: 0,
 		pageSize: DEFAULT_LIMIT
 	};
-	const setPagination = (updaterOrValue: Updater<PaginationState>) => {
+
+	const onPaginationChange = (updaterOrValue: Updater<PaginationState>) => {
+		const { loading = false } = get(options).meta as { loading: boolean };
+		if (loading) {
+			console.log('already loading');
+			return;
+		}
+
 		const previousPageIndex = pagination.pageIndex;
 		if (updaterOrValue instanceof Function) {
 			pagination = updaterOrValue(pagination);
@@ -153,6 +153,10 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 			state: {
 				...old.state,
 				pagination: pagination
+			},
+			meta: {
+				...old.meta,
+				loading: true
 			}
 		}));
 
@@ -172,7 +176,14 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 		}));
 	};
 
-	const setSorting = (updaterOrValue: Updater<ColumnSort[]>) => {
+	let sorting: ColumnSort[] = [
+		{
+			id: 'date',
+			desc: true
+		}
+	];
+
+	const onSortingChange = (updaterOrValue: Updater<ColumnSort[]>) => {
 		if (updaterOrValue instanceof Function) {
 			sorting = updaterOrValue(sorting);
 		} else {
@@ -201,6 +212,8 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 	const options = writable<TableOptions<SummaryModel<SummaryTemplateKeys>>>({
 		columns,
 		data: [],
+		enableRowSelection: true,
+		enableMultiRowSelection: true,
 		enableSortingRemoval: false,
 		manualSorting: true,
 		manualPagination: true,
@@ -208,11 +221,11 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 			columnVisibility: get(columnVisibility),
 			sorting
 		},
-		onColumnVisibilityChange: setColumnVisibility,
-		onPaginationChange: setPagination,
-		onSortingChange: setSorting,
 		getCoreRowModel: getCoreRowModel(),
-		getRowId: (originalRow) => originalRow.id
+		getRowId: (originalRow) => originalRow.id,
+		onColumnVisibilityChange,
+		onPaginationChange,
+		onSortingChange
 	});
 
 	return options;

From c70b17ce09c4c4bb4ebdb6b9df1f3290975e40d5 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Thu, 28 Dec 2023 07:45:30 -0600
Subject: [PATCH 09/35] Upgraded deps

---
 .../Exceptionless.Core.csproj                 |   4 +-
 .../ClientApp/package-lock.json               | 139 +++++++++++-------
 src/Exceptionless.Web/ClientApp/package.json  |  13 +-
 .../Exceptionless.Tests.csproj                |   4 +-
 4 files changed, 93 insertions(+), 67 deletions(-)

diff --git a/src/Exceptionless.Core/Exceptionless.Core.csproj b/src/Exceptionless.Core/Exceptionless.Core.csproj
index 9013b3937f..8f47c1514f 100644
--- a/src/Exceptionless.Core/Exceptionless.Core.csproj
+++ b/src/Exceptionless.Core/Exceptionless.Core.csproj
@@ -21,7 +21,7 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="AutoMapper" Version="12.0.1" />
-    <PackageReference Include="FluentValidation" Version="11.8.1" />
+    <PackageReference Include="FluentValidation" Version="11.9.0" />
     <PackageReference Include="Foundatio.Extensions.Hosting" Version="$(FoundatioVersion)" />
     <PackageReference Include="Foundatio.JsonNet" Version="$(FoundatioVersion)" />
     <PackageReference Include="NEST.JsonNetSerializer" Version="7.17.5" />
@@ -30,7 +30,7 @@
     <PackageReference Include="Microsoft.Extensions.Configuration.Binder" Version="8.0.0" />
     <PackageReference Include="Microsoft.Extensions.Diagnostics.HealthChecks" Version="8.0.0" />
     <PackageReference Include="Microsoft.Extensions.Logging" Version="8.0.0" />
-    <PackageReference Include="Stripe.net" Version="43.7.0" />
+    <PackageReference Include="Stripe.net" Version="43.8.0" />
     <PackageReference Include="System.DirectoryServices" Version="8.0.0" />
     <PackageReference Include="UAParser" Version="3.1.47" />
 
diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
index ab01003836..3c51782879 100644
--- a/src/Exceptionless.Web/ClientApp/package-lock.json
+++ b/src/Exceptionless.Web/ClientApp/package-lock.json
@@ -10,8 +10,8 @@
 			"dependencies": {
 				"@exceptionless/browser": "^3.0.5",
 				"@iconify-json/mdi": "^1.1.63",
-				"@tanstack/svelte-query": "^5.14.2",
-				"@tanstack/svelte-query-devtools": "^5.14.5",
+				"@tanstack/svelte-query": "^5.15.0",
+				"@tanstack/svelte-query-devtools": "^5.15.0",
 				"@tanstack/svelte-table": "^8.11.2",
 				"@web3-storage/parse-link-header": "^3.1.0",
 				"bits-ui": "^0.11.8",
@@ -36,8 +36,8 @@
 				"@sveltejs/adapter-static": "^3.0.1",
 				"@sveltejs/kit": "^2.0.6",
 				"@sveltejs/vite-plugin-svelte": "^3.0.1",
-				"@typescript-eslint/eslint-plugin": "^6.15.0",
-				"@typescript-eslint/parser": "^6.15.0",
+				"@typescript-eslint/eslint-plugin": "^6.16.0",
+				"@typescript-eslint/parser": "^6.16.0",
 				"autoprefixer": "^10.4.16",
 				"cross-env": "^7.0.3",
 				"eslint": "^8.56.0",
@@ -1427,18 +1427,18 @@
 			}
 		},
 		"node_modules/@tanstack/query-devtools": {
-			"version": "5.14.5",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.14.5.tgz",
-			"integrity": "sha512-xM8BQbE4FBAVEPr8t6MFbOJP+canDFz0hcY9Ho+5Z4LQciC60wE+7ZALx5n3InP4R7IELx8AodS5G3KYzBAwCg==",
+			"version": "5.15.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.15.0.tgz",
+			"integrity": "sha512-oz+xBIf+fanmAQ3CZrV4t+1VZiK2nyTcH3zY3G8ukzw+LwX2QGa04ZfF+OCOVF6tPZ2dn1cekMibUb4tevf/aw==",
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			}
 		},
 		"node_modules/@tanstack/svelte-query": {
-			"version": "5.14.2",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query/-/svelte-query-5.14.2.tgz",
-			"integrity": "sha512-77G5iFJg7540Rp3gW9EgqYXQh+MNWhLILxLl5SFiPZ+UJ2aDhWiUzMl0qTJx/TueD++M572p4G4bFLHZ60bawg==",
+			"version": "5.15.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query/-/svelte-query-5.15.0.tgz",
+			"integrity": "sha512-HlDg8uN9heF8ZJH6oJtZlBQjV++jdvyS3Rd4B+bp86RVxgrAjrr4LmKNqBhfOjNWHGmLTNEmzpdvg8QtzGZKhg==",
 			"dependencies": {
 				"@tanstack/query-core": "5.14.2"
 			},
@@ -1451,11 +1451,11 @@
 			}
 		},
 		"node_modules/@tanstack/svelte-query-devtools": {
-			"version": "5.14.5",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.14.5.tgz",
-			"integrity": "sha512-fA5ruV5+pFfbFk4OvEzKpdfoRdedExesfpamQApmh1CAgCMumixchV3EgCs44mOfj/f5k7ZjNW9Vdu3mNnCg4w==",
+			"version": "5.15.0",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.15.0.tgz",
+			"integrity": "sha512-ppLZBRT6tul+OktJJl9ZndIj8rA8GCiAsoHMf5krBltWO67F2B389AKU4w/Ai1AWy2E263vjnmrFW6fEpVqGPg==",
 			"dependencies": {
-				"@tanstack/query-devtools": "5.14.5",
+				"@tanstack/query-devtools": "5.15.0",
 				"esm-env": "^1.0.0"
 			},
 			"funding": {
@@ -1463,7 +1463,7 @@
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/svelte-query": "^5.14.2",
+				"@tanstack/svelte-query": "^5.15.0",
 				"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0"
 			}
 		},
@@ -1546,16 +1546,16 @@
 			"integrity": "sha512-d/MUkJYdOeKycmm75Arql4M5+UuXmf4cHdHKsyw1GcvnNgL6s77UkgSgJ8TE/rI5PYsnwYq5jkcWBLuN/MpQ1A=="
 		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "6.15.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.15.0.tgz",
-			"integrity": "sha512-j5qoikQqPccq9QoBAupOP+CBu8BaJ8BLjaXSioDISeTZkVO3ig7oSIKh3H+rEpee7xCXtWwSB4KIL5l6hWZzpg==",
+			"version": "6.16.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.16.0.tgz",
+			"integrity": "sha512-O5f7Kv5o4dLWQtPX4ywPPa+v9G+1q1x8mz0Kr0pXUtKsevo+gIJHLkGc8RxaZWtP8RrhwhSNIWThnW42K9/0rQ==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/regexpp": "^4.5.1",
-				"@typescript-eslint/scope-manager": "6.15.0",
-				"@typescript-eslint/type-utils": "6.15.0",
-				"@typescript-eslint/utils": "6.15.0",
-				"@typescript-eslint/visitor-keys": "6.15.0",
+				"@typescript-eslint/scope-manager": "6.16.0",
+				"@typescript-eslint/type-utils": "6.16.0",
+				"@typescript-eslint/utils": "6.16.0",
+				"@typescript-eslint/visitor-keys": "6.16.0",
 				"debug": "^4.3.4",
 				"graphemer": "^1.4.0",
 				"ignore": "^5.2.4",
@@ -1581,15 +1581,15 @@
 			}
 		},
 		"node_modules/@typescript-eslint/parser": {
-			"version": "6.15.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.15.0.tgz",
-			"integrity": "sha512-MkgKNnsjC6QwcMdlNAel24jjkEO/0hQaMDLqP4S9zq5HBAUJNQB6y+3DwLjX7b3l2b37eNAxMPLwb3/kh8VKdA==",
+			"version": "6.16.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.16.0.tgz",
+			"integrity": "sha512-H2GM3eUo12HpKZU9njig3DF5zJ58ja6ahj1GoHEHOgQvYxzoFJJEvC1MQ7T2l9Ha+69ZSOn7RTxOdpC/y3ikMw==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/scope-manager": "6.15.0",
-				"@typescript-eslint/types": "6.15.0",
-				"@typescript-eslint/typescript-estree": "6.15.0",
-				"@typescript-eslint/visitor-keys": "6.15.0",
+				"@typescript-eslint/scope-manager": "6.16.0",
+				"@typescript-eslint/types": "6.16.0",
+				"@typescript-eslint/typescript-estree": "6.16.0",
+				"@typescript-eslint/visitor-keys": "6.16.0",
 				"debug": "^4.3.4"
 			},
 			"engines": {
@@ -1609,13 +1609,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "6.15.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.15.0.tgz",
-			"integrity": "sha512-+BdvxYBltqrmgCNu4Li+fGDIkW9n//NrruzG9X1vBzaNK+ExVXPoGB71kneaVw/Jp+4rH/vaMAGC6JfMbHstVg==",
+			"version": "6.16.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.16.0.tgz",
+			"integrity": "sha512-0N7Y9DSPdaBQ3sqSCwlrm9zJwkpOuc6HYm7LpzLAPqBL7dmzAUimr4M29dMkOP/tEwvOCC/Cxo//yOfJD3HUiw==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.15.0",
-				"@typescript-eslint/visitor-keys": "6.15.0"
+				"@typescript-eslint/types": "6.16.0",
+				"@typescript-eslint/visitor-keys": "6.16.0"
 			},
 			"engines": {
 				"node": "^16.0.0 || >=18.0.0"
@@ -1626,13 +1626,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/type-utils": {
-			"version": "6.15.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.15.0.tgz",
-			"integrity": "sha512-CnmHKTfX6450Bo49hPg2OkIm/D/TVYV7jO1MCfPYGwf6x3GO0VU8YMO5AYMn+u3X05lRRxA4fWCz87GFQV6yVQ==",
+			"version": "6.16.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.16.0.tgz",
+			"integrity": "sha512-ThmrEOcARmOnoyQfYkHw/DX2SEYBalVECmoldVuH6qagKROp/jMnfXpAU/pAIWub9c4YTxga+XwgAkoA0pxfmg==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/typescript-estree": "6.15.0",
-				"@typescript-eslint/utils": "6.15.0",
+				"@typescript-eslint/typescript-estree": "6.16.0",
+				"@typescript-eslint/utils": "6.16.0",
 				"debug": "^4.3.4",
 				"ts-api-utils": "^1.0.1"
 			},
@@ -1653,9 +1653,9 @@
 			}
 		},
 		"node_modules/@typescript-eslint/types": {
-			"version": "6.15.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.15.0.tgz",
-			"integrity": "sha512-yXjbt//E4T/ee8Ia1b5mGlbNj9fB9lJP4jqLbZualwpP2BCQ5is6BcWwxpIsY4XKAhmdv3hrW92GdtJbatC6dQ==",
+			"version": "6.16.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.16.0.tgz",
+			"integrity": "sha512-hvDFpLEvTJoHutVl87+MG/c5C8I6LOgEx05zExTSJDEVU7hhR3jhV8M5zuggbdFCw98+HhZWPHZeKS97kS3JoQ==",
 			"dev": true,
 			"engines": {
 				"node": "^16.0.0 || >=18.0.0"
@@ -1666,16 +1666,17 @@
 			}
 		},
 		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "6.15.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.15.0.tgz",
-			"integrity": "sha512-7mVZJN7Hd15OmGuWrp2T9UvqR2Ecg+1j/Bp1jXUEY2GZKV6FXlOIoqVDmLpBiEiq3katvj/2n2mR0SDwtloCew==",
+			"version": "6.16.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.16.0.tgz",
+			"integrity": "sha512-VTWZuixh/vr7nih6CfrdpmFNLEnoVBF1skfjdyGnNwXOH1SLeHItGdZDHhhAIzd3ACazyY2Fg76zuzOVTaknGA==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.15.0",
-				"@typescript-eslint/visitor-keys": "6.15.0",
+				"@typescript-eslint/types": "6.16.0",
+				"@typescript-eslint/visitor-keys": "6.16.0",
 				"debug": "^4.3.4",
 				"globby": "^11.1.0",
 				"is-glob": "^4.0.3",
+				"minimatch": "9.0.3",
 				"semver": "^7.5.4",
 				"ts-api-utils": "^1.0.1"
 			},
@@ -1692,18 +1693,42 @@
 				}
 			}
 		},
+		"node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+			"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+			"version": "9.0.3",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+			"integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
 		"node_modules/@typescript-eslint/utils": {
-			"version": "6.15.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.15.0.tgz",
-			"integrity": "sha512-eF82p0Wrrlt8fQSRL0bGXzK5nWPRV2dYQZdajcfzOD9+cQz9O7ugifrJxclB+xVOvWvagXfqS4Es7vpLP4augw==",
+			"version": "6.16.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.16.0.tgz",
+			"integrity": "sha512-T83QPKrBm6n//q9mv7oiSvy/Xq/7Hyw9SzSEhMHJwznEmQayfBM87+oAlkNAMEO7/MjIwKyOHgBJbxB0s7gx2A==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.4.0",
 				"@types/json-schema": "^7.0.12",
 				"@types/semver": "^7.5.0",
-				"@typescript-eslint/scope-manager": "6.15.0",
-				"@typescript-eslint/types": "6.15.0",
-				"@typescript-eslint/typescript-estree": "6.15.0",
+				"@typescript-eslint/scope-manager": "6.16.0",
+				"@typescript-eslint/types": "6.16.0",
+				"@typescript-eslint/typescript-estree": "6.16.0",
 				"semver": "^7.5.4"
 			},
 			"engines": {
@@ -1718,12 +1743,12 @@
 			}
 		},
 		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "6.15.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.15.0.tgz",
-			"integrity": "sha512-1zvtdC1a9h5Tb5jU9x3ADNXO9yjP8rXlaoChu0DQX40vf5ACVpYIVIZhIMZ6d5sDXH7vq4dsZBT1fEGj8D2n2w==",
+			"version": "6.16.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.16.0.tgz",
+			"integrity": "sha512-QSFQLruk7fhs91a/Ep/LqRdbJCZ1Rq03rqBdKT5Ky17Sz8zRLUksqIe9DW0pKtg/Z35/ztbLQ6qpOCN6rOC11A==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.15.0",
+				"@typescript-eslint/types": "6.16.0",
 				"eslint-visitor-keys": "^3.4.1"
 			},
 			"engines": {
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index 3e84ce8683..948ba7790a 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -18,15 +18,16 @@
 		"generate-models": "swagger-typescript-api -p http://localhost:5200/docs/v2/swagger.json -o ./src/lib/models -n api.generated.ts --no-client --templates api-templates",
 		"generate-templates": "swagger-typescript-api generate-templates -o api-templates",
 		"test:integration": "playwright test",
-		"test:unit": "vitest"
+		"test:unit": "vitest",
+		"upgrade": "ncu -i"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.40.1",
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.6",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"@typescript-eslint/eslint-plugin": "^6.15.0",
-		"@typescript-eslint/parser": "^6.15.0",
+		"@typescript-eslint/eslint-plugin": "^6.16.0",
+		"@typescript-eslint/parser": "^6.16.0",
 		"autoprefixer": "^10.4.16",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.56.0",
@@ -48,8 +49,8 @@
 	"dependencies": {
 		"@exceptionless/browser": "^3.0.5",
 		"@iconify-json/mdi": "^1.1.63",
-		"@tanstack/svelte-query": "^5.14.2",
-		"@tanstack/svelte-query-devtools": "^5.14.5",
+		"@tanstack/svelte-query": "^5.15.0",
+		"@tanstack/svelte-query-devtools": "^5.15.0",
 		"@tanstack/svelte-table": "^8.11.2",
 		"@web3-storage/parse-link-header": "^3.1.0",
 		"bits-ui": "^0.11.8",
@@ -70,4 +71,4 @@
 		"unplugin-icons": "^0.18.1"
 	},
 	"type": "module"
-}
+}
\ No newline at end of file
diff --git a/tests/Exceptionless.Tests/Exceptionless.Tests.csproj b/tests/Exceptionless.Tests/Exceptionless.Tests.csproj
index a1c10ee942..b2b75bbe65 100644
--- a/tests/Exceptionless.Tests/Exceptionless.Tests.csproj
+++ b/tests/Exceptionless.Tests/Exceptionless.Tests.csproj
@@ -10,9 +10,9 @@
 
     <PackageReference Include="FluentRest.NewtonsoftJson" Version="9.8.0" />
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.8.0" />
-    <PackageReference Include="xunit" Version="2.6.3" />
+    <PackageReference Include="xunit" Version="2.6.4" />
     <PackageReference Include="GitHubActionsTestLogger" Version="2.3.3" PrivateAssets="All" />
-    <PackageReference Include="xunit.runner.visualstudio" Version="2.5.5" PrivateAssets="All" />
+    <PackageReference Include="xunit.runner.visualstudio" Version="2.5.6" PrivateAssets="All" />
     <PackageReference Include="coverlet.collector" Version="6.0.0">
         <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         <PrivateAssets>all</PrivateAssets>

From fff1c032997957de3a067cb9c5a309e3f20b0393 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Thu, 28 Dec 2023 20:11:53 -0600
Subject: [PATCH 10/35] removed priorities

---
 src/Exceptionless.Web/ClientApp/package.json  |  2 +-
 .../data-table-priority-cell.svelte           | 34 -------------------
 .../src/lib/components/data-table/index.ts    |  3 --
 .../events/table/EventsDataTable.svelte       | 29 ++--------------
 .../lib/components/events/table/options.ts    |  2 --
 5 files changed, 3 insertions(+), 67 deletions(-)
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-priority-cell.svelte

diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index 948ba7790a..13eb16d0f6 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -71,4 +71,4 @@
 		"unplugin-icons": "^0.18.1"
 	},
 	"type": "module"
-}
\ No newline at end of file
+}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-priority-cell.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-priority-cell.svelte
deleted file mode 100644
index 6610f43c37..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-priority-cell.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-	import { ArrowDown, ArrowRight, ArrowUp } from 'radix-icons-svelte';
-
-	const priorities = [
-		{
-			label: 'Low',
-			value: 'low',
-			icon: ArrowDown
-		},
-		{
-			label: 'Medium',
-			value: 'medium',
-			icon: ArrowRight
-		},
-		{
-			label: 'High',
-			value: 'high',
-			icon: ArrowUp
-		}
-	];
-
-	export let value: string;
-	const priority = priorities.find((priority) => priority.value === value);
-	const Icon = priority?.icon;
-</script>
-
-{#if priority}
-	<div class="flex items-center">
-		{#if Icon}
-			<Icon class="w-4 h-4 mr-2 text-muted-foreground" />
-		{/if}
-		<span>{priority.label}</span>
-	</div>
-{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
index 6f350fb270..4d17772841 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
@@ -4,7 +4,6 @@ import Toolbar from './data-table-toolbar.svelte';
 import FacetedFilter from './data-table-faceted-filter.svelte';
 import Pagination from './data-table-pagination.svelte';
 
-import PriorityCell from './data-table-priority-cell.svelte';
 import StatusCell from './data-table-status-cell.svelte';
 import TitleCell from './data-table-title-cell.svelte';
 
@@ -14,7 +13,6 @@ export {
 	Toolbar,
 	FacetedFilter,
 	Pagination,
-	PriorityCell,
 	StatusCell,
 	TitleCell,
 	//
@@ -23,7 +21,6 @@ export {
 	Toolbar as DataTableToolbar,
 	FacetedFilter as DataTableFacetedFilter,
 	Pagination as DataTablePagination,
-	PriorityCell as DataTablePriorityCell,
 	StatusCell as DataTableStatusCell,
 	TitleCell as DataTableTitleCell
 };
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
index 6d9ffaa9b2..8d17224b0b 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -114,31 +114,11 @@
 		}
 	];
 
-	const priorities = [
-		{
-			label: 'Low',
-			value: 'low',
-			icon: ArrowDown
-		},
-		{
-			label: 'Medium',
-			value: 'medium',
-			icon: ArrowRight
-		},
-		{
-			label: 'High',
-			value: 'high',
-			icon: ArrowUp
-		}
-	];
-
 	const filterValue: Writable<string> = writable('');
 	const filterValues: Writable<{
 		status: string[];
-		priority: string[];
 	}> = writable({
-		status: [],
-		priority: []
+		status: []
 	});
 
 	$: showReset = Object.values($filterValues).some((v) => v.length > 0);
@@ -160,16 +140,11 @@
 			title="Status"
 			options={statuses}
 		/>
-		<DataTable.FacetedFilter
-			bind:filterValues={$filterValues.priority}
-			title="Priority"
-			options={priorities}
-		/>
+
 		{#if showReset}
 			<Button
 				on:click={() => {
 					$filterValues.status = [];
-					$filterValues.priority = [];
 				}}
 				variant="ghost"
 				class="h-8 px-2 lg:px-3"
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
index a1a21064ce..daca33f4af 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
@@ -137,7 +137,6 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 	const onPaginationChange = (updaterOrValue: Updater<PaginationState>) => {
 		const { loading = false } = get(options).meta as { loading: boolean };
 		if (loading) {
-			console.log('already loading');
 			return;
 		}
 
@@ -161,7 +160,6 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 		}));
 
 		const meta = get(options).meta as FetchClientResponse<unknown>['meta'];
-		console.log({ updatedPageIndex: pagination.pageIndex, previousPageIndex, meta });
 		parameters.update((params) => ({
 			...params,
 			before:

From b15fe0425d9de7d4bde9184e1f5f3940dd9b15de Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sat, 6 Jan 2024 17:31:27 -0600
Subject: [PATCH 11/35] Updated Foundatio

---
 src/Directory.Build.props                            |  2 +-
 src/Exceptionless.Core/Exceptionless.Core.csproj     |  4 ++--
 src/Exceptionless.Insulation/Bootstrapper.cs         | 12 ++++++------
 .../Exceptionless.Insulation.csproj                  | 12 ++++++------
 .../Geo/MaxMindGeoIpService.cs                       |  4 ++--
 src/Exceptionless.Job/Exceptionless.Job.csproj       |  4 ++--
 src/Exceptionless.Web/Exceptionless.Web.csproj       |  6 +++---
 tests/Exceptionless.Tests/Exceptionless.Tests.csproj |  2 +-
 8 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/Directory.Build.props b/src/Directory.Build.props
index cecf1e98ba..bd755e5e63 100644
--- a/src/Directory.Build.props
+++ b/src/Directory.Build.props
@@ -15,7 +15,7 @@
     <EmbedUntrackedSources>true</EmbedUntrackedSources>
     <ReferenceFoundatioSource>false</ReferenceFoundatioSource>
     <ReferenceFoundatioRepositoriesSource>false</ReferenceFoundatioRepositoriesSource>
-    <FoundatioVersion>10.6.1</FoundatioVersion>
+    <FoundatioVersion>10.7.0</FoundatioVersion>
     <AccelerateBuildsInVisualStudio>true</AccelerateBuildsInVisualStudio>
   </PropertyGroup>
 
diff --git a/src/Exceptionless.Core/Exceptionless.Core.csproj b/src/Exceptionless.Core/Exceptionless.Core.csproj
index 8f47c1514f..b49bb47da0 100644
--- a/src/Exceptionless.Core/Exceptionless.Core.csproj
+++ b/src/Exceptionless.Core/Exceptionless.Core.csproj
@@ -30,11 +30,11 @@
     <PackageReference Include="Microsoft.Extensions.Configuration.Binder" Version="8.0.0" />
     <PackageReference Include="Microsoft.Extensions.Diagnostics.HealthChecks" Version="8.0.0" />
     <PackageReference Include="Microsoft.Extensions.Logging" Version="8.0.0" />
-    <PackageReference Include="Stripe.net" Version="43.8.0" />
+    <PackageReference Include="Stripe.net" Version="43.9.0" />
     <PackageReference Include="System.DirectoryServices" Version="8.0.0" />
     <PackageReference Include="UAParser" Version="3.1.47" />
 
-    <PackageReference Include="Foundatio.Repositories.Elasticsearch" Version="7.17.6" Condition="'$(ReferenceFoundatioRepositoriesSource)' == '' OR '$(ReferenceFoundatioRepositoriesSource)' == 'false'" />
+    <PackageReference Include="Foundatio.Repositories.Elasticsearch" Version="7.17.7" Condition="'$(ReferenceFoundatioRepositoriesSource)' == '' OR '$(ReferenceFoundatioRepositoriesSource)' == 'false'" />
     <ProjectReference Include="..\..\..\..\Foundatio\Foundatio.Repositories\src\Foundatio.Repositories.Elasticsearch\Foundatio.Repositories.Elasticsearch.csproj" Condition="'$(ReferenceFoundatioRepositoriesSource)' == 'true'" />
   </ItemGroup>
 </Project>
diff --git a/src/Exceptionless.Insulation/Bootstrapper.cs b/src/Exceptionless.Insulation/Bootstrapper.cs
index d917e49938..06a1d100b6 100644
--- a/src/Exceptionless.Insulation/Bootstrapper.cs
+++ b/src/Exceptionless.Insulation/Bootstrapper.cs
@@ -66,7 +66,7 @@ public static void RegisterServices(IServiceCollection services, AppOptions appO
         RegisterQueue(services, appOptions.QueueOptions, runMaintenanceTasks);
         RegisterStorage(services, appOptions.StorageOptions);
 
-        var healthCheckBuilder = RegisterHealthChecks(services, appOptions);
+        var healthCheckBuilder = RegisterHealthChecks(services);
 
         if (!String.IsNullOrEmpty(appOptions.EmailOptions.SmtpHost))
         {
@@ -75,7 +75,7 @@ public static void RegisterServices(IServiceCollection services, AppOptions appO
         }
     }
 
-    private static IHealthChecksBuilder RegisterHealthChecks(IServiceCollection services, AppOptions appOptions)
+    private static IHealthChecksBuilder RegisterHealthChecks(IServiceCollection services)
     {
         services.AddStartupActionToWaitForHealthChecks("Critical");
 
@@ -106,7 +106,7 @@ private static void RegisterCache(IServiceCollection container, CacheOptions opt
     {
         if (String.Equals(options.Provider, "redis"))
         {
-            container.ReplaceSingleton(s => GetRedisConnection(options.Data));
+            container.ReplaceSingleton(s => GetRedisConnection(options.Data, s.GetRequiredService<ILoggerFactory>()));
 
             if (!String.IsNullOrEmpty(options.Scope))
                 container.ReplaceSingleton<ICacheClient>(s => new ScopedCacheClient(CreateRedisCacheClient(s), options.Scope));
@@ -121,7 +121,7 @@ private static void RegisterMessageBus(IServiceCollection container, MessageBusO
     {
         if (String.Equals(options.Provider, "redis"))
         {
-            container.ReplaceSingleton(s => GetRedisConnection(options.Data));
+            container.ReplaceSingleton(s => GetRedisConnection(options.Data, s.GetRequiredService<ILoggerFactory>()));
 
             container.ReplaceSingleton<IMessageBus>(s => new RedisMessageBus(new RedisMessageBusOptions
             {
@@ -143,9 +143,9 @@ private static void RegisterMessageBus(IServiceCollection container, MessageBusO
         }
     }
 
-    private static IConnectionMultiplexer GetRedisConnection(Dictionary<string, string> options)
+    private static IConnectionMultiplexer GetRedisConnection(Dictionary<string, string> options, ILoggerFactory loggerFactory)
     {
-        return ConnectionMultiplexer.Connect(options.GetString("server"));
+        return ConnectionMultiplexer.Connect(options.GetString("server"), o => o.LoggerFactory = loggerFactory);
     }
 
     private static void RegisterQueue(IServiceCollection container, QueueOptions options, bool runMaintenanceTasks)
diff --git a/src/Exceptionless.Insulation/Exceptionless.Insulation.csproj b/src/Exceptionless.Insulation/Exceptionless.Insulation.csproj
index 763db24a18..9109825077 100644
--- a/src/Exceptionless.Insulation/Exceptionless.Insulation.csproj
+++ b/src/Exceptionless.Insulation/Exceptionless.Insulation.csproj
@@ -2,13 +2,13 @@
   <ItemGroup>
     <PackageReference Include="Geocoding.Google" Version="4.0.1" />
     <PackageReference Include="MaxMind.GeoIP2" Version="5.2.0" />
-    <PackageReference Include="Foundatio.Aliyun" Version="10.6.1" />
-    <PackageReference Include="Foundatio.AWS" Version="10.6.1" />
-    <PackageReference Include="Foundatio.AzureStorage" Version="10.6.1" />
+    <PackageReference Include="Foundatio.Aliyun" Version="10.7.0" />
+    <PackageReference Include="Foundatio.AWS" Version="10.7.0" />
+    <PackageReference Include="Foundatio.AzureStorage" Version="10.7.0" />
     <PackageReference Include="Foundatio.Extensions.Hosting" Version="$(FoundatioVersion)" />
-    <PackageReference Include="Foundatio.Minio" Version="10.6.1" />
-    <PackageReference Include="Foundatio.RabbitMQ" Version="10.6.1" />
-    <PackageReference Include="Foundatio.Redis" Version="10.6.1" />
+    <PackageReference Include="Foundatio.Minio" Version="10.7.0" />
+    <PackageReference Include="Foundatio.RabbitMQ" Version="10.7.0" />
+    <PackageReference Include="Foundatio.Redis" Version="10.7.0" />
     <PackageReference Include="Microsoft.Extensions.Configuration.FileExtensions" Version="8.0.0" />
     <PackageReference Include="Microsoft.Extensions.Configuration.EnvironmentVariables" Version="8.0.0" />
     <PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="8.0.0" />
diff --git a/src/Exceptionless.Insulation/Geo/MaxMindGeoIpService.cs b/src/Exceptionless.Insulation/Geo/MaxMindGeoIpService.cs
index 9186007d67..fdc7c8e0fa 100644
--- a/src/Exceptionless.Insulation/Geo/MaxMindGeoIpService.cs
+++ b/src/Exceptionless.Insulation/Geo/MaxMindGeoIpService.cs
@@ -28,7 +28,7 @@ public MaxMindGeoIpService(IFileStorage storage, ILoggerFactory loggerFactory)
 
     public async Task<GeoResult?> ResolveIpAsync(string ip, CancellationToken cancellationToken = new())
     {
-        if (String.IsNullOrEmpty(ip) || (!ip.Contains(".") && !ip.Contains(":")))
+        if (String.IsNullOrEmpty(ip) || (!ip.Contains('.') && !ip.Contains(':')))
             return null;
 
         ip = ip.Trim();
@@ -103,7 +103,7 @@ public MaxMindGeoIpService(IFileStorage storage, ILoggerFactory loggerFactory)
         _logger.LogInformation("Loading GeoIP database.");
         try
         {
-            using (var stream = await _storage.GetFileStreamAsync(DownloadGeoIPDatabaseJob.GEO_IP_DATABASE_PATH, cancellationToken).AnyContext())
+            using (var stream = await _storage.GetFileStreamAsync(DownloadGeoIPDatabaseJob.GEO_IP_DATABASE_PATH, StreamMode.Read, cancellationToken).AnyContext())
                 _database = new DatabaseReader(stream);
         }
         catch (Exception ex)
diff --git a/src/Exceptionless.Job/Exceptionless.Job.csproj b/src/Exceptionless.Job/Exceptionless.Job.csproj
index 6f2da50d90..5080bb06b8 100644
--- a/src/Exceptionless.Job/Exceptionless.Job.csproj
+++ b/src/Exceptionless.Job/Exceptionless.Job.csproj
@@ -17,9 +17,9 @@
     <PackageReference Include="OpenTelemetry.Extensions.Hosting" Version="1.7.0" />
     <PackageReference Include="OpenTelemetry.Instrumentation.AspNetCore" Version="1.7.0" />
     <PackageReference Include="OpenTelemetry.Instrumentation.Http" Version="1.7.0" />
-    <PackageReference Include="OpenTelemetry.Instrumentation.StackExchangeRedis" Version="1.0.0-rc9.12" />
+    <PackageReference Include="OpenTelemetry.Instrumentation.StackExchangeRedis" Version="1.0.0-rc9.13" />
     <PackageReference Include="OpenTelemetry.Instrumentation.ElasticsearchClient" Version="1.0.0-beta.5" />
-    <PackageReference Include="OpenTelemetry.Instrumentation.Runtime" Version="1.5.1" />
+    <PackageReference Include="OpenTelemetry.Instrumentation.Runtime" Version="1.7.0" />
   </ItemGroup>
 
   <ItemGroup>
diff --git a/src/Exceptionless.Web/Exceptionless.Web.csproj b/src/Exceptionless.Web/Exceptionless.Web.csproj
index 5ae7c73f6b..29367d6893 100644
--- a/src/Exceptionless.Web/Exceptionless.Web.csproj
+++ b/src/Exceptionless.Web/Exceptionless.Web.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
   <PropertyGroup>
     <SpaRoot>ClientApp\</SpaRoot>
     <AngularSpaRoot>ClientApp.angular\</AngularSpaRoot>
@@ -35,9 +35,9 @@
     <PackageReference Include="OpenTelemetry.Extensions.Hosting" Version="1.7.0" />
     <PackageReference Include="OpenTelemetry.Instrumentation.AspNetCore" Version="1.7.0" />
     <PackageReference Include="OpenTelemetry.Instrumentation.Http" Version="1.7.0" />
-    <PackageReference Include="OpenTelemetry.Instrumentation.StackExchangeRedis" Version="1.0.0-rc9.12" />
+    <PackageReference Include="OpenTelemetry.Instrumentation.StackExchangeRedis" Version="1.0.0-rc9.13" />
     <PackageReference Include="OpenTelemetry.Instrumentation.ElasticsearchClient" Version="1.0.0-beta.5" />
-    <PackageReference Include="OpenTelemetry.Instrumentation.Runtime" Version="1.5.1" />
+    <PackageReference Include="OpenTelemetry.Instrumentation.Runtime" Version="1.7.0" />
     <PackageReference Include="Swashbuckle.AspNetCore.Newtonsoft" Version="6.5.0" />
     <PackageReference Include="Unchase.Swashbuckle.AspNetCore.Extensions" Version="2.7.1" />
   </ItemGroup>
diff --git a/tests/Exceptionless.Tests/Exceptionless.Tests.csproj b/tests/Exceptionless.Tests/Exceptionless.Tests.csproj
index b2b75bbe65..0b22106e52 100644
--- a/tests/Exceptionless.Tests/Exceptionless.Tests.csproj
+++ b/tests/Exceptionless.Tests/Exceptionless.Tests.csproj
@@ -10,7 +10,7 @@
 
     <PackageReference Include="FluentRest.NewtonsoftJson" Version="9.8.0" />
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.8.0" />
-    <PackageReference Include="xunit" Version="2.6.4" />
+    <PackageReference Include="xunit" Version="2.6.5" />
     <PackageReference Include="GitHubActionsTestLogger" Version="2.3.3" PrivateAssets="All" />
     <PackageReference Include="xunit.runner.visualstudio" Version="2.5.6" PrivateAssets="All" />
     <PackageReference Include="coverlet.collector" Version="6.0.0">

From 6ffe2e932104a5c71f21ed351eba1c4ea1929a03 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sat, 6 Jan 2024 18:40:03 -0600
Subject: [PATCH 12/35] Updated docker tags and readme

---
 .devcontainer/Dockerfile                  |  4 ++--
 .devcontainer/docker-compose.yml          |  2 +-
 README.md                                 |  5 +++--
 build/docker/elasticsearch/8.x/Dockerfile |  2 +-
 docker/docker-compose.apm.yml             | 10 +++++-----
 docker/docker-compose.dev.yml             |  6 +++---
 docker/docker-compose.yml                 |  6 +++---
 samples/docker-compose.yml                |  2 +-
 8 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
index 7c028d6e12..a4f8e455ba 100644
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/devcontainers/dotnet:0-7.0
+FROM mcr.microsoft.com/devcontainers/dotnet:0-8.0
 
 RUN apt-get clean -y && rm -rf /var/lib/apt/lists/* /tmp/library-scripts
 
@@ -12,4 +12,4 @@ RUN sudo dotnet dev-certs https \
 # Change shell to zsh
 RUN chsh -s $(which zsh)
 
-ENTRYPOINT [ "/bin/zsh" ]
\ No newline at end of file
+ENTRYPOINT [ "/bin/zsh" ]
diff --git a/.devcontainer/docker-compose.yml b/.devcontainer/docker-compose.yml
index cf208c361c..82c7522fec 100644
--- a/.devcontainer/docker-compose.yml
+++ b/.devcontainer/docker-compose.yml
@@ -45,7 +45,7 @@ services:
       - 5601:5601
 
   redis:
-    image: redis:6-alpine
+    image: redis:7.2-alpine
     ports:
       - 6379:6379
 
diff --git a/README.md b/README.md
index 83b91c08cc..7aae343832 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@ Refer to the [Exceptionless documentation](https://exceptionless.com/docs/).
 We provide very reasonably priced hosting at [Exceptionless](https://exceptionless.com). By using our hosted service, you are supporting the project and helping it get better! We also provide set up and support services.
 
 Exceptionless can easily be run locally using Docker:
+
 - `docker run --rm -it -p 5200:8080 exceptionless/exceptionless:latest`
 - Open `http://localhost:5200`
 - Create an account. The first account in the system will automatically be an admin.
@@ -25,12 +26,12 @@ This will run a completely self-contained simple instance of Exceptionless. It i
 
 ## Contributing
 
-_In appreciation for anyone who submits a non-trivial pull request, we will give you a free [Exceptionless](https://exceptionless.com) paid plan for a year. After your pull request is accepted, simply send an email to team@exceptionless.io with the name of your organization and we will upgrade you to a paid plan._
+_In appreciation for anyone who submits a non-trivial pull request, we will give you a free [Exceptionless](https://exceptionless.com) paid plan for a year. After your pull request is accepted, simply send an email to <team@exceptionless.io> with the name of your organization and we will upgrade you to a paid plan._
 
 - Please read the [contributing document](https://github.com/exceptionless/Exceptionless/blob/main/CONTRIBUTING.md)
 - Requirements
   - [Docker](https://www.docker.com/get-docker)
-  - [.NET 7.0](https://dotnet.microsoft.com/)
+  - [.NET 8.0](https://dotnet.microsoft.com/)
   - [Node 18+](https://nodejs.org/)
 - Visual Studio Code
   - Open Visual Studio Code and then open the Exceptionless root folder
diff --git a/build/docker/elasticsearch/8.x/Dockerfile b/build/docker/elasticsearch/8.x/Dockerfile
index 56c9770018..7a870afdf5 100644
--- a/build/docker/elasticsearch/8.x/Dockerfile
+++ b/build/docker/elasticsearch/8.x/Dockerfile
@@ -1,5 +1,5 @@
 # https://www.docker.elastic.co/
-FROM docker.elastic.co/elasticsearch/elasticsearch:8.11.1
+FROM docker.elastic.co/elasticsearch/elasticsearch:8.11.3
 
 RUN elasticsearch-plugin install -b mapper-size
 RUN elasticsearch-plugin install -b repository-azure
diff --git a/docker/docker-compose.apm.yml b/docker/docker-compose.apm.yml
index 9ed94c6e55..80ec58437c 100644
--- a/docker/docker-compose.apm.yml
+++ b/docker/docker-compose.apm.yml
@@ -2,7 +2,7 @@ version: "2.2"
 
 services:
   setup:
-    image: docker.elastic.co/elasticsearch/elasticsearch:8.11.1
+    image: docker.elastic.co/elasticsearch/elasticsearch:8.11.3
     volumes:
       - certs:/usr/share/elasticsearch/config/certs
     user: "0"
@@ -53,7 +53,7 @@ services:
     depends_on:
       setup:
         condition: service_healthy
-    image: docker.elastic.co/elasticsearch/elasticsearch:8.11.1
+    image: docker.elastic.co/elasticsearch/elasticsearch:8.11.3
     volumes:
       - certs:/usr/share/elasticsearch/config/certs
       - esdata:/usr/share/elasticsearch/data
@@ -98,7 +98,7 @@ services:
     depends_on:
       elasticsearch:
         condition: service_healthy
-    image: docker.elastic.co/kibana/kibana:8.11.1
+    image: docker.elastic.co/kibana/kibana:8.11.3
     volumes:
       - certs:/usr/share/kibana/config/certs
     ports:
@@ -124,7 +124,7 @@ services:
     depends_on:
       elasticsearch:
         condition: service_healthy
-    image: docker.elastic.co/apm/apm-server:8.11.1
+    image: docker.elastic.co/apm/apm-server:8.11.3
     volumes:
       - certs:/usr/share/apm-server/certs
     ports:
@@ -149,7 +149,7 @@ services:
         -E output.elasticsearch.ssl.certificate_authorities=["/usr/share/apm-server/certs/ca/ca.crt"]
 
   redis:
-    image: redis:6-alpine
+    image: redis:7.2-alpine
     ports:
       - 6379:6379
 
diff --git a/docker/docker-compose.dev.yml b/docker/docker-compose.dev.yml
index 8e0e246a31..ae3970930c 100644
--- a/docker/docker-compose.dev.yml
+++ b/docker/docker-compose.dev.yml
@@ -50,7 +50,7 @@ services:
       - appdata:/app/storage
 
   elasticsearch:
-    image: exceptionless/elasticsearch:7.17.14
+    image: exceptionless/elasticsearch:8.11.3
     environment:
       discovery.type: single-node
       xpack.security.enabled: "false"
@@ -64,12 +64,12 @@ services:
   kibana:
     depends_on:
       - elasticsearch
-    image: docker.elastic.co/kibana/kibana:7.17.14
+    image: docker.elastic.co/kibana/kibana:8.11.3
     ports:
       - 5601:5601
 
   redis:
-    image: redis:6.0-alpine
+    image: redis:7.2-alpine
     ports:
       - 6379:6379
 
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 99c33e4bc6..b264189923 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -2,7 +2,7 @@ version: "2.2"
 
 services:
   elasticsearch:
-    image: exceptionless/elasticsearch:8.11.1
+    image: exceptionless/elasticsearch:8.11.3
     environment:
       node.name: elasticsearch
       cluster.name: exceptionless
@@ -18,14 +18,14 @@ services:
   kibana:
     depends_on:
       - elasticsearch
-    image: docker.elastic.co/kibana/kibana:8.11.1
+    image: docker.elastic.co/kibana/kibana:8.11.3
     environment:
       xpack.security.enabled: "false"
     ports:
       - 5601:5601
 
   redis:
-    image: redis:6-alpine
+    image: redis:7.2-alpine
     ports:
       - 6379:6379
 
diff --git a/samples/docker-compose.yml b/samples/docker-compose.yml
index c795d47b8f..d4da7f9732 100644
--- a/samples/docker-compose.yml
+++ b/samples/docker-compose.yml
@@ -63,7 +63,7 @@ services:
       - 5601:5601
 
   redis:
-    image: redis:6.0-alpine
+    image: redis:7.2-alpine
     ports:
       - 6379:6379
 

From 63b4beda035885c9066fa5170d2ac6f7f6ce7481 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sat, 6 Jan 2024 18:42:59 -0600
Subject: [PATCH 13/35] Updated Elastic 7.x images to latest, please use this
 version to upgrade to Elasticsearch 8.

---
 Dockerfile                                | 2 +-
 build/docker/elasticsearch/7.x/Dockerfile | 2 +-
 docker/docker-compose.7x.yml              | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 17fa364e00..ea870a4c01 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -153,7 +153,7 @@ ENTRYPOINT ["/app/docker-entrypoint.sh"]
 
 # completely self-contained 7.x
 
-FROM exceptionless/elasticsearch:7.17.14 AS exceptionless7
+FROM exceptionless/elasticsearch:7.17.16 AS exceptionless7
 
 WORKDIR /app
 COPY --from=job-publish /app/src/Exceptionless.Job/out ./
diff --git a/build/docker/elasticsearch/7.x/Dockerfile b/build/docker/elasticsearch/7.x/Dockerfile
index fba7347360..45496c4929 100644
--- a/build/docker/elasticsearch/7.x/Dockerfile
+++ b/build/docker/elasticsearch/7.x/Dockerfile
@@ -1,5 +1,5 @@
 # https://www.docker.elastic.co/
-FROM docker.elastic.co/elasticsearch/elasticsearch:7.17.14
+FROM docker.elastic.co/elasticsearch/elasticsearch:7.17.16
 
 RUN elasticsearch-plugin install -b mapper-size
 RUN elasticsearch-plugin install -b repository-azure
diff --git a/docker/docker-compose.7x.yml b/docker/docker-compose.7x.yml
index 9f80417145..2d693dabc0 100644
--- a/docker/docker-compose.7x.yml
+++ b/docker/docker-compose.7x.yml
@@ -2,7 +2,7 @@ version: "2.2"
 
 services:
   elasticsearch:
-    image: exceptionless/elasticsearch:7.17.14
+    image: exceptionless/elasticsearch:7.17.16
     environment:
       discovery.type: single-node
       xpack.security.enabled: "false"
@@ -16,7 +16,7 @@ services:
   kibana:
     depends_on:
       - elasticsearch
-    image: docker.elastic.co/kibana/kibana:7.17.14
+    image: docker.elastic.co/kibana/kibana:7.17.16
     ports:
       - 5601:5601
 

From f986afee69886fe33e9fdc37cbf2d145d57dcddd Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sat, 6 Jan 2024 18:56:25 -0600
Subject: [PATCH 14/35] Updated deps

---
 .../ClientApp/package-lock.json               | 289 +++++++++---------
 src/Exceptionless.Web/ClientApp/package.json  |  28 +-
 2 files changed, 159 insertions(+), 158 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
index 3c51782879..ab6d660381 100644
--- a/src/Exceptionless.Web/ClientApp/package-lock.json
+++ b/src/Exceptionless.Web/ClientApp/package-lock.json
@@ -9,14 +9,14 @@
 			"version": "8.0.0",
 			"dependencies": {
 				"@exceptionless/browser": "^3.0.5",
-				"@iconify-json/mdi": "^1.1.63",
-				"@tanstack/svelte-query": "^5.15.0",
-				"@tanstack/svelte-query-devtools": "^5.15.0",
-				"@tanstack/svelte-table": "^8.11.2",
+				"@iconify-json/mdi": "^1.1.64",
+				"@tanstack/svelte-query": "^5.17.7",
+				"@tanstack/svelte-query-devtools": "^5.17.7",
+				"@tanstack/svelte-table": "^8.11.3",
 				"@web3-storage/parse-link-header": "^3.1.0",
-				"bits-ui": "^0.11.8",
+				"bits-ui": "^0.13.3",
 				"class-validator": "^0.14.0",
-				"clsx": "^2.0.0",
+				"clsx": "^2.1.0",
 				"cmdk-sv": "^0.0.12",
 				"mode-watcher": "^0.1.2",
 				"oidc-client-ts": "^2.4.0",
@@ -27,8 +27,8 @@
 				"svelte-time": "^0.8.2",
 				"svoast": "^2.3.0",
 				"tailwind-merge": "^2.2.0",
-				"tailwind-variants": "^0.1.19",
-				"tailwindcss": "^3.4.0",
+				"tailwind-variants": "^0.1.20",
+				"tailwindcss": "^3.4.1",
 				"unplugin-icons": "^0.18.1"
 			},
 			"devDependencies": {
@@ -36,25 +36,25 @@
 				"@sveltejs/adapter-static": "^3.0.1",
 				"@sveltejs/kit": "^2.0.6",
 				"@sveltejs/vite-plugin-svelte": "^3.0.1",
-				"@typescript-eslint/eslint-plugin": "^6.16.0",
-				"@typescript-eslint/parser": "^6.16.0",
+				"@typescript-eslint/eslint-plugin": "^6.18.0",
+				"@typescript-eslint/parser": "^6.18.0",
 				"autoprefixer": "^10.4.16",
 				"cross-env": "^7.0.3",
 				"eslint": "^8.56.0",
 				"eslint-config-prettier": "^9.1.0",
 				"eslint-plugin-svelte": "^2.35.1",
 				"npm-run-all": "^4.1.5",
-				"postcss": "^8.4.32",
+				"postcss": "^8.4.33",
 				"prettier": "^3.1.1",
 				"prettier-plugin-svelte": "^3.1.2",
-				"prettier-plugin-tailwindcss": "^0.5.9",
+				"prettier-plugin-tailwindcss": "^0.5.11",
 				"svelte": "^4.2.8",
 				"svelte-check": "^3.6.2",
 				"swagger-typescript-api": "^13.0.3",
 				"tslib": "^2.6.2",
 				"typescript": "^5.3.3",
-				"vite": "^5.0.10",
-				"vitest": "^1.1.0"
+				"vite": "^5.0.11",
+				"vitest": "^1.1.3"
 			}
 		},
 		"node_modules/@aashutoshrathi/word-wrap": {
@@ -859,9 +859,9 @@
 			"dev": true
 		},
 		"node_modules/@iconify-json/mdi": {
-			"version": "1.1.63",
-			"resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.1.63.tgz",
-			"integrity": "sha512-b07dRM5LYdwJqd/lm+1+JDNDNSWHvpZ7ujb73oJxx3lmK1J0giDS0BSc4yia0hixNV0Z2q/4GyxAu/A8XqDnbg==",
+			"version": "1.1.64",
+			"resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.1.64.tgz",
+			"integrity": "sha512-zGeo5TjhNFAY6FmSDBLAzDO811t77r6v/mDi7CAL9w5eXqKez6bIjk8R9AL/RHIeq44ALP4Ozr4lMqFTkHr7ug==",
 			"dependencies": {
 				"@iconify/types": "*"
 			}
@@ -995,9 +995,9 @@
 			}
 		},
 		"node_modules/@internationalized/date": {
-			"version": "3.5.0",
-			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.0.tgz",
-			"integrity": "sha512-nw0Q+oRkizBWMioseI8+2TeUPEyopJVz5YxoYVzR0W1v+2YytiYah7s/ot35F149q/xAg4F1gT/6eTd+tsUpFQ==",
+			"version": "3.5.1",
+			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.1.tgz",
+			"integrity": "sha512-LUQIfwU9e+Fmutc/DpRTGXSdgYZLBegi4wygCWDSVmUdLTaMHsQyASDiJtREwanwKuQLq0hY76fCJ9J/9I2xOQ==",
 			"dependencies": {
 				"@swc/helpers": "^0.5.0"
 			}
@@ -1058,9 +1058,9 @@
 			}
 		},
 		"node_modules/@melt-ui/svelte": {
-			"version": "0.65.2",
-			"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.65.2.tgz",
-			"integrity": "sha512-BpsSl9Bjp1++8U3+LaDOFUoX/PFQ9N7QWFhlFdUEZduhrbVyU70v9A459SKrQ+esFSjvh1AvqJYkMAUJXJlAmQ==",
+			"version": "0.67.0",
+			"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.67.0.tgz",
+			"integrity": "sha512-fd9PsDE6sKbeyExagqH0nOpZEnDqyr2efbkjfmCRRYXVW5vlDEOPaSB+mg4Tjch121102sFH1Od+MlXwmeHy3A==",
 			"dependencies": {
 				"@floating-ui/core": "^1.3.1",
 				"@floating-ui/dom": "^1.4.5",
@@ -1418,29 +1418,29 @@
 			}
 		},
 		"node_modules/@tanstack/query-core": {
-			"version": "5.14.2",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.14.2.tgz",
-			"integrity": "sha512-QmoJvC72sSWs3hgGis8JdmlDvqLfYGWUK4UG6OR9Q6t28JMN9m2FDwKPqoSJ9YVocELCSjMt/FGjEiLfk8000Q==",
+			"version": "5.17.7",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.17.7.tgz",
+			"integrity": "sha512-PFL+z9w9U9Pvg5KjJRA9X5q5hlNoRVDNNgSEcKcZxES3z0rbWnUj2cMYIqeeoUrMo5YGCTNoJHU6ETTXpZIoPA==",
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			}
 		},
 		"node_modules/@tanstack/query-devtools": {
-			"version": "5.15.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.15.0.tgz",
-			"integrity": "sha512-oz+xBIf+fanmAQ3CZrV4t+1VZiK2nyTcH3zY3G8ukzw+LwX2QGa04ZfF+OCOVF6tPZ2dn1cekMibUb4tevf/aw==",
+			"version": "5.17.7",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.17.7.tgz",
+			"integrity": "sha512-TfgvOqza5K7Sk6slxqkRIvXlEJoUoPSsGGwpuYSrpqgSwLSSvPPpZhq7hv7hcY5IvRoTNGoq6+MT01C/jILqoQ==",
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			}
 		},
 		"node_modules/@tanstack/svelte-query": {
-			"version": "5.15.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query/-/svelte-query-5.15.0.tgz",
-			"integrity": "sha512-HlDg8uN9heF8ZJH6oJtZlBQjV++jdvyS3Rd4B+bp86RVxgrAjrr4LmKNqBhfOjNWHGmLTNEmzpdvg8QtzGZKhg==",
+			"version": "5.17.7",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query/-/svelte-query-5.17.7.tgz",
+			"integrity": "sha512-wVCyLyvV3ksuIS0V3PGwu2wJa14e7W5jVGYxeV6FE83TioyARVDiYPFy9YE03OBw2XvmIlkCtuit2woYYhQKaA==",
 			"dependencies": {
-				"@tanstack/query-core": "5.14.2"
+				"@tanstack/query-core": "5.17.7"
 			},
 			"funding": {
 				"type": "github",
@@ -1451,11 +1451,11 @@
 			}
 		},
 		"node_modules/@tanstack/svelte-query-devtools": {
-			"version": "5.15.0",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.15.0.tgz",
-			"integrity": "sha512-ppLZBRT6tul+OktJJl9ZndIj8rA8GCiAsoHMf5krBltWO67F2B389AKU4w/Ai1AWy2E263vjnmrFW6fEpVqGPg==",
+			"version": "5.17.7",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.17.7.tgz",
+			"integrity": "sha512-MHpDy2jjnip9I96O8ucRfEc89uJnH1S/vb2k9qCOzFstR4TL0aAGHJw+wOLM1uySwVDWJ4GHZNtmLU55PJMzAQ==",
 			"dependencies": {
-				"@tanstack/query-devtools": "5.15.0",
+				"@tanstack/query-devtools": "5.17.7",
 				"esm-env": "^1.0.0"
 			},
 			"funding": {
@@ -1463,16 +1463,16 @@
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/svelte-query": "^5.15.0",
+				"@tanstack/svelte-query": "^5.17.7",
 				"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0"
 			}
 		},
 		"node_modules/@tanstack/svelte-table": {
-			"version": "8.11.2",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-table/-/svelte-table-8.11.2.tgz",
-			"integrity": "sha512-VCuoEsoMDIHv2cKkHpcDNT706hlBJWuU1zYUezzPr+1izU16CbzgywfbG6gYV3JXtCkOdaVzVlW+tH3orjD1nw==",
+			"version": "8.11.3",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-table/-/svelte-table-8.11.3.tgz",
+			"integrity": "sha512-dQZopjVhu7bFxcn30RsCQUzvudFXH3ODBrqrWBPnnzlcWf/+JJEJYIOSFd5IILDUgPpb2t2a47/k7JKYx2/U0g==",
 			"dependencies": {
-				"@tanstack/table-core": "8.11.2"
+				"@tanstack/table-core": "8.11.3"
 			},
 			"engines": {
 				"node": ">=12"
@@ -1486,9 +1486,9 @@
 			}
 		},
 		"node_modules/@tanstack/table-core": {
-			"version": "8.11.2",
-			"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.11.2.tgz",
-			"integrity": "sha512-rR0VEQOtr0ARLvaNLaSQnt2BVwOp0OavOUA0LcZ3N45tLYXc4sXruNv8kJ7R7+5W1CrzGha217tzjBG83CpoMQ==",
+			"version": "8.11.3",
+			"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.11.3.tgz",
+			"integrity": "sha512-nkcFIL696wTf1QMvhGR7dEg60OIRwEZm1OqFTYYDTRc4JOWspgrsJO3IennsOJ7ptumHWLDjV8e5BjPkZcSZAQ==",
 			"engines": {
 				"node": ">=12"
 			},
@@ -1546,16 +1546,16 @@
 			"integrity": "sha512-d/MUkJYdOeKycmm75Arql4M5+UuXmf4cHdHKsyw1GcvnNgL6s77UkgSgJ8TE/rI5PYsnwYq5jkcWBLuN/MpQ1A=="
 		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "6.16.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.16.0.tgz",
-			"integrity": "sha512-O5f7Kv5o4dLWQtPX4ywPPa+v9G+1q1x8mz0Kr0pXUtKsevo+gIJHLkGc8RxaZWtP8RrhwhSNIWThnW42K9/0rQ==",
+			"version": "6.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.18.0.tgz",
+			"integrity": "sha512-3lqEvQUdCozi6d1mddWqd+kf8KxmGq2Plzx36BlkjuQe3rSTm/O98cLf0A4uDO+a5N1KD2SeEEl6fW97YHY+6w==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/regexpp": "^4.5.1",
-				"@typescript-eslint/scope-manager": "6.16.0",
-				"@typescript-eslint/type-utils": "6.16.0",
-				"@typescript-eslint/utils": "6.16.0",
-				"@typescript-eslint/visitor-keys": "6.16.0",
+				"@typescript-eslint/scope-manager": "6.18.0",
+				"@typescript-eslint/type-utils": "6.18.0",
+				"@typescript-eslint/utils": "6.18.0",
+				"@typescript-eslint/visitor-keys": "6.18.0",
 				"debug": "^4.3.4",
 				"graphemer": "^1.4.0",
 				"ignore": "^5.2.4",
@@ -1581,15 +1581,15 @@
 			}
 		},
 		"node_modules/@typescript-eslint/parser": {
-			"version": "6.16.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.16.0.tgz",
-			"integrity": "sha512-H2GM3eUo12HpKZU9njig3DF5zJ58ja6ahj1GoHEHOgQvYxzoFJJEvC1MQ7T2l9Ha+69ZSOn7RTxOdpC/y3ikMw==",
+			"version": "6.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.18.0.tgz",
+			"integrity": "sha512-v6uR68SFvqhNQT41frCMCQpsP+5vySy6IdgjlzUWoo7ALCnpaWYcz/Ij2k4L8cEsL0wkvOviCMpjmtRtHNOKzA==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/scope-manager": "6.16.0",
-				"@typescript-eslint/types": "6.16.0",
-				"@typescript-eslint/typescript-estree": "6.16.0",
-				"@typescript-eslint/visitor-keys": "6.16.0",
+				"@typescript-eslint/scope-manager": "6.18.0",
+				"@typescript-eslint/types": "6.18.0",
+				"@typescript-eslint/typescript-estree": "6.18.0",
+				"@typescript-eslint/visitor-keys": "6.18.0",
 				"debug": "^4.3.4"
 			},
 			"engines": {
@@ -1609,13 +1609,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "6.16.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.16.0.tgz",
-			"integrity": "sha512-0N7Y9DSPdaBQ3sqSCwlrm9zJwkpOuc6HYm7LpzLAPqBL7dmzAUimr4M29dMkOP/tEwvOCC/Cxo//yOfJD3HUiw==",
+			"version": "6.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.18.0.tgz",
+			"integrity": "sha512-o/UoDT2NgOJ2VfHpfr+KBY2ErWvCySNUIX/X7O9g8Zzt/tXdpfEU43qbNk8LVuWUT2E0ptzTWXh79i74PP0twA==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.16.0",
-				"@typescript-eslint/visitor-keys": "6.16.0"
+				"@typescript-eslint/types": "6.18.0",
+				"@typescript-eslint/visitor-keys": "6.18.0"
 			},
 			"engines": {
 				"node": "^16.0.0 || >=18.0.0"
@@ -1626,13 +1626,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/type-utils": {
-			"version": "6.16.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.16.0.tgz",
-			"integrity": "sha512-ThmrEOcARmOnoyQfYkHw/DX2SEYBalVECmoldVuH6qagKROp/jMnfXpAU/pAIWub9c4YTxga+XwgAkoA0pxfmg==",
+			"version": "6.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.18.0.tgz",
+			"integrity": "sha512-ZeMtrXnGmTcHciJN1+u2CigWEEXgy1ufoxtWcHORt5kGvpjjIlK9MUhzHm4RM8iVy6dqSaZA/6PVkX6+r+ChjQ==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/typescript-estree": "6.16.0",
-				"@typescript-eslint/utils": "6.16.0",
+				"@typescript-eslint/typescript-estree": "6.18.0",
+				"@typescript-eslint/utils": "6.18.0",
 				"debug": "^4.3.4",
 				"ts-api-utils": "^1.0.1"
 			},
@@ -1653,9 +1653,9 @@
 			}
 		},
 		"node_modules/@typescript-eslint/types": {
-			"version": "6.16.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.16.0.tgz",
-			"integrity": "sha512-hvDFpLEvTJoHutVl87+MG/c5C8I6LOgEx05zExTSJDEVU7hhR3jhV8M5zuggbdFCw98+HhZWPHZeKS97kS3JoQ==",
+			"version": "6.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.18.0.tgz",
+			"integrity": "sha512-/RFVIccwkwSdW/1zeMx3hADShWbgBxBnV/qSrex6607isYjj05t36P6LyONgqdUrNLl5TYU8NIKdHUYpFvExkA==",
 			"dev": true,
 			"engines": {
 				"node": "^16.0.0 || >=18.0.0"
@@ -1666,13 +1666,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "6.16.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.16.0.tgz",
-			"integrity": "sha512-VTWZuixh/vr7nih6CfrdpmFNLEnoVBF1skfjdyGnNwXOH1SLeHItGdZDHhhAIzd3ACazyY2Fg76zuzOVTaknGA==",
+			"version": "6.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.0.tgz",
+			"integrity": "sha512-klNvl+Ql4NsBNGB4W9TZ2Od03lm7aGvTbs0wYaFYsplVPhr+oeXjlPZCDI4U9jgJIDK38W1FKhacCFzCC+nbIg==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.16.0",
-				"@typescript-eslint/visitor-keys": "6.16.0",
+				"@typescript-eslint/types": "6.18.0",
+				"@typescript-eslint/visitor-keys": "6.18.0",
 				"debug": "^4.3.4",
 				"globby": "^11.1.0",
 				"is-glob": "^4.0.3",
@@ -1718,17 +1718,17 @@
 			}
 		},
 		"node_modules/@typescript-eslint/utils": {
-			"version": "6.16.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.16.0.tgz",
-			"integrity": "sha512-T83QPKrBm6n//q9mv7oiSvy/Xq/7Hyw9SzSEhMHJwznEmQayfBM87+oAlkNAMEO7/MjIwKyOHgBJbxB0s7gx2A==",
+			"version": "6.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.18.0.tgz",
+			"integrity": "sha512-wiKKCbUeDPGaYEYQh1S580dGxJ/V9HI7K5sbGAVklyf+o5g3O+adnS4UNJajplF4e7z2q0uVBaTdT/yLb4XAVA==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.4.0",
 				"@types/json-schema": "^7.0.12",
 				"@types/semver": "^7.5.0",
-				"@typescript-eslint/scope-manager": "6.16.0",
-				"@typescript-eslint/types": "6.16.0",
-				"@typescript-eslint/typescript-estree": "6.16.0",
+				"@typescript-eslint/scope-manager": "6.18.0",
+				"@typescript-eslint/types": "6.18.0",
+				"@typescript-eslint/typescript-estree": "6.18.0",
 				"semver": "^7.5.4"
 			},
 			"engines": {
@@ -1743,12 +1743,12 @@
 			}
 		},
 		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "6.16.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.16.0.tgz",
-			"integrity": "sha512-QSFQLruk7fhs91a/Ep/LqRdbJCZ1Rq03rqBdKT5Ky17Sz8zRLUksqIe9DW0pKtg/Z35/ztbLQ6qpOCN6rOC11A==",
+			"version": "6.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.0.tgz",
+			"integrity": "sha512-1wetAlSZpewRDb2h9p/Q8kRjdGuqdTAQbkJIOUMLug2LBLG+QOjiWoSj6/3B/hA9/tVTFFdtiKvAYoYnSRW/RA==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.16.0",
+				"@typescript-eslint/types": "6.18.0",
 				"eslint-visitor-keys": "^3.4.1"
 			},
 			"engines": {
@@ -1766,13 +1766,13 @@
 			"dev": true
 		},
 		"node_modules/@vitest/expect": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.1.0.tgz",
-			"integrity": "sha512-9IE2WWkcJo2BR9eqtY5MIo3TPmS50Pnwpm66A6neb2hvk/QSLfPXBz2qdiwUOQkwyFuuXEUj5380CbwfzW4+/w==",
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.1.3.tgz",
+			"integrity": "sha512-MnJqsKc1Ko04lksF9XoRJza0bGGwTtqfbyrsYv5on4rcEkdo+QgUdITenBQBUltKzdxW7K3rWh+nXRULwsdaVg==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/spy": "1.1.0",
-				"@vitest/utils": "1.1.0",
+				"@vitest/spy": "1.1.3",
+				"@vitest/utils": "1.1.3",
 				"chai": "^4.3.10"
 			},
 			"funding": {
@@ -1780,12 +1780,12 @@
 			}
 		},
 		"node_modules/@vitest/runner": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.1.0.tgz",
-			"integrity": "sha512-zdNLJ00pm5z/uhbWF6aeIJCGMSyTyWImy3Fcp9piRGvueERFlQFbUwCpzVce79OLm2UHk9iwaMSOaU9jVHgNVw==",
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.1.3.tgz",
+			"integrity": "sha512-Va2XbWMnhSdDEh/OFxyUltgQuuDRxnarK1hW5QNN4URpQrqq6jtt8cfww/pQQ4i0LjoYxh/3bYWvDFlR9tU73g==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/utils": "1.1.0",
+				"@vitest/utils": "1.1.3",
 				"p-limit": "^5.0.0",
 				"pathe": "^1.1.1"
 			},
@@ -1821,9 +1821,9 @@
 			}
 		},
 		"node_modules/@vitest/snapshot": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.1.0.tgz",
-			"integrity": "sha512-5O/wyZg09V5qmNmAlUgCBqflvn2ylgsWJRRuPrnHEfDNT6tQpQ8O1isNGgo+VxofISHqz961SG3iVvt3SPK/QQ==",
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.1.3.tgz",
+			"integrity": "sha512-U0r8pRXsLAdxSVAyGNcqOU2H3Z4Y2dAAGGelL50O0QRMdi1WWeYHdrH/QWpN1e8juWfVKsb8B+pyJwTC+4Gy9w==",
 			"dev": true,
 			"dependencies": {
 				"magic-string": "^0.30.5",
@@ -1835,9 +1835,9 @@
 			}
 		},
 		"node_modules/@vitest/spy": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.1.0.tgz",
-			"integrity": "sha512-sNOVSU/GE+7+P76qYo+VXdXhXffzWZcYIPQfmkiRxaNCSPiLANvQx5Mx6ZURJ/ndtEkUJEpvKLXqAYTKEY+lTg==",
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.1.3.tgz",
+			"integrity": "sha512-Ec0qWyGS5LhATFQtldvChPTAHv08yHIOZfiNcjwRQbFPHpkih0md9KAbs7TfeIfL7OFKoe7B/6ukBTqByubXkQ==",
 			"dev": true,
 			"dependencies": {
 				"tinyspy": "^2.2.0"
@@ -1847,12 +1847,13 @@
 			}
 		},
 		"node_modules/@vitest/utils": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.1.0.tgz",
-			"integrity": "sha512-z+s510fKmYz4Y41XhNs3vcuFTFhcij2YF7F8VQfMEYAAUfqQh0Zfg7+w9xdgFGhPf3tX3TicAe+8BDITk6ampQ==",
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.1.3.tgz",
+			"integrity": "sha512-Dyt3UMcdElTll2H75vhxfpZu03uFpXRCHxWnzcrFjZxT1kTbq8ALUYIeBgGolo1gldVdI0YSlQRacsqxTwNqwg==",
 			"dev": true,
 			"dependencies": {
 				"diff-sequences": "^29.6.3",
+				"estree-walker": "^3.0.3",
 				"loupe": "^2.3.7",
 				"pretty-format": "^29.7.0"
 			},
@@ -2093,12 +2094,12 @@
 			}
 		},
 		"node_modules/bits-ui": {
-			"version": "0.11.8",
-			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.11.8.tgz",
-			"integrity": "sha512-T3YaT88OJguBoUU/MSncf41fiIc+5/ka8Au2LUDo0nSECex+LFY40+hKWLJc5tRT56avkyHsI7x9daA2r9eS/g==",
+			"version": "0.13.3",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.13.3.tgz",
+			"integrity": "sha512-sbhFPVRHozz0tzAJyJrGJ7whcQfSTSiwtYvKmPMbY/qw+cgqS2J34G2HiLgnRkcrV4DVUGkXdpfahRL6cGfonw==",
 			"dependencies": {
-				"@internationalized/date": "^3.5.0",
-				"@melt-ui/svelte": "0.65.2",
+				"@internationalized/date": "^3.5.1",
+				"@melt-ui/svelte": "0.67.0",
 				"nanoid": "^5.0.4"
 			},
 			"peerDependencies": {
@@ -2258,9 +2259,9 @@
 			}
 		},
 		"node_modules/chai": {
-			"version": "4.3.10",
-			"resolved": "https://registry.npmjs.org/chai/-/chai-4.3.10.tgz",
-			"integrity": "sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==",
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/chai/-/chai-4.4.0.tgz",
+			"integrity": "sha512-x9cHNq1uvkCdU+5xTkNh5WtgD4e4yDFCsp9jVc7N7qVeKeftv3gO/ZrviX5d+3ZfxdYnZXZYujjRInu1RogU6A==",
 			"dev": true,
 			"dependencies": {
 				"assertion-error": "^1.1.0",
@@ -2374,9 +2375,9 @@
 			}
 		},
 		"node_modules/clsx": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
-			"integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+			"integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
 			"engines": {
 				"node": ">=6"
 			}
@@ -5137,9 +5138,9 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.4.32",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
-			"integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
+			"version": "8.4.33",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+			"integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -5355,9 +5356,9 @@
 			}
 		},
 		"node_modules/prettier-plugin-tailwindcss": {
-			"version": "0.5.9",
-			"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.9.tgz",
-			"integrity": "sha512-9x3t1s2Cjbut2QiP+O0mDqV3gLXTe2CgRlQDgucopVkUdw26sQi53p/q4qvGxMLBDfk/dcTV57Aa/zYwz9l8Ew==",
+			"version": "0.5.11",
+			"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz",
+			"integrity": "sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==",
 			"dev": true,
 			"engines": {
 				"node": ">=14.21.3"
@@ -6597,9 +6598,9 @@
 			}
 		},
 		"node_modules/tailwind-variants": {
-			"version": "0.1.19",
-			"resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.1.19.tgz",
-			"integrity": "sha512-D9Yf5WqsxodnCtjZt6KifEoKwW8rTURXQV03KRKlojITQM5gV1vPVWufWNiIvd/ptC3QybYFpwmHK9cs4Ei08Q==",
+			"version": "0.1.20",
+			"resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.1.20.tgz",
+			"integrity": "sha512-AMh7x313t/V+eTySKB0Dal08RHY7ggYK0MSn/ad8wKWOrDUIzyiWNayRUm2PIJ4VRkvRnfNuyRuKbLV3EN+ewQ==",
 			"dependencies": {
 				"tailwind-merge": "^1.14.0"
 			},
@@ -6621,9 +6622,9 @@
 			}
 		},
 		"node_modules/tailwindcss": {
-			"version": "3.4.0",
-			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
-			"integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==",
+			"version": "3.4.1",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
+			"integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
 			"dependencies": {
 				"@alloc/quick-lru": "^5.2.0",
 				"arg": "^5.0.2",
@@ -7080,9 +7081,9 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "5.0.10",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.10.tgz",
-			"integrity": "sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==",
+			"version": "5.0.11",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.11.tgz",
+			"integrity": "sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==",
 			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.19.3",
@@ -7135,9 +7136,9 @@
 			}
 		},
 		"node_modules/vite-node": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.1.0.tgz",
-			"integrity": "sha512-jV48DDUxGLEBdHCQvxL1mEh7+naVy+nhUUUaPAZLd3FJgXuxQiewHcfeZebbJ6onDqNGkP4r3MhQ342PRlG81Q==",
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.1.3.tgz",
+			"integrity": "sha512-BLSO72YAkIUuNrOx+8uznYICJfTEbvBAmWClY3hpath5+h1mbPS5OMn42lrTxXuyCazVyZoDkSRnju78GiVCqA==",
 			"dev": true,
 			"dependencies": {
 				"cac": "^6.7.14",
@@ -7171,17 +7172,17 @@
 			}
 		},
 		"node_modules/vitest": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/vitest/-/vitest-1.1.0.tgz",
-			"integrity": "sha512-oDFiCrw7dd3Jf06HoMtSRARivvyjHJaTxikFxuqJjO76U436PqlVw1uLn7a8OSPrhSfMGVaRakKpA2lePdw79A==",
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/vitest/-/vitest-1.1.3.tgz",
+			"integrity": "sha512-2l8om1NOkiA90/Y207PsEvJLYygddsOyr81wLQ20Ra8IlLKbyQncWsGZjnbkyG2KwwuTXLQjEPOJuxGMG8qJBQ==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/expect": "1.1.0",
-				"@vitest/runner": "1.1.0",
-				"@vitest/snapshot": "1.1.0",
-				"@vitest/spy": "1.1.0",
-				"@vitest/utils": "1.1.0",
-				"acorn-walk": "^8.3.0",
+				"@vitest/expect": "1.1.3",
+				"@vitest/runner": "1.1.3",
+				"@vitest/snapshot": "1.1.3",
+				"@vitest/spy": "1.1.3",
+				"@vitest/utils": "1.1.3",
+				"acorn-walk": "^8.3.1",
 				"cac": "^6.7.14",
 				"chai": "^4.3.10",
 				"debug": "^4.3.4",
@@ -7195,7 +7196,7 @@
 				"tinybench": "^2.5.1",
 				"tinypool": "^0.8.1",
 				"vite": "^5.0.0",
-				"vite-node": "1.1.0",
+				"vite-node": "1.1.3",
 				"why-is-node-running": "^2.2.2"
 			},
 			"bin": {
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index 13eb16d0f6..ced0475d7e 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -26,36 +26,36 @@
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.6",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"@typescript-eslint/eslint-plugin": "^6.16.0",
-		"@typescript-eslint/parser": "^6.16.0",
+		"@typescript-eslint/eslint-plugin": "^6.18.0",
+		"@typescript-eslint/parser": "^6.18.0",
 		"autoprefixer": "^10.4.16",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.35.1",
 		"npm-run-all": "^4.1.5",
-		"postcss": "^8.4.32",
+		"postcss": "^8.4.33",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
-		"prettier-plugin-tailwindcss": "^0.5.9",
+		"prettier-plugin-tailwindcss": "^0.5.11",
 		"svelte": "^4.2.8",
 		"svelte-check": "^3.6.2",
 		"swagger-typescript-api": "^13.0.3",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
-		"vite": "^5.0.10",
-		"vitest": "^1.1.0"
+		"vite": "^5.0.11",
+		"vitest": "^1.1.3"
 	},
 	"dependencies": {
 		"@exceptionless/browser": "^3.0.5",
-		"@iconify-json/mdi": "^1.1.63",
-		"@tanstack/svelte-query": "^5.15.0",
-		"@tanstack/svelte-query-devtools": "^5.15.0",
-		"@tanstack/svelte-table": "^8.11.2",
+		"@iconify-json/mdi": "^1.1.64",
+		"@tanstack/svelte-query": "^5.17.7",
+		"@tanstack/svelte-query-devtools": "^5.17.7",
+		"@tanstack/svelte-table": "^8.11.3",
 		"@web3-storage/parse-link-header": "^3.1.0",
-		"bits-ui": "^0.11.8",
+		"bits-ui": "^0.13.3",
 		"class-validator": "^0.14.0",
-		"clsx": "^2.0.0",
+		"clsx": "^2.1.0",
 		"cmdk-sv": "^0.0.12",
 		"mode-watcher": "^0.1.2",
 		"oidc-client-ts": "^2.4.0",
@@ -66,8 +66,8 @@
 		"svelte-time": "^0.8.2",
 		"svoast": "^2.3.0",
 		"tailwind-merge": "^2.2.0",
-		"tailwind-variants": "^0.1.19",
-		"tailwindcss": "^3.4.0",
+		"tailwind-variants": "^0.1.20",
+		"tailwindcss": "^3.4.1",
 		"unplugin-icons": "^0.18.1"
 	},
 	"type": "module"

From 6721164a45e5483fd880d171dfbf58d3d3f4b0cd Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sat, 6 Jan 2024 18:57:31 -0600
Subject: [PATCH 15/35] Upgraded shadcn

---
 .../src/lib/components/ui/command/command-input.svelte      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-input.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-input.svelte
index 1ae11fa5ce..33807739da 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-input.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-input.svelte
@@ -3,13 +3,15 @@
 	import { MagnifyingGlass } from 'radix-icons-svelte';
 	import { cn } from '$lib/utils';
 
+	type $$Props = CommandPrimitive.InputProps;
+
 	let className: string | undefined | null = undefined;
 	export { className as class };
 	export let value: string = '';
 </script>
 
-<div class="flex items-center px-3 border-b" data-cmdk-input-wrapper="">
-	<MagnifyingGlass class="w-4 h-4 mr-2 opacity-50 shrink-0" />
+<div class="flex items-center border-b px-3" data-cmdk-input-wrapper="">
+	<MagnifyingGlass class="mr-2 h-4 w-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
 		class={cn(
 			'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',

From 43e5505d4d539525b354fb73d3bb7cb0d05fd6aa Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sat, 6 Jan 2024 19:19:44 -0600
Subject: [PATCH 16/35] Use
 https://www.shadcn-svelte.com/docs/components/sonner

---
 .../ClientApp/.vscode/settings.json           |  1 -
 .../ClientApp/package-lock.json               | 18 ++++++-------
 src/Exceptionless.Web/ClientApp/package.json  |  2 +-
 src/Exceptionless.Web/ClientApp/src/app.css   | 26 -------------------
 .../components/CopyToClipboardButton.svelte   |  4 +--
 .../events/views/ExtendedData.svelte          |  3 ++-
 .../events/views/PromotedExtendedData.svelte  |  3 ++-
 .../src/lib/components/ui/sonner/index.ts     |  1 +
 .../lib/components/ui/sonner/sonner.svelte    | 20 ++++++++++++++
 .../ClientApp/src/routes/+layout.svelte       |  4 +--
 10 files changed, 39 insertions(+), 43 deletions(-)
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/sonner/index.ts
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/ui/sonner/sonner.svelte

diff --git a/src/Exceptionless.Web/ClientApp/.vscode/settings.json b/src/Exceptionless.Web/ClientApp/.vscode/settings.json
index 66f54fcb69..bc84b98717 100644
--- a/src/Exceptionless.Web/ClientApp/.vscode/settings.json
+++ b/src/Exceptionless.Web/ClientApp/.vscode/settings.json
@@ -16,7 +16,6 @@
 		"satellizer",
 		"sessionend",
 		"shadcn",
-		"svoast",
 		"tailwindcss",
 		"tanstack"
 	],
diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
index ab6d660381..cfb2b1f788 100644
--- a/src/Exceptionless.Web/ClientApp/package-lock.json
+++ b/src/Exceptionless.Web/ClientApp/package-lock.json
@@ -24,8 +24,8 @@
 				"radix-icons-svelte": "^1.2.1",
 				"svelte-legos": "^0.2.2",
 				"svelte-local-storage-store": "^0.6.4",
+				"svelte-sonner": "^0.3.11",
 				"svelte-time": "^0.8.2",
-				"svoast": "^2.3.0",
 				"tailwind-merge": "^2.2.0",
 				"tailwind-variants": "^0.1.20",
 				"tailwindcss": "^3.4.1",
@@ -6457,6 +6457,14 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/svelte-sonner": {
+			"version": "0.3.11",
+			"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.11.tgz",
+			"integrity": "sha512-TkjgDC7zr0waky81Z9CShXMD+4NQ7UASuRx0BhgQo8ZTDQQYk8X8MzJa3zVtZVa6RYJEiahHBXx8Zt/Ie9G5hg==",
+			"peerDependencies": {
+				"svelte": ">=3 <5"
+			}
+		},
 		"node_modules/svelte-time": {
 			"version": "0.8.2",
 			"resolved": "https://registry.npmjs.org/svelte-time/-/svelte-time-0.8.2.tgz",
@@ -6465,14 +6473,6 @@
 				"dayjs": "^1.11.10"
 			}
 		},
-		"node_modules/svoast": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/svoast/-/svoast-2.3.0.tgz",
-			"integrity": "sha512-ZAjtPy1o478xG6l3JOwZ1VELyd2U7sldXAENp5Yvy+LS7/yuJJ+1u0Q43cDv6pubZwbeAAj0YboXrMpZcEI6iA==",
-			"peerDependencies": {
-				"svelte": "^4.0.0"
-			}
-		},
 		"node_modules/swagger-schema-official": {
 			"version": "2.0.0-bab6bed",
 			"resolved": "https://registry.npmjs.org/swagger-schema-official/-/swagger-schema-official-2.0.0-bab6bed.tgz",
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index ced0475d7e..a4011a95b3 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -63,8 +63,8 @@
 		"radix-icons-svelte": "^1.2.1",
 		"svelte-legos": "^0.2.2",
 		"svelte-local-storage-store": "^0.6.4",
+		"svelte-sonner": "^0.3.11",
 		"svelte-time": "^0.8.2",
-		"svoast": "^2.3.0",
 		"tailwind-merge": "^2.2.0",
 		"tailwind-variants": "^0.1.20",
 		"tailwindcss": "^3.4.1",
diff --git a/src/Exceptionless.Web/ClientApp/src/app.css b/src/Exceptionless.Web/ClientApp/src/app.css
index 5137001e00..85cf4eea66 100644
--- a/src/Exceptionless.Web/ClientApp/src/app.css
+++ b/src/Exceptionless.Web/ClientApp/src/app.css
@@ -77,29 +77,3 @@
 		@apply bg-secondary text-foreground;
 	}
 }
-:root {
-	/* Spacing for the container and between each toast */
-	--svoast-offset: 16px;
-	--svoast-gap: 16px;
-	/* The toast itself. */
-	--svoast-bg: theme('colors.background');
-	--svoast-text: theme('colors.foreground');
-	--svoast-padding: theme('spacing.6');
-	--svoast-radius: theme('borderRadius.lg');
-	--svoast-shadow: theme('boxShadow.xl');
-	--svoast-font-size: theme('fontSize.sm');
-	--svoast-dismiss-gap: 8px;
-	--svoast-max-width: unset;
-	/* The current colour of the toast, depending on the type */
-	--svoast-colour: '';
-	/* Colour for each type */
-	--svoast-info-colour: theme('colors.blue.500');
-	--svoast-attention-colour: theme('colors.zinc.500');
-	--svoast-success-colour: theme('colors.primary.DEFAULT');
-	--svoast-warning-colour: theme('colors.orange.500');
-	--svoast-error-colour: theme('colors.destructive.DEFAULT');
-	/* The coloured bar */
-	--svoast-bar-width: 3px;
-	/* Icons */
-	--svoast-icon-padding: 2px;
-}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/CopyToClipboardButton.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/CopyToClipboardButton.svelte
index 5748ec0ea6..309c7388ba 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/CopyToClipboardButton.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/CopyToClipboardButton.svelte
@@ -2,7 +2,7 @@
 	import type { VariantProps } from 'tailwind-variants';
 	import IconContentCopy from '~icons/mdi/content-copy';
 	import { clickToCopyAction } from 'svelte-legos';
-	import { toast } from 'svoast';
+	import { toast } from 'svelte-sonner';
 	import { Button, buttonVariants } from '$comp/ui/button';
 
 	export let title: string = 'Copy to Clipboard';
@@ -24,6 +24,6 @@
 	on:copy-error={handleCopyError}
 >
 	<Button {title} {size}>
-		<slot><IconContentCopy class="h-4 w-4" /></slot>
+		<slot><IconContentCopy class="w-4 h-4" /></slot>
 	</Button>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/views/ExtendedData.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/views/ExtendedData.svelte
index 6c0b6117a2..cc11350b49 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/views/ExtendedData.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/views/ExtendedData.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { toast } from 'svoast';
+	import { toast } from 'svelte-sonner';
+
 	import type { PersistentEvent, ViewProject } from '$lib/models/api';
 	import ExtendedDataItem from '../ExtendedDataItem.svelte';
 	import { getExtendedDataItems } from '$lib/helpers/persistent-event';
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/views/PromotedExtendedData.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/views/PromotedExtendedData.svelte
index e65bf54cc8..5fa4749c0c 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/views/PromotedExtendedData.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/views/PromotedExtendedData.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { toast } from 'svoast';
+	import { toast } from 'svelte-sonner';
+
 	import { mutateDemoteTab } from '$api/queries/projects';
 	import type { PersistentEvent } from '$lib/models/api';
 	import ExtendedDataItem from '../ExtendedDataItem.svelte';
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/sonner/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/sonner/index.ts
new file mode 100644
index 0000000000..fcaf06bfb5
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from './sonner.svelte';
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/sonner/sonner.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/sonner/sonner.svelte
new file mode 100644
index 0000000000..4e63080f8b
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/sonner/sonner.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { mode } from 'mode-watcher';
+
+	type $$Props = SonnerProps;
+</script>
+
+<Sonner
+	theme={$mode}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+			description: 'group-[.toast]:text-muted-foreground',
+			actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+			cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+		}
+	}}
+	{...$$restProps}
+/>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/+layout.svelte b/src/Exceptionless.Web/ClientApp/src/routes/+layout.svelte
index 82bddc3426..544023a63e 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/+layout.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/+layout.svelte
@@ -2,10 +2,10 @@
 	import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
 	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools';
 	import { ModeWatcher } from 'mode-watcher';
-	import { Toasts } from 'svoast';
 
 	import { setDefaultBaseUrl, setAccessTokenStore } from '$api/FetchClient';
 	import { accessToken } from '$api/auth';
+	import { Toaster } from '$comp/ui/sonner';
 	import '../app.css';
 
 	setDefaultBaseUrl('api/v2');
@@ -23,5 +23,5 @@
 		<SvelteQueryDevtools />
 	</QueryClientProvider>
 
-	<Toasts position="bottom-right" />
+	<Toaster position="bottom-right" />
 </div>

From 76a87fede16d837dd3b33020a377f5efb10bf560 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sat, 6 Jan 2024 19:54:30 -0600
Subject: [PATCH 17/35] WIP: table selection

---
 .../lib/components/events/table/options.ts    | 66 ++++++++++++++++---
 1 file changed, 57 insertions(+), 9 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
index daca33f4af..cc7507f4cc 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
@@ -1,12 +1,13 @@
 import {
-	flexRender,
 	type ColumnDef,
 	getCoreRowModel,
 	type ColumnSort,
 	type PaginationState,
 	type TableOptions,
 	type Updater,
-	type VisibilityState
+	type VisibilityState,
+	renderComponent,
+	type RowSelectionState
 } from '@tanstack/svelte-table';
 import { persisted } from 'svelte-local-storage-store';
 import { get, writable, type Writable } from 'svelte/store';
@@ -27,15 +28,40 @@ import TimeAgo from '$comp/formatters/TimeAgo.svelte';
 import StackUsersSummaryColumn from './StackUsersSummaryColumn.svelte';
 import { DEFAULT_LIMIT } from '$lib/helpers/api';
 import type { FetchClientResponse } from '$api/FetchClient';
+import { Checkbox } from '$comp/ui/checkbox';
 
 export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKeys>>(
 	mode: GetEventsMode = 'summary'
 ): ColumnDef<TSummaryModel>[] {
 	const columns: ColumnDef<TSummaryModel>[] = [
+		{
+			id: 'select',
+			header: ({ table }) =>
+				renderComponent(Checkbox, {
+					checked:
+						table.getIsAllRowsSelected() || table.getIsSomeRowsSelected()
+							? 'indeterminate'
+							: false,
+					click: table.getToggleAllRowsSelectedHandler()
+				}),
+			cell: (props) =>
+				renderComponent(Checkbox, {
+					checked:
+						props.row.getIsSelected() || props.row.getIsSomeSelected()
+							? 'indeterminate'
+							: false,
+					disabled: !props.row.getCanSelect(),
+					click: props.row.getToggleSelectedHandler(),
+					'aria-label': 'Select row',
+					class: 'translate-y-[2px]'
+				}),
+			enableHiding: false,
+			enableSorting: false
+		},
 		{
 			header: 'Summary',
 			enableHiding: false,
-			cell: (prop) => flexRender(Summary, { summary: prop.row.original })
+			cell: (prop) => renderComponent(Summary, { summary: prop.row.original })
 		}
 	];
 
@@ -50,7 +76,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 					class: 'w-28'
 				},
 				cell: (prop) =>
-					flexRender(EventsUserIdentitySummaryColumn, { summary: prop.row.original })
+					renderComponent(EventsUserIdentitySummaryColumn, { summary: prop.row.original })
 			},
 			{
 				id: 'date',
@@ -59,7 +85,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 				meta: {
 					class: 'w-36'
 				},
-				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
+				cell: (prop) => renderComponent(TimeAgo, { value: prop.getValue() })
 			}
 		);
 	} else {
@@ -71,7 +97,8 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 				meta: {
 					class: 'w-24'
 				},
-				cell: (prop) => flexRender(StackUsersSummaryColumn, { summary: prop.row.original })
+				cell: (prop) =>
+					renderComponent(StackUsersSummaryColumn, { summary: prop.row.original })
 			},
 			{
 				id: 'events',
@@ -81,7 +108,8 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 					class: 'w-24'
 				},
 				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('total'),
-				cell: (prop) => flexRender(NumberFormatter, { value: prop.getValue() as number })
+				cell: (prop) =>
+					renderComponent(NumberFormatter, { value: prop.getValue() as number })
 			},
 			{
 				id: 'first',
@@ -91,7 +119,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 					class: 'w-36'
 				},
 				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('first_occurrence'),
-				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
+				cell: (prop) => renderComponent(TimeAgo, { value: prop.getValue() })
 			},
 			{
 				id: 'last',
@@ -101,7 +129,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 					class: 'w-36'
 				},
 				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('last_occurrence'),
-				cell: (prop) => flexRender(TimeAgo, { value: prop.getValue() })
+				cell: (prop) => renderComponent(TimeAgo, { value: prop.getValue() })
 			}
 		);
 	}
@@ -174,6 +202,24 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 		}));
 	};
 
+	let rowSelection: RowSelectionState = {};
+
+	const onRowSelectionChange = (updaterOrValue: Updater<RowSelectionState>) => {
+		if (updaterOrValue instanceof Function) {
+			rowSelection = updaterOrValue(rowSelection);
+		} else {
+			rowSelection = updaterOrValue;
+		}
+
+		options.update((old) => ({
+			...old,
+			state: {
+				...old.state,
+				rowSelection: rowSelection
+			}
+		}));
+	};
+
 	let sorting: ColumnSort[] = [
 		{
 			id: 'date',
@@ -217,12 +263,14 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 		manualPagination: true,
 		state: {
 			columnVisibility: get(columnVisibility),
+			rowSelection,
 			sorting
 		},
 		getCoreRowModel: getCoreRowModel(),
 		getRowId: (originalRow) => originalRow.id,
 		onColumnVisibilityChange,
 		onPaginationChange,
+		onRowSelectionChange,
 		onSortingChange
 	});
 

From f8dd8efa766a2f7cb9176e513290954826299113 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sat, 6 Jan 2024 20:06:38 -0600
Subject: [PATCH 18/35] Fixed table row selection

---
 .../src/lib/components/events/table/options.ts   | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
index cc7507f4cc..63a9de56b5 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
@@ -38,20 +38,24 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 			id: 'select',
 			header: ({ table }) =>
 				renderComponent(Checkbox, {
-					checked:
-						table.getIsAllRowsSelected() || table.getIsSomeRowsSelected()
+					checked: table.getIsAllRowsSelected()
+						? true
+						: table.getIsSomeRowsSelected()
 							? 'indeterminate'
 							: false,
-					click: table.getToggleAllRowsSelectedHandler()
+					onCheckedChange: (checked: boolean) =>
+						table.getToggleAllRowsSelectedHandler()({ target: { checked } })
 				}),
 			cell: (props) =>
 				renderComponent(Checkbox, {
-					checked:
-						props.row.getIsSelected() || props.row.getIsSomeSelected()
+					checked: props.row.getIsSelected()
+						? true
+						: props.row.getIsSomeSelected()
 							? 'indeterminate'
 							: false,
 					disabled: !props.row.getCanSelect(),
-					click: props.row.getToggleSelectedHandler(),
+					onCheckedChange: (checked: boolean) =>
+						props.row.getToggleSelectedHandler()({ target: { checked } }),
 					'aria-label': 'Select row',
 					class: 'translate-y-[2px]'
 				}),

From 260f6eab4871933691c0aff605dd87f7d2c5cd5b Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Tue, 9 Jan 2024 06:49:51 -0600
Subject: [PATCH 19/35] Updated deps

---
 .../ClientApp/package-lock.json               | 149 ++++++++++--------
 src/Exceptionless.Web/ClientApp/package.json  |  14 +-
 .../src/lib/components/ui/input/index.ts      |   2 +
 .../src/lib/components/ui/input/input.svelte  |   2 +
 4 files changed, 91 insertions(+), 76 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
index cfb2b1f788..2433db7a33 100644
--- a/src/Exceptionless.Web/ClientApp/package-lock.json
+++ b/src/Exceptionless.Web/ClientApp/package-lock.json
@@ -10,11 +10,11 @@
 			"dependencies": {
 				"@exceptionless/browser": "^3.0.5",
 				"@iconify-json/mdi": "^1.1.64",
-				"@tanstack/svelte-query": "^5.17.7",
-				"@tanstack/svelte-query-devtools": "^5.17.7",
+				"@tanstack/svelte-query": "^5.17.9",
+				"@tanstack/svelte-query-devtools": "^5.17.9",
 				"@tanstack/svelte-table": "^8.11.3",
 				"@web3-storage/parse-link-header": "^3.1.0",
-				"bits-ui": "^0.13.3",
+				"bits-ui": "^0.13.6",
 				"class-validator": "^0.14.0",
 				"clsx": "^2.1.0",
 				"cmdk-sv": "^0.0.12",
@@ -29,15 +29,15 @@
 				"tailwind-merge": "^2.2.0",
 				"tailwind-variants": "^0.1.20",
 				"tailwindcss": "^3.4.1",
-				"unplugin-icons": "^0.18.1"
+				"unplugin-icons": "^0.18.2"
 			},
 			"devDependencies": {
 				"@playwright/test": "^1.40.1",
 				"@sveltejs/adapter-static": "^3.0.1",
-				"@sveltejs/kit": "^2.0.6",
+				"@sveltejs/kit": "^2.1.0",
 				"@sveltejs/vite-plugin-svelte": "^3.0.1",
-				"@typescript-eslint/eslint-plugin": "^6.18.0",
-				"@typescript-eslint/parser": "^6.18.0",
+				"@typescript-eslint/eslint-plugin": "^6.18.1",
+				"@typescript-eslint/parser": "^6.18.1",
 				"autoprefixer": "^10.4.16",
 				"cross-env": "^7.0.3",
 				"eslint": "^8.56.0",
@@ -1340,9 +1340,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.0.6.tgz",
-			"integrity": "sha512-dnHtyjBLGXx+hrZQ9GuqLlSfTBixewJaByUVWai7LmB4dgV3FwkK155OltEgONDQW6KW64hLNS/uojdx3uC2/g==",
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.1.0.tgz",
+			"integrity": "sha512-XSIjk9uY705VRpLapfScvOI3bKTfPXntLCdWVsQHhLvkTD7TPNHWh45/6nTT1vQ8rJwWzzA5sLide2YLT4FMsg==",
 			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
@@ -1350,6 +1350,7 @@
 				"cookie": "^0.6.0",
 				"devalue": "^4.3.2",
 				"esm-env": "^1.0.0",
+				"import-meta-resolve": "^4.0.0",
 				"kleur": "^4.1.5",
 				"magic-string": "^0.30.5",
 				"mrmime": "^2.0.0",
@@ -1418,9 +1419,9 @@
 			}
 		},
 		"node_modules/@tanstack/query-core": {
-			"version": "5.17.7",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.17.7.tgz",
-			"integrity": "sha512-PFL+z9w9U9Pvg5KjJRA9X5q5hlNoRVDNNgSEcKcZxES3z0rbWnUj2cMYIqeeoUrMo5YGCTNoJHU6ETTXpZIoPA==",
+			"version": "5.17.9",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.17.9.tgz",
+			"integrity": "sha512-8xcvpWIPaRMDNLMvG9ugcUJMgFK316ZsqkPPbsI+TMZsb10N9jk0B6XgPk4/kgWC2ziHyWR7n7wUhxmD0pChQw==",
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
@@ -1436,11 +1437,11 @@
 			}
 		},
 		"node_modules/@tanstack/svelte-query": {
-			"version": "5.17.7",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query/-/svelte-query-5.17.7.tgz",
-			"integrity": "sha512-wVCyLyvV3ksuIS0V3PGwu2wJa14e7W5jVGYxeV6FE83TioyARVDiYPFy9YE03OBw2XvmIlkCtuit2woYYhQKaA==",
+			"version": "5.17.9",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query/-/svelte-query-5.17.9.tgz",
+			"integrity": "sha512-Ji0FITYiUiUEIfKvv2ZG4mXX06DYz8ULCrWMoFtqW42/ds4Itdwz1r8VNHzm1Svh04YhBBsFeoCmvM4+9bo1oA==",
 			"dependencies": {
-				"@tanstack/query-core": "5.17.7"
+				"@tanstack/query-core": "5.17.9"
 			},
 			"funding": {
 				"type": "github",
@@ -1451,9 +1452,9 @@
 			}
 		},
 		"node_modules/@tanstack/svelte-query-devtools": {
-			"version": "5.17.7",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.17.7.tgz",
-			"integrity": "sha512-MHpDy2jjnip9I96O8ucRfEc89uJnH1S/vb2k9qCOzFstR4TL0aAGHJw+wOLM1uySwVDWJ4GHZNtmLU55PJMzAQ==",
+			"version": "5.17.9",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.17.9.tgz",
+			"integrity": "sha512-G6HqqRuxeXjWGDSDlFBWm6L/6Os/ECgel+6b6+NyyrsfSe629GAnktZf2AhsHZ46fLmUaZBdu41zPMDWpRf6Eg==",
 			"dependencies": {
 				"@tanstack/query-devtools": "5.17.7",
 				"esm-env": "^1.0.0"
@@ -1463,7 +1464,7 @@
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/svelte-query": "^5.17.7",
+				"@tanstack/svelte-query": "^5.17.9",
 				"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0"
 			}
 		},
@@ -1546,16 +1547,16 @@
 			"integrity": "sha512-d/MUkJYdOeKycmm75Arql4M5+UuXmf4cHdHKsyw1GcvnNgL6s77UkgSgJ8TE/rI5PYsnwYq5jkcWBLuN/MpQ1A=="
 		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "6.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.18.0.tgz",
-			"integrity": "sha512-3lqEvQUdCozi6d1mddWqd+kf8KxmGq2Plzx36BlkjuQe3rSTm/O98cLf0A4uDO+a5N1KD2SeEEl6fW97YHY+6w==",
+			"version": "6.18.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.18.1.tgz",
+			"integrity": "sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/regexpp": "^4.5.1",
-				"@typescript-eslint/scope-manager": "6.18.0",
-				"@typescript-eslint/type-utils": "6.18.0",
-				"@typescript-eslint/utils": "6.18.0",
-				"@typescript-eslint/visitor-keys": "6.18.0",
+				"@typescript-eslint/scope-manager": "6.18.1",
+				"@typescript-eslint/type-utils": "6.18.1",
+				"@typescript-eslint/utils": "6.18.1",
+				"@typescript-eslint/visitor-keys": "6.18.1",
 				"debug": "^4.3.4",
 				"graphemer": "^1.4.0",
 				"ignore": "^5.2.4",
@@ -1581,15 +1582,15 @@
 			}
 		},
 		"node_modules/@typescript-eslint/parser": {
-			"version": "6.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.18.0.tgz",
-			"integrity": "sha512-v6uR68SFvqhNQT41frCMCQpsP+5vySy6IdgjlzUWoo7ALCnpaWYcz/Ij2k4L8cEsL0wkvOviCMpjmtRtHNOKzA==",
+			"version": "6.18.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.18.1.tgz",
+			"integrity": "sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/scope-manager": "6.18.0",
-				"@typescript-eslint/types": "6.18.0",
-				"@typescript-eslint/typescript-estree": "6.18.0",
-				"@typescript-eslint/visitor-keys": "6.18.0",
+				"@typescript-eslint/scope-manager": "6.18.1",
+				"@typescript-eslint/types": "6.18.1",
+				"@typescript-eslint/typescript-estree": "6.18.1",
+				"@typescript-eslint/visitor-keys": "6.18.1",
 				"debug": "^4.3.4"
 			},
 			"engines": {
@@ -1609,13 +1610,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "6.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.18.0.tgz",
-			"integrity": "sha512-o/UoDT2NgOJ2VfHpfr+KBY2ErWvCySNUIX/X7O9g8Zzt/tXdpfEU43qbNk8LVuWUT2E0ptzTWXh79i74PP0twA==",
+			"version": "6.18.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.18.1.tgz",
+			"integrity": "sha512-BgdBwXPFmZzaZUuw6wKiHKIovms97a7eTImjkXCZE04TGHysG+0hDQPmygyvgtkoB/aOQwSM/nWv3LzrOIQOBw==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.18.0",
-				"@typescript-eslint/visitor-keys": "6.18.0"
+				"@typescript-eslint/types": "6.18.1",
+				"@typescript-eslint/visitor-keys": "6.18.1"
 			},
 			"engines": {
 				"node": "^16.0.0 || >=18.0.0"
@@ -1626,13 +1627,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/type-utils": {
-			"version": "6.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.18.0.tgz",
-			"integrity": "sha512-ZeMtrXnGmTcHciJN1+u2CigWEEXgy1ufoxtWcHORt5kGvpjjIlK9MUhzHm4RM8iVy6dqSaZA/6PVkX6+r+ChjQ==",
+			"version": "6.18.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.18.1.tgz",
+			"integrity": "sha512-wyOSKhuzHeU/5pcRDP2G2Ndci+4g653V43gXTpt4nbyoIOAASkGDA9JIAgbQCdCkcr1MvpSYWzxTz0olCn8+/Q==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/typescript-estree": "6.18.0",
-				"@typescript-eslint/utils": "6.18.0",
+				"@typescript-eslint/typescript-estree": "6.18.1",
+				"@typescript-eslint/utils": "6.18.1",
 				"debug": "^4.3.4",
 				"ts-api-utils": "^1.0.1"
 			},
@@ -1653,9 +1654,9 @@
 			}
 		},
 		"node_modules/@typescript-eslint/types": {
-			"version": "6.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.18.0.tgz",
-			"integrity": "sha512-/RFVIccwkwSdW/1zeMx3hADShWbgBxBnV/qSrex6607isYjj05t36P6LyONgqdUrNLl5TYU8NIKdHUYpFvExkA==",
+			"version": "6.18.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.18.1.tgz",
+			"integrity": "sha512-4TuMAe+tc5oA7wwfqMtB0Y5OrREPF1GeJBAjqwgZh1lEMH5PJQgWgHGfYufVB51LtjD+peZylmeyxUXPfENLCw==",
 			"dev": true,
 			"engines": {
 				"node": "^16.0.0 || >=18.0.0"
@@ -1666,13 +1667,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "6.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.0.tgz",
-			"integrity": "sha512-klNvl+Ql4NsBNGB4W9TZ2Od03lm7aGvTbs0wYaFYsplVPhr+oeXjlPZCDI4U9jgJIDK38W1FKhacCFzCC+nbIg==",
+			"version": "6.18.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.1.tgz",
+			"integrity": "sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.18.0",
-				"@typescript-eslint/visitor-keys": "6.18.0",
+				"@typescript-eslint/types": "6.18.1",
+				"@typescript-eslint/visitor-keys": "6.18.1",
 				"debug": "^4.3.4",
 				"globby": "^11.1.0",
 				"is-glob": "^4.0.3",
@@ -1718,17 +1719,17 @@
 			}
 		},
 		"node_modules/@typescript-eslint/utils": {
-			"version": "6.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.18.0.tgz",
-			"integrity": "sha512-wiKKCbUeDPGaYEYQh1S580dGxJ/V9HI7K5sbGAVklyf+o5g3O+adnS4UNJajplF4e7z2q0uVBaTdT/yLb4XAVA==",
+			"version": "6.18.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.18.1.tgz",
+			"integrity": "sha512-zZmTuVZvD1wpoceHvoQpOiewmWu3uP9FuTWo8vqpy2ffsmfCE8mklRPi+vmnIYAIk9t/4kOThri2QCDgor+OpQ==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.4.0",
 				"@types/json-schema": "^7.0.12",
 				"@types/semver": "^7.5.0",
-				"@typescript-eslint/scope-manager": "6.18.0",
-				"@typescript-eslint/types": "6.18.0",
-				"@typescript-eslint/typescript-estree": "6.18.0",
+				"@typescript-eslint/scope-manager": "6.18.1",
+				"@typescript-eslint/types": "6.18.1",
+				"@typescript-eslint/typescript-estree": "6.18.1",
 				"semver": "^7.5.4"
 			},
 			"engines": {
@@ -1743,12 +1744,12 @@
 			}
 		},
 		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "6.18.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.0.tgz",
-			"integrity": "sha512-1wetAlSZpewRDb2h9p/Q8kRjdGuqdTAQbkJIOUMLug2LBLG+QOjiWoSj6/3B/hA9/tVTFFdtiKvAYoYnSRW/RA==",
+			"version": "6.18.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.1.tgz",
+			"integrity": "sha512-/kvt0C5lRqGoCfsbmm7/CwMqoSkY3zzHLIjdhHZQW3VFrnz7ATecOHR7nb7V+xn4286MBxfnQfQhAmCI0u+bJA==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.18.0",
+				"@typescript-eslint/types": "6.18.1",
 				"eslint-visitor-keys": "^3.4.1"
 			},
 			"engines": {
@@ -2094,9 +2095,9 @@
 			}
 		},
 		"node_modules/bits-ui": {
-			"version": "0.13.3",
-			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.13.3.tgz",
-			"integrity": "sha512-sbhFPVRHozz0tzAJyJrGJ7whcQfSTSiwtYvKmPMbY/qw+cgqS2J34G2HiLgnRkcrV4DVUGkXdpfahRL6cGfonw==",
+			"version": "0.13.6",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.13.6.tgz",
+			"integrity": "sha512-LmbWgtriqfotontFi1lC6tEB56HOLP4YpwVKX3qrHxEMfMAyc/NFQgtGOHizTGMmUUkdVtCE37PA1Wnk6gsUZg==",
 			"dependencies": {
 				"@internationalized/date": "^3.5.1",
 				"@melt-ui/svelte": "0.67.0",
@@ -3702,6 +3703,16 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/import-meta-resolve": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.0.0.tgz",
+			"integrity": "sha512-okYUR7ZQPH+efeuMJGlq4f8ubUgO50kByRPyt/Cy1Io4PSRsPjxME+YlVaCOx+NIToW7hCsZNFJyTPFFKepRSA==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/imurmurhash": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -6963,9 +6974,9 @@
 			}
 		},
 		"node_modules/unplugin-icons": {
-			"version": "0.18.1",
-			"resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.18.1.tgz",
-			"integrity": "sha512-WzKu/eoq74YC7vyEAGsFebkRzsZrRkR4FUzLU6gbpfa7WRaVVpQS2n7LSxE1iRUN0scKL5b9bq+i0wucR+ttFQ==",
+			"version": "0.18.2",
+			"resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.18.2.tgz",
+			"integrity": "sha512-OgZoIJHGubeJmc3KePMOy62ovtxPEJfNMlr5tU+1ZqHGpSXubg3fnqq28VPvLL0D5vKj2PRCJF9tVGbQ7vBXJQ==",
 			"dependencies": {
 				"@antfu/install-pkg": "^0.3.0",
 				"@antfu/utils": "^0.7.6",
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index a4011a95b3..b470433e55 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -24,10 +24,10 @@
 	"devDependencies": {
 		"@playwright/test": "^1.40.1",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.0.6",
+		"@sveltejs/kit": "^2.1.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"@typescript-eslint/eslint-plugin": "^6.18.0",
-		"@typescript-eslint/parser": "^6.18.0",
+		"@typescript-eslint/eslint-plugin": "^6.18.1",
+		"@typescript-eslint/parser": "^6.18.1",
 		"autoprefixer": "^10.4.16",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.56.0",
@@ -49,11 +49,11 @@
 	"dependencies": {
 		"@exceptionless/browser": "^3.0.5",
 		"@iconify-json/mdi": "^1.1.64",
-		"@tanstack/svelte-query": "^5.17.7",
-		"@tanstack/svelte-query-devtools": "^5.17.7",
+		"@tanstack/svelte-query": "^5.17.9",
+		"@tanstack/svelte-query-devtools": "^5.17.9",
 		"@tanstack/svelte-table": "^8.11.3",
 		"@web3-storage/parse-link-header": "^3.1.0",
-		"bits-ui": "^0.13.3",
+		"bits-ui": "^0.13.6",
 		"class-validator": "^0.14.0",
 		"clsx": "^2.1.0",
 		"cmdk-sv": "^0.0.12",
@@ -68,7 +68,7 @@
 		"tailwind-merge": "^2.2.0",
 		"tailwind-variants": "^0.1.20",
 		"tailwindcss": "^3.4.1",
-		"unplugin-icons": "^0.18.1"
+		"unplugin-icons": "^0.18.2"
 	},
 	"type": "module"
 }
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/input/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/input/index.ts
index 9ba89bcd61..38f0a884c1 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/input/index.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/input/index.ts
@@ -8,6 +8,8 @@ export type InputEvents = {
 	change: FormInputEvent<Event>;
 	click: FormInputEvent<MouseEvent>;
 	focus: FormInputEvent<FocusEvent>;
+	focusin: FormInputEvent<FocusEvent>;
+	focusout: FormInputEvent<FocusEvent>;
 	keydown: FormInputEvent<KeyboardEvent>;
 	keypress: FormInputEvent<KeyboardEvent>;
 	keyup: FormInputEvent<KeyboardEvent>;
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/input/input.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/input/input.svelte
index 225a854610..c34cea741e 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/input/input.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/input/input.svelte
@@ -19,6 +19,8 @@
 	on:change
 	on:click
 	on:focus
+	on:focusin
+	on:focusout
 	on:keydown
 	on:keypress
 	on:keyup

From 4e241f353f3ee14f9be9dc0a6c174a8023fe7bae Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Tue, 9 Jan 2024 21:26:55 -0600
Subject: [PATCH 20/35] Fixed row selection

---
 .../lib/components/DateRangeDropdown.svelte   |  5 ++-
 .../data-table/data-table-page-size.svelte    | 42 +++++++++++++++++++
 .../data-table/data-table-pagination.svelte   | 23 ++--------
 .../src/lib/components/data-table/index.ts    |  3 ++
 .../events/table/EventsDataTable.svelte       |  9 +++-
 .../lib/components/events/table/options.ts    |  8 +++-
 6 files changed, 64 insertions(+), 26 deletions(-)
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-page-size.svelte

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/DateRangeDropdown.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/DateRangeDropdown.svelte
index b506b0b73f..40d57230c5 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/DateRangeDropdown.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/DateRangeDropdown.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import * as Select from '$comp/ui/select';
+	import type { Selected } from 'bits-ui';
 
 	export let value: string;
 
@@ -13,8 +14,8 @@
 
 	let selected = items.find((item) => item.value === value) || items[items.length - 1];
 
-	function onSelectedChange(item: { value: string; label: string }) {
-		value = item.value;
+	function onSelectedChange(selected: Selected<string> | undefined) {
+		value = selected?.value ?? '';
 	}
 </script>
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-page-size.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-page-size.svelte
new file mode 100644
index 0000000000..b57b600c25
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-page-size.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Table } from '@tanstack/svelte-table';
+	import type { Selected } from 'bits-ui';
+	import type { Readable, Writable } from 'svelte/store';
+
+	import * as Select from '$comp/ui/select';
+
+	type TData = $$Generic;
+	export let table: Readable<Table<TData>>;
+
+	export let value: Writable<number>;
+	export let defaultValue: number = 10;
+
+	const items = [
+		{ value: 10, label: '10' },
+		{ value: 20, label: '20' },
+		{ value: 30, label: '30' },
+		{ value: 40, label: '40' },
+		{ value: 50, label: '50' }
+	];
+
+	let selected = items.find((item) => item.value === $value) || items[0];
+	function onSelectedChange(selected: Selected<number> | undefined) {
+		const newValue = selected?.value ?? defaultValue;
+		value.set(newValue);
+		$table.setPageSize(newValue);
+	}
+</script>
+
+<div class="flex items-center space-x-2">
+	<p class="text-sm font-medium">Rows per page</p>
+	<Select.Root {items} bind:selected {onSelectedChange}>
+		<Select.Trigger class="w-[180px]">
+			<Select.Value placeholder="Select page size" />
+		</Select.Trigger>
+		<Select.Content>
+			{#each items as item}
+				<Select.Item value={item.value}>{item.label}</Select.Item>
+			{/each}
+		</Select.Content>
+	</Select.Root>
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte
index 1abd2e070e..ba267f729e 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-pagination.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { derived, writable, type Readable } from 'svelte/store';
+	import { derived, type Readable } from 'svelte/store';
 	import type { Table } from '@tanstack/svelte-table';
 
 	import { Button } from '$comp/ui/button';
 	import { ChevronRight, ChevronLeft, DoubleArrowLeft } from 'radix-icons-svelte';
-	import * as Select from '$comp/ui/select';
 	import Number from '$comp/formatters/Number.svelte';
 
 	type TData = $$Generic;
@@ -23,24 +22,8 @@
 		{/if}
 	</div>
 	<div class="flex items-center space-x-6 lg:space-x-8">
-		<div class="flex items-center space-x-2">
-			<p class="text-sm font-medium">Rows per page</p>
-			<Select.Root
-				onSelectedChange={(selected) => $table.setPageSize(selected?.value ?? 10)}
-				selected={{ value: 10, label: '10' }}
-			>
-				<Select.Trigger class="w-[180px]">
-					<Select.Value placeholder="Select page size" />
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Item value="10">10</Select.Item>
-					<Select.Item value="20">20</Select.Item>
-					<Select.Item value="30">30</Select.Item>
-					<Select.Item value="40">40</Select.Item>
-					<Select.Item value="50">50</Select.Item>
-				</Select.Content>
-			</Select.Root>
-		</div>
+		<slot />
+
 		<div class="flex w-[100px] items-center justify-center text-sm font-medium">
 			Page <Number value={$pageIndex + 1} /> of <Number value={$table.getPageCount()} />
 		</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
index 4d17772841..9eb47c7f4d 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
@@ -2,6 +2,7 @@ import Root from './data-table.svelte';
 import Body from './data-table-body.svelte';
 import Toolbar from './data-table-toolbar.svelte';
 import FacetedFilter from './data-table-faceted-filter.svelte';
+import PageSize from './data-table-page-size.svelte';
 import Pagination from './data-table-pagination.svelte';
 
 import StatusCell from './data-table-status-cell.svelte';
@@ -12,6 +13,7 @@ export {
 	Body,
 	Toolbar,
 	FacetedFilter,
+	PageSize,
 	Pagination,
 	StatusCell,
 	TitleCell,
@@ -20,6 +22,7 @@ export {
 	Body as DataTableBody,
 	Toolbar as DataTableToolbar,
 	FacetedFilter as DataTableFacetedFilter,
+	PageSize as DataTablePageSize,
 	Pagination as DataTablePagination,
 	StatusCell as DataTableStatusCell,
 	TitleCell as DataTableTitleCell
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
index 8d17224b0b..342d6debc5 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -46,7 +46,8 @@
 	export let filter: Readable<string>;
 	export let time: Readable<string>;
 
-	const parameters = writable<IGetEventsParams>({ mode });
+	let limit = persisted<number>('events.limit', 10);
+	const parameters = writable<IGetEventsParams>({ mode, limit: $limit });
 	const options = getOptions(parameters);
 	const table = createSvelteTable<SummaryModel<SummaryTemplateKeys>>(options);
 
@@ -78,6 +79,8 @@
 				pageCount: Math.ceil(total / ($parameters.limit ?? DEFAULT_LIMIT)),
 				meta: response.meta
 			}));
+
+			$table.resetRowSelection();
 		}
 	}
 
@@ -155,5 +158,7 @@
 		{/if}
 	</DataTable.Toolbar>
 	<DataTable.Body {table}></DataTable.Body>
-	<DataTable.Pagination {table}></DataTable.Pagination>
+	<DataTable.Pagination {table}>
+		<DataTable.PageSize {table} value={limit}></DataTable.PageSize>
+	</DataTable.Pagination>
 </DataTable.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
index 63a9de56b5..17c598ef4a 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
@@ -163,7 +163,7 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 
 	let pagination: PaginationState = {
 		pageIndex: 0,
-		pageSize: DEFAULT_LIMIT
+		pageSize: get(parameters).limit ?? DEFAULT_LIMIT
 	};
 
 	const onPaginationChange = (updaterOrValue: Updater<PaginationState>) => {
@@ -179,11 +179,15 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 			pagination = updaterOrValue;
 		}
 
+		// Force a reset of the row selection state until we get smarter about it.
+		rowSelection = {};
+
 		options.update((old) => ({
 			...old,
 			state: {
 				...old.state,
-				pagination: pagination
+				pagination,
+				rowSelection
 			},
 			meta: {
 				...old.meta,

From 6e2d13f0dd00828d6c786b9962733d75df8555bb Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Tue, 9 Jan 2024 21:33:05 -0600
Subject: [PATCH 21/35] some tweaks

---
 .../src/lib/components/DateRangeDropdown.svelte        |  5 ++++-
 .../components/data-table/data-table-page-size.svelte  | 10 +++++++---
 .../lib/components/events/table/EventsDataTable.svelte |  2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/DateRangeDropdown.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/DateRangeDropdown.svelte
index 40d57230c5..5bf0b19b51 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/DateRangeDropdown.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/DateRangeDropdown.svelte
@@ -15,7 +15,10 @@
 	let selected = items.find((item) => item.value === value) || items[items.length - 1];
 
 	function onSelectedChange(selected: Selected<string> | undefined) {
-		value = selected?.value ?? '';
+		const newValue = selected?.value ?? '';
+		if (newValue !== value) {
+			value = newValue;
+		}
 	}
 </script>
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-page-size.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-page-size.svelte
index b57b600c25..0b8942921c 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-page-size.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-page-size.svelte
@@ -8,7 +8,7 @@
 	type TData = $$Generic;
 	export let table: Readable<Table<TData>>;
 
-	export let value: Writable<number>;
+	export let value: number;
 	export let defaultValue: number = 10;
 
 	const items = [
@@ -19,10 +19,14 @@
 		{ value: 50, label: '50' }
 	];
 
-	let selected = items.find((item) => item.value === $value) || items[0];
+	let selected = items.find((item) => item.value === value) || items[0];
 	function onSelectedChange(selected: Selected<number> | undefined) {
 		const newValue = selected?.value ?? defaultValue;
-		value.set(newValue);
+		if (newValue === value) {
+			return;
+		}
+
+		value = newValue;
 		$table.setPageSize(newValue);
 	}
 </script>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
index 342d6debc5..852c7e1159 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -159,6 +159,6 @@
 	</DataTable.Toolbar>
 	<DataTable.Body {table}></DataTable.Body>
 	<DataTable.Pagination {table}>
-		<DataTable.PageSize {table} value={limit}></DataTable.PageSize>
+		<DataTable.PageSize {table} bind:value={$limit}></DataTable.PageSize>
 	</DataTable.Pagination>
 </DataTable.Root>

From bd9033ecbf3f9ac79a4fbd9d4589f31cfe954da5 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Tue, 9 Jan 2024 21:47:56 -0600
Subject: [PATCH 22/35] Added sheet to data grid

---
 .../data-table/data-table-body.svelte         | 31 +++++++++++++----
 .../events/table/EventsDataTable.svelte       |  5 ++-
 .../src/lib/components/table/Table.svelte     | 33 +++++++++++++++----
 .../ClientApp/src/routes/(app)/+page.svelte   | 30 ++++++++++++++---
 4 files changed, 81 insertions(+), 18 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-body.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-body.svelte
index 424606a502..e7280de934 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-body.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-body.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { type Readable } from 'svelte/store';
-	import { flexRender, type Header, type Table as SvelteTable } from '@tanstack/svelte-table';
+	import {
+		flexRender,
+		type Cell,
+		type Header,
+		type Table as SvelteTable
+	} from '@tanstack/svelte-table';
 
 	import DataTableColumnHeader from './data-table-column-header.svelte';
 	import * as Table from '$comp/ui/table';
@@ -13,9 +18,24 @@
 
 	function getHeaderColumnClass(header: Header<TData, unknown>) {
 		const classes = [(header.column.columnDef.meta as { class?: string })?.class || ''];
-
 		return classes.filter(Boolean).join(' ');
 	}
+
+	function getCellClass(cell: Cell<TData, unknown>) {
+		if (cell.column.id === 'select') {
+			return;
+		}
+
+		return 'cursor-pointer hover';
+	}
+
+	function onCellClick(cell: Cell<TData, unknown>): void {
+		if (cell.column.id === 'select') {
+			return;
+		}
+
+		dispatch('rowclick', cell.row.original);
+	}
 </script>
 
 <div class="border rounded-md">
@@ -45,12 +65,9 @@
 				</Table.Cell>
 			</Table.Row>
 			{#each $table.getRowModel().rows as row}
-				<Table.Row
-					class="cursor-pointer hover"
-					on:click={() => dispatch('rowclick', row.original)}
-				>
+				<Table.Row>
 					{#each row.getVisibleCells() as cell}
-						<Table.Cell>
+						<Table.Cell on:click={() => onCellClick(cell)} class={getCellClass(cell)}>
 							<svelte:component
 								this={flexRender(cell.column.columnDef.cell, cell.getContext())}
 							/>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
index 852c7e1159..15ff68152d 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -41,6 +41,7 @@
 	import { StackStatus } from '$lib/models/api.generated';
 	import { getOptions } from './options';
 	import { DEFAULT_LIMIT } from '$lib/helpers/api';
+	import { createEventDispatcher } from 'svelte';
 
 	export let mode: GetEventsMode = 'summary';
 	export let filter: Readable<string>;
@@ -125,6 +126,7 @@
 	});
 
 	$: showReset = Object.values($filterValues).some((v) => v.length > 0);
+	const dispatch = createEventDispatcher();
 </script>
 
 <CustomEventMessage type="refresh" on:message={loadData}></CustomEventMessage>
@@ -157,7 +159,8 @@
 			</Button>
 		{/if}
 	</DataTable.Toolbar>
-	<DataTable.Body {table}></DataTable.Body>
+	<DataTable.Body {table} on:rowclick={(event) => dispatch('rowclick', event.detail)}
+	></DataTable.Body>
 	<DataTable.Pagination {table}>
 		<DataTable.PageSize {table} bind:value={$limit}></DataTable.PageSize>
 	</DataTable.Pagination>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/table/Table.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/table/Table.svelte
index d677f625c9..7218ed3e2f 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/table/Table.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/table/Table.svelte
@@ -3,7 +3,12 @@
 	import KeyboardArrowUpIcon from '~icons/mdi/keyboard-arrow-up';
 
 	import * as Table from '$comp/ui/table';
-	import { flexRender, type Header, type Table as TableType } from '@tanstack/svelte-table';
+	import {
+		flexRender,
+		type Cell,
+		type Header,
+		type Table as TableType
+	} from '@tanstack/svelte-table';
 	import { createEventDispatcher } from 'svelte';
 	import type { Readable } from 'svelte/store';
 
@@ -24,6 +29,22 @@
 
 		return classes.filter(Boolean).join(' ');
 	}
+
+	function getCellClass(cell: Cell<TData, unknown>) {
+		if (cell.column.id === 'select') {
+			return;
+		}
+
+		return 'cursor-pointer hover';
+	}
+
+	function onCellClick(cell: Cell<TData, unknown>): void {
+		if (cell.column.id === 'select') {
+			return;
+		}
+
+		dispatch('rowclick', cell.row.original);
+	}
 </script>
 
 <div class="flex flex-col">
@@ -72,12 +93,12 @@
 						</Table.Cell>
 					</Table.Row>
 					{#each $table.getRowModel().rows as row}
-						<Table.Row
-							class="cursor-pointer hover"
-							on:click={() => dispatch('rowclick', row.original)}
-						>
+						<Table.Row>
 							{#each row.getVisibleCells() as cell}
-								<Table.Cell>
+								<Table.Cell
+									on:click={() => onCellClick(cell)}
+									class={getCellClass(cell)}
+								>
 									<svelte:component
 										this={flexRender(
 											cell.column.columnDef.cell,
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
index a84f66696c..d6f5edf3b2 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
@@ -1,11 +1,20 @@
 <script lang="ts">
-	import EventsDataTable from '$comp/events/table/EventsDataTable.svelte';
-	import * as Card from '$comp/ui/card';
 	import { persisted } from 'svelte-local-storage-store';
 	import { writable } from 'svelte/store';
 
+	import * as Card from '$comp/ui/card';
+	import * as Sheet from '$comp/ui/sheet';
+	import EventsDataTable from '$comp/events/table/EventsDataTable.svelte';
+	import EventsDrawer from '$comp/events/EventsDrawer.svelte';
+	import type { SummaryModel, SummaryTemplateKeys } from '$lib/models/api';
+
 	let filter = writable('');
 	let time = persisted<string>('filter.time', '');
+
+	let selectedEventId: string | null = null;
+	function onRowClick({ detail }: CustomEvent<SummaryModel<SummaryTemplateKeys>>) {
+		selectedEventId = detail.id;
+	}
 </script>
 
 <svelte:head>
@@ -14,5 +23,18 @@
 
 <Card.Root>
 	<Card.Title class="p-6 pb-4 text-xl font-bold">Tasks</Card.Title>
-	<Card.Content><EventsDataTable {filter} {time}></EventsDataTable></Card.Content></Card.Root
->
+	<Card.Content>
+		<EventsDataTable {filter} {time} on:rowclick={onRowClick}></EventsDataTable>
+	</Card.Content>
+</Card.Root>
+
+<Sheet.Root open={!!selectedEventId} onOpenChange={() => (selectedEventId = null)}>
+	<Sheet.Content class="w-full md:w-5/6 sm:max-w-full">
+		<Sheet.Header>
+			<Sheet.Title>Event Details</Sheet.Title>
+			<Sheet.Description>
+				<EventsDrawer id={selectedEventId || ''}></EventsDrawer>
+			</Sheet.Description>
+		</Sheet.Header>
+	</Sheet.Content>
+</Sheet.Root>

From 4ecaba74fdaf0d3f77117d45d8aaf1688c32e411 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Tue, 9 Jan 2024 21:56:37 -0600
Subject: [PATCH 23/35] Removed title cell as it made no difference

---
 .../data-table/data-table-title-cell.svelte   | 31 -------------------
 .../src/lib/components/data-table/index.ts    |  5 +--
 .../events/table/EventsDataTable.svelte       | 13 +-------
 3 files changed, 2 insertions(+), 47 deletions(-)
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-title-cell.svelte

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-title-cell.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-title-cell.svelte
deleted file mode 100644
index f0a70a1f40..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-title-cell.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { Badge } from '$comp/ui/badge';
-
-	const labels = [
-		{
-			value: 'bug',
-			label: 'Bug'
-		},
-		{
-			value: 'feature',
-			label: 'Feature'
-		},
-		{
-			value: 'documentation',
-			label: 'Documentation'
-		}
-	];
-
-	export let value: string;
-	export let labelValue: string;
-	const label = labels.find((label) => label.value === labelValue);
-</script>
-
-<div class="flex space-x-2">
-	{#if label}
-		<Badge variant="outline">{label.label}</Badge>
-	{/if}
-	<span class="max-w-[500px] truncate font-medium">
-		{value}
-	</span>
-</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
index 9eb47c7f4d..d8598fb3a6 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
@@ -6,7 +6,6 @@ import PageSize from './data-table-page-size.svelte';
 import Pagination from './data-table-pagination.svelte';
 
 import StatusCell from './data-table-status-cell.svelte';
-import TitleCell from './data-table-title-cell.svelte';
 
 export {
 	Root,
@@ -16,7 +15,6 @@ export {
 	PageSize,
 	Pagination,
 	StatusCell,
-	TitleCell,
 	//
 	Root as DataTable,
 	Body as DataTableBody,
@@ -24,6 +22,5 @@ export {
 	FacetedFilter as DataTableFacetedFilter,
 	PageSize as DataTablePageSize,
 	Pagination as DataTablePagination,
-	StatusCell as DataTableStatusCell,
-	TitleCell as DataTableTitleCell
+	StatusCell as DataTableStatusCell
 };
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
index 15ff68152d..0bfeecb240 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -1,14 +1,6 @@
 <script lang="ts">
 	import { writable, type Readable, type Writable } from 'svelte/store';
-	import {
-		createSvelteTable,
-		getCoreRowModel,
-		type TableOptions,
-		type Updater,
-		type VisibilityState,
-		type ColumnSort,
-		type PaginationState
-	} from '@tanstack/svelte-table';
+	import { createSvelteTable } from '@tanstack/svelte-table';
 	import type {
 		EventSummaryModel,
 		GetEventsMode,
@@ -27,9 +19,6 @@
 	import * as DataTable from '$comp/data-table';
 	import { Button } from '$comp/ui/button';
 	import {
-		ArrowDown,
-		ArrowRight,
-		ArrowUp,
 		CheckCircled,
 		Circle,
 		Cross2,

From 1aa35de41daaadc88e3347c4e5543eb1314db01b Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Fri, 12 Jan 2024 21:21:46 -0600
Subject: [PATCH 24/35] Updated deps

---
 .../Exceptionless.Core.csproj                 |   6 +-
 .../Exceptionless.Job.csproj                  |   2 +-
 .../ClientApp/package-lock.json               | 194 +++++++++---------
 src/Exceptionless.Web/ClientApp/package.json  |  20 +-
 .../Exceptionless.Web.csproj                  |   6 +-
 .../Exceptionless.Tests.csproj                |   2 +-
 6 files changed, 115 insertions(+), 115 deletions(-)

diff --git a/src/Exceptionless.Core/Exceptionless.Core.csproj b/src/Exceptionless.Core/Exceptionless.Core.csproj
index b49bb47da0..b5f214f1f1 100644
--- a/src/Exceptionless.Core/Exceptionless.Core.csproj
+++ b/src/Exceptionless.Core/Exceptionless.Core.csproj
@@ -27,10 +27,10 @@
     <PackageReference Include="NEST.JsonNetSerializer" Version="7.17.5" />
     <PackageReference Include="Handlebars.Net" Version="2.1.4" />
     <PackageReference Include="McSherry.SemanticVersioning" Version="1.4.1" />
-    <PackageReference Include="Microsoft.Extensions.Configuration.Binder" Version="8.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Diagnostics.HealthChecks" Version="8.0.0" />
+    <PackageReference Include="Microsoft.Extensions.Configuration.Binder" Version="8.0.1" />
+    <PackageReference Include="Microsoft.Extensions.Diagnostics.HealthChecks" Version="8.0.1" />
     <PackageReference Include="Microsoft.Extensions.Logging" Version="8.0.0" />
-    <PackageReference Include="Stripe.net" Version="43.9.0" />
+    <PackageReference Include="Stripe.net" Version="43.10.0" />
     <PackageReference Include="System.DirectoryServices" Version="8.0.0" />
     <PackageReference Include="UAParser" Version="3.1.47" />
 
diff --git a/src/Exceptionless.Job/Exceptionless.Job.csproj b/src/Exceptionless.Job/Exceptionless.Job.csproj
index 5080bb06b8..6b84e721a1 100644
--- a/src/Exceptionless.Job/Exceptionless.Job.csproj
+++ b/src/Exceptionless.Job/Exceptionless.Job.csproj
@@ -5,7 +5,7 @@
 
   <ItemGroup>
     <PackageReference Include="Exceptionless.AspNetCore" Version="6.0.3" />
-    <PackageReference Include="Microsoft.Extensions.Diagnostics.HealthChecks" Version="8.0.0" />
+    <PackageReference Include="Microsoft.Extensions.Diagnostics.HealthChecks" Version="8.0.1" />
     <PackageReference Include="App.Metrics.AspNetCore" Version="4.3.0" />
     <PackageReference Include="Serilog.AspNetCore" Version="8.0.0" />
     <PackageReference Include="Serilog.Enrichers.Span" Version="3.1.0" />
diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
index 2433db7a33..701f68a3f1 100644
--- a/src/Exceptionless.Web/ClientApp/package-lock.json
+++ b/src/Exceptionless.Web/ClientApp/package-lock.json
@@ -10,14 +10,14 @@
 			"dependencies": {
 				"@exceptionless/browser": "^3.0.5",
 				"@iconify-json/mdi": "^1.1.64",
-				"@tanstack/svelte-query": "^5.17.9",
-				"@tanstack/svelte-query-devtools": "^5.17.9",
-				"@tanstack/svelte-table": "^8.11.3",
+				"@tanstack/svelte-query": "^5.17.10",
+				"@tanstack/svelte-query-devtools": "^5.17.10",
+				"@tanstack/svelte-table": "^8.11.6",
 				"@web3-storage/parse-link-header": "^3.1.0",
-				"bits-ui": "^0.13.6",
-				"class-validator": "^0.14.0",
+				"bits-ui": "^0.14.0",
+				"class-validator": "^0.14.1",
 				"clsx": "^2.1.0",
-				"cmdk-sv": "^0.0.12",
+				"cmdk-sv": "^0.0.13",
 				"mode-watcher": "^0.1.2",
 				"oidc-client-ts": "^2.4.0",
 				"pretty-ms": "^8.0.0",
@@ -34,7 +34,7 @@
 			"devDependencies": {
 				"@playwright/test": "^1.40.1",
 				"@sveltejs/adapter-static": "^3.0.1",
-				"@sveltejs/kit": "^2.1.0",
+				"@sveltejs/kit": "^2.3.2",
 				"@sveltejs/vite-plugin-svelte": "^3.0.1",
 				"@typescript-eslint/eslint-plugin": "^6.18.1",
 				"@typescript-eslint/parser": "^6.18.1",
@@ -45,16 +45,16 @@
 				"eslint-plugin-svelte": "^2.35.1",
 				"npm-run-all": "^4.1.5",
 				"postcss": "^8.4.33",
-				"prettier": "^3.1.1",
+				"prettier": "^3.2.1",
 				"prettier-plugin-svelte": "^3.1.2",
 				"prettier-plugin-tailwindcss": "^0.5.11",
 				"svelte": "^4.2.8",
-				"svelte-check": "^3.6.2",
+				"svelte-check": "^3.6.3",
 				"swagger-typescript-api": "^13.0.3",
 				"tslib": "^2.6.2",
 				"typescript": "^5.3.3",
 				"vite": "^5.0.11",
-				"vitest": "^1.1.3"
+				"vitest": "^1.2.0"
 			}
 		},
 		"node_modules/@aashutoshrathi/word-wrap": {
@@ -1058,25 +1058,25 @@
 			}
 		},
 		"node_modules/@melt-ui/svelte": {
-			"version": "0.67.0",
-			"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.67.0.tgz",
-			"integrity": "sha512-fd9PsDE6sKbeyExagqH0nOpZEnDqyr2efbkjfmCRRYXVW5vlDEOPaSB+mg4Tjch121102sFH1Od+MlXwmeHy3A==",
+			"version": "0.68.0",
+			"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.68.0.tgz",
+			"integrity": "sha512-/QvA98hnYEodZtHJ71+ocum/WWp30hVNt3F8uiZKnNYwZDaiQYjlyR9AaGKYcZLCe6R68op1mfCzc0kTzJilyA==",
 			"dependencies": {
 				"@floating-ui/core": "^1.3.1",
 				"@floating-ui/dom": "^1.4.5",
 				"@internationalized/date": "^3.5.0",
 				"dequal": "^2.0.3",
 				"focus-trap": "^7.5.2",
-				"nanoid": "^4.0.2"
+				"nanoid": "^5.0.4"
 			},
 			"peerDependencies": {
 				"svelte": ">=3 <5"
 			}
 		},
 		"node_modules/@melt-ui/svelte/node_modules/nanoid": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.2.tgz",
-			"integrity": "sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==",
+			"version": "5.0.4",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.4.tgz",
+			"integrity": "sha512-vAjmBf13gsmhXSgBrtIclinISzFFy22WwCYoyilZlsrRXNIHSwgFQ1bEdjRwMT3aoadeIF6HMuDRlOxzfXV8ig==",
 			"funding": [
 				{
 					"type": "github",
@@ -1087,7 +1087,7 @@
 				"nanoid": "bin/nanoid.js"
 			},
 			"engines": {
-				"node": "^14 || ^16 || >=18"
+				"node": "^18 || >=20"
 			}
 		},
 		"node_modules/@nodelib/fs.scandir": {
@@ -1340,9 +1340,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.1.0.tgz",
-			"integrity": "sha512-XSIjk9uY705VRpLapfScvOI3bKTfPXntLCdWVsQHhLvkTD7TPNHWh45/6nTT1vQ8rJwWzzA5sLide2YLT4FMsg==",
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.3.2.tgz",
+			"integrity": "sha512-AzGWV1TyUSkBuciy06E5NegXndIEgTthDtllv80qynEJFh8bZD62ZxLajiQLOsKGqRDilEQyshDARQxjIqiaqg==",
 			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
@@ -1419,9 +1419,9 @@
 			}
 		},
 		"node_modules/@tanstack/query-core": {
-			"version": "5.17.9",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.17.9.tgz",
-			"integrity": "sha512-8xcvpWIPaRMDNLMvG9ugcUJMgFK316ZsqkPPbsI+TMZsb10N9jk0B6XgPk4/kgWC2ziHyWR7n7wUhxmD0pChQw==",
+			"version": "5.17.10",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.17.10.tgz",
+			"integrity": "sha512-bJ2oQUDBftvHcEkLS3gyzzShSeZpJyzNNRu8oHK13iNdsofyaDXtNO/c1Zy/PZYVX+PhqOXwoT42gMiEMRSSfQ==",
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
@@ -1437,11 +1437,11 @@
 			}
 		},
 		"node_modules/@tanstack/svelte-query": {
-			"version": "5.17.9",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query/-/svelte-query-5.17.9.tgz",
-			"integrity": "sha512-Ji0FITYiUiUEIfKvv2ZG4mXX06DYz8ULCrWMoFtqW42/ds4Itdwz1r8VNHzm1Svh04YhBBsFeoCmvM4+9bo1oA==",
+			"version": "5.17.10",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query/-/svelte-query-5.17.10.tgz",
+			"integrity": "sha512-KmX6DbfJwhhCRwOED6hObT8aBp0XZ6Aa9HN1WpIcEkZaSRJfbPRjx48N7j2CZXNpngY3NX0/D6cSeiIszaZQZQ==",
 			"dependencies": {
-				"@tanstack/query-core": "5.17.9"
+				"@tanstack/query-core": "5.17.10"
 			},
 			"funding": {
 				"type": "github",
@@ -1452,9 +1452,9 @@
 			}
 		},
 		"node_modules/@tanstack/svelte-query-devtools": {
-			"version": "5.17.9",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.17.9.tgz",
-			"integrity": "sha512-G6HqqRuxeXjWGDSDlFBWm6L/6Os/ECgel+6b6+NyyrsfSe629GAnktZf2AhsHZ46fLmUaZBdu41zPMDWpRf6Eg==",
+			"version": "5.17.10",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-query-devtools/-/svelte-query-devtools-5.17.10.tgz",
+			"integrity": "sha512-r1CDCt4WV7RJOtg3yQlfvwuKrUKfXFAEVKvnXhMKd1fYbpPmW3QxR4g4Gc2sGEwQzXN9Qk15AQ7prTCkollC5Q==",
 			"dependencies": {
 				"@tanstack/query-devtools": "5.17.7",
 				"esm-env": "^1.0.0"
@@ -1464,16 +1464,16 @@
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/svelte-query": "^5.17.9",
+				"@tanstack/svelte-query": "^5.17.10",
 				"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0"
 			}
 		},
 		"node_modules/@tanstack/svelte-table": {
-			"version": "8.11.3",
-			"resolved": "https://registry.npmjs.org/@tanstack/svelte-table/-/svelte-table-8.11.3.tgz",
-			"integrity": "sha512-dQZopjVhu7bFxcn30RsCQUzvudFXH3ODBrqrWBPnnzlcWf/+JJEJYIOSFd5IILDUgPpb2t2a47/k7JKYx2/U0g==",
+			"version": "8.11.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/svelte-table/-/svelte-table-8.11.6.tgz",
+			"integrity": "sha512-GWPah/E6+0yGQJv988RegSsh6ziwEataLz57hsKlXsrvcTiMAVuZPd3v1u01klFFkMr9a7xPITOANa7zv4aoaQ==",
 			"dependencies": {
-				"@tanstack/table-core": "8.11.3"
+				"@tanstack/table-core": "8.11.6"
 			},
 			"engines": {
 				"node": ">=12"
@@ -1487,9 +1487,9 @@
 			}
 		},
 		"node_modules/@tanstack/table-core": {
-			"version": "8.11.3",
-			"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.11.3.tgz",
-			"integrity": "sha512-nkcFIL696wTf1QMvhGR7dEg60OIRwEZm1OqFTYYDTRc4JOWspgrsJO3IennsOJ7ptumHWLDjV8e5BjPkZcSZAQ==",
+			"version": "8.11.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.11.6.tgz",
+			"integrity": "sha512-69WEY1PaZROaGYUrseng4/4sMYnRGhDe1vM6888CnWekGz/wuCnvqwOoOuKGYivnaiI4BVmZq4WKWhvahyj3/g==",
 			"engines": {
 				"node": ">=12"
 			},
@@ -1542,9 +1542,9 @@
 			"dev": true
 		},
 		"node_modules/@types/validator": {
-			"version": "13.11.1",
-			"resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.11.1.tgz",
-			"integrity": "sha512-d/MUkJYdOeKycmm75Arql4M5+UuXmf4cHdHKsyw1GcvnNgL6s77UkgSgJ8TE/rI5PYsnwYq5jkcWBLuN/MpQ1A=="
+			"version": "13.11.8",
+			"resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.11.8.tgz",
+			"integrity": "sha512-c/hzNDBh7eRF+KbCf+OoZxKbnkpaK/cKp9iLQWqB7muXtM+MtL9SUUH8vCFcLn6dH1Qm05jiexK0ofWY7TfOhQ=="
 		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "6.18.1",
@@ -1767,13 +1767,13 @@
 			"dev": true
 		},
 		"node_modules/@vitest/expect": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.1.3.tgz",
-			"integrity": "sha512-MnJqsKc1Ko04lksF9XoRJza0bGGwTtqfbyrsYv5on4rcEkdo+QgUdITenBQBUltKzdxW7K3rWh+nXRULwsdaVg==",
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.2.0.tgz",
+			"integrity": "sha512-H+2bHzhyvgp32o7Pgj2h9RTHN0pgYaoi26Oo3mE+dCi1PAqV31kIIVfTbqMO3Bvshd5mIrJLc73EwSRrbol9Lw==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/spy": "1.1.3",
-				"@vitest/utils": "1.1.3",
+				"@vitest/spy": "1.2.0",
+				"@vitest/utils": "1.2.0",
 				"chai": "^4.3.10"
 			},
 			"funding": {
@@ -1781,12 +1781,12 @@
 			}
 		},
 		"node_modules/@vitest/runner": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.1.3.tgz",
-			"integrity": "sha512-Va2XbWMnhSdDEh/OFxyUltgQuuDRxnarK1hW5QNN4URpQrqq6jtt8cfww/pQQ4i0LjoYxh/3bYWvDFlR9tU73g==",
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.2.0.tgz",
+			"integrity": "sha512-vaJkDoQaNUTroT70OhM0NPznP7H3WyRwt4LvGwCVYs/llLaqhoSLnlIhUClZpbF5RgAee29KRcNz0FEhYcgxqA==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/utils": "1.1.3",
+				"@vitest/utils": "1.2.0",
 				"p-limit": "^5.0.0",
 				"pathe": "^1.1.1"
 			},
@@ -1822,9 +1822,9 @@
 			}
 		},
 		"node_modules/@vitest/snapshot": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.1.3.tgz",
-			"integrity": "sha512-U0r8pRXsLAdxSVAyGNcqOU2H3Z4Y2dAAGGelL50O0QRMdi1WWeYHdrH/QWpN1e8juWfVKsb8B+pyJwTC+4Gy9w==",
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.2.0.tgz",
+			"integrity": "sha512-P33EE7TrVgB3HDLllrjK/GG6WSnmUtWohbwcQqmm7TAk9AVHpdgf7M3F3qRHKm6vhr7x3eGIln7VH052Smo6Kw==",
 			"dev": true,
 			"dependencies": {
 				"magic-string": "^0.30.5",
@@ -1836,9 +1836,9 @@
 			}
 		},
 		"node_modules/@vitest/spy": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.1.3.tgz",
-			"integrity": "sha512-Ec0qWyGS5LhATFQtldvChPTAHv08yHIOZfiNcjwRQbFPHpkih0md9KAbs7TfeIfL7OFKoe7B/6ukBTqByubXkQ==",
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.2.0.tgz",
+			"integrity": "sha512-MNxSAfxUaCeowqyyGwC293yZgk7cECZU9wGb8N1pYQ0yOn/SIr8t0l9XnGRdQZvNV/ZHBYu6GO/W3tj5K3VN1Q==",
 			"dev": true,
 			"dependencies": {
 				"tinyspy": "^2.2.0"
@@ -1848,9 +1848,9 @@
 			}
 		},
 		"node_modules/@vitest/utils": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.1.3.tgz",
-			"integrity": "sha512-Dyt3UMcdElTll2H75vhxfpZu03uFpXRCHxWnzcrFjZxT1kTbq8ALUYIeBgGolo1gldVdI0YSlQRacsqxTwNqwg==",
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.2.0.tgz",
+			"integrity": "sha512-FyD5bpugsXlwVpTcGLDf3wSPYy8g541fQt14qtzo8mJ4LdEpDKZ9mQy2+qdJm2TZRpjY5JLXihXCgIxiRJgi5g==",
 			"dev": true,
 			"dependencies": {
 				"diff-sequences": "^29.6.3",
@@ -2095,12 +2095,12 @@
 			}
 		},
 		"node_modules/bits-ui": {
-			"version": "0.13.6",
-			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.13.6.tgz",
-			"integrity": "sha512-LmbWgtriqfotontFi1lC6tEB56HOLP4YpwVKX3qrHxEMfMAyc/NFQgtGOHizTGMmUUkdVtCE37PA1Wnk6gsUZg==",
+			"version": "0.14.0",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.14.0.tgz",
+			"integrity": "sha512-S1LNwp/Sge1Ro1g0iJ+msIUeJYmoNhXBFShnLDOUOKQe3JG1wd027KxZnVd7db6UWr1IqlJdd4/bbB7NYXeYDw==",
 			"dependencies": {
 				"@internationalized/date": "^3.5.1",
-				"@melt-ui/svelte": "0.67.0",
+				"@melt-ui/svelte": "0.68.0",
 				"nanoid": "^5.0.4"
 			},
 			"peerDependencies": {
@@ -2260,9 +2260,9 @@
 			}
 		},
 		"node_modules/chai": {
-			"version": "4.4.0",
-			"resolved": "https://registry.npmjs.org/chai/-/chai-4.4.0.tgz",
-			"integrity": "sha512-x9cHNq1uvkCdU+5xTkNh5WtgD4e4yDFCsp9jVc7N7qVeKeftv3gO/ZrviX5d+3ZfxdYnZXZYujjRInu1RogU6A==",
+			"version": "4.4.1",
+			"resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz",
+			"integrity": "sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==",
 			"dev": true,
 			"dependencies": {
 				"assertion-error": "^1.1.0",
@@ -2352,13 +2352,13 @@
 			}
 		},
 		"node_modules/class-validator": {
-			"version": "0.14.0",
-			"resolved": "https://registry.npmjs.org/class-validator/-/class-validator-0.14.0.tgz",
-			"integrity": "sha512-ct3ltplN8I9fOwUd8GrP8UQixwff129BkEtuWDKL5W45cQuLd19xqmTLu5ge78YDm/fdje6FMt0hGOhl0lii3A==",
+			"version": "0.14.1",
+			"resolved": "https://registry.npmjs.org/class-validator/-/class-validator-0.14.1.tgz",
+			"integrity": "sha512-2VEG9JICxIqTpoK1eMzZqaV+u/EiwEJkMGzTrZf6sU/fwsnOITVgYJ8yojSy6CaXtO9V0Cc6ZQZ8h8m4UBuLwQ==",
 			"dependencies": {
-				"@types/validator": "^13.7.10",
-				"libphonenumber-js": "^1.10.14",
-				"validator": "^13.7.0"
+				"@types/validator": "^13.11.8",
+				"libphonenumber-js": "^1.10.53",
+				"validator": "^13.9.0"
 			}
 		},
 		"node_modules/cliui": {
@@ -2384,9 +2384,9 @@
 			}
 		},
 		"node_modules/cmdk-sv": {
-			"version": "0.0.12",
-			"resolved": "https://registry.npmjs.org/cmdk-sv/-/cmdk-sv-0.0.12.tgz",
-			"integrity": "sha512-d+eILSOb2W+/3U/j7xGTgGRrZkFB/z4Xlvj0ADrWhf34y9YLzJon3JCGP2hMil5IrVm0P/+IFIeCF5l3//kcjA==",
+			"version": "0.0.13",
+			"resolved": "https://registry.npmjs.org/cmdk-sv/-/cmdk-sv-0.0.13.tgz",
+			"integrity": "sha512-WrYn0MMdVyzJx+KuOQy028/7mv+uMwO1cxVBM0uJ4KA+50PX792epsj8Yw3It8WfWR8Rae7siBCg54mIAlKsiw==",
 			"dependencies": {
 				"bits-ui": "^0.9.0",
 				"nanoid": "^5.0.2"
@@ -4128,9 +4128,9 @@
 			}
 		},
 		"node_modules/libphonenumber-js": {
-			"version": "1.10.41",
-			"resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.41.tgz",
-			"integrity": "sha512-4rmmF4u4vD3eGNuuCGjCPwRwO+fIuu1WWcS7VwbPTiMFkJd8F02v8o5pY5tlYuMR+xOvJ88mtOHpkm0Tnu2LcQ=="
+			"version": "1.10.53",
+			"resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.53.tgz",
+			"integrity": "sha512-sDTnnqlWK4vH4AlDQuswz3n4Hx7bIQWTpIcScJX+Sp7St3LXHmfiax/ZFfyYxHmkdCvydOLSuvtAO/XpXiSySw=="
 		},
 		"node_modules/lilconfig": {
 			"version": "2.1.0",
@@ -5342,9 +5342,9 @@
 			}
 		},
 		"node_modules/prettier": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz",
-			"integrity": "sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==",
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.1.tgz",
+			"integrity": "sha512-qSUWshj1IobVbKc226Gw2pync27t0Kf0EdufZa9j7uBSJay1CC+B3K5lAAZoqgX3ASiKuWsk6OmzKRetXNObWg==",
 			"dev": true,
 			"bin": {
 				"prettier": "bin/prettier.cjs"
@@ -6310,9 +6310,9 @@
 			}
 		},
 		"node_modules/svelte-check": {
-			"version": "3.6.2",
-			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.6.2.tgz",
-			"integrity": "sha512-E6iFh4aUCGJLRz6QZXH3gcN/VFfkzwtruWSRmlKrLWQTiO6VzLsivR6q02WYLGNAGecV3EocqZuCDrC2uttZ0g==",
+			"version": "3.6.3",
+			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.6.3.tgz",
+			"integrity": "sha512-Q2nGnoysxUnB9KjnjpQLZwdjK62DHyW6nuH/gm2qteFnDk0lCehe/6z8TsIvYeKjC6luKaWxiNGyOcWiLLPSwA==",
 			"dev": true,
 			"dependencies": {
 				"@jridgewell/trace-mapping": "^0.3.17",
@@ -7147,9 +7147,9 @@
 			}
 		},
 		"node_modules/vite-node": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.1.3.tgz",
-			"integrity": "sha512-BLSO72YAkIUuNrOx+8uznYICJfTEbvBAmWClY3hpath5+h1mbPS5OMn42lrTxXuyCazVyZoDkSRnju78GiVCqA==",
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.2.0.tgz",
+			"integrity": "sha512-ETnQTHeAbbOxl7/pyBck9oAPZZZo+kYnFt1uQDD+hPReOc+wCjXw4r4jHriBRuVDB5isHmPXxrfc1yJnfBERqg==",
 			"dev": true,
 			"dependencies": {
 				"cac": "^6.7.14",
@@ -7183,16 +7183,16 @@
 			}
 		},
 		"node_modules/vitest": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/vitest/-/vitest-1.1.3.tgz",
-			"integrity": "sha512-2l8om1NOkiA90/Y207PsEvJLYygddsOyr81wLQ20Ra8IlLKbyQncWsGZjnbkyG2KwwuTXLQjEPOJuxGMG8qJBQ==",
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/vitest/-/vitest-1.2.0.tgz",
+			"integrity": "sha512-Ixs5m7BjqvLHXcibkzKRQUvD/XLw0E3rvqaCMlrm/0LMsA0309ZqYvTlPzkhh81VlEyVZXFlwWnkhb6/UMtcaQ==",
 			"dev": true,
 			"dependencies": {
-				"@vitest/expect": "1.1.3",
-				"@vitest/runner": "1.1.3",
-				"@vitest/snapshot": "1.1.3",
-				"@vitest/spy": "1.1.3",
-				"@vitest/utils": "1.1.3",
+				"@vitest/expect": "1.2.0",
+				"@vitest/runner": "1.2.0",
+				"@vitest/snapshot": "1.2.0",
+				"@vitest/spy": "1.2.0",
+				"@vitest/utils": "1.2.0",
 				"acorn-walk": "^8.3.1",
 				"cac": "^6.7.14",
 				"chai": "^4.3.10",
@@ -7207,7 +7207,7 @@
 				"tinybench": "^2.5.1",
 				"tinypool": "^0.8.1",
 				"vite": "^5.0.0",
-				"vite-node": "1.1.3",
+				"vite-node": "1.2.0",
 				"why-is-node-running": "^2.2.2"
 			},
 			"bin": {
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index b470433e55..42e98547a2 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -24,7 +24,7 @@
 	"devDependencies": {
 		"@playwright/test": "^1.40.1",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.1.0",
+		"@sveltejs/kit": "^2.3.2",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"@typescript-eslint/eslint-plugin": "^6.18.1",
 		"@typescript-eslint/parser": "^6.18.1",
@@ -35,28 +35,28 @@
 		"eslint-plugin-svelte": "^2.35.1",
 		"npm-run-all": "^4.1.5",
 		"postcss": "^8.4.33",
-		"prettier": "^3.1.1",
+		"prettier": "^3.2.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"prettier-plugin-tailwindcss": "^0.5.11",
 		"svelte": "^4.2.8",
-		"svelte-check": "^3.6.2",
+		"svelte-check": "^3.6.3",
 		"swagger-typescript-api": "^13.0.3",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",
 		"vite": "^5.0.11",
-		"vitest": "^1.1.3"
+		"vitest": "^1.2.0"
 	},
 	"dependencies": {
 		"@exceptionless/browser": "^3.0.5",
 		"@iconify-json/mdi": "^1.1.64",
-		"@tanstack/svelte-query": "^5.17.9",
-		"@tanstack/svelte-query-devtools": "^5.17.9",
-		"@tanstack/svelte-table": "^8.11.3",
+		"@tanstack/svelte-query": "^5.17.10",
+		"@tanstack/svelte-query-devtools": "^5.17.10",
+		"@tanstack/svelte-table": "^8.11.6",
 		"@web3-storage/parse-link-header": "^3.1.0",
-		"bits-ui": "^0.13.6",
-		"class-validator": "^0.14.0",
+		"bits-ui": "^0.14.0",
+		"class-validator": "^0.14.1",
 		"clsx": "^2.1.0",
-		"cmdk-sv": "^0.0.12",
+		"cmdk-sv": "^0.0.13",
 		"mode-watcher": "^0.1.2",
 		"oidc-client-ts": "^2.4.0",
 		"pretty-ms": "^8.0.0",
diff --git a/src/Exceptionless.Web/Exceptionless.Web.csproj b/src/Exceptionless.Web/Exceptionless.Web.csproj
index 29367d6893..3f56a40811 100644
--- a/src/Exceptionless.Web/Exceptionless.Web.csproj
+++ b/src/Exceptionless.Web/Exceptionless.Web.csproj
@@ -18,9 +18,9 @@
   <ItemGroup>
     <PackageReference Include="Exceptionless.AspNetCore" Version="6.0.3" />
     <PackageReference Include="Joonasw.AspNetCore.SecurityHeaders" Version="5.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="8.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="8.0.0" />
-    <PackageReference Include="Microsoft.Extensions.Diagnostics.HealthChecks" Version="8.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="8.0.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="8.0.1" />
+    <PackageReference Include="Microsoft.Extensions.Diagnostics.HealthChecks" Version="8.0.1" />
     <PackageReference Include="MiniValidation" Version="0.9.0" />
     <PackageReference Include="NEST.JsonNetSerializer" Version="7.17.5" />
     <PackageReference Include="OAuth2" Version="0.10.3" />
diff --git a/tests/Exceptionless.Tests/Exceptionless.Tests.csproj b/tests/Exceptionless.Tests/Exceptionless.Tests.csproj
index 0b22106e52..d32abae1c9 100644
--- a/tests/Exceptionless.Tests/Exceptionless.Tests.csproj
+++ b/tests/Exceptionless.Tests/Exceptionless.Tests.csproj
@@ -6,7 +6,7 @@
   <ItemGroup>
     <PackageReference Include="Exceptionless.RandomData" Version="1.2.2" />
     <PackageReference Include="Foundatio.Xunit" Version="$(FoundatioVersion)" />
-    <PackageReference Include="Microsoft.AspNetCore.Mvc.Testing" Version="8.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Mvc.Testing" Version="8.0.1" />
 
     <PackageReference Include="FluentRest.NewtonsoftJson" Version="9.8.0" />
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.8.0" />

From 78bff1cfd59c5eb853cc3b87245f2c54a3fd56c2 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sat, 13 Jan 2024 20:47:41 -0600
Subject: [PATCH 25/35] Reworked stack status

---
 .../ClientApp/.vscode/extensions.json         |  3 +-
 .../data-table-column-header.svelte           |  2 +-
 .../data-table-faceted-filter.svelte          |  3 +-
 .../data-table/data-table-page-size.svelte    |  2 +-
 .../data-table/data-table-status-cell.svelte  | 56 -------------------
 .../src/lib/components/data-table/index.ts    |  6 +-
 .../src/lib/components/events/stack.ts        | 41 ++++++++++++++
 .../events/table/EventsDataTable.svelte       | 44 +--------------
 .../events/table/EventsTailLogTable.svelte    |  2 +-
 ...e => EventsUserIdentitySummaryCell.svelte} |  0
 .../events/table/StackStatusCell.svelte       | 16 ++++++
 ...mn.svelte => StackUsersSummaryCell.svelte} |  0
 .../lib/components/events/table/options.ts    | 21 ++++---
 .../ui/command/command-input.svelte           |  6 +-
 .../lib/components/ui/sonner/sonner.svelte    |  4 +-
 15 files changed, 80 insertions(+), 126 deletions(-)
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-status-cell.svelte
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/events/stack.ts
 rename src/Exceptionless.Web/ClientApp/src/lib/components/events/table/{EventsUserIdentitySummaryColumn.svelte => EventsUserIdentitySummaryCell.svelte} (100%)
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/events/table/StackStatusCell.svelte
 rename src/Exceptionless.Web/ClientApp/src/lib/components/events/table/{StackUsersSummaryColumn.svelte => StackUsersSummaryCell.svelte} (100%)

diff --git a/src/Exceptionless.Web/ClientApp/.vscode/extensions.json b/src/Exceptionless.Web/ClientApp/.vscode/extensions.json
index 80f13598a1..1532d97e3b 100644
--- a/src/Exceptionless.Web/ClientApp/.vscode/extensions.json
+++ b/src/Exceptionless.Web/ClientApp/.vscode/extensions.json
@@ -5,6 +5,7 @@
 		"digitalbrainstem.javascript-ejs-support",
 		"dbaeumer.vscode-eslint",
 		"esbenp.prettier-vscode",
-		"selemondev.vscode-shadcn-svelte"
+		"selemondev.vscode-shadcn-svelte",
+		"zixuanchen.vitest-explorer"
 	]
 }
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-column-header.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-column-header.svelte
index eee94c2564..25cc40e5c3 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-column-header.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-column-header.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+	import type { Column } from '@tanstack/svelte-table';
 	import { ArrowDown, ArrowUp, CaretSort } from 'radix-icons-svelte';
 	import { Button } from '$comp/ui/button';
 	import * as DropdownMenu from '$comp/ui/dropdown-menu';
 	import { cn } from '$lib/utils';
-	import type { Column } from '@tanstack/svelte-table';
 
 	type TData = $$Generic;
 	export let column: Column<TData, unknown>;
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte
index 08ff2a4e21..b1804fb76e 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { PlusCircled, Check } from 'radix-icons-svelte';
+	import type { ComponentType } from 'svelte';
 	import * as Command from '$comp/ui/command';
 	import * as Popover from '$comp/ui/popover';
 	import { Button } from '$comp/ui/button';
@@ -10,7 +11,7 @@
 	type Option = {
 		value: string;
 		label: string;
-		icon: unknown; // SvelteComponent
+		icon: ComponentType;
 	};
 
 	export let filterValues: string[] = [];
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-page-size.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-page-size.svelte
index 0b8942921c..c6d4ee3f7b 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-page-size.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-page-size.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Table } from '@tanstack/svelte-table';
 	import type { Selected } from 'bits-ui';
-	import type { Readable, Writable } from 'svelte/store';
+	import type { Readable } from 'svelte/store';
 
 	import * as Select from '$comp/ui/select';
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-status-cell.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-status-cell.svelte
deleted file mode 100644
index f6403a0e74..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-status-cell.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-	import { StackStatus } from '$lib/models/api.generated';
-	import {
-		QuestionMarkCircled,
-		Circle,
-		Stopwatch,
-		CheckCircled,
-		CrossCircled
-	} from 'radix-icons-svelte';
-
-	const statuses = [
-		{
-			value: StackStatus.Open,
-			label: 'Open',
-			icon: QuestionMarkCircled
-		},
-		{
-			value: StackStatus.Fixed,
-			label: 'Fixed',
-			icon: Circle
-		},
-		{
-			value: StackStatus.Regressed,
-			label: 'Regressed',
-			icon: Stopwatch
-		},
-		{
-			value: StackStatus.Snoozed,
-			label: 'Snoozed',
-			icon: CheckCircled
-		},
-		{
-			value: StackStatus.Ignored,
-			label: 'Ignored',
-			icon: CrossCircled
-		},
-		{
-			value: StackStatus.Discarded,
-			label: 'Discarded',
-			icon: CrossCircled
-		}
-	];
-
-	export let value: string;
-	const status = statuses.find((status) => status.value === value);
-	const Icon = status?.icon;
-</script>
-
-{#if status}
-	<div class="flex w-[100px] items-center">
-		{#if Icon}
-			<Icon class="w-4 h-4 mr-2 text-muted-foreground" />
-		{/if}
-		<span>{status.label}</span>
-	</div>
-{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
index d8598fb3a6..88ed877fcf 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
@@ -5,8 +5,6 @@ import FacetedFilter from './data-table-faceted-filter.svelte';
 import PageSize from './data-table-page-size.svelte';
 import Pagination from './data-table-pagination.svelte';
 
-import StatusCell from './data-table-status-cell.svelte';
-
 export {
 	Root,
 	Body,
@@ -14,13 +12,11 @@ export {
 	FacetedFilter,
 	PageSize,
 	Pagination,
-	StatusCell,
 	//
 	Root as DataTable,
 	Body as DataTableBody,
 	Toolbar as DataTableToolbar,
 	FacetedFilter as DataTableFacetedFilter,
 	PageSize as DataTablePageSize,
-	Pagination as DataTablePagination,
-	StatusCell as DataTableStatusCell
+	Pagination as DataTablePagination
 };
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/stack.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/events/stack.ts
new file mode 100644
index 0000000000..07309fe861
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/stack.ts
@@ -0,0 +1,41 @@
+import { StackStatus } from '$lib/models/api.generated';
+import {
+	QuestionMarkCircled,
+	Circle,
+	Stopwatch,
+	CheckCircled,
+	CrossCircled
+} from 'radix-icons-svelte';
+
+export const statuses = [
+	{
+		value: StackStatus.Open,
+		label: 'Open',
+		icon: QuestionMarkCircled
+	},
+	{
+		value: StackStatus.Fixed,
+		label: 'Fixed',
+		icon: Circle
+	},
+	{
+		value: StackStatus.Regressed,
+		label: 'Regressed',
+		icon: Stopwatch
+	},
+	{
+		value: StackStatus.Snoozed,
+		label: 'Snoozed',
+		icon: CheckCircled
+	},
+	{
+		value: StackStatus.Ignored,
+		label: 'Ignored',
+		icon: CrossCircled
+	},
+	{
+		value: StackStatus.Discarded,
+		label: 'Discarded',
+		icon: CrossCircled
+	}
+];
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
index 0bfeecb240..56a067eb4d 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -18,19 +18,12 @@
 
 	import * as DataTable from '$comp/data-table';
 	import { Button } from '$comp/ui/button';
-	import {
-		CheckCircled,
-		Circle,
-		Cross2,
-		CrossCircled,
-		QuestionMarkCircled,
-		Stopwatch
-	} from 'radix-icons-svelte';
 	import { Input } from '$comp/ui/input';
-	import { StackStatus } from '$lib/models/api.generated';
 	import { getOptions } from './options';
 	import { DEFAULT_LIMIT } from '$lib/helpers/api';
 	import { createEventDispatcher } from 'svelte';
+	import { statuses } from '../stack';
+	import { Cross2 } from 'radix-icons-svelte';
 
 	export let mode: GetEventsMode = 'summary';
 	export let filter: Readable<string>;
@@ -74,39 +67,6 @@
 		}
 	}
 
-	const statuses = [
-		{
-			value: StackStatus.Open,
-			label: 'Open',
-			icon: QuestionMarkCircled
-		},
-		{
-			value: StackStatus.Fixed,
-			label: 'Fixed',
-			icon: Circle
-		},
-		{
-			value: StackStatus.Regressed,
-			label: 'Regressed',
-			icon: Stopwatch
-		},
-		{
-			value: StackStatus.Snoozed,
-			label: 'Snoozed',
-			icon: CheckCircled
-		},
-		{
-			value: StackStatus.Ignored,
-			label: 'Ignored',
-			icon: CrossCircled
-		},
-		{
-			value: StackStatus.Discarded,
-			label: 'Discarded',
-			icon: CrossCircled
-		}
-	];
-
 	const filterValue: Writable<string> = writable('');
 	const filterValues: Writable<{
 		status: string[];
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogTable.svelte
index 78912978c1..e1cc4469f7 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogTable.svelte
@@ -27,7 +27,7 @@
 
 	export let filter: Readable<string>;
 
-	const columns = getColumns('summary');
+	const columns = getColumns<EventSummaryModel<SummaryTemplateKeys>>('summary');
 	const columnVisibility = persisted('events-column-visibility', <VisibilityState>{});
 	const setColumnVisibility = (updaterOrValue: Updater<VisibilityState>) => {
 		if (updaterOrValue instanceof Function) {
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsUserIdentitySummaryColumn.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsUserIdentitySummaryCell.svelte
similarity index 100%
rename from src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsUserIdentitySummaryColumn.svelte
rename to src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsUserIdentitySummaryCell.svelte
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/StackStatusCell.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/StackStatusCell.svelte
new file mode 100644
index 0000000000..54587e5c44
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/StackStatusCell.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { statuses } from '../stack';
+
+	export let value: string;
+	const status = statuses.find((status) => status.value === value);
+	const Icon = status?.icon;
+</script>
+
+{#if status}
+	<div class="flex w-[100px] items-center">
+		{#if Icon}
+			<Icon class="w-4 h-4 mr-2 text-muted-foreground" />
+		{/if}
+		<span>{status.label}</span>
+	</div>
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/StackUsersSummaryColumn.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/StackUsersSummaryCell.svelte
similarity index 100%
rename from src/Exceptionless.Web/ClientApp/src/lib/components/events/table/StackUsersSummaryColumn.svelte
rename to src/Exceptionless.Web/ClientApp/src/lib/components/events/table/StackUsersSummaryCell.svelte
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
index 17c598ef4a..2b56202cb9 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
@@ -23,9 +23,9 @@ import type {
 import Summary from '$comp/events/summary/Summary.svelte';
 import { nameof } from '$lib/utils';
 import NumberFormatter from '$comp/formatters/Number.svelte';
-import EventsUserIdentitySummaryColumn from './EventsUserIdentitySummaryColumn.svelte';
+import EventsUserIdentitySummaryCell from './EventsUserIdentitySummaryCell.svelte';
 import TimeAgo from '$comp/formatters/TimeAgo.svelte';
-import StackUsersSummaryColumn from './StackUsersSummaryColumn.svelte';
+import StackUsersSummaryCell from './StackUsersSummaryCell.svelte';
 import { DEFAULT_LIMIT } from '$lib/helpers/api';
 import type { FetchClientResponse } from '$api/FetchClient';
 import { Checkbox } from '$comp/ui/checkbox';
@@ -43,7 +43,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 						: table.getIsSomeRowsSelected()
 							? 'indeterminate'
 							: false,
-					onCheckedChange: (checked: boolean) =>
+					onCheckedChange: (checked: boolean | 'indeterminate') =>
 						table.getToggleAllRowsSelectedHandler()({ target: { checked } })
 				}),
 			cell: (props) =>
@@ -54,7 +54,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 							? 'indeterminate'
 							: false,
 					disabled: !props.row.getCanSelect(),
-					onCheckedChange: (checked: boolean) =>
+					onCheckedChange: (checked: boolean | 'indeterminate') =>
 						props.row.getToggleSelectedHandler()({ target: { checked } }),
 					'aria-label': 'Select row',
 					class: 'translate-y-[2px]'
@@ -80,7 +80,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 					class: 'w-28'
 				},
 				cell: (prop) =>
-					renderComponent(EventsUserIdentitySummaryColumn, { summary: prop.row.original })
+					renderComponent(EventsUserIdentitySummaryCell, { summary: prop.row.original })
 			},
 			{
 				id: 'date',
@@ -89,7 +89,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 				meta: {
 					class: 'w-36'
 				},
-				cell: (prop) => renderComponent(TimeAgo, { value: prop.getValue() })
+				cell: (prop) => renderComponent(TimeAgo, { value: prop.getValue<string>() })
 			}
 		);
 	} else {
@@ -102,7 +102,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 					class: 'w-24'
 				},
 				cell: (prop) =>
-					renderComponent(StackUsersSummaryColumn, { summary: prop.row.original })
+					renderComponent(StackUsersSummaryCell, { summary: prop.row.original })
 			},
 			{
 				id: 'events',
@@ -112,8 +112,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 					class: 'w-24'
 				},
 				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('total'),
-				cell: (prop) =>
-					renderComponent(NumberFormatter, { value: prop.getValue() as number })
+				cell: (prop) => renderComponent(NumberFormatter, { value: prop.getValue<number>() })
 			},
 			{
 				id: 'first',
@@ -123,7 +122,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 					class: 'w-36'
 				},
 				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('first_occurrence'),
-				cell: (prop) => renderComponent(TimeAgo, { value: prop.getValue() })
+				cell: (prop) => renderComponent(TimeAgo, { value: prop.getValue<string>() })
 			},
 			{
 				id: 'last',
@@ -133,7 +132,7 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 					class: 'w-36'
 				},
 				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('last_occurrence'),
-				cell: (prop) => renderComponent(TimeAgo, { value: prop.getValue() })
+				cell: (prop) => renderComponent(TimeAgo, { value: prop.getValue<string>() })
 			}
 		);
 	}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-input.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-input.svelte
index 33807739da..1ae11fa5ce 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-input.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/command/command-input.svelte
@@ -3,15 +3,13 @@
 	import { MagnifyingGlass } from 'radix-icons-svelte';
 	import { cn } from '$lib/utils';
 
-	type $$Props = CommandPrimitive.InputProps;
-
 	let className: string | undefined | null = undefined;
 	export { className as class };
 	export let value: string = '';
 </script>
 
-<div class="flex items-center border-b px-3" data-cmdk-input-wrapper="">
-	<MagnifyingGlass class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+<div class="flex items-center px-3 border-b" data-cmdk-input-wrapper="">
+	<MagnifyingGlass class="w-4 h-4 mr-2 opacity-50 shrink-0" />
 	<CommandPrimitive.Input
 		class={cn(
 			'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',
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/sonner/sonner.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/sonner/sonner.svelte
index 4e63080f8b..1814de1a15 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/ui/sonner/sonner.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/ui/sonner/sonner.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+	import { Toaster as Sonner } from 'svelte-sonner';
 	import { mode } from 'mode-watcher';
-
-	type $$Props = SonnerProps;
 </script>
 
 <Sonner

From 51a3fa69c69d03644ef7cdaad3803f8d95321bec Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sun, 14 Jan 2024 13:06:24 -0600
Subject: [PATCH 26/35] Updated deps

---
 src/Exceptionless.Web/ClientApp/package-lock.json | 8 ++++----
 src/Exceptionless.Web/ClientApp/package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
index 701f68a3f1..3819bf7e6a 100644
--- a/src/Exceptionless.Web/ClientApp/package-lock.json
+++ b/src/Exceptionless.Web/ClientApp/package-lock.json
@@ -45,7 +45,7 @@
 				"eslint-plugin-svelte": "^2.35.1",
 				"npm-run-all": "^4.1.5",
 				"postcss": "^8.4.33",
-				"prettier": "^3.2.1",
+				"prettier": "^3.2.2",
 				"prettier-plugin-svelte": "^3.1.2",
 				"prettier-plugin-tailwindcss": "^0.5.11",
 				"svelte": "^4.2.8",
@@ -5342,9 +5342,9 @@
 			}
 		},
 		"node_modules/prettier": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.1.tgz",
-			"integrity": "sha512-qSUWshj1IobVbKc226Gw2pync27t0Kf0EdufZa9j7uBSJay1CC+B3K5lAAZoqgX3ASiKuWsk6OmzKRetXNObWg==",
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.2.tgz",
+			"integrity": "sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A==",
 			"dev": true,
 			"bin": {
 				"prettier": "bin/prettier.cjs"
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index 42e98547a2..2959ebfa55 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -35,7 +35,7 @@
 		"eslint-plugin-svelte": "^2.35.1",
 		"npm-run-all": "^4.1.5",
 		"postcss": "^8.4.33",
-		"prettier": "^3.2.1",
+		"prettier": "^3.2.2",
 		"prettier-plugin-svelte": "^3.1.2",
 		"prettier-plugin-tailwindcss": "^0.5.11",
 		"svelte": "^4.2.8",

From 7832de5a2df6c165fab4defc6bd9c170f118e2a7 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Sun, 14 Jan 2024 13:06:59 -0600
Subject: [PATCH 27/35] Added new filter container component to handle
 resetting all faceted filters

---
 ...data-table-faceted-filter-container.svelte | 31 ++++++++++++++
 .../src/lib/components/data-table/index.ts    |  3 ++
 .../events/table/EventsDataTable.svelte       | 42 +++++++------------
 3 files changed, 49 insertions(+), 27 deletions(-)
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter-container.svelte

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter-container.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter-container.svelte
new file mode 100644
index 0000000000..27934776cf
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter-container.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { type Writable, derived } from 'svelte/store';
+
+	import { Button } from '$comp/ui/button';
+	import { Cross2 } from 'radix-icons-svelte';
+
+	export let filterValues: Writable<Record<string, string[]>>;
+
+	const showReset = derived(filterValues, ($filterValues) => {
+		return Object.values($filterValues).some((v) => v.length > 0);
+	});
+
+	function resetFilterValues() {
+		filterValues.update((values) => {
+			Object.keys(values).forEach((key) => {
+				values[key] = [];
+			});
+
+			return values;
+		});
+	}
+</script>
+
+<slot />
+
+{#if $showReset}
+	<Button on:click={() => resetFilterValues()} variant="ghost" class="h-8 px-2 lg:px-3">
+		Reset
+		<Cross2 class="w-4 h-4 ml-2" />
+	</Button>
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
index 88ed877fcf..fa6cfd8960 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/index.ts
@@ -1,6 +1,7 @@
 import Root from './data-table.svelte';
 import Body from './data-table-body.svelte';
 import Toolbar from './data-table-toolbar.svelte';
+import FacetedFilterContainer from './data-table-faceted-filter-container.svelte';
 import FacetedFilter from './data-table-faceted-filter.svelte';
 import PageSize from './data-table-page-size.svelte';
 import Pagination from './data-table-pagination.svelte';
@@ -9,6 +10,7 @@ export {
 	Root,
 	Body,
 	Toolbar,
+	FacetedFilterContainer,
 	FacetedFilter,
 	PageSize,
 	Pagination,
@@ -16,6 +18,7 @@ export {
 	Root as DataTable,
 	Body as DataTableBody,
 	Toolbar as DataTableToolbar,
+	FacetedFilterContainer as DataTableFacetedFilterContainer,
 	FacetedFilter as DataTableFacetedFilter,
 	PageSize as DataTablePageSize,
 	Pagination as DataTablePagination
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
index 56a067eb4d..192a6c6954 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -17,13 +17,11 @@
 	import CustomEventMessage from '$comp/messaging/CustomEventMessage.svelte';
 
 	import * as DataTable from '$comp/data-table';
-	import { Button } from '$comp/ui/button';
 	import { Input } from '$comp/ui/input';
 	import { getOptions } from './options';
 	import { DEFAULT_LIMIT } from '$lib/helpers/api';
 	import { createEventDispatcher } from 'svelte';
 	import { statuses } from '../stack';
-	import { Cross2 } from 'radix-icons-svelte';
 
 	export let mode: GetEventsMode = 'summary';
 	export let filter: Readable<string>;
@@ -74,7 +72,6 @@
 		status: []
 	});
 
-	$: showReset = Object.values($filterValues).some((v) => v.length > 0);
 	const dispatch = createEventDispatcher();
 </script>
 
@@ -82,31 +79,22 @@
 
 <DataTable.Root>
 	<DataTable.Toolbar {table}>
-		<Input
-			placeholder="Filter tasks..."
-			class="h-8 w-[150px] lg:w-[250px]"
-			type="text"
-			bind:value={$filterValue}
-		/>
+		<slot>
+			<Input
+				placeholder="Filter tasks..."
+				class="h-8 w-[150px] lg:w-[250px]"
+				type="text"
+				bind:value={$filterValue}
+			/>
 
-		<DataTable.FacetedFilter
-			bind:filterValues={$filterValues.status}
-			title="Status"
-			options={statuses}
-		/>
-
-		{#if showReset}
-			<Button
-				on:click={() => {
-					$filterValues.status = [];
-				}}
-				variant="ghost"
-				class="h-8 px-2 lg:px-3"
-			>
-				Reset
-				<Cross2 class="w-4 h-4 ml-2" />
-			</Button>
-		{/if}
+			<DataTable.FacetedFilterContainer {filterValues}>
+				<DataTable.FacetedFilter
+					bind:filterValues={$filterValues.status}
+					title="Status"
+					options={statuses}
+				></DataTable.FacetedFilter>
+			</DataTable.FacetedFilterContainer>
+		</slot>
 	</DataTable.Toolbar>
 	<DataTable.Body {table} on:rowclick={(event) => dispatch('rowclick', event.detail)}
 	></DataTable.Body>

From 0d43ef8c2885eabbcda9f2bc9768c6f8d5bc5386 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Mon, 15 Jan 2024 12:55:05 -0600
Subject: [PATCH 28/35] Updates to table formatting

---
 .../src/lib/components/SearchInput.svelte     |  34 +++-
 ...data-table-faceted-filter-container.svelte |  15 +-
 .../data-table-faceted-filter.svelte          |  48 +++---
 .../events/table/EventsDataTable.svelte       |  34 +---
 .../src/lib/components/filters/filters.ts     | 162 ++++++++++++++----
 .../ClientApp/src/lib/stores/events.ts        |  54 ++++++
 .../ClientApp/src/routes/(app)/+page.svelte   |  48 +++++-
 .../src/routes/(app)/stream/+page.svelte      |  73 ++------
 8 files changed, 301 insertions(+), 167 deletions(-)
 create mode 100644 src/Exceptionless.Web/ClientApp/src/lib/stores/events.ts

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/SearchInput.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/SearchInput.svelte
index 4d062fe57b..7edcb9e753 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/SearchInput.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/SearchInput.svelte
@@ -1,16 +1,22 @@
 <script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
 	import IconSearch from '~icons/mdi/search';
+
 	import { Input } from '$comp/ui/input';
+	import { cn } from '$lib/utils';
+
+	type $$Props = HTMLInputAttributes;
 
-	export let id: string = 'search';
-	export let placeholder: string = 'Search...';
-	export let value: string;
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+	export let value: $$Props['value'] = undefined;
 
-	export let onChanged: (event: Event) => void = () => {};
+	export let id: string | null | undefined = 'search';
+	export let placeholder: string | null | undefined = 'Search...';
 </script>
 
-<label for={id} class="sr-only">Search</label>
 <div class="relative">
+	<label for={id} class="sr-only">Search</label>
 	<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
 		<IconSearch class="w-5 h-5" />
 	</div>
@@ -18,9 +24,23 @@
 		type="text"
 		name="search"
 		{id}
+		class={cn('pl-10', className)}
 		bind:value
-		on:change={onChanged}
-		class="pl-10"
+		on:blur
+		on:change
+		on:click
+		on:focus
+		on:focusin
+		on:focusout
+		on:keydown
+		on:keypress
+		on:keyup
+		on:mouseover
+		on:mouseenter
+		on:mouseleave
+		on:paste
+		on:input
 		{placeholder}
+		{...$$restProps}
 	/>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter-container.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter-container.svelte
index 27934776cf..30a94c8177 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter-container.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter-container.svelte
@@ -1,24 +1,15 @@
 <script lang="ts">
-	import { type Writable, derived } from 'svelte/store';
+	import { derived, type Readable } from 'svelte/store';
 
 	import { Button } from '$comp/ui/button';
 	import { Cross2 } from 'radix-icons-svelte';
 
-	export let filterValues: Writable<Record<string, string[]>>;
+	export let filterValues: Readable<Record<string, unknown[]>>;
+	export let resetFilterValues: () => void;
 
 	const showReset = derived(filterValues, ($filterValues) => {
 		return Object.values($filterValues).some((v) => v.length > 0);
 	});
-
-	function resetFilterValues() {
-		filterValues.update((values) => {
-			Object.keys(values).forEach((key) => {
-				values[key] = [];
-			});
-
-			return values;
-		});
-	}
 </script>
 
 <slot />
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte
index b1804fb76e..0d990e1e40 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/data-table/data-table-faceted-filter.svelte
@@ -9,24 +9,31 @@
 	import Badge from '$comp/ui/badge/badge.svelte';
 
 	type Option = {
-		value: string;
+		value: unknown;
 		label: string;
 		icon: ComponentType;
 	};
 
-	export let filterValues: string[] = [];
 	export let title: string;
+	export let key: string;
+	export let values: unknown[] = [];
 	export let options: Option[] = [];
+	export let onValueChange: (facetKey: string, updatedValues: unknown[]) => void;
 
 	let open = false;
 
-	const handleSelect = (currentValue: string) => {
-		if (Array.isArray(filterValues) && filterValues.includes(currentValue)) {
-			filterValues = filterValues.filter((v) => v !== currentValue);
-		} else {
-			filterValues = [...(Array.isArray(filterValues) ? filterValues : []), currentValue];
-		}
-	};
+	export function onValueSelected(currentValue: unknown) {
+		const updatedValues =
+			Array.isArray(values) && values.includes(currentValue)
+				? values.filter((v) => v !== currentValue)
+				: [...(Array.isArray(values) ? values : []), currentValue];
+
+		onValueChange(key, updatedValues);
+	}
+
+	export function onClearFilters() {
+		onValueChange(key, []);
+	}
 </script>
 
 <Popover.Root bind:open>
@@ -35,18 +42,18 @@
 			<PlusCircled class="w-4 h-4 mr-2" />
 			{title}
 
-			{#if filterValues.length > 0}
+			{#if values.length > 0}
 				<Separator orientation="vertical" class="h-4 mx-2" />
 				<Badge variant="secondary" class="px-1 font-normal rounded-sm lg:hidden">
-					{filterValues.length}
+					{values.length}
 				</Badge>
 				<div class="hidden space-x-1 lg:flex">
-					{#if filterValues.length > 2}
+					{#if values.length > 2}
 						<Badge variant="secondary" class="px-1 font-normal rounded-sm">
-							{filterValues.length} Selected
+							{values.length} Selected
 						</Badge>
 					{:else}
-						{#each filterValues as option}
+						{#each values as option}
 							<Badge variant="secondary" class="px-1 font-normal rounded-sm">
 								{option}
 							</Badge>
@@ -63,11 +70,11 @@
 				<Command.Empty>No results found.</Command.Empty>
 				<Command.Group>
 					{#each options as option}
-						<Command.Item value={option.value} onSelect={handleSelect}>
+						<Command.Item value={option.value} onSelect={onValueSelected}>
 							<div
 								class={cn(
 									'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
-									filterValues.includes(option.value)
+									values.includes(option.value)
 										? 'bg-primary text-primary-foreground'
 										: 'opacity-50 [&_svg]:invisible'
 								)}
@@ -80,14 +87,9 @@
 						</Command.Item>
 					{/each}
 				</Command.Group>
-				{#if filterValues.length > 0}
+				{#if values.length > 0}
 					<Command.Separator />
-					<Command.Item
-						class="justify-center text-center"
-						onSelect={() => {
-							filterValues = [];
-						}}
-					>
+					<Command.Item class="justify-center text-center" onSelect={onClearFilters}>
 						Clear filters
 					</Command.Item>
 				{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
index 192a6c6954..f85ced53c7 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
-	import { writable, type Readable, type Writable } from 'svelte/store';
 	import { createSvelteTable } from '@tanstack/svelte-table';
+	import { createEventDispatcher } from 'svelte';
+	import { writable, type Readable } from 'svelte/store';
+	import { persisted } from 'svelte-local-storage-store';
+
 	import type {
 		EventSummaryModel,
 		GetEventsMode,
@@ -13,15 +16,12 @@
 		globalFetchClient as api,
 		globalLoading as loading
 	} from '$api/FetchClient';
-	import { persisted } from 'svelte-local-storage-store';
 	import CustomEventMessage from '$comp/messaging/CustomEventMessage.svelte';
 
 	import * as DataTable from '$comp/data-table';
-	import { Input } from '$comp/ui/input';
 	import { getOptions } from './options';
 	import { DEFAULT_LIMIT } from '$lib/helpers/api';
-	import { createEventDispatcher } from 'svelte';
-	import { statuses } from '../stack';
+	import SearchInput from '$comp/SearchInput.svelte';
 
 	export let mode: GetEventsMode = 'summary';
 	export let filter: Readable<string>;
@@ -65,13 +65,6 @@
 		}
 	}
 
-	const filterValue: Writable<string> = writable('');
-	const filterValues: Writable<{
-		status: string[];
-	}> = writable({
-		status: []
-	});
-
 	const dispatch = createEventDispatcher();
 </script>
 
@@ -79,21 +72,8 @@
 
 <DataTable.Root>
 	<DataTable.Toolbar {table}>
-		<slot>
-			<Input
-				placeholder="Filter tasks..."
-				class="h-8 w-[150px] lg:w-[250px]"
-				type="text"
-				bind:value={$filterValue}
-			/>
-
-			<DataTable.FacetedFilterContainer {filterValues}>
-				<DataTable.FacetedFilter
-					bind:filterValues={$filterValues.status}
-					title="Status"
-					options={statuses}
-				></DataTable.FacetedFilter>
-			</DataTable.FacetedFilterContainer>
+		<slot name="toolbar">
+			<SearchInput class="h-8 w-[150px] lg:w-[250px]" bind:value={$filter} />
 		</slot>
 	</DataTable.Toolbar>
 	<DataTable.Body {table} on:rowclick={(event) => dispatch('rowclick', event.detail)}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/filters/filters.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/filters/filters.ts
index 4d4a62a62a..44298fb55f 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/filters/filters.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/filters/filters.ts
@@ -1,3 +1,4 @@
+import type { StackStatus } from '$lib/models/api.generated';
 import type { Serializer } from 'svelte-local-storage-store';
 
 export interface IFilter {
@@ -5,6 +6,12 @@ export interface IFilter {
 	toFilter(): string;
 }
 
+export interface IFacetedFilter extends IFilter {
+	term: string;
+	values: unknown[];
+	faceted: boolean;
+}
+
 export class BooleanFilter implements IFilter {
 	constructor(
 		public term: string,
@@ -88,6 +95,26 @@ export class SessionFilter implements IFilter {
 	}
 }
 
+export class StatusFilter implements IFacetedFilter {
+	constructor(public values: StackStatus[]) {}
+
+	public term: string = 'status';
+	public type: string = 'status';
+	public faceted: boolean = true;
+
+	public toFilter(): string {
+		if (this.values.length == 0) {
+			return '';
+		}
+
+		if (this.values.length == 1) {
+			return `status:${this.values[0]}`;
+		}
+
+		return `(${this.values.map((val) => `status:${val}`).join(' OR ')})`;
+	}
+}
+
 export class StringFilter implements IFilter {
 	constructor(
 		public term: string,
@@ -140,8 +167,9 @@ export function quote(value?: string | null): string | undefined {
 	return value ? `"${value}"` : undefined;
 }
 
-export function toFilter(filters: IFilter[]): string {
+export function toFilter(filters: IFilter[], includeFaceted: boolean = false): string {
 	return filters
+		.filter((f) => includeFaceted || !isFaceted(f))
 		.map((f) => f.toFilter())
 		.join(' ')
 		.trim();
@@ -153,9 +181,14 @@ export function toFilter(filters: IFilter[]): string {
  * @param filter The filter to add or remove
  * @returns The updated filters
  */
-export function updateFilters(filters: IFilter[], filter: IFilter): IFilter[] {
-	const index = filters.findIndex((f) => f.toFilter() === filter.toFilter());
-	if (index !== -1) {
+export function toggleFilter(filters: IFilter[], filter: IFilter): IFilter[] {
+	const index = filters.findIndex(
+		(f) =>
+			(f.type === filter.type && isFaceted(f) && isFaceted(filter)) ||
+			f.toFilter() === filter.toFilter()
+	);
+
+	if (index >= 0) {
 		filters.splice(index, 1);
 	} else {
 		filters.push(filter);
@@ -164,6 +197,38 @@ export function updateFilters(filters: IFilter[], filter: IFilter): IFilter[] {
 	return filters;
 }
 
+/**
+ *  Adds or updates a given faceted filter if it has values, otherwise it will be removed
+ * @param filters The filters
+ * @param filter The filter to add, update or remove.
+ * @returns true if filters has been modified
+ */
+export function upsertOrRemoveFacetFilter(filters: IFilter[], filter: IFacetedFilter): boolean {
+	const index = filters.findIndex((f) => f.type === filter.type && isFaceted(f));
+
+	// If the filter has no values, remove it.
+	if (!filter.values || filter.values.length == 0) {
+		if (index >= 0) {
+			filters.splice(index, 1);
+			return true;
+		}
+
+		return false;
+	}
+
+	if (index >= 0) {
+		if (filter.toFilter() === filters[index].toFilter()) {
+			return false;
+		}
+
+		filters[index] = filter;
+	} else {
+		filters.push(filter);
+	}
+
+	return true;
+}
+
 /**
  * Given the existing filters try and parse out any existing filters while adding new user filters as a keyword filter.
  * @param filters The current filters
@@ -175,9 +240,14 @@ export function parseFilter(filters: IFilter[], input: string): IFilter[] {
 
 	const keywordFilterParts = [];
 	for (const filter of filters) {
+		if (isFaceted(filter)) {
+			resolvedFilters.push(filter);
+			continue;
+		}
+
 		input = input?.trim();
 		if (!input) {
-			break;
+			continue;
 		}
 
 		// NOTE: This is a super naive implementation...
@@ -204,40 +274,68 @@ export function parseFilter(filters: IFilter[], input: string): IFilter[] {
 	return resolvedFilters;
 }
 
+export function getFilter(filter: Record<string, unknown>): IFilter | undefined {
+	switch (filter.type) {
+		case 'boolean':
+			return new BooleanFilter(filter.term as string, filter.value as boolean);
+		case 'date':
+			return new DateFilter(filter.term as string, filter.value as Date);
+		case 'keyword':
+			return new KeywordFilter(filter.keyword as string);
+		case 'number':
+			return new NumberFilter(filter.term as string, filter.value as number);
+		case 'reference':
+			return new ReferenceFilter(filter.referenceId as string);
+		case 'session':
+			return new SessionFilter(filter.sessionId as string);
+		case 'status':
+			return new StatusFilter(filter.values as StackStatus[]);
+		case 'string':
+			return new StringFilter(filter.term as string, filter.value as string);
+		case 'version':
+			return new VersionFilter(filter.term as string, filter.value as string);
+	}
+}
+
+function isFaceted(filter: IFilter): filter is IFacetedFilter {
+	return 'faceted' in filter;
+}
+
+const FACETED_FILTER_TYPES = ['status'];
+export function toFacetedValues(filters: IFilter[]): Record<string, unknown[]> {
+	const values: Record<string, unknown[]> = {};
+	for (const filterType of FACETED_FILTER_TYPES) {
+		const filter = filters.find((f) => f.type === filterType && isFaceted(f)) as
+			| IFacetedFilter
+			| undefined;
+		values[filterType] = filter?.values ?? [];
+	}
+
+	return values;
+}
+
+export function resetFacetedValues(filters: IFilter[]): IFilter[] {
+	for (const filter of filters) {
+		if (isFaceted(filter)) {
+			upsertOrRemoveFacetFilter(filters, { ...filter, values: [] });
+		}
+	}
+
+	return filters;
+}
+
 export class FilterSerializer implements Serializer<IFilter[]> {
 	public parse(text: string): IFilter[] {
 		if (!text) {
 			return [];
 		}
 
-		const data = JSON.parse(text);
+		const data: unknown[] = JSON.parse(text);
 		const filters: IFilter[] = [];
-		for (const filter of data) {
-			switch (filter.type) {
-				case 'boolean':
-					filters.push(new BooleanFilter(filter.term, filter.value));
-					break;
-				case 'date':
-					filters.push(new DateFilter(filter.term, filter.value));
-					break;
-				case 'keyword':
-					filters.push(new KeywordFilter(filter.keyword));
-					break;
-				case 'number':
-					filters.push(new NumberFilter(filter.term, filter.value));
-					break;
-				case 'reference':
-					filters.push(new ReferenceFilter(filter.referenceId));
-					break;
-				case 'session':
-					filters.push(new SessionFilter(filter.sessionId));
-					break;
-				case 'string':
-					filters.push(new StringFilter(filter.term, filter.value));
-					break;
-				case 'version':
-					filters.push(new VersionFilter(filter.term, filter.value));
-					break;
+		for (const filterData of data) {
+			const filter = getFilter(filterData as Record<string, unknown>);
+			if (filter) {
+				filters.push(filter);
 			}
 		}
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/stores/events.ts b/src/Exceptionless.Web/ClientApp/src/lib/stores/events.ts
new file mode 100644
index 0000000000..48d60a7045
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/stores/events.ts
@@ -0,0 +1,54 @@
+import {
+	FilterSerializer,
+	toFacetedValues,
+	toFilter,
+	upsertOrRemoveFacetFilter,
+	type IFilter,
+	getFilter,
+	type IFacetedFilter,
+	toggleFilter,
+	parseFilter,
+	resetFacetedValues
+} from '$comp/filters/filters';
+import { persisted } from 'svelte-local-storage-store';
+import { derived, get } from 'svelte/store';
+
+export const time = persisted<string>('filter.time', '');
+const filters = persisted<IFilter[]>('filters', [], { serializer: new FilterSerializer() });
+
+export const filter = derived(filters, ($filters) => toFilter($filters));
+export const filterWithFaceted = derived(filters, ($filters) => toFilter($filters, true));
+export const filterValues = derived(filters, ($filters) => toFacetedValues($filters));
+
+export function updateFilter(filter: IFilter) {
+	filters.set(toggleFilter(get(filters), filter));
+}
+
+export function updateFilterValues(key: string, values: unknown[]) {
+	const filter = getFilter({ type: key, values }) as IFacetedFilter;
+	const currentFilters = get(filters);
+	if (filter && upsertOrRemoveFacetFilter(currentFilters, filter)) {
+		filters.set(currentFilters);
+	}
+}
+
+export function resetFilterValues() {
+	filters.set(resetFacetedValues(get(filters)));
+}
+
+export function onFilterChanged({ detail }: CustomEvent<IFilter>): void {
+	updateFilter(detail);
+}
+
+let parseFiltersDebounceTimer: ReturnType<typeof setTimeout>;
+export function onFilterInputChanged(event: Event) {
+	clearTimeout(parseFiltersDebounceTimer);
+	parseFiltersDebounceTimer = setTimeout(() => {
+		const { value } = event.target as HTMLInputElement;
+		filters.set(parseFilter(get(filters), value));
+	}, 250);
+}
+
+export function onFacetValuesChanged(facetKey: string, updatedValues: unknown[]) {
+	updateFilterValues(facetKey, updatedValues);
+}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
index d6f5edf3b2..21dc176348 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
@@ -1,15 +1,25 @@
 <script lang="ts">
-	import { persisted } from 'svelte-local-storage-store';
-	import { writable } from 'svelte/store';
-
 	import * as Card from '$comp/ui/card';
+	import * as DataTable from '$comp/data-table';
 	import * as Sheet from '$comp/ui/sheet';
+	import SearchInput from '$comp/SearchInput.svelte';
+
 	import EventsDataTable from '$comp/events/table/EventsDataTable.svelte';
 	import EventsDrawer from '$comp/events/EventsDrawer.svelte';
 	import type { SummaryModel, SummaryTemplateKeys } from '$lib/models/api';
-
-	let filter = writable('');
-	let time = persisted<string>('filter.time', '');
+	import { statuses } from '$comp/events/stack';
+	import CustomEventMessage from '$comp/messaging/CustomEventMessage.svelte';
+	import {
+		filter,
+		filterValues,
+		filterWithFaceted,
+		onFacetValuesChanged,
+		onFilterChanged,
+		onFilterInputChanged,
+		resetFilterValues,
+		time
+	} from '$lib/stores/events';
+	import DateRangeDropdown from '$comp/DateRangeDropdown.svelte';
 
 	let selectedEventId: string | null = null;
 	function onRowClick({ detail }: CustomEvent<SummaryModel<SummaryTemplateKeys>>) {
@@ -21,10 +31,32 @@
 	<title>Exceptionless</title>
 </svelte:head>
 
+<CustomEventMessage type="filter" on:message={onFilterChanged}></CustomEventMessage>
+
 <Card.Root>
-	<Card.Title class="p-6 pb-4 text-xl font-bold">Tasks</Card.Title>
+	<Card.Title class="p-6 pb-4 text-xl font-bold">Events</Card.Title>
 	<Card.Content>
-		<EventsDataTable {filter} {time} on:rowclick={onRowClick}></EventsDataTable>
+		<EventsDataTable filter={filterWithFaceted} {time} on:rowclick={onRowClick}>
+			<svelte:fragment slot="toolbar">
+				<SearchInput
+					class="h-8 w-[150px] lg:w-[250px]"
+					value={$filter}
+					on:input={onFilterInputChanged}
+				/>
+
+				<DataTable.FacetedFilterContainer {filterValues} {resetFilterValues}>
+					<DataTable.FacetedFilter
+						title="Status"
+						key="status"
+						values={$filterValues.status}
+						options={statuses}
+						onValueChange={onFacetValuesChanged}
+					></DataTable.FacetedFilter>
+				</DataTable.FacetedFilterContainer>
+
+				<DateRangeDropdown bind:value={$time}></DateRangeDropdown>
+			</svelte:fragment>
+		</EventsDataTable>
 	</Card.Content>
 </Card.Root>
 
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
index 3b625ddde0..a0bd325c7d 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
@@ -1,49 +1,24 @@
 <script lang="ts">
 	import * as Card from '$comp/ui/card';
 	import * as Sheet from '$comp/ui/sheet';
-	import EventsTable from '$comp/events/table/EventsTable.svelte';
 	import EventsTailLogTable from '$comp/events/table/EventsTailLogTable.svelte';
 	import TableColumnPicker from '$comp/table/TableColumnPicker.svelte';
 	import type { SummaryModel, SummaryTemplateKeys } from '$lib/models/api';
-	import { persisted } from 'svelte-local-storage-store';
 	import CustomEventMessage from '$comp/messaging/CustomEventMessage.svelte';
 	import {
-		type IFilter,
-		updateFilters,
-		parseFilter,
-		FilterSerializer,
-		toFilter
-	} from '$comp/filters/filters';
-	import { derived } from 'svelte/store';
+		filter,
+		filterWithFaceted,
+		onFilterChanged,
+		onFilterInputChanged
+	} from '$lib/stores/events';
 
 	import SearchInput from '$comp/SearchInput.svelte';
-	import DateRangeDropdown from '$comp/DateRangeDropdown.svelte';
 	import EventsDrawer from '$comp/events/EventsDrawer.svelte';
-	import Switch from '$comp/primitives/Switch.svelte';
-
-	let liveMode = persisted<boolean>('live', true);
 
 	let selectedEventId: string | null = null;
 	function onRowClick({ detail }: CustomEvent<SummaryModel<SummaryTemplateKeys>>) {
 		selectedEventId = detail.id;
 	}
-
-	let time = persisted<string>('filter.time', '');
-
-	const filters = persisted<IFilter[]>('filters', [], { serializer: new FilterSerializer() });
-	let filter = derived(filters, ($filters) => toFilter($filters));
-	function onFilterChanged({ detail }: CustomEvent<IFilter>): void {
-		filters.set(updateFilters($filters, detail));
-	}
-
-	let parseFiltersDebounceTimer: ReturnType<typeof setTimeout>;
-	function onFilterInputChanged(event: Event) {
-		clearTimeout(parseFiltersDebounceTimer);
-		parseFiltersDebounceTimer = setTimeout(() => {
-			const { value } = event.target as HTMLInputElement;
-			filters.set(parseFilter($filters, value));
-		}, 500);
-	}
 </script>
 
 <svelte:head>
@@ -53,38 +28,20 @@
 <CustomEventMessage type="filter" on:message={onFilterChanged}></CustomEventMessage>
 
 <Card.Root>
-	<Card.Title class="p-6 pb-4 text-xl font-bold">Events</Card.Title>
+	<Card.Title class="p-6 pb-4 text-xl font-bold">Event Stream</Card.Title>
 	<Card.Content>
-		{#if $liveMode}
-			<EventsTailLogTable on:rowclick={onRowClick} {filter}>
-				<div slot="header" let:table>
-					<div class="flex items-center justify-between p-2 pb-4">
-						<div class="w-2/4">
-							<SearchInput value={$filter} onChanged={onFilterInputChanged} />
-						</div>
-						<div class="flex items-center space-x-2">
-							<Switch id="live-mode" bind:checked={$liveMode}>Live</Switch>
-							<TableColumnPicker {table}></TableColumnPicker>
-						</div>
+		<EventsTailLogTable on:rowclick={onRowClick} filter={filterWithFaceted}>
+			<div slot="header" let:table>
+				<div class="flex items-center justify-between p-2 pb-4">
+					<div class="w-2/4">
+						<SearchInput value={$filter} on:input={onFilterInputChanged} />
 					</div>
-				</div>
-			</EventsTailLogTable>
-		{:else}
-			<EventsTable on:rowclick={onRowClick} {filter} {time}>
-				<div slot="header" let:table>
-					<div class="flex items-center justify-between p-2 pb-4">
-						<div class="w-2/4">
-							<SearchInput value={$filter} onChanged={onFilterInputChanged} />
-						</div>
-						<DateRangeDropdown bind:value={$time}></DateRangeDropdown>
-						<div class="flex items-center space-x-2">
-							<Switch id="live-mode" bind:checked={$liveMode}>Live</Switch>
-							<TableColumnPicker {table}></TableColumnPicker>
-						</div>
+					<div class="flex items-center space-x-2">
+						<TableColumnPicker {table}></TableColumnPicker>
 					</div>
 				</div>
-			</EventsTable>
-		{/if}
+			</div>
+		</EventsTailLogTable>
 	</Card.Content></Card.Root
 >
 

From f8d178a40070a333aeac44e6716092a610b17a17 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Mon, 15 Jan 2024 12:55:20 -0600
Subject: [PATCH 29/35] Updated Accent Styles

---
 src/Exceptionless.Web/ClientApp/src/app.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/app.css b/src/Exceptionless.Web/ClientApp/src/app.css
index 85cf4eea66..4c5b9afbd6 100644
--- a/src/Exceptionless.Web/ClientApp/src/app.css
+++ b/src/Exceptionless.Web/ClientApp/src/app.css
@@ -25,8 +25,8 @@
 		--secondary: 210 20% 98%;
 		--secondary-foreground: 240 5.9% 10%;
 
-		--accent: 210 20% 98%;
-		--accent-foreground: 240 5.9% 10%;
+		--accent: 220 14.29% 95.88%;
+		--accent-foreground: 216.92 19.12% 26.67%;
 
 		--destructive: 0 72.2% 50.6%;
 		--destructive-foreground: 0 0% 100%;

From 9dca6c624f46879cb53de85a8bce2216ff9483ae Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Mon, 15 Jan 2024 14:05:43 -0600
Subject: [PATCH 30/35] Use new data table control

---
 .../events/table/EventsDataTable.svelte       |  29 +--
 .../events/table/EventsTable.svelte           | 205 ------------------
 ...e.svelte => EventsTailLogDataTable.svelte} |  98 ++++-----
 .../lib/components/events/table/options.ts    |  55 +++--
 .../src/lib/components/table/Pager.svelte     |  38 ----
 .../lib/components/table/PagerSummary.svelte  |  28 ---
 .../src/lib/components/table/Table.svelte     | 118 ----------
 .../components/table/TableColumnPicker.svelte |  51 -----
 .../components/table/TableWithPaging.svelte   |  57 -----
 .../table/TableWithPagingFooter.svelte        |  50 -----
 .../ClientApp/src/lib/stores/events.ts        |   1 +
 .../src/routes/(app)/stream/+page.svelte      |  24 +-
 12 files changed, 87 insertions(+), 667 deletions(-)
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTable.svelte
 rename src/Exceptionless.Web/ClientApp/src/lib/components/events/table/{EventsTailLogTable.svelte => EventsTailLogDataTable.svelte} (61%)
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/table/Pager.svelte
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/table/PagerSummary.svelte
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/table/Table.svelte
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/table/TableColumnPicker.svelte
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/table/TableWithPaging.svelte
 delete mode 100644 src/Exceptionless.Web/ClientApp/src/lib/components/table/TableWithPagingFooter.svelte

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
index f85ced53c7..3a3ebac6be 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsDataTable.svelte
@@ -2,15 +2,8 @@
 	import { createSvelteTable } from '@tanstack/svelte-table';
 	import { createEventDispatcher } from 'svelte';
 	import { writable, type Readable } from 'svelte/store';
-	import { persisted } from 'svelte-local-storage-store';
 
-	import type {
-		EventSummaryModel,
-		GetEventsMode,
-		IGetEventsParams,
-		SummaryModel,
-		SummaryTemplateKeys
-	} from '$lib/models/api';
+	import type { EventSummaryModel, IGetEventsParams, SummaryTemplateKeys } from '$lib/models/api';
 	import {
 		type FetchClientResponse,
 		globalFetchClient as api,
@@ -22,15 +15,14 @@
 	import { getOptions } from './options';
 	import { DEFAULT_LIMIT } from '$lib/helpers/api';
 	import SearchInput from '$comp/SearchInput.svelte';
+	import { limit, onFilterInputChanged } from '$lib/stores/events';
 
-	export let mode: GetEventsMode = 'summary';
 	export let filter: Readable<string>;
 	export let time: Readable<string>;
 
-	let limit = persisted<number>('events.limit', 10);
-	const parameters = writable<IGetEventsParams>({ mode, limit: $limit });
-	const options = getOptions(parameters);
-	const table = createSvelteTable<SummaryModel<SummaryTemplateKeys>>(options);
+	const parameters = writable<IGetEventsParams>({ mode: 'summary', limit: $limit });
+	const options = getOptions<EventSummaryModel<SummaryTemplateKeys>>(parameters);
+	const table = createSvelteTable(options);
 
 	let response: FetchClientResponse<EventSummaryModel<SummaryTemplateKeys>[]>;
 	parameters.subscribe(async () => await loadData());
@@ -44,10 +36,9 @@
 
 		response = await api.getJSON<EventSummaryModel<SummaryTemplateKeys>[]>('events', {
 			params: {
-				mode: 'summary',
+				...$parameters,
 				filter: $filter,
-				time: $time,
-				...$parameters
+				time: $time
 			}
 		});
 
@@ -73,7 +64,11 @@
 <DataTable.Root>
 	<DataTable.Toolbar {table}>
 		<slot name="toolbar">
-			<SearchInput class="h-8 w-[150px] lg:w-[250px]" bind:value={$filter} />
+			<SearchInput
+				class="h-8 w-[150px] lg:w-[250px]"
+				value={$filter}
+				on:input={onFilterInputChanged}
+			/>
 		</slot>
 	</DataTable.Toolbar>
 	<DataTable.Body {table} on:rowclick={(event) => dispatch('rowclick', event.detail)}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTable.svelte
deleted file mode 100644
index baac541d7e..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTable.svelte
+++ /dev/null
@@ -1,205 +0,0 @@
-<script lang="ts">
-	import { writable, type Readable } from 'svelte/store';
-	import {
-		createSvelteTable,
-		getCoreRowModel,
-		type TableOptions,
-		type Updater,
-		type VisibilityState,
-		type ColumnSort
-	} from '@tanstack/svelte-table';
-	import type {
-		EventSummaryModel,
-		GetEventsMode,
-		IGetEventsParams,
-		SummaryModel,
-		SummaryTemplateKeys
-	} from '$lib/models/api';
-	import { createEventDispatcher } from 'svelte';
-	import { DEFAULT_LIMIT } from '$lib/helpers/api';
-	import {
-		type FetchClientResponse,
-		globalFetchClient as api,
-		globalLoading as loading
-	} from '$api/FetchClient';
-	import TableWithPaging from '$comp/table/TableWithPaging.svelte';
-	import TableWithPagingFooter from '$comp/table/TableWithPagingFooter.svelte';
-	import { persisted } from 'svelte-local-storage-store';
-	import CustomEventMessage from '$comp/messaging/CustomEventMessage.svelte';
-	import { getColumns } from './options';
-
-	export let mode: GetEventsMode = 'summary';
-	export let filter: Readable<string>;
-	export let time: Readable<string>;
-
-	const columns = getColumns(mode);
-	const columnVisibility = persisted('events-column-visibility', <VisibilityState>{});
-	const setColumnVisibility = (updaterOrValue: Updater<VisibilityState>) => {
-		if (updaterOrValue instanceof Function) {
-			columnVisibility.update(() => updaterOrValue($columnVisibility));
-		} else {
-			columnVisibility.update(() => updaterOrValue);
-		}
-
-		options.update((old) => ({
-			...old,
-			state: {
-				...old.state,
-				...{ columnVisibility: $columnVisibility }
-			}
-		}));
-	};
-
-	let sorting: ColumnSort[] = [
-		{
-			id: 'date',
-			desc: true
-		}
-	];
-	const setSorting = (updaterOrValue: Updater<ColumnSort[]>) => {
-		if (updaterOrValue instanceof Function) {
-			sorting = updaterOrValue(sorting);
-		} else {
-			sorting = updaterOrValue;
-		}
-
-		options.update((old) => ({
-			...old,
-			state: {
-				...old.state,
-				sorting
-			}
-		}));
-
-		parameters.update((params) => ({
-			...params,
-			before: undefined,
-			after: undefined,
-			sort:
-				sorting.length > 0
-					? sorting.map((sort) => `${sort.desc ? '-' : ''}${sort.id}`).join(',')
-					: undefined
-		}));
-	};
-
-	const options = writable<TableOptions<SummaryModel<SummaryTemplateKeys>>>({
-		columns,
-		data: [],
-		enableSortingRemoval: false,
-		manualSorting: true,
-		state: {
-			columnVisibility: $columnVisibility,
-			sorting
-		},
-		onColumnVisibilityChange: setColumnVisibility,
-		onSortingChange: setSorting,
-		getCoreRowModel: getCoreRowModel(),
-		getRowId: (originalRow) => originalRow.id
-	});
-
-	const table = createSvelteTable<SummaryModel<SummaryTemplateKeys>>(options);
-	const page = writable(0);
-
-	let response: FetchClientResponse<EventSummaryModel<SummaryTemplateKeys>[]>;
-	const parameters = writable<IGetEventsParams>({ mode });
-	parameters.subscribe(async () => await loadData());
-	filter.subscribe(async () => await loadData());
-	time.subscribe(async () => await loadData());
-	let total = 0;
-
-	async function loadData() {
-		if ($loading) {
-			return;
-		}
-
-		response = await api.getJSON<EventSummaryModel<SummaryTemplateKeys>[]>('events', {
-			params: {
-				mode: 'summary',
-				filter: $filter,
-				time: $time,
-				...$parameters
-			}
-		});
-
-		if (response.ok) {
-			options.update((options) => ({
-				...options,
-				data: response.data || []
-			}));
-			if (response.meta?.total) total = response.meta.total as number;
-		}
-	}
-
-	function onNavigateToFirstPage() {
-		page.update(() => 0);
-		parameters.update((params) => ({
-			...params,
-			before: undefined,
-			after: undefined
-		}));
-	}
-
-	function onPreviousPage() {
-		page.update((page) => Math.max(page - 1, 0));
-		parameters.update((params) => ({
-			...params,
-			before: response?.meta.links.next?.before,
-			after: undefined
-		}));
-	}
-
-	function onNextPage() {
-		page.update((page) => page + 1);
-		parameters.update((params) => ({
-			...params,
-			before: undefined,
-			after: response?.meta.links.next?.after
-		}));
-	}
-
-	const dispatch = createEventDispatcher();
-</script>
-
-<CustomEventMessage type="refresh" on:message={loadData}></CustomEventMessage>
-
-<TableWithPaging
-	{table}
-	loading={$loading}
-	error={response?.problem?.errors.general}
-	page={$page}
-	pageTotal={response?.data?.length || 0}
-	limit={DEFAULT_LIMIT}
-	{total}
-	{onNavigateToFirstPage}
-	{onPreviousPage}
-	{onNextPage}
-	on:rowclick={(event) => dispatch('rowclick', event.detail)}
->
-	<slot slot="header" name="header" {table} />
-	<slot
-		slot="footer"
-		name="footer"
-		{table}
-		loading={$loading}
-		error={response?.problem?.errors.general}
-		page={$page}
-		pageTotal={response?.data?.length || 0}
-		limit={DEFAULT_LIMIT}
-		{total}
-		{onNavigateToFirstPage}
-		{onPreviousPage}
-		{onNextPage}
-	>
-		<TableWithPagingFooter
-			loading={$loading}
-			error={response?.problem?.errors.general}
-			page={$page}
-			pageTotal={response?.data?.length || 0}
-			limit={DEFAULT_LIMIT}
-			{total}
-			{onNavigateToFirstPage}
-			{onPreviousPage}
-			{onNextPage}
-		></TableWithPagingFooter>
-	</slot>
-</TableWithPaging>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogDataTable.svelte
similarity index 61%
rename from src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogTable.svelte
rename to src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogDataTable.svelte
index e1cc4469f7..3bab4d6245 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogDataTable.svelte
@@ -1,12 +1,8 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
 	import { writable, type Readable } from 'svelte/store';
-	import {
-		createSvelteTable,
-		getCoreRowModel,
-		type TableOptions,
-		type Updater,
-		type VisibilityState
-	} from '@tanstack/svelte-table';
+	import { createSvelteTable } from '@tanstack/svelte-table';
+	import * as DataTable from '$comp/data-table';
 	import type { EventSummaryModel, IGetEventsParams, SummaryTemplateKeys } from '$lib/models/api';
 	import {
 		type FetchClientResponse,
@@ -16,48 +12,28 @@
 	import WebSocketMessage from '$comp/messaging/WebSocketMessage.svelte';
 	import ErrorMessage from '$comp/ErrorMessage.svelte';
 	import Loading from '$comp/Loading.svelte';
-	import Table from '$comp/table/Table.svelte';
-	import { createEventDispatcher } from 'svelte';
-	import { persisted } from 'svelte-local-storage-store';
 	import { ChangeType, type WebSocketMessageValue } from '$lib/models/websocket';
 	import TimeAgo from '$comp/formatters/TimeAgo.svelte';
 	import CustomEventMessage from '$comp/messaging/CustomEventMessage.svelte';
 	import Muted from '$comp/typography/Muted.svelte';
-	import { getColumns } from './options';
+	import { getOptions } from './options';
+	import SearchInput from '$comp/SearchInput.svelte';
+	import { limit, onFilterInputChanged } from '$lib/stores/events';
+	import { DEFAULT_LIMIT } from '$lib/helpers/api';
 
 	export let filter: Readable<string>;
 
-	const columns = getColumns<EventSummaryModel<SummaryTemplateKeys>>('summary');
-	const columnVisibility = persisted('events-column-visibility', <VisibilityState>{});
-	const setColumnVisibility = (updaterOrValue: Updater<VisibilityState>) => {
-		if (updaterOrValue instanceof Function) {
-			columnVisibility.update(() => updaterOrValue($columnVisibility));
-		} else {
-			columnVisibility.update(() => updaterOrValue);
-		}
-
-		options.update((old) => ({
-			...old,
-			state: {
-				...old.state,
-				...{ columnVisibility: $columnVisibility }
-			}
-		}));
-	};
-
-	const options = writable<TableOptions<EventSummaryModel<SummaryTemplateKeys>>>({
-		data: [],
-		columns,
-		enableSorting: false,
-		state: {
-			columnVisibility: $columnVisibility
-		},
-		onColumnVisibilityChange: setColumnVisibility,
-		getCoreRowModel: getCoreRowModel(),
-		getRowId: (originalRow) => originalRow.id
-	});
-
-	const table = createSvelteTable<EventSummaryModel<SummaryTemplateKeys>>(options);
+	const parameters = writable<IGetEventsParams>({ mode: 'summary', limit: $limit });
+	const options = getOptions<EventSummaryModel<SummaryTemplateKeys>>(parameters, (options) => ({
+		...options,
+		columns: options.columns
+			.filter((c) => c.id !== 'select')
+			.map((c) => ({ ...c, enableSorting: false })),
+		enableRowSelection: false,
+		enableMultiRowSelection: false,
+		manualSorting: false
+	}));
+	const table = createSvelteTable(options);
 
 	let response: FetchClientResponse<EventSummaryModel<SummaryTemplateKeys>[]>;
 	const data = writable<EventSummaryModel<SummaryTemplateKeys>[]>([]);
@@ -65,7 +41,7 @@
 	let lastUpdated: Date;
 	let before: string | undefined;
 
-	const defaultParams: IGetEventsParams = { mode: 'summary' };
+	parameters.subscribe(async () => await loadData());
 	filter.subscribe(async () => {
 		before = undefined;
 		data.set([]);
@@ -79,7 +55,7 @@
 
 		response = await api.getJSON<EventSummaryModel<SummaryTemplateKeys>[]>('events', {
 			params: {
-				...defaultParams,
+				...$parameters,
 				filter: $filter,
 				before
 			}
@@ -102,7 +78,8 @@
 	data.subscribe((data) => {
 		options.update((options) => ({
 			...options,
-			data
+			data,
+			meta: response?.meta
 		}));
 	});
 
@@ -119,24 +96,26 @@
 		}
 	}
 
-	loadData();
-
 	const dispatch = createEventDispatcher();
 </script>
 
 <CustomEventMessage type="refresh" on:message={loadData}></CustomEventMessage>
 <WebSocketMessage type="PersistentEventChanged" on:message={onPersistentEvent}></WebSocketMessage>
 
-<Table {table} on:rowclick={(event) => dispatch('rowclick', event.detail)}>
-	<slot slot="header" name="header" {table} />
-	<slot
-		slot="footer"
-		name="footer"
-		{table}
-		error={response?.problem?.errors.general}
-		{loading}
-		{lastUpdated}
-	>
+<DataTable.Root>
+	<DataTable.Toolbar {table}>
+		<slot name="toolbar">
+			<SearchInput
+				class="h-8 w-[120px] lg:w-[350px] xl:w-[550px]"
+				value={$filter}
+				on:input={onFilterInputChanged}
+			/>
+		</slot>
+	</DataTable.Toolbar>
+	<DataTable.Body {table} on:rowclick={(event) => dispatch('rowclick', event.detail)}
+	></DataTable.Body>
+	<Muted class="flex items-center justify-between flex-1">
+		<DataTable.PageSize {table} bind:value={$limit}></DataTable.PageSize>
 		<Muted class="py-2 text-center">
 			{#if $loading}
 				<Loading></Loading>
@@ -148,5 +127,6 @@
 				>
 			{/if}
 		</Muted>
-	</slot>
-</Table>
+		<div></div>
+	</Muted>
+</DataTable.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
index 2b56202cb9..4195f10e01 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
@@ -140,8 +140,13 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 	return columns;
 }
 
-export function getOptions(parameters: Writable<IGetEventsParams>) {
-	const columns = getColumns(get(parameters).mode);
+export function getOptions<TSummaryModel extends SummaryModel<SummaryTemplateKeys>>(
+	parameters: Writable<IGetEventsParams>,
+	configureOptions: (options: TableOptions<TSummaryModel>) => TableOptions<TSummaryModel> = (
+		options
+	) => options
+) {
+	const columns = getColumns<TSummaryModel>(get(parameters).mode);
 	const columnVisibility = persisted('events-column-visibility', <VisibilityState>{});
 
 	const onColumnVisibilityChange = (updaterOrValue: Updater<VisibilityState>) => {
@@ -166,7 +171,9 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 	};
 
 	const onPaginationChange = (updaterOrValue: Updater<PaginationState>) => {
-		const { loading = false } = get(options).meta as { loading: boolean };
+		const { loading = false } = (get(options).meta as { loading: boolean }) ?? {
+			loading: false
+		};
 		if (loading) {
 			return;
 		}
@@ -260,26 +267,28 @@ export function getOptions(parameters: Writable<IGetEventsParams>) {
 		}));
 	};
 
-	const options = writable<TableOptions<SummaryModel<SummaryTemplateKeys>>>({
-		columns,
-		data: [],
-		enableRowSelection: true,
-		enableMultiRowSelection: true,
-		enableSortingRemoval: false,
-		manualSorting: true,
-		manualPagination: true,
-		state: {
-			columnVisibility: get(columnVisibility),
-			rowSelection,
-			sorting
-		},
-		getCoreRowModel: getCoreRowModel(),
-		getRowId: (originalRow) => originalRow.id,
-		onColumnVisibilityChange,
-		onPaginationChange,
-		onRowSelectionChange,
-		onSortingChange
-	});
+	const options = writable<TableOptions<TSummaryModel>>(
+		configureOptions({
+			columns,
+			data: [],
+			enableRowSelection: true,
+			enableMultiRowSelection: true,
+			enableSortingRemoval: false,
+			manualSorting: true,
+			manualPagination: true,
+			state: {
+				columnVisibility: get(columnVisibility),
+				rowSelection,
+				sorting
+			},
+			getCoreRowModel: getCoreRowModel(),
+			getRowId: (originalRow) => originalRow.id,
+			onColumnVisibilityChange,
+			onPaginationChange,
+			onRowSelectionChange,
+			onSortingChange
+		})
+	);
 
 	return options;
 }
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/table/Pager.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/table/Pager.svelte
deleted file mode 100644
index 3207b14800..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/table/Pager.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-	import FirstPageIcon from '~icons/mdi/first-page';
-	import NavigateBeforeIcon from '~icons/mdi/navigate-before';
-	import NavigateNextIcon from '~icons/mdi/navigate-next';
-	import { createEventDispatcher } from 'svelte';
-	import { Button } from '$comp/ui/button';
-
-	export let canNavigateToFirstPage: boolean;
-	export let hasPrevious: boolean;
-	export let hasNext: boolean;
-
-	const dispatch = createEventDispatcher();
-
-	function navigateToFirstPage(e: Event) {
-		e.preventDefault();
-		dispatch('navigatetofirstpage');
-	}
-
-	function navigateToPreviousPage(e: Event) {
-		e.preventDefault();
-		dispatch('previous');
-	}
-
-	function navigateToNextPage(e: Event) {
-		e.preventDefault();
-		dispatch('next');
-	}
-</script>
-
-{#if canNavigateToFirstPage}
-	<Button on:click={navigateToFirstPage} variant="outline" size="icon"><FirstPageIcon /></Button>
-{/if}
-<Button disabled={!hasPrevious} on:click={navigateToPreviousPage} variant="outline" size="icon"
-	><NavigateBeforeIcon /></Button
->
-<Button disabled={!hasNext} on:click={navigateToNextPage} variant="outline" size="icon"
-	><NavigateNextIcon /></Button
->
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/table/PagerSummary.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/table/PagerSummary.svelte
deleted file mode 100644
index ec23e3f599..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/table/PagerSummary.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	import Muted from '$comp/typography/Muted.svelte';
-	import { getPageEnd, getPageStart } from '$lib/helpers/api';
-	import NumberFormatter from '../formatters/Number.svelte';
-
-	export let page: number;
-	export let pageTotal: number;
-	export let limit: number;
-	export let total: number;
-
-	$: start = getPageStart(page, limit);
-	$: end = Math.min(getPageEnd(page, pageTotal, limit), total);
-</script>
-
-{#if pageTotal !== 0 && total !== 0}
-	<Muted>
-		Showing
-		<span class="font-bold"><NumberFormatter value={start}></NumberFormatter></span>-<span
-			class="font-bold"
-		>
-			<NumberFormatter value={end}></NumberFormatter>
-		</span>
-		of
-		<span class="font-bold">
-			<NumberFormatter value={total}></NumberFormatter>
-		</span>
-	</Muted>
-{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/table/Table.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/table/Table.svelte
deleted file mode 100644
index 7218ed3e2f..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/table/Table.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<script lang="ts">
-	import KeyboardArrowDownIcon from '~icons/mdi/keyboard-arrow-down';
-	import KeyboardArrowUpIcon from '~icons/mdi/keyboard-arrow-up';
-
-	import * as Table from '$comp/ui/table';
-	import {
-		flexRender,
-		type Cell,
-		type Header,
-		type Table as TableType
-	} from '@tanstack/svelte-table';
-	import { createEventDispatcher } from 'svelte';
-	import type { Readable } from 'svelte/store';
-
-	type TData = $$Generic;
-	export let table: Readable<TableType<TData>>;
-
-	const dispatch = createEventDispatcher();
-
-	function getHeaderColumnClass(header: Header<TData, unknown>) {
-		const classes = [
-			'tracking-wider uppercase',
-			(header.column.columnDef.meta as { class?: string })?.class || ''
-		];
-
-		if (header.column.getCanSort()) {
-			classes.push('hover cursor-pointer');
-		}
-
-		return classes.filter(Boolean).join(' ');
-	}
-
-	function getCellClass(cell: Cell<TData, unknown>) {
-		if (cell.column.id === 'select') {
-			return;
-		}
-
-		return 'cursor-pointer hover';
-	}
-
-	function onCellClick(cell: Cell<TData, unknown>): void {
-		if (cell.column.id === 'select') {
-			return;
-		}
-
-		dispatch('rowclick', cell.row.original);
-	}
-</script>
-
-<div class="flex flex-col">
-	<div class="overflow-x-auto rounded-lg">
-		<div class="inline-block min-w-full align-middle">
-			<slot name="header" {table} />
-
-			<Table.Root>
-				<Table.Header>
-					{#each $table.getHeaderGroups() as headerGroup}
-						<Table.Row>
-							{#each headerGroup.headers as header}
-								{#if !header.isPlaceholder}
-									<Table.Head class={getHeaderColumnClass(header)}>
-										<button
-											class="flex items-center w-full {getHeaderColumnClass(
-												header
-											)}"
-											on:click={header.column.getToggleSortingHandler()}
-											disabled={!header.column.getCanSort()}
-										>
-											<svelte:component
-												this={flexRender(
-													header.column.columnDef.header,
-													header.getContext()
-												)}
-											/>
-											{#if header.column.getIsSorted() === 'asc'}
-												<KeyboardArrowUpIcon />
-											{:else if header.column.getIsSorted() === 'desc'}
-												<KeyboardArrowDownIcon />
-											{/if}
-										</button>
-									</Table.Head>
-								{:else}
-									<Table.Head class={getHeaderColumnClass(header)}></Table.Head>
-								{/if}
-							{/each}
-						</Table.Row>
-					{/each}
-				</Table.Header>
-				<Table.Body>
-					<Table.Row class="hidden text-center only:table-row">
-						<Table.Cell colspan={$table.getVisibleLeafColumns().length}>
-							No data was found with the current filter.
-						</Table.Cell>
-					</Table.Row>
-					{#each $table.getRowModel().rows as row}
-						<Table.Row>
-							{#each row.getVisibleCells() as cell}
-								<Table.Cell
-									on:click={() => onCellClick(cell)}
-									class={getCellClass(cell)}
-								>
-									<svelte:component
-										this={flexRender(
-											cell.column.columnDef.cell,
-											cell.getContext()
-										)}
-									/>
-								</Table.Cell>
-							{/each}
-						</Table.Row>
-					{/each}
-				</Table.Body>
-			</Table.Root>
-
-			<slot name="footer" {table} />
-		</div>
-	</div>
-</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/table/TableColumnPicker.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/table/TableColumnPicker.svelte
deleted file mode 100644
index 283d9b420d..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/table/TableColumnPicker.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts">
-	import Checkbox from '$comp/primitives/Checkbox.svelte';
-
-	import { Button } from '$comp/ui/button';
-	import * as DropdownMenu from '$comp/ui/dropdown-menu';
-
-	import type { Readable } from 'svelte/store';
-
-	import ViewColumnIcon from '~icons/mdi/view-column';
-	import type { Column, Table } from '@tanstack/svelte-table';
-
-	type TData = $$Generic;
-	export let table: Readable<Table<TData>>;
-
-	function getColumnId(column: Column<TData, unknown>): string {
-		return column.columnDef.header as string;
-	}
-</script>
-
-<DropdownMenu.Root>
-	<DropdownMenu.Trigger asChild let:builder>
-		<Button builders={[builder]} variant="outline" size="icon"><ViewColumnIcon /></Button>
-	</DropdownMenu.Trigger>
-	<DropdownMenu.Content class="w-44" align="end">
-		<DropdownMenu.Label>
-			<div class="flex items-center space-x-2">
-				<Checkbox
-					id="toggle-all"
-					checked={$table.getIsAllColumnsVisible()}
-					on:click={(e) => $table.getToggleAllColumnsVisibilityHandler()(e)}
-					>Toggle All</Checkbox
-				>
-			</div>
-		</DropdownMenu.Label>
-		<DropdownMenu.Separator />
-		{#each $table.getAllLeafColumns() as column}
-			{#if column.getCanHide()}
-				<DropdownMenu.Label>
-					<div class="flex items-center space-x-2">
-						<Checkbox
-							id={getColumnId(column)}
-							checked={column.getIsVisible()}
-							on:click={() => column.toggleVisibility()}
-							>{column.columnDef.header}</Checkbox
-						>
-					</div>
-				</DropdownMenu.Label>
-			{/if}
-		{/each}
-	</DropdownMenu.Content>
-</DropdownMenu.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/table/TableWithPaging.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/table/TableWithPaging.svelte
deleted file mode 100644
index 63c0007e29..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/table/TableWithPaging.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script lang="ts">
-	import type { Readable } from 'svelte/store';
-
-	import { DEFAULT_LIMIT } from '$lib/helpers/api';
-
-	import type { Table as TableType } from '@tanstack/svelte-table';
-	import { createEventDispatcher } from 'svelte';
-	import Table from './Table.svelte';
-	import TableWithPagingFooter from './TableWithPagingFooter.svelte';
-
-	type TData = $$Generic;
-	export let table: Readable<TableType<TData>>;
-
-	export let loading: boolean;
-	export let error: string[] | undefined;
-
-	export let page: number;
-	export let pageTotal: number;
-	export let limit = DEFAULT_LIMIT;
-	export let total: number;
-
-	export let onNavigateToFirstPage: () => void;
-	export let onPreviousPage: () => void;
-	export let onNextPage: () => void;
-
-	const dispatch = createEventDispatcher();
-</script>
-
-<Table {table} on:rowclick={(event) => dispatch('rowclick', event.detail)}>
-	<slot slot="header" name="header" {table} />
-	<slot
-		slot="footer"
-		name="footer"
-		{table}
-		{loading}
-		{error}
-		{page}
-		{pageTotal}
-		{limit}
-		{total}
-		{onNavigateToFirstPage}
-		{onPreviousPage}
-		{onNextPage}
-	>
-		<TableWithPagingFooter
-			{loading}
-			{error}
-			{page}
-			{pageTotal}
-			{limit}
-			{total}
-			{onNavigateToFirstPage}
-			{onPreviousPage}
-			{onNextPage}
-		></TableWithPagingFooter>
-	</slot>
-</Table>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/table/TableWithPagingFooter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/table/TableWithPagingFooter.svelte
deleted file mode 100644
index 7e091bb63c..0000000000
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/table/TableWithPagingFooter.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script lang="ts">
-	import ErrorMessage from '$comp/ErrorMessage.svelte';
-	import Loading from '$comp/Loading.svelte';
-	import Muted from '$comp/typography/Muted.svelte';
-	import {
-		DEFAULT_LIMIT,
-		canNavigateToFirstPage,
-		hasPreviousPage,
-		hasNextPage
-	} from '$lib/helpers/api';
-	import Pager from './Pager.svelte';
-	import PagerSummary from './PagerSummary.svelte';
-
-	export let loading: boolean;
-	export let error: string[] | undefined;
-
-	export let page: number;
-	export let pageTotal: number;
-	export let limit = DEFAULT_LIMIT;
-	export let total: number;
-
-	export let onNavigateToFirstPage: () => void;
-	export let onPreviousPage: () => void;
-	export let onNextPage: () => void;
-</script>
-
-<Muted class="flex items-center justify-between flex-1">
-	<div class="py-2">
-		{#if loading}
-			<Loading></Loading>
-		{:else if error}
-			<ErrorMessage message={error}></ErrorMessage>
-		{/if}
-	</div>
-
-	{#if total}
-		<PagerSummary {page} {pageTotal} {limit} {total}></PagerSummary>
-
-		<div class="py-2">
-			<Pager
-				canNavigateToFirstPage={canNavigateToFirstPage(page)}
-				on:navigatetofirstpage={() => onNavigateToFirstPage()}
-				hasPrevious={hasPreviousPage(page)}
-				on:previous={() => onPreviousPage()}
-				hasNext={hasNextPage(page, pageTotal, limit, total)}
-				on:next={() => onNextPage()}
-			></Pager>
-		</div>
-	{/if}
-</Muted>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/stores/events.ts b/src/Exceptionless.Web/ClientApp/src/lib/stores/events.ts
index 48d60a7045..27943ec4a1 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/stores/events.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/stores/events.ts
@@ -13,6 +13,7 @@ import {
 import { persisted } from 'svelte-local-storage-store';
 import { derived, get } from 'svelte/store';
 
+export const limit = persisted<number>('events.limit', 10);
 export const time = persisted<string>('filter.time', '');
 const filters = persisted<IFilter[]>('filters', [], { serializer: new FilterSerializer() });
 
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
index a0bd325c7d..3502660979 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
@@ -1,18 +1,11 @@
 <script lang="ts">
 	import * as Card from '$comp/ui/card';
 	import * as Sheet from '$comp/ui/sheet';
-	import EventsTailLogTable from '$comp/events/table/EventsTailLogTable.svelte';
-	import TableColumnPicker from '$comp/table/TableColumnPicker.svelte';
+	import EventsTailLogDataTable from '$comp/events/table/EventsTailLogDataTable.svelte';
 	import type { SummaryModel, SummaryTemplateKeys } from '$lib/models/api';
 	import CustomEventMessage from '$comp/messaging/CustomEventMessage.svelte';
-	import {
-		filter,
-		filterWithFaceted,
-		onFilterChanged,
-		onFilterInputChanged
-	} from '$lib/stores/events';
+	import { filter, onFilterChanged } from '$lib/stores/events';
 
-	import SearchInput from '$comp/SearchInput.svelte';
 	import EventsDrawer from '$comp/events/EventsDrawer.svelte';
 
 	let selectedEventId: string | null = null;
@@ -30,18 +23,7 @@
 <Card.Root>
 	<Card.Title class="p-6 pb-4 text-xl font-bold">Event Stream</Card.Title>
 	<Card.Content>
-		<EventsTailLogTable on:rowclick={onRowClick} filter={filterWithFaceted}>
-			<div slot="header" let:table>
-				<div class="flex items-center justify-between p-2 pb-4">
-					<div class="w-2/4">
-						<SearchInput value={$filter} on:input={onFilterInputChanged} />
-					</div>
-					<div class="flex items-center space-x-2">
-						<TableColumnPicker {table}></TableColumnPicker>
-					</div>
-				</div>
-			</div>
-		</EventsTailLogTable>
+		<EventsTailLogDataTable on:rowclick={onRowClick} {filter}></EventsTailLogDataTable>
 	</Card.Content></Card.Root
 >
 

From 25a582113a489b208b801c6023561cabb2111a37 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Mon, 15 Jan 2024 14:18:01 -0600
Subject: [PATCH 31/35] Updated deps

---
 .../ClientApp/package-lock.json               | 88 +++++++++----------
 src/Exceptionless.Web/ClientApp/package.json  |  4 +-
 2 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
index 3819bf7e6a..5f2ce0e89e 100644
--- a/src/Exceptionless.Web/ClientApp/package-lock.json
+++ b/src/Exceptionless.Web/ClientApp/package-lock.json
@@ -36,8 +36,8 @@
 				"@sveltejs/adapter-static": "^3.0.1",
 				"@sveltejs/kit": "^2.3.2",
 				"@sveltejs/vite-plugin-svelte": "^3.0.1",
-				"@typescript-eslint/eslint-plugin": "^6.18.1",
-				"@typescript-eslint/parser": "^6.18.1",
+				"@typescript-eslint/eslint-plugin": "^6.19.0",
+				"@typescript-eslint/parser": "^6.19.0",
 				"autoprefixer": "^10.4.16",
 				"cross-env": "^7.0.3",
 				"eslint": "^8.56.0",
@@ -1547,16 +1547,16 @@
 			"integrity": "sha512-c/hzNDBh7eRF+KbCf+OoZxKbnkpaK/cKp9iLQWqB7muXtM+MtL9SUUH8vCFcLn6dH1Qm05jiexK0ofWY7TfOhQ=="
 		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "6.18.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.18.1.tgz",
-			"integrity": "sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==",
+			"version": "6.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.19.0.tgz",
+			"integrity": "sha512-DUCUkQNklCQYnrBSSikjVChdc84/vMPDQSgJTHBZ64G9bA9w0Crc0rd2diujKbTdp6w2J47qkeHQLoi0rpLCdg==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/regexpp": "^4.5.1",
-				"@typescript-eslint/scope-manager": "6.18.1",
-				"@typescript-eslint/type-utils": "6.18.1",
-				"@typescript-eslint/utils": "6.18.1",
-				"@typescript-eslint/visitor-keys": "6.18.1",
+				"@typescript-eslint/scope-manager": "6.19.0",
+				"@typescript-eslint/type-utils": "6.19.0",
+				"@typescript-eslint/utils": "6.19.0",
+				"@typescript-eslint/visitor-keys": "6.19.0",
 				"debug": "^4.3.4",
 				"graphemer": "^1.4.0",
 				"ignore": "^5.2.4",
@@ -1582,15 +1582,15 @@
 			}
 		},
 		"node_modules/@typescript-eslint/parser": {
-			"version": "6.18.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.18.1.tgz",
-			"integrity": "sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==",
+			"version": "6.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.19.0.tgz",
+			"integrity": "sha512-1DyBLG5SH7PYCd00QlroiW60YJ4rWMuUGa/JBV0iZuqi4l4IK3twKPq5ZkEebmGqRjXWVgsUzfd3+nZveewgow==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/scope-manager": "6.18.1",
-				"@typescript-eslint/types": "6.18.1",
-				"@typescript-eslint/typescript-estree": "6.18.1",
-				"@typescript-eslint/visitor-keys": "6.18.1",
+				"@typescript-eslint/scope-manager": "6.19.0",
+				"@typescript-eslint/types": "6.19.0",
+				"@typescript-eslint/typescript-estree": "6.19.0",
+				"@typescript-eslint/visitor-keys": "6.19.0",
 				"debug": "^4.3.4"
 			},
 			"engines": {
@@ -1610,13 +1610,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "6.18.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.18.1.tgz",
-			"integrity": "sha512-BgdBwXPFmZzaZUuw6wKiHKIovms97a7eTImjkXCZE04TGHysG+0hDQPmygyvgtkoB/aOQwSM/nWv3LzrOIQOBw==",
+			"version": "6.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.19.0.tgz",
+			"integrity": "sha512-dO1XMhV2ehBI6QN8Ufi7I10wmUovmLU0Oru3n5LVlM2JuzB4M+dVphCPLkVpKvGij2j/pHBWuJ9piuXx+BhzxQ==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.18.1",
-				"@typescript-eslint/visitor-keys": "6.18.1"
+				"@typescript-eslint/types": "6.19.0",
+				"@typescript-eslint/visitor-keys": "6.19.0"
 			},
 			"engines": {
 				"node": "^16.0.0 || >=18.0.0"
@@ -1627,13 +1627,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/type-utils": {
-			"version": "6.18.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.18.1.tgz",
-			"integrity": "sha512-wyOSKhuzHeU/5pcRDP2G2Ndci+4g653V43gXTpt4nbyoIOAASkGDA9JIAgbQCdCkcr1MvpSYWzxTz0olCn8+/Q==",
+			"version": "6.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.19.0.tgz",
+			"integrity": "sha512-mcvS6WSWbjiSxKCwBcXtOM5pRkPQ6kcDds/juxcy/727IQr3xMEcwr/YLHW2A2+Fp5ql6khjbKBzOyjuPqGi/w==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/typescript-estree": "6.18.1",
-				"@typescript-eslint/utils": "6.18.1",
+				"@typescript-eslint/typescript-estree": "6.19.0",
+				"@typescript-eslint/utils": "6.19.0",
 				"debug": "^4.3.4",
 				"ts-api-utils": "^1.0.1"
 			},
@@ -1654,9 +1654,9 @@
 			}
 		},
 		"node_modules/@typescript-eslint/types": {
-			"version": "6.18.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.18.1.tgz",
-			"integrity": "sha512-4TuMAe+tc5oA7wwfqMtB0Y5OrREPF1GeJBAjqwgZh1lEMH5PJQgWgHGfYufVB51LtjD+peZylmeyxUXPfENLCw==",
+			"version": "6.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.19.0.tgz",
+			"integrity": "sha512-lFviGV/vYhOy3m8BJ/nAKoAyNhInTdXpftonhWle66XHAtT1ouBlkjL496b5H5hb8dWXHwtypTqgtb/DEa+j5A==",
 			"dev": true,
 			"engines": {
 				"node": "^16.0.0 || >=18.0.0"
@@ -1667,13 +1667,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "6.18.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.1.tgz",
-			"integrity": "sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==",
+			"version": "6.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.19.0.tgz",
+			"integrity": "sha512-o/zefXIbbLBZ8YJ51NlkSAt2BamrK6XOmuxSR3hynMIzzyMY33KuJ9vuMdFSXW+H0tVvdF9qBPTHA91HDb4BIQ==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.18.1",
-				"@typescript-eslint/visitor-keys": "6.18.1",
+				"@typescript-eslint/types": "6.19.0",
+				"@typescript-eslint/visitor-keys": "6.19.0",
 				"debug": "^4.3.4",
 				"globby": "^11.1.0",
 				"is-glob": "^4.0.3",
@@ -1719,17 +1719,17 @@
 			}
 		},
 		"node_modules/@typescript-eslint/utils": {
-			"version": "6.18.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.18.1.tgz",
-			"integrity": "sha512-zZmTuVZvD1wpoceHvoQpOiewmWu3uP9FuTWo8vqpy2ffsmfCE8mklRPi+vmnIYAIk9t/4kOThri2QCDgor+OpQ==",
+			"version": "6.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.19.0.tgz",
+			"integrity": "sha512-QR41YXySiuN++/dC9UArYOg4X86OAYP83OWTewpVx5ct1IZhjjgTLocj7QNxGhWoTqknsgpl7L+hGygCO+sdYw==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.4.0",
 				"@types/json-schema": "^7.0.12",
 				"@types/semver": "^7.5.0",
-				"@typescript-eslint/scope-manager": "6.18.1",
-				"@typescript-eslint/types": "6.18.1",
-				"@typescript-eslint/typescript-estree": "6.18.1",
+				"@typescript-eslint/scope-manager": "6.19.0",
+				"@typescript-eslint/types": "6.19.0",
+				"@typescript-eslint/typescript-estree": "6.19.0",
 				"semver": "^7.5.4"
 			},
 			"engines": {
@@ -1744,12 +1744,12 @@
 			}
 		},
 		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "6.18.1",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.1.tgz",
-			"integrity": "sha512-/kvt0C5lRqGoCfsbmm7/CwMqoSkY3zzHLIjdhHZQW3VFrnz7ATecOHR7nb7V+xn4286MBxfnQfQhAmCI0u+bJA==",
+			"version": "6.19.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.19.0.tgz",
+			"integrity": "sha512-hZaUCORLgubBvtGpp1JEFEazcuEdfxta9j4iUwdSAr7mEsYYAp3EAUyCZk3VEEqGj6W+AV4uWyrDGtrlawAsgQ==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "6.18.1",
+				"@typescript-eslint/types": "6.19.0",
 				"eslint-visitor-keys": "^3.4.1"
 			},
 			"engines": {
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index 2959ebfa55..e0ca2d0671 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -26,8 +26,8 @@
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.3.2",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"@typescript-eslint/eslint-plugin": "^6.18.1",
-		"@typescript-eslint/parser": "^6.18.1",
+		"@typescript-eslint/eslint-plugin": "^6.19.0",
+		"@typescript-eslint/parser": "^6.19.0",
 		"autoprefixer": "^10.4.16",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.56.0",

From 4b234d92d5eee95103b12cb9b8837d514fc5e8bb Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Mon, 15 Jan 2024 14:18:19 -0600
Subject: [PATCH 32/35] Added status column

---
 .../events/table/EventsTailLogDataTable.svelte        |  1 -
 .../src/lib/components/events/table/options.ts        | 11 +++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogDataTable.svelte b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogDataTable.svelte
index 3bab4d6245..2eca12d489 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogDataTable.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/EventsTailLogDataTable.svelte
@@ -19,7 +19,6 @@
 	import { getOptions } from './options';
 	import SearchInput from '$comp/SearchInput.svelte';
 	import { limit, onFilterInputChanged } from '$lib/stores/events';
-	import { DEFAULT_LIMIT } from '$lib/helpers/api';
 
 	export let filter: Readable<string>;
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
index 4195f10e01..f813051828 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/components/events/table/options.ts
@@ -29,6 +29,7 @@ import StackUsersSummaryCell from './StackUsersSummaryCell.svelte';
 import { DEFAULT_LIMIT } from '$lib/helpers/api';
 import type { FetchClientResponse } from '$api/FetchClient';
 import { Checkbox } from '$comp/ui/checkbox';
+import StackStatusCell from './StackStatusCell.svelte';
 
 export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKeys>>(
 	mode: GetEventsMode = 'summary'
@@ -94,6 +95,16 @@ export function getColumns<TSummaryModel extends SummaryModel<SummaryTemplateKey
 		);
 	} else {
 		columns.push(
+			{
+				id: 'status',
+				header: 'Status',
+				enableSorting: false,
+				meta: {
+					class: 'w-36'
+				},
+				accessorKey: nameof<StackSummaryModel<SummaryTemplateKeys>>('status'),
+				cell: (prop) => renderComponent(StackStatusCell, { value: prop.getValue<string>() })
+			},
 			{
 				id: 'users',
 				header: 'Users',

From ea7bdac7d378a7f178ff03942998b9ba9fe98ef8 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Mon, 15 Jan 2024 14:35:19 -0600
Subject: [PATCH 33/35] Updated dep

---
 tests/Exceptionless.Tests/Exceptionless.Tests.csproj | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/Exceptionless.Tests/Exceptionless.Tests.csproj b/tests/Exceptionless.Tests/Exceptionless.Tests.csproj
index d32abae1c9..5f45d41b3d 100644
--- a/tests/Exceptionless.Tests/Exceptionless.Tests.csproj
+++ b/tests/Exceptionless.Tests/Exceptionless.Tests.csproj
@@ -10,7 +10,7 @@
 
     <PackageReference Include="FluentRest.NewtonsoftJson" Version="9.8.0" />
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.8.0" />
-    <PackageReference Include="xunit" Version="2.6.5" />
+    <PackageReference Include="xunit" Version="2.6.6" />
     <PackageReference Include="GitHubActionsTestLogger" Version="2.3.3" PrivateAssets="All" />
     <PackageReference Include="xunit.runner.visualstudio" Version="2.5.6" PrivateAssets="All" />
     <PackageReference Include="coverlet.collector" Version="6.0.0">

From c76d4845ee027df168b94fdcceeb71c41e3744b7 Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Mon, 15 Jan 2024 14:36:03 -0600
Subject: [PATCH 34/35] Disable api compiler messages, these params are used
 for public documentation

---
 src/Exceptionless.Web/Controllers/EventController.cs | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/Exceptionless.Web/Controllers/EventController.cs b/src/Exceptionless.Web/Controllers/EventController.cs
index 36bdbc2ff8..de4801c238 100644
--- a/src/Exceptionless.Web/Controllers/EventController.cs
+++ b/src/Exceptionless.Web/Controllers/EventController.cs
@@ -918,12 +918,14 @@ public Task<ActionResult> GetSubmitEventV1Async(string? projectId = null, string
     /// <response code="404">No project was found.</response>
     [HttpGet("submit")]
     [ConfigurationResponseFilter]
+#pragma warning disable IDE0060
     public Task<ActionResult> GetSubmitEventV2Async(string? type = null, string? source = null, string? message = null, string? reference = null,
         string? date = null, int? count = null, decimal? value = null, string? geo = null, string? tags = null, string? identity = null,
         string? identityname = null, [FromHeader][UserAgent] string? userAgent = null, [FromQuery][QueryStringParameters] IQueryCollection? parameters = null)
     {
         return GetSubmitEventAsync(null, 2, null, userAgent, parameters);
     }
+#pragma warning restore IDE0060
 
     /// <summary>
     /// Submit event type by GET
@@ -955,12 +957,14 @@ public Task<ActionResult> GetSubmitEventV2Async(string? type = null, string? sou
     /// <response code="404">No project was found.</response>
     [HttpGet("submit/{type:minlength(1)}")]
     [ConfigurationResponseFilter]
+#pragma warning disable IDE0060
     public Task<ActionResult> GetSubmitEventByTypeV2Async(string type, string? source = null, string? message = null, string? reference = null,
         string? date = null, int? count = null, decimal? value = null, string? geo = null, string? tags = null, string? identity = null,
         string? identityname = null, [FromHeader][UserAgent] string? userAgent = null, [FromQuery][QueryStringParameters] IQueryCollection? parameters = null)
     {
         return GetSubmitEventAsync(null, 2, type, userAgent, parameters);
     }
+#pragma warning restore IDE0060
 
     /// <summary>
     /// Submit event type by GET for a specific project
@@ -994,12 +998,14 @@ public Task<ActionResult> GetSubmitEventByTypeV2Async(string type, string? sourc
     [HttpGet("~/api/v2/projects/{projectId:objectid}/events/submit")]
     [HttpGet("~/api/v2/projects/{projectId:objectid}/events/submit/{type:minlength(1)}")]
     [ConfigurationResponseFilter]
+#pragma warning disable IDE0060
     public Task<ActionResult> GetSubmitEventByProjectV2Async(string projectId, string? type = null, string? source = null, string? message = null, string? reference = null,
         string? date = null, int? count = null, decimal? value = null, string? geo = null, string? tags = null, string? identity = null,
         string? identityname = null, [FromHeader][UserAgent] string? userAgent = null, [FromQuery][QueryStringParameters] IQueryCollection? parameters = null)
     {
         return GetSubmitEventAsync(projectId, 2, type, userAgent, parameters);
     }
+#pragma warning restore IDE0060
 
     private async Task<ActionResult> GetSubmitEventAsync(string? projectId = null, int apiVersion = 2, string? type = null, string? userAgent = null, IQueryCollection? parameters = null)
     {

From 1381ba9528b66b3875a73163e781e5d95fa4e0eb Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Mon, 15 Jan 2024 14:37:15 -0600
Subject: [PATCH 35/35] Some refactorings

---
 .../Plugins/Formatting/Default/99_DefaultFormattingPlugin.cs    | 2 +-
 src/Exceptionless.Web/Controllers/EventController.cs            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Exceptionless.Core/Plugins/Formatting/Default/99_DefaultFormattingPlugin.cs b/src/Exceptionless.Core/Plugins/Formatting/Default/99_DefaultFormattingPlugin.cs
index f06b2731f0..51309b6382 100644
--- a/src/Exceptionless.Core/Plugins/Formatting/Default/99_DefaultFormattingPlugin.cs
+++ b/src/Exceptionless.Core/Plugins/Formatting/Default/99_DefaultFormattingPlugin.cs
@@ -97,7 +97,7 @@ public override SlackMessage GetSlackEventNotification(PersistentEvent ev, Proje
         string subject = $"[{project.Name}] A {notificationType}: *{GetSlackEventUrl(ev.Id, messageOrSource.Truncate(120))}*";
         return new SlackMessage(subject)
         {
-            Attachments = new List<SlackMessage.SlackAttachment> { attachment }
+            Attachments = [attachment]
         };
     }
 }
diff --git a/src/Exceptionless.Web/Controllers/EventController.cs b/src/Exceptionless.Web/Controllers/EventController.cs
index de4801c238..982f9ecc82 100644
--- a/src/Exceptionless.Web/Controllers/EventController.cs
+++ b/src/Exceptionless.Web/Controllers/EventController.cs
@@ -1076,7 +1076,7 @@ private async Task<ActionResult> GetSubmitEventAsync(string? projectId = null, i
                         ev.Geo = geo?.ToString();
                     break;
                 case "tags":
-                    ev.Tags.AddRange(kvp.Value.SelectMany(t => t?.Split(new[] { "," }, StringSplitOptions.RemoveEmptyEntries) ?? Array.Empty<string>()).Distinct());
+                    ev.Tags.AddRange(kvp.Value.SelectMany(t => t?.Split([","], StringSplitOptions.RemoveEmptyEntries) ?? Array.Empty<string>()).Distinct());
                     break;
                 case "identity":
                     identity = kvp.Value.FirstOrDefault();