From ae306e3d60e908a30fb128cf53c33c7ca3b888a3 Mon Sep 17 00:00:00 2001
From: "Eric J. Smith" <eric@codesmithtools.com>
Date: Thu, 28 May 2026 09:45:32 -0500
Subject: [PATCH 1/2] fix: stack trace styling and event navigation flash

- Fix event navigation flash by using keepPreviousData in TanStack Query
- Style stack trace pre elements with bg-muted/50, rounded-xl, border
- Fix Code component: use cn() for proper class merging, collapse template
  to avoid whitespace in pre elements, restore bg-muted default
- Change copy stack trace button to outline variant matching other icons
---
 .../ClientApp/src/lib/features/events/api.svelte.ts       | 7 ++-----
 .../simple-stack-trace/simple-stack-trace.svelte          | 2 +-
 .../events/components/stack-trace/stack-trace.svelte      | 2 +-
 .../src/lib/features/events/components/views/error.svelte | 2 +-
 .../lib/features/events/components/views/overview.svelte  | 2 +-
 .../lib/features/shared/components/typography/code.svelte | 8 +++-----
 6 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts
index e51863267e..b452b71912 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts
@@ -4,7 +4,7 @@ import type { CountResult, WorkInProgressResult } from '$shared/models';
 import { accessToken } from '$features/auth/index.svelte';
 import { DEFAULT_OFFSET } from '$shared/api/api.svelte';
 import { type ProblemDetails, useFetchClient } from '@exceptionless/fetchclient';
-import { createMutation, createQuery, QueryClient, useQueryClient } from '@tanstack/svelte-query';
+import { createMutation, createQuery, keepPreviousData, QueryClient, useQueryClient } from '@tanstack/svelte-query';
 
 import type { EventSummaryModel, SummaryTemplateKeys } from './components/summary/index';
 import type { PersistentEvent } from './models';
@@ -215,10 +215,7 @@ export function getEventWithNavigationQuery(request: GetEventRequest) {
     const queryClient = useQueryClient();
     return createQuery<EventWithNavigation, ProblemDetails>(() => ({
         enabled: () => !!accessToken.current && !!request.route.id,
-        placeholderData: () => {
-            const cachedEvent = queryClient.getQueryData<PersistentEvent>(queryKeys.id(request.route.id));
-            return cachedEvent ? { event: cachedEvent, navigation: { nextId: null, previousId: null } } : undefined;
-        },
+        placeholderData: keepPreviousData,
         queryFn: async ({ signal }: { signal: AbortSignal }) => {
             const client = useFetchClient();
             const response = await client.getJSON<PersistentEvent>(`events/${request.route.id}`, {
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte
index eb93c277e0..1ba65f1bf8 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte
@@ -16,7 +16,7 @@
     const errors = $derived(getErrors(error));
 </script>
 
-<pre class="bg-muted rounded p-2 wrap-break-word whitespace-pre-wrap"><Code class="px-0"
+<pre class="bg-muted/50 rounded-xl border border-border p-2 wrap-break-word whitespace-pre-wrap"><Code class="bg-transparent px-0 py-0"
         >{#each errors.reverse() as error, index (index)}<SimpleStackTraceHeader {error} /><SimpleStackTraceFrames {error} />{#if index < errors.length - 1}<br
                 />{/if}{/each}</Code
     ></pre>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte
index 87cdf795c8..8d29dae086 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte
@@ -16,7 +16,7 @@
     const errors = $derived(getErrors(error));
 </script>
 
-<pre class="bg-muted rounded p-2 wrap-break-word whitespace-pre-wrap"><Code class="px-0"
+<pre class="bg-muted/50 rounded-xl border border-border p-2 wrap-break-word whitespace-pre-wrap"><Code class="bg-transparent px-0 py-0"
         >{#each errors.reverse() as error, index (index)}<StackTraceHeader {error} /><StackTraceFrames {error} />{#if index < errors.length - 1}<br
                 />{/if}{/each}</Code
     ></pre>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/error.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/error.svelte
index 6dbfa7627e..b8b444fe20 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/error.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/error.svelte
@@ -64,7 +64,7 @@
 <div class="mt-4 mb-2 flex justify-between">
     <H3>Stack Trace</H3>
     <div class="flex justify-end">
-        <CopyToClipboardButton title="Copy Stack Trace to Clipboard" value={stackTrace}></CopyToClipboardButton>
+        <CopyToClipboardButton size="icon-sm" title="Copy Stack Trace to Clipboard" value={stackTrace} variant="outline"></CopyToClipboardButton>
     </div>
 </div>
 <div class="mt-2 mb-4 overflow-auto text-xs">
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/overview.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/overview.svelte
index ba40895e28..7c1585213f 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/overview.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/overview.svelte
@@ -227,7 +227,7 @@
     <div class="mt-4 flex justify-between">
         <H3>Stack Trace</H3>
         <div class="flex justify-end">
-            <CopyToClipboardButton title="Copy Stack Trace to Clipboard" value={stackTrace}></CopyToClipboardButton>
+            <CopyToClipboardButton size="icon-sm" title="Copy Stack Trace to Clipboard" value={stackTrace} variant="outline"></CopyToClipboardButton>
         </div>
     </div>
     <div class="mt-2 max-h-75 grow overflow-auto text-xs">
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/typography/code.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/typography/code.svelte
index a5d87eefa0..3374aee9cd 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/typography/code.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/typography/code.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
     import type { HTMLAttributes } from 'svelte/elements';
 
+    import { cn } from '$lib/utils';
+
     type Props = HTMLAttributes<Element>;
 
     let { children, class: className, ...props }: Props = $props();
 </script>
 
-<code class={['bg-muted relative rounded px-[0.6rem] py-2 font-mono text-sm', className]} {...props}>
-    {#if children}
-        {@render children()}
-    {/if}
-</code>
+<code class={cn('bg-muted relative rounded px-[0.6rem] py-2 font-mono text-sm', className)} {...props}>{#if children}{@render children()}{/if}</code>

From c88232f819ceaef5552ca25f02bdaa32c283b5d7 Mon Sep 17 00:00:00 2001
From: "Eric J. Smith" <eric@codesmithtools.com>
Date: Thu, 28 May 2026 10:12:56 -0500
Subject: [PATCH 2/2] Polish event detail sheet: tabs, stack traces, syntax
 colors

- Restyle event tabs to match settings nav (bg-muted, gap, rounded-lg)
- Add active tab dark mode styling (bg-background, shadow-xs)
- Update stack trace container (bg-muted/50, rounded-xl, border)
- Fix code component whitespace and use cn() for class merging
- Change syntax colors: purple-400 -> purple-300, emerald-400 -> green-300
- Restyle copy buttons to icon-sm outline variant
- Use keepPreviousData to prevent flash on event navigation
---
 .../lib/features/events/components/events-overview.svelte  | 7 +++++--
 .../simple-stack-trace/simple-stack-trace-header.svelte    | 2 +-
 .../simple-stack-trace/simple-stack-trace.svelte           | 2 +-
 .../stack-trace/stack-trace-frame-generic-arguments.svelte | 2 +-
 .../stack-trace/stack-trace-frame-method-name.svelte       | 2 +-
 .../stack-trace/stack-trace-frame-namespace.svelte         | 2 +-
 .../stack-trace-frame-parameter-generic-arguments.svelte   | 2 +-
 .../stack-trace-frame-parameter-namespace.svelte           | 2 +-
 .../components/stack-trace/stack-trace-header.svelte       | 2 +-
 .../events/components/stack-trace/stack-trace.svelte       | 2 +-
 .../lib/features/shared/components/typography/code.svelte  | 4 +++-
 11 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-overview.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-overview.svelte
index 5632e0d5e3..49062a1ad6 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-overview.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-overview.svelte
@@ -293,11 +293,14 @@
                 {/if}
                 <Tabs.List
                     bind:ref={tabsListRef}
-                    class="no-scrollbar w-full justify-normal overflow-x-auto overflow-y-hidden scroll-smooth"
+                    class="no-scrollbar h-auto w-full justify-normal gap-1 overflow-x-auto overflow-y-hidden scroll-smooth p-1"
                     onscroll={updateTabsOverflow}
                 >
                     {#each tabs as tab (tab)}
-                        <Tabs.Trigger class="flex-none px-3" value={tab}>{tab}</Tabs.Trigger>
+                        <Tabs.Trigger
+                            class="dark:data-[state=active]:bg-background flex-none shrink-0 px-3 py-1.5 data-[state=active]:shadow-xs dark:data-[state=active]:border-transparent"
+                            value={tab}>{tab}</Tabs.Trigger
+                        >
                     {/each}
                 </Tabs.List>
                 {#if canScrollTabsRight}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace-header.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace-header.svelte
index afbf36e288..42cdfe2cf0 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace-header.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace-header.svelte
@@ -9,5 +9,5 @@
 </script>
 
 <div class="bg-inherit">
-    {#if error.type}<span class="mr-1 font-bold text-purple-400">{error.type}:</span>{/if}{#if error.message}{error.message}{/if}
+    {#if error.type}<span class="mr-1 font-bold text-purple-300">{error.type}:</span>{/if}{#if error.message}{error.message}{/if}
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte
index 1ba65f1bf8..d1555ad49f 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte
@@ -16,7 +16,7 @@
     const errors = $derived(getErrors(error));
 </script>
 
-<pre class="bg-muted/50 rounded-xl border border-border p-2 wrap-break-word whitespace-pre-wrap"><Code class="bg-transparent px-0 py-0"
+<pre class="bg-muted/50 border-border rounded-xl border p-2 wrap-break-word whitespace-pre-wrap"><Code class="bg-transparent px-0 py-0"
         >{#each errors.reverse() as error, index (index)}<SimpleStackTraceHeader {error} /><SimpleStackTraceFrames {error} />{#if index < errors.length - 1}<br
                 />{/if}{/each}</Code
     ></pre>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-generic-arguments.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-generic-arguments.svelte
index 570168cb6b..2df9b8e836 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-generic-arguments.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-generic-arguments.svelte
@@ -8,4 +8,4 @@
     let { frame }: Props = $props();
 </script>
 
-{#if frame.generic_arguments?.length}&lt;<span class="text-purple-400">{frame.generic_arguments.join(', ')}</span>&gt;{/if}
+{#if frame.generic_arguments?.length}&lt;<span class="text-purple-300">{frame.generic_arguments.join(', ')}</span>&gt;{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-method-name.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-method-name.svelte
index e61c495a2c..0952bcf033 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-method-name.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-method-name.svelte
@@ -8,4 +8,4 @@
     let { frame }: Props = $props();
 </script>
 
-<span class="text-emerald-400">{frame.name || '<anonymous>'}</span>
+<span class="text-green-300">{frame.name || '<anonymous>'}</span>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-namespace.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-namespace.svelte
index 33ff55b706..da9b91dcc9 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-namespace.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-namespace.svelte
@@ -8,6 +8,6 @@
     let { frame }: Props = $props();
 </script>
 
-{#if frame.declaring_namespace || frame.declaring_type}<span class="text-purple-400"
+{#if frame.declaring_namespace || frame.declaring_type}<span class="text-purple-300"
         >{#if frame.declaring_namespace}{frame.declaring_namespace}.{/if}{#if frame.declaring_type}{frame.declaring_type.replace('+', '')}.{/if}</span
     >{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-parameter-generic-arguments.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-parameter-generic-arguments.svelte
index 66a21750b4..f94a43e530 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-parameter-generic-arguments.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-parameter-generic-arguments.svelte
@@ -8,4 +8,4 @@
     let { parameter }: Props = $props();
 </script>
 
-{#if parameter.generic_arguments?.length}&lt;<span class="text-purple-400">{parameter.generic_arguments.join(', ')}</span>&gt;{/if}
+{#if parameter.generic_arguments?.length}&lt;<span class="text-purple-300">{parameter.generic_arguments.join(', ')}</span>&gt;{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-parameter-namespace.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-parameter-namespace.svelte
index 22af5f55a3..5a180c7b67 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-parameter-namespace.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-frame-parameter-namespace.svelte
@@ -8,6 +8,6 @@
     let { parameter }: Props = $props();
 </script>
 
-{#if parameter.type_namespace}<span class="text-purple-400">{parameter.type_namespace}.</span>{/if}{#if parameter.type}<span class="text-purple-400"
+{#if parameter.type_namespace}<span class="text-purple-300">{parameter.type_namespace}.</span>{/if}{#if parameter.type}<span class="text-purple-300"
         >{parameter.type.replace('+', '')}</span
     >{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-header.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-header.svelte
index b3f00aecdf..3e35acdc7c 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-header.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace-header.svelte
@@ -9,5 +9,5 @@
 </script>
 
 <div class="bg-inherit">
-    {#if error.type}<span class="mr-1 font-bold text-purple-400">{error.type}:</span>{/if}{#if error.message}{error.message}{/if}
+    {#if error.type}<span class="mr-1 font-bold text-purple-300">{error.type}:</span>{/if}{#if error.message}{error.message}{/if}
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte
index 8d29dae086..5fc2821140 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte
@@ -16,7 +16,7 @@
     const errors = $derived(getErrors(error));
 </script>
 
-<pre class="bg-muted/50 rounded-xl border border-border p-2 wrap-break-word whitespace-pre-wrap"><Code class="bg-transparent px-0 py-0"
+<pre class="bg-muted/50 border-border rounded-xl border p-2 wrap-break-word whitespace-pre-wrap"><Code class="bg-transparent px-0 py-0"
         >{#each errors.reverse() as error, index (index)}<StackTraceHeader {error} /><StackTraceFrames {error} />{#if index < errors.length - 1}<br
                 />{/if}{/each}</Code
     ></pre>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/typography/code.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/typography/code.svelte
index 3374aee9cd..d27a98aec3 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/typography/code.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/typography/code.svelte
@@ -8,4 +8,6 @@
     let { children, class: className, ...props }: Props = $props();
 </script>
 
-<code class={cn('bg-muted relative rounded px-[0.6rem] py-2 font-mono text-sm', className)} {...props}>{#if children}{@render children()}{/if}</code>
+<code class={cn('bg-muted relative rounded px-[0.6rem] py-2 font-mono text-sm', className)} {...props}
+    >{#if children}{@render children()}{/if}</code
+>