Next: Project Management

.github/copilot-instructions.md

@@ -38,6 +38,7 @@ Located in the `src/Exceptionless.Web/ClientApp` directory.
   - Code can be formatted and linted with `npm run format` and checked for errors with `npm run check` tasks.
   - Don't use namespace imports unless importing svelte-shadcn component or from a barrel export index file.
   - Limit use of $effect as there is usually a better way to solve the problem like using $derived.
+  - All single-line control statements in JavaScript must be enclosed in curly braces to ensure unambiguous control flow, enhance readability, and prevent potential errors arising from unintended statement grouping.
 
 - **Architecture & Components:**
   - Follow the Composite Component Pattern.

.vscode/launch.json

@@ -1,12 +1,28 @@
 {
   "version": "0.2.0",
   "configurations": [
+    {
+      "name": "Aspire",
+      "type": "coreclr",
+      "request": "launch",
+      "preLaunchTask": "build",
+      "program": "${workspaceFolder}/src/Exceptionless.AppHost/bin/Debug/net9.0/Exceptionless.AppHost.dll",
+      "args": [],
+      "cwd": "${workspaceFolder}/src/Exceptionless.AppHost",
+      "stopAtEntry": false,
+      "serverReadyAction": {
+        "action": "openExternally",
+        "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
+      },
+      "env": {
+        "AppMode": "Development"
+      }
+    },
     {
       "name": "Web",
       "type": "coreclr",
       "request": "launch",
       "preLaunchTask": "build",
-      // If you have changed target frameworks, make sure to update the program path.
       "program": "${workspaceFolder}/src/Exceptionless.Web/bin/Debug/net9.0/Exceptionless.Web.dll",
       "args": [],
       "cwd": "${workspaceFolder}/src/Exceptionless.Web",
@@ -24,7 +40,6 @@
       "type": "coreclr",
       "request": "launch",
       "preLaunchTask": "build",
-      // If you have changed target frameworks, make sure to update the program path.
       "program": "${workspaceFolder}/src/Exceptionless.Job/bin/Debug/net9.0/Exceptionless.Job.dll",
       "args": [],
       "cwd": "${workspaceFolder}",

.vscode/settings.json

@@ -17,6 +17,7 @@
         "clsx",
         "cmdk",
         "colour",
+        "Contoso",
         "dockerignore",
         "editorconfig",
         "elasticsearch",
@@ -43,6 +44,8 @@
         "Serilog",
         "sessionend",
         "shadcn",
+        "shiki",
+        "shikijs",
         "sonner",
         "standardjs",
         "superforms",
@@ -51,6 +54,7 @@
         "typeschema",
         "WCAG",
         "websockets",
+        "Writeline",
         "Xunit"
     ],
     "css.customData": [

src/Exceptionless.Web/ClientApp/.npmrc

@@ -1,2 +1 @@
 engine-strict=true
-resolution-mode=highest

src/Exceptionless.Web/ClientApp/package.json

@@ -25,70 +25,72 @@
         "upgrade": "ncu -i"
     },
     "devDependencies": {
-        "@chromatic-com/storybook": "^3.2.5",
-        "@eslint/compat": "^1.2.7",
-        "@eslint/js": "^9.22.0",
-        "@iconify-json/lucide": "^1.2.29",
-        "@playwright/test": "^1.51.0",
-        "@storybook/addon-a11y": "^8.6.4",
-        "@storybook/addon-essentials": "^8.6.4",
-        "@storybook/addon-interactions": "^8.6.4",
-        "@storybook/addon-svelte-csf": "^5.0.0-next.26",
-        "@storybook/blocks": "^8.6.4",
-        "@storybook/svelte": "^8.6.4",
-        "@storybook/sveltekit": "^8.6.4",
-        "@storybook/test": "^8.6.4",
+        "@chromatic-com/storybook": "^3.2.6",
+        "@eslint/compat": "^1.2.8",
+        "@eslint/js": "^9.25.0",
+        "@iconify-json/lucide": "^1.2.37",
+        "@playwright/test": "^1.52.0",
+        "@storybook/addon-a11y": "^8.6.12",
+        "@storybook/addon-essentials": "^8.6.12",
+        "@storybook/addon-interactions": "^8.6.12",
+        "@storybook/addon-svelte-csf": "^5.0.0-next.28",
+        "@storybook/blocks": "^8.6.12",
+        "@storybook/svelte": "^8.6.12",
+        "@storybook/sveltekit": "^8.6.12",
+        "@storybook/test": "^8.6.12",
         "@sveltejs/adapter-static": "^3.0.8",
-        "@sveltejs/kit": "^2.19.0",
+        "@sveltejs/kit": "^2.20.7",
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
-        "@tailwindcss/vite": "^4.0.12",
+        "@tailwindcss/vite": "^4.1.4",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/svelte": "^5.2.7",
         "@types/eslint": "^9.6.1",
-        "@types/node": "^22.13.10",
+        "@types/node": "^22.14.1",
         "@types/throttle-debounce": "^5.0.2",
         "cross-env": "^7.0.3",
-        "eslint": "^9.22.0",
-        "eslint-config-prettier": "^10.1.1",
-        "eslint-plugin-perfectionist": "^4.10.1",
-        "eslint-plugin-svelte": "^3.1.0",
-        "jsdom": "^26.0.0",
+        "eslint": "^9.25.0",
+        "eslint-config-prettier": "^10.1.2",
+        "eslint-plugin-perfectionist": "^4.11.0",
+        "eslint-plugin-svelte": "^3.5.1",
+        "jsdom": "^26.1.0",
         "prettier": "^3.5.3",
         "prettier-plugin-svelte": "^3.3.3",
         "prettier-plugin-tailwindcss": "^0.6.11",
-        "storybook": "^8.6.4",
-        "svelte": "^5.22.6",
-        "svelte-check": "^4.1.5",
-        "swagger-typescript-api": "^13.0.23",
+        "storybook": "^8.6.12",
+        "svelte": "^5.28.1",
+        "svelte-check": "^4.1.6",
+        "swagger-typescript-api": "^13.1.1",
         "tslib": "^2.8.1",
-        "typescript": "^5.8.2",
-        "typescript-eslint": "^8.26.1",
-        "vite": "^6.2.1",
-        "vitest": "3.0.8"
+        "typescript": "^5.8.3",
+        "typescript-eslint": "^8.30.1",
+        "vite": "^6.3.2",
+        "vitest": "3.1.1"
     },
     "dependencies": {
         "@exceptionless/browser": "^3.1.0",
         "@exceptionless/fetchclient": "^0.40.0",
-        "@tanstack/svelte-query": "https://pkg.pr.new/@tanstack/svelte-query@28f98f9",
-        "@tanstack/svelte-query-devtools": "https://pkg.pr.new/@tanstack/svelte-query-devtools@28f98f9",
+        "@tanstack/svelte-query": "https://pkg.pr.new/@tanstack/svelte-query@8c9ce9",
+        "@tanstack/svelte-query-devtools": "https://pkg.pr.new/@tanstack/svelte-query-devtools@8c9ce9",
         "@tanstack/svelte-table": "^9.0.0-alpha.10",
         "@typeschema/class-validator": "^0.3.0",
-        "bits-ui": "^1.3.9",
+        "bits-ui": "^1.3.19",
         "class-validator": "^0.14.1",
         "clsx": "^2.1.1",
-        "formsnap": "^2.0.0",
+        "dompurify": "^3.2.5",
+        "formsnap": "^2.0.1",
         "kit-query-params": "^0.0.26",
-        "lucide-svelte": "^0.479.0",
-        "mode-watcher": "^0.5.1",
-        "oidc-client-ts": "^3.1.0",
+        "@lucide/svelte": "^0.501.0",
+        "mode-watcher": "^1.0.2",
+        "oidc-client-ts": "^3.2.0",
         "pretty-ms": "^9.2.0",
-        "runed": "^0.24.0",
+        "runed": "^0.25.0",
+        "shiki": "^3.2.2",
         "svelte-sonner": "^0.3.28",
         "svelte-time": "^2.0.1",
-        "sveltekit-superforms": "^2.24.0",
-        "tailwind-merge": "^3.0.2",
+        "sveltekit-superforms": "^2.24.1",
+        "tailwind-merge": "^3.2.0",
         "tailwind-variants": "^1.0.0",
-        "tailwindcss": "^4.0.12",
+        "tailwindcss": "^4.1.4",
         "throttle-debounce": "^5.0.2"
     },
     "type": "module"

src/Exceptionless.Web/ClientApp/resources.md

@@ -5,6 +5,8 @@
 ### TODO
 
 - Investigate loading data in - export function load({ url, fetch }) {}
+- <https://svelte.dev/docs/svelte/class#The-class:-directive> migrate from cn / cslx
+- IsBoolean on model gen.
 
 #### shadcn svelte upgrade
 

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

@@ -6,6 +6,26 @@ import { PersistedState } from 'runed';
 
 import type { Login, TokenResult } from './models';
 
+export interface OAuthLoginOptions extends OAuthPopupOptions {
+    redirectUrl?: string;
+}
+
+export interface OAuthPopupOptions {
+    authUrl: string;
+    clientId: string;
+    extraParams?: Record<string, string>;
+    popupOptions?: { height: number; width: number };
+    provider: SupportedOAuthProviders;
+    scope: string;
+}
+
+export interface OAuthResponseData {
+    code: string;
+    state: string;
+}
+
+export type SupportedOAuthProviders = 'facebook' | 'github' | 'google' | 'live' | 'slack';
+
 const authSerializer = {
     deserialize: (value: null | string): null | string => {
         if (value === '') {
@@ -30,6 +50,7 @@ export const facebookClientId = env.PUBLIC_FACEBOOK_APPID;
 export const gitHubClientId = env.PUBLIC_GITHUB_APPID;
 export const googleClientId = env.PUBLIC_GOOGLE_APPID;
 export const microsoftClientId = env.PUBLIC_MICROSOFT_APPID;
+export const slackClientId = env.PUBLIC_SLACK_APPID;
 export const enableOAuthLogin = facebookClientId || gitHubClientId || googleClientId || microsoftClientId;
 
 export async function facebookLogin(redirectUrl?: string) {
@@ -128,15 +149,43 @@ export async function logout() {
     accessToken.current = null;
 }
 
-async function oauthLogin(options: {
-    authUrl: string;
-    clientId: string;
-    extraParams?: Record<string, string>;
-    popupOptions?: { height: number; width: number };
-    provider: string;
-    redirectUrl?: string;
-    scope: string;
-}) {
+export async function slackOAuthLogin(): Promise<string> {
+    if (!slackClientId) {
+        throw new Error('Slack client id not set');
+    }
+
+    const data = await openOAuthPopup({
+        authUrl: 'https://slack.com/oauth/authorize',
+        clientId: slackClientId,
+        extraParams: {
+            state: encodeURIComponent(Math.random().toString(36).substring(2))
+        },
+        popupOptions: { height: 630, width: 580 },
+        provider: 'slack',
+        scope: 'incoming-webhook'
+    });
+
+    return data.code;
+}
+
+async function oauthLogin(options: OAuthLoginOptions) {
+    const data = await openOAuthPopup(options);
+
+    const client = useFetchClient();
+    const response = await client.postJSON<TokenResult>(`auth/${options.provider}`, {
+        clientId: options.clientId,
+        code: data.code,
+        redirectUri: window.location.origin,
+        state: data.state
+    });
+
+    if (response.ok && response.data?.token) {
+        accessToken.current = response.data.token;
+        await goto(options.redirectUrl || '/');
+    }
+}
+
+async function openOAuthPopup(options: OAuthPopupOptions): Promise<OAuthResponseData> {
     const width = options.popupOptions?.width || 500;
     const height = options.popupOptions?.height || 500;
     const features = {
@@ -158,25 +207,19 @@ async function oauthLogin(options: {
     );
 
     const url = `${options.authUrl}?${new URLSearchParams(params).toString()}`;
-
     const popup = window.open(url, options.provider, stringifyOptions(features));
-    popup?.focus();
-
-    const data = await waitForUrl(popup!, redirectUrl);
-    if (options.extraParams?.state && data.state !== options.extraParams.state) throw new Error('Invalid state');
+    if (!popup) {
+        throw new Error('Failed to open popup window');
+    }
 
-    const client = useFetchClient();
-    const response = await client.postJSON<TokenResult>(`auth/${options.provider}`, {
-        clientId: options.clientId,
-        code: data.code,
-        redirectUri: redirectUrl,
-        state: data.state
-    });
+    popup.focus();
 
-    if (response.ok && response.data?.token) {
-        accessToken.current = response.data.token;
-        await goto(options.redirectUrl || '/');
+    const data = await waitForUrl(popup!, redirectUrl);
+    if (options.extraParams?.state && data.state !== options.extraParams.state) {
+        throw new Error('Invalid state');
     }
+
+    return data;
 }
 
 function stringifyOptions(options: object): string {
@@ -189,7 +232,7 @@ function stringifyOptions(options: object): string {
     return parts.join(',');
 }
 
-function waitForUrl(popup: Window, redirectUri: string): Promise<{ code: string; state: string }> {
+function waitForUrl(popup: Window, redirectUri: string): Promise<OAuthResponseData> {
     return new Promise((resolve, reject) => {
         const polling = setInterval(() => {
             if (!popup || popup.closed || popup.closed === undefined) {
@@ -210,7 +253,7 @@ function waitForUrl(popup: Window, redirectUri: string): Promise<{ code: string;
                         if ('error' in params && (params as { error: string }).error) {
                             reject(new Error((params as { error: string }).error));
                         } else {
-                            resolve(params);
+                            resolve(params as OAuthResponseData);
                         }
                     } else {
                         reject(

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

@@ -230,7 +230,7 @@ export function getStackCountQuery(request: GetStackCountRequest) {
 
             return response.data!;
         },
-        queryKey: queryKeys.stacksCount(request.route.stackId)
+        queryKey: [...queryKeys.stacksCount(request.route.stackId), { params: request.params }]
     }));
 }