Next Gen UI: November Updates (#2042)

* Adds Chrome MCP verification instruction

Adds instruction to always use the chrome mcp to verify visual and functional correctness.

This ensures consistent testing and validation, particularly with the new site /next path.

* Adds separator above project data table

Adds a separator line above the project data table for better visual separation of the header and content.

This improves the overall layout and readability of the projects page.

* Improves authentication handling

Enhances authentication logic by directly checking the access token to avoid reactivity issues with PersistedState.

Also, resets the access token to an empty string instead of null when a 401 error is encountered.

* Adds stack log level component

Adds a component to display the log level associated with a stack.

This enhances the stack card by providing users with quick insights
into the severity of events within a stack.

* Improves stack filter tooltip appearance

Enhances the stack filter tooltip to provide a better user experience by improving the visual appearance and interaction.

The tooltip trigger now indicates it is clickable.
It also now includes accessibility attributes.

* Adds skeleton for event counts

Adds a skeleton loading indicator to the stack card
while event counts are loading.
This improves the user experience by providing visual feedback
that data is being fetched.

* Adds Storybook stories for filter triggers

Creates Storybook stories for Boolean, Date, Level, Number, Project, Reference, Session, Status, String, Tag, Type, and Version filter triggers.

These stories provide visual examples of the filter trigger components, showcasing both "With Text" and "Icon Only" variations, facilitating easier development and testing.

Also, refactors faceted filter trigger components to omit ButtonProps 'value' and sets the button class to 'cursor-pointer'. Removes the title const and adds a title property to the Button component.

* Improves query performance for faceted filters.

Optimizes faceted filter queries by enabling them only when the dropdown is open, reducing unnecessary API calls and improving performance.

Adds an `enabled` option to count queries to prevent fetching data until the filter dropdown is opened. This enhancement reduces initial load times and optimizes resource usage, specifically for the project and tag faceted filters.

* Adds WebSocket client with reconnection logic

Implements a WebSocket client with automatic reconnection capabilities.

This change introduces a robust WebSocket client, managing connection state, and handling reconnections with exponential backoff. It addresses potential connection drops and ensures a stable communication channel.

The client now handles authentication failures gracefully, preventing unnecessary reconnection attempts. It includes comprehensive tests to ensure reliability and proper behavior in various scenarios.

* Updated deps

* updated deps

* Refines error handling and auth logic

Improves the error handling in the layout to prevent infinite loops and unexpected behavior by more accurately determining which errors should be retried.

This change also streamlines the authentication logic by clearing the access token only if it exists, preventing potential issues.

* Improves WebSocket client resilience

Increases the WebSocket connection timeout to provide
a more reliable connection.

Adds try/catch to WebSocket creation to handle errors.

Adds enhanced logging for debugging purposes, providing
more context on connection issues and authentication failures.

Prevents reconnection attempts after authentication failures.

* Improves token caching for auth

Introduces CachedPersistedState to improve token caching
and prevent excessive reactive signal triggers. This reduces
unnecessary reads from localStorage and optimizes the authentication flow.

Adds vitest setup to mock local storage in client tests to
avoid errors and warnings.

Fixes a logout issue where the access token was not being cleared properly.

svecosystem/runed#382

* Added eslint-plugin-query

TanStack/query#9643

* Prevents notification banner from showing during page load

* Clarifies documentation context usage.

Specifies when to use context7 for documentation
purposes, focusing on code generation, setup,
configuration steps, and library/API details.

* Updated deps

* Adds updated date to the organization view.

Extends the organization view model to include the last
updated date. This allows clients to accurately reflect the
most recent state of the organization.

* Extends organization search criteria

Expands organization search to include organization ID,
allowing users to find organizations by either name or ID.

* Added users to sidebar

* Enhances notification component with new variants

Extends the notification component to support additional variants, including impersonation and information.

These new variants allow for more versatile and informative notifications within the application. The component now accepts action and icon slots to further customize the notification's appearance and behavior, providing more context and interaction options.

* Adds impersonation notification component

Creates a notification component to inform users when they are impersonating another user.

This component includes a button to stop impersonating and redirect the user to their default organization settings.

* Hides organization list during impersonation

Ensures the organization list is not displayed when a user is impersonating another user.

This prevents unintended actions or confusion when operating under a different user's context.

* Adds admin organization search query

Introduces a new query for searching organizations in the admin section.
This enables administrators to efficiently find organizations based on
various criteria, improving overall management capabilities.

Includes necessary interface definitions for request parameters and
supports filtering by criteria, limit, mode, page, paid, and suspended
status.

* Adds impersonation notification

Adds a notification to inform users when they are impersonating an organization.
This helps to improve transparency and awareness for global administrators.
The notification is displayed only when a global admin is viewing an organization they do not belong to.

* Extends badge variants with new color options

Adds red, amber, and orange color variants to the badge component.

This allows for more diverse visual cues and improved user
interface expressiveness.

* Updates organization notification links

Updates organization notification links to use the new app router.

Adds organization over limit and suspension indicators to the organization table.

* Updates svelte and lucide dependencies.

Updates svelte and lucide dependencies to their latest versions.

These updates likely include bug fixes, performance improvements, and new features.

* Refactors organization API interfaces.

Moves the `GetAdminSearchOrganizationsParams` and `GetAdminSearchOrganizationsRequest` interfaces to the bottom of the file for better organization and readability.

* Adds impersonate organization functionality

Implements the ability for admin users to impersonate organizations.

This includes a new dialog for selecting an organization to impersonate,
the ability to stop impersonating, and updates to the sidebar to
reflect the impersonation status. It introduces pagination for the
organization selection list and provides filtering options based on
plan type and suspension status.

Also, the pagination component was refactored to use Radix UI primitives
for improved accessibility and consistency.

* Improves organization selection and display

Refactors the organization selection and display logic in the application layout.

- Introduces a new `PageNumber` component for consistent pagination display.
- Updates the organization switcher to handle impersonated organizations.
- Redirects non-admin users to the add organization page if no organizations exist.
- Ensures the first organization is selected if none is currently selected.

* Enhances organization selection UI

Improves the organization selection dialog by adding total count display and adjusting pagination layout for better responsiveness on smaller screens.

* Uses current organization ID directly

Simplifies organization notifications by using the current organization ID directly.

This avoids storing the organization ID separately, streamlining the component's logic and ensuring it always reflects the currently selected organization.

* Enhances organization impersonation flow

Improves the organization impersonation feature by streamlining navigation and updating the organization context directly.

This change simplifies the process of switching between organizations when impersonating, ensuring a smoother user experience.

It also fixes an issue where query string parameters might be applied during redirection.

* Updates routes to use resolve function

Updates all internal links to use the resolve function for improved route handling and consistency.

This change ensures that all routes are correctly resolved, regardless of the base URL or environment configuration. It replaces hardcoded paths with dynamically generated paths using the resolve function.

* Improves text wrapping and reactivity.

Refactors several components to improve text wrapping and whitespace handling for better readability, especially in code and stack trace displays.

Additionally, updates multiple components to use `$derived` for reactive property updates, ensuring UI elements are updated efficiently in response to data changes.

This change enhances the user experience by ensuring text is displayed correctly and UI elements react appropriately to changes in data.

* Navigates to app route before updating state

Ensures the application navigates to the main app route before updating the organization state during impersonation or when stopping impersonation. This resolves potential issues where the state update might occur before the route is fully loaded, leading to inconsistent behavior.

* Regenerated api.ts

Comparing the uncommitted changes to the git branch version, here are the actual code differences (ignoring comments, whitespace, and quote styles):

Key Changes:
Added // @ts-nocheck at line 3
Moved StackStatus enum to the top of the file (before BillingStatus)
Removed multi-line comment documentation for BillingStatus enum (the one explaining 0=Trialing, 1=Active, etc.)
Removed multi-line comment documentation for StackStatus enum (the one explaining the enum values)
Reordered enum exports - StackStatus now comes before BillingStatus
Changed card_last4 property in ViewOrganization - was quoted as a string key ('card_last4') in the git version, now it's a regular identifier (card_last4)
Removed multi-line comment for BillingStatus enum in the ViewOrganization class (the one explaining billing status values)
Reformatted code with different indentation and line breaks (but this is purely whitespace)
Summary:
The substantive code changes are:

Addition of @ts-nocheck directive
Reordering of StackStatus and BillingStatus enums
Removal of verbose comment documentation for enum values
Fix of card_last4 property formatting (removed unnecessary quotes)

Author: niemyjski

.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-lock.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/package.json

@@ -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/auth/index.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/api.svelte.ts

@@ -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/extended-data-item.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>