fix: add error handling for base64 decode operations

Fixes SPOTLIGHT-ELECTRON-4C
Fixes SPOTLIGHT-ELECTRON-4G

The atob() function throws InvalidCharacterError when decoding invalid
base64 strings. This was causing crashes when viewing attachments with
corrupted or malformed base64 data.

Changes:
- Update base64Decode() to return null on decode failure
- Add error handling in Attachment.tsx with user-friendly error message
- Add error handling in QuerySummary.tsx for URL param decode failures

Author: BYK

packages/spotlight/src/ui/lib/base64.ts

@@ -1,5 +1,14 @@
-export function base64Decode(data: string): Uint8Array {
+/**
+ * Decodes a base64-encoded string to a Uint8Array.
+ * Returns null if the input is not valid base64.
+ */
+export function base64Decode(data: string): Uint8Array | null {
   // TODO: Use Uint8Array.fromBase64 when it becomes available
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array/fromBase64
-  return Uint8Array.from(atob(data), c => c.charCodeAt(0));
+  try {
+    return Uint8Array.from(atob(data), c => c.charCodeAt(0));
+  } catch {
+    // atob throws InvalidCharacterError for invalid base64 strings
+    return null;
+  }
 }

packages/spotlight/src/ui/telemetry/components/insights/QuerySummary.tsx

@@ -37,7 +37,15 @@ const QuerySummary = () => {
   const { sort, toggleSortOrder } = useSort({ defaultSortType: QUERY_SUMMARY_SORT_KEYS.totalTime });
 
   // Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/atob
-  const decodedType = type && atob(type);
+  // Wrap in try-catch to handle invalid base64 URL parameters gracefully
+  const decodedType = useMemo(() => {
+    if (!type) return null;
+    try {
+      return atob(type);
+    } catch {
+      return null;
+    }
+  }, [type]);
 
   const filteredDBSpans: Span[] = useMemo(() => {
     if (!decodedType) {

packages/spotlight/src/ui/telemetry/components/insights/envelopes/Attachment.tsx

@@ -11,6 +11,18 @@ const CODE_CONTENT_TYPES = new Set(["text/css", "text/html", "text/javascript"])
 const IMAGE_CONTENT_TYPES = new Set(["image/png", "image/jpeg", "image/gif", "image/webp", "image/avif"]);
 const VIDEO_CONTENT_TYPES = new Set(["video/mp4", "video/webm"]);
 
+/**
+ * Safely decode a base64 string using atob().
+ * Returns null if decoding fails (invalid base64).
+ */
+function safeAtob(data: string): string | null {
+  try {
+    return atob(data);
+  } catch {
+    return null;
+  }
+}
+
 export default function Attachment({
   header,
   attachment,
@@ -21,20 +33,33 @@ export default function Attachment({
   expanded?: boolean;
 }) {
   const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+  const [decodeError, setDecodeError] = useState<boolean>(false);
   const extension = inferExtension(header.content_type as string | null, header.type as string | null);
   const name = (header.filename as string) || `untitled.${extension}`;
 
   const createDownloadUrl = useCallback(() => {
-    const blob = new Blob(
-      [
-        IMAGE_CONTENT_TYPES.has(header.content_type as string) || VIDEO_CONTENT_TYPES.has(header.content_type as string)
-          ? (base64Decode(attachment).buffer as BlobPart)
-          : extension === "bin"
-            ? atob(attachment)
-            : attachment,
-      ],
-      { type: (header.content_type as string) || "application/octet-stream" },
-    );
+    let blobData: BlobPart;
+    const contentType = header.content_type as string;
+
+    if (IMAGE_CONTENT_TYPES.has(contentType) || VIDEO_CONTENT_TYPES.has(contentType)) {
+      const decoded = base64Decode(attachment);
+      if (!decoded) {
+        setDecodeError(true);
+        return null;
+      }
+      blobData = decoded.buffer as BlobPart;
+    } else if (extension === "bin") {
+      const decoded = safeAtob(attachment);
+      if (decoded === null) {
+        setDecodeError(true);
+        return null;
+      }
+      blobData = decoded;
+    } else {
+      blobData = attachment;
+    }
+
+    const blob = new Blob([blobData], { type: contentType || "application/octet-stream" });
     const url = URL.createObjectURL(blob);
     setDownloadUrl(current => {
       if (current) {
@@ -49,10 +74,10 @@ export default function Attachment({
     if (!expanded) {
       return;
     }
-    if (!downloadUrl) {
+    if (!downloadUrl && !decodeError) {
       createDownloadUrl();
     }
-  }, [expanded, downloadUrl, createDownloadUrl]);
+  }, [expanded, downloadUrl, decodeError, createDownloadUrl]);
 
   useEffect(
     () => () => {
@@ -66,7 +91,13 @@ export default function Attachment({
   let content: ReactNode = null;
 
   if (expanded) {
-    if (header.content_type === "text/plain" || header.content_type === "text/csv") {
+    if (decodeError) {
+      content = (
+        <pre className="text-destructive-400 whitespace-pre-wrap break-words font-mono text-sm rounded-sm bg-primary-900 p-2">
+          Failed to decode attachment data. The base64 data may be corrupted or invalid.
+        </pre>
+      );
+    } else if (header.content_type === "text/plain" || header.content_type === "text/csv") {
       content = (
         <pre className="text-primary-300 whitespace-pre-wrap break-words font-mono text-sm rounded-sm bg-primary-900 p-2">
           {attachment}