Improve error toast readability

Error toasts could grow taller than the screen and sometimes showed the
same message in both the title and the description. Cap the title height,
split .NET error strings at the inner-exception marker (" ---> ") as well
as the first stack frame so the title stays short, and de-duplicate JS
errors whose stack already repeats the message. Also fix the copy-button
checkmark, which rendered white (invisible) in light mode.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: myieye

frontend/viewer/src/lib/components/ui/sonner/sonner.svelte

@@ -34,13 +34,14 @@ I.e. If there's small, big, small, then sonner thinks the big one is small and p
     classes: {
       toast:
         'gap-3 group toast data-[expanded="true"]:h-max! data-[expanded="true"]:max-h-max group-[.toaster]:bg-background! group-[.toaster]:border-border! group-[.toaster]:shadow-lg',
+      title: 'line-clamp-4',
       description:
         'group-[.toast]:text-muted-foreground! max-h-[30vh] overflow-y-auto whitespace-break-spaces touch-pan-y' /* pan-y means the browser should handle y-scrolling (and NOT x-scrolling, which is for swiping away) */,
       actionButton: buttonVariants({
         size: 'sm',
         variant: 'default',
         class:
-          'group-[.toast]:bg-primary! group-[.toast]:text-primary-foreground! h-9! min-h-9 px-3! group-[.toast[data-type="error"]]:i-mdi-content-copy [&.copied]:i-mdi-check! group-[.toast[data-promise="true"][data-type="loading"]]:hidden!',
+          'group-[.toast]:bg-primary! group-[.toast]:text-primary-foreground! h-9! min-h-9 px-3! group-[.toast[data-type="error"]]:i-mdi-content-copy group-[.toast[data-type="error"]]:[&.copied]:i-mdi-check group-[.toast[data-promise="true"][data-type="loading"]]:hidden!',
       }),
       cancelButton: buttonVariants({
         size: 'sm',

frontend/viewer/src/lib/errors/global-errors.test.ts

@@ -0,0 +1,50 @@
+import {describe, expect, it} from 'vitest';
+
+import {processErrorIntoDetails} from './global-errors';
+
+describe('processErrorIntoDetails', () => {
+  it('splits a .NET error at the first stack frame', () => {
+    const message = [
+      'System.InvalidOperationException: Everything is broken.',
+      '   at FwLiteShared.Services.Foo.Bar(String x)',
+      '   at FwLiteShared.Services.Foo.Baz()',
+    ].join('\n');
+
+    const {message: title, detail} = processErrorIntoDetails({message, error: null});
+
+    expect(title).toBe('System.InvalidOperationException: Everything is broken.');
+    expect(detail).toContain('at FwLiteShared.Services.Foo.Bar(String x)');
+  });
+
+  it('splits at the inner-exception marker that precedes the outer frames, keeping a wrapped error\'s title short', () => {
+    // MSAL wrapping an Android network failure: the whole " ---> " cascade comes before the first managed frame
+    const message = [
+      'Microsoft.Identity.Client.MsalServiceException: Failed to retrieve OIDC configuration. See inner exception.',
+      ' ---> System.Net.Http.HttpRequestException: Connection failure',
+      ' ---> Java.Net.UnknownHostException: Unable to resolve host',
+      '   at Java.Interop.JniEnvironment.InstanceMethods.CallVoidMethod()',
+    ].join('\n');
+
+    const {message: title, detail} = processErrorIntoDetails({message, error: null});
+
+    expect(title).toBe('Microsoft.Identity.Client.MsalServiceException: Failed to retrieve OIDC configuration. See inner exception.');
+    expect(detail).toContain('---> System.Net.Http.HttpRequestException: Connection failure');
+  });
+
+  it('keeps the whole message as the title when there is no .NET stack', () => {
+    const {message: title, detail} = processErrorIntoDetails({message: 'plain error', error: null});
+
+    expect(title).toBe('plain error');
+    expect(detail).toBeUndefined();
+  });
+
+  it('does not repeat a JS Error message in both title and detail', () => {
+    const error = new Error('boom');
+
+    const {message: title, detail} = processErrorIntoDetails({message: 'Uncaught Error: boom', error});
+
+    expect(title).toBe('boom');
+    expect(detail).not.toContain('boom');
+    expect(detail).toContain('at ');
+  });
+});

frontend/viewer/src/lib/errors/global-errors.ts

@@ -37,20 +37,34 @@ function shouldIgnoreError(message: string): boolean {
   return false;
 }
 
-/** Matches messages/stack traces of the format:
+/** Splits a .NET error string into its leading message and the rest (stack/inner exceptions), at whichever
+comes first: the first stack frame ("   at ") or the first inner-exception marker (" ---> "). The latter matters
+because .NET prints the whole inner-exception chain before the outer frames, so without it a deeply-wrapped
+error (e.g. MSAL wrapping an Android network failure) dumps the entire cascade into the title.
 System.InvalidOperationException: Everything is broken. Here's some ice cream.
    at FwLiteShared.Services.ProjectServicesProvider.OpenCrdtProject(String projectName)
  */
-const dotnetErrorRegex = /^([\s\S]+?) {3}at /m;
+const dotnetErrorRegex = /^([\s\S]+?)(?: {3}at | ---> )/m;
 
-function processErrorIntoDetails(event: UnifiedErrorEvent): {message: string, detail?: string} {
+export function processErrorIntoDetails(event: UnifiedErrorEvent): {message: string, detail?: string} {
   const message = event.message;
   const match = dotnetErrorRegex.exec(message);
   if (match) return {message: match[1].trim(), detail: message.substring(match[1].length).trim()};
-  else if (event.error instanceof Error) return {message: message, detail: event.error.stack};
+  // A JS Error's stack repeats the message on its first line(s); use the prefix-free error message as the
+  // title and just the frames as the detail, so the message isn't shown in both slots.
+  else if (event.error instanceof Error) return {message: event.error.message || message, detail: stackFrames(event.error)};
   else return {message};
 }
 
+function stackFrames(error: Error): string | undefined {
+  const stack = error.stack;
+  if (!stack) return undefined;
+  // V8 stacks begin with error.toString() ("Error: <message>"); strip it so the detail is frames only.
+  // Other engines (Firefox/Safari) don't prepend it, so the stack is already frame-only — leave it as-is.
+  const header = error.toString();
+  return stack.startsWith(header) ? stack.slice(header.length).trim() : stack;
+}
+
 let setup = false;
 export function setupGlobalErrorHandlers() {
   if (setup) return;