Next Gen UI: November Updates

.github/instructions/frontend.instructions.md

@@ -14,6 +14,7 @@ Located in the `src/Exceptionless.Web/ClientApp` directory.
 - When there is a linting error, always try to run `npm run format` first.
 - Limit use of $effect as there is usually a better way to solve the problem like using $derived.
 - **Do NOT** use any server-side Svelte features.
+- Always use the chrome mcp to verify visual and functional correctness, default to using the new site /next path.
 
 ## Architecture & Components
 

.github/instructions/general.instructions.md

@@ -8,7 +8,7 @@ applyTo: "**"
 You are a distinguished engineer and are expected to deliver high-quality code that adheres to the guidelines below.
 All contributions must respect existing formatting and conventions specified in the `.editorconfig` file.
 
-use context7 for documentation
+Use context7 when I need code generation, setup or configuration steps, or library/api documentation.
 
 ## Code Style & Minimal Diffs
 

src/Exceptionless.Core/Repositories/OrganizationRepository.cs

@@ -51,7 +51,7 @@ public Task<FindResults<Organization>> GetByCriteriaAsync(string? criteria, Comm
     {
         var filter = Query<Organization>.MatchAll();
         if (!String.IsNullOrWhiteSpace(criteria))
-            filter &= Query<Organization>.Term(o => o.Name, criteria);
+            filter &= (Query<Organization>.Term(o => o.Id, criteria) || Query<Organization>.Term(o => o.Name, criteria));
 
         if (paid.HasValue)
         {

src/Exceptionless.Web/ClientApp/eslint.config.js

@@ -1,5 +1,6 @@
 import { includeIgnoreFile } from '@eslint/compat';
 import js from '@eslint/js';
+import pluginQuery from '@tanstack/eslint-plugin-query';
 import prettier from 'eslint-config-prettier';
 import perfectionist from 'eslint-plugin-perfectionist';
 // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
@@ -17,6 +18,7 @@ export default ts.config(
     ...svelte.configs['flat/recommended'],
     perfectionist.configs['recommended-natural'],
     prettier,
+    ...pluginQuery.configs['flat/recommended'],
     ...svelte.configs['flat/prettier'],
     {
         languageOptions: {
@@ -37,6 +39,11 @@ export default ts.config(
     {
         ignores: ['build/', '.svelte-kit/', 'dist/', 'src/lib/generated/api.ts', 'src/lib/features/shared/components/ui/']
     },
+    {
+        rules: {
+            '@tanstack/query/exhaustive-deps': 'off'
+        }
+    },
     {
         rules: {
             'svelte/no-navigation-without-resolve': 'off'

src/Exceptionless.Web/ClientApp/package.json

@@ -25,74 +25,77 @@
         "upgrade": "ncu -i"
     },
     "devDependencies": {
-        "@chromatic-com/storybook": "^4.1.1",
-        "@eslint/compat": "^1.4.0",
-        "@eslint/js": "^9.38.0",
-        "@iconify-json/lucide": "^1.2.71",
-        "@playwright/test": "^1.56.1",
-        "@storybook/addon-a11y": "^10.0.0",
-        "@storybook/addon-docs": "^10.0.0",
+        "@chromatic-com/storybook": "^4.1.3",
+        "@eslint/compat": "^2.0.0",
+        "@eslint/js": "^9.39.1",
+        "@iconify-json/lucide": "^1.2.79",
+        "@playwright/test": "^1.57.0",
+        "@storybook/addon-a11y": "^10.1.4",
+        "@storybook/addon-docs": "^10.1.4",
         "@storybook/addon-svelte-csf": "^5.0.10",
-        "@storybook/sveltekit": "^10.0.0",
+        "@storybook/sveltekit": "^10.1.4",
         "@sveltejs/adapter-static": "^3.0.10",
-        "@sveltejs/kit": "^2.48.2",
+        "@sveltejs/kit": "^2.49.1",
         "@sveltejs/vite-plugin-svelte": "^6.2.1",
-        "@tailwindcss/vite": "^4.1.16",
+        "@tailwindcss/vite": "^4.1.17",
+        "@tanstack/eslint-plugin-query": "^5.91.2",
         "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/svelte": "^5.2.8",
+        "@testing-library/svelte": "^5.2.9",
         "@types/eslint": "^9.6.1",
-        "@types/node": "^24.9.2",
+        "@types/node": "^24.10.1",
         "@types/throttle-debounce": "^5.0.2",
         "cross-env": "^10.1.0",
-        "eslint": "^9.38.0",
+        "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-perfectionist": "^4.15.1",
-        "eslint-plugin-storybook": "^10.0.0",
-        "eslint-plugin-svelte": "^3.12.5",
-        "jsdom": "^27.0.1",
-        "prettier": "^3.6.2",
+        "eslint-plugin-storybook": "^10.1.4",
+        "eslint-plugin-svelte": "^3.13.1",
+        "jsdom": "^27.2.0",
+        "prettier": "^3.7.4",
         "prettier-plugin-svelte": "^3.4.0",
-        "prettier-plugin-tailwindcss": "^0.7.1",
-        "storybook": "^10.0.0",
-        "svelte": "^5.43.0",
-        "svelte-check": "^4.3.3",
+        "prettier-plugin-tailwindcss": "^0.7.2",
+        "storybook": "^10.1.4",
+        "svelte": "^5.45.6",
+        "svelte-check": "^4.3.4",
         "swagger-typescript-api": "^13.2.16",
         "tslib": "^2.8.1",
         "typescript": "^5.9.3",
-        "typescript-eslint": "^8.46.2",
-        "vite": "^7.1.12",
-        "vitest": "4.0.4"
+        "typescript-eslint": "^8.48.1",
+        "vite": "^7.2.6",
+        "vitest": "4.0.15",
+        "vitest-websocket-mock": "^0.5.0",
+        "zod": "^4.1.13"
     },
     "dependencies": {
         "@exceptionless/browser": "^3.1.0",
         "@exceptionless/fetchclient": "^0.44.0",
         "@internationalized/date": "^3.10.0",
-        "@lucide/svelte": "^0.548.0",
-        "@tanstack/svelte-query": "^6.0.3",
-        "@tanstack/svelte-query-devtools": "^6.0.0",
+        "@lucide/svelte": "^0.556.0",
+        "@tanstack/svelte-query": "^6.0.10",
+        "@tanstack/svelte-query-devtools": "^6.0.2",
         "@tanstack/svelte-table": "^9.0.0-alpha.10",
         "@types/d3-scale": "^4.0.9",
         "@types/d3-shape": "^3.1.7",
         "@typeschema/class-validator": "^0.3.0",
-        "bits-ui": "^2.14.1",
-        "class-validator": "^0.14.2",
+        "bits-ui": "^2.14.4",
+        "class-validator": "^0.14.3",
         "clsx": "^2.1.1",
         "d3-scale": "^4.0.2",
         "dompurify": "^3.3.0",
         "formsnap": "^2.0.1",
         "kit-query-params": "^0.0.26",
-        "layerchart": "^2.0.0-next.40",
+        "layerchart": "^2.0.0-next.43",
         "mode-watcher": "^1.1.0",
-        "oidc-client-ts": "^3.3.0",
+        "oidc-client-ts": "^3.4.1",
         "pretty-ms": "^9.3.0",
-        "runed": "^0.35.1",
-        "shiki": "^3.14.0",
-        "svelte-sonner": "^1.0.5",
+        "runed": "^0.37.0",
+        "shiki": "^3.19.0",
+        "svelte-sonner": "^1.0.7",
         "svelte-time": "^2.0.2",
-        "sveltekit-superforms": "^2.28.0",
-        "tailwind-merge": "^3.3.1",
-        "tailwind-variants": "^3.1.1",
-        "tailwindcss": "^4.1.16",
+        "sveltekit-superforms": "^2.28.1",
+        "tailwind-merge": "^3.4.0",
+        "tailwind-variants": "^3.2.2",
+        "tailwindcss": "^4.1.17",
         "throttle-debounce": "^5.0.2",
         "tw-animate-css": "^1.4.0"
     },

src/Exceptionless.Web/ClientApp/src/lib/features/auth/index.svelte.ts

@@ -2,8 +2,8 @@ import { goto } from '$app/navigation';
 import { resolve } from '$app/paths';
 import { page } from '$app/state';
 import { env } from '$env/dynamic/public';
+import { CachedPersistedState } from '$features/shared/utils/cached-persisted-state.svelte';
 import { useFetchClient } from '@exceptionless/fetchclient';
-import { PersistedState } from 'runed';
 
 import type { Login, TokenResult } from './models';
 
@@ -29,22 +29,14 @@ export type SupportedOAuthProviders = 'facebook' | 'github' | 'google' | 'live'
 
 const authSerializer = {
     deserialize: (value: null | string): null | string => {
-        if (value === '') {
-            return null;
-        }
-
-        return value;
+        return value === '' ? null : value;
     },
     serialize: (value: null | string): string => {
-        if (value === null) {
-            return '';
-        }
-
-        return value;
+        return value === null ? '' : value;
     }
 };
 
-export const accessToken = new PersistedState<null | string>('satellizer_token', null, { serializer: authSerializer });
+export const accessToken = new CachedPersistedState<null | string>('satellizer_token', null, { serializer: authSerializer });
 
 export const enableAccountCreation = env.PUBLIC_ENABLE_ACCOUNT_CREATION === 'true';
 export const facebookClientId = env.PUBLIC_FACEBOOK_APPID;
@@ -147,7 +139,8 @@ export async function login(email: string, password: string) {
 export async function logout() {
     const client = useFetchClient();
     await client.get('auth/logout', { expectedStatusCodes: [200, 401] });
-    accessToken.current = null;
+
+    accessToken.current = '';
 }
 
 export async function slackOAuthLogin(): Promise<string> {

src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts

@@ -74,6 +74,7 @@ export interface GetEventsParams {
 }
 
 export interface GetOrganizationCountRequest {
+    enabled?: () => boolean;
     params?: {
         aggregations?: string;
         filter?: string;
@@ -171,7 +172,7 @@ export function getOrganizationCountQuery(request: GetOrganizationCountRequest)
     const queryClient = useQueryClient();
 
     return createQuery<CountResult, ProblemDetails>(() => ({
-        enabled: () => !!accessToken.current && !!request.route.organizationId,
+        enabled: () => !!accessToken.current && !!request.route.organizationId && (request.enabled?.() ?? true),
         queryClient,
         queryFn: async ({ signal }: { signal: AbortSignal }) => {
             const client = useFetchClient();

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte

@@ -161,7 +161,7 @@
                 {:else if showXmlCodeEditor}
                     <CodeBlock {code} language="xml" />
                 {:else}
-                    <pre class="bg-muted rounded p-2 break-words whitespace-pre-wrap"><Code class="px-0"><div class="bg-inherit">{clipboardData}</div></Code
+                    <pre class="bg-muted rounded p-2 wrap-break-word whitespace-pre-wrap"><Code class="px-0"><div class="bg-inherit">{clipboardData}</div></Code
                         ></pre>
                 {/if}
             {:else}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/boolean-faceted-filter-trigger.stories.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import BooleanTrigger from './boolean-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/Boolean Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <BooleanTrigger changed={() => {}} term="fixed" value={true}>
+            <Filter class="size-3" />
+            Fixed: true
+        </BooleanTrigger>
+        <BooleanTrigger changed={() => {}} term="hidden" value={false}>
+            <Filter class="size-3" />
+            Hidden: false
+        </BooleanTrigger>
+        <BooleanTrigger changed={() => {}} term="critical" value={true}>
+            <Filter class="size-3" />
+            Critical: true
+        </BooleanTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <BooleanTrigger changed={() => {}} term="fixed" value={true} />
+        <BooleanTrigger changed={() => {}} term="hidden" value={false} />
+        <BooleanTrigger changed={() => {}} term="critical" value={true} />
+    </div>
+</Story>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/boolean-faceted-filter-trigger.svelte

@@ -4,22 +4,20 @@
 
     import { BooleanFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: BooleanFilter) => void;
         term: string;
         value?: boolean;
     };
     let { changed, children, class: className, term, value, ...props }: Props = $props();
-
-    const title = `Search ${term}:${value}`;
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
     onclick={() => changed(new BooleanFilter(term, value))}
-    {title}
-    class={[children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    title={`Search ${term}:${value}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/date-faceted-filter-trigger.stories.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import DateTrigger from './date-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/Date Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <DateTrigger changed={() => {}} term="date" value="2024-01-15">
+            <Filter class="size-3" />
+            date:2024-01-15
+        </DateTrigger>
+        <DateTrigger changed={() => {}} term="created" value="2024-10-29">
+            <Filter class="size-3" />
+            created:2024-10-29
+        </DateTrigger>
+        <DateTrigger changed={() => {}} term="updated" value="2024-11-01">
+            <Filter class="size-3" />
+            updated:2024-11-01
+        </DateTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <DateTrigger changed={() => {}} term="date" value="2024-01-15" />
+        <DateTrigger changed={() => {}} term="created" value="2024-10-29" />
+        <DateTrigger changed={() => {}} term="updated" value="2024-11-01" />
+    </div>
+</Story>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/date-faceted-filter-trigger.svelte

@@ -4,22 +4,20 @@
 
     import { DateFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: DateFilter) => void;
         term: string;
         value?: string;
     };
     let { changed, children, class: className, term, value, ...props }: Props = $props();
-
-    const title = `Search ${term}:${value}`;
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
-    onclick={() => changed(new DateFilter(term, value))}
-    {title}
-    class={[children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    onclick={() => changed(new DateFilter(term, value ?? undefined))}
+    title={`Search ${term}:${value}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}